Update the UI to use a switch component for including done tasks

components/todo-list-table.tsx

@@ -3,13 +3,16 @@
 import { USER_TYPE_ENUM } from '@/api/common/common-enum'
 import { TTask } from '@/api/tasks/tasks.types'
 import { DateFormats, DateUtil } from '@/lib/date-util'
+import { DashboardTasksTableTabs } from '@/modules/dashboard/constants'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { EditTodoButton } from './edit-task-button'
 import { Searchbar } from './searchbar'
 import { Shimmer } from './Shimmer'
 import { TaskPriorityLabel } from './task-priority-label'
 import { TodoLabelsList } from './todo-labels-list'
 import { TodoStatusTable } from './todo-status-table'
+import { Label } from './ui/label'
+import { Switch } from './ui/switch'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table'
 import { WatchListButton } from './watchlist-button'
 
@@ -135,14 +138,23 @@ type TodoListTableProps = {
   tasks?: TTask[]
   isLoading?: boolean
   showActions?: boolean
+  includeDone?: boolean
+  onIncludeDoneChange?: (checked: boolean) => void
 }
 
-export const TodoListTable = ({ tasks, isLoading, showActions }: TodoListTableProps) => {
+export const TodoListTable = ({
+  tasks,
+  isLoading,
+  showActions,
+  includeDone,
+  onIncludeDoneChange,
+}: TodoListTableProps) => {
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
 
   const search = searchParams.get(QUERY_PARAMS_KEYS.search) ?? ''
+  const currentTab = searchParams.get('tab')
 
   const filteredTasks = !search
     ? tasks
@@ -169,13 +181,25 @@ export const TodoListTable = ({ tasks, isLoading, showActions }: TodoListTablePr
 
   return (
     <div>
-      <div className="pb-4">
+      <div className="flex items-center pb-4">
         <Searchbar
           defaultValue={search}
           placeholder="Search tasks"
           containerClassName="w-full lg:max-w-xs"
           onChange={(e) => handleSearch(e.target.value)}
         />
+        {currentTab == DashboardTasksTableTabs.All && (
+          <div className="flex px-4">
+            <Switch
+              id="includeDoneTasks"
+              checked={includeDone}
+              onCheckedChange={(checked) => onIncludeDoneChange?.(!!checked)}
+            />
+            <Label htmlFor="includeDoneTasks" className="px-2">
+              Include Done
+            </Label>
+          </div>
+        )}
       </div>
 
       <div className="overflow-hidden rounded-md border">

components/ui/switch.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+
+import { cn } from '@/lib/utils'
+
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

modules/dashboard/components/dashboard-tabs.tsx

@@ -2,8 +2,6 @@
 
 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'
@@ -47,22 +45,17 @@ export const DashboardTabs = ({
                 {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>
 
         <TabsContent value={TabsConstants.All}>
-          <TodoListTable showActions tasks={tasks} />
+          <TodoListTable
+            showActions
+            tasks={tasks}
+            includeDone={includeDone}
+            onIncludeDoneChange={onIncludeDoneChange}
+          />
         </TabsContent>
 
         <TabsContent value={TabsConstants.WatchList}>

package.json

@@ -32,6 +32,7 @@
     "@radix-ui/react-select": "2.2.5",
     "@radix-ui/react-separator": "1.1.7",
     "@radix-ui/react-slot": "1.2.3",
+    "@radix-ui/react-switch": "1.2.5",
     "@radix-ui/react-tabs": "1.1.12",
     "@radix-ui/react-tooltip": "1.2.7",
     "@tanstack/react-query": "5.82.0",