# Sales 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/sales-dashboard).

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

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/watermelon/sales-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-checkbox`, `@radix-ui/react-collapsible`, `@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-select`, `@radix-ui/react-separator`, `@radix-ui/react-slot`, `@radix-ui/react-tabs`, `@radix-ui/react-tooltip`, `class-variance-authority`, `lucide-react`, `react-router-dom`
- Registry items: `avatar`, `badge`, `breadcrumb`, `button`, `checkbox`, `collapsible`, `dialog`, `dropdown-menu`, `input`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `table`, `tabs`, `tooltip`

## Files

### `src/components/dashboards/sales-dashboard/companyView.tsx`

```tsx
import { CompanyFilters } from './components/company-filters';
import { CompaniesTable } from './components/companies-table';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';

export const CompanyView = () => {
  return (
    <div className="h-full w-full overflow-hidden">
      <Tabs defaultValue="companies" className="flex h-full flex-col gap-0">
        <div className="w-full shrink-0 border-b border-neutral-200 dark:border-neutral-800">
          <TabsList className="flex gap-4 bg-transparent p-0 px-3">
            <TabsTrigger
              value="companies"
              className="cursor-pointer rounded-none border-x-0! border-t-0! border-b-2! border-transparent bg-transparent! shadow-none! focus-visible:ring-0! focus-visible:ring-offset-0! data-[state=active]:border-b-neutral-900! dark:data-[state=active]:border-b-white!"
            >
              Companies
            </TabsTrigger>
            <TabsTrigger
              disabled
              value="deals"
              className="cursor-pointer rounded-none border-x-0! border-t-0! border-b-2! border-transparent bg-transparent! shadow-none! focus-visible:ring-0! focus-visible:ring-offset-0! data-[state=active]:border-b-neutral-900! dark:data-[state=active]:border-b-white!"
            >
              Deals
            </TabsTrigger>
            <TabsTrigger
              disabled
              value="forecast"
              className="cursor-pointer rounded-none border-x-0! border-t-0! border-b-2! border-transparent bg-transparent! shadow-none! focus-visible:ring-0! focus-visible:ring-offset-0! data-[state=active]:border-b-neutral-900! dark:data-[state=active]:border-b-white!"
            >
              Forecast
            </TabsTrigger>
          </TabsList>
        </div>
        <TabsContent
          value="companies"
          className="min-h-0 flex-1 overflow-y-auto border-0"
        >
          <CompanyFilters />
          <CompaniesTable />
        </TabsContent>
      </Tabs>
    </div>
  );
};
```

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

```tsx
"use client";

import * as React from "react";
import {
  Building2,
  GalleryVerticalEnd,
  Kanban,
  TrendingUp,
  Activity,
  Users,
  Mail,
  AlertTriangle,
  HelpCircle,
  UserCheck,
  Briefcase,
} from "lucide-react";

import { NavMain } from "./nav-main";
import { Billing } from "./billing";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenuButton,
  SidebarRail,
} from "@/components/ui/sidebar";
import { NavReporting } from "./nav-reporting";
import { NavSecondary } from "./nav-secondary";
import { NavTeams } from "./nav-teams";
import { NavPipelines } from "./nav-pipelines";

export const data = {
  user: {
    name: "John Doe",
    email: "john@example.com",
    avatar: "/avatars/john.jpg",
  },
  company: {
    name: "Sales CRM",
    logo: GalleryVerticalEnd,
    plan: "Company Pipeline",
  },
  navMain: [
    {
      title: "Companies",
      url: "#",
      icon: Building2,
      isActive: true,
    },
    {
      title: "Deals Board",
      url: "#",
      icon: Kanban,
    },
    {
      title: "Forecast",
      url: "#",
      icon: TrendingUp,
      isDisabled: true,
    },
    {
      title: "Activities",
      url: "#",
      icon: Activity,
      isDisabled: true,
    },
    {
      title: "Contacts",
      url: "#",
      icon: Users,
      isDisabled: true,
    },
    {
      title: "Email Sequences",
      url: "#",
      icon: Mail,
      isDisabled: true,
    },
  ],
  navSecondary: [
    {
      title: "Invite teammates",
      url: "#",
      icon: Users,
      isDisabled: true,
    },
    {
      title: "Help",
      url: "#",
      icon: HelpCircle,
      isDisabled: true,
    },
  ],
  teams_section: [
    {
      name: "Strategic AEs",
      url: "#",
      icon: UserCheck,
      isDisabled: true,
    },
    {
      name: "Mid Market",
      url: "#",
      icon: Briefcase,
      isDisabled: true,
    },
    {
      name: "SDR Team",
      url: "#",
      icon: Users,
      isDisabled: true,
    },
  ],
  reporting: [
    {
      name: "Q1 Forecast",
      url: "#",
      icon: TrendingUp,
      isDisabled: true,
    },
    {
      name: "Slipping Deals",
      url: "#",
      icon: AlertTriangle,
      isDisabled: true,
    },
  ],
  pipelines: [
    {
      name: "North America",
      url: "#",
      color: "text-yellow-500",
      isDisabled: true,
    },
    {
      name: "EMEA Enterprise",
      url: "#",
      color: "text-pink-500",
      isDisabled: true,
    },
    {
      name: "APAC Expansion",
      url: "#",
      color: "text-blue-500",
      isDisabled: true,
    },
  ],
};

export function AppSidebar({ onNavigate, currentView, ...props }: React.ComponentProps<typeof Sidebar> & { onNavigate?: (view: string) => void; currentView?: string }) {
  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader className="border-b border-neutral-200 dark:border-neutral-800 data-[state=open]:py-1">
        <SidebarMenuButton
          size="lg"
          className="hover:bg-transparent data-[state=open]:text-sidebar-accent-foreground active:bg-transparent"
        >
          <div className="bg-neutral-100 dark:bg-neutral-700 text-neutral-900 dark:text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md border border-neutral-200 dark:border-neutral-600">
            <data.company.logo className="size-4" />
          </div>
          <div className="grid flex-1 text-left text-sm leading-tight">
            <span className="truncate font-medium text-sm">
              {data.company.name}
            </span>
            <span className="truncate text-xs text-neutral-500 dark:text-neutral-400 font-medium">
              {data.company.plan}
            </span>
          </div>
        </SidebarMenuButton>
      </SidebarHeader>
      <SidebarContent>
        <NavMain items={data.navMain} onNavigate={onNavigate} currentView={currentView} />
        <NavTeams teams={data.teams_section} />
        <NavReporting reports={data.reporting} />
        <NavPipelines pipelines={data.pipelines} />
        <NavSecondary items={data.navSecondary} className="mt-auto" />
      </SidebarContent>
      <SidebarFooter className="border-t border-neutral-200 dark:border-neutral-800 py-1 group-data-[collapsible=icon]:py-1.5">
        <Billing />
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
}
```

### `src/components/dashboards/sales-dashboard/components/billing.tsx`

```tsx
'use client';

import { Wallet } from 'lucide-react';

import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';

export function Billing() {
  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton
          asChild
          size="lg"
          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground flex items-center justify-between hover:bg-transparent active:bg-transparent"
        >
          <div className="flex items-center gap-3">
            <div className="flex flex-col text-sm leading-tight group-data-[collapsible=icon]:hidden">
              <span className="truncate font-medium">14 Days</span>
              <span className="truncate text-xs font-medium text-neutral-500">
                Left on trials
              </span>
            </div>
            <Dialog>
              <DialogTrigger asChild>
                <Button className="h-7 cursor-pointer rounded-full border-y border-neutral-200 bg-neutral-100 text-neutral-900 transition-colors group-data-[collapsible=icon]:px-2 hover:bg-neutral-200/50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700/50">
                  <Wallet />
                  <span className="text-xs group-data-[collapsible=icon]:hidden">
                    Add Billings
                  </span>
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Add Billing Details</DialogTitle>
                  <DialogDescription>
                    Update your payment method to continue your subscription.
                  </DialogDescription>
                </DialogHeader>
                <div className="grid gap-4 py-4">
                  <div className="grid gap-2">
                    <Input id="card-number" placeholder="Card Number" />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="grid gap-2">
                      <Input id="card-expiry" placeholder="MM/YY" />
                    </div>
                    <div className="grid gap-2">
                      <Input id="card-cvc" placeholder="CVC" />
                    </div>
                  </div>
                </div>
                <DialogFooter>
                  <DialogClose asChild>
                    <Button variant="outline" className="rounded-full">
                      Cancel
                    </Button>
                  </DialogClose>
                  <Button className="rounded-full bg-indigo-600 text-white hover:bg-indigo-700">
                    Save Details
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}
```

### `src/components/dashboards/sales-dashboard/components/companies-table.tsx`

```tsx
'use client';
import { useMemo } from 'react';

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Separator } from '@/components/ui/separator';
import { Calendar, Plus } from 'lucide-react';
import { companiesData, segmentColors } from '../data';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

function WinProbabilityBar({ value }: { value: number }) {
  const filledBars = Math.round((value / 100) * 20);
  const redBars = Math.round(filledBars * 0.33);
  const yellowBars = Math.round(filledBars * 0.33);
  const greenBars = filledBars - redBars - yellowBars;

  return (
    <div className="flex items-center gap-2">
      <div className="flex h-3 w-fit items-center gap-0.5">
        {Array.from({ length: 20 }).map((_, i) => {
          let barColor = 'bg-neutral-200 dark:bg-neutral-700';
          if (i < redBars) {
            barColor = 'bg-red-500';
          } else if (i < redBars + yellowBars) {
            barColor = 'bg-yellow-500';
          } else if (i < redBars + yellowBars + greenBars) {
            barColor = 'bg-green-500';
          }
          return <div key={i} className={`h-full w-0.5 ${barColor}`} />;
        })}
      </div>
      <span className="text-sm font-bold whitespace-nowrap text-neutral-600 dark:text-neutral-300">
        {value}%
      </span>
    </div>
  );
}

function ActivityTrend() {
  const heights = useMemo(

    () => Array.from({ length: 12 }).map(() => `${Math.random() * 100}%`),
    [],
  );

  return (
    <div className="flex h-3 items-end gap-0.5">
      {heights.map((height, i) => (
        <div
          key={i}
          className="w-1 bg-green-500"
          style={{ height, minHeight: '2px' }}
        />
      ))}
    </div>
  );
}

export function CompaniesTable() {
  const totalCompanies = companiesData.length;

  return (
    <div className="flex flex-col overflow-hidden border-y border-neutral-200 dark:border-neutral-800">
      <div className="overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow className="border-b border-neutral-200 hover:bg-transparent dark:border-neutral-800">
              <TableHead className="w-12 px-4">
                <Checkbox />
              </TableHead>
              <TableHead className="min-w-[150px] px-4 text-xs text-neutral-500 dark:text-neutral-500">
                Companies
              </TableHead>
              <TableHead className="min-w-[200px] px-4 text-xs text-neutral-500 dark:text-neutral-500">
                Segment & Stage
              </TableHead>
              <TableHead className="min-w-[180px] px-4 text-xs text-neutral-500 dark:text-neutral-500">
                Account Owner
              </TableHead>
              <TableHead className="min-w-[100px] px-4 text-xs text-neutral-500 dark:text-neutral-500">
                Open Deals
              </TableHead>
              <TableHead className="min-w-[140px] px-4 text-xs text-neutral-500 dark:text-neutral-500">
                Pipeline Value
              </TableHead>
              <TableHead className="min-w-[150px] px-4 text-xs text-neutral-500 dark:text-neutral-500">
                Win Probability
              </TableHead>
              <TableHead className="min-w-[120px] px-4 text-xs text-neutral-500 dark:text-neutral-500">
                Activity Trend
              </TableHead>
              <TableHead className="min-w-[180px] px-4 text-xs text-neutral-500 dark:text-neutral-500">
                Last Interaction
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {companiesData.map((company) => (
              <TableRow
                key={company.id}
                className="cursor-pointer border-b border-neutral-200 transition-colors hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-900/50"
              >
                <TableCell className="px-4">
                  <Checkbox />
                </TableCell>
                <TableCell className="px-4 font-medium text-neutral-900 dark:text-white">
                  {company.name}
                </TableCell>
                <TableCell className="flex items-center gap-2 px-4">
                  {company.segments.map((segment) => (
                    <Badge
                      key={segment}
                      className={`${segmentColors[segment]} text-xs font-medium`}
                      variant="secondary"
                    >
                      {segment}
                    </Badge>
                  ))}
                </TableCell>
                <TableCell className="px-4">
                  <div className="flex items-center gap-2">
                    <Avatar className="size-5">
                      <AvatarImage src={company.accountOwner.avatar} />
                      <AvatarFallback>
                        {company.accountOwner.name.charAt(0)}
                      </AvatarFallback>
                    </Avatar>
                    <span className="text-sm text-neutral-700 dark:text-neutral-300">
                      {company.accountOwner.name}
                    </span>
                  </div>
                </TableCell>
                <TableCell className="px-4 text-neutral-700 dark:text-neutral-300">
                  {company.openDeals}
                </TableCell>
                <TableCell className="px-4 text-neutral-700 dark:text-neutral-300">
                  ${company.pipelineValue.toLocaleString('en-US')}
                </TableCell>
                <TableCell className="px-4">
                  <WinProbabilityBar value={company.winProbability} />
                </TableCell>
                <TableCell className="px-4">
                  <ActivityTrend />
                </TableCell>
                <TableCell className="px-4 text-neutral-600 dark:text-neutral-400">
                  <div className="flex items-center gap-2">
                    <Calendar className="size-4 text-neutral-400 dark:text-neutral-500" />
                    <span className="text-sm">
                      {company.lastInteraction.date}
                    </span>
                    <Separator
                      orientation="vertical"
                      className="bg-neutral-200 data-[orientation=vertical]:h-4 dark:bg-neutral-800"
                    />
                    <span className="text-xs text-neutral-400 dark:text-neutral-500">
                      {company.lastInteraction.type}
                    </span>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
      <div className="flex w-full flex-col border-t border-neutral-200 bg-neutral-50 px-4 text-sm text-neutral-600 md:flex-row dark:border-neutral-800 dark:bg-neutral-900/50 dark:text-neutral-500">
        <div className="flex flex-1 items-center gap-2 border-b border-neutral-200 py-2.5 md:border-r md:border-b-0 dark:border-neutral-800">
          <span className="font-semibold text-neutral-900 dark:text-neutral-300">
            {totalCompanies}
          </span>
          <span> Companies in view</span>
        </div>
        <div className="flex flex-1 items-center gap-2 border-b border-neutral-200 py-2.5 md:border-r md:border-b-0 md:pl-3 dark:border-neutral-800">
          <Plus className="size-3.5" />
          <span>Sum of pipeline</span>
        </div>
        <div className="flex flex-1 items-center gap-2 border-b border-neutral-200 py-2.5 md:border-r md:border-b-0 md:pl-3 dark:border-neutral-800">
          <Plus className="size-3.5" />
          <span>Avg win probability</span>
        </div>
        <Dialog>
          <DialogTrigger asChild>
            <div className="group flex flex-1 cursor-pointer items-center justify-start gap-2 py-2.5 transition-colors hover:text-neutral-900 md:pl-3 dark:hover:text-neutral-200">
              <Plus className="size-3.5" />
              <span>Add Calculation</span>
            </div>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Add Custom Calculation</DialogTitle>
              <DialogDescription>
                Define a new metric or calculation to display in the footer.
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="grid gap-2">
                <Input
                  id="calc-name"
                  placeholder="Calculation Name (e.g., Total Revenue)"
                />
              </div>
              <div className="grid gap-2">
                <Input
                  id="calc-formula"
                  placeholder="Formula (e.g., SUM(Pipeline Value))"
                />
              </div>
            </div>
            <DialogFooter>
              <DialogClose asChild>
                <Button variant="outline" className="rounded-full">
                  Cancel
                </Button>
              </DialogClose>
              <Button className="rounded-full bg-indigo-600 text-white hover:bg-indigo-700">
                Add Calculation
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  );
}
```

### `src/components/dashboards/sales-dashboard/components/company-filters.tsx`

```tsx
'use client';

import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Download, Plus } from 'lucide-react';

export function CompanyFilters() {
  return (
    <div className="flex flex-wrap items-center gap-3 p-4">
      <Select defaultValue="pipeline-value">
        <SelectTrigger
          size="sm"
          className="w-fit cursor-pointer rounded-full! border-y border-neutral-200 bg-neutral-100 text-xs shadow-none transition-colors hover:bg-neutral-200/50 focus:ring-0 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700/50"
        >
          <span className="text-xs text-neutral-500 dark:text-neutral-400">
            Sort by
          </span>
          <SelectValue placeholder="Sort by" />
        </SelectTrigger>
        <SelectContent className="border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-900">
          <SelectItem value="pipeline-value">Pipeline Value</SelectItem>
          <SelectItem value="name">Name</SelectItem>
          <SelectItem value="activity">Last Activity</SelectItem>
        </SelectContent>
      </Select>

      <Select defaultValue="all-owners">
        <SelectTrigger
          size="sm"
          className="w-fit cursor-pointer rounded-full border-y border-neutral-200 bg-neutral-100 text-xs shadow-none transition-colors hover:bg-neutral-200/50 focus:ring-0 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700/50"
        >
          <span className="text-xs text-neutral-500 dark:text-neutral-400">
            Filter
          </span>
          <SelectValue placeholder="Filter" />
        </SelectTrigger>
        <SelectContent className="border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-900">
          <SelectItem value="all-owners">All Owners</SelectItem>
          <SelectItem value="my-companies">My Companies</SelectItem>
          <SelectItem value="team">Team</SelectItem>
        </SelectContent>
      </Select>

      <Select defaultValue="any">
        <SelectTrigger
          size="sm"
          className="w-fit cursor-pointer rounded-full border-y border-neutral-200 bg-neutral-100 text-xs shadow-none transition-colors hover:bg-neutral-200/50 focus:ring-0 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700/50"
        >
          <span className="text-xs text-neutral-500 dark:text-neutral-400">
            Stage
          </span>
          <SelectValue placeholder="Stage" />
        </SelectTrigger>
        <SelectContent className="border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-900">
          <SelectItem value="any">Any</SelectItem>
          <SelectItem value="prospect">Prospect</SelectItem>
          <SelectItem value="qualified">Qualified</SelectItem>
          <SelectItem value="negotiation">Negotiation</SelectItem>
          <SelectItem value="closed">Closed</SelectItem>
        </SelectContent>
      </Select>

      <Select defaultValue="7-days">
        <SelectTrigger
          size="sm"
          className="w-fit cursor-pointer rounded-full border-y border-neutral-200 bg-neutral-100 text-xs shadow-none transition-colors hover:bg-neutral-200/50 focus:ring-0 dark:border-neutral-600 dark:bg-neutral-800 dark:hover:bg-neutral-700/50"
        >
          <span className="text-xs text-neutral-500 dark:text-neutral-400">
            Last Activity
          </span>
          <SelectValue placeholder="Last Activity" />
        </SelectTrigger>
        <SelectContent className="border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-900">
          <SelectItem value="7-days">7 Days</SelectItem>
          <SelectItem value="30-days">30 Days</SelectItem>
          <SelectItem value="90-days">90 Days</SelectItem>
          <SelectItem value="all-time">All Time</SelectItem>
        </SelectContent>
      </Select>

      <div className="flex-1" />

      <Dialog>
        <DialogTrigger asChild>
          <button className="flex cursor-pointer items-center gap-2 rounded-full border-y border-neutral-200 bg-neutral-100 px-3 py-2 text-xs text-neutral-600 shadow-none transition-colors hover:bg-neutral-200/50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700/50">
            <Download className="size-3.5" />
            Export
          </button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Export Companies Data</DialogTitle>
            <DialogDescription>
              Select the file format to export your company records.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <span className="text-sm font-medium">Format</span>
              <Select defaultValue="csv">
                <SelectTrigger>
                  <SelectValue placeholder="Select format" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="csv">CSV Document (.csv)</SelectItem>
                  <SelectItem value="xlsx">Excel File (.xlsx)</SelectItem>
                  <SelectItem value="pdf">PDF Document (.pdf)</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline" className="rounded-full">
                Cancel
              </Button>
            </DialogClose>
            <Button className="rounded-full bg-indigo-600 text-white hover:bg-indigo-700">
              Export
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog>
        <DialogTrigger asChild>
          <Button
            size="sm"
            className="cursor-pointer rounded-full border-[1.5px] border-indigo-600 bg-gradient-to-r from-indigo-700 to-indigo-800 text-xs font-semibold text-white inset-shadow-sm"
          >
            <Plus className="size-3.5" />
            New Company
          </Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Add New Company</DialogTitle>
            <DialogDescription>
              Enter the details of the new company you want to track.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Input id="name" placeholder="Company Name" />
            </div>
            <div className="grid gap-2">
              <Input id="website" placeholder="Website (e.g. acme.com)" />
            </div>
            <div className="grid gap-2">
              <Select defaultValue="prospect">
                <SelectTrigger>
                  <SelectValue placeholder="Select stage" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="prospect">Prospect</SelectItem>
                  <SelectItem value="qualified">Qualified</SelectItem>
                  <SelectItem value="negotiation">Negotiation</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline" className="rounded-full">
                Cancel
              </Button>
            </DialogClose>
            <Button className="rounded-full bg-indigo-600 text-white hover:bg-indigo-700">
              Save Company
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}
```

### `src/components/dashboards/sales-dashboard/components/deal-card.tsx`

```tsx
import { type Deal } from '../types';

interface DealCardProps {
  deal: Deal;
}

const Sparkline: React.FC<{ data: number[] }> = ({ data }) => {
  const max = Math.max(...data);
  return (
    <div className="flex h-3 items-end gap-[1px]">
      {data.map((v, i) => (
        <div
          key={i}
          className="w-1 rounded-t-[0.5px] bg-teal-500/80"
          style={{ height: `${(v / max) * 100}%` }}
        />
      ))}
    </div>
  );
};

const ProbabilityBar: React.FC<{ value: number }> = ({ value }) => {
  return (
    <div className="flex items-center gap-1.5">
      <div className="flex h-2.5 w-12 gap-[1px]">
        {[...Array(10)].map((_, i) => {
          const isActive = (i + 1) * 10 <= value;
          let color = 'bg-neutral-200 dark:bg-neutral-800';
          if (isActive) {
            if (value > 75) color = 'bg-green-500';
            else if (value > 40) color = 'bg-yellow-500';
            else color = 'bg-red-500';
          }
          return <div key={i} className={`flex-1 rounded-[1px] ${color}`} />;
        })}
      </div>
      <span className="text-[10px] font-bold text-neutral-500 dark:text-neutral-500">
        {value}%
      </span>
    </div>
  );
};

const DealCard: React.FC<DealCardProps> = ({ deal }) => {
  return (
    <div className="group cursor-pointer rounded-xl border border-neutral-200 bg-neutral-50 p-4 transition-colors hover:border-neutral-300 dark:border-neutral-700/90 dark:bg-neutral-800/50 dark:hover:border-neutral-600">
      <div className="mb-1.5 flex items-start justify-between">
        <h4 className="truncate text-sm font-semibold text-neutral-600 transition-colors group-hover:text-indigo-600 dark:text-neutral-400 dark:group-hover:text-indigo-400">
          {deal.company}
        </h4>
      </div>

      <div className="mb-3 text-lg font-bold tracking-tight text-neutral-900 dark:text-white">
        ${deal.value.toLocaleString()}
      </div>

      <div className="mb-3 flex flex-wrap gap-1.5">
        <span
          className={`rounded px-2 py-0.5 text-[10px] font-bold ${
            deal.segment === 'Enterprise'
              ? 'border border-blue-200 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
              : deal.segment === 'Mid-Market'
                ? 'border border-teal-200 bg-teal-100 text-teal-700 dark:border-teal-800 dark:bg-teal-900/30 dark:text-teal-400'
                : 'border border-yellow-200 bg-yellow-100 text-yellow-700 dark:border-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
          }`}
        >
          {deal.segment}
        </span>
        {deal.tags.map((tag) => (
          <span
            key={tag}
            className="rounded border border-neutral-300 bg-neutral-200 px-2 py-0.5 text-[10px] font-bold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400"
          >
            {tag}
          </span>
        ))}
      </div>

      <div className="space-y-2.5 border-t border-neutral-200 pt-3 dark:border-neutral-800">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <img
              src={deal.owner.avatar}
              className="h-5 w-5 rounded-full"
              alt={deal.owner.name}
            />
            <span className="text-[11px] font-medium text-neutral-600 dark:text-neutral-500">
              {deal.owner.name}
            </span>
          </div>
          <Sparkline data={deal.activityHistory} />
        </div>

        <div className="flex items-center justify-between">
          <ProbabilityBar value={deal.winProbability} />
          <div className="flex items-center gap-1 text-[10px] font-bold text-neutral-500 dark:text-neutral-600">
            <svg
              className="h-3 w-3"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                strokeWidth={2}
              />
            </svg>
            {deal.lastActivity}
          </div>
        </div>
      </div>
    </div>
  );
};

export default DealCard;
```

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

```tsx
"use client";

import { type LucideIcon } from "lucide-react";
import {
  SidebarGroup,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { useLocation } from "react-router-dom";

export function NavMain({
  items,
  onNavigate,
  currentView,
}: {
  items: {
    title: string;
    url: string;
    icon?: LucideIcon;
    isActive?: boolean;
    isDisabled?: boolean;
    items?: {
      title: string;
      url: string;
    }[];
  }[];
  onNavigate?: (view: string) => void;
  currentView?: string;
}) {
  const location = useLocation();
  const pathname = location.pathname;
  return (
    <SidebarGroup className="border-b border-neutral-200 dark:border-neutral-800">
      <SidebarMenu>
        {items.map((item) => (
          <SidebarMenuItem key={item.title}>
            <SidebarMenuButton
              asChild
              tooltip={item.title}
              isActive={currentView === item.title || (pathname === item.url && item.url !== "#")}
              className="data-[active=true]:border-y data-[active=true]:border-neutral-200 dark:data-[active=true]:border-neutral-600 text-neutral-500 dark:text-neutral-400 font-medium tracking-tight"
            >
              <a
                href={item.url}
                onClick={(e) => {
                  if (item.isDisabled) {
                    e.preventDefault();
                    return;
                  }
                  if (item.url === "#" && onNavigate) {
                    e.preventDefault();
                    onNavigate(item.title);
                  }
                }}
              >
                {item.icon && (
                  <item.icon className="size-4" strokeWidth={2.5} />
                )}
                <span>{item.title}</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}
```

### `src/components/dashboards/sales-dashboard/components/nav-pipelines.tsx`

```tsx
"use client";

import { Dot } from "lucide-react";

import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { useLocation } from "react-router-dom";

export function NavPipelines({
  pipelines,
}: {
  pipelines: {
    name: string;
    url: string;
    color: string;
    isDisabled?: boolean;
  }[];
}) {
  const location = useLocation();
  const pathname = location.pathname;
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <SidebarGroupLabel className="h-0 pt-1 pb-3.5 text-neutral-500 dark:text-neutral-400 -ml-1.5">PIPELINE</SidebarGroupLabel>
      <SidebarMenu>
        {pipelines.map((item) => (
          <SidebarMenuItem key={item.name}>
            <SidebarMenuButton asChild isActive={pathname === item.url} className="data-[active=true]:border-y data-[active=true]:border-neutral-200 dark:data-[active=true]:border-neutral-700 text-neutral-500 dark:text-neutral-400 font-medium tracking-tight">
              <a href={item.url} onClick={(e) => item.isDisabled && e.preventDefault()}>
                <Dot className={`${item.color}`} strokeWidth={10} />
                <span >{item.name}</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}
```

### `src/components/dashboards/sales-dashboard/components/nav-reporting.tsx`

```tsx
"use client";

import { type LucideIcon } from "lucide-react";

import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { useLocation } from "react-router-dom";

export function NavReporting({
  reports,
}: {
  reports: {
    name: string;
    url: string;
    icon: LucideIcon;
    isDisabled?: boolean;
  }[];
}) {
  const location = useLocation();
  const pathname = location.pathname;
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden border-b border-neutral-200 dark:border-neutral-800">
      <SidebarGroupLabel className="h-0 pt-1 pb-3.5 text-neutral-500 dark:text-neutral-400 -ml-1.5">REPORTS</SidebarGroupLabel>
      <SidebarMenu>
        {reports.map((item) => (
          <SidebarMenuItem key={item.name}>
            <SidebarMenuButton asChild isActive={pathname === item.url} className="data-[active=true]:border-y data-[active=true]:border-neutral-200 dark:data-[active=true]:border-neutral-700 text-neutral-500 dark:text-neutral-400 font-medium tracking-tight">
              <a href={item.url} onClick={(e) => item.isDisabled && e.preventDefault()}>
                <item.icon className="size-4" strokeWidth={2.5} />
                <span >{item.name}</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}
```

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

```tsx
import * as React from "react"
import { type LucideIcon } from "lucide-react"
import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
export function NavSecondary({
  items,
  ...props
}: {
  items: {
    title: string
    url: string
    icon: LucideIcon
    isDisabled?: boolean
  }[]
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
  return (
    <SidebarGroup {...props} >
      <SidebarGroupContent>
        <SidebarMenu>
          {items.map((item) => (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton asChild size="sm" className="text-neutral-500 font-medium tracking-tight">
                <a href={item.url} onClick={(e) => item.isDisabled && e.preventDefault()}>
                  <item.icon />
                  <span>{item.title}</span>
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  )
}
```

### `src/components/dashboards/sales-dashboard/components/nav-teams.tsx`

```tsx
"use client";

import { type LucideIcon } from "lucide-react";

import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import { useLocation } from "react-router-dom";

export function NavTeams({
  teams,
}: {
  teams: {
    name: string;
    url: string;
    icon: LucideIcon;
    isDisabled?: boolean;
  }[];
}) {
  const location = useLocation();
  const pathname = location.pathname;
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden border-b border-neutral-200 dark:border-neutral-800">
      <SidebarGroupLabel className="h-0 pt-1 pb-3.5 text-neutral-500 dark:text-neutral-400 -ml-1.5">TEAM</SidebarGroupLabel>
      <SidebarMenu>
        {teams.map((item) => (
          <SidebarMenuItem key={item.name}>
            <SidebarMenuButton asChild isActive={pathname === item.url} className="data-[active=true]:border-y data-[active=true]:border-neutral-200 dark:data-[active=true]:border-neutral-700 text-neutral-500 dark:text-neutral-400 font-medium tracking-tight">
              <a href={item.url} onClick={(e) => item.isDisabled && e.preventDefault()}>
                <item.icon className="size-4" strokeWidth={2.5} />
                <span >{item.name}</span>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}
```

### `src/components/dashboards/sales-dashboard/components/site-header.tsx`

```tsx
'use client';
import { useState, useMemo } from 'react';
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@/components/ui/breadcrumb';
import { Separator } from '@/components/ui/separator';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { Badge } from '@/components/ui/badge';
import {
  Bell,
  Search,
  Building2,
  Kanban,
  Settings,
  CreditCard,
  LogOut,
  User,
  AlertTriangle,
  CheckCircle2,
} from 'lucide-react';
import { useLocation } from 'react-router-dom';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import { companiesData, deals } from '../data';

const NOTIFICATIONS = [
  {
    id: 1,
    Icon: CheckCircle2,
    title: 'Stripe deal marked as Closed Won',
    description: 'Noah Lee closed the deal · $442k',
    time: '5m ago',
    unread: true,
    iconColor: 'text-green-500',
    iconBg: 'bg-green-100 dark:bg-green-900/30',
  },
  {
    id: 2,
    Icon: Kanban,
    title: 'Apple deal moved to Negotiation',
    description: 'Alex Santos updated the stage',
    time: '1h ago',
    unread: true,
    iconColor: 'text-indigo-500',
    iconBg: 'bg-indigo-100 dark:bg-indigo-900/30',
  },
  {
    id: 3,
    Icon: Building2,
    title: 'LVMH QBR Call scheduled',
    description: 'Sarah Nguyen created an activity',
    time: '3h ago',
    unread: true,
    iconColor: 'text-blue-500',
    iconBg: 'bg-blue-100 dark:bg-blue-900/30',
  },
  {
    id: 4,
    Icon: AlertTriangle,
    title: 'Follow-up with Disney due today',
    description: 'Discovery call reminder',
    time: '6h ago',
    unread: false,
    iconColor: 'text-orange-500',
    iconBg: 'bg-orange-100 dark:bg-orange-900/30',
  },
  {
    id: 5,
    Icon: User,
    title: 'James Taylor mentioned you',
    description: 'In a comment on the Disney deal',
    time: 'Yesterday',
    unread: false,
    iconColor: 'text-neutral-500',
    iconBg: 'bg-neutral-100 dark:bg-neutral-800',
  },
];

export const SiteHeader = ({ currentView }: { currentView?: string }) => {
  const location = useLocation();
  const pathname = location.pathname;

  const [searchOpen, setSearchOpen] = useState(false);
  const [query, setQuery] = useState('');
  const [readIds, setReadIds] = useState<Set<number>>(new Set());

  const unreadCount = NOTIFICATIONS.filter(
    (n) => n.unread && !readIds.has(n.id),
  ).length;

  const markAllRead = () => setReadIds(new Set(NOTIFICATIONS.map((n) => n.id)));

  const markRead = (id: number) => setReadIds((prev) => new Set([...prev, id]));

  const getBreadcrumbLabel = () => {
    if (currentView) return currentView;
    if (pathname.includes('company')) return 'Companies';
    if (pathname.includes('dealsboard')) return 'Deals Board';
    return 'Dashboard';
  };

  const filteredCompanies = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return [];
    return companiesData
      .filter((c) => c.name.toLowerCase().includes(q))
      .slice(0, 4);
  }, [query]);

  const filteredDeals = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return [];
    return deals.filter((d) => d.company.toLowerCase().includes(q)).slice(0, 3);
  }, [query]);

  const hasResults = filteredCompanies.length > 0 || filteredDeals.length > 0;
  const showEmpty = query.trim().length > 0 && !hasResults;

  return (
    <header className="flex h-16 justify-between border-neutral-200 pr-5 dark:border-none">
      {/* Left — breadcrumb */}
      <div className="flex items-center gap-2 px-4">
        <SidebarTrigger className="-ml-1" />
        <Separator
          orientation="vertical"
          className="my-auto mr-2 data-[orientation=vertical]:h-4"
        />
        <div className="flex items-center gap-2">
          <Breadcrumb>
            <BreadcrumbItem className="flex items-center gap-1">
              <BreadcrumbLink href="#">{getBreadcrumbLabel()}</BreadcrumbLink>
            </BreadcrumbItem>
          </Breadcrumb>
          <Badge variant="secondary" className="text-xs">
            <div className="size-1.5 rounded-full bg-green-600" />
            Active
          </Badge>
        </div>
      </div>

      {/* Right — actions */}
      <div className="flex items-center gap-2">
        {/* ── Search ── */}
        <button
          onClick={() => setSearchOpen(true)}
          className="flex size-7 cursor-pointer items-center justify-center rounded-full border-y border-neutral-200 bg-neutral-100 text-neutral-900 transition-colors hover:bg-neutral-200/50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700/50"
        >
          <Search className="size-4" />
        </button>

        <Dialog
          open={searchOpen}
          onOpenChange={(open) => {
            setSearchOpen(open);
            if (!open) setQuery('');
          }}
        >
          <DialogContent
            showCloseButton={false}
            className="top-[14%] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-lg"
          >
            <span className="sr-only">Search</span>

            {/* Single flex container — prevents grid row-sizing from collapsing body to zero */}
            <div className="flex flex-col">
              {/* input row */}
              <div className="flex items-center gap-3 px-4">
                <Search className="size-4 shrink-0 text-neutral-400 dark:text-neutral-500" />
                <Input
                  autoFocus
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="Search companies, deals…"
                  className="h-12 border-0 bg-transparent dark:bg-transparent rounded-none px-0 text-sm shadow-none ring-0 placeholder:text-neutral-400 focus-visible:ring-0 dark:placeholder:text-neutral-600"
                />
                <kbd className="hidden shrink-0 rounded border border-neutral-200 px-1.5 py-0.5 text-[10px] text-neutral-400 sm:inline dark:border-neutral-700 dark:text-neutral-600">
                  ESC
                </kbd>
              </div>

              {/* thin rule */}
              <div className="h-px bg-neutral-100 dark:bg-neutral-800" />

              {/* default state — recent companies */}
              {query.trim() === '' && (
                <div className="p-2 pb-3">
                  <p className="px-2 py-1.5 text-[10px] font-semibold tracking-wider text-neutral-400 uppercase dark:text-neutral-600">
                    Recent
                  </p>
                  {companiesData.slice(0, 4).map((company) => (
                    <div
                      key={company.id}
                      onClick={() => setSearchOpen(false)}
                      className="flex cursor-pointer items-center gap-3 rounded-lg px-2 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-800"
                    >
                      <div className="flex size-7 shrink-0 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/60">
                        <Building2 className="size-3.5 text-neutral-400 dark:text-neutral-500" />
                      </div>
                      <div className="min-w-0 flex-1">
                        <p className="text-sm font-medium text-neutral-900 dark:text-white">
                          {company.name}
                        </p>
                        <p className="text-xs text-neutral-400 dark:text-neutral-500">
                          {company.openDeals} open deals · $
                          {(company.pipelineValue / 1000).toFixed(0)}k pipeline
                        </p>
                      </div>
                      <span className="text-xs text-neutral-300 dark:text-neutral-700">
                        ↵
                      </span>
                    </div>
                  ))}
                </div>
              )}

              {/* no results */}
              {showEmpty && (
                <div className="px-4 py-8 text-center">
                  <p className="text-sm text-neutral-400 dark:text-neutral-500">
                    No results for{' '}
                    <span className="font-medium text-neutral-600 dark:text-neutral-400">
                      &ldquo;{query}&rdquo;
                    </span>
                  </p>
                </div>
              )}

              {/* results */}
              {hasResults && (
                <div className="max-h-72 overflow-y-auto p-2 pb-3">
                  {filteredCompanies.length > 0 && (
                    <>
                      <p className="px-2 py-1.5 text-[10px] font-semibold tracking-wider text-neutral-400 uppercase dark:text-neutral-600">
                        Companies
                      </p>
                      {filteredCompanies.map((company) => (
                        <div
                          key={company.id}
                          onClick={() => setSearchOpen(false)}
                          className="flex cursor-pointer items-center gap-3 rounded-lg px-2 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-800"
                        >
                          <div className="flex size-7 shrink-0 items-center justify-center rounded-md border border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800/60">
                            <Building2 className="size-3.5 text-neutral-500" />
                          </div>
                          <div className="min-w-0">
                            <p className="text-sm font-medium text-neutral-900 dark:text-white">
                              {company.name}
                            </p>
                            <p className="text-xs text-neutral-400 dark:text-neutral-500">
                              {company.openDeals} open deals · $
                              {(company.pipelineValue / 1000).toFixed(0)}k
                              pipeline
                            </p>
                          </div>
                        </div>
                      ))}
                    </>
                  )}

                  {filteredDeals.length > 0 && (
                    <>
                      {filteredCompanies.length > 0 && (
                        <div className="my-1 h-px bg-neutral-100 dark:bg-neutral-800" />
                      )}
                      <p className="px-2 py-1.5 text-[10px] font-semibold tracking-wider text-neutral-400 uppercase dark:text-neutral-600">
                        Deals
                      </p>
                      {filteredDeals.map((deal) => (
                        <div
                          key={deal.id}
                          onClick={() => setSearchOpen(false)}
                          className="flex cursor-pointer items-center gap-3 rounded-lg px-2 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-800"
                        >
                          <div className="flex size-7 shrink-0 items-center justify-center rounded-md border border-indigo-100 bg-indigo-50 dark:border-indigo-800 dark:bg-indigo-900/20">
                            <Kanban className="size-3.5 text-indigo-500" />
                          </div>
                          <div className="min-w-0">
                            <p className="text-sm font-medium text-neutral-900 dark:text-white">
                              {deal.company}
                            </p>
                            <p className="text-xs text-neutral-400 dark:text-neutral-500">
                              {deal.stage} · ${deal.value.toLocaleString()}
                            </p>
                          </div>
                        </div>
                      ))}
                    </>
                  )}
                </div>
              )}
            </div>
          </DialogContent>
        </Dialog>

        {/* ── Notifications ── */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button className="relative flex size-7 cursor-pointer items-center justify-center rounded-full border-y border-neutral-200 bg-neutral-100 text-neutral-900 transition-colors hover:bg-neutral-200/50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700/50">
              <Bell className="size-4" />
              {unreadCount > 0 && (
                <span className="absolute -top-0.5 -right-0.5 flex size-3.5 items-center justify-center rounded-full bg-indigo-600 text-[8px] leading-none font-bold text-white">
                  {unreadCount}
                </span>
              )}
            </button>
          </DropdownMenuTrigger>

          <DropdownMenuContent
            align="end"
            className="w-80 overflow-hidden border-neutral-200 bg-white p-0 dark:border-neutral-800 dark:bg-neutral-900"
          >
            {/* header */}
            <div className="flex items-center justify-between border-b border-neutral-100 px-4 py-3 dark:border-neutral-800">
              <div className="flex items-center gap-2">
                <span className="text-sm font-semibold text-neutral-900 dark:text-white">
                  Notifications
                </span>
                {unreadCount > 0 && (
                  <span className="flex h-4 min-w-4 items-center justify-center rounded-full bg-indigo-600 px-1 text-[10px] font-bold text-white">
                    {unreadCount}
                  </span>
                )}
              </div>
              {unreadCount > 0 && (
                <button
                  onClick={markAllRead}
                  className="cursor-pointer text-xs text-indigo-600 hover:underline dark:text-indigo-400"
                >
                  Mark all read
                </button>
              )}
            </div>

            {/* items */}
            <div className="divide-y divide-neutral-100 dark:divide-neutral-800">
              {NOTIFICATIONS.map((n) => {
                const isUnread = n.unread && !readIds.has(n.id);
                return (
                  <div
                    key={n.id}
                    onClick={() => markRead(n.id)}
                    className={`flex cursor-pointer gap-3 px-4 py-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 ${isUnread ? 'bg-indigo-50/50 dark:bg-indigo-950/20' : ''}`}
                  >
                    <div
                      className={`flex size-7 shrink-0 items-center justify-center rounded-full ${n.iconBg}`}
                    >
                      <n.Icon className={`size-3.5 ${n.iconColor}`} />
                    </div>
                    <div className="min-w-0 flex-1">
                      <p
                        className={`text-[13px] leading-snug ${isUnread ? 'font-medium text-neutral-900 dark:text-white' : 'text-neutral-500 dark:text-neutral-400'}`}
                      >
                        {n.title}
                      </p>
                      <p className="mt-0.5 text-xs text-neutral-400 dark:text-neutral-500">
                        {n.description}
                      </p>
                      <p className="mt-0.5 text-[11px] text-neutral-400 dark:text-neutral-600">
                        {n.time}
                      </p>
                    </div>
                    {isUnread && (
                      <div className="mt-1.5 size-1.5 shrink-0 rounded-full bg-indigo-500" />
                    )}
                  </div>
                );
              })}
            </div>
          </DropdownMenuContent>
        </DropdownMenu>

        {/* ── User ── */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <div className="flex h-fit cursor-pointer items-center justify-center gap-2 rounded-full border-y border-neutral-200 bg-neutral-100 p-1 text-neutral-900 transition-colors hover:bg-neutral-200/50 md:pr-2.5 dark:border-neutral-600 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700/50">
              <img
                src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                alt="user"
                height={20}
                width={20}
                className="size-5 rounded-full object-cover"
              />
              <span className="hidden text-xs sm:inline">John doe</span>
            </div>
          </DropdownMenuTrigger>

          <DropdownMenuContent
            align="end"
            className="w-56 border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900"
          >
            {/* profile */}
            <div className="flex items-center gap-3 px-3 py-2.5">
              <img
                src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                alt="user"
                className="size-8 rounded-full object-cover"
              />
              <div className="min-w-0">
                <p className="truncate text-sm font-medium text-neutral-900 dark:text-white">
                  John Doe
                </p>
                <p className="truncate text-xs text-neutral-500 dark:text-neutral-400">
                  john@example.com
                </p>
              </div>
            </div>

            <DropdownMenuSeparator />

            <DropdownMenuLabel className="text-[10px] font-semibold tracking-wider text-neutral-400 uppercase dark:text-neutral-600">
              Account
            </DropdownMenuLabel>

            <DropdownMenuItem className="cursor-pointer gap-2.5">
              <User className="size-4 text-neutral-500" />
              View Profile
            </DropdownMenuItem>
            <DropdownMenuItem className="cursor-pointer gap-2.5">
              <Settings className="size-4 text-neutral-500" />
              Settings
            </DropdownMenuItem>
            <DropdownMenuItem className="cursor-pointer gap-2.5">
              <CreditCard className="size-4 text-neutral-500" />
              Billing
            </DropdownMenuItem>

            <DropdownMenuSeparator />

            <DropdownMenuItem
              variant="destructive"
              className="cursor-pointer gap-2.5"
            >
              <LogOut className="size-4" />
              Log out
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </header>
  );
};
```

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

```tsx
"use client"

import * as React from "react"
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"

export function TeamSwitcher({
  teams,
}: {
  teams: {
    name: string
    logo: React.ElementType
    plan: string
  }[]
}) {
  const { isMobile } = useSidebar()
  const [activeTeam, setActiveTeam] = React.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"
            >
              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
                <activeTeam.logo className="size-4" />
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-medium">{activeTeam.name}</span>
                <span className="truncate text-xs">{activeTeam.plan}</span>
              </div>
              <ChevronsUpDown className="ml-auto" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            align="start"
            side={isMobile ? "bottom" : "right"}
            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/sales-dashboard/dashboardLayout.tsx`

```tsx
import { AppSidebar } from "./components/app-sidebar";
import { SiteHeader } from "./components/site-header";

import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";

const DashboardLayout = ({ children, onNavigate, currentView }: { children: React.ReactNode; onNavigate?: (view: string) => void; currentView?: string }) => {
  return (
    <SidebarProvider>
      <AppSidebar onNavigate={onNavigate} currentView={currentView} />
      <SidebarInset className="h-svh overflow-hidden">
        <SiteHeader currentView={currentView} />
        <div className="flex-1 flex flex-col min-h-0 overflow-hidden">{children}</div>
      </SidebarInset>
    </SidebarProvider>
  );
};

export default DashboardLayout;
```

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

```ts
import type { Deal, DealStage } from "./types";

export const companiesData = [
  {
    id: 1,
    name: "LVMH",
    segments: ["Enterprise", "Upsell"],
    openDeals: 7,
    accountOwner: {
      name: "Sarah Nguyen",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 420000,
    winProbability: 70,
    lastInteraction: { date: "Feb 21", type: "QBR Call" },
  },
  {
    id: 2,
    name: "Disney",
    segments: ["Enterprise", "New Logo"],
    openDeals: 4,
    accountOwner: {
      name: "James Taylor",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 311242,
    winProbability: 51,
    lastInteraction: { date: "Feb 22", type: "Demo" },
  },
  {
    id: 3,
    name: "Paypal",
    segments: ["Enterprise"],
    openDeals: 5,
    accountOwner: {
      name: "Maria Keller",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 124232,
    winProbability: 22,
    lastInteraction: { date: "Mar 12", type: "Security" },
  },
  {
    id: 4,
    name: "United Airlines",
    segments: ["Renewal"],
    openDeals: 2,
    accountOwner: {
      name: "Nia Jameson",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 221231,
    winProbability: 77,
    lastInteraction: { date: "Mar 17", type: "Legal" },
  },
  {
    id: 5,
    name: "Apple",
    segments: ["Pilot"],
    openDeals: 6,
    accountOwner: {
      name: "Alex Santos",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 530111,
    winProbability: 82,
    lastInteraction: { date: "Mar 12", type: "Exec" },
  },
  {
    id: 6,
    name: "Microsoft",
    segments: ["Strategic", "Expansion"],
    openDeals: 8,
    accountOwner: {
      name: "Mark Darnalds",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 320222,
    winProbability: 86,
    lastInteraction: { date: "Mar 15", type: "Pilot" },
  },
  {
    id: 7,
    name: "Airbnb",
    segments: ["Upsell", "Expansion"],
    openDeals: 3,
    accountOwner: {
      name: "Drew Nash",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 122230,
    winProbability: 51,
    lastInteraction: { date: "Mar 18", type: "Pricing" },
  },
  {
    id: 8,
    name: "Google",
    segments: ["SMB", "Enterprise"],
    openDeals: 8,
    accountOwner: {
      name: "Kate Chen",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 112277,
    winProbability: 24,
    lastInteraction: { date: "Jun 7", type: "Renewal" },
  },
  {
    id: 9,
    name: "Netflix",
    segments: ["Mid-Market"],
    openDeals: 3,
    accountOwner: {
      name: "Ricky Brown",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 221221,
    winProbability: 72,
    lastInteraction: { date: "Jun 18", type: "Pilot" },
  },
  {
    id: 10,
    name: "Spotify",
    segments: ["Land & Expand"],
    openDeals: 5,
    accountOwner: {
      name: "Hannah Mills",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 170991,
    winProbability: 55,
    lastInteraction: { date: "Jul 1", type: "Expansion" },
  },
  {
    id: 11,
    name: "Shopify",
    segments: ["Co-Sell", "Expansion"],
    openDeals: 9,
    accountOwner: {
      name: "Emma Green",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 139007,
    winProbability: 45,
    lastInteraction: { date: "Jul 18", type: "Renewal" },
  },
  {
    id: 12,
    name: "Zoom",
    segments: ["Expansion"],
    openDeals: 8,
    accountOwner: {
      name: "Oliver Chan",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 289921,
    winProbability: 38,
    lastInteraction: { date: "Aug 8", type: "Partner" },
  },
  {
    id: 13,
    name: "Slack",
    segments: ["Mid-Market", "Co-Sell"],
    openDeals: 4,
    accountOwner: {
      name: "Ava Brooks",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 333221,
    winProbability: 23,
    lastInteraction: { date: "Aug 12", type: "Discovery" },
  },
  {
    id: 14,
    name: "Stripe",
    segments: ["Expansion", "SMB"],
    openDeals: 3,
    accountOwner: {
      name: "Noah Lee",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 442231,
    winProbability: 44,
    lastInteraction: { date: "Sept 09", type: "Demo" },
  },
  {
    id: 15,
    name: "Snowflake",
    segments: ["Enterprise", "Mid-Market"],
    openDeals: 6,
    accountOwner: {
      name: "Grace Miller",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 520000,
    winProbability: 24,
    lastInteraction: { date: "Sept 11", type: "Pricing" },
  },
  {
    id: 16,
    name: "Hubspot",
    segments: ["Expansion", "Co-Sell"],
    openDeals: 2,
    accountOwner: {
      name: "Chloe Park",
      avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    },
    pipelineValue: 210123,
    winProbability: 52,
    lastInteraction: { date: "Sept 18", type: "QBR Call" },
  },
];

export const segmentColors: Record<string, string> = {
  Enterprise: "border-blue-200 dark:border-blue-400/40 bg-blue-50 dark:bg-blue-400/20 text-blue-700 dark:text-blue-200",
  Upsell: "border-purple-200 dark:border-purple-400/40 bg-purple-50 dark:bg-purple-400/20 text-purple-700 dark:text-purple-200",
  "New Logo": "border-emerald-200 dark:border-emerald-400/40 bg-emerald-50 dark:bg-emerald-400/20 text-emerald-700 dark:text-emerald-200",
  Renewal: "border-emerald-200 dark:border-emerald-400/40 bg-emerald-50 dark:bg-emerald-400/20 text-emerald-700 dark:text-emerald-200",
  Expansion: "border-emerald-200 dark:border-emerald-400/40 bg-emerald-50 dark:bg-emerald-400/20 text-emerald-700 dark:text-emerald-200",
  Pilot: "border-orange-200 dark:border-orange-400/40 bg-orange-50 dark:bg-orange-400/20 text-orange-700 dark:text-orange-200",
  Strategic: "border-red-200 dark:border-red-400/40 bg-red-50 dark:bg-red-400/20 text-red-700 dark:text-red-200",
  SMB: "border-yellow-200 dark:border-yellow-400/40 bg-yellow-50 dark:bg-yellow-400/20 text-yellow-700 dark:text-yellow-200",
  "Mid-Market": "border-emerald-200 dark:border-emerald-400/40 bg-emerald-50 dark:bg-emerald-400/20 text-emerald-700 dark:text-emerald-200",
  "Land & Expand": "border-emerald-200 dark:border-emerald-400/40 bg-emerald-50 dark:bg-emerald-400/20 text-emerald-700 dark:text-emerald-200",
  "Co-Sell": "border-emerald-200 dark:border-emerald-400/40 bg-emerald-50 dark:bg-emerald-400/20 text-emerald-700 dark:text-emerald-200",
};

export const deals: Deal[] = [
  {
    id: "1",
    company: "LVMH",
    value: 420000,
    owner: {
      name: "Sarah Nguyen",
      avatar: "https://picsum.photos/seed/sarah/100/100",
    },
    stage: "Qualification",
    tags: ["Upsell", "High Priority"],
    winProbability: 70,
    lastActivity: "Feb 21",
    segment: "Enterprise",
    activityHistory: [20, 40, 30, 80, 50, 90, 70],
  },
  {
    id: "2",
    company: "Disney",
    value: 311242,
    owner: {
      name: "James Taylor",
      avatar: "https://picsum.photos/seed/james/100/100",
    },
    stage: "Discovery",
    tags: ["New Logo"],
    winProbability: 51,
    lastActivity: "Feb 22",
    segment: "Enterprise",
    activityHistory: [10, 20, 15, 40, 35, 60, 50],
  },
  {
    id: "3",
    company: "United Airlines",
    value: 221231,
    owner: {
      name: "Nia Jameson",
      avatar: "https://picsum.photos/seed/nia/100/100",
    },
    stage: "Proposal",
    tags: ["Renewal"],
    winProbability: 77,
    lastActivity: "Mar 17",
    segment: "Mid-Market",
    activityHistory: [50, 60, 70, 80, 90, 85, 95],
  },
  {
    id: "4",
    company: "Apple",
    value: 530111,
    owner: {
      name: "Alex Santos",
      avatar: "https://picsum.photos/seed/alex/100/100",
    },
    stage: "Negotiation",
    tags: ["Pilot"],
    winProbability: 82,
    lastActivity: "Mar 12",
    segment: "Enterprise",
    activityHistory: [80, 85, 90, 88, 92, 95, 98],
  },
  {
    id: "5",
    company: "Stripe",
    value: 442231,
    owner: {
      name: "Noah Lee",
      avatar: "https://picsum.photos/seed/noah/100/100",
    },
    stage: "Closed Won",
    tags: ["Expansion"],
    winProbability: 100,
    lastActivity: "Sept 09",
    segment: "Enterprise",
    activityHistory: [30, 50, 70, 90, 100, 100, 100],
  },
  {
    id: "6",
    company: "Netflix",
    value: 221221,
    owner: {
      name: "Ricky Brown",
      avatar: "https://picsum.photos/seed/ricky/100/100",
    },
    stage: "Discovery",
    tags: ["Expansion"],
    winProbability: 72,
    lastActivity: "Jun 18",
    segment: "Mid-Market",
    activityHistory: [20, 30, 45, 60, 70, 72, 72],
  },
  {
    id: "7",
    company: "Slack",
    value: 333221,
    owner: {
      name: "Ava Brooks",
      avatar: "https://picsum.photos/seed/ava/100/100",
    },
    stage: "Proposal",
    tags: ["Co-Sell"],
    winProbability: 23,
    lastActivity: "Aug 12",
    segment: "Mid-Market",
    activityHistory: [10, 15, 12, 18, 20, 25, 23],
  },
];

export const DEAL_STAGES: DealStage[] = [
  "Discovery",
  "Proposal",
  "Negotiation",
  "Closed Won",
];
```

### `src/components/dashboards/sales-dashboard/dealsboardView.tsx`

```tsx
import DealCard from './components/deal-card';
import { Button } from '@/components/ui/button';
import type { DealStage } from './types';
import { Download, Plus } from 'lucide-react';
import { deals, DEAL_STAGES } from './data';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';

export const DealsBoardView = () => {
  const getDealsInStage = (stage: DealStage) =>
    deals.filter((d) => d.stage === stage);

  const calculateStageTotal = (stage: DealStage) => {
    const stageDeals = getDealsInStage(stage);
    return stageDeals.reduce((sum, d) => sum + d.value, 0);
  };

  return (
    <div className="flex h-full w-full flex-col border border-neutral-200 dark:border-neutral-800">
      <div className="flex justify-end px-3 py-3">
        <div className="flex w-full flex-wrap justify-end gap-2">
          <Dialog>
            <DialogTrigger asChild>
              <button className="flex cursor-pointer items-center gap-2 rounded-full border-y border-neutral-200 bg-neutral-100 px-3 py-2 text-xs text-nowrap text-neutral-600 shadow-none transition-colors hover:bg-neutral-200/50 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700/50">
                <Download className="size-3.5" />
                <span className="hidden sm:inline">Export</span>
              </button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Export Deals</DialogTitle>
                <DialogDescription>
                  Download the current deals board data.
                </DialogDescription>
              </DialogHeader>
              <DialogFooter>
                <DialogClose asChild>
                  <Button variant="outline" className="rounded-full">
                    Cancel
                  </Button>
                </DialogClose>
                <Button className="rounded-full bg-indigo-600 text-white hover:bg-indigo-700">
                  Download CSV
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

          <Dialog>
            <DialogTrigger asChild>
              <Button
                size="sm"
                className="cursor-pointer rounded-full border-[1.5px] border-indigo-600 bg-linear-to-r from-indigo-700 to-indigo-800 text-xs font-semibold text-nowrap text-white inset-shadow-sm"
              >
                <Plus className="size-3.5" />
                <span>New Deal</span>
              </Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Create New Deal</DialogTitle>
                <DialogDescription>
                  Add a new deal to your pipeline.
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid gap-2">
                  <Input id="company-name" placeholder="Company Name" />
                </div>
                <div className="grid gap-2">
                  <Input
                    id="deal-value"
                    type="number"
                    placeholder="Deal Value ($)"
                  />
                </div>
              </div>
              <DialogFooter>
                <DialogClose asChild>
                  <Button variant="outline" className="rounded-full">
                    Cancel
                  </Button>
                </DialogClose>
                <Button className="rounded-full bg-indigo-600 text-white hover:bg-indigo-700">
                  Save Deal
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
      </div>

      <div className="flex-1 overflow-hidden border-t border-neutral-200 dark:border-neutral-800">
        <div className="custom-scrollbar h-full overflow-x-auto p-5 pb-10">
          <div className="flex h-full w-max min-w-full gap-5">
            {DEAL_STAGES.map((stage) => {
              const stageDeals = getDealsInStage(stage);
              const totalValue = calculateStageTotal(stage);

              return (
                <div
                  key={stage}
                  className="flex w-[280px] shrink-0 flex-col sm:w-[300px]"
                >
                  <div className="mb-4 flex items-center justify-between px-1">
                    <div className="flex items-center gap-2">
                      <h3 className="text-[10px] font-bold tracking-wider text-neutral-600 uppercase sm:text-xs dark:text-neutral-300">
                        {stage}
                      </h3>
                      <span className="flex size-4 items-center justify-center rounded border border-neutral-200 bg-neutral-100 text-[9px] font-bold text-neutral-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400">
                        {stageDeals.length}
                      </span>
                    </div>
                    <span className="text-xs font-bold text-neutral-500 dark:text-neutral-500">
                      ${(totalValue / 1000).toFixed(0)}k
                    </span>
                  </div>

                  <div className="flex-1 space-y-3 rounded-xl">
                    {stageDeals.map((deal) => (
                      <DealCard key={deal.id} deal={deal} />
                    ))}

                    {stageDeals.length === 0 && (
                      <div className="flex h-32 items-center justify-center rounded-xl border border-dashed border-neutral-200 bg-neutral-50 text-[11px] text-neutral-500 dark:border-neutral-800 dark:bg-neutral-900/20 dark:text-neutral-600">
                        No deals in this stage
                      </div>
                    )}

                    <Dialog>
                      <DialogTrigger asChild>
                        <button className="w-full cursor-pointer rounded-lg border border-dashed border-neutral-200 py-2 text-[11px] font-bold text-neutral-500 transition-colors hover:border-neutral-400 hover:text-neutral-600 dark:border-neutral-700 dark:text-neutral-500 dark:hover:border-neutral-500 dark:hover:text-neutral-400">
                          + Add Deal
                        </button>
                      </DialogTrigger>
                      <DialogContent>
                        <DialogHeader>
                          <DialogTitle>Add Deal to {stage}</DialogTitle>
                          <DialogDescription>
                            Quickly add a new deal directly into the {stage}{' '}
                            stage.
                          </DialogDescription>
                        </DialogHeader>
                        <div className="grid gap-4 py-4">
                          <div className="grid gap-2">
                            <Input
                              id="quick-company-name"
                              placeholder="Company Name"
                            />
                          </div>
                          <div className="grid gap-2">
                            <Input
                              id="quick-deal-value"
                              type="number"
                              placeholder="Estimated Value"
                            />
                          </div>
                        </div>
                        <DialogFooter>
                          <DialogClose asChild>
                            <Button
                              variant="outline"
                              className="rounded-full"
                            >
                              Cancel
                            </Button>
                          </DialogClose>
                          <Button className="rounded-full bg-indigo-600 text-white hover:bg-indigo-700">
                            Quick Add
                          </Button>
                        </DialogFooter>
                      </DialogContent>
                    </Dialog>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};
```

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

```tsx
import { useState } from 'react'
import DashboardLayout from './dashboardLayout'
import { DealsBoardView } from './dealsboardView'
import { CompanyView } from './companyView'

export default function SalesDashboardDemo() {
    const [currentView, setCurrentView] = useState("Companies");

    const renderContent = () => {
        switch (currentView) {
            case "Companies":
                return <CompanyView />;
            case "Deals Board":
                return <DealsBoardView />;
            default:
                return <CompanyView />;
        }
    };

    return (
        <DashboardLayout onNavigate={setCurrentView} currentView={currentView}>
            {renderContent()}
        </DashboardLayout>
    )
}
```

### `src/components/dashboards/sales-dashboard/types.ts`

```ts
export type DealStage = 
  | "Qualification"
  | "Discovery"
  | "Proposal"
  | "Negotiation"
  | "Closed Won";

export interface Deal {
  id: string;
  company: string;
  value: number;
  owner: {
    name: string;
    avatar: string;
  };
  stage: DealStage;
  tags: string[];
  winProbability: number;
  lastActivity: string;
  segment: string;
  activityHistory: number[];
}
```