# Erp dashboard

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

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

## Install

```bash
npx shadcn@latest add https://registry.watermelon.sh/r/erp-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-checkbox`, `@radix-ui/react-collapsible`, `@radix-ui/react-dialog`, `@radix-ui/react-label`, `@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`, `next-themes`, `recharts`
- Registry items: `badge`, `breadcrumb`, `button`, `card`, `chart`, `checkbox`, `collapsible`, `dialog`, `dropdown-menu`, `input`, `label`, `select`, `separator`, `sheet`, `sidebar`, `skeleton`, `table`, `tabs`, `tooltip`

## Files

### `src/components/dashboards/erp-dashboard/DashboardPageView.tsx`

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Mail, RefreshCcw, Calendar, Download } from "lucide-react"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import OverviewTabContent from "./components/overview-tab-content"

export default function DashboardPageView() {
    return (
        <div className='flex flex-col'>
            <Tabs defaultValue="overview" className="w-full">
                <div className="flex flex-col md:flex-row md:items-center justify-between min-h-[3.8rem] border-b px-7 max-md:p-4 py-2 md:py-0 gap-4">
                    <TabsList className="bg-neutral-100 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-800 group-data-[orientation=horizontal]/tabs:h-10 p-0 overflow-x-auto overflow-y-hidden max-w-full max-md:w-full justify-start md:justify-center">
                        <TabsTrigger value="overview" className="gap-2 px-3 data-[state=active]:bg-neutral-200/40 dark:data-[state=active]:bg-neutral-800/50! dark:data-[state=active]:border-r-neutral-800 data-[state=active]:text-neutral-900 dark:data-[state=active]:text-white border-r border-neutral-200 dark:border-neutral-800 rounded-none h-10 data-[state=active]:shadow-none! transition-colors duration-300 hover:bg-neutral-200/50 dark:hover:bg-neutral-800/50 cursor-pointer">
                            <Mail className="size-4" />
                            <span>Overview</span>
                        </TabsTrigger>
                        <TabsTrigger disabled value="order" className="gap-2 px-3 data-[state=active]:bg-neutral-200/40 dark:data-[state=active]:bg-neutral-800/50! dark:data-[state=active]:border-r-neutral-800 data-[state=active]:text-neutral-900 dark:data-[state=active]:text-white border-r border-neutral-200 dark:border-neutral-800 rounded-none h-10 data-[state=active]:shadow-none! transition-colors duration-300 hover:bg-neutral-200/50 dark:hover:bg-neutral-800/50 cursor-pointer">
                            <Mail className="size-4" />
                            <span>Order</span>
                        </TabsTrigger>
                        <TabsTrigger disabled value="sales" className="gap-2 px-3 data-[state=active]:bg-neutral-200/40 dark:data-[state=active]:bg-neutral-800/50! border-neutral-200 dark:border-neutral-800 rounded-none h-10 data-[state=active]:shadow-none! transition-colors duration-300 hover:bg-neutral-200/50 dark:hover:bg-neutral-800/50 cursor-pointer">
                            <Mail className="size-4" />
                            <span>Sales</span>
                        </TabsTrigger>
                    </TabsList>

                    <div className="flex items-center gap-2 max-md:w-full max-md:justify-end">
                        <Button variant="ghost" size="icon" className="text-neutral-500 dark:text-neutral-200 bg-neutral-100/50 dark:bg-neutral-800/50 border-t border-x-0 border-b-0 border-t-neutral-200 dark:border-t-neutral-700/80 transition-colors duration-300 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 cursor-pointer group hover:text-indigo-600 dark:hover:text-indigo-400">
                            <RefreshCcw className="size-4" />
                        </Button>

                        <Select defaultValue="monthly">
                            <SelectTrigger
                                className="h-9 w-fit bg-neutral-100/50 dark:bg-neutral-800/50 border-t border-x-0 border-b-0 border-t-neutral-200 dark:border-t-neutral-700/80 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 px-2 gap-2 text-foreground data-[state=open]:bg-neutral-200 dark:data-[state=open]:bg-neutral-800 focus:ring-0 focus:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 shadow-none! transition-colors duration-300 cursor-pointer outline-none"
                            >
                                <Calendar className="size-4" />
                                <SelectValue placeholder="Select period" />
                            </SelectTrigger>
                            <SelectContent position="popper" align="end" sideOffset={5} className="bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-neutral-100 min-w-[160px]">
                                <SelectItem value="daily" className="focus:bg-neutral-100 dark:focus:bg-neutral-800 focus:text-neutral-900 dark:focus:text-neutral-100">Daily</SelectItem>
                                <SelectItem value="weekly" className="focus:bg-neutral-100 dark:focus:bg-neutral-800 focus:text-neutral-900 dark:focus:text-neutral-100">Weekly</SelectItem>
                                <SelectItem value="monthly" className="focus:bg-neutral-100 dark:focus:bg-neutral-800 focus:text-neutral-900 dark:focus:text-neutral-100">Monthly</SelectItem>
                                <SelectItem value="yearly" className="focus:bg-neutral-100 dark:focus:bg-neutral-800 focus:text-neutral-900 dark:focus:text-neutral-100">Yearly</SelectItem>
                            </SelectContent>
                        </Select>

                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button className="
                                    flex items-center rounded-md text-white hover:bg-blue-600 dark:hover:bg-blue-600
                                    bg-blue-700
                                    shadow-[inset_2px_4px_8px_rgba(255,255,255,0.4),inset_-2px_-4px_8px_rgba(0,0,0,0.3)]
                                    hover:shadow-[inset_2px_4px_12px_rgba(255,255,255,0.5),inset_-2px_-4px_12px_rgba(0,0,0,0.4),0_4px_12px_rgba(29,78,216,0.3)]
                                    transition-colors duration-300 cursor-pointer group
                                ">
                                    <Download className="size-4" />
                                    Download
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end" className="w-40 border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 z-50">
                                <DropdownMenuItem className="cursor-pointer focus:bg-neutral-100 dark:focus:bg-neutral-800">
                                    Download CSV
                                </DropdownMenuItem>
                                <DropdownMenuItem className="cursor-pointer focus:bg-neutral-100 dark:focus:bg-neutral-800">
                                    Download Excel
                                </DropdownMenuItem>
                                <DropdownMenuItem className="cursor-pointer focus:bg-neutral-100 dark:focus:bg-neutral-800">
                                    Download PDF
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>
                </div>

                <TabsContent value="overview" className="mt-0 p-0">
                    <OverviewTabContent />
                </TabsContent>
                <TabsContent value="order" className="mt-0">
                    {/* Order content will go here */}
                </TabsContent>
                <TabsContent value="sales" className="mt-0">
                    {/* Sales content will go here */}
                </TabsContent>
            </Tabs>
        </div>
    )
}
```

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

```tsx
"use client"
import * as React from "react"
import { Bolt, ChevronDown, ChevronUp, Minus, PlusIcon, ShieldCheck, X } from "lucide-react"

import { SearchForm } from "./search-form"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter
} from "@/components/ui/dialog"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import { sidebarData } from "../data"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
  onNavigate?: (view: string) => void;
  currentView?: string;
}

export function AppSidebar({ onNavigate, currentView, ...props }: AppSidebarProps) {
  const [open, setOpen] = React.useState(true)
  const [openTeam, setOpenTeam] = React.useState(true)
  const [showSecurityCard, setShowSecurityCard] = React.useState(true)

  return (
    <Sidebar {...props}>
      <SidebarHeader className="px-0 pt-0 border-b">
        <SidebarMenu className="border-b h-18 px-2 justify-center pt-2.5">
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild className="transition-colors duration-300 cursor-pointer hover:bg-transparent">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2 group">
                  <div className="bg-blue-600 dark:bg-sidebar-primary text-white dark:text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors duration-300">
                    <Bolt className="size-4" strokeWidth={2.5} />
                  </div>
                  <span className="font-medium text-base">OceanLabs</span>
                </div>
                <div className="bg-neutral-100/50 dark:bg-neutral-800/50 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 size-7 flex justify-center items-center rounded-sm transition-colors duration-300 cursor-pointer"><SidebarTrigger className="cursor-pointer" /></div>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
        <SearchForm />
      </SidebarHeader>

      <SidebarContent className="gap-0">
        <SidebarGroup className="pb-0">
          <SidebarGroupContent >
            <Collapsible open={open} onOpenChange={setOpen}>
              <CollapsibleTrigger asChild>
                <SidebarGroupLabel className="" asChild>
                  <div className="flex items-center justify-between gap-1.5 text-neutral-500! cursor-pointer transition-colors duration-300 hover:text-neutral-800 dark:hover:text-neutral-300 group">Main Menu {open ? <ChevronDown className="size-3.5!" /> : <ChevronUp className="size-3.5!" />}</div>
                </SidebarGroupLabel>
              </CollapsibleTrigger>
              <CollapsibleContent>
                <SidebarMenu className="px-2">
                  {sidebarData.mainMenu.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton
                        asChild
                        className="h-9 rounded-sm hover:bg-neutral-200/50 dark:hover:bg-neutral-800 data-[active=true]:bg-neutral-200/50 dark:data-[active=true]:bg-neutral-800 transition-colors duration-300 cursor-pointer group"
                        isActive={currentView ? item.title === currentView : item.isActive}
                      >
                        <a
                          href={item.url}
                          onClick={(e) => {
                            if (item.isDisabled) {
                              e.preventDefault()
                              return
                            }
                            if (onNavigate) {
                              e.preventDefault()
                              onNavigate(item.title)
                            }
                          }}
                        >
                          <item.icon className="size-4" />
                          {item.title}
                        </a>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </CollapsibleContent>
            </Collapsible>
          </SidebarGroupContent>
        </SidebarGroup>
        <SidebarGroup>
          <SidebarGroupContent>
            <Collapsible open={openTeam} onOpenChange={setOpenTeam}>
              <CollapsibleTrigger asChild>
                <SidebarGroupLabel className="" asChild>
                  <div className="flex items-center justify-between gap-1.5 text-neutral-500! cursor-pointer transition-colors duration-300 hover:text-neutral-800 dark:hover:text-neutral-300 group">Team Management {openTeam ? <Minus className="size-3.5!" /> : <PlusIcon className="size-3.5!" />}</div>
                </SidebarGroupLabel>
              </CollapsibleTrigger>
              <CollapsibleContent>
                <SidebarMenu className="px-2">
                  {sidebarData.teamManagement.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton
                        asChild
                        className="h-9 rounded-sm hover:bg-neutral-200/50 dark:hover:bg-neutral-800 data-[active=true]:bg-neutral-200/50 dark:data-[active=true]:bg-neutral-800 transition-colors duration-300 cursor-pointer group"
                        isActive={currentView ? item.title === currentView : false}
                      >
                        <a
                          href={item.url}
                          onClick={(e) => {
                            if (item.isDisabled) {
                              e.preventDefault()
                              return
                            }
                            if (onNavigate) {
                              e.preventDefault()
                              onNavigate(item.title)
                            }
                          }}
                        >
                          <item.icon className="size-4" />
                          {item.title}
                        </a>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </CollapsibleContent>
            </Collapsible>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="p-4">
        {showSecurityCard && (
        <div className="relative overflow-hidden rounded-lg bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 p-4 group transition-colors duration-300 cursor-pointer">
          <div className="flex items-start justify-between mb-4">
            <div className="size-9 rounded-md bg-green-500 flex items-center justify-center shadow-[0_0_10px_rgba(34,197,94,0.5)] transition-colors duration-300">
              <ShieldCheck className="size-5 text-white" strokeWidth={2} />
            </div>
          </div>
          <Button onClick={(e) => { e.stopPropagation(); setShowSecurityCard(false); }} size="icon-xs" className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 rounded-full border-y border-y-neutral-500/40 bg-neutral-500/10 absolute top-2 right-2 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 transition-colors duration-300 cursor-pointer z-10">
            <X className="size-4!" />
          </Button>

          <h3 className="text-neutral-900 dark:text-white font-medium tracking-tight mb-1.5">Increase your security</h3>
          <p className="text-[12px] font-medium  mb-4 text-neutral-500">
            Add a secondary method of verification used during login.
          </p>
          <Dialog>
            <DialogTrigger asChild>
              <Button className="w-full h-9 py-2 bg-neutral-100/50 dark:bg-neutral-800/50 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 text-neutral-900 dark:text-white text-xs font-medium rounded-sm border border-neutral-200 dark:border-neutral-700 transition-colors duration-300 cursor-pointer shadow-sm hover:shadow-md">
                Enable 2-step verification
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px] bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800">
              <DialogHeader>
                <DialogTitle className="text-neutral-900 dark:text-neutral-100">Set up 2-step verification</DialogTitle>
                <DialogDescription className="text-neutral-500 text-sm">
                  Scan the QR code with your authenticator app to secure your account.
                </DialogDescription>
              </DialogHeader>
              <div className="flex flex-col items-center gap-4 py-4">
                <div className="size-32 bg-neutral-100 dark:bg-neutral-800 p-2 rounded-lg flex items-center justify-center border border-neutral-200 dark:border-neutral-700">
                  <div className="text-center text-xs text-neutral-400">QR Code Preview</div>
                </div>
                <div className="grid w-full items-center gap-1.5">
                  <Label htmlFor="code" className="text-neutral-700 dark:text-neutral-300">Authentication Code</Label>
                  <Input type="text" id="code" placeholder="000 000" className="h-10 bg-neutral-100/50 dark:bg-neutral-800/50 border-neutral-200 dark:border-neutral-700 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 outline-none shadow-none text-center tracking-widest text-lg text-foreground" />
                </div>
              </div>
              <DialogFooter>
                <Button type="submit" className="w-full bg-blue-600 hover:bg-blue-700 text-white border-transparent cursor-pointer transition-colors duration-300">Verify and Enable</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
        )}
      </SidebarFooter>

      <SidebarRail />
    </Sidebar>
  )
}
```

### `src/components/dashboards/erp-dashboard/components/mode-toggle.tsx`

```tsx
"use client"

import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"

export function ModeToggle() {
    const { theme, setTheme } = useTheme()

    return (
        <Button
            variant="ghost"
            size="icon-sm"
            className="h-9 w-9 rounded-md bg-neutral-100/50 dark:bg-neutral-800/50 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300 border-t border-neutral-200 dark:border-neutral-700/80 transition-colors duration-300 group cursor-pointer"
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
        >
            <Sun className="h-[1.1rem] w-[1.1rem] transition-colors duration-300 dark:hidden" />
            <Moon className="absolute h-[1.1rem] w-[1.1rem] transition-colors duration-300 hidden dark:block" />
            <span className="sr-only">Toggle theme</span>
        </Button>
    )
}
```

### `src/components/dashboards/erp-dashboard/components/overview-tab-content.tsx`

```tsx
"use client"

import { salesData, emailData, salesConfig, emailConfig, employees, stats } from "../data"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowUp, ArrowDown, Search, Download, ChevronsUpDown, EyeIcon, EllipsisVertical } from "lucide-react"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import {
    Bar,
    BarChart,
    CartesianGrid,
    XAxis,
    YAxis,
    Area,
    AreaChart,
} from "recharts"
import {
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
} from "@/components/ui/chart"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { Button } from '@/components/ui/button'
import { Checkbox } from "@/components/ui/checkbox"

const OverviewTabContent = () => {
    const cardBorderStyles = "relative before:absolute before:inset-0 before:rounded-[inherit] dark:before:border dark:before:border-neutral-800/70 dark:before:[mask-image:linear-gradient(to_bottom,black_20%,transparent_60%)] before:pointer-events-none"

    return (
        <div className='flex flex-col gap-6 px-7 max-md:px-5 py-5'>
            {/* Stats Cards */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                {stats.map((stat, index) => (
                    <Card
                        key={index}
                        className={`bg-white dark:bg-neutral-800/40 border border-neutral-200 dark:border-none shadow-none rounded-lg pt-4 pb-3 px-4 min-w-0 ${cardBorderStyles}`}
                    >
                        <CardContent className="p-5 flex flex-col gap-3.5 py-0 px-0 min-w-0">
                            <div className="text-neutral-500 text-[13px] font-medium leading-none tracking-tight wrap-break-word whitespace-normal">
                                {stat.title}
                            </div>
                            <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
                                <div className="text-neutral-900 dark:text-neutral-100 text-2xl font-semibold tracking-tight break-all whitespace-normal">
                                    {stat.value}
                                </div>
                                <div className="flex items-center gap-1.5 shrink-0">
                                    <Badge
                                        className={`
                                            rounded border-none px-1 py-0.5 text-[11px] font-medium flex items-center gap-0.5
                                            ${stat.trendType === 'up'
                                                ? 'bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/15'
                                                : 'bg-rose-500/10 text-rose-500 hover:bg-rose-500/15'}
                                        `}
                                    >
                                        {stat.trendType === 'up' ? (
                                            <ArrowUp className="size-3" strokeWidth={2.5} />
                                        ) : (
                                            <ArrowDown className="size-3" strokeWidth={2.5} />
                                        )}
                                        {stat.trend}
                                    </Badge>
                                    <span className="text-neutral-500 text-[12px] tracking-tight font-medium leading-none whitespace-nowrap">
                                        {stat.description}
                                    </span>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                ))}
            </div>

            {/* Charts Section */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 min-w-0">
                {/* Sales Performance */}
                <Card className={`bg-neutral-50/50 dark:bg-neutral-900/40 border border-neutral-200 dark:border-none py-4 px-6 shadow-none rounded-xl min-w-0 transition-colors duration-300 ${cardBorderStyles}`}>
                    <CardHeader className="p-0 flex flex-row flex-wrap items-center justify-between gap-4 space-y-0">
                        <CardTitle className="text-neutral-900 dark:text-neutral-100 text-base font-semibold whitespace-nowrap">Sales Performance</CardTitle>
                        <Select defaultValue="2w">
                            <SelectTrigger className="h-7! w-fit shrink-0 bg-neutral-100 dark:bg-neutral-800/20! border-[1.5px] border-neutral-200 dark:border-neutral-800 text-neutral-500 font-medium text-xs pl-3 pr-2 gap-1.5 rounded-full hover:bg-neutral-200/50 dark:hover:bg-neutral-800 transition-colors duration-300 cursor-pointer focus:ring-0 shadow-none outline-none focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600">
                                <SelectValue placeholder="Period" />
                            </SelectTrigger>
                            <SelectContent className="bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-neutral-100">
                                <SelectItem value="1w">1 Week</SelectItem>
                                <SelectItem value="2w">2 Weeks</SelectItem>
                                <SelectItem value="1m">1 Month</SelectItem>
                            </SelectContent>
                        </Select>
                    </CardHeader>
                    <CardContent className="p-0 min-w-0 pt-4 sm:pt-6">
                        <div className="flex overflow-x-auto items-center justify-between gap-6 mb-7 pb-2 -mx-1 px-1 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
                            {[1, 2, 3].map((i) => (
                                <div key={i} className="flex flex-col gap-1 shrink-0">
                                    <div className="flex items-center gap-1 shrink-0">
                                        <span className="text-neutral-900 dark:text-neutral-100 text-lg font-medium tracking-tight">$1.843</span>
                                        <Badge className="bg-transparent text-emerald-500 border-none px-1 py-0 h-4 text-[12px] font-medium flex items-center gap-0.5 shrink-0">
                                            <ArrowUp className="size-2.5" strokeWidth={3} />
                                            29%
                                        </Badge>
                                    </div>
                                    <span className="text-neutral-500 text-[12px] font-medium tracking-tight whitespace-nowrap">Weekly Revenue</span>
                                </div>
                            ))}
                        </div>
                        <ChartContainer config={salesConfig} className="h-[190px] w-full">
                            <BarChart data={salesData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }} barGap={-12}>
                                <defs>
                                    <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
                                        <stop offset="0%" stopColor="#4f46e5" stopOpacity={1} />
                                        <stop offset="50%" stopColor="#3b82f6" stopOpacity={1} />
                                        <stop offset="100%" stopColor="#60a5fa" stopOpacity={1} />
                                    </linearGradient>
                                    <pattern id="diagonalStripes" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45)">
                                        <line x1="0" y1="0" x2="0" y2="4" stroke="rgba(255,255,255,0.25)" strokeWidth="1.3" />
                                    </pattern>
                                </defs>
                                <CartesianGrid vertical={false} horizontal={false} strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
                                <XAxis
                                    dataKey="name"
                                    axisLine={false}
                                    tickLine={false}
                                    tick={{ fill: '#737373', fontSize: 13, fontWeight: 500 }}
                                    dy={10}
                                />
                                <YAxis hide />
                                <ChartTooltip
                                    content={<ChartTooltipContent hideLabel />}
                                    cursor={{ fill: 'var(--muted)', opacity: 0.2 }}
                                />
                                <Bar
                                    dataKey="value"
                                    fill="url(#barGradient)"
                                    radius={[3, 3, 3, 3]}
                                    barSize={12}
                                    background={{ fill: 'var(--sidebar-accent)', radius: 3 }}
                                />
                                <Bar
                                    dataKey="stripeValue"
                                    fill="url(#diagonalStripes)"
                                    radius={[3, 3, 3, 3]}
                                    barSize={12}
                                    isAnimationActive={false}
                                    tooltipType="none"
                                />
                            </BarChart>
                        </ChartContainer>
                    </CardContent>
                </Card>

                {/* Email Data Chart */}
                <Card className={`bg-neutral-50/50 dark:bg-neutral-900/40 border border-neutral-200 dark:border-none py-4 px-6 shadow-none rounded-xl transition-colors duration-300 ${cardBorderStyles}`}>
                    <CardHeader className="p-0 flex flex-col sm:flex-row items-start sm:items-center justify-between space-y-2 sm:space-y-0">
                        <CardTitle className="text-neutral-900 dark:text-neutral-100 text-base font-semibold">Email Data Chart</CardTitle>
                        <div className="flex flex-wrap items-center gap-3">
                            <div className="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800/40 border border-neutral-200 dark:border-neutral-800 px-2.5 py-1 rounded-full shrink-0 transition-colors duration-300 cursor-default">
                                <div className="size-2 rounded-full bg-blue-600 shadow-[0_0_8px_rgba(37,99,235,1)]" />
                                <span className="text-neutral-500 dark:text-neutral-400 text-[11px] font-medium whitespace-nowrap">Click Through Rate</span>
                            </div>
                            <div className="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800/40 border border-neutral-200 dark:border-neutral-800 px-2.5 py-1 rounded-full shrink-0 transition-colors duration-300 cursor-default">
                                <div className="size-2 rounded-full bg-neutral-600 shadow-[0_0_8px_rgba(113,113,122,0.5)]" />
                                <span className="text-neutral-500 dark:text-neutral-400 text-[11px] font-medium whitespace-nowrap">Open Rate</span>
                            </div>
                        </div>
                    </CardHeader>
                    <CardContent className="p-0">
                        <ChartContainer config={emailConfig} className="h-[270px] w-full">
                            <AreaChart data={emailData} margin={{ top: 20, right: 20, left: -15, bottom: 0 }}>
                                <defs>
                                    <linearGradient id="colorCtr" x1="0" y1="0" x2="0" y2="1">
                                        <stop offset="5%" stopColor="var(--color-ctr)" stopOpacity={0.3} />
                                        <stop offset="95%" stopColor="var(--color-ctr)" stopOpacity={0} />
                                    </linearGradient>
                                    <linearGradient id="colorOpen" x1="0" y1="0" x2="0" y2="1">
                                        <stop offset="5%" stopColor="var(--color-open)" stopOpacity={0.2} />
                                        <stop offset="95%" stopColor="var(--color-open)" stopOpacity={0} />
                                    </linearGradient>
                                </defs>
                                <CartesianGrid vertical={false} strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
                                <XAxis
                                    dataKey="year"
                                    axisLine={false}
                                    tickLine={false}
                                    tick={{ fill: '#737373', fontSize: 12, fontWeight: 500 }}
                                    dy={5}
                                />
                                <YAxis
                                    width={80}
                                    axisLine={false}
                                    tickLine={false}
                                    tick={{ fill: '#737373', fontSize: 12, fontWeight: 500, dx: -20 }}
                                    domain={[0, 600]}
                                    tickCount={7}
                                    tickFormatter={(val) => `${val === 0 ? '0' : val}K`}
                                />
                                <ChartTooltip content={<ChartTooltipContent />} />
                                <Area
                                    type="monotone"
                                    dataKey="ctr"
                                    stroke="var(--color-ctr)"
                                    fillOpacity={1}
                                    fill="url(#colorCtr)"
                                    strokeWidth={2}
                                />
                                <Area
                                    type="monotone"
                                    dataKey="open"
                                    stroke="var(--color-open)"
                                    fillOpacity={1}
                                    fill="url(#colorOpen)"
                                    strokeWidth={2}
                                />
                            </AreaChart>
                        </ChartContainer>
                    </CardContent>
                </Card>
            </div>

            {/* Employees Table Card */}
            <Card className={`bg-white dark:bg-neutral-900/40 border border-neutral-200 dark:border-none py-4 px-4 shadow-none rounded-xl transition-colors duration-300 ${cardBorderStyles}`}>
                <CardHeader className="p-0 flex flex-col lg:flex-row items-start lg:items-center justify-between space-y-2 lg:space-y-0">
                    <CardTitle className="text-neutral-900 dark:text-neutral-100 text-base font-semibold">All Employees</CardTitle>
                    <div className="flex flex-wrap items-center gap-3 w-full lg:w-auto">
                        <div className="relative group/search flex-1 min-w-[160px] lg:flex-none lg:w-64 transition-colors duration-300">
                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-neutral-500 group-focus-within/search:text-neutral-500 dark:group-focus-within/search:text-neutral-500 transition-colors z-10 pointer-events-none" />
                            <Input
                                placeholder="Search"
                                className="h-9! w-full bg-neutral-100 dark:bg-neutral-800! border-neutral-200 dark:border-neutral-800/50 pl-9 text-xs text-foreground placeholder:text-neutral-500 rounded-sm focus-visible:ring-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 transition-colors duration-300 shadow-none outline-none"
                            />
                        </div>
                        <div className="flex items-center gap-2 flex-wrap sm:flex-nowrap">
                            <Select defaultValue="all">
                                <SelectTrigger className="h-9 w-fit bg-neutral-100 dark:bg-neutral-800/50 border-t border-x-0 border-b-0 border-t-neutral-200 dark:border-t-neutral-700/80 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 px-2 gap-2 text-foreground data-[state=open]:bg-neutral-200 dark:data-[state=open]:bg-neutral-800 focus:ring-0 focus:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 shadow-none transition-colors duration-300 cursor-pointer outline-none">
                                    <SelectValue placeholder="All Status" />
                                </SelectTrigger>
                                <SelectContent position="popper" align="end" sideOffset={5} className="bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-neutral-100 min-w-[160px]">
                                    <SelectItem value="all">All Status</SelectItem>
                                    <SelectItem value="fulltime">Full Time</SelectItem>
                                    <SelectItem value="freelance">Freelance</SelectItem>
                                </SelectContent>
                            </Select>
                            <Select defaultValue="all">
                                <SelectTrigger className="h-9 w-fit bg-neutral-100 dark:bg-neutral-800/50 border-t border-x-0 border-b-0 border-t-neutral-200 dark:border-t-neutral-700/80 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 px-2 gap-2 text-foreground data-[state=open]:bg-neutral-200 dark:data-[state=open]:bg-neutral-800 focus:ring-0 focus:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 shadow-none transition-colors duration-300 cursor-pointer outline-none">
                                    <SelectValue placeholder="All Role" />
                                </SelectTrigger>
                                <SelectContent position="popper" align="end" sideOffset={5} className="bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-neutral-100 min-w-[160px]">
                                    <SelectItem value="all">All Role</SelectItem>
                                    <SelectItem value="designer">Designer</SelectItem>
                                    <SelectItem value="developer">Developer</SelectItem>
                                </SelectContent>
                            </Select>
                            <Separator orientation="vertical" className="hidden sm:block h-5 bg-neutral-200 dark:bg-neutral-800 mx-1 data-[orientation=vertical]:h-6" />
                            <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                    <Button className="text-neutral-600 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800/50 border-t border-x-0 border-b-0 border-t-neutral-200 dark:border-t-neutral-700/80 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 ml-auto sm:ml-0 transition-colors duration-300 cursor-pointer group shadow-none">
                                        <Download className="size-3.5" />
                                        Export
                                    </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end" className="w-40 bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 shadow-md">
                                    <DropdownMenuItem className="cursor-pointer focus:bg-neutral-100 dark:focus:bg-neutral-800">Export as CSV</DropdownMenuItem>
                                    <DropdownMenuItem className="cursor-pointer focus:bg-neutral-100 dark:focus:bg-neutral-800">Export as Excel</DropdownMenuItem>
                                    <DropdownMenuItem className="cursor-pointer focus:bg-neutral-100 dark:focus:bg-neutral-800">Export as PDF</DropdownMenuItem>
                                </DropdownMenuContent>
                            </DropdownMenu>
                        </div>
                    </div>
                </CardHeader>
                <div className="relative overflow-hidden">
                    {/* Header Background */}
                    <div className="absolute top-0 left-0 right-0 h-10 bg-neutral-100 dark:bg-neutral-800 rounded-lg pointer-events-none" />
                    <Table>
                        <TableHeader className="relative border-none">
                            <TableRow className="border-none hover:bg-transparent">
                                <TableHead className="w-12 text-center p-0 max-md:pl-2">
                                    <div className="flex justify-center items-center">
                                        <div className="relative flex items-center justify-center">
                                            <Checkbox
                                                checked="indeterminate"
                                                className="size-4 rounded border-none bg-neutral-700! data-[state=indeterminate]:bg-neutral-800/80 data-[state=indeterminate]:text-neutral-300 data-[state=indeterminate]:border-neutral-700 [&_svg]:size-3"
                                            />
                                            {/* Overwrite the default indicator if needed, but Radix supports indeterminate */}
                                        </div>
                                    </div>
                                </TableHead>
                                <TableHead className="text-neutral-400 text-xs font-semibold h-10">
                                    <div className="flex items-center justify-between gap-1.5 cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors px-1">
                                        Employee ID <ChevronsUpDown className="size-3 text-neutral-500" strokeWidth={2.5} />
                                    </div>
                                </TableHead>
                                <TableHead className="text-neutral-400 text-xs font-semibold h-10">
                                    <div className="flex items-center justify-between gap-1.5 cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors px-1">
                                        Employee name <ChevronsUpDown className="size-3 text-neutral-500" strokeWidth={2.5} />
                                    </div>
                                </TableHead>
                                <TableHead className="text-neutral-400 text-xs font-semibold h-10">
                                    <div className="flex items-center justify-between gap-1.5 cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors px-1">
                                        Email <ChevronsUpDown className="size-3 text-neutral-500" strokeWidth={2.5} />
                                    </div>
                                </TableHead>
                                <TableHead className="text-neutral-400 text-xs font-semibold h-10">
                                    <div className="flex items-center justify-between gap-1.5 cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors px-1">
                                        Role <ChevronsUpDown className="size-3 text-neutral-500" strokeWidth={2.5} />
                                    </div>
                                </TableHead>
                                <TableHead className="text-neutral-400 text-xs font-semibold h-10">
                                    <div className="flex items-center justify-between gap-1.5 cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors px-1">
                                        Departments <ChevronsUpDown className="size-3 text-neutral-500" strokeWidth={2.5} />
                                    </div>
                                </TableHead>
                                <TableHead className="text-neutral-400 text-xs font-semibold h-10">
                                    <div className="flex items-center justify-between gap-1.5 cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors px-1">
                                        Status <ChevronsUpDown className="size-3 text-neutral-500" strokeWidth={2.5} />
                                    </div>
                                </TableHead>
                                <TableHead className="text-neutral-400 text-xs font-semibold h-10 text-right pr-4">Action</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {employees.map((emp, i) => (
                                <TableRow key={i} className="border-neutral-200/50 dark:border-neutral-800/30 hover:bg-neutral-50 dark:hover:bg-neutral-800/20 transition-colors duration-300 cursor-pointer group dark:hover:border-neutral-700">
                                    <TableCell className="w-12 text-center p-0">
                                        <div className="flex justify-center items-center">
                                            <Checkbox
                                                className="size-4 rounded border-none bg-neutral-100 dark:bg-neutral-800/50 border-t! border-x-0 border-b-0 border-t-neutral-200 dark:border-t-neutral-700/80 hover:bg-neutral-200 dark:hover:bg-neutral-800 data-[state=checked]:bg-blue-600! data-[state=checked]:border-blue-600! transition-all"
                                            />
                                        </div>
                                    </TableCell>
                                    <TableCell className="text-neutral-500 dark:text-neutral-400 text-[13px] font-medium py-4">{emp.id}</TableCell>
                                    <TableCell className="py-4">
                                        <div className="flex items-center gap-2.5">
                                            <img src={emp.image} alt={emp.name} className="size-6 rounded-full object-cover border border-neutral-200 dark:border-neutral-800" />
                                            <span className="text-neutral-900 dark:text-neutral-400 text-xs font-semibold tracking-tight">{emp.name}</span>
                                        </div>
                                    </TableCell>
                                    <TableCell className="text-neutral-500 dark:text-neutral-400 text-xs py-4 font-medium">{emp.email}</TableCell>
                                    <TableCell className="text-neutral-500 dark:text-neutral-400 text-xs py-4 font-medium">{emp.role}</TableCell>
                                    <TableCell className="py-4">
                                        <Badge className="text-neutral-600 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800/50 border-t border-x-0 border-b-0 border-t-neutral-200 dark:border-t-neutral-700/80 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 h-6">
                                            {emp.department}
                                        </Badge>
                                    </TableCell>
                                    <TableCell className="py-4">
                                        <Badge
                                            className={`
                                                rounded-full border px-2 py-0.5 text-[11px] font-medium flex items-center gap-1.5 w-fit h-7
                                                ${emp.status === 'Full Time'
                                                    ? 'bg-emerald-500/10 text-emerald-500 border-emerald-500/40'
                                                    : 'bg-amber-500/10 text-amber-500 border-amber-500/40'}
                                            `}
                                        >
                                            <div className={`size-1 rounded-full ${emp.status === 'Full Time' ? 'bg-emerald-500 shadow-[0_0_5px_rgba(16,185,129,0.5)]' : 'bg-amber-500 shadow-[0_0_5px_rgba(245,158,11,0.5)]'}`} />
                                            {emp.status}
                                        </Badge>
                                    </TableCell>
                                    <TableCell className="text-right py-4 pr-1">
                                        <div className="flex items-center justify-end gap-1.5">
                                            <Dialog>
                                                <DialogTrigger asChild>
                                                    <Button variant="ghost" size="icon" className="size-8 text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800/50 border-t border-x-0 border-b-0 border-t-neutral-200 dark:border-t-neutral-700/80 hover:bg-neutral-200/30 dark:hover:bg-neutral-800 transition-colors duration-300 shadow-none cursor-pointer">
                                                        <EyeIcon className="size-4" />
                                                    </Button>
                                                </DialogTrigger>
                                                <DialogContent className="sm:max-w-[400px] bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800">
                                                    <DialogHeader>
                                                        <DialogTitle className="text-neutral-900 dark:text-neutral-100">Employee Profile</DialogTitle>
                                                        <DialogDescription className="text-neutral-500">
                                                            Detailed view of {emp.name}'s profile.
                                                        </DialogDescription>
                                                    </DialogHeader>
                                                    <div className="flex items-center gap-4 py-4">
                                                        <img src={emp.image} alt={emp.name} className="size-16 rounded-full object-cover border border-neutral-200 dark:border-neutral-800" />
                                                        <div>
                                                            <h4 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">{emp.name}</h4>
                                                            <p className="text-sm text-neutral-500 dark:text-neutral-400">{emp.email}</p>
                                                            <div className="flex items-center gap-2 mt-3">
                                                                <Badge className="text-xs bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700 border-none">{emp.role}</Badge>
                                                                <Badge className="text-xs bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700 border-none">{emp.department}</Badge>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </DialogContent>
                                            </Dialog>

                                            <DropdownMenu>
                                                <DropdownMenuTrigger asChild>
                                                    <Button variant="ghost" size="icon" className="size-8 text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800/50 border-t border-x-0 border-b-0 border-t-neutral-200 dark:border-t-neutral-700/80 hover:bg-neutral-200/30 dark:hover:bg-neutral-800 transition-colors duration-300 shadow-none cursor-pointer">
                                                        <EllipsisVertical className="size-4" />
                                                    </Button>
                                                </DropdownMenuTrigger>
                                                <DropdownMenuContent align="end" className="w-40 bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800">
                                                    <DropdownMenuItem className="cursor-pointer focus:bg-neutral-100 dark:focus:bg-neutral-800">Edit Employee</DropdownMenuItem>
                                                    <DropdownMenuItem className="cursor-pointer focus:bg-neutral-100 dark:focus:bg-neutral-800">Change Role</DropdownMenuItem>
                                                    <DropdownMenuItem className="cursor-pointer text-rose-500 focus:bg-rose-50 dark:focus:bg-rose-500/10 focus:text-rose-600 dark:focus:text-rose-400">Suspend Account</DropdownMenuItem>
                                                </DropdownMenuContent>
                                            </DropdownMenu>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </div>
            </Card>
        </div>
    )
}

export default OverviewTabContent
```

### `src/components/dashboards/erp-dashboard/components/search-form.tsx`

```tsx
import { Command, Search } from "lucide-react"

import { Label } from "@/components/ui/label"
import {
  SidebarGroup,
  SidebarGroupContent,
  SidebarInput,
} from "@/components/ui/sidebar"

export function SearchForm({ ...props }: React.ComponentProps<"form">) {
  return (
    <form {...props}>
      <SidebarGroup className="py-1 px-4">
        <SidebarGroupContent className="relative group/search transition-colors duration-300">
          <Label htmlFor="search" className="sr-only">
            Search
          </Label>
          <SidebarInput
            id="search"
            placeholder="Search"
            className="pl-9 bg-neutral-100/50 dark:bg-neutral-800! border-neutral-200 dark:border-neutral-700 text-foreground placeholder:text-neutral-500 h-9 rounded-sm  focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 outline-none shadow-none"
          />
          <Search className="pointer-events-none absolute top-1/2 left-3 size-[1.1rem] -translate-y-1/2 text-neutral-400 dark:text-neutral-500 select-none" />
          <div className="absolute right-[2.1rem] top-1/2 -translate-y-1/2 flex items-center justify-center bg-neutral-200 dark:bg-neutral-700 size-5 rounded pointer-events-none">
            <Command className="size-3 text-neutral-500 dark:text-neutral-400" />
          </div>
          <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 text-[10px] font-medium text-neutral-600 dark:text-neutral-500 bg-neutral-200 dark:bg-neutral-700 size-5 justify-center rounded pointer-events-none">
            <span className="text-xs text-neutral-500 dark:text-neutral-400">K</span>
          </div>
        </SidebarGroupContent>
      </SidebarGroup>
    </form>
  )
}
```

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

```tsx
"use client"
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbList,
} from "@/components/ui/breadcrumb"
import { Separator } from "@/components/ui/separator"
import { Button } from "@/components/ui/button"
import { Mail, Bell, UserPlus } from "lucide-react"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectSeparator,
    SelectValue,
} from "@/components/ui/select"
import { SidebarTrigger } from "@/components/ui/sidebar"
import { ModeToggle } from "./mode-toggle"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function SiteHeader() {
    return (
        <header className="flex h-18 shrink-0 items-center justify-between border-b px-7 max-md:px-5">
            <div className="flex items-center gap-2">
                <SidebarTrigger className="md:hidden" />
                <Breadcrumb>
                    <BreadcrumbList>
                        <BreadcrumbItem className="hidden md:block text-base font-medium text-neutral-900 dark:text-white">
                            Dashboard
                        </BreadcrumbItem>
                    </BreadcrumbList>
                </Breadcrumb>
            </div>

            <div className="flex items-center gap-1">
                <div className="flex items-center gap-2">
                    <ModeToggle />
                    <Button variant="ghost" size="icon-sm" className="h-9 w-9 rounded-md bg-neutral-100/50 dark:bg-neutral-800/50 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300 border-t border-neutral-200 dark:border-neutral-700/80 transition-colors duration-300 group cursor-pointer">
                        <Mail className="h-[1.1rem] w-[1.1rem]" />
                    </Button>
                    <Button variant="ghost" size="icon-sm" className="h-9 w-9 rounded-md bg-neutral-100/50 dark:bg-neutral-800/50 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300 border-t border-neutral-200 dark:border-neutral-700/80 relative transition-colors duration-300 group cursor-pointer">
                        <Bell className="h-[1.1rem] w-[1.1rem]" />
                        <span className="absolute top-2 right-2.5 h-1.5 w-1.5 rounded-full bg-rose-500 border border-neutral-100 dark:border-neutral-950" />
                    </Button>
                </div>

                <Separator
                    orientation="vertical"
                    className="mx-2 data-[orientation=vertical]:h-6"
                />

                <div className="flex items-center gap-2">
                    <Select defaultValue="profile">
                        <SelectTrigger className="h-9 w-fit bg-neutral-100/50 dark:bg-neutral-800/50 border-t border-x-0 border-b-0 border-t-neutral-200 dark:border-t-neutral-700/80 hover:bg-neutral-200/50 dark:hover:bg-neutral-800 px-2 gap-2 text-foreground data-[state=open]:bg-neutral-200 dark:data-[state=open]:bg-neutral-800 focus:ring-0 focus:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 shadow-none transition-colors duration-300 cursor-pointer outline-none">
                            <img
                                src="https://github.com/shadcn.png"
                                alt="Avatar"
                                className="h-6 w-6 rounded-md object-cover"
                            />
                            <span className="sr-only">
                                <SelectValue placeholder="Profile" />
                            </span>
                        </SelectTrigger>
                        <SelectContent position="popper" align="end" sideOffset={8} className="bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-neutral-100 min-w-[160px]">
                            <SelectItem value="profile" className="focus:bg-neutral-100 dark:focus:bg-neutral-800 focus:text-neutral-900 dark:focus:text-neutral-100 cursor-pointer">
                                My Profile
                            </SelectItem>
                            <SelectItem value="settings" className="focus:bg-neutral-100 dark:focus:bg-neutral-800 focus:text-neutral-900 dark:focus:text-neutral-100 cursor-pointer">
                                Settings
                            </SelectItem>
                            <SelectSeparator className="bg-neutral-100 dark:bg-neutral-800" />
                            <SelectItem value="logout" className="focus:bg-neutral-100 dark:focus:bg-neutral-800 focus:text-rose-600 dark:focus:text-rose-400 text-rose-500 cursor-pointer">
                                Logout
                            </SelectItem>
                        </SelectContent>
                    </Select>

                    <Dialog>
                        <DialogTrigger asChild>
                            <Button className="h-9 px-4 bg-neutral-800 dark:bg-neutral-800 hover:bg-black dark:hover:bg-neutral-700 text-white dark:text-neutral-100 text-sm font-medium rounded-md border-t border-x-0 border-b-0 border-t-neutral-700 dark:border-t-neutral-700/80 flex items-center gap-1 transition-colors duration-300 cursor-pointer group hover:shadow-md shadow-none">
                                <UserPlus className="h-4 w-4" />
                                Invite
                            </Button>
                        </DialogTrigger>
                        <DialogContent className="sm:max-w-[425px] bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800">
                            <DialogHeader>
                                <DialogTitle className="text-neutral-900 dark:text-neutral-100">Invite Members</DialogTitle>
                                <DialogDescription className="text-neutral-500">
                                    Invite a new member to your workspace. They will receive an email invitation.
                                </DialogDescription>
                            </DialogHeader>
                            <div className="grid gap-4 py-4">
                                <div className="grid gap-2">
                                    <Label htmlFor="email" className="text-neutral-700 dark:text-neutral-300">Email address</Label>
                                    <Input
                                        id="email"
                                        placeholder="user@example.com"
                                        className="bg-neutral-100/50 dark:bg-neutral-800/50 border-neutral-200 dark:border-neutral-700 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 shadow-none text-foreground outline-none"
                                    />
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="role" className="text-neutral-700 dark:text-neutral-300">Role</Label>
                                    <Select defaultValue="member">
                                        <SelectTrigger id="role" className="bg-neutral-100/50 dark:bg-neutral-800/50 border-neutral-200 dark:border-neutral-700 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-neutral-400 dark:focus-visible:border-neutral-600 shadow-none text-foreground outline-none">
                                            <SelectValue placeholder="Select a role" />
                                        </SelectTrigger>
                                        <SelectContent className="bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-neutral-100">
                                            <SelectItem value="admin">Admin</SelectItem>
                                            <SelectItem value="member">Member</SelectItem>
                                            <SelectItem value="viewer">Viewer</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                            </div>
                            <DialogFooter>
                                <Button type="submit" className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white border-transparent cursor-pointer transition-colors duration-300 shadow-none">
                                    Send Invitation
                                </Button>
                            </DialogFooter>
                        </DialogContent>
                    </Dialog>
                </div>
            </div>
        </header>
    )
}
```

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

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


export const DashboardLayout = ({ children, onNavigate, currentView }: { children: React.ReactNode; onNavigate?: (view: string) => void; currentView?: string }) => {
    return (
        <SidebarProvider>
            <AppSidebar onNavigate={onNavigate} currentView={currentView} />
            <SidebarInset>
                <SiteHeader />
                <main className="flex-1">
                    {children}
                </main>
            </SidebarInset>
        </SidebarProvider>
    )
}
```

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

```ts
import {
    type ChartConfig,
} from "@/components/ui/chart"
import { Activity, Layers, Calendar, CalendarDays, Settings, Bell, CircleHelp, BarChart3, CircleDollarSign, FileText, Users2, UserPlus2 } from "lucide-react"

export const salesData = [
    { name: "01", value: 40, stripeValue: 40 },
    { name: "02", value: 65, stripeValue: 65 },
    { name: "03", value: 35, stripeValue: 35 },
    { name: "04", value: 55, stripeValue: 55 },
    { name: "05", value: 65, stripeValue: 65 },
    { name: "06", value: 50, stripeValue: 50 },
    { name: "07", value: 30, stripeValue: 30 },
    { name: "08", value: 75, stripeValue: 75 },
    { name: "09", value: 55, stripeValue: 55 },
    { name: "10", value: 45, stripeValue: 45 },
    { name: "11", value: 35, stripeValue: 35 },
    { name: "12", value: 55, stripeValue: 55 },
    { name: "13", value: 70, stripeValue: 70 },
]

export const emailData = [
    { year: "2016", ctr: 150, open: 120 },
    { year: "2017", ctr: 220, open: 180 },
    { year: "2018", ctr: 450, open: 350 },
    { year: "2019", ctr: 520, open: 421.876 },
    { year: "2020", ctr: 480, open: 450 },
    { year: "2021", ctr: 450, open: 530 },
    { year: "2022", ctr: 420, open: 420 },
    { year: "2023", ctr: 320, open: 250 },
    { year: "2024", ctr: 280, open: 180 },
    { year: "2025", ctr: 100, open: 80 },
]

export const salesConfig = {
    value: {
        label: "Value",
        color: "hsl(221, 83%, 53%)",
    },
} satisfies ChartConfig

export const emailConfig = {
    ctr: {
        label: "Click Through Rate",
        color: "hsl(221, 83%, 53%)",
    },
    open: {
        label: "Open Rate",
        color: "hsl(240, 5%, 34%)",
    },
} satisfies ChartConfig

export const employees = [
    { id: "MRU68129", name: "John Smith", email: "johnsmith@mail.com", role: "Sr UI UX Designer", department: "Team Projects", status: "Full Time", image: "https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=100&auto=format&fit=crop" },
    { id: "MRU68129", name: "John Smith", email: "johnsmith@mail.com", role: "Sr UI UX Designer", department: "Team Projects", status: "Freelance", image: "https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=100&auto=format&fit=crop" },
    { id: "MRU68129", name: "John Smith", email: "johnsmith@mail.com", role: "Sr UI UX Designer", department: "Team Projects", status: "Full Time", image: "https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=100&auto=format&fit=crop" },
    { id: "MRU68129", name: "John Smith", email: "johnsmith@mail.com", role: "Sr UI UX Designer", department: "Team Projects", status: "Full Time", image: "https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=100&auto=format&fit=crop" },
]

export const stats = [
    {
        title: "Payrolls Cost",
        value: "$16.500",
        trend: "29%",
        description: "Last Month",
        trendType: "up",
    },
    {
        title: "Total Expense",
        value: "$3.512",
        trend: "0.1%",
        description: "Last Month",
        trendType: "up",
    },
    {
        title: "Pending Payments",
        value: "$3.762",
        trend: "29%",
        description: "Employees",
        trendType: "down",
    },
    {
        title: "Total Payrolls",
        value: "120",
        trend: "10",
        description: "New Employees",
        trendType: "up",
    },
]

export const sidebarData = {
    mainMenu: [
        {
            title: "Dashboard",
            url: "/dashboard",
            icon: Activity,
            isActive: true,
        },
        {
            title: "Projects",
            url: "#",
            icon: Layers,
            isDisabled: true,
        },
        {
            title: "Calendar",
            url: "#",
            icon: Calendar,
            isDisabled: true,
        },
        {
            title: "Leave Management",
            url: "#",
            icon: CalendarDays,
            isDisabled: true,
        },
        {
            title: "Settings",
            url: "#",
            icon: Settings,
            isDisabled: true,
        },
        {
            title: "Notifications",
            url: "#",
            icon: Bell,
            isDisabled: true,
        },
        {
            title: "Help Center",
            url: "#",
            icon: CircleHelp,
            isDisabled: true,
        },
    ],
    teamManagement: [
        {
            title: "Performance",
            url: "#",
            icon: BarChart3,
            isDisabled: true,
        },
        {
            title: "Payrolls",
            url: "#",
            icon: CircleDollarSign,
            isDisabled: true,
        },
        {
            title: "Invoices",
            url: "#",
            icon: FileText,
            isDisabled: true,
        },
        {
            title: "Employees",
            url: "#",
            icon: Users2,
            isDisabled: true,
        },
        {
            title: "Recruitment & Hiring",
            url: "#",
            icon: UserPlus2,
            isDisabled: true,
        },
    ],
}
```

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

```tsx
"use client";

import { useState } from "react";
import { DashboardLayout } from "./dashboardLayout";
import DashboardPageView from "./DashboardPageView";

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

    const renderContent = () => {
        switch (currentView) {
            case "Dashboard":
                return <DashboardPageView />;
            default:
                return <DashboardPageView />;
        }
    };

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