Merge pull request #1040 from notmd/995_available_task

Display number of available tasks

website/src/components/Dashboard/TaskOption.tsx

@@ -1,5 +1,7 @@
 import {
+  Badge,
   Box,
+  Card,
   Flex,
   GridItem,
   Heading,
@@ -8,7 +10,6 @@ import {
   SimpleGrid,
   Spacer,
   Text,
-  useColorModeValue,
 } from "@chakra-ui/react";
 import { HelpCircle } from "lucide-react";
 import Link from "next/link";
@@ -19,19 +20,20 @@ import { TaskCategory, TaskInfo, TaskType } from "src/types/Task";
 
 import { TaskCategoryLabels, TaskInfos } from "../Tasks/TaskTypes";
 
+export type TaskCategoryItem = { taskType: TaskType; count: number };
+
 export interface TasksOptionProps {
-  content: Partial<Record<TaskCategory, TaskType[]>>;
+  content: Partial<Record<TaskCategory, TaskCategoryItem[]>>;
 }
 
 export const TaskOption = ({ content }: TasksOptionProps) => {
   const { t } = useTranslation(["dashboard", "tasks"]);
-  const backgroundColor = useColorModeValue("white", "gray.700");
 
   const taskInfoMap = useMemo(
     () =>
       Object.values(content)
         .flat()
-        .reduce((obj, taskType) => {
+        .reduce((obj, { taskType }) => {
           obj[taskType] = TaskInfos.filter((t) => t.type === taskType).pop();
           return obj;
         }, {} as Record<TaskType, TaskInfo>),
@@ -40,7 +42,7 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
 
   return (
     <Box className="flex flex-col gap-14">
-      {Object.entries(content).map(([category, taskTypes]) => (
+      {Object.entries(content).map(([category, items]) => (
         <div key={category}>
           <Flex>
             <Heading size="lg" className="pb-4">
@@ -52,24 +54,25 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
             </ExternalLink>
           </Flex>
           <SimpleGrid columns={[1, 1, 2, 2, 3, 4]} gap={4}>
-            {taskTypes
-              .map((taskType) => taskInfoMap[taskType])
+            {items
+              .map(({ taskType, count }) => ({ ...taskInfoMap[taskType], count }))
               .map((item) => (
                 <Link key={category + item.id} href={item.pathname}>
-                  <GridItem
-                    bg={backgroundColor}
-                    borderRadius="xl"
-                    boxShadow="base"
-                    className="flex flex-col justify-between h-full"
-                  >
-                    <Flex className="p-6 pb-10" flexDir="column" gap="3">
-                      <Heading size="md">{t(getTypeSafei18nKey(`tasks:${item.id}.label`))}</Heading>
-                      <Text size="sm">{t(getTypeSafei18nKey(`tasks:${item.id}.desc`))}</Text>
+                  <GridItem as={Card} height="100%" justifyContent="space-between">
+                    <Flex px="6" pt="6" flexDir="column" gap="3" justifyContent="space-between" height="100%">
+                      <Flex flexDir="column" gap="3">
+                        <Heading size="md">{t(getTypeSafei18nKey(`tasks:${item.id}.label`))}</Heading>
+                        <Text size="sm">{t(getTypeSafei18nKey(`tasks:${item.id}.desc`))}</Text>
+                      </Flex>
+                      <Box>
+                        <Badge textTransform="none">{t("tasks:available_task_count", { count: item.count })}</Badge>
+                      </Box>
                     </Flex>
                     <Text
                       fontWeight="bold"
                       color="white"
                       borderBottomRadius="xl"
+                      mt="6"
                       className="px-6 py-2 transition-colors duration-300 bg-blue-500 hover:bg-blue-600"
                     >
                       {t("go")} -&gt;
@@ -85,12 +88,20 @@ export const TaskOption = ({ content }: TasksOptionProps) => {
 };
 
 export const allTaskOptions: TasksOptionProps["content"] = {
-  [TaskCategory.Random]: [TaskType.random],
-  [TaskCategory.Create]: [TaskType.initial_prompt, TaskType.prompter_reply, TaskType.assistant_reply],
+  [TaskCategory.Random]: [{ taskType: TaskType.random, count: 0 }],
+  [TaskCategory.Create]: [
+    { taskType: TaskType.initial_prompt, count: 0 },
+    { taskType: TaskType.prompter_reply, count: 0 },
+    { taskType: TaskType.assistant_reply, count: 0 },
+  ],
   [TaskCategory.Evaluate]: [
-    TaskType.rank_initial_prompts,
-    TaskType.rank_prompter_replies,
-    TaskType.rank_assistant_replies,
+    { taskType: TaskType.rank_initial_prompts, count: 0 },
+    { taskType: TaskType.rank_prompter_replies, count: 0 },
+    { taskType: TaskType.rank_assistant_replies, count: 0 },
+  ],
+  [TaskCategory.Label]: [
+    { taskType: TaskType.label_initial_prompt, count: 0 },
+    { taskType: TaskType.label_prompter_reply, count: 0 },
+    { taskType: TaskType.label_assistant_reply, count: 0 },
   ],
-  [TaskCategory.Label]: [TaskType.label_initial_prompt, TaskType.label_prompter_reply, TaskType.label_assistant_reply],
 };