# Workflow management dashboard

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

- Page, with a live preview: https://shadcn.exchange/r/watermelon/workflow-management-dashboard
- Screenshot: https://shadcn.exchange/shot/watermelon/workflow-management-dashboard/light.png
- Registry item: https://registry.watermelon.sh/r/workflow-management-dashboard.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/watermelon/workflow-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`, `cmdk`, `lucide-react`, `next-themes`, `zustand`
- Registry items: `alert-dialog`, `avatar`, `badge`, `button`, `card`, `checkbox`, `combobox`, `dialog`, `drawer`, `dropdown-menu`, `field`, `input`, `input-group`, `label`, `popover`, `scroll-area`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `switch`, `tabs`, `textarea`, `tooltip`, `use-mobile`, `utils`

## Files

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

```tsx
"use client";

import * as React from "react";

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { NavMain } from "./nav-main";
import { NavApps } from "./nav-products";
import { NavSecondary } from "./nav-options";

import {
  IconHome,
  IconChecklist,
  IconNews,
  IconHeartbeat,
  IconTargetArrow,
  IconCalendarEvent,
  IconLayoutDashboard,
  IconUsers,
  IconBuilding,
  IconBroadcast,
  IconBriefcase,
  IconSchool,
  IconSettings,
  IconPlayerRecord,
} from "@tabler/icons-react";
import { TeamSwitcher } from "./team-switcher";
import { BellIcon, Search, User, Settings, CreditCard, CheckCircle2, MessageSquare, AlertCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "cmdk";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import {
  Popover,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";

export const data = {
  teams: [
    {
      name: "Watermelon",
      logo: IconHome,
      plan: "Free",
    },
  ],

  navMain: [
    {
      title: "Home",
      url: "/home",
      icon: IconHome,
    },
    {
      title: "Tasks",
      url: "/tasks",
      icon: IconChecklist,
      isActive: true,
    },
    {
      title: "Feed",
      url: "/feed",
      icon: IconNews,
    },
  ],

  apps: [
    {
      title: "Health",
      url: "/health",
      icon: IconHeartbeat,
      className: "text-green-500",
    },
    {
      title: "Opportunities",
      url: "/opportunities",
      icon: IconTargetArrow,
      className: "text-blue-500",
    },
    {
      title: "Meetings",
      url: "/meetings",
      icon: IconCalendarEvent,
      className: "text-purple-500",
    },
    {
      title: "Dashboards",
      url: "/dashboards",
      icon: IconLayoutDashboard,
      className: "text-yellow-500",
    },
  ],

  records: [
    {
      title: "People",
      url: "/people",
      icon: IconUsers,
    },
    {
      title: "Companies",
      url: "/companies",
      icon: IconBuilding,
    },
    {
      title: "Recordings",
      url: "/recordings",
      icon: IconPlayerRecord,
    },
  ],

  browse: [
    {
      title: "Broadcasts",
      url: "/broadcasts",
      icon: IconBroadcast,
    },
    {
      title: "Jobs",
      url: "/jobs",
      icon: IconBriefcase,
    },
    {
      title: "Skills",
      url: "/skills",
      icon: IconSchool,
    },
  ],

  options: [
    {
      title: "Settings",
      url: "/settings",
      icon: IconSettings,
    },
  ],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((open) => !open);
      }
    };
    document.addEventListener("keydown", down);
    return () => document.removeEventListener("keydown", down);
  }, []);

  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader className="">
        <SidebarMenu>
          <SidebarMenuItem className="flex items-center gap-2 ">
            <TeamSwitcher teams={data.teams} />

            <div className="flex items-center justify-center text-muted-foreground group-data-[collapsible=icon]:hidden">
              <Button
                variant="ghost"
                size="sm"
                className=" p-1 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors cursor-pointer"
                onClick={() => setOpen(true)}
              >
                <Search className="size-4" />
              </Button>
              <Dialog open={open} onOpenChange={setOpen}>
                <DialogContent className="p-0 overflow-hidden sm:max-w-2xl border-none shadow-2xl bg-transparent">
                  <DialogHeader className="sr-only">
                    <DialogTitle>Search</DialogTitle>
                    <DialogDescription>Search for tasks, dashboards, and more.</DialogDescription>
                  </DialogHeader>
                  <Command className="rounded-xl border shadow-md bg-popover text-popover-foreground overflow-hidden">
                    <div className="flex items-center border-b px-3 h-12" cmdk-input-wrapper="">
                      <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
                      <CommandInput
                        placeholder="Type a command or search..."
                        className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
                      />
                    </div>
                    <CommandList className="max-h-[300px] overflow-y-auto overflow-x-hidden p-2">
                      <CommandEmpty className="py-6 text-center text-sm">No results found.</CommandEmpty>
                      <CommandGroup heading="Suggestions" className="overflow-hidden text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground">
                        <CommandItem className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:bg-muted/50 transition-colors">
                          <IconChecklist className="mr-2 h-4 w-4" />
                          <span>Tasks</span>
                        </CommandItem>
                        <CommandItem className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:bg-muted/50 transition-colors">
                          <IconLayoutDashboard className="mr-2 h-4 w-4" />
                          <span>Dashboards</span>
                        </CommandItem>
                        <CommandItem className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:bg-muted/50 transition-colors">
                          <IconCalendarEvent className="mr-2 h-4 w-4" />
                          <span>Calendar</span>
                        </CommandItem>
                      </CommandGroup>
                      <CommandSeparator className="-mx-1 h-px bg-border my-2" />
                      <CommandGroup heading="Settings" className="overflow-hidden text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground">
                        <CommandItem className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:bg-muted/50 transition-colors">
                          <User className="mr-2 h-4 w-4" />
                          <span>Profile</span>
                        </CommandItem>
                        <CommandItem className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 hover:bg-muted/50 transition-colors">
                          <CreditCard className="mr-2 h-4 w-4" />
                          <span>Billing</span>
                        </CommandItem>
                        <CommandItem className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 cursor-pointer hover:bg-muted/50 transition-colors">
                          <Settings className="mr-2 h-4 w-4" />
                          <span>Settings</span>
                        </CommandItem>
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </DialogContent>
              </Dialog>

              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="p-1 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors cursor-pointer"
                  >
                    <div className="relative">
                      <BellIcon className="size-4" />
                      <span className="absolute -top-1 -right-1 flex h-2 w-2">
                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                        <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
                      </span>
                    </div>
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-80 p-0" align="start">
                  <PopoverHeader className="px-4 py-3 border-b border-border/50">
                    <PopoverTitle className="text-sm font-semibold flex items-center justify-between">
                      Notifications
                      <Badge variant="outline" className="text-[10px] font-bold px-1.5 py-0">3 New</Badge>
                    </PopoverTitle>
                  </PopoverHeader>
                  <ScrollArea className="h-[300px]">
                    <div className="flex flex-col">
                      <div className="flex items-start gap-3 p-4 hover:bg-muted/50 transition-colors cursor-pointer border-b border-border/30">
                        <div className="size-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center shrink-0">
                          <CheckCircle2 className="size-4 text-blue-600 dark:text-blue-400" />
                        </div>
                        <div className="flex flex-col gap-1">
                          <p className="text-xs font-medium">Task "API Integration" completed</p>
                          <p className="text-[10px] text-muted-foreground">2 minutes ago • Project Alpha</p>
                        </div>
                      </div>
                      <div className="flex items-start gap-3 p-4 hover:bg-muted/50 transition-colors cursor-pointer border-b border-border/30">
                        <div className="size-8 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center shrink-0">
                          <MessageSquare className="size-4 text-orange-600 dark:text-orange-400" />
                        </div>
                        <div className="flex flex-col gap-1">
                          <p className="text-xs font-medium">New comment on "Design Review"</p>
                          <p className="text-[10px] text-muted-foreground">1 hour ago • By Sarah Miller</p>
                        </div>
                      </div>
                      <div className="flex items-start gap-3 p-4 hover:bg-muted/50 transition-colors cursor-pointer">
                        <div className="size-8 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center shrink-0">
                          <AlertCircle className="size-4 text-red-600 dark:text-red-400" />
                        </div>
                        <div className="flex flex-col gap-1">
                          <p className="text-xs font-medium">Deadline approaching: "Sprint 4"</p>
                          <p className="text-[10px] text-muted-foreground">Yesterday • Urgent action required</p>
                        </div>
                      </div>
                    </div>
                  </ScrollArea>
                  <div className="p-3 bg-muted/30 border-t border-border/50 text-center">
                    <Button variant="link" size="sm" className="h-auto p-0 text-[11px] font-semibold text-blue-600">
                      View all notifications
                    </Button>
                  </div>
                </PopoverContent>
              </Popover>
            </div>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <NavMain items={data.navMain} />
        <NavApps items={data.apps} />
        <NavSecondary items={data.records} />
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenuItem>
          <SidebarMenuButton tooltip="Options" className=" data-[active=true]:bg-white dark:data-[active=true]:bg-black data-[active=true]:text-zinc-900 dark:data-[active=true]:text-white data-[active=true]:hover:bg-zinc-100 dark:data-[active=true]:hover:bg-zinc-800 data-[active=true]:hover:text-zinc-900 data-[active=true]:shadow-sm rounded-none transition-colors outline-none focus-visible:ring-0">
            <IconSettings />
            <span>Options</span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarFooter>
    </Sidebar>
  );
}
```

### `src/components/dashboards/workflow-management-dashboard/components/header.tsx`

```tsx
import { Settings } from "lucide-react";
import { Separator } from "@/components/ui/separator";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ModeToggle } from "./theme-toggle";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

export default function Header() {
  return (
    <div className="flex h-14 items-center justify-between border-b border-border bg-background px-3 md:px-4">
      <div className="flex items-center justify-between  w-full">
        <div className="flex items-center gap-2">
          <div className="flex items-center gap-2">
            <SidebarTrigger />
            <p className="text-foreground">Tasks</p>
          </div>
          <Separator
            className="h-4 w-1 bg-border mt-2 "
            orientation="vertical"
          />
          <div className=" hidden md:block">
            <Tabs defaultValue="all" className="w-full">
              <TabsList className="h-8 w-full justify-start bg-transparent p-0 gap-1">
                <TabsTrigger
                  value="all"
                  className="h-7 px-3 text-[12px] rounded-md data-[state=active]:bg-neutral-100 data-[state=active]:border-border data-[state=active]:border data-[state=active]:text-muted-foreground transition-colors hover:bg-muted"
                >
                  All tasks
                </TabsTrigger>
                <TabsTrigger
                  value="team"
                  disabled
                  className="h-7 px-3 text-[12px] rounded-md data-[state=active]:bg-neutral-100 data-[state=active]:border-border data-[state=active]:border data-[state=active]:text-muted-foreground transition-colors hover:bg-muted"
                >
                  Tasks team
                </TabsTrigger>
                <TabsTrigger
                  value="sales"
                  disabled
                  className="h-7 px-3 text-[12px] rounded-md data-[state=active]:bg-neutral-100 data-[state=active]:border-border data-[state=active]:border data-[state=active]:text-muted-foreground transition-colors hover:bg-muted"
                >
                  Sales
                </TabsTrigger>
              </TabsList>
            </Tabs>
          </div>
        </div>
        <div className="flex items-center gap-2 text-muted-foreground font-medium mr-2">
          <Dialog>
            <DialogTrigger asChild>
              <Button className="flex items-center gap-2 bg-transparent text-muted-foreground hover:bg-muted/50 transition-colors group shadow-none">
                <Settings className=" size-4" />
                <span className="text-sm">Configure</span>
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px]">
              <DialogHeader>
                <DialogTitle>Configure Board</DialogTitle>
                <DialogDescription>
                  Adjust your board settings and workflow preferences.
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="flex items-center justify-between space-x-2">
                  <Label htmlFor="show-labels" className="flex flex-col space-y-1">
                    <span>Show Labels</span>
                    <span className="font-normal leading-snug text-muted-foreground">
                      Display task labels on the card overview.
                    </span>
                  </Label>
                  <Switch id="show-labels" defaultChecked />
                </div>
                <div className="flex items-center justify-between space-x-2">
                  <Label htmlFor="auto-assign" className="flex flex-col space-y-1">
                    <span>Auto-assign Tasks</span>
                    <span className="font-normal leading-snug text-muted-foreground">
                      Automatically assign new tasks to team members.
                    </span>
                  </Label>
                  <Switch id="auto-assign" />
                </div>
              </div>
            </DialogContent>
          </Dialog>

          <Separator
            className="h-4 w-1 bg-border mt-2 "
            orientation="vertical"
          />
          {/* <MessageCircle className="text-muted-foreground size-4" /> */}
          <ModeToggle />
        </div>
      </div>
    </div>
  );
}
```

### `src/components/dashboards/workflow-management-dashboard/components/nav-footer.tsx`

```tsx
"use client";

import {
  IconCreditCard,
  IconDotsVertical,
  IconLogout,
  IconNotification,
  IconUserCircle,
} 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>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground transition-colors outline-none focus-visible:ring-0"
            >
              <Avatar className="h-8 w-8 rounded-none grayscale">
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback className="rounded-none bg-zinc-200">CN</AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">{user.name}</span>
                <span className="text-muted-foreground truncate text-xs">
                  {user.email}
                </span>
              </div>
              <IconDotsVertical className="ml-auto size-4" />
            </SidebarMenuButton>
          </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">CN</AvatarFallback>
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-medium">{user.name}</span>
                  <span className="text-muted-foreground truncate text-xs">
                    {user.email}
                  </span>
                </div>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <IconUserCircle />
                Account
              </DropdownMenuItem>
              <DropdownMenuItem>
                <IconCreditCard />
                Billing
              </DropdownMenuItem>
              <DropdownMenuItem>
                <IconNotification />
                Notifications
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <IconLogout />
              Log out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}
```

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

```tsx
"use client";

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

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

export function NavMain({
  items,
}: {
  items: {
    title: string;
    url: string;
    icon?: Icon;
    isActive?: boolean;
  }[];
}) {
  return (
    <SidebarGroup className="">
      <SidebarGroupContent className="flex flex-col gap-0">
        <SidebarMenu className="gap-">
          {items.map((item) => (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton
                tooltip={item.title}
                isActive={item.isActive}
                className=" data-[active=true]:bg-white dark:data-[active=true]:bg-black data-[active=true]:text-zinc-900 dark:data-[active=true]:text-white data-[active=true]:hover:bg-zinc-100 dark:data-[active=true]:hover:bg-zinc-800 data-[active=true]:hover:text-zinc-900 data-[active=true]:shadow-sm rounded-none transition-colors outline-none focus-visible:ring-0"
              >
                {item.icon && <item.icon />}
                <span>{item.title}</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  );
}
```

### `src/components/dashboards/workflow-management-dashboard/components/nav-options.tsx`

```tsx
"use client";

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

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


export function NavSecondary({
  items,
  ...props
}: {
  items: {
    title: string;
    url: string;
    icon: Icon;
  }[];
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
  return (
    <SidebarGroup {...props}>
      <SidebarGroupContent>
        <SidebarGroupLabel className="font-mono text-md">Records</SidebarGroupLabel>
        <SidebarMenu className="gap-0">
          {items.map((item) => (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton
                tooltip={item.title}
                className=" data-[active=true]:bg-white dark:data-[active=true]:bg-black data-[active=true]:text-zinc-900 dark:data-[active=true]:text-white data-[active=true]:hover:bg-zinc-100 dark:data-[active=true]:hover:bg-zinc-800 data-[active=true]:hover:text-zinc-900 data-[active=true]:shadow-sm rounded-none transition-colors outline-none focus-visible:ring-0"
              >
                <item.icon />
                <span>{item.title}</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>

      </SidebarGroupContent>
    </SidebarGroup>
  );
}
```

### `src/components/dashboards/workflow-management-dashboard/components/nav-products.tsx`

```tsx
"use client";

import {
  type Icon,
} from "@tabler/icons-react";
import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";

export function NavApps({
  items,
}: {
  items: {
    title: string;
    url: string;
    icon: Icon;
    className: string
  }[];
}) {

  return (
    <SidebarGroup >
      <SidebarGroupContent>
        <SidebarGroupLabel className="font-mono text-sm ">
          Apps
        </SidebarGroupLabel>
        <SidebarMenu className="gap-0">
          {items.map((item) => (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton
                tooltip={item.title}
                className=" data-[active=true]:bg-white dark:data-[active=true]:bg-black data-[active=true]:text-zinc-900 dark:data-[active=true]:text-white data-[active=true]:hover:bg-zinc-100 dark:data-[active=true]:hover:bg-zinc-800 data-[active=true]:hover:text-zinc-900 data-[active=true]:shadow-sm rounded-none transition-colors outline-none focus-visible:ring-0"
              >
                <item.icon className={item.className} />
                <span>{item.title}</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  );
}
```

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

```tsx
import { create } from "zustand";

export interface SubTask {
  id: string;
  title: string;
  completed: boolean;
}

export interface TaskMessage {
  author: string;
  platform: string;
  timestamp: string;
  content: string;
  avatar?: string;
}

export interface TimelineEvent {
  event: string;
  date: string;
}

export interface Task {
  id: string;
  mainTitle: string;
  date: string;
  title: string;
  tags: { label: string; icon: string }[];
  subTasks: SubTask[];
  waitingOn?: TaskMessage;
  timeline: TimelineEvent[];
}

interface TaskState {
  tasks: Task[];
  selectedTaskId: string | null;
  selectTask: (id: string | null) => void;
  toggleSubTask: (taskId: string, subTaskId: string) => void;
}

export const useTaskStore = create<TaskState>((set) => ({
  tasks: [
    {
      id: "AGE-2201",
      date: "Apr 25",
      mainTitle: "Onboard new features and introduce key features",
      title: "Investigate meeting recording camera visibility issue",
      tags: [
        { label: "Shopify", icon: "S" },
        { label: "Sofia", icon: "S" },
      ],
      subTasks: [
        {
          id: "st1",
          title: "Message provider for resolution ETA",
          completed: false,
        },
        { id: "st2", title: "Update Elias today", completed: false },
      ],
      waitingOn: {
        author: "Elias Torres",
        platform: "Slack",
        timestamp: "Today 03:18 PM",
        content:
          "Hey — following up again. We've tested across devices and the camera view is still missing in recordings. This is blocking us now.",
      },
      timeline: [
        {
          event: "Follow-up sent to customer with expected resolution timeline",
          date: "Dec 20",
        },
        {
          event: "Issue confirmed and escalated to meeting bot provider",
          date: "Dec 18",
        },
        {
          event: "Customer reported missing participant cameras in recordings",
          date: "Dec 15",
        },
      ],
    },
    {
      id: "AGE-2202",
      date: "Apr 25",
      mainTitle: "Details on Roadmap",
      title: "Share customer success stories and product roadmap",
      tags: [
        { label: "Stripe", icon: "S" },
        { label: "Valen", icon: "V" },
      ],
      subTasks: [
        {
          id: "st3",
          title: "Escalate internally to engineering",
          completed: false,
        },
      ],
      timeline: [],
    },
    {
      id: "AGE-2203",
      date: "Apr 26",
      mainTitle: "Quarterly Goals",
      title: "Check in on quarterly goals and progress",
      tags: [
        { label: "Vercel", icon: "V" },
        { label: "Sofia", icon: "S" },
      ],
      subTasks: [
        {
          id: "st4",
          title: "Review Q1 metrics and prepare for board meeting",
          completed: false,
        },
      ],
      timeline: [],
    },
    {
      id: "AGE-2204",
      date: "Apr 27",
      mainTitle: "Onboard new users to the agency platform",
      title: "Onboard new users to the agency platform",
      tags: [
        { label: "Figma", icon: "F" },
        { label: "Lucas", icon: "L" },
      ],
      subTasks: [
        {
          id: "st5",
          title: "Setup workspace and initial permissions",
          completed: true,
        },
        {
          id: "st6",
          title: "Send welcome kit and tutorial links",
          completed: false,
        },
      ],
      timeline: [],
    },

  ],
  selectedTaskId: null,

  selectTask: (id: string | null) => set({ selectedTaskId: id }),

  toggleSubTask: (taskId: string, subTaskId: string) =>
    set((state: TaskState) => ({
      tasks: state.tasks.map((task: Task) =>
        task.id === taskId
          ? {
            ...task,
            subTasks: task.subTasks.map((st: SubTask) =>
              st.id === subTaskId ? { ...st, completed: !st.completed } : st
            ),
          }
          : task
      ),
    })),
}));
```

### `src/components/dashboards/workflow-management-dashboard/components/task-detail-header.tsx`

```tsx
import { useTaskStore, type Task } from "./store/task-store";

import { AlertCircle, Check, Ellipsis, X, Share2, Trash2, Copy } from "lucide-react";
import { Separator } from "@/components/ui/separator";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge";

export default function TaskDetailHeader() {
  const { tasks, selectedTaskId, selectTask } = useTaskStore();
  const task = tasks.find((t: Task) => t.id === selectedTaskId);
  if (!task) {
    return null;
  }
  return (
    <div className="hidden w-full h-12 items-center justify-between border-r border-b border-border bg-background px-3 md:flex    ">
      <div className="flex items-center  gap-1  ">
        <Button
          variant="ghost"
          size="sm"
          className=" p-1 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors cursor-pointer"
          onClick={() => selectTask(null)}
        >
          <X className="size-4 transition-transform hover:rotate-90" />
        </Button>
        <p className="text-md w-[250px] truncate ">{task.mainTitle}</p>
      </div>
      <div className="hidden items-center gap-1 mr-1 lg:flex">
        <Button
          variant="ghost"
          size="sm"
          className=" text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors cursor-pointer"
        >
          <Check className="size-4 hover:bg-muted/50 cursor-pointer" />
          <p>close as completed</p>
        </Button>
        <Separator className="h-4 w-1 bg-border mt-2 " orientation="vertical" />
        <Dialog>
          <DialogTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              className="  text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors cursor-pointer"
            >
              <AlertCircle className="size-4" />
              <p>View Details</p>
            </Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[500px]">
            <DialogHeader>
              <DialogTitle>{task.title}</DialogTitle>
              <DialogDescription>
                Detailed overview of task metadata and history.
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4 border-y border-border/50 my-2">
              <div className="grid grid-cols-4 items-center gap-4">
                <span className="text-xs font-semibold text-muted-foreground uppercase">ID</span>
                <span className="col-span-3 text-sm font-mono">{task.id}</span>
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <span className="text-xs font-semibold text-muted-foreground uppercase">Created</span>
                <span className="col-span-3 text-sm">{task.date}</span>
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <span className="text-xs font-semibold text-muted-foreground uppercase">Tags</span>
                <div className="col-span-3 flex gap-2">
                  {task.tags.map((tag: { label: string; icon: string }) => (
                    <Badge key={tag.label} variant="outline" className="text-[10px]">{tag.label}</Badge>
                  ))}
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button type="submit" size="sm" className="bg-blue-600 hover:bg-blue-700">Open full page</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        <Separator className="h-4 w-1 bg-border mt-2 " orientation="vertical" />
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              className=" text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors cursor-pointer"
            >
              <Ellipsis className="size-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-48">
            <DropdownMenuItem className="gap-2 cursor-pointer">
              <Share2 className="size-3.5" />
              <span>Share task</span>
            </DropdownMenuItem>
            <DropdownMenuItem className="gap-2 cursor-pointer">
              <Copy className="size-3.5" />
              <span>Duplicate</span>
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem className="gap-2 text-destructive focus:text-destructive cursor-pointer">
              <Trash2 className="size-3.5" />
              <span>Delete task</span>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  );
}
```

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

```tsx
import { useTaskStore, type Task, type SubTask, type TimelineEvent } from "./store/task-store";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { Send } from "lucide-react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";
import { Checkbox } from "@/components/ui/checkbox";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";

export function TaskDetail() {
  const { tasks, selectedTaskId, toggleSubTask } = useTaskStore();
  const task = tasks.find((t: Task) => t.id === selectedTaskId);

  if (!task) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
        <p className="text-sm">Select a task to view details</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full  ">
      <ScrollArea className="flex-1 min-h-0 w-full">
        <div className="lg:px-24 lg:py-20 p-4 max-w-4xl space-y-4 mx-auto">
          <div className="space-y-2">
            <div className="size-12 border rounded-xs flex items-center justify-center shrink-0 shadow-sm">
              <div className="size-8 rounded-full border border-muted-foreground" />
            </div>
            <h2 className="text-3xl font-medium tracking-tight text-foreground">
              {task.title}
            </h2>
          </div>
          {task.waitingOn && (
            <div className="space-y-2">
              <div className="flex items-center ">
                <h3 className="text-sm font-medium text-muted-foreground">
                  Waiting on us
                </h3>
              </div>

              <div className="bg-foreground/5  border rounded-none p-2">
                <div className="flex items-start gap-3">
                  <Avatar className="size-10 border-2 border-white shadow-sm rounded-none">
                    <AvatarFallback className="text-[11px] bg-blue-600 text-white font-bold rounded-none">
                      ET
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex items-start space-x-2 self-start">
                    <div className="flex items-center">
                      <div className="flex flex-col">
                        <div className="flex items-center gap-1.5">
                          <span className="text-sm font-medium text-foreground">
                            {task.waitingOn.author}
                          </span>

                          <span className="text-xs flex items-center font-medium font-mono mt-0.5 rounded text-muted-foreground  ">
                            ({task.waitingOn.platform})
                          </span>
                          <Separator
                            className="h-4 w-1 bg-border mt-0.5 "
                            orientation="vertical"
                          />
                          <span className="text-xs text-muted-foreground font-medium self-center mt-0.5">
                            {task.waitingOn.timestamp}
                          </span>
                        </div>
                        <p className="text-[14px] leading-relaxed text-foreground italic font-medium">
                          "{task.waitingOn.content}"
                        </p>
                      </div>
                    </div>

                    <p className="text-[14px] leading-relaxed text-gray-700 italic font-medium"></p>
                  </div>
                </div>
              </div>
            </div>
          )}
          <div className="space-y-4">
            <h3 className="text-[11px] font-bold uppercase tracking-wider text-muted-foreground/60">
              Next Moves
            </h3>
            <div className="space-y-4">
              {task.subTasks.map((sub: SubTask) => (
                <div
                  key={sub.id}
                  className="flex items-center gap-3 p-3 bg-foreground/5 border border-border/50 rounded-none group hover:bg-muted transition-colors duration-200 cursor-pointer"
                >
                  <Checkbox
                    id={sub.id}
                    checked={sub.completed}
                    onCheckedChange={() => toggleSubTask(task.id, sub.id)}
                    className="size-4 shrink-0 rounded-none border-muted-foreground/30 data-[state=checked]:bg-blue-500 data-[state=checked]:border-none dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-none shadow-card p-1 transition-all group-hover:border-blue-400"
                  />
                  <label
                    htmlFor={sub.id}
                    className={cn(
                      "text-sm font-medium cursor-pointer",
                      sub.completed
                        ? "text-muted-foreground line-through"
                        : "text-foreground"
                    )}
                  >
                    {sub.title}
                  </label>
                </div>
              ))}
            </div>
          </div>

          <div className="space-y-4 pt-4">
            <div className="flex flex-col gap-4 ">
              <h3 className="text-md font-medium  tracking-wider text-muted-foreground/60">
                Timeline
              </h3>
              <div className="relative group">
                <Textarea
                  placeholder="Add a comment or update..."
                  className="min-h-[100px] bg-foreground/5 border-border shadow-card resize-none focus-visible:ring-1 focus-visible:ring-blue-600 rounded-none p-4 text-sm"
                />
                <div className="absolute bottom-3 right-3 flex items-center gap-2">
                  <span className="text-[10px] text-muted-foreground font-medium hidden group-focus-within:block">
                    Press ⌘ + Enter to post
                  </span>
                  <Button
                    size="sm"
                    className="h-8 w-8 rounded-none bg-blue-600 hover:bg-blue-700 transition-colors"
                  >
                    <Send className="size-3.5" />
                  </Button>
                </div>
              </div>
            </div>

            <div className="relative flex flex-col gap-2 ">
              {task.timeline?.map((item: TimelineEvent, index: number) => (
                <div
                  key={index}
                  className="relative flex items-center justify-between"
                >
                  <div className="flex items-center justify-between w-full">
                    <p className="text-[14px] font-medium text-muted-foreground">
                      {item.event}
                    </p>
                    <time className="text-xs text-muted-foreground font-medium tabular-nums">
                      {item.date}
                    </time>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </ScrollArea>
    </div>
  );
}
```

### `src/components/dashboards/workflow-management-dashboard/components/task-list-header.tsx`

```tsx
import {
  ListFilter,
  LayoutPanelLeft,
  User,
  BarChart2,
  Tag,
  CircleDot,
} from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
  DropdownMenuLabel,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

export default function TaskListHeader() {
  return (
    <div className="flex  h-12 items-center justify-between border-r border-b border-border bg-background px-1 shrink-0">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            size="sm"
            className="h-8 gap-2 px-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors flex items-center justify-center cursor-pointer"
          >
            <ListFilter className="size-3" />
            Filter

          </Button>
        </DropdownMenuTrigger>

        <DropdownMenuContent
          align="start"
          className="w-[180px] p-1 shadow-md border-muted"
        >
          <DropdownMenuLabel className="text-[11px] font-medium text-muted-foreground px-2 py-1.5 uppercase tracking-wider">
            Filter by
          </DropdownMenuLabel>

          <DropdownMenuItem className="text-[12px] gap-2 px-2 py-1.5 focus:bg-muted cursor-pointer">
            <CircleDot className="size-3.5 text-muted-foreground" />
            Status
          </DropdownMenuItem>

          <DropdownMenuItem className="text-[12px] gap-2 px-2 py-1.5 focus:bg-muted cursor-pointer">
            <User className="size-3.5 text-muted-foreground" />
            Assignee
          </DropdownMenuItem>

          <DropdownMenuSeparator className="bg-muted/50" />

          <DropdownMenuItem className="text-[12px] gap-2 px-2 py-1.5 focus:bg-muted cursor-pointer">
            <BarChart2 className="size-3.5 text-muted-foreground" />
            Priority
          </DropdownMenuItem>

          <DropdownMenuItem className="text-[12px] gap-2 px-2 py-1.5 focus:bg-muted cursor-pointer">
            <Tag className="size-3.5 text-muted-foreground" />
            Label
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <Popover>
        <PopoverTrigger asChild>
          <Button
            variant="ghost"
            size="sm"
            className="h-8 gap-2 px-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors flex items-center justify-center cursor-pointer"
          >
            <LayoutPanelLeft className="size-3" />
            Display
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-56 p-3" align="end">
          <PopoverHeader className="mb-2">
            <PopoverTitle className="text-xs uppercase tracking-wider text-muted-foreground">Display Settings</PopoverTitle>
          </PopoverHeader>
          <div className="grid gap-3">
            <div className="flex flex-col gap-1.5">
              <Label className="text-[11px]">Density</Label>
              <Select defaultValue="comfortable">
                <SelectTrigger className="h-8 text-xs">
                  <SelectValue placeholder="Density" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="compact" className="text-xs">Compact</SelectItem>
                  <SelectItem value="comfortable" className="text-xs">Comfortable</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="flex flex-col gap-1.5">
              <Label className="text-[11px]">Group By</Label>
              <Select defaultValue="status">
                <SelectTrigger className="h-8 text-xs">
                  <SelectValue placeholder="Group by" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="status" className="text-xs">Status</SelectItem>
                  <SelectItem value="assignee" className="text-xs">Assignee</SelectItem>
                  <SelectItem value="priority" className="text-xs">Priority</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}
```

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

```tsx
import { useTaskStore, type Task, type SubTask } from "./store/task-store";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import {
  CornerDownRight,
  Calendar,
  ChevronsUp,
  BadgeCent,
  Inbox,
  Plus,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

export function TaskList() {
  const { tasks, selectedTaskId, selectTask, toggleSubTask } = useTaskStore();
  return (
    <div className="flex flex-col h-full bg-foreground/5 dark:bg-black overflow-hidden">
      <TooltipProvider delayDuration={300}>
        <ScrollArea className="flex-1 min-h-0 w-full">
          <div className="p-2.5 space-y-1">
            {tasks.length === 0 ? (
              <div className="flex flex-col items-center justify-center h-[400px] px-6 text-center">
                <div className="size-12 rounded-full bg-muted flex items-center justify-center mb-4">
                  <Inbox className="size-6 text-muted-foreground/60" />
                </div>
                <h3 className="text-sm font-medium text-foreground">No tasks found</h3>
                <p className="text-xs text-muted-foreground mt-1 mb-4">
                  Try adjusting your filters or create a new task to get started.
                </p>
                <Button variant="outline" size="sm" className="h-8 gap-2 text-xs">
                  <Plus className="size-3.5" />
                  New Task
                </Button>
              </div>
            ) : (
              tasks.map((task: Task) => (
                <div key={task.id} className="flex flex-col">
                  <div
                    onClick={() => selectTask(task.id)}
                    className={cn(
                      "p-3 rounded-none border cursor-pointer transition-colors duration-200 mb-1 shadow-card group/card",
                      selectedTaskId === task.id
                        ? "border-blue-400 bg-card ring-1 ring-blue-400/20"
                        : "bg-card hover:bg-muted/40 border-border"
                    )}
                  >
                    <div className="flex items-center justify-between mb-1.5">
                      <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground font-medium">
                        <span>{task.id}</span>
                        <span>/</span>
                        <span className="flex items-center gap-1">
                          <Calendar className="size-3 text-muted-foreground" />
                          {task.date}
                        </span>
                      </div>
                      <div className="flex items-center gap-1.5 text-blue-500">
                        <ChevronsUp className="size-4 stroke-3" />
                        <BadgeCent className="size-4 stroke-3" />
                      </div>
                    </div>

                    <h3 className="text-sm font-medium leading-tight mb-2.5 break-all line-clamp-3">
                      {task.title}
                    </h3>

                    <div className="flex items-center gap-2">
                      <div className="size-5 border rounded-xs flex items-center justify-center shrink-0">
                        <div className="size-2 rounded-full border border-muted-foreground" />
                      </div>
                      <div className="flex gap-1.5 overflow-hidden">
                        {task.tags.map((tag: { label: string; icon: string }) => (
                          <Tooltip key={tag.label}>
                            <TooltipTrigger asChild>
                              <Badge
                                variant="outline"
                                className="px-1.5 text-xs font-normal gap-1 bg-card rounded-none shrink-0 cursor-help hover:bg-muted/50 transition-colors"
                              >
                                <span className="size-3 rounded-xs bg-muted flex items-center justify-center text-[8px] font-bold">
                                  {tag.icon}
                                </span>
                                {tag.label}
                              </Badge>
                            </TooltipTrigger>
                            <TooltipContent side="bottom" className="text-[10px] py-1 px-2">
                              Filter by {tag.label}
                            </TooltipContent>
                          </Tooltip>
                        ))}
                      </div>
                    </div>
                  </div>

                  <div className=" flex flex-col gap-1 mb-3">
                    {task.subTasks.map((subTask: SubTask) => (
                      <div
                        key={subTask.id}
                        className="group flex items-center gap-2 px-3 py-1.5 rounded-none bg-muted shadow-card transition-colors hover:bg-muted/80"
                      >
                        <CornerDownRight className="size-3.5 text-muted-foreground/50 shrink-0" />

                        <div className="flex items-center gap-2 flex-1">
                          <Checkbox
                            checked={subTask.completed}
                            onCheckedChange={() =>
                              toggleSubTask(task.id, subTask.id)
                            }
                            className="size-4 shrink-0 rounded-none border-muted-foreground/30 data-[state=checked]:bg-blue-500 data-[state=checked]:border-none  dark:data-[state=checked]:bg-blue-500 dark:data-[state=checked]:border-none shadow-card p-1 transition-all"
                          />
                          <p
                            className={cn(
                              "text-[12px] font-medium transition-colors truncate w-[250px]",
                              subTask.completed
                                ? "text-muted-foreground/60 line-through"
                                : "text-foreground/80"
                            )}
                          >
                            {subTask.title}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))
            )}
          </div>
        </ScrollArea>
      </TooltipProvider>
    </div>
  );
}
```

### `src/components/dashboards/workflow-management-dashboard/components/team-switcher.tsx`

```tsx
"use client";

import { ChevronsUpDown, Plus } from "lucide-react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from "@/components/ui/sidebar";
import { useState } from "react";

export function TeamSwitcher({
  teams,
}: {
  teams: {
    name: string;
    logo: React.ElementType;
    plan: string;
  }[];
}) {
  const { isMobile } = useSidebar();
  const [activeTeam, setActiveTeam] = useState(teams[0]);

  if (!activeTeam) {
    return null;
  }

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground rounded-none transition-colors outline-none focus-visible:ring-0"
            >
              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-none">
                <activeTeam.logo className="size-4" />
              </div>
              <div className=" flex items-center justify-center text-left text-sm leading-tight gap-1">
                <span className="truncate font-medium">{activeTeam.name}</span>
                <ChevronsUpDown className="" />
              </div>

            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            align="start"
            side={isMobile ? "bottom" : "bottom"}
            sideOffset={4}
          >
            <DropdownMenuLabel className="text-muted-foreground text-xs">
              Teams
            </DropdownMenuLabel>
            {teams.map((team, index) => (
              <DropdownMenuItem
                key={team.name}
                onClick={() => setActiveTeam(team)}
                className="gap-2 p-2"
              >
                <div className="flex size-6 items-center justify-center rounded-md border">
                  <team.logo className="size-3.5 shrink-0" />
                </div>
                {team.name}
                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
              </DropdownMenuItem>
            ))}
            <DropdownMenuSeparator />
            <DropdownMenuItem className="gap-2 p-2">
              <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
                <Plus className="size-4" />
              </div>
              <div className="text-muted-foreground font-medium">Add team</div>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}
```

### `src/components/dashboards/workflow-management-dashboard/components/theme-provider.tsx`

```tsx
"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({
  children,
  ...props
}: React.ComponentProps<typeof NextThemesProvider>) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}
```

### `src/components/dashboards/workflow-management-dashboard/components/theme-toggle.tsx`

```tsx
"use client";

import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,  
} from "@/components/ui/dropdown-menu";

export function ModeToggle() {
  const { setTheme } = useTheme();

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

### `src/components/dashboards/workflow-management-dashboard/dashboard-layout.tsx`

```tsx
"use client";
import { AppSidebar } from "./components/app-sidebar";
import { SidebarProvider } from "@/components/ui/sidebar";

export const DashboardLayout = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  return (
    <div className="bg-white dark:bg-white/5  h-svh w-screen overflow-hidden font-sans ">
      <SidebarProvider
        className="h-full min-h-0! overflow-hidden"
        style={
          {
            "--sidebar-width": "calc(var(--spacing) * 60)",
            "--header-height": "calc(var(--spacing) * 12)",
          } as React.CSSProperties
        }
      >
        <AppSidebar />

        {children}
      </SidebarProvider>
    </div>
  );
};
```

### `src/components/dashboards/workflow-management-dashboard/dashboardView.tsx`

```tsx
"use client";

import Header from "./components/header";
import { TaskDetail } from "./components/task-detail";
import TaskDetailHeader from "./components/task-detail-header";
import { TaskList } from "./components/task-list";
import TaskListHeader from "./components/task-list-header";
import { Drawer, DrawerContent } from "@/components/ui/drawer";
import { useIsMobile } from "@/hooks/use-mobile";
import { useTaskStore } from "./components/store/task-store";
import { useEffect, useState, useRef } from "react";

export default function Home() {
  const { tasks, selectedTaskId, selectTask } = useTaskStore();
  const isMobile = useIsMobile();
  const [drawerOpen, setDrawerOpen] = useState(false);
  const hasInitializedRef = useRef(false);

  const handleDrawerClose = (open: boolean) => {
    setDrawerOpen(open);
    if (!open) {
      selectTask(null);
    }
  };
  useEffect(() => {
    if (
      isMobile === false &&
      tasks.length > 0 &&
      !selectedTaskId &&
      !hasInitializedRef.current
    ) {
      selectTask(tasks[0].id);
      hasInitializedRef.current = true;
    }
  }, [tasks, selectedTaskId, isMobile, selectTask]);

  useEffect(() => {
    if (isMobile && selectedTaskId) {
      setTimeout(() => setDrawerOpen(true), 0);
    }
  }, [isMobile, selectedTaskId]);

  useEffect(() => {
    if (!selectedTaskId) {
      setTimeout(() => setDrawerOpen(false), 0);
    }
  }, [selectedTaskId]);

  return (
    <div className="flex flex-col min-h-screen w-full bg-background">
      <Header />

      <div className="flex flex-1 flex-col overflow-hidden">
        <div className="flex border-b">
          <div className="w-full md:w-[340px] border-r">
            <TaskListHeader />
          </div>
          <div className="flex-1 hidden md:block">
            <TaskDetailHeader />
          </div>
        </div>

        <div className="flex flex-1 overflow-hidden">
          <div className="w-full md:w-[340px] border-r border-border shrink-0">
            <TaskList />
          </div>
          <div className="flex-1 hidden md:block">
            <TaskDetail />
          </div>
        </div>

        <Drawer open={drawerOpen} onOpenChange={handleDrawerClose}>
          <DrawerContent className="h-[90vh]">
            <div className="flex-1 f-full overflow-hidden">
              <TaskDetail />
            </div>
          </DrawerContent>
        </Drawer>
      </div>
    </div>
  );
}
```

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

```tsx
import { DashboardLayout } from './dashboard-layout'
import DashboardView from './dashboardView'

export default function WorkflowManagementDashboardDemo() {
    return (
        <DashboardLayout>
            <DashboardView />
        </DashboardLayout>
    )
}
```