# Meetings dashboard

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

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

## Install

```bash
npx shadcn@latest add https://registry.watermelon.sh/r/meetings-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: `@radix-ui/react-avatar`, `@radix-ui/react-collapsible`, `@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-label`, `@radix-ui/react-popover`, `@radix-ui/react-radio-group`, `@radix-ui/react-select`, `@radix-ui/react-separator`, `@radix-ui/react-slot`, `@radix-ui/react-tabs`, `@radix-ui/react-tooltip`, `@tabler/icons-react`, `class-variance-authority`, `lucide-react`
- Registry items: `avatar`, `badge`, `button`, `card`, `checkbox`, `collapsible`, `dialog`, `dropdown-menu`, `input`, `label`, `popover`, `radio-group`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `tabs`, `tooltip`

## Files

### `src/components/dashboards/meetings-dashboard/components/FilterSection.tsx`

```tsx
import React from "react"
import { IconChevronDown } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from "@/components/ui/collapsible"

export const FilterSection = ({ title, children, defaultOpen = false }: { title: string, children: React.ReactNode, defaultOpen?: boolean }) => {
    const [isOpen, setIsOpen] = React.useState(defaultOpen)
    return (
        <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-full border-[1.3px] rounded-lg bg-neutral-200/20 dark:bg-neutral-900/60 border-neutral-200 dark:border-neutral-800 px-1">
            <CollapsibleTrigger asChild className={`h-fit ${isOpen ? "" : "pb-2"} px-0`}>
                <Button variant="ghost" className="w-full justify-between items-center px-2! hover:bg-transparent dark:hover:bg-transparent font-medium text-xs text-neutral-500/90 dark:text-neutral-300 uppercase tracking transition-colors">
                    {title}
                    <IconChevronDown className={`w-4 h-4 transition-transform duration-200 dark:text-neutral-500 ${isOpen ? "" : "-rotate-90"}`} />
                </Button>
            </CollapsibleTrigger>
            <CollapsibleContent className="space-y-1 px-0!">
                {children}
            </CollapsibleContent>
        </Collapsible>
    )
}
```

### `src/components/dashboards/meetings-dashboard/components/MeetingCard.tsx`

```tsx
import {
    IconCalendar,
    IconClock,
    IconBuilding,
    IconVideo,
    IconDotsVertical,
    IconBrandSlack,
    IconBrandGoogleFilled,
    IconVideoFilled,
    IconVideoPlusFilled,
    IconBrandDiscordFilled
} from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
    IconEdit,
    IconTrash,
    IconCalendarPlus,
    IconVideo as IconJoin
} from "@tabler/icons-react"

const PlatformIcon = ({ platform }: { platform: string }) => {
    switch (platform) {
        case "meet": return <IconVideoFilled className="size-7 text-blue-500" />
        case "zoom": return <IconVideoPlusFilled className="size-7 text-blue-600" />
        case "discord": return <IconBrandDiscordFilled className="size-7 text-indigo-500" />
        case "slack": return <IconBrandSlack className="size-7 text-[#4A154B]" />
        case "google": return <IconBrandGoogleFilled className="size-7 text-red-500" />
        default: return <IconVideo className="size-7" />
    }
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const MeetingCard = ({ meeting }: { meeting: any }) => (
    <Card className="border-[1.3px] border-neutral-200/80 bg-neutral-100/60 dark:bg-neutral-800/50 dark:border-neutral-800 shadow-none px-2 pt-1.5 pb-2.5 gap-2 transition-colors duration-200 hover:bg-neutral-200/50 dark:hover:bg-neutral-800/80 cursor-pointer group outline-none">
        <CardHeader className="p-0! flex flex-row items-center justify-between space-y-0">
            <div className="flex items-center gap-1.5 overflow-hidden">
                <PlatformIcon platform={meeting.platform} />
                <CardTitle className="text-sm font-semibold text-neutral-600 dark:text-neutral-300 truncate tracking-tight">{meeting.title}</CardTitle>
            </div>
            <DropdownMenu>
                <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="size-6 text-neutral-400 dark:text-neutral-500 transition-colors opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100 outline-none focus-visible:ring-0">
                        <IconDotsVertical className="w-4 h-4" />
                    </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-48">
                    <DropdownMenuLabel className="text-xs font-semibold text-neutral-500 dark:text-neutral-400">Card Actions</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem className="text-blue-500 dark:text-blue-400 focus:text-blue-600 focus:bg-blue-50/50 dark:focus:bg-blue-900/20">
                        <IconJoin className="mr-2 h-4 w-4" />
                        <span>Join Meeting</span>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                        <IconEdit className="mr-2 h-4 w-4" />
                        <span>Edit Details</span>
                    </DropdownMenuItem>
                    <DropdownMenuItem>
                        <IconCalendarPlus className="mr-2 h-4 w-4" />
                        <span>Reschedule</span>
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem className="text-red-500 dark:text-red-400 focus:text-red-600 focus:bg-red-50/50 dark:focus:bg-red-900/20">
                        <IconTrash className="mr-2 h-4 w-4" />
                        <span>Cancel Meeting</span>
                    </DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
        </CardHeader>
        <CardContent className="p-0 px-0.5 space-y-3">
            <div className="space-y-1">
                <p className="text-[13px] tracking-tight font-medium text-neutral-400 dark:text-neutral-500">Date</p>
                <div className="flex items-center gap-1.5 text-[12px] tracking-tight font-medium text-neutral-600 dark:text-neutral-400">
                    <IconCalendar className="size-4 text-neutral-400 dark:text-neutral-500" />
                    {meeting.date}
                </div>
            </div>

            <div className="space-y-1">
                <p className="text-[13px] font-medium text-neutral-400 dark:text-neutral-500 tracking-tight">Meeting Host</p>
                <div className="flex items-center gap-1.5 text-[12px] text-neutral-600 dark:text-neutral-400 font-medium tracking-tight">
                    <Avatar className="size-4">
                        <AvatarImage src={meeting.host.avatar} />
                        <AvatarFallback className="text-[9px] bg-neutral-200 dark:bg-neutral-800">{meeting.host.name.charAt(0)}</AvatarFallback>
                    </Avatar>
                    {meeting.host.name} {meeting.host.isMe && <span className="text-neutral-400 dark:text-neutral-500 font-normal">(You)</span>}
                </div>
            </div>

            <div className="space-y-1">
                <p className="text-[12px] font-medium text-neutral-400 dark:text-neutral-500 tracking-tight">Meeting Duration</p>
                <div className="flex items-center gap-1.5 text-xs font-medium text-neutral-600 dark:text-neutral-400 tracking-tight">
                    <IconClock className="size-4 text-neutral-400 dark:text-neutral-500" />
                    {meeting.duration}
                </div>
            </div>

            <div className="space-y-1">
                <p className="text-[12px] font-medium text-neutral-400 dark:text-neutral-500 tracking-tight">Related To</p>
                <div className="flex items-center gap-1.5 text-xs font-medium text-neutral-600 dark:text-neutral-400 tracking-tight">
                    <IconBuilding className="size-4 text-neutral-400 dark:text-neutral-500" />
                    <span className="truncate">{meeting.relatedTo}</span>
                </div>
            </div>
        </CardContent>
    </Card>
)
```

### `src/components/dashboards/meetings-dashboard/components/SidebarFilters.tsx`

```tsx
import React from "react"
import {
    IconChevronDown,
    IconFilter,
    IconClock,
    IconBuilding
} from "@tabler/icons-react"
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger
} from "@/components/ui/collapsible"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Calendar, CalendarClock, CalendarDays, CircleCheckBig, CircleUserRound, MapPinned, Video } from "lucide-react"
import { FilterSection } from "./FilterSection"

export const SidebarFilters = () => {
    const [isStatusOpen, setIsStatusOpen] = React.useState(true)
    const [isLocationOpen, setIsLocationOpen] = React.useState(true)

    return (
        <div className="w-[240px] border-[1.5px] rounded-lg flex flex-col h-full p-1 overflow-hidden shrink-0 bg-white dark:bg-neutral-950 border-neutral-200 dark:border-neutral-800 gap-1.5">
            <div className="px-2 py-1.5">
                <h2 className="text-sm text-neutral-500 dark:text-neutral-200 font-medium">Filters</h2>
            </div>
            <div className="flex-1 overflow-y-auto flex flex-col gap-2 scrollbar-hide">
                <FilterSection title="Meeting Properties" defaultOpen>
                    <div className="space-y-2">
                        <Collapsible open={isStatusOpen} onOpenChange={setIsStatusOpen} className="space-y-2 p-2 rounded-md bg-neutral-200/30 dark:bg-neutral-800/50">
                            <CollapsibleTrigger asChild className="h-fit mb-0 ">
                                <div className="flex items-center justify-between cursor-pointer group/trigger">
                                    <div className="flex items-center gap-1.5 text-[13px] font-medium tracking-tight text-neutral-600 dark:text-neutral-300 transition-colors group-hover/trigger:text-indigo-600 dark:group-hover/trigger:text-indigo-400">
                                        <CircleCheckBig className="w-4 h-4 text-neutral-400 dark:text-neutral-500 group-hover/trigger:text-indigo-500" />
                                        <span className="text-neutral-600 dark:text-neutral-300 group-hover/trigger:text-indigo-600 dark:group-hover/trigger:text-indigo-400">Meeting Status</span>
                                    </div>
                                    <IconChevronDown className={`w-4 h-4 transition-transform text-neutral-400 dark:text-neutral-500 duration-200 ${isStatusOpen ? "" : "-rotate-90"}`} />
                                </div>
                            </CollapsibleTrigger>
                            <CollapsibleContent className="pt-2 pl-0.5">
                                <RadioGroup defaultValue="completed" className="gap-2">
                                    {["Scheduled", "Upcoming", "Completed", "Cancelled", "Rescheduled"].map((status) => (
                                        <div key={status} className="flex items-center space-x-2">
                                            <RadioGroupItem value={status.toLowerCase()} id={status} className="border-neutral-300 dark:border-neutral-700 size-3 dark:data-[state=checked]:border-indigo-500 dark:data-[state=checked]:text-indigo-500" />
                                            <Label htmlFor={status} className='font-medium tracking-tight text-neutral-500/80 dark:text-neutral-300/80 uppercase text-[10px]'>
                                                {status}
                                            </Label>
                                        </div>
                                    ))}
                                </RadioGroup>
                            </CollapsibleContent>
                        </Collapsible>

                        <div className="px-2 pb-2 flex flex-col gap-2 text-neutral-600 tracking-tight">
                            <div className="flex items-center gap-1 text-sm font-medium">
                                <IconFilter className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                <span className="text-[13px] font-medium tracking-tight text-neutral-600 dark:text-neutral-300">Meeting Type</span>
                            </div>
                            <div className="flex items-center gap-1.5 text-sm font-medium">
                                <IconClock className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                <span className="text-[13px] font-medium tracking-tight text-neutral-600 dark:text-neutral-300">Meeting Duration</span>
                            </div>
                        </div>
                    </div>
                </FilterSection>

                <FilterSection title="Time & Dates">
                    <div className="space-y-2">
                        <Collapsible open={isStatusOpen} onOpenChange={setIsStatusOpen} className="space-y-2 p-2 rounded-md bg-neutral-200/30 dark:bg-neutral-800/50">
                            <CollapsibleTrigger asChild className="h-fit mb-0 ">
                                <div className="flex items-center justify-between cursor-pointer">
                                    <div className="flex items-center gap-1.5 text-[13px] font-medium tracking-tight">
                                        <Calendar className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                        <span className="text-neutral-500 dark:text-neutral-300">Meeting Date</span>
                                    </div>
                                    <IconChevronDown className={`w-4 h-4 transition-transform text-neutral-400 dark:text-neutral-500 duration-200 ${isStatusOpen ? "" : "-rotate-90"}`} />
                                </div>
                            </CollapsibleTrigger>
                            <CollapsibleContent className="pt-2 pl-0.5">
                                <div className="flex gap-2">
                                    <Input placeholder="From" className="h-8 text-xs border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 shadow-none dark:text-neutral-200 focus-visible:ring-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 outline-none transition-colors" />
                                    <Input placeholder="To" className="h-8 text-xs border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 shadow-none dark:text-neutral-200 focus-visible:ring-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 outline-none transition-colors" />
                                </div>
                            </CollapsibleContent>
                        </Collapsible>
                        <div className="px-2 pb-2 flex flex-col gap-2 text-neutral-600 dark:text-neutral-300 tracking-tight">
                            <div className="flex items-center gap-1.5 text-sm font-medium">
                                <CalendarDays className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                <span className="text-[13px] font-medium tracking-tight text-neutral-600 dark:text-neutral-300">Created date</span>
                            </div>
                            <div className="flex items-center gap-1.5 text-sm font-medium">
                                <CalendarClock className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                <span className="text-[13px] font-medium tracking-tight text-neutral-600 dark:text-neutral-300">Time slot</span>
                            </div>
                        </div>
                    </div>
                </FilterSection>

                <FilterSection title="Meeting Location" defaultOpen>
                    <div className=" space-y-2">
                        <Collapsible open={isLocationOpen} onOpenChange={setIsLocationOpen} className="space-y-2 p-2 rounded-md bg-neutral-200/30 dark:bg-neutral-800/50">
                            <CollapsibleTrigger asChild className="h-fit mb-0 ">
                                <div className="flex items-center justify-between cursor-pointer">
                                    <div className="flex items-center gap-1.5 text-[13px] font-medium tracking-tight text-neutral-600 dark:text-neutral-300">
                                        <MapPinned className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                        <span className="text-neutral-500 dark:text-neutral-300">Location Type</span>
                                    </div>
                                    <IconChevronDown className={`w-4 h-4 transition-transform duration-200 text-neutral-400 dark:text-neutral-500 ${isLocationOpen ? "" : "-rotate-90"}`} />
                                </div>
                            </CollapsibleTrigger>
                            <CollapsibleContent className=" pt-2">
                                <RadioGroup defaultValue="virtual" className="gap-2">
                                    {[
                                        { id: "virtual", label: "Virtual" },
                                        { id: "in-person", label: "In-Person" },
                                        { id: "phone-call", label: "Phone Call" },
                                    ].map((type) => (
                                        <div key={type.id} className="flex items-center space-x-2">
                                            <RadioGroupItem value={type.id} id={type.id} className="border-neutral-300 dark:border-neutral-700 size-3 dark:data-[state=checked]:border-indigo-500 dark:data-[state=checked]:text-indigo-500" />
                                            <Label htmlFor={type.id} className='font-medium tracking-tight text-neutral-500/80 dark:text-neutral-300/80 uppercase text-[10px]'>
                                                {type.label}
                                            </Label>
                                        </div>
                                    ))}
                                </RadioGroup>
                            </CollapsibleContent>
                        </Collapsible>
                        <div className="px-2 pb-2 flex flex-col gap-2 text-neutral-600 dark:text-neutral-300 tracking-tight">
                            <div className="flex items-center gap-1 text-sm font-medium">
                                <Video className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                <span className="text-[13px] font-medium tracking-tight text-neutral-600 dark:text-neutral-300">Meeting Platform</span>
                            </div>
                        </div>
                    </div>
                </FilterSection>

                <FilterSection title="Others">
                    <div className="space-y-2">
                        <Collapsible open={isLocationOpen} onOpenChange={setIsLocationOpen} className="space-y-2 p-2 rounded-md bg-neutral-200/30 dark:bg-neutral-800/50">
                            <CollapsibleTrigger asChild className="h-fit mb-0 ">
                                <div className="flex items-center justify-between cursor-pointer">
                                    <div className="flex items-center gap-1.5 text-[13px] font-medium tracking-tight text-neutral-600 dark:text-neutral-300">
                                        <IconBuilding className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                        <span className="text-neutral-500 dark:text-neutral-300">Company</span>
                                    </div>
                                    <IconChevronDown className={`w-4 h-4 transition-transform duration-200 text-neutral-400 dark:text-neutral-500 ${isLocationOpen ? "" : "-rotate-90"}`} />
                                </div>
                            </CollapsibleTrigger>
                            <CollapsibleContent className=" pt-2">
                                <Select>
                                    <SelectTrigger className="h-8 text-xs bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 shadow-none w-full dark:text-neutral-200 focus-visible:ring-0 outline-none transition-colors">
                                        <SelectValue placeholder="Enter Company" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="apple">Apple</SelectItem>
                                        <SelectItem value="google">Google</SelectItem>
                                    </SelectContent>
                                </Select>
                            </CollapsibleContent>
                        </Collapsible>
                        <div className="px-2 pb-2 flex flex-col gap-2 text-neutral-600 dark:text-neutral-300 tracking-tight">
                            <div className="flex items-center gap-1 text-sm font-medium">
                                <CircleUserRound className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                <span className="text-[13px] font-medium tracking-tight text-neutral-600 dark:text-neutral-300">Meeting Host</span>
                            </div>
                        </div>
                    </div>
                </FilterSection>
            </div>
        </div>
    )
}
```

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

```tsx
"use client";
import * as React from "react";
import {
  IconLayoutDashboard,
  IconBuilding,
  IconUsers,
  IconBriefcase,
  IconCheckbox,
  IconCalendar,
  IconBolt,
  IconFileText,
  IconChartBar,
  IconGitBranch,
  IconSettings,
  IconPlus,
  IconMinus,
  IconChevronDown,
  IconSparkles,
  IconMessage,
  IconCheck,
} from "@tabler/icons-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

const data = {
  user: {
    name: "Stephen S.",
    email: "stephen@srotimi.design",
    avatar: "/avatars/stephen.jpg",
  },
  navMain: [
    {
      title: "Dashboard",
      url: "/dashboard",
      icon: IconLayoutDashboard,
    },
    {
      title: "Companies",
      url: "/companies",
      icon: IconBuilding,
    },
    {
      title: "Contacts",
      url: "/contacts",
      icon: IconUsers,
    },
    {
      title: "Deals",
      url: "/deals",
      icon: IconBriefcase,
    },
    {
      title: "Tasks",
      url: "/tasks",
      icon: IconCheckbox,
    },
    {
      title: "Meetings",
      url: "/dashboard/meetings",
      icon: IconCalendar,
      isActive: true,
    },
  ],
  insightAndControl: [
    {
      title: "Activities",
      url: "#",
      icon: IconBolt,
    },
    {
      title: "Reports",
      url: "#",
      icon: IconFileText,
    },
    {
      title: "Analytics",
      url: "#",
      icon: IconChartBar,
    },
    {
      title: "Workflows",
      url: "#",
      icon: IconGitBranch,
    },
  ],
  system: [
    {
      title: "Settings",
      url: "#",
      icon: IconSettings,
    },
  ],
  favorites: [
    {
      title: "Stripe",
      url: "#",
      icon: "/icons/stripe.png",
      color: "bg-indigo-600",
    },
    {
      title: "Dzen.ru",
      url: "#",
      icon: "/icons/dzen.png",
      color: "bg-black",
    },
    {
      title: "Patreon",
      url: "#",
      icon: "/icons/patreon.png",
      color: "bg-orange-400",
    },
  ],
  recentChats: [
    {
      id: "1",
      title: "Email outreach to war...",
      url: "#",
      icon: IconMessage,
    },
    {
      id: "2",
      title: "Email outreach to war...",
      url: "#",
      icon: IconMessage,
    },
  ],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const [openInsight, setOpenInsight] = React.useState(true);
  const [openSystem, setOpenSystem] = React.useState(true);
  const [openFavorites, setOpenFavorites] = React.useState(true);
  const [openRecent, setOpenRecent] = React.useState(true);
  return (
    <Sidebar
      {...props}
      className="relative h-full border-none! **:data-[slot=sidebar-container]:relative **:data-[slot=sidebar-container]:h-full **:data-[slot=sidebar-container]:w-(--sidebar-width) **:data-[slot=sidebar-inner]:h-full **:data-[slot=sidebar-inner]:rounded-xl **:data-[slot=sidebar-inner]:bg-neutral-200/50 **:data-[slot=sidebar-inner]:dark:bg-neutral-900 **:data-[slot=sidebar-gap]:hidden"
    >
      <SidebarHeader className="h-14">
        <div className="flex items-center justify-between px-2 pt-1">
          <SidebarMenuButton
            size="lg"
            className="hover:bg-transparent px-2 transition-colors outline-none focus-visible:ring-0"
          >
            <div className="flex items-center gap-2">
              <div className="flex size-8 items-center justify-center bg-indigo-600 rounded-full transition-colors">
                <div className="size-4 rounded-full border-2 border-white/30 border-t-white animate-spin-slow" />
              </div>
              <span className="font-semibold text-xl tracking-tight text-neutral-800 dark:text-neutral-100 italic">
                OceanLabs
              </span>
            </div>
          </SidebarMenuButton>
        </div>
      </SidebarHeader>

      <SidebarContent className="gap-0 no-scrollbar">
        <SidebarGroup>
          <SidebarMenu className="px-2 pt-2 gap-1">
            {data.navMain.map((item) => (
              <SidebarMenuItem key={item.title}>
                <SidebarMenuButton
                  tooltip={item.title}
                  isActive={item.isActive}
                  className="h-9 px-3 rounded-lg text-neutral-500 dark:text-neutral-300 font-medium text-[13px] tracking-tight data-[active=true]:bg-black data-[active=true]:text-white dark:data-[active=true]:bg-white dark:data-[active=true]:text-black hover:bg-neutral-200/60 dark:hover:bg-neutral-800/60 transition-colors outline-none focus-visible:ring-0"
                >
                  <item.icon className="size-[1.1rem]!" />
                  <span>{item.title}</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarGroup>

        <SidebarGroup>
          <Collapsible open={openInsight} onOpenChange={setOpenInsight}>
            <CollapsibleTrigger asChild>
              <SidebarGroupLabel className="px-3 pl-3.5 text-[12px] font-medium tracking-tight text-neutral-400 uppercase flex items-center justify-between cursor-pointer">
                Insight & Control
                <IconChevronDown
                  className={`size-3 transition-transform ${openInsight ? "" : "-rotate-180"}`}
                />
              </SidebarGroupLabel>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <SidebarGroupContent className="mt-1.5">
                <SidebarMenu className="px-2 gap-0.5">
                  {data.insightAndControl.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton className="h-9 px-2 rounded-lg text-neutral-500 dark:text-neutral-300 font-medium text-[13px] hover:bg-neutral-200/60 dark:hover:bg-neutral-800/60 transition-colors outline-none focus-visible:ring-0">
                        <item.icon className="size-[1.1rem]!" />
                        <span>{item.title}</span>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </CollapsibleContent>
          </Collapsible>
        </SidebarGroup>

        <SidebarGroup>
          <Collapsible open={openSystem} onOpenChange={setOpenSystem}>
            <CollapsibleTrigger asChild>
              <SidebarGroupLabel className="px-3 pl-3.5 text-[12px] font-medium tracking-tight text-neutral-400 uppercase flex items-center justify-between cursor-pointer">
                System
                <IconChevronDown
                  className={`size-3 transition-transform ${openSystem ? "" : "-rotate-180"}`}
                />
              </SidebarGroupLabel>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <SidebarGroupContent className="mt-1.5">
                <SidebarMenu className="px-2 gap-0.5">
                  {data.system.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton className="h-9 px-2 rounded-lg text-neutral-500 dark:text-neutral-300 font-medium text-[13px] hover:bg-neutral-200/60 dark:hover:bg-neutral-800/60 transition-colors outline-none focus-visible:ring-0">
                        <item.icon className="size-[1.1rem]!" />
                        <span>{item.title}</span>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </CollapsibleContent>
          </Collapsible>
        </SidebarGroup>

        <SidebarGroup>
          <Collapsible open={openFavorites} onOpenChange={setOpenFavorites}>
            <CollapsibleTrigger asChild>
              <SidebarGroupLabel className="px-3 pl-3.5 text-[12px] font-medium tracking-tight text-neutral-400 uppercase flex items-center justify-between cursor-pointer">
                Favorites
                <IconChevronDown
                  className={`size-3 transition-transform ${openFavorites ? "" : "-rotate-180"}`}
                />
              </SidebarGroupLabel>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <SidebarGroupContent className="mt-1.5">
                <SidebarMenu className="px-1 gap-0.5">
                  {data.favorites.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton className="h-9 px-2 rounded-lg text-neutral-500 dark:text-neutral-300 font-medium text-[13px] hover:bg-neutral-200/60 dark:hover:bg-neutral-800/60 transition-colors outline-none focus-visible:ring-0">
                        <div
                          className={`size-5 rounded-sm flex items-center justify-center text-[10px] text-white font-semibold shadow-sm ${item.color} transition-colors`}
                        >
                          {item.title[0]}
                        </div>
                        <span>{item.title}</span>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                  <SidebarMenuItem>
                    <SidebarMenuButton className="h-9 px-2 text-neutral-500 font-medium text-[13px] hover:bg-neutral-200/40 dark:hover:bg-neutral-800/40 transition-colors outline-none focus-visible:ring-0">
                      <span className="pl-2">See More</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </CollapsibleContent>
          </Collapsible>
        </SidebarGroup>

        <SidebarGroup>
          <Collapsible open={openRecent} onOpenChange={setOpenRecent}>
            <CollapsibleTrigger asChild>
              <SidebarGroupLabel className="px-3 pl-3.5 text-[12px] font-medium tracking-tight text-neutral-400 uppercase flex items-center justify-between cursor-pointer">
                Recent Chats
                <div className="flex items-center gap-1">
                  {openRecent ? (
                    <IconPlus className="size-3.5" strokeWidth={2.5} />
                  ) : (
                    <IconMinus className="size-3.5" strokeWidth={2.5} />
                  )}
                </div>
              </SidebarGroupLabel>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <SidebarGroupContent className="mt-1.5">
                <SidebarMenu className="px-2 gap-0.5">
                  {data.recentChats.map((item) => (
                    <SidebarMenuItem key={item.id}>
                      <SidebarMenuButton className="h-9 px-2 rounded-lg text-neutral-500 dark:text-neutral-300 font-medium text-[13px] hover:bg-neutral-200/60 dark:hover:bg-neutral-800/60 transition-colors outline-none focus-visible:ring-0">
                        <item.icon className="size-[1.1rem]!" />
                        <span className="truncate">{item.title}</span>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </CollapsibleContent>
          </Collapsible>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="p-4">
        <div className="rounded-2xl bg-white dark:bg-neutral-900 p-4 flex flex-col gap-4 border border-neutral-200 dark:border-neutral-800 shadow">
          <div className="space-y-1">
            <h4 className="text-[14px] font-normal tracking-tight text-neutral-500 dark:text-neutral-300">
              Upgrade to Pro to get the Latest Features
            </h4>
          </div>
          <Dialog>
            <DialogTrigger asChild>
              <Button className="h-10 flex items-center justify-center gap-2 tracking-tight bg-neutral-100 dark:bg-neutral-800 py-2.5 rounded-xl text-[14px] text-neutral-500 dark:text-neutral-300 font-medium border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors shadow-sm hover:shadow-md outline-none focus-visible:ring-0">
                <IconSparkles className="size-4 fill-indigo-600 dark:fill-indigo-400 transition-colors" />
                Upgrade to Pro
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-md">
              <DialogHeader>
                <DialogTitle className="flex items-center gap-2">
                  <IconSparkles className="size-5 text-indigo-600 fill-indigo-600" />
                  OceanLabs Pro
                </DialogTitle>
                <DialogDescription>
                  Unlock the full potential of your workflow with advanced
                  features and unlimited possibilities.
                </DialogDescription>
              </DialogHeader>
              <div className="py-4 space-y-4">
                <div className="space-y-2">
                  <h5 className="text-sm font-semibold text-neutral-700 dark:text-neutral-200">
                    Pro Features:
                  </h5>
                  <ul className="space-y-2">
                    {[
                      "Unlimited Tasks & Projects",
                      "Advanced CRM Integration",
                      "Custom Analytics Dashboards",
                      "Priority 24/7 Support",
                      "AI-Powered Insights",
                    ].map((feature, i) => (
                      <li
                        key={i}
                        className="flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400"
                      >
                        <IconCheck
                          className="size-4 text-green-500"
                          strokeWidth={3}
                        />
                        {feature}
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="bg-neutral-50 dark:bg-neutral-800/50 p-4 rounded-xl border border-neutral-100 dark:border-neutral-700 flex items-center justify-between">
                  <div>
                    <p className="text-xs font-medium text-neutral-500 uppercase tracking-wider">
                      Starting at
                    </p>
                    <p className="text-2xl font-bold text-neutral-900 dark:text-white">
                      $19
                      <span className="text-sm font-normal text-neutral-500">
                        /mo
                      </span>
                    </p>
                  </div>
                  <Badge
                    variant="outline"
                    className="bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-100 dark:border-indigo-500/20"
                  >
                    Save 20% yearly
                  </Badge>
                </div>
              </div>
              <DialogFooter className="flex-col sm:flex-col gap-2">
                <Button className="w-full bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-500 dark:hover:bg-indigo-600 border-none rounded-xl h-11 transition-colors outline-none focus-visible:ring-0">
                  Upgrade Now
                </Button>
                <p className="text-[11px] text-center text-neutral-400">
                  7-day free trial. No credit card required.
                </p>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
      </SidebarFooter>
    </Sidebar>
  );
}
```

### `src/components/dashboards/meetings-dashboard/MeetingsView.tsx`

```tsx
"use client"

import {
    IconPlus,
    IconSearch,
    IconFilter,
    IconLayoutGrid,
    IconColumns,
    IconCalendar,
    IconUpload,
    IconCalendarEvent,
} from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import {
    Tabs, TabsList, TabsTrigger
} from "@/components/ui/tabs"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Command, Maximize2, Plus } from "lucide-react"

import { MEETING_COLUMNS, MEETINGS } from "./data"
import { MeetingCard } from "./components/MeetingCard"
import { SidebarFilters } from "./components/SidebarFilters"
import { useState } from "react"

export default function MeetingsView() {
    const [showFilters, setShowFilters] = useState(true)

    return (
        <div className="flex flex-col h-full overflow-hidden">
            {/* Header */}
            <header className="h-12 flex items-start justify-between border-b-[1.5px] border-neutral-200 dark:border-neutral-800 shrink-0">
                <div className="flex items-center gap-1.5">
                    <IconCalendarEvent className="size-5 text-neutral-500 dark:text-neutral-400" strokeWidth={1.5} />
                    <h1 className="text-sm font-semibold tracking-tight text-neutral-700 dark:text-neutral-200">Meetings</h1>
                </div>
                <div className="flex items-center gap-2">
                    <Sheet>
                        <SheetTrigger asChild>
                            <Button variant="ghost" size="icon" className="size-8 text-neutral-500 lg:hidden transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800 outline-none focus-visible:ring-0">
                                <IconFilter className="size-4" />
                            </Button>
                        </SheetTrigger>
                        <SheetContent side="left" className="p-2 w-[280px]">
                            <SheetHeader className="px-2 py-4 border-b">
                                <SheetTitle className="text-sm font-semibold">Filters</SheetTitle>
                            </SheetHeader>
                            <div className="mt-2 mx-auto overflow-y-auto no-scrollbar">
                                <SidebarFilters />
                            </div>
                        </SheetContent>
                    </Sheet>
                    <Dialog>
                        <DialogTrigger asChild>
                            <Button size="icon" className="h-8 w-8 bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors shadow-sm hover:shadow-indigo-500/20 outline-none focus-visible:ring-0">
                                <IconPlus className="w-5 h-5 text-white" />
                            </Button>
                        </DialogTrigger>
                        <DialogContent>
                            <DialogHeader>
                                <DialogTitle>Schedule Meeting</DialogTitle>
                                <DialogDescription>Create a new meeting and invite participants.</DialogDescription>
                            </DialogHeader>
                            <div className="grid gap-4 py-4">
                                <Input placeholder="Meeting Title" />
                                <Input placeholder="Date & Time" type="datetime-local" />
                                <Select>
                                    <SelectTrigger>
                                        <SelectValue placeholder="Select Platform" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="meet">Google Meet</SelectItem>
                                        <SelectItem value="zoom">Zoom</SelectItem>
                                        <SelectItem value="slack">Slack</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                            <DialogFooter>
                                <Button type="submit" className="bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-500 dark:hover:bg-indigo-600 border-none">Schedule</Button>
                            </DialogFooter>
                        </DialogContent>
                    </Dialog>
                </div>
            </header>

            {/* Main Content */}
            <main className="flex gap-2 flex-1 overflow-hidden pt-4 lg:pt-5">
                {/* Sidebar - Desktop Only */}
                {showFilters && (
                    <div className="hidden lg:flex">
                        <SidebarFilters />
                    </div>
                )}

                {/* Board Area */}
                <div className="flex-1 flex flex-col min-w-0">
                    {/* Toolbar */}
                    <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
                        <div className="flex items-center gap-2">
                            <Button
                                variant="outline"
                                onClick={() => setShowFilters(!showFilters)}
                                className={`h-9 gap-1.5 text-neutral-600 dark:text-neutral-300 bg-white dark:bg-neutral-900 border-[1.3px] border-neutral-200 dark:border-neutral-800 px-2.5! tracking-tight transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-800 shadow-none outline-none focus-visible:ring-0 ${!showFilters ? "bg-neutral-100 dark:bg-neutral-800 border-neutral-300 dark:border-neutral-700" : ""}`}
                            >
                                <IconFilter className={`w-4 h-4 ${!showFilters ? "text-neutral-900 dark:text-neutral-100" : "text-neutral-400 dark:text-neutral-500"}`} />
                                {showFilters ? "Hide Filters" : "Show Filters"}
                            </Button>
                            <Select defaultValue="all">
                                <SelectTrigger className="w-fit h-9 font-medium bg-white dark:bg-neutral-900 border-[1.3px] text-neutral-600 dark:text-neutral-300 border-neutral-200 dark:border-neutral-800 px-2.5! tracking-tight transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-800 shadow-none outline-none focus-visible:ring-0">
                                    <IconColumns className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                    <SelectValue placeholder="All Meetings" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="all">All Meetings</SelectItem>
                                    <SelectItem value="mine">My Meetings</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        <div className="flex items-center gap-2">
                            <Tabs defaultValue="kanban" className="w-auto">
                                <TabsList className="h-8 p-0 bg-neutral-100 dark:bg-neutral-800 border-none shadow-none focus-visible:outline-none">
                                    <TabsTrigger value="kanban" className="h-full! w-9 p-0 data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-700 data-[state=active]:text-neutral-600 dark:data-[state=active]:text-neutral-200 data-[state=active]:shadow-none text-neutral-400 dark:text-neutral-500 dark:data-[state=active]:border-none transition-colors hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 outline-none focus-visible:ring-0">
                                        <IconColumns className="size-4" strokeWidth={2} />
                                    </TabsTrigger>
                                    <TabsTrigger value="grid" className="h-full! w-9 p-0 data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-700 data-[state=active]:text-neutral-600 dark:data-[state=active]:text-neutral-200 data-[state=active]:shadow-none text-neutral-400 dark:text-neutral-500 dark:data-[state=active]:border-none transition-colors hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 outline-none focus-visible:ring-0">
                                        <IconLayoutGrid className="size-4" strokeWidth={2} />
                                    </TabsTrigger>
                                    <TabsTrigger value="calendar" className="h-full! w-9 p-0 data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-700 data-[state=active]:text-neutral-600 dark:data-[state=active]:text-neutral-200 data-[state=active]:shadow-none text-neutral-400 dark:text-neutral-500 dark:data-[state=active]:border-none transition-colors hover:bg-neutral-200/50 dark:hover:bg-neutral-700/50 outline-none focus-visible:ring-0">
                                        <IconCalendar className="size-4" strokeWidth={2} />
                                    </TabsTrigger>
                                </TabsList>
                            </Tabs>
                            <div className="relative">
                                <IconSearch className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                <Input placeholder="Search" className="h-9 pl-9 w-[200px] bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 placeholder:font-medium border-[1.3px] dark:text-neutral-200 focus-visible:ring-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 outline-none transition-colors shadow-none" />
                                <span className="absolute right-2.5 top-1/2 -translate-y-1/2 h-5 min-w-[36px] items-center justify-center flex gap-1 text-[10px] text-neutral-400 dark:text-neutral-500 font-medium bg-neutral-100 dark:bg-neutral-800 border border-neutral-200/50 dark:border-neutral-700/50 px-1 rounded select-none pointer-events-none">
                                    <Command className="size-3" strokeWidth={2} />
                                    <span className="text-[11px]">K</span>
                                </span>
                            </div>
                            <Dialog>
                                <DialogTrigger asChild>
                                    <Button variant="outline" className="h-9 gap-1.5 border-[1.3px] transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800 bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 text-neutral-600 dark:text-neutral-300 tracking-tight shadow-none outline-none focus-visible:ring-0">
                                        <IconUpload className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                        Import
                                    </Button>
                                </DialogTrigger>
                                <DialogContent>
                                    <DialogHeader>
                                        <DialogTitle>Import Meetings</DialogTitle>
                                        <DialogDescription>Upload a file to import your meetings.</DialogDescription>
                                    </DialogHeader>
                                    <div className="flex flex-col items-center justify-center border-2 border-dashed border-neutral-200 dark:border-neutral-800 rounded-lg p-12 gap-2">
                                        <IconUpload className="size-8 text-neutral-400" />
                                        <p className="text-sm text-neutral-500">Click to upload or drag and drop</p>
                                    </div>
                                    <DialogFooter>
                                        <Button variant="outline">Cancel</Button>
                                        <Button className="bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-500 dark:hover:bg-indigo-600 border-none">Upload</Button>
                                    </DialogFooter>
                                </DialogContent>
                            </Dialog>

                            <Dialog>
                                <DialogTrigger asChild>
                                    <Button className="h-9 gap-1.5 border-[1.3px] transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800 bg-white dark:bg-neutral-900 text-neutral-600 dark:text-neutral-300 border-neutral-200 dark:border-neutral-800 tracking-tight shadow-none outline-none focus-visible:ring-0">
                                        <IconPlus className="w-4 h-4 text-neutral-400 dark:text-neutral-500" />
                                        Schedule
                                    </Button>
                                </DialogTrigger>
                                <DialogContent>
                                    <DialogHeader>
                                        <DialogTitle>Schedule Meeting</DialogTitle>
                                        <DialogDescription>Create a new meeting and invite participants.</DialogDescription>
                                    </DialogHeader>
                                    <div className="grid gap-4 py-4">
                                        <Input placeholder="Meeting Title" />
                                        <Input placeholder="Date & Time" type="datetime-local" />
                                        <Input placeholder="Participants (emails)" />
                                    </div>
                                    <DialogFooter>
                                        <Button type="submit" className="w-full bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-500 dark:hover:bg-indigo-600 border-none">Create Meeting</Button>
                                    </DialogFooter>
                                </DialogContent>
                            </Dialog>
                        </div>
                    </div>

                    {/* Kanban Grid */}
                    <div className="flex-1 overflow-hidden">
                        <div className="flex gap-2 h-full w-full overflow-x-auto pb-4 custom-scrollbar lg:pb-0">
                            {MEETING_COLUMNS.map((column) => (
                                <div key={column.id} className="flex-none w-[280px] lg:flex-1 flex flex-col gap-2.5 min-h-0 border-[1.3px] border-neutral-200 dark:border-neutral-800 rounded-lg p-1 bg-white dark:bg-neutral-900/50">
                                    <div className="flex items-center justify-between p-1 shrink-0">
                                        <div className="flex items-center gap-1.5">
                                            <Badge variant="outline" className={`h-6 rounded-full px-2.5 text-[11px] font-semibold border-[1.3px] ${column.id === 'upcoming' ? 'bg-blue-50 text-blue-500 border-blue-100 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/20' :
                                                column.id === 'scheduled' ? 'bg-indigo-50 text-indigo-500 border-indigo-100 dark:bg-indigo-500/10 dark:text-indigo-400 dark:border-indigo-500/20' :
                                                    column.id === 'confirmed' ? 'bg-green-50 text-green-500 border-green-100 dark:bg-green-500/10 dark:text-green-400 dark:border-green-500/20' :
                                                        'bg-red-50 text-red-500 border-red-100 dark:bg-red-500/10 dark:text-red-400 dark:border-red-500/20'
                                                }`}>
                                                {column.title}
                                            </Badge>
                                            <div className="flex items-center justify-center size-6 bg-neutral-100 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-400 rounded-full text-[11px] font-bold border-[1.1px] border-neutral-200/50 dark:border-neutral-700/50">
                                                {column.count}
                                            </div>
                                        </div>
                                        <div className="flex items-center gap-1">
                                            <Dialog>
                                                <DialogTrigger asChild>
                                                    <Button variant="ghost" size="icon" className="size-6 text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 border-[1.1px] border-transparent dark:border-neutral-700/50 rounded-sm transition-colors outline-none focus-visible:ring-0">
                                                        <Maximize2 className="size-3.5" />
                                                    </Button>
                                                </DialogTrigger>
                                                <DialogContent className="max-w-2xl h-[80vh]">
                                                    <DialogHeader>
                                                        <DialogTitle>{column.title} Column View</DialogTitle>
                                                    </DialogHeader>
                                                    <div className="flex-1 overflow-y-auto p-4 space-y-2">
                                                        {MEETINGS.filter(m => m.columnId === column.id).map(meeting => (
                                                            <MeetingCard key={meeting.id} meeting={meeting} />
                                                        ))}
                                                    </div>
                                                </DialogContent>
                                            </Dialog>

                                            <Dialog>
                                                <DialogTrigger asChild>
                                                    <Button variant="ghost" size="icon" className="size-6 text-neutral-400 dark:text-neutral-500 bg-neutral-100 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 border-[1.1px] border-transparent dark:border-neutral-700/50 rounded-sm transition-colors outline-none focus-visible:ring-0">
                                                        <Plus className="size-3.5" />
                                                    </Button>
                                                </DialogTrigger>
                                                <DialogContent>
                                                    <DialogHeader>
                                                        <DialogTitle>Add to {column.title}</DialogTitle>
                                                        <DialogDescription>Quickly add a meeting to this category.</DialogDescription>
                                                    </DialogHeader>
                                                    <div className="space-y-4 py-4">
                                                        <Input placeholder="Quick Title" />
                                                        <Select>
                                                            <SelectTrigger>
                                                                <SelectValue placeholder="Host" />
                                                            </SelectTrigger>
                                                            <SelectContent>
                                                                <SelectItem value="tanjim">Tanjim Islam (You)</SelectItem>
                                                                <SelectItem value="sarah">Sarah Chen</SelectItem>
                                                            </SelectContent>
                                                        </Select>
                                                    </div>
                                                    <DialogFooter>
                                                        <Button className="bg-indigo-600 hover:bg-indigo-700 text-white dark:bg-indigo-500 dark:hover:bg-indigo-600 border-none">Add Meeting</Button>
                                                    </DialogFooter>
                                                </DialogContent>
                                            </Dialog>
                                        </div>
                                    </div>

                                    <div className="flex-1 overflow-y-auto space-y-1 scrollbar-hide no-scrollbar p-1">
                                        {MEETINGS.filter(m => m.columnId === column.id).map(meeting => (
                                            <MeetingCard key={meeting.id} meeting={meeting} />
                                        ))}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </main>

        </div>
    )
}
```

### `src/components/dashboards/meetings-dashboard/dashboardLayout.tsx`

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


export const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
    return (
        <div className="bg-white dark:bg-neutral-800 p-3 h-svh w-screen overflow-hidden">
            <SidebarProvider
                className="h-full min-h-0! overflow-hidden gap-2"
                style={{ "--sidebar-width": "250px" } as React.CSSProperties}
            >
                <AppSidebar />
                <SidebarInset className="overflow-hidden min-h-0 rounded-xl border-[1.5px] border-neutral-200  bg-neutral-50 dark:bg-neutral-950 dark:border-neutral-800 p-4">
                    <div className="flex items-center gap-2 mb-4 lg:hidden">
                        <SidebarTrigger className="-ml-1" />
                        <div className="h-4 w-px bg-neutral-200" />
                    </div>
                    {children}
                </SidebarInset>
            </SidebarProvider >
        </div >
    )
}
```

### `src/components/dashboards/meetings-dashboard/data.ts`

```ts
export const MEETING_COLUMNS = [
    { id: "upcoming", title: "Upcoming", count: 4, color: "bg-blue-500" },
    { id: "scheduled", title: "Scheduled", count: 3, color: "bg-indigo-500" },
    { id: "confirmed", title: "Confirmed", count: 2, color: "bg-green-500" },
    { id: "cancelled", title: "Cancelled", count: 1, color: "bg-red-500" },
]

export const MEETINGS = [
    {
        id: 1,
        columnId: "upcoming",
        title: "Quarterly Business Review",
        platform: "meet",
        date: "Jan 30, 2026",
        host: { name: "Dzen.ru", avatar: "" },
        duration: "2:00 PM - 3:30 PM",
        relatedTo: "Foursquare",
    },
    {
        id: 2,
        columnId: "scheduled",
        title: "Product Demo - Halo C...",
        platform: "zoom",
        date: "Jan 31, 2026",
        host: { name: "Tanjim Islam", avatar: "", isMe: true },
        duration: "10:00 AM - 11:00 AM",
        relatedTo: "Halo Collar",
    },
    {
        id: 3,
        columnId: "confirmed",
        title: "Discovery Call - New L...",
        platform: "slack",
        date: "Jan 27, 2026",
        host: { name: "Lucas Anderson", avatar: "" },
        duration: "9:00 AM - 9:45 AM",
        relatedTo: "Patreon",
    },
    {
        id: 4,
        columnId: "cancelled",
        title: "Team Sync - Sales Pip",
        platform: "meet",
        date: "Jan 26, 2026",
        host: { name: "Nathan Phillips", avatar: "" },
        duration: "3:00 PM - 3:30 PM",
        relatedTo: "Mountain Adventure Pa",
    },
    {
        id: 5,
        columnId: "upcoming",
        title: "Contract Negotiation",
        platform: "discord",
        date: "Jan 25, 2026",
        host: { name: "Tanjim Islam", avatar: "", isMe: true },
        duration: "4:00 PM - 5:00 PM",
        relatedTo: "Dzen.ru",
    },
    {
        id: 6,
        columnId: "scheduled",
        title: "Follow-up Call - Discus...",
        platform: "google",
        date: "Jan 28, 2026",
        host: { name: "William Young", avatar: "" },
        duration: "11:30 AM - 12:00 PM",
        relatedTo: "Family Fun Package",
    },
    {
        id: 7,
        columnId: "confirmed",
        title: "Onboarding Session Cl...",
        platform: "zoom",
        date: "Jan 22, 2026",
        host: { name: "Dzen.ru", avatar: "" },
        duration: "1:00 PM - 2:00 PM",
        relatedTo: "Hiking and Biking Expedition",
    },
    {
        id: 9,
        columnId: "upcoming",
        title: "Post-Launch Retro",
        platform: "meet",
        date: "Feb 02, 2026",
        host: { name: "Sarah Chen", avatar: "" },
        duration: "11:00 AM - 12:00 PM",
        relatedTo: "Vercel",
    },
    {
        id: 10,
        columnId: "upcoming",
        title: "API Design Sync",
        platform: "slack",
        date: "Feb 03, 2026",
        host: { name: "Marcus Wright", avatar: "" },
        duration: "2:00 PM - 3:00 PM",
        relatedTo: "Stripe",
    },
    {
        id: 11,
        columnId: "scheduled",
        title: "Client Feedback Loop",
        platform: "zoom",
        date: "Feb 05, 2026",
        host: { name: "Elena Rodriguez", avatar: "" },
        duration: "3:30 PM - 4:15 PM",
        relatedTo: "Supabase",
    },
]
```

### `src/components/dashboards/meetings-dashboard/demo.tsx`

```tsx
import { DashboardLayout } from './dashboardLayout'
import MeetingsView from './MeetingsView'

export default function MeetingsDashboardDemo() {
    return (
        <DashboardLayout>
            <MeetingsView />
        </DashboardLayout>
    )
}
```