Add checkbox to include done task

api/tasks/tasks.api.ts

@@ -15,7 +15,7 @@ import {
 
 export const TasksApi = {
   getTasks: {
-    key: (teamId?: string) => ['TasksApi.getTasks', teamId],
+    key: (params?: GetTaskReqDto) => ['TasksApi.getTasks', JSON.stringify(params)],
     fn: async (params?: GetTaskReqDto): Promise<GetTasksDto> => {
       const { data } = await apiClient.get<GetTasksDto>(`/v1/tasks`, { params })
       return data

api/tasks/tasks.types.ts

@@ -36,6 +36,7 @@ export type TEditTask = {
 
 export type GetTaskReqDto = {
   teamId?: string
+  status?: string
 }
 
 export type GetTasksDto = {

components/edit-task-button.tsx

@@ -28,7 +28,7 @@ export const EditTodoButton = ({ todo }: EditTodoButtonProps) => {
 
       if (res.assignee?.user_type === USER_TYPE_ENUM.TEAM) {
         void queryClient.invalidateQueries({
-          queryKey: TasksApi.getTasks.key(res.assignee.assignee_id),
+          queryKey: TasksApi.getTasks.key({ teamId: res.assignee.assignee_id }),
         })
       }
       toast.success('Todo updated successfully')

components/reassign-user.tsx

@@ -40,7 +40,7 @@ const ReassignUserModal = ({
     mutationFn: TasksApi.reassignTask.fn,
     onSuccess: () => {
       toast.success(`Task assigned to ${selectedUser?.name}`)
-      void queryClient.invalidateQueries({ queryKey: TasksApi.getTasks.key(teamId) })
+      void queryClient.invalidateQueries({ queryKey: TasksApi.getTasks.key({ teamId }) })
       void queryClient.invalidateQueries({ queryKey: TasksApi.getTasks.key() })
       onOpenChange(false)
       setSelectedUser(null)

components/ui/checkbox.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

modules/dashboard/components/create-todo-button.tsx

@@ -18,7 +18,7 @@ export const CreateTodoButton = () => {
 
       if (res.assignee?.user_type === USER_TYPE_ENUM.TEAM) {
         void queryClient.invalidateQueries({
-          queryKey: TasksApi.getTasks.key(res.assignee.assignee_id),
+          queryKey: TasksApi.getTasks.key({ teamId: res.assignee.assignee_id }),
         })
       }
 

modules/dashboard/components/dashboard-tabs.tsx

@@ -2,6 +2,8 @@
 
 import { TTask } from '@/api/tasks/tasks.types'
 import { TodoListTable } from '@/components/todo-list-table'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { DashboardTasksTableTabs as TabsConstants } from '../constants'
@@ -11,9 +13,16 @@ import { DashboardWatchlistTable } from './dashboard-watchlist-table'
 type DashboardTabsProps = {
   tasks: TTask[]
   className?: string
+  includeDone: boolean
+  onIncludeDoneChange: (checked: boolean) => void
 }
 
-export const DashboardTabs = ({ tasks, className }: DashboardTabsProps) => {
+export const DashboardTabs = ({
+  tasks,
+  className,
+  includeDone,
+  onIncludeDoneChange,
+}: DashboardTabsProps) => {
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
@@ -29,15 +38,26 @@ export const DashboardTabs = ({ tasks, className }: DashboardTabsProps) => {
     <div className={className}>
       <Tabs value={currentTab} onValueChange={handleTabChange}>
         <div className="flex flex-row items-center justify-between pb-2">
-          <TabsList>
-            <TabsTrigger value={TabsConstants.All} className="cursor-pointer">
-              {TabsConstants.All}
-            </TabsTrigger>
-            <TabsTrigger value={TabsConstants.WatchList} className="cursor-pointer">
-              {TabsConstants.WatchList}
-            </TabsTrigger>
-          </TabsList>
-
+          <div>
+            <TabsList>
+              <TabsTrigger value={TabsConstants.All} className="cursor-pointer">
+                {TabsConstants.All}
+              </TabsTrigger>
+              <TabsTrigger value={TabsConstants.WatchList} className="cursor-pointer">
+                {TabsConstants.WatchList}
+              </TabsTrigger>
+            </TabsList>
+            <div className="flex px-1 py-4">
+              <Checkbox
+                id="includeDoneTasks"
+                checked={includeDone}
+                onCheckedChange={(checked) => onIncludeDoneChange(!!checked)}
+              />
+              <Label htmlFor="includeDoneTasks" className="px-2">
+                Include Done
+              </Label>
+            </div>
+          </div>
           <CreateTodoButton />
         </div>
 

modules/dashboard/index.tsx

@@ -1,18 +1,24 @@
 'use client'
 
 import { TasksApi } from '@/api/tasks/tasks.api'
+import { GetTaskReqDto } from '@/api/tasks/tasks.types'
 import { CommonPageError } from '@/components/common-page-error'
 import { PageContainer } from '@/components/page-container'
 import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
 import { DashboardHeader } from './components/dashboard-header'
 import { DashboardShimmer } from './components/dashboard-shimmer'
 import { DashboardTabs } from './components/dashboard-tabs'
 import { DashboardWelcomeScreen } from './components/dashboard-welcome-screen'
 
 export const Dashboard = () => {
+  const [includeDoneTasks, setIncludeDoneTasks] = useState(false)
+
+  const queryParams: GetTaskReqDto | undefined = includeDoneTasks ? { status: 'DONE' } : undefined
+
   const { data, isLoading, isError } = useQuery({
-    queryKey: TasksApi.getTasks.key(),
-    queryFn: () => TasksApi.getTasks.fn(),
+    queryKey: TasksApi.getTasks.key(queryParams),
+    queryFn: () => TasksApi.getTasks.fn(queryParams),
   })
 
   if (isLoading) {
@@ -32,7 +38,11 @@ export const Dashboard = () => {
       <DashboardHeader className="py-12" />
 
       <div className="container mx-auto">
-        <DashboardTabs tasks={data.tasks} />
+        <DashboardTabs
+          tasks={data.tasks}
+          includeDone={includeDoneTasks}
+          onIncludeDoneChange={setIncludeDoneTasks}
+        />
       </div>
     </PageContainer>
   )

modules/teams/team-tasks.tsx

@@ -125,7 +125,7 @@ export const TeamTasks = ({ teamId }: TeamTasksProps) => {
   })
 
   const { data: tasks, isLoading: isLoadingTasks } = useQuery({
-    queryKey: TasksApi.getTasks.key(teamId),
+    queryKey: TasksApi.getTasks.key({ teamId }),
     queryFn: () => TasksApi.getTasks.fn({ teamId }),
     select: (data) => data.tasks,
   })

package.json

@@ -23,6 +23,7 @@
     "@hookform/resolvers": "5.1.1",
     "@radix-ui/react-alert-dialog": "1.1.14",
     "@radix-ui/react-avatar": "1.1.10",
+    "@radix-ui/react-checkbox": "1.3.2",
     "@radix-ui/react-collapsible": "1.1.11",
     "@radix-ui/react-dialog": "1.1.14",
     "@radix-ui/react-dropdown-menu": "2.1.15",