# Task management dashboard

A shadcn/ui block from the [@watermelon](https://ui.watermelon.sh) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/watermelon/task-management-dashboard).

- Page, with a live preview: https://shadcn.exchange/r/watermelon/task-management-dashboard
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/watermelon/task-management-dashboard-light-60f52683157c0de7.png
- Registry item: https://registry.watermelon.sh/r/task-management-dashboard.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://registry.watermelon.sh/r/task-management-dashboard.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@tabler/icons-react`, `class-variance-authority`, `lucide-react`, `next-themes`
- Registry items: `avatar`, `badge`, `breadcrumb`, `button`, `card`, `collapsible`, `dialog`, `dropdown-menu`, `input`, `label`, `popover`, `separator`, `sheet`, `sidebar`, `skeleton`, `tabs`, `textarea`, `tooltip`, `utils`

## Files

### `src/components/dashboards/task-management-dashboard/components/app-sidebar.tsx`

```tsx
"use client"

import * as React from "react"
import { IconDots, IconSun, IconMoon } from "@tabler/icons-react"

import { useTheme } from "next-themes"
import { NavMain } from "./nav-main"
import { NavSecondary } from "./nav-secondary"
import { NavUser } from "./nav-user"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { data } from "../data"

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const { setTheme, resolvedTheme } = useTheme()
  const [mounted, setMounted] = React.useState(false)

  React.useEffect(() => {
    setMounted(true)
  }, [])

  const activeTeam = data.teams[0]

  const navSecondaryWithActions = data.navSecondary.map((item) => {
    if (item.title === "Appearance") {
      return {
        ...item,
        rightIcon: mounted ? (resolvedTheme === "dark" ? IconSun : IconMoon) : item.rightIcon,
        onClick: () => {
          setTheme(resolvedTheme === "dark" ? "light" : "dark")
        },
      }
    }
    return item
  })

  return (
    <Sidebar variant="inset" {...props}>
      <SidebarHeader className="gap-4 p-2">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="flex h-6 w-6 items-center justify-center rounded bg-black text-white">
              <span className="text-xs font-bold">O</span>
            </div>
            <span className="text-lg font-serif">OceanLabs</span>
          </div>
          <SidebarTrigger className="-mr-1 ml-auto hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-all active:scale-[0.98]" />
        </div>

        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton asChild className="border bg-white dark:bg-neutral-900 dark:border-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-all active:scale-[0.98]">
              <div className="flex w-full items-center">
                <div className="flex aspect-square size-5 items-center justify-center rounded bg-linear-to-br from-orange-400 to-rose-400 text-white">
                  {/* Team Logo Placeholder */}
                </div>
                <div className="grid flex-1 text-left text-sm leading-tight ml-2">
                  <div className="flex items-center gap-2">
                    <span className="truncate font-semibold">{activeTeam.name}</span>
                    <span className="rounded bg-indigo-100 px-1 py-0.5 text-[10px] font-bold text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400">
                      {activeTeam.plan}
                    </span>
                  </div>
                </div>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <button className="ml-auto p-1.5 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-md transition-colors shrink-0 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300">
                      <IconDots className="size-3.5" />
                    </button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-56">
                    <DropdownMenuLabel>Workspace Actions</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem>Switch Workspace</DropdownMenuItem>
                    <DropdownMenuItem>Workspace Settings</DropdownMenuItem>
                    <DropdownMenuItem>Manage Subscriptions</DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem className="text-red-600 focus:bg-red-50 focus:text-red-600 dark:focus:bg-red-950/50">Leave Workspace</DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent className="gap-0">
        <NavMain items={data.navMain} />
        {/* <NavMain label="Applications" items={data.applications} /> */}
        <NavSecondary items={navSecondaryWithActions} />
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={data.user} />
      </SidebarFooter>
    </Sidebar>
  )
}
```

### `src/components/dashboards/task-management-dashboard/components/nav-main.tsx`

```tsx
"use client"

import { type Icon as TablerIcon } from "@tabler/icons-react"

import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"

export function NavMain({
  items,
  label,
}: {
  items: {
    title: string
    url: string
    icon: TablerIcon
    isActive?: boolean
    badge?: string | number
    isDisabled?: boolean
  }[]
  label?: string
}) {
  const pathname = "/dashboard/tasks"
  return (
    <SidebarGroup>
      {label && <SidebarGroupLabel>{label}</SidebarGroupLabel>}
      <SidebarMenu>
        {items.map((item) => (
          <SidebarMenuItem key={item.title}>
            <SidebarMenuButton asChild tooltip={item.title} isActive={pathname === item.url} className="h-9 text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-400/15 dark:hover:bg-neutral-800/50 data-[active=true]:bg-neutral-400/15 dark:data-[active=true]:bg-neutral-800 data-[active=true]:text-neutral-900 dark:data-[active=true]:text-neutral-100 transition-all active:scale-[0.98]">
              <a href={item.isDisabled ? "#" : item.url} onClick={(e) => {
                if (item.isDisabled) {
                  e.preventDefault();
                }
              }}>
                <item.icon />
                <span>{item.title}</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  )
}
```

### `src/components/dashboards/task-management-dashboard/components/nav-secondary.tsx`

```tsx
import * as React from "react"
import { type Icon as TablerIcon } from "@tabler/icons-react"

import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
import { cn } from "@/lib/utils"

export function NavSecondary({
  items,
  className,
  ...props
}: {
  items: {
    title: string
    url: string
    icon: TablerIcon
    badge?: string | number
    rightIcon?: TablerIcon
    onClick?: (e: React.MouseEvent) => void
    isDisabled?: boolean
  }[]
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
  return (
    <SidebarGroup className={cn("mt-auto", className)} {...props}>
      <SidebarGroupContent>
        <SidebarMenu>
          {items.map((item) => (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton asChild size="default" className="text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-400/15 dark:hover:bg-neutral-800/50 transition-all active:scale-[0.98]">
                {item.onClick ? (
                  <button
                    onClick={(e) => {
                      if (item.isDisabled) {
                        e.preventDefault();
                        return;
                      }
                      item.onClick?.(e)
                    }}
                  >
                    <item.icon />
                    <span>{item.title}</span>
                    {item.rightIcon && (
                      <item.rightIcon className="ml-auto size-4 text-muted-foreground/60" />
                    )}
                  </button>
                ) : (
                  <a href={item.isDisabled ? "#" : item.url} onClick={(e) => {
                    if (item.isDisabled) {
                      e.preventDefault();
                    }
                  }}>
                    <item.icon />
                    <span>{item.title}</span>
                    {item.rightIcon && (
                      <item.rightIcon className="ml-auto size-4 text-muted-foreground/60" />
                    )}
                  </a>
                )}
              </SidebarMenuButton>
              {item.badge && (
                <SidebarMenuBadge className="bg-neutral-200 px-0.5 text-neutral-700 rounded text-[10px] dark:bg-neutral-800 dark:text-neutral-400">
                  {item.badge}
                </SidebarMenuBadge>
              )}
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  )
}
```

### `src/components/dashboards/task-management-dashboard/components/nav-user.tsx`

```tsx
"use client"

import {
  IconBell,
  IconCreditCard,
  IconDiscountCheck,
  IconDots,
  IconLogout,
  IconSparkles,
} from "@tabler/icons-react"

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar"

export function NavUser({
  user,
}: {
  user: {
    name: string
    email: string
    avatar: string
  }
}) {
  const { isMobile } = useSidebar()

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton
          size="lg"
          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground border bg-white dark:bg-neutral-900 dark:border-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all active:scale-[0.98]"
        >
          <div className="flex w-full items-center">
            <div className="flex h-8 w-8 items-center justify-center rounded-md bg-linear-to-br from-purple-500 to-pink-500 text-white shrink-0">
              {/* Avatar Placeholder */}
            </div>
            <div className="grid flex-1 text-left text-sm leading-tight ml-2">
              <span className="truncate font-semibold text-neutral-900 dark:text-neutral-100">{user.name}</span>
              <span className="truncate text-xs text-neutral-500 dark:text-neutral-400">{user.email}</span>
            </div>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button className="ml-auto p-1.5 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded-md transition-colors shrink-0 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300">
                  <IconDots className="size-4" />
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
                side={isMobile ? "bottom" : "right"}
                align="end"
                sideOffset={4}
              >
                <DropdownMenuLabel className="p-0 font-normal">
                  <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                    <Avatar className="h-8 w-8 rounded-lg">
                      <AvatarImage src={user.avatar} alt={user.name} />
                      <AvatarFallback className="rounded-lg">AS</AvatarFallback>
                    </Avatar>
                    <div className="grid flex-1 text-left text-sm leading-tight">
                      <span className="truncate font-semibold text-neutral-900 dark:text-neutral-100">{user.name}</span>
                      <span className="truncate text-xs text-neutral-500 dark:text-neutral-400">{user.email}</span>
                    </div>
                  </div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                  <DropdownMenuItem className="gap-2 text-neutral-700 dark:text-neutral-300 focus:bg-neutral-100 dark:focus:bg-neutral-800 focus:text-neutral-900 dark:focus:text-neutral-100 cursor-pointer">
                    <IconSparkles className="size-4 text-orange-500" />
                    <span>Upgrade to Pro</span>
                  </DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                  <DropdownMenuItem className="gap-2 text-neutral-700 dark:text-neutral-300 focus:bg-neutral-100 dark:focus:bg-neutral-800 focus:text-neutral-900 dark:focus:text-neutral-100 cursor-pointer">
                    <IconDiscountCheck className="size-4" />
                    <span>Account</span>
                  </DropdownMenuItem>
                  <DropdownMenuItem className="gap-2 text-neutral-700 dark:text-neutral-300 focus:bg-neutral-100 dark:focus:bg-neutral-800 focus:text-neutral-900 dark:focus:text-neutral-100 cursor-pointer">
                    <IconCreditCard className="size-4" />
                    <span>Billing</span>
                  </DropdownMenuItem>
                  <DropdownMenuItem className="gap-2 text-neutral-700 dark:text-neutral-300 focus:bg-neutral-100 dark:focus:bg-neutral-800 focus:text-neutral-900 dark:focus:text-neutral-100 cursor-pointer">
                    <IconBell className="size-4" />
                    <span>Notifications</span>
                  </DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuItem className="gap-2 text-rose-600 dark:text-rose-400 focus:bg-rose-50 dark:focus:bg-rose-950/30 focus:text-rose-700 dark:focus:text-rose-300 cursor-pointer">
                  <IconLogout className="size-4" />
                  <span>Log out</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}
```

### `src/components/dashboards/task-management-dashboard/dashboardLayout.tsx`

```tsx
import { AppSidebar } from "./components/app-sidebar"
import {
  SidebarInset,
  SidebarProvider,
} from "@/components/ui/sidebar"

export const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
  return (
    <SidebarProvider className="h-svh overflow-hidden">
      <AppSidebar />
      <SidebarInset className="border overflow-hidden min-h-0 rounded-md!">
        {children}
      </SidebarInset>
    </SidebarProvider>
  )
}
```

### `src/components/dashboards/task-management-dashboard/data.ts`

```ts
import {
    IconAdjustmentsHorizontal,
    IconCheckbox,
    IconCirclePlus,
    IconCoin,
    IconCreditCard,
    IconDeviceDesktop,
    IconFileInvoice,
    IconInbox,
    IconLayoutDashboard,
    IconLayoutGrid,
    IconReceipt,
    IconReport,
    IconSun,
    IconUserPlus,
    IconUsers,
} from "@tabler/icons-react"

export const data = {
    user: {
        name: "Alex Smith",
        email: "alex.smith@ams.co",
        avatar: "/avatars/alex.jpg",
    },
    teams: [
        {
            name: "AMS LLC",
            logo: "/logos/ams.png",
            plan: "PRO",
        },
    ],
    navMain: [
        {
            title: "Dashboard",
            url: "/dashboard",
            icon: IconLayoutDashboard,
            isActive: true,
            isDisabled: true,
        },
        {
            title: "Inbox",
            url: "#",
            icon: IconInbox,
            badge: 1,
            isDisabled: true,
        },
        {
            title: "Tasks",
            url: "/dashboard/tasks",
            icon: IconCheckbox,
            badge: 12,
            isDisabled: true,
        },
        {
            title: "Customers",
            url: "#",
            icon: IconUsers,
            isDisabled: true,
        },
        {
            title: "More",
            url: "#",
            icon: IconCirclePlus,
            isDisabled: true,
        },
    ],
    applications: [
        {
            title: "Receipts",
            url: "#",
            icon: IconReceipt,
            isDisabled: true,
        },
        {
            title: "Invoices",
            url: "#",
            icon: IconFileInvoice,
            badge: 12,
            isDisabled: true,
        },
        {
            title: "Reports",
            url: "#",
            icon: IconReport,
            isDisabled: true,
        },
        {
            title: "Payments",
            url: "#",
            icon: IconCreditCard,
            isDisabled: true,
        },
        {
            title: "Transactions",
            url: "#",
            icon: IconCoin,
            badge: 41,
            isDisabled: true,
        },
        {
            title: "App & Plugins",
            url: "#",
            icon: IconLayoutGrid,
            isDisabled: true,
        },
    ],
    navSecondary: [
        {
            title: "Settings",
            url: "#",
            icon: IconAdjustmentsHorizontal,
            isDisabled: true,
        },
        {
            title: "Appearance",
            url: "#",
            icon: IconDeviceDesktop,
            rightIcon: IconSun,
        },
        {
            title: "Invite users",
            url: "#",
            icon: IconUserPlus,
            badge: 4,
            isDisabled: true,
        },
    ],
}

export interface Task {
    id: string
    title: string
    subtasks?: number
    category: string
    date: string
    status: 'todo' | 'doing' | 'done'
    priority: 'low' | 'normal' | 'high' | 'urgent'
    avatarGradient: string
}

export interface Group {
    id: string
    name: string
    count: number
    color: string
    tasks: Task[]
}

export const amsGroups: Group[] = [
    {
        id: 'design',
        name: 'DESIGN',
        count: 14,
        color: 'text-neutral-400',
        tasks: [
            { id: '1', title: 'Evaluate User Interface Layout', subtasks: 7, category: 'DESIGN', date: 'Mar 15', status: 'todo', priority: 'low', avatarGradient: 'from-blue-400 to-cyan-400' },
            { id: '2', title: 'Assess Visual Design Elements', subtasks: 3, category: 'DESIGN', date: 'Apr 22', status: 'doing', priority: 'low', avatarGradient: 'from-orange-400 to-amber-400' },
            { id: '3', title: 'Inspect Navigation Flow', subtasks: 1, category: 'DESIGN', date: 'Sep 30', status: 'done', priority: 'urgent', avatarGradient: 'from-purple-400 to-pink-400' },
        ]
    },
    {
        id: 'review',
        name: 'REVIEW',
        count: 49,
        color: 'text-indigo-500',
        tasks: [
            { id: '4', title: 'Examine Typography Usage', subtasks: 5, category: 'REVIEW', date: 'Feb 5', status: 'todo', priority: 'normal', avatarGradient: 'from-teal-400 to-emerald-400' },
            { id: '5', title: 'Critique Button Design', subtasks: 9, category: 'REVIEW', date: 'Jan 19', status: 'doing', priority: 'normal', avatarGradient: 'from-indigo-400 to-blue-400' },
            { id: '6', title: 'Evaluate Iconography Consistency', subtasks: 4, category: 'REVIEW', date: 'Oct 27', status: 'doing', priority: 'high', avatarGradient: 'from-rose-400 to-pink-400' },
            { id: '7', title: 'Assess User Feedback Mechanisms', subtasks: 11, category: 'REVIEW', date: 'Dec 14', status: 'done', priority: 'high', avatarGradient: 'from-emerald-400 to-cyan-400' },
            { id: '8', title: 'Review Accessibility Features', subtasks: 2, category: 'REVIEW', date: 'May 3', status: 'done', priority: 'urgent', avatarGradient: 'from-fuchsia-400 to-pink-400' },
        ]
    },
    {
        id: 'analyze',
        name: 'ANALYZE',
        count: 80,
        color: 'text-emerald-500',
        tasks: [
            { id: '9', title: 'Analyze User Journey Mapping', subtasks: 8, category: 'ANALYZE', date: 'Aug 21', status: 'todo', priority: 'normal', avatarGradient: 'from-blue-400 to-indigo-400' },
            { id: '10', title: 'Inspect Responsive Design Adaptability', subtasks: 6, category: 'ANALYZE', date: 'Jun 11', status: 'doing', priority: 'normal', avatarGradient: 'from-orange-400 to-red-400' },
            { id: '11', title: 'Evaluate Onboarding Experience', subtasks: 12, category: 'ANALYZE', date: 'Feb 29', status: 'doing', priority: 'high', avatarGradient: 'from-purple-400 to-pink-400' },
            { id: '12', title: 'Performance Optimization Strategies', subtasks: 5, category: 'ANALYZE', date: 'Sep 10', status: 'doing', priority: 'normal', avatarGradient: 'from-emerald-400 to-teal-400' },
            { id: '13', title: 'Analyze Interaction Patterns', subtasks: 10, category: 'ANALYZE', date: 'Jul 8', status: 'doing', priority: 'normal', avatarGradient: 'from-cyan-400 to-blue-400' },
            { id: '14', title: 'Critique Error Messaging Design', subtasks: 3, category: 'ANALYZE', date: 'Mar 4', status: 'done', priority: 'urgent', avatarGradient: 'from-teal-400 to-emerald-400' },
            { id: '15', title: 'Review Data Visualization Techniques', subtasks: 10, category: 'ANALYZE', date: 'Apr 18', status: 'done', priority: 'urgent', avatarGradient: 'from-orange-400 to-red-400' },
            { id: '16', title: 'Review Color Scheme Choices', subtasks: 12, category: 'ANALYZE', date: 'Nov 12', status: 'done', priority: 'urgent', avatarGradient: 'from-cyan-400 to-blue-400' },
        ]
    }
]

export const visualizeGroups: Group[] = [
    {
        id: 'review',
        name: 'REVIEW',
        count: 30,
        color: 'text-neutral-400',
        tasks: [
            { id: 'v1', title: 'Analyze User Engagement Metrics', subtasks: 1, category: 'REVIEW', date: 'Jul 25', status: 'todo', priority: 'high', avatarGradient: 'from-blue-400 to-indigo-400' },
            { id: 'v2', title: 'Performance Optimization Strategies', subtasks: 5, category: 'REVIEW', date: 'Sep 10', status: 'doing', priority: 'normal', avatarGradient: 'from-orange-400 to-red-400' },
            { id: 'v3', title: 'Evaluate Cross-Platform Consistency', subtasks: 9, category: 'REVIEW', date: 'Nov 1', status: 'doing', priority: 'high', avatarGradient: 'from-purple-400 to-pink-400' },
            { id: 'v4', title: 'Review User Testing Protocols', subtasks: 4, category: 'REVIEW', date: 'Jan 30', status: 'done', priority: 'high', avatarGradient: 'from-teal-400 to-emerald-400' },
            { id: 'v5', title: 'Assess Feature Prioritization', subtasks: 11, category: 'REVIEW', date: 'Mar 22', status: 'done', priority: 'high', avatarGradient: 'from-rose-400 to-pink-400' },
            { id: 'v6', title: 'Inspect User Satisfaction Surveys', subtasks: 3, category: 'REVIEW', date: 'Jun 28', status: 'done', priority: 'urgent', avatarGradient: 'from-emerald-400 to-cyan-400' },
        ]
    },
    {
        id: 'strategy',
        name: 'STRATEGY',
        count: 16,
        color: 'text-rose-500',
        tasks: [
            { id: 's1', title: 'Inspect User Retention Strategies', subtasks: 2, category: 'STRATEGY', date: 'Apr 15', status: 'todo', priority: 'low', avatarGradient: 'from-pink-400 to-rose-400' },
            { id: 's2', title: 'Evaluate Content Strategy', subtasks: 8, category: 'STRATEGY', date: 'Oct 5', status: 'doing', priority: 'normal', avatarGradient: 'from-cyan-400 to-blue-400' },
            { id: 's3', title: 'Review Marketing Integration', subtasks: 6, category: 'STRATEGY', date: 'Dec 19', status: 'doing', priority: 'high', avatarGradient: 'from-purple-400 to-orange-400' },
        ]
    },
    {
        id: 'benchmark',
        name: 'BENCHMARK',
        count: 49,
        color: 'text-blue-500',
        tasks: [
            { id: 'b1', title: 'Evaluate A/B Testing Results', subtasks: 10, category: 'BENCHMARK', date: 'Aug 13', status: 'todo', priority: 'low', avatarGradient: 'from-blue-400 to-indigo-400' },
            { id: 'b2', title: 'Review User Persona Development', subtasks: 1, category: 'BENCHMARK', date: 'Sep 24', status: 'doing', priority: 'normal', avatarGradient: 'from-orange-400 to-red-400' },
            { id: 'b3', title: 'Critique Button Design', subtasks: 9, category: 'BENCHMARK', date: 'Jan 19', status: 'doing', priority: 'urgent', avatarGradient: 'from-purple-400 to-pink-400' },
            { id: 'b4', title: 'Assess Feature Roadmap', subtasks: 5, category: 'BENCHMARK', date: 'Feb 11', status: 'doing', priority: 'urgent', avatarGradient: 'from-emerald-400 to-teal-400' },
            { id: 'b5', title: 'Analyze User Behavior Analytics', subtasks: 9, category: 'BENCHMARK', date: 'Mar 9', status: 'done', priority: 'urgent', avatarGradient: 'from-rose-400 to-orange-400' },
            { id: 'b6', title: 'Evaluate Design System Guidelines', subtasks: 4, category: 'BENCHMARK', date: 'Apr 27', status: 'done', priority: 'urgent', avatarGradient: 'from-cyan-400 to-blue-400' },
            { id: 'b7', title: 'Analyze Competitive Benchmarking', subtasks: 12, category: 'BENCHMARK', date: 'May 7', status: 'done', priority: 'urgent', avatarGradient: 'from-fuchsia-400 to-pink-400' },
        ]
    }
]
```

### `src/components/dashboards/task-management-dashboard/demo.tsx`

```tsx
"use client";

import { DashboardLayout } from "./dashboardLayout";
import TasksPageView from "./tasksPageView";

export default function TaskManagementDashboardDemo() {
    return (
        <DashboardLayout>
            <TasksPageView />
        </DashboardLayout>
    );
}
```

### `src/components/dashboards/task-management-dashboard/tasksPageView.tsx`

```tsx
"use client"

import * as React from "react"
import {
    IconPlus,
    IconSearch,
    IconLayoutGrid,
    IconLayoutSidebar,
    IconCalendarEvent,
    IconDots,
    IconClipboardCheck,
    IconLock,
    IconBell,
    IconQuestionMark,
    IconUpload,
    IconList,
    IconTable,
    IconFolder,
    IconTimeline,
    IconAdjustmentsHorizontal,
    IconSortAscending,
    IconCirclePlus,
    IconUserCircle,
    IconCircleCheck,
    IconWorld,
    IconUsers,
    IconCheck,
    IconHash,
    IconFlag,
    IconGitBranch,
    IconBrandVscode,
    IconCircle,
    IconCircleCheckFilled,
    IconCircleDashed,
    IconSun,
    IconEye,
    IconArrowsSort,
    IconFlagFilled,
    IconAlertTriangleFilled,
} from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
} from "@/components/ui/tabs"
import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import { Separator } from "@/components/ui/separator"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { amsGroups, visualizeGroups, type Task, type Group } from "./data"

function ProjectCard({ title, logo, count, groups, isPrivate }: { title: string, logo: React.ReactNode, count: number, groups: Group[], isPrivate?: boolean }) {
    return (
        <Card className="flex flex-col gap-0 dark:border-neutral-800/60 bg-white dark:bg-neutral-900 shadow-none overflow-hidden rounded-lg p-0 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg dark:hover:shadow-neutral-900/40">
            <CardHeader className="flex flex-row items-center justify-between px-4 py-3! border-b dark:border-neutral-800/50">
                <div className="flex items-center gap-2.5">
                    {logo}
                    <h3 className="font-semibold text-[15px] tracking-tight text-neutral-900 dark:text-neutral-100">{title}</h3>
                    <div className="flex items-center gap-1.5 ml-1">
                        <IconWorld className="size-3.5 text-neutral-500" />
                        {isPrivate && <IconLock className="size-3.5 text-neutral-500" />}
                        <Badge variant="secondary" className="bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 px-1 text-[10px] h-4 leading-none font-medium ml-1 rounded">
                            {count}
                        </Badge>
                    </div>
                </div>
                <div className="flex items-center gap-1 text-neutral-500">
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon" className="size-8 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md">
                                <IconArrowsSort className="size-4 text-neutral-500" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuItem>Sort by Date</DropdownMenuItem>
                            <DropdownMenuItem>Sort by Priority</DropdownMenuItem>
                            <DropdownMenuItem>Sort by Assignee</DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon" className="size-8 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md">
                                <IconUserCircle className="size-4.5 text-neutral-500" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuItem>View all members</DropdownMenuItem>
                            <DropdownMenuItem>Invite member</DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon" className="size-8 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md">
                                <IconDots className="size-4" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Project Actions</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Project Settings</DropdownMenuItem>
                            <DropdownMenuItem>Manage Members</DropdownMenuItem>
                            <DropdownMenuItem>Export Data</DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem className="text-red-500">Archive Project</DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
            </CardHeader>
            <CardContent className="p-0 gap-0">
                {/* Filter Bar */}
                <div className="flex items-center gap-2 px-4 py-2 border-b border-neutral-200 dark:border-neutral-800/50 overflow-x-auto scrollbar-hide">
                    <div className="size-6 rounded-full bg-neutral-500/10 dark:bg-neutral-800 flex items-center justify-center text-neutral-500 shrink-0">
                        <IconCheck className="size-3.5" />
                    </div>
                    <Badge variant="secondary" className="bg-neutral-500/10 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 px-2.5 text-xs rounded-full flex items-center gap-1 h-6 shrink-0 border border-neutral-200 dark:border-neutral-700">
                        <IconHash className="size-4" strokeWidth={2.5} />
                        Label
                    </Badge>
                    <FilterPill icon={<IconUsers className="size-3" />} label="Assignee" />
                    <FilterPill icon={<IconCircle className="size-3.5" />} label="Status" />
                    <FilterPill icon={<IconGitBranch className="size-3.5" />} label="Parent" />
                    <FilterPill icon={<IconFlag className="size-3.5" />} label="Priority" />
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <button className="flex items-center px-1 size-6 justify-center border border-neutral-200 dark:border-neutral-800 rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors">
                                <IconDots className="size-3 text-neutral-500" />
                            </button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuItem>Save Filter</DropdownMenuItem>
                            <DropdownMenuItem>Clear All</DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>

                {/* Groups */}
                <div className="flex flex-col dark:bg-neutral-900">
                    {groups.map((group) => (
                        <div key={group.id} className="px-4 pt-2 pb-4 border-b last:border-b-0">
                            <div className="flex flex-col mt-7 first:mt-2">
                                <div className="flex items-center justify-between px-1 mb-2">
                                    <div className="flex items-center gap-2 pt-1 pb-2">
                                        <IconHash className={cn("size-4 font-bold opacity-70", group.color)} />
                                        <span className={cn("text-xs font-medium uppercase text-neutral-600 dark:text-neutral-400")}>{group.name}</span>
                                        <Badge variant="secondary" className="bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 px-1 text-[10px] h-4 leading-none font-medium ml-1 rounded">
                                            {group.count}
                                        </Badge>
                                    </div>
                                    <div className="flex items-center gap-1">
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <button className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors">
                                                    <IconEye className="size-4 text-neutral-500" />
                                                </button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end">
                                                <DropdownMenuItem>Show Completed</DropdownMenuItem>
                                                <DropdownMenuItem>Compact View</DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <button className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors">
                                                    <IconArrowsSort className="size-4 text-neutral-500" />
                                                </button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end">
                                                <DropdownMenuItem>Sort Alphabetically</DropdownMenuItem>
                                                <DropdownMenuItem>Sort by Status</DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                        <DropdownMenu>
                                            <DropdownMenuTrigger asChild>
                                                <button className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors">
                                                    <IconDots className="size-4 text-neutral-500" />
                                                </button>
                                            </DropdownMenuTrigger>
                                            <DropdownMenuContent align="end">
                                                <DropdownMenuItem>Rename Group</DropdownMenuItem>
                                                <DropdownMenuItem>Change Color</DropdownMenuItem>
                                                <DropdownMenuItem>Hide Group</DropdownMenuItem>
                                                <DropdownMenuSeparator />
                                                <DropdownMenuItem className="text-red-500">Delete Group</DropdownMenuItem>
                                            </DropdownMenuContent>
                                        </DropdownMenu>
                                    </div>
                                </div>
                                <div className="flex flex-col gap-2.5">
                                    {group.tasks.map((task) => (
                                        <TaskItem key={task.id} task={task} />
                                    ))}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </CardContent>
        </Card>
    )
}

function FilterPill({ icon, label }: { icon: React.ReactNode, label: string }) {
    return (
        <div className="flex items-center gap-1 h-6 px-2 rounded-full border border-neutral-200 dark:border-neutral-800 text-[11px] text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-all active:scale-95 cursor-pointer shrink-0 font-medium whitespace-nowrap">
            {icon}
            {label}
        </div>
    )
}

function TaskItem({ task }: { task: Task }) {
    const statusIcons = {
        todo: <IconCircleDashed className="size-5 text-neutral-400" />,
        doing: <IconSun className="size-5 text-orange-600 fill-orange-600" />,
        done: <IconCircleCheckFilled className="size-5 text-emerald-600" />,
    }

    const priorityIcons = {
        low: <IconFlagFilled className="size-[18px] text-neutral-300" />,
        normal: <IconFlagFilled className="size-[18px] text-blue-500 fill-blue-500" />,
        high: <IconFlagFilled className="size-[18px] text-orange-500 fill-orange-500" />,
        urgent: <IconAlertTriangleFilled className="size-[18px] text-rose-500 fill-rose-500 " />,
    }

    return (
        <div className="flex items-center gap-3 p-1.5 rounded-full bg-white dark:bg-neutral-800/20 border dark:border-neutral-700/40 shadow-[0_1px_2px_rgba(0,0,0,0.02)] hover:shadow-[0_4px_12px_rgba(0,0,0,0.05)] hover:border-neutral-200 dark:hover:border-neutral-700 transition-all duration-200 cursor-pointer group active:scale-[0.985]">
            <div className="flex items-center gap-2.5 shrink-0 px-0.5">
                {statusIcons[task.status]}
                {priorityIcons[task.priority]}
            </div>

            <div className="flex-1 min-w-0 flex  gap-3">
                <span className="text-[13px] tracking-tight font-semibold text-neutral-800 dark:text-neutral-200 truncate block transition-colors group-hover:text-black dark:group-hover:text-white">
                    {task.title}
                </span>
                {task.subtasks && (
                    <div className="flex items-center gap-1 text-[11px] text-neutral-400 dark:text-neutral-500 font-medium tabular-nums">
                        <IconGitBranch className="size-3 -rotate-45 " />
                        {task.subtasks}
                    </div>
                )}
            </div>

            <div className="flex items-center gap-2 shrink-0">
                <Badge variant="outline" className="text-[9px] h-4.5 uppercase rounded-full border dark:border-neutral-800 text-neutral-500 bg-neutral-50/50 dark:bg-neutral-900 shadow-none max-md:hidden">
                    # {task.category}
                </Badge>

                <span className="text-[12px] text-neutral-500 font-medium w-fit min-w-[44px] whitespace-nowrap shrink-0 text-right tabular-nums tracking-tight hidden sm:block">{task.date}</span>

                <div className={cn("size-5 rounded-full bg-linear-to-br shadow-[0_2px_4px_rgba(0,0,0,0.1)] ring-1 ring-white/10", task.avatarGradient)} />
            </div>
        </div>
    )
}

export default function TasksPageView() {
    const { state, isMobile } = useSidebar()
    return (
        <div className="flex flex-col h-full bg-neutral-50/50 dark:bg-neutral-950/50 rounded-xl overflow-hidden min-h-0">
            {/* Header */}
            <header className="flex h-12 shrink-0 items-center justify-between px-4 border-b bg-background rounded-t-xl">
                <div className="flex items-center gap-2">
                    {(state === "collapsed" || isMobile) &&
                        <>
                            <SidebarTrigger />
                            <Separator orientation="vertical" className="data-[orientation=vertical]:h-5 mx-1" />
                        </>
                    }
                    <div className="flex items-center gap-2.5">
                        <IconClipboardCheck className="size-4.5 text-neutral-500" />
                        <div className="flex items-center gap-1.5 text-[14px]">
                            <span className="font-medium text-neutral-900 dark:text-neutral-100">Tasks</span>
                            <span className="text-neutral-400 font-light">/</span>
                            <span className="text-neutral-500">Overview</span>
                        </div>
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <button className="ml-1 p-1 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded transition-colors group">
                                    <IconDots className="size-3.5 text-neutral-400 group-hover:text-neutral-600 dark:group-hover:text-neutral-300" />
                                </button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="start">
                                <DropdownMenuLabel>Page Settings</DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem>Layout Settings</DropdownMenuItem>
                                <DropdownMenuItem>Customize View</DropdownMenuItem>
                                <DropdownMenuItem>Export View</DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                        <IconLock className="size-3.5 text-neutral-400 hover:text-neutral-600 cursor-pointer transition-colors" />
                    </div>
                </div>


                {/* Search Bar */}
                <div className="flex items-center gap-1.5">
                    {/* Avatar Stack */}
                    <div className="hidden sm:flex items-center -space-x-2 mr-2">
                        {[
                            "from-indigo-500 to-purple-500",
                            "from-rose-400 to-orange-400",
                            "from-emerald-400 to-cyan-400",
                            "from-blue-500 to-teal-400",
                            "from-amber-400 to-red-500",
                            "from-fuchsia-500 to-pink-500",
                        ].map((gradient, i) => (
                            <div key={i} className={cn("rounded-full ring-2 ring-background overflow-hidden size-5 bg-linear-to-tr shadow-sm", gradient)} />
                        ))}
                    </div>
                    <div className="relative group hidden md:block">
                        <IconSearch className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-neutral-400 group-focus-within:text-neutral-500 transition-colors" />
                        <Input
                            placeholder="Search..."
                            className="h-8 w-8 sm:w-56 pl-8 pr-2 sm:pr-12 bg-neutral-100/50 dark:bg-neutral-900/50 focus-visible:bg-background focus-visible:ring-1 focus-visible:border-neutral-200 transition-all hover:border-neutral-300 dark:hover:border-neutral-700 rounded-md text-xs border-neutral-200 dark:border-neutral-800 shadow-none placeholder:text-neutral-400 font-medium"
                        />
                        <kbd className="absolute right-1.5 top-1/2 -translate-y-1/2 hidden md:flex h-5 items-center justify-center gap-1 rounded-[4px] border border-neutral-200 bg-white px-1.5 text-[10px] font-medium text-neutral-500 opacity-100 pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 select-none">
                            <span className="text-[12px] h-3.5 flex items-center">⌘</span>
                            <span className="h-3.5 flex items-center">K</span>
                        </kbd>
                    </div>
                    <Popover>
                        <PopoverTrigger asChild>
                            <Button variant="outline" size="icon" className="size-8 hidden xs:flex items-center justify-center hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md shadow-none border-neutral-200 dark:border-neutral-800 transition-all active:scale-95">
                                <IconBell className="size-4" />
                            </Button>
                        </PopoverTrigger>
                        <PopoverContent align="end" className="w-80 p-0">
                            <div className="flex items-center justify-between border-b px-4 py-3">
                                <span className="font-semibold text-sm">Notifications</span>
                                <span className="text-xs text-indigo-600 dark:text-indigo-400 cursor-pointer hover:underline font-medium">Mark all as read</span>
                            </div>
                            <div className="flex flex-col items-center justify-center py-8 text-center text-sm text-neutral-500">
                                <IconBell className="size-8 text-neutral-300 dark:text-neutral-700 mb-2" strokeWidth={1.5} />
                                No new notifications
                            </div>
                        </PopoverContent>
                    </Popover>
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="outline" size="icon" className="size-8 hidden sm:flex items-center justify-center hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md shadow-none border-neutral-200 dark:border-neutral-800 transition-all active:scale-95">
                                <IconQuestionMark className="size-4" />
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end" className="w-48">
                            <DropdownMenuItem>Help Center</DropdownMenuItem>
                            <DropdownMenuItem>Keyboard Shortcuts</DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>Give Feedback</DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
                    <Dialog>
                        <DialogTrigger asChild>
                            <Button variant="outline" className="h-8 px-3 gap-1.5 hidden md:flex items-center justify-center hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md shadow-none font-medium text-xs tracking-tight border-neutral-200 dark:border-neutral-800 transition-all active:scale-95">
                                <IconUpload className="size-3.5" />
                                <span>Share</span>
                            </Button>
                        </DialogTrigger>
                        <DialogContent>
                            <DialogHeader>
                                <DialogTitle>Share Dashboard</DialogTitle>
                                <DialogDescription>Anyone with the link can view this dashboard.</DialogDescription>
                            </DialogHeader>
                            <div className="flex gap-2 mt-2">
                                <Input value="https://watermelon.co/d/tasks" readOnly />
                                <Button className="shrink-0 bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-500 dark:hover:bg-indigo-600">Copy Link</Button>
                            </div>
                        </DialogContent>
                    </Dialog>
                </div>
            </header>

            {/* Toolbar */}
            <Tabs defaultValue="overview" className="flex-1 flex flex-col min-h-0 gap-0">
                <div className="flex h-12 shrink-0 items-stretch justify-between px-4 border-b bg-background overflow-x-auto overflow-y-hidden scrollbar-hide">
                    <div className="flex gap-4 shrink-0">
                        <TabsList className="bg-transparent gap-3 h-12! p-0">
                            {[
                                { value: "overview", label: "Overview", icon: IconLayoutGrid },
                                { value: "kanban", label: "Kanban", icon: IconLayoutSidebar },
                                { value: "list", label: "List", icon: IconList },
                                { value: "calendar", label: "Calendar", icon: IconCalendarEvent },
                                { value: "table", label: "Table", icon: IconTable },
                                { value: "folders", label: "Folders", icon: IconFolder },
                                { value: "timeline", label: "Timeline", icon: IconTimeline },
                            ].map((tab) => (
                                <TabsTrigger
                                    key={tab.value}
                                    value={tab.value}
                                    disabled={tab.value !== "overview"}
                                    className="relative gap-1.5 px-1 py-0 bg-transparent shadow-none! data-[state=active]:bg-transparent dark:data-[state=active]:bg-transparent! data-[state=active]:shadow-none! rounded-none text-neutral-500 data-[state=active]:text-neutral-900 dark:data-[state=active]:text-neutral-100 border-x-0 border-t-0 border-b-0 data-[state=active]:border-b-[1.5px]! data-[state=active]:border-neutral-900 dark:data-[state=active]:border-neutral-100 data-[state=active]:-mb-px data-[state=active]:z-10 font-medium text-[13px] transition-all active:scale-95 group items-center flex tracking-tight shrink-0 whitespace-nowrap"
                                >
                                    <tab.icon className="size-4" />
                                    {tab.label}
                                </TabsTrigger>
                            ))}
                        </TabsList>

                        <div className="flex items-center">
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button variant="outline" className="h-8 gap-1 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100/50 dark:hover:bg-neutral-800/50 rounded-md text-[12px] shadow-none font-medium shrink-0 dark:border-neutral-800 transition-all active:scale-95">
                                        <IconPlus className="size-3" />
                                        <span className="max-md:hidden">Add View</span>
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="start">
                                    <DropdownMenuItem className="gap-2">
                                        <IconLayoutGrid className="size-4" /> Board
                                    </DropdownMenuItem>
                                    <DropdownMenuItem className="gap-2">
                                        <IconList className="size-4" /> List
                                    </DropdownMenuItem>
                                    <DropdownMenuItem className="gap-2">
                                        <IconTable className="size-4" /> Table
                                    </DropdownMenuItem>
                                    <DropdownMenuItem className="gap-2">
                                        <IconCalendarEvent className="size-4" /> Calendar
                                    </DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>
                    </div>

                    <div className="flex items-center gap-1.5 ml-4 shrink-0">
                        <div className="hidden sm:flex items-center gap-1">
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button variant="outline" size="icon" className="size-8 rounded-md shadow-none border-neutral-200 dark:border-neutral-800 text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all active:scale-95">
                                        <IconLayoutGrid className="size-4" />
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                    <DropdownMenuLabel>Group By</DropdownMenuLabel>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem>Status</DropdownMenuItem>
                                    <DropdownMenuItem>Assignee</DropdownMenuItem>
                                    <DropdownMenuItem>Priority</DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button variant="outline" size="icon" className="size-8 rounded-md shadow-none border-neutral-200 dark:border-neutral-800 text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all active:scale-95">
                                        <IconUserCircle className="size-4.5" />
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                    <DropdownMenuLabel>Quick Assign</DropdownMenuLabel>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem>Me</DropdownMenuItem>
                                    <DropdownMenuItem>Team</DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button variant="outline" size="icon" className="size-8 rounded-md shadow-none border-neutral-200 dark:border-neutral-800 text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all active:scale-95">
                                        <IconCircleCheck className="size-4" />
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                    <DropdownMenuItem>Mark Visible as Done</DropdownMenuItem>
                                    <DropdownMenuItem>Clear Completed</DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>

                        <div className="flex items-center gap-1.5 font-medium">
                            <Popover>
                                <PopoverTrigger asChild>
                                    <Button variant="outline" className="h-8 gap-2 px-3 rounded-md shadow-none border-neutral-200 dark:border-neutral-800 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 text-xs font-medium transition-all active:scale-95">
                                        <IconAdjustmentsHorizontal className="size-4" />
                                        <span className="hidden xs:inline">Filter (3)</span>
                                    </Button>
                                </PopoverTrigger>
                                <PopoverContent className="w-80" align="end">
                                    <div className="grid gap-4">
                                        <div className="space-y-2">
                                            <h4 className="font-medium leading-none">Filters</h4>
                                            <p className="text-sm text-muted-foreground">
                                                Advanced task filtering options.
                                            </p>
                                        </div>
                                        <div className="grid gap-2">
                                            <div className="flex items-center justify-between text-xs">
                                                <span className="text-neutral-500">Status</span>
                                                <span className="text-indigo-600 font-medium cursor-pointer">Clear</span>
                                            </div>
                                            <div className="flex flex-wrap gap-1.5">
                                                <Badge className="rounded-full bg-indigo-50 text-indigo-700 hover:bg-indigo-100 border-indigo-200 cursor-pointer">To Do</Badge>
                                                <Badge variant="outline" className="rounded-full cursor-pointer hover:bg-neutral-50">In Progress</Badge>
                                                <Badge variant="outline" className="rounded-full cursor-pointer hover:bg-neutral-50">Done</Badge>
                                            </div>
                                        </div>
                                    </div>
                                </PopoverContent>
                            </Popover>

                            <Popover>
                                <PopoverTrigger asChild>
                                    <Button variant="outline" className="h-8 gap-2 px-3 rounded-md shadow-none border-neutral-200 dark:border-neutral-800 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800 text-xs font-medium transition-all active:scale-95">
                                        <IconSortAscending className="size-4" />
                                        <span className="hidden xs:inline">Sort</span>
                                    </Button>
                                </PopoverTrigger>
                                <PopoverContent className="w-56" align="end">
                                    <div className="space-y-1.5">
                                        <DropdownMenuLabel className="px-1 text-xs text-neutral-500 uppercase">Sort By</DropdownMenuLabel>
                                        <div className="flex flex-col gap-0.5">
                                            <button className="flex items-center gap-2 px-2 py-1.5 text-xs rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full text-left transition-colors">
                                                <IconCalendarEvent className="size-3.5" /> Due Date
                                            </button>
                                            <button className="flex items-center gap-2 px-2 py-1.5 text-xs rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full text-left transition-colors">
                                                <IconAlertTriangleFilled className="size-3.5" /> Priority
                                            </button>
                                            <button className="flex items-center gap-2 px-2 py-1.5 text-xs rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full text-left transition-colors font-medium text-indigo-600 bg-indigo-50 dark:bg-indigo-900/20">
                                                <IconSortAscending className="size-3.5" /> Alphabetical
                                            </button>
                                        </div>
                                    </div>
                                </PopoverContent>
                            </Popover>
                            <Dialog>
                                <DialogTrigger asChild>
                                    <Button className="h-8 gap-2 px-3 rounded-md shadow-xs bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 text-white text-xs font-medium border-none shrink-0 ml-1 transition-all active:scale-95">
                                        <IconCirclePlus className="size-4" />
                                        <span className="hidden xs:inline">Add Task</span>
                                    </Button>
                                </DialogTrigger>
                                <DialogContent className="sm:max-w-[425px]">
                                    <DialogHeader>
                                        <DialogTitle>Create New Task</DialogTitle>
                                        <DialogDescription>
                                            Add a new task to your project. Click save when you're done.
                                        </DialogDescription>
                                    </DialogHeader>
                                    <div className="grid gap-4 py-4">
                                        <div className="grid gap-2">
                                            <Label htmlFor="task-name">Task Name</Label>
                                            <Input id="task-name" placeholder="Enter task name..." />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="task-description">Description</Label>
                                            <Textarea id="task-description" placeholder="Add more details..." />
                                        </div>
                                        <div className="grid grid-cols-2 gap-4">
                                            <div className="grid gap-2">
                                                <Label htmlFor="priority">Priority</Label>
                                                <select id="priority" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900">
                                                    <option>Low</option>
                                                    <option>Normal</option>
                                                    <option>High</option>
                                                    <option>Urgent</option>
                                                </select>
                                            </div>
                                            <div className="grid gap-2">
                                                <Label htmlFor="status">Status</Label>
                                                <select id="status" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900">
                                                    <option>To Do</option>
                                                    <option>In Progress</option>
                                                    <option>Done</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <DialogFooter>
                                        <Button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white">Save Task</Button>
                                    </DialogFooter>
                                </DialogContent>
                            </Dialog>
                        </div>
                    </div>
                </div>

                <TabsContent value="overview" className="flex-1 overflow-auto scrollbar-hide p-4 m-0 bg-neutral-50/50 dark:bg-neutral-950/50">
                    <div className="grid grid-cols-1 xl:grid-cols-2 gap-6 max-w-[1600px] mx-auto">
                        {/* AMS Project Card */}
                        <ProjectCard
                            title="AMS Project"
                            logo={<div className="size-6 rounded bg-linear-to-br from-rose-500 via-orange-400 to-indigo-500 flex items-center justify-center text-white shadow-sm" />}
                            count={122}
                            groups={amsGroups}
                        />

                        {/* Visualize.co Card */}
                        <ProjectCard
                            title="Visualize.co™"
                            logo={<div className="size-6 rounded bg-linear-to-br from-blue-400 to-indigo-600 flex items-center justify-center text-white"><IconBrandVscode className="size-4" /></div>}
                            count={97}
                            isPrivate={true}
                            groups={visualizeGroups}
                        />
                    </div>
                </TabsContent>
            </Tabs>
        </div>
    )
}
```