reui-blocks/blocks/dashboard8.tsx

"use client";

import {
  ArrowUpDown,
  BarChart3,
  Bell,
  Box,
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
  ChevronsUpDown,
  ClipboardList,
  Download,
  Filter,
  Globe,
  Grid3x3,
  HelpCircle,
  LayoutDashboard,
  LogOut,
  MessageSquare,
  Minus,
  Package,
  RotateCcw,
  Search,
  Settings,
  TrendingDown,
  TrendingUp,
  Truck,
  User,
  Users,
  Wallet,
  X,
} from "lucide-react";
import * as React from "react";
import type { TooltipProps } from "recharts";
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  Pie,
  PieChart,
  PolarAngleAxis,
  PolarGrid,
  Radar,
  RadarChart,
  Sector,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import type { PieSectorDataItem } from "recharts/types/polar/Pie";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Tooltip as ShadTooltip,
  TooltipContent as ShadTooltipContent,
  TooltipProvider as ShadTooltipProvider,
  TooltipTrigger as ShadTooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

type NavItem = {
  label: string;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  href: string;
  isActive?: boolean;
  children?: NavItem[];
};

type NavGroup = {
  title: string;
  items: NavItem[];
  defaultOpen?: boolean;
};

type UserData = {
  name: string;
  email: string;
  avatar: string;
};

type SidebarData = {
  logo: {
    src: string;
    alt: string;
    title: string;
    description: string;
  };
  navGroups: NavGroup[];
  footerGroup: NavGroup;
  user?: UserData;
};

type InvoicePriority = "High" | "Medium" | "Low";
type InvoiceStatus = "Paid" | "Pending" | "Overdue" | "Draft";

type Invoice = {
  id: string;
  invoiceId: string;
  customer: string;
  customerInitials: string;
  date: string;
  amount: number;
  priority: InvoicePriority;
  status: InvoiceStatus;
};

type InvoiceSortKey = "customer" | "invoiceId" | "date" | "amount";

type RichMetricStatItem = {
  title: string;
  value: number;
  trendValue: number;
  footerDelta: number;
  footerSubtextCount: number;
};

const currencyFormatter = new Intl.NumberFormat("fa-IR", {
  style: "currency",
  currency: "IRR",
});

const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
  style: "currency",
  currency: "IRR",
  notation: "compact",
  maximumFractionDigits: 0,
});

const compactCurrencyOneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
  style: "currency",
  currency: "IRR",
  notation: "compact",
  maximumFractionDigits: 1,
});

const invoiceDateFormatter = new Intl.DateTimeFormat("fa-IR", {
  year: "numeric",
  month: "short",
  day: "numeric",
});
const numberFormatter = new Intl.NumberFormat("fa-IR");

const weekdayFormatter = new Intl.DateTimeFormat("fa-IR", { weekday: "short" });
const monthFormatter = new Intl.DateTimeFormat("fa-IR", { month: "short" });
const dashboardRangeFormatter = new Intl.DateTimeFormat("fa-IR", {
  month: "short",
  day: "numeric",
  year: "numeric",
});
const dashboardRangeStart = new Date(2025, 0, 1);
const dashboardRangeEnd = new Date(2025, 0, 31);
const dashboardDateRangeLabel =
  typeof dashboardRangeFormatter.formatRange === "function"
    ? dashboardRangeFormatter.formatRange(
      dashboardRangeStart,
      dashboardRangeEnd,
    )
    : `${dashboardRangeFormatter.format(
      dashboardRangeStart,
    )} – ${dashboardRangeFormatter.format(dashboardRangeEnd)}`;

const invoiceStatusLabels: Record<InvoiceStatus, string> = {
  Paid: "پرداخت‌شده",
  Pending: "در انتظار",
  Overdue: "سررسید گذشته",
  Draft: "پیش‌نویس",
};

const invoicePriorityLabels: Record<InvoicePriority, string> = {
  High: "بالا",
  Medium: "متوسط",
  Low: "پایین",
};

const mixBase = "var(--background)";

const palette = {
  primary: "var(--primary)",
  secondary: {
    light: `color-mix(in oklch, var(--primary) 75%, ${mixBase})`,
    dark: `color-mix(in oklch, var(--primary) 85%, ${mixBase})`,
  },
  tertiary: {
    light: `color-mix(in oklch, var(--primary) 55%, ${mixBase})`,
    dark: `color-mix(in oklch, var(--primary) 65%, ${mixBase})`,
  },
  quaternary: {
    light: `color-mix(in oklch, var(--primary) 40%, ${mixBase})`,
    dark: `color-mix(in oklch, var(--primary) 45%, ${mixBase})`,
  },
};

const sidebarData: SidebarData = {
  logo: {
    src: "/block-media/shadcnblocks/block/logos/NovaSales-logo.svg",
    alt: "فروشگاه آکمه",
    title: "ری یو آی Store",
    description: "فروشگاه آنلاین",
  },
  navGroups: [
    {
      title: "اصلی",
      defaultOpen: true,
      items: [
        {
          label: "داشبورد",
          icon: LayoutDashboard,
          href: "#",
          isActive: true,
        },
        { label: "سفارش‌ها", icon: ClipboardList, href: "#" },
        { label: "مرجوعی‌ها", icon: RotateCcw, href: "#" },
      ],
    },
    {
      title: "کاتالوگ",
      defaultOpen: true,
      items: [
        {
          label: "محصولات",
          icon: Box,
          href: "#",
          children: [
            { label: "همه محصولات", icon: Package, href: "#" },
            { label: "دسته‌بندی‌ها", icon: Package, href: "#" },
            { label: "موجودی", icon: Package, href: "#" },
          ],
        },
        { label: "ارسال", icon: Truck, href: "#" },
      ],
    },
    {
      title: "مشتریان",
      defaultOpen: false,
      items: [
        { label: "همه مشتریان", icon: Users, href: "#" },
        { label: "پیام‌ها", icon: MessageSquare, href: "#" },
      ],
    },
    {
      title: "تحلیل فروش",
      defaultOpen: false,
      items: [
        { label: "نمای کلی", icon: Globe, href: "#" },
        { label: "گزارش‌ها", icon: BarChart3, href: "#" },
        { label: "امور مالی", icon: Wallet, href: "#" },
      ],
    },
  ],
  footerGroup: {
    title: "تنظیمات",
    items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
  },
  user: {
    name: "علی رضایی",
    email: "john@acme.store",
    avatar:
      "/block-media/shadcnblocks/block/avatar-6.webp",
  },
};

const richMetricStats: RichMetricStatItem[] = [
  {
    title: "فروش حضوری",
    value: 7820.75,
    trendValue: 4.3,
    footerDelta: 322.5,
    footerSubtextCount: 5000,
  },
  {
    title: "فروش آنلاین",
    value: 985_937.45,
    trendValue: 12.5,
    footerDelta: 109_500,
    footerSubtextCount: 21_000,
  },
  {
    title: "عمده‌فروشی",
    value: 124_650,
    trendValue: 6.8,
    footerDelta: 7_935,
    footerSubtextCount: 890,
  },
  {
    title: "مرجوعی‌ها",
    value: 15_503,
    trendValue: -3.1,
    footerDelta: -498,
    footerSubtextCount: 6000,
  },
];

const weeklyRevenueData = [
  {
    day: weekdayFormatter.format(new Date(2025, 0, 6)),
    revenue: 1200,
    expenses: 800,
  },
  {
    day: weekdayFormatter.format(new Date(2025, 0, 7)),
    revenue: 1500,
    expenses: 600,
  },
  {
    day: weekdayFormatter.format(new Date(2025, 0, 8)),
    revenue: 1800,
    expenses: 1100,
  },
  {
    day: weekdayFormatter.format(new Date(2025, 0, 9)),
    revenue: 1100,
    expenses: 900,
  },
  {
    day: weekdayFormatter.format(new Date(2025, 0, 10)),
    revenue: 1600,
    expenses: 1200,
  },
  {
    day: weekdayFormatter.format(new Date(2025, 0, 11)),
    revenue: 800,
    expenses: 400,
  },
  {
    day: weekdayFormatter.format(new Date(2025, 0, 12)),
    revenue: 900,
    expenses: 500,
  },
];

const revenueChartConfig = {
  revenue: { label: "درآمد", color: palette.primary },
  expenses: { label: "هزینه", theme: palette.secondary },
} satisfies ChartConfig;

const monthLabel = (monthIndex: number) =>
  monthFormatter.format(new Date(2025, monthIndex, 1));

const salesPipelineData: Record<
  string,
  { week: string; month: string; orders: number; sales: number }[]
> = {
  q1: [
    { week: "W1", month: monthLabel(0), orders: 220, sales: 5100 },
    { week: "W2", month: monthLabel(0), orders: 480, sales: 11200 },
    { week: "W3", month: monthLabel(0), orders: 390, sales: 9400 },
    { week: "W4", month: monthLabel(0), orders: 150, sales: 3600 },
    { week: "W5", month: monthLabel(1), orders: 310, sales: 7400 },
    { week: "W6", month: monthLabel(1), orders: 540, sales: 13100 },
    { week: "W7", month: monthLabel(1), orders: 460, sales: 10800 },
    { week: "W8", month: monthLabel(1), orders: 200, sales: 4700 },
    { week: "W9", month: monthLabel(2), orders: 130, sales: 3100 },
    { week: "W10", month: monthLabel(2), orders: 420, sales: 10200 },
    { week: "W11", month: monthLabel(2), orders: 510, sales: 12400 },
    { week: "W12", month: monthLabel(2), orders: 350, sales: 8500 },
  ],
  q2: [
    { week: "W1", month: monthLabel(3), orders: 410, sales: 9800 },
    { week: "W2", month: monthLabel(3), orders: 280, sales: 6700 },
    { week: "W3", month: monthLabel(3), orders: 120, sales: 2900 },
    { week: "W4", month: monthLabel(3), orders: 350, sales: 8400 },
    { week: "W5", month: monthLabel(4), orders: 520, sales: 12600 },
    { week: "W6", month: monthLabel(4), orders: 470, sales: 11300 },
    { week: "W7", month: monthLabel(4), orders: 190, sales: 4500 },
    { week: "W8", month: monthLabel(4), orders: 100, sales: 2400 },
    { week: "W9", month: monthLabel(5), orders: 330, sales: 7900 },
    { week: "W10", month: monthLabel(5), orders: 490, sales: 11800 },
    { week: "W11", month: monthLabel(5), orders: 540, sales: 13000 },
    { week: "W12", month: monthLabel(5), orders: 260, sales: 6200 },
  ],
  q3: [
    { week: "W1", month: monthLabel(6), orders: 180, sales: 4200 },
    { week: "W2", month: monthLabel(6), orders: 520, sales: 12800 },
    { week: "W3", month: monthLabel(6), orders: 480, sales: 11500 },
    { week: "W4", month: monthLabel(6), orders: 120, sales: 2800 },
    { week: "W5", month: monthLabel(7), orders: 90, sales: 2100 },
    { week: "W6", month: monthLabel(7), orders: 450, sales: 10500 },
    { week: "W7", month: monthLabel(7), orders: 510, sales: 12200 },
    { week: "W8", month: monthLabel(7), orders: 480, sales: 11000 },
    { week: "W9", month: monthLabel(8), orders: 200, sales: 4800 },
    { week: "W10", month: monthLabel(8), orders: 150, sales: 3500 },
    { week: "W11", month: monthLabel(8), orders: 380, sales: 9200 },
    { week: "W12", month: monthLabel(8), orders: 420, sales: 10100 },
  ],
  q4: [
    { week: "W1", month: monthLabel(9), orders: 300, sales: 7200 },
    { week: "W2", month: monthLabel(9), orders: 160, sales: 3800 },
    { week: "W3", month: monthLabel(9), orders: 440, sales: 10600 },
    { week: "W4", month: monthLabel(9), orders: 530, sales: 12900 },
    { week: "W5", month: monthLabel(10), orders: 380, sales: 9100 },
    { week: "W6", month: monthLabel(10), orders: 140, sales: 3400 },
    { week: "W7", month: monthLabel(10), orders: 250, sales: 6000 },
    { week: "W8", month: monthLabel(10), orders: 500, sales: 12100 },
    { week: "W9", month: monthLabel(11), orders: 550, sales: 13300 },
    { week: "W10", month: monthLabel(11), orders: 470, sales: 11400 },
    { week: "W11", month: monthLabel(11), orders: 210, sales: 5000 },
    { week: "W12", month: monthLabel(11), orders: 340, sales: 8200 },
  ],
};

const pipelineOrdersConfig = {
  orders: { label: "سفارش‌ها", color: palette.primary },
} satisfies ChartConfig;

const pipelineSalesConfig = {
  sales: { label: "فروش", theme: palette.tertiary },
} satisfies ChartConfig;

const incomeCategoryData = [
  { category: "الکترونیک", value: 8200 },
  { category: "پوشاک", value: 5400 },
  { category: "خانه و باغ", value: 3800 },
  { category: "ورزشی", value: 4100 },
  { category: "زیبایی", value: 2900 },
];

const radarChartConfig = {
  value: { label: "فروش", color: palette.primary },
} satisfies ChartConfig;

type HeatmapCell = {
  value: number;
  isCurrentWeek: boolean;
};

type TrafficSource = {
  name: string;
  total: string;
  weeks: HeatmapCell[];
};

const trafficSourcesData: TrafficSource[] = [
  {
    name: "",
    total: "6k",
    weeks: [
      { value: 0, isCurrentWeek: false },
      { value: 0, isCurrentWeek: false },
      { value: 0, isCurrentWeek: false },
      { value: 0, isCurrentWeek: false },
    ],
  },
  {
    name: "تبلیغات گوگل",
    total: "5k",
    weeks: [
      { value: 0.5, isCurrentWeek: false },
      { value: 0.95, isCurrentWeek: true },
      { value: 0.2, isCurrentWeek: false },
      { value: 0.55, isCurrentWeek: false },
    ],
  },
  {
    name: "فیسبوک",
    total: "4k",
    weeks: [
      { value: 0.25, isCurrentWeek: false },
      { value: 0.6, isCurrentWeek: false },
      { value: 0.15, isCurrentWeek: false },
      { value: 0.5, isCurrentWeek: false },
    ],
  },
  {
    name: "ارگانیک",
    total: "2k",
    weeks: [
      { value: 0.2, isCurrentWeek: false },
      { value: 0.9, isCurrentWeek: true },
      { value: 0.1, isCurrentWeek: false },
      { value: 0.15, isCurrentWeek: false },
    ],
  },
  {
    name: "ایمیل",
    total: "3k",
    weeks: [
      { value: 0.45, isCurrentWeek: false },
      { value: 0.95, isCurrentWeek: true },
      { value: 0.85, isCurrentWeek: true },
      { value: 0.2, isCurrentWeek: false },
    ],
  },
  {
    name: "مستقیم",
    total: "4.5k",
    weeks: [
      { value: 0.4, isCurrentWeek: false },
      { value: 0.9, isCurrentWeek: true },
      { value: 0.8, isCurrentWeek: true },
      { value: 0.25, isCurrentWeek: false },
    ],
  },
];

const weekLabels = ["هفته ۱", "هفته ۲", "هفته ۳", "هفته ۴"];

const orderStatIRRata = [
  { key: "fulfilled", label: "تکمیل‌شده", value: 3200 },
  { key: "pending", label: "در انتظار", value: 850 },
];

const orderStatusChartConfig = {
  fulfilled: { label: "تکمیل‌شده", color: palette.primary },
  pending: { label: "در انتظار", theme: palette.tertiary },
} satisfies ChartConfig;

const invoiceStatuses: InvoiceStatus[] = [
  "Paid",
  "Pending",
  "Overdue",
  "Draft",
];

const INVOICE_PAGE_SIZE_OPTIONS = [5, 10, 20];

const invoices: Invoice[] = [
  {
    id: "1",
    invoiceId: "INV-00001",
    customer: "James Brown",
    customerInitials: "JB",
    date: "2025-01-05",
    amount: 1250.0,
    priority: "High",
    status: "Paid",
  },
  {
    id: "2",
    invoiceId: "INV-00002",
    customer: "Sarah Miller",
    customerInitials: "SM",
    date: "2025-01-08",
    amount: 3420.5,
    priority: "Medium",
    status: "Pending",
  },
  {
    id: "3",
    invoiceId: "INV-00003",
    customer: "Michael Chen",
    customerInitials: "MC",
    date: "2025-01-12",
    amount: 890.0,
    priority: "Low",
    status: "Paid",
  },
  {
    id: "4",
    invoiceId: "INV-00004",
    customer: "Emily Davis",
    customerInitials: "ED",
    date: "2025-01-15",
    amount: 4750.0,
    priority: "High",
    status: "Overdue",
  },
  {
    id: "5",
    invoiceId: "INV-00005",
    customer: "Robert Wilson",
    customerInitials: "RW",
    date: "2025-01-18",
    amount: 567.25,
    priority: "Low",
    status: "Draft",
  },
  {
    id: "6",
    invoiceId: "INV-00006",
    customer: "Lisa Anderson",
    customerInitials: "LA",
    date: "2025-01-22",
    amount: 2100.0,
    priority: "Medium",
    status: "Paid",
  },
  {
    id: "7",
    invoiceId: "INV-00007",
    customer: "David Martinez",
    customerInitials: "DM",
    date: "2025-02-01",
    amount: 1875.75,
    priority: "High",
    status: "Pending",
  },
  {
    id: "8",
    invoiceId: "INV-00008",
    customer: "Jennifer Taylor",
    customerInitials: "JT",
    date: "2025-02-05",
    amount: 45.0,
    priority: "Low",
    status: "Paid",
  },
  {
    id: "9",
    invoiceId: "INV-00009",
    customer: "Chris Thompson",
    customerInitials: "CT",
    date: "2025-02-10",
    amount: 3200.0,
    priority: "Medium",
    status: "Overdue",
  },
  {
    id: "10",
    invoiceId: "INV-00010",
    customer: "Amanda White",
    customerInitials: "AW",
    date: "2025-02-14",
    amount: 980.5,
    priority: "High",
    status: "Pending",
  },
  {
    id: "11",
    invoiceId: "INV-00011",
    customer: "Kevin Harris",
    customerInitials: "KH",
    date: "2025-02-18",
    amount: 4200.0,
    priority: "Medium",
    status: "Paid",
  },
  {
    id: "12",
    invoiceId: "INV-00012",
    customer: "Rachel Clark",
    customerInitials: "RC",
    date: "2025-02-22",
    amount: 1560.0,
    priority: "Low",
    status: "Draft",
  },
  {
    id: "13",
    invoiceId: "INV-00013",
    customer: "Thomas Lewis",
    customerInitials: "TL",
    date: "2025-03-01",
    amount: 2890.0,
    priority: "High",
    status: "Overdue",
  },
  {
    id: "14",
    invoiceId: "INV-00014",
    customer: "Maria Robinson",
    customerInitials: "MR",
    date: "2025-03-05",
    amount: 725.0,
    priority: "Low",
    status: "Paid",
  },
  {
    id: "15",
    invoiceId: "INV-00015",
    customer: "Daniel Walker",
    customerInitials: "DW",
    date: "2025-03-10",
    amount: 5000.0,
    priority: "High",
    status: "Pending",
  },
  {
    id: "16",
    invoiceId: "INV-00016",
    customer: "Sophie Hall",
    customerInitials: "SH",
    date: "2025-03-14",
    amount: 1340.0,
    priority: "Medium",
    status: "Paid",
  },
  {
    id: "17",
    invoiceId: "INV-00017",
    customer: "Nathan Young",
    customerInitials: "NY",
    date: "2025-03-18",
    amount: 2675.5,
    priority: "Medium",
    status: "Draft",
  },
  {
    id: "18",
    invoiceId: "INV-00018",
    customer: "Olivia King",
    customerInitials: "OK",
    date: "2025-03-22",
    amount: 460.0,
    priority: "Low",
    status: "Pending",
  },
];

const badgeClassName =
  "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset";

const invoiceStatusStyles: Record<InvoiceStatus, string> = {
  Paid: "ring-emerald-500/30 text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10",
  Pending:
    "ring-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10",
  Overdue:
    "ring-red-500/30 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10",
  Draft:
    "ring-zinc-500/30 text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-500/10",
};

const invoicePriorityStyles: Record<InvoicePriority, string> = {
  High: "ring-red-500/30 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10",
  Medium:
    "ring-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10",
  Low: "ring-zinc-500/30 text-zinc-600 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-500/10",
};

const SidebarLogo = ({ logo }: { logo: SidebarData["logo"] }) => {
  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton size="lg" tooltip={logo.title}>
          <div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
            <img
              src={logo.src}
              alt={logo.alt}
              width={24}
              height={24}
              className="size-6 text-primary-foreground invert dark:invert-0"
            />
          </div>
          <div className="flex flex-col gap-0.5 leading-none">
            <span className="font-medium">{logo.title}</span>
            <span className="text-xs text-muted-foreground">
              {logo.description}
            </span>
          </div>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  );
};

const NavMenuItem = ({ item }: { item: NavItem }) => {
  const Icon = item.icon;
  const hasChildren = item.children && item.children.length > 0;

  if (!hasChildren) {
    return (
      <SidebarMenuItem>
        <SidebarMenuButton
          asChild
          isActive={item.isActive}
          tooltip={item.label}
        >
          <a href={item.href}>
            <Icon className="size-4" aria-hidden="true" />
            <span>{item.label}</span>
          </a>
        </SidebarMenuButton>
      </SidebarMenuItem>
    );
  }

  return (
    <Collapsible asChild defaultOpen className="group/collapsible">
      <SidebarMenuItem>
        <CollapsibleTrigger asChild>
          <SidebarMenuButton isActive={item.isActive} tooltip={item.label}>
            <Icon className="size-4" aria-hidden="true" />
            <span>{item.label}</span>
            <ChevronRight
              className="ms-auto size-4 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180"
              aria-hidden="true"
            />
          </SidebarMenuButton>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <SidebarMenuSub>
            {item.children!.map((child) => (
              <SidebarMenuSubItem key={child.label}>
                <SidebarMenuSubButton asChild isActive={child.isActive}>
                  <a href={child.href}>{child.label}</a>
                </SidebarMenuSubButton>
              </SidebarMenuSubItem>
            ))}
          </SidebarMenuSub>
        </CollapsibleContent>
      </SidebarMenuItem>
    </Collapsible>
  );
};

const NavUser = ({ user }: { user: UserData }) => {
  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
            >
              <Avatar className="size-8 rounded-lg">
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback className="rounded-lg">
                  {user.name
                    .split(" ")
                    .map((n) => n[0])
                    .join("")}
                </AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-start text-sm leading-tight">
                <span className="truncate font-medium">{user.name}</span>
                <span className="truncate text-xs text-muted-foreground">
                  {user.email}
                </span>
              </div>
              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
            side="bottom"
            align="end"
            sideOffset={4}
          >
            <DropdownMenuLabel className="p-0 font-normal">
              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
                <Avatar className="size-8 rounded-lg">
                  <AvatarImage src={user.avatar} alt={user.name} />
                  <AvatarFallback className="rounded-lg">
                    {user.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  </AvatarFallback>
                </Avatar>
                <div className="grid flex-1 text-start text-sm leading-tight">
                  <span className="truncate font-medium">{user.name}</span>
                  <span className="truncate text-xs text-muted-foreground">
                    {user.email}
                  </span>
                </div>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <User className="me-2 size-4" aria-hidden="true" />
              حساب کاربری
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <LogOut className="me-2 size-4" aria-hidden="true" />
              خروج
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
};

const AppSidebar = ({ ...props }: React.ComponentProps<typeof Sidebar>) => {
  return (
    <Sidebar side="right" variant="inset" collapsible="icon" {...props}>
      <SidebarHeader>
        <div className="flex items-center gap-2 group-data-[collapsible=icon]:flex-col">
          <SidebarLogo logo={sidebarData.logo} />
          <SidebarTrigger className="ms-auto group-data-[collapsible=icon]:ms-0" />
        </div>
      </SidebarHeader>
      <SidebarContent>
        {sidebarData.navGroups.map((group) => (
          <SidebarGroup key={group.title}>
            <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {group.items.map((item) => (
                  <NavMenuItem key={item.label} item={item} />
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        ))}
      </SidebarContent>
      <SidebarFooter>
        {sidebarData.user && <NavUser user={sidebarData.user} />}
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
};

const DashboardHeader = () => {
  return (
    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
      <div className="flex flex-col gap-0.5">
        <h1 className="text-base font-medium text-pretty">
          نمای کلی داشبورد
        </h1>
        <p className="hidden text-xs text-muted-foreground sm:block">
          خلاصه‌ای از خریدها، فروش‌ها و سایر شاخص‌ها
        </p>
      </div>

      <div className="ms-auto flex items-center gap-2">
        <span className="hidden text-xs text-muted-foreground lg:inline">
          {dashboardDateRangeLabel}
        </span>
        <Button
          variant="outline"
          size="sm"
          className="h-8 gap-1.5 text-xs"
          aria-label="همه پلتفرم‌ها"
        >
          <Globe className="size-3.5" aria-hidden="true" />
          <span className="hidden sm:inline">همه پلتفرم‌ها</span>
        </Button>
        <Button
          variant="outline"
          size="sm"
          className="h-8 gap-1.5 text-xs"
          aria-label="همه محصولات"
        >
          <span className="hidden sm:inline">همه محصولات</span>
        </Button>
        <Button
          variant="outline"
          size="sm"
          className="h-8 gap-1.5 text-xs"
          aria-label="خروجی"
        >
          <Download className="size-3.5" aria-hidden="true" />
          <span className="hidden sm:inline">خروجی</span>
        </Button>
        <Button
          variant="outline"
          size="icon"
          className="size-8"
          aria-label="اعلان‌ها"
        >
          <Bell className="size-4" aria-hidden="true" />
        </Button>
        <Button
          variant="outline"
          size="icon"
          className="size-8"
          aria-label="راهنما"
        >
          <HelpCircle className="size-4" aria-hidden="true" />
        </Button>
      </div>
    </header>
  );
};

const AccountingStatsCards = () => {
  return (
    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
      {richMetricStats.map((stat) => {
        const isPositive = stat.trendValue > 0;
        const isNeutral = stat.trendValue === 0;

        const Icon = isNeutral ? Minus : isPositive ? TrendingUp : TrendingDown;

        const deltaPrefix =
          stat.footerDelta > 0 ? "+" : stat.footerDelta < 0 ? "-" : "";
        const footerLabel = `${deltaPrefix}${currencyFormatter.format(
          Math.abs(stat.footerDelta),
        )} نسبت به ماه قبل`;
        const footerSubtext = `بر اساس ${numberFormatter.format(
          stat.footerSubtextCount,
        )} سفارش`;

        return (
          <Card key={stat.title} className="@container/card shadow-none">
            <CardHeader>
              <CardDescription className="font-medium">
                {stat.title}
              </CardDescription>
              <CardTitle className="text-xl font-bold @[600px]/card:text-xl @[800px]/card:text-2xll">
                {currencyFormatter.format(stat.value)}
              </CardTitle>
            </CardHeader>

            <CardFooter className="flex-col items-start gap-1 text-sm">
              <div className="flex min-w-0 items-center gap-1.5 truncate font-medium">
                <span
                  className={
                    isNeutral
                      ? ""
                      : isPositive
                        ? "text-success"
                        : "text-destructive"
                  }
                >
                  {footerLabel}
                </span>
                <Icon
                  className={cn(
                    "size-3.5 shrink-0",
                    isNeutral
                      ? "text-muted-foreground"
                      : isPositive
                        ? "text-success"
                        : "text-destructive",
                  )}
                  aria-hidden="true"
                />
              </div>
              <div className="text-xs text-muted-foreground">
                {footerSubtext}
              </div>
            </CardFooter>
          </Card>
        );
      })}
    </div>
  );
};

const RevenueChartTooltip = ({
  active,
  payload,
  label,
}: any) => {
  if (!active || !payload?.length) return null;

  const revenue = payload.find((p: any) => p.dataKey === "revenue")?.value ?? 0;
  const expenses = payload.find((p: any) => p.dataKey === "expenses")?.value ?? 0;
  const total = Number(revenue) + Number(expenses);

  return (
    <div className="rounded-lg border border-border bg-popover p-2 shadow-lg sm:p-3">
      <p className="mb-1.5 text-xs font-medium text-foreground sm:mb-2 sm:text-sm">
        {label}
      </p>
      <div className="space-y-1 sm:space-y-1.5">
        <div className="flex items-center gap-1.5 sm:gap-2">
          <div
            className="size-2 rounded-full sm:size-2.5"
            style={{ backgroundColor: "var(--color-revenue)" }}
          />
          <span className="text-[10px] text-muted-foreground sm:text-sm">
            درآمد:
          </span>
          <span className="text-[10px] font-medium text-foreground sm:text-sm">
            {currencyFormatter.format(Number(revenue))}
          </span>
        </div>
        <div className="flex items-center gap-1.5 sm:gap-2">
          <div
            className="size-2 rounded-full sm:size-2.5"
            style={{ backgroundColor: "var(--color-expenses)" }}
          />
          <span className="text-[10px] text-muted-foreground sm:text-sm">
            هزینه:
          </span>
          <span className="text-[10px] font-medium text-foreground sm:text-sm">
            {currencyFormatter.format(Number(expenses))}
          </span>
        </div>
        <div className="mt-1 border-t border-border pt-1">
          <span className="text-[10px] font-medium text-foreground sm:text-xs">
            مجموع: {currencyFormatter.format(total)}
          </span>
        </div>
      </div>
    </div>
  );
};

const RevenueChart = () => {
  const totalRevenue = weeklyRevenueData.reduce((sum, d) => sum + d.revenue, 0);

  return (
    <div className="flex min-w-0 flex-1 flex-col rounded-xl border bg-card">
      <div className="flex h-14 items-center justify-between border-b px-4 sm:px-5">
        <div className="flex items-center gap-2.5">
          <Button
            variant="outline"
            size="icon"
            className="size-7 sm:size-8"
            aria-label="درآمد"
          >
            <BarChart3
              className="size-4 text-muted-foreground sm:size-[18px]"
              aria-hidden="true"
            />
          </Button>
          <h2 className="text-sm font-medium text-pretty sm:text-base">
            درآمد
          </h2>
        </div>
        <div className="flex items-center gap-3 sm:gap-5">
          <div className="flex items-center gap-1.5">
            <div
              className="size-2 rounded-full sm:size-2.5"
              style={{ backgroundColor: palette.primary }}
            />
            <span className="text-[10px] text-muted-foreground sm:text-xs">
              درآمد
            </span>
          </div>
          <div className="flex items-center gap-1.5">
            <div
              className="size-2 rounded-full sm:size-2.5"
              style={{ backgroundColor: palette.secondary.light }}
            />
            <span className="text-[10px] text-muted-foreground sm:text-xs">
              هزینه
            </span>
          </div>
        </div>
      </div>

      <div className="flex flex-col gap-4 p-4 sm:gap-5 sm:p-5">
        <div className="flex flex-col gap-1">
          <p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
            {currencyFormatter.format(totalRevenue)}
          </p>
          <p className="text-[10px] tracking-wider text-muted-foreground uppercase sm:text-xs">
            این هفته در برابر هفته قبل
          </p>
        </div>

        <div className="h-[180px] w-full min-w-0 sm:h-[220px]">
          <ChartContainer config={revenueChartConfig} className="h-full w-full">
            <BarChart data={weeklyRevenueData}>
              <CartesianGrid strokeDasharray="0" vertical={false} />
              <XAxis
                dataKey="day"
                axisLine={false}
                tickLine={false}
                tick={{ fontSize: 10 }}
                dy={8}
              />
              <YAxis
                axisLine={false}
                tickLine={false}
                tick={{ fontSize: 10 }}
                dx={-5}
                tickFormatter={(value) =>
                  compactCurrencyFormatter.format(value)
                }
                width={40}
              />
              <Tooltip
                content={<RevenueChartTooltip />}
                cursor={{ fillOpacity: 0.05 }}
              />
              <Bar
                dataKey="revenue"
                stackId="revenue"
                fill="var(--color-revenue)"
                radius={[0, 0, 0, 0]}
              />
              <Bar
                dataKey="expenses"
                stackId="revenue"
                fill="var(--color-expenses)"
                radius={[3, 3, 0, 0]}
              />
            </BarChart>
          </ChartContainer>
        </div>
      </div>
    </div>
  );
};

const SalesPipelineChart = () => {
  const [searchParams, setSearchParams] = React.useState(
    () =>
      new URLSearchParams(
        typeof window !== "undefined" ? window.location.search : "",
      ),
  );

  const quarter = searchParams.get("quarter") ?? "q3";

  const handleQuarterChange = (value: string) => {
    const next = new URLSearchParams(searchParams);
    next.set("quarter", value);
    setSearchParams(next);
    window.history.replaceState(null, "", `?${next.toString()}`);
  };

  const data = salesPipelineData[quarter] ?? salesPipelineData.q3;
  const totalOrders = data.reduce((sum, d) => sum + d.orders, 0);
  const totalSales = data.reduce((sum, d) => sum + d.sales, 0);

  const pipelineLabelFormatter = (
    value: React.ReactNode,
    payload: ReadonlyArray<{ payload?: { week?: string } }> | undefined,
  ) => {
    const week = payload?.[0]?.payload?.week;
    if (!week) return value;
    return `${value} · ${week}`;
  };

  return (
    <div className="flex min-w-0 flex-1 flex-col rounded-xl border bg-card">
      <div className="flex h-14 items-center justify-between border-b px-4 sm:px-5">
        <div className="flex items-center gap-2.5">
          <Button
            variant="outline"
            size="icon"
            className="size-7 sm:size-8"
            aria-label="قیف فروش"
          >
            <BarChart3
              className="size-4 text-muted-foreground sm:size-[18px]"
              aria-hidden="true"
            />
          </Button>
          <h2 className="text-sm font-medium text-pretty sm:text-base">
            قیف فروش
          </h2>
        </div>

        <Select value={quarter} onValueChange={handleQuarterChange}>
          <SelectTrigger
            className="h-7 w-[120px] text-xs"
            aria-label="انتخاب سه‌ماهه"
          >
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="q1">سه‌ماهه ۱</SelectItem>
            <SelectItem value="q2">سه‌ماهه ۲</SelectItem>
            <SelectItem value="q3">سه‌ماهه ۳</SelectItem>
            <SelectItem value="q4">سه‌ماهه ۴</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="grid flex-1 grid-cols-1 gap-4 p-4 sm:grid-cols-[1fr_auto_1fr] sm:p-5">
        <div className="flex min-h-0 flex-col gap-2">
          <div>
            <p className="text-lg font-semibold tracking-tight">
              {numberFormatter.format(totalOrders)}
            </p>
            <p className="text-[10px] tracking-wider text-muted-foreground uppercase">
              مجموع سفارش‌ها
            </p>
          </div>
          <div className="min-h-0 w-full flex-1">
            <ChartContainer
              config={pipelineOrdersConfig}
              className="h-full w-full"
            >
              <AreaChart data={data} accessibilityLayer>
                <defs>
                  <linearGradient
                    id="pipelineGradientOrders"
                    x1="0"
                    y1="0"
                    x2="0"
                    y2="1"
                  >
                    <stop
                      offset="0%"
                      stopColor="var(--color-orders)"
                      stopOpacity={0.3}
                    />
                    <stop
                      offset="100%"
                      stopColor="var(--color-orders)"
                      stopOpacity={0.05}
                    />
                  </linearGradient>
                </defs>
                <XAxis
                  dataKey="month"
                  axisLine={false}
                  tickLine={false}
                  tick={{ fontSize: 10 }}
                  interval={3}
                  dy={4}
                />
                <YAxis hide domain={["dataMin - 50", "dataMax + 50"]} />
                <ChartTooltip
                  cursor={false}
                  content={
                    <ChartTooltipContent
                      indicator="line"
                      labelFormatter={pipelineLabelFormatter}
                      formatter={(value, name) => {
                        const numericValue = Number(value);
                        const formatted = numberFormatter.format(
                          Number.isFinite(numericValue) ? numericValue : 0,
                        );

                        return (
                          <div className="flex w-full items-center gap-2">
                            <div
                              className="h-2.5 w-2.5 shrink-0 rounded-[2px]"
                              style={{
                                backgroundColor:
                                  name === "orders"
                                    ? "var(--color-orders)"
                                    : "var(--color-sales)",
                              }}
                            />
                            <span className="text-muted-foreground">
                              سفارش‌ها
                            </span>
                            <span className="ms-auto font-mono font-medium text-foreground tabular-nums">
                              {formatted}
                            </span>
                          </div>
                        );
                      }}
                    />
                  }
                />
                <Area
                  type="step"
                  dataKey="orders"
                  stroke="var(--color-orders)"
                  strokeWidth={2}
                  fill="url(#pipelineGradientOrders)"
                />
              </AreaChart>
            </ChartContainer>
          </div>
        </div>

        <div className="h-px w-full bg-border sm:h-auto sm:w-px sm:self-stretch" />

        <div className="flex min-h-0 flex-col gap-2">
          <div>
            <p className="text-lg font-semibold tracking-tight">
              {compactCurrencyOneDecimalFormatter.format(totalSales)}
            </p>
            <p className="text-[10px] tracking-wider text-muted-foreground uppercase">
              مجموع فروش
            </p>
          </div>
          <div className="min-h-0 w-full flex-1">
            <ChartContainer
              config={pipelineSalesConfig}
              className="h-full w-full"
            >
              <AreaChart data={data} accessibilityLayer>
                <defs>
                  <linearGradient
                    id="pipelineGradientSales"
                    x1="0"
                    y1="0"
                    x2="0"
                    y2="1"
                  >
                    <stop
                      offset="0%"
                      stopColor="var(--color-sales)"
                      stopOpacity={0.3}
                    />
                    <stop
                      offset="100%"
                      stopColor="var(--color-sales)"
                      stopOpacity={0.05}
                    />
                  </linearGradient>
                </defs>
                <XAxis
                  dataKey="month"
                  axisLine={false}
                  tickLine={false}
                  tick={{ fontSize: 10 }}
                  interval={3}
                  dy={4}
                />
                <YAxis hide domain={["dataMin - 50", "dataMax + 50"]} />
                <ChartTooltip
                  cursor={false}
                  content={
                    <ChartTooltipContent
                      indicator="line"
                      labelFormatter={pipelineLabelFormatter}
                      formatter={(value, name) => {
                        const numericValue = Number(value);
                        const formatted = currencyFormatter.format(
                          Number.isFinite(numericValue) ? numericValue : 0,
                        );

                        return (
                          <div className="flex w-full items-center gap-2">
                            <div
                              className="h-2.5 w-2.5 shrink-0 rounded-[2px]"
                              style={{
                                backgroundColor:
                                  name === "orders"
                                    ? "var(--color-orders)"
                                    : "var(--color-sales)",
                              }}
                            />
                            <span className="text-muted-foreground">فروش</span>
                            <span className="ms-auto font-mono font-medium text-foreground tabular-nums">
                              {formatted}
                            </span>
                          </div>
                        );
                      }}
                    />
                  }
                />
                <Area
                  type="step"
                  dataKey="sales"
                  stroke="var(--color-sales)"
                  strokeWidth={2}
                  fill="url(#pipelineGradientSales)"
                />
              </AreaChart>
            </ChartContainer>
          </div>
        </div>
      </div>
    </div>
  );
};

const IncomeByCategoryChart = () => {
  return (
    <div className="flex flex-col gap-4 rounded-xl border bg-card p-4 sm:p-5">
      <div className="flex items-center gap-2.5">
        <Button
          variant="outline"
          size="icon"
          className="size-7 sm:size-8"
          aria-label="فروش بر اساس دسته"
        >
          <Grid3x3
            className="size-4 text-muted-foreground sm:size-[18px]"
            aria-hidden="true"
          />
        </Button>
        <h2 className="text-sm font-medium text-pretty sm:text-base">
          فروش بر اساس دسته
        </h2>
      </div>

      <div className="mx-auto aspect-square max-h-[250px] w-full">
        <ChartContainer config={radarChartConfig} className="h-full w-full">
          <RadarChart data={incomeCategoryData}>
            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
            <PolarAngleAxis dataKey="category" tick={{ fontSize: 11 }} />
            <PolarGrid />
            <Radar
              dataKey="value"
              fill="var(--color-value)"
              fillOpacity={0.5}
              stroke="var(--color-value)"
              strokeWidth={2}
            />
          </RadarChart>
        </ChartContainer>
      </div>
    </div>
  );
};

const TrafficSourcesHeatmap = () => {
  return (
    <div className="flex h-full min-w-0 flex-col rounded-xl border bg-card">
      <div className="flex h-14 items-center justify-between px-4 sm:px-5">
        <div className="flex items-center gap-2.5">
          <Button
            variant="outline"
            size="icon"
            className="size-7 sm:size-8"
            aria-label="منابع ترافیک"
          >
            <Grid3x3
              className="size-4 text-muted-foreground sm:size-[18px]"
              aria-hidden="true"
            />
          </Button>
          <div className="flex items-center gap-2">
            <h2 className="text-sm font-medium text-pretty sm:text-base">
              منابع ترافیک
            </h2>
            <span className="text-xs font-medium text-success">+30%</span>
          </div>
        </div>
      </div>

      <div className="flex min-h-0 flex-1 flex-col justify-center gap-4 px-4 py-4 sm:px-5">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-1.5">
            <div className="size-2.5 rounded-full bg-primary" />
            <span className="text-[10px] text-muted-foreground sm:text-xs">
              زیاد
            </span>
          </div>
          <div className="flex items-center gap-1.5">
            <div className="size-2.5 rounded-full bg-primary/40" />
            <span className="text-[10px] text-muted-foreground sm:text-xs">
              متوسط
            </span>
          </div>
          <div className="flex items-center gap-1.5">
            <div className="size-2.5 rounded-full bg-primary/15" />
            <span className="text-[10px] text-muted-foreground sm:text-xs">
              کم
            </span>
          </div>
        </div>
        <div className="grid grid-cols-[auto_repeat(4,1fr)] gap-0.5 sm:gap-1">
          {trafficSourcesData.map((source) => (
            <React.Fragment key={source.name}>
              <div className="flex items-center pe-2">
                <span className="text-[11px] font-medium text-muted-foreground">
                  {source.total}
                </span>
              </div>
              {source.weeks.map((cell, weekIndex) => {
                const intensity = cell.isCurrentWeek
                  ? Math.round(cell.value * 30 + 65)
                  : Math.round(cell.value * 35 + 15);
                const tooltipTitle = source.name || "کل";
                const weekLabel =
                  weekLabels[weekIndex] ??
                  `هفته ${(weekIndex + 1).toLocaleString("fa-IR")}`;
                const strength = Math.round(cell.value * 100);

                return (
                  <ShadTooltipProvider key={weekIndex}>
                    <ShadTooltip>
                      <ShadTooltipTrigger asChild>
                        <button
                          type="button"
                          className="h-5 w-full rounded-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none sm:h-6"
                          style={{
                            backgroundColor: `color-mix(in oklch, var(--primary) ${intensity}%, ${mixBase})`,
                          }}
                          aria-label={`${tooltipTitle} ${weekLabel}: ${strength}%`}
                        />
                      </ShadTooltipTrigger>
                      <ShadTooltipContent side="top" sideOffset={8}>
                        <div className="grid gap-1">
                          <div className="font-medium">{tooltipTitle}</div>
                          <div className="text-muted-foreground">
                            {weekLabel}
                            {cell.isCurrentWeek ? " · جاری" : ""}
                          </div>
                          <div className="tabular-nums">
                            {strength.toLocaleString("fa-IR")}٪
                          </div>
                        </div>
                      </ShadTooltipContent>
                    </ShadTooltip>
                  </ShadTooltipProvider>
                );
              })}
            </React.Fragment>
          ))}

          <div className="pt-2" />
          {weekLabels.map((label) => (
            <div
              key={label}
              className="pt-2 text-center text-[10px] text-muted-foreground"
            >
              {label}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const OrderStatusChart = () => {
  const total = orderStatIRRata.reduce((sum, d) => sum + d.value, 0);
  const sliceColors = [palette.primary, palette.tertiary.light];
  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);

  return (
    <div className="flex flex-col gap-4 rounded-xl border bg-card p-4 sm:p-5">
      <div className="flex items-center gap-2.5">
        <Button
          variant="outline"
          size="icon"
          className="size-7 sm:size-8"
          aria-label="وضعیت سفارش"
        >
          <Users
            className="size-4 text-muted-foreground sm:size-[18px]"
            aria-hidden="true"
          />
        </Button>
        <h2 className="text-sm font-medium text-pretty sm:text-base">
          وضعیت سفارش
        </h2>
      </div>

      <div className="relative mx-auto w-full max-w-[220px] sm:max-w-[240px]">
        <ChartContainer
          config={orderStatusChartConfig}
          className="aspect-square w-full"
        >
          <PieChart>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Pie
              data={orderStatIRRata}
              dataKey="value"
              nameKey="key"
              innerRadius="60%"
              outerRadius="85%"
              paddingAngle={2}
              strokeWidth={0}
              {...({ activeIndex: activeIndex ?? undefined } as any)}
              activeShape={({
                outerRadius = 0,
                ...props
              }: PieSectorDataItem) => (
                <Sector {...props} outerRadius={outerRadius + 8} />
              )}
              onMouseEnter={(_, index) => setActiveIndex(index)}
              onMouseLeave={() => setActiveIndex(null)}
              onClick={(_, index) =>
                setActiveIndex((current) => (current === index ? null : index))
              }
            >
              {orderStatIRRata.map((entry, index) => (
                <Cell
                  key={entry.key}
                  fill={sliceColors[index]}
                  fillOpacity={
                    activeIndex !== null && activeIndex !== index ? 0.4 : 1
                  }
                />
              ))}
            </Pie>
          </PieChart>
        </ChartContainer>
        <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
          <span className="text-[10px] tracking-wider text-muted-foreground uppercase">
            سفارش‌ها
          </span>
          <span className="text-lg font-semibold">
            {numberFormatter.format(total)}
          </span>
        </div>
      </div>

      <div className="flex items-center justify-center gap-6">
        {orderStatIRRata.map((item, index) => (
          <button
            key={item.key}
            type="button"
            className={cn(
              "flex items-center gap-2 rounded-md px-1 py-0.5 transition-opacity duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none motion-reduce:transition-none",
              activeIndex !== null && activeIndex !== index && "opacity-50",
            )}
            onPointerEnter={() => setActiveIndex(index)}
            onPointerLeave={() => setActiveIndex(null)}
            onFocus={() => setActiveIndex(index)}
            onBlur={() => setActiveIndex(null)}
            onClick={() =>
              setActiveIndex((current) => (current === index ? null : index))
            }
            aria-label={`${item.label}: ${numberFormatter.format(item.value)} سفارش`}
          >
            <span
              className="size-2.5 rounded-full"
              style={{ backgroundColor: sliceColors[index] }}
            />
            <span className="text-xs text-muted-foreground">{item.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
};

const RecentInvoicesTable = () => {
  const [searchQuery, setSearchQuery] = React.useState("");
  const [statusFilter, setStatusFilter] = React.useState<string>("all");
  const [currentPage, setCurrentPage] = React.useState(1);
  const [pageSize, setPageSize] = React.useState(5);
  const [sortKey, setSortKey] = React.useState<InvoiceSortKey | "">("");
  const [sortDir, setSortDir] = React.useState<"asc" | "desc">("asc");
  const [isHydrated, setIsHydrated] = React.useState(false);
  const skipNextReset = React.useRef(true);

  const hasActiveFilters = statusFilter !== "all";

  const clearFilters = () => {
    setStatusFilter("all");
  };

  // Hydrate from URL params on mount
  React.useEffect(() => {
    if (typeof window === "undefined") return;

    const params = new URLSearchParams(window.location.search);
    const statusParam = params.get("invoiceStatus");
    const pageParam = Number.parseInt(params.get("page") ?? "", 10);
    const pageSizeParam = Number.parseInt(params.get("pageSize") ?? "", 10);
    const sortKeyParam = params.get("sortKey") as InvoiceSortKey | null;
    const sortDirParam = params.get("sortDir");

    setSearchQuery(params.get("q") ?? "");
    setStatusFilter(
      statusParam && invoiceStatuses.includes(statusParam as InvoiceStatus)
        ? statusParam
        : "all",
    );
    setCurrentPage(Number.isFinite(pageParam) && pageParam > 0 ? pageParam : 1);
    setPageSize(
      INVOICE_PAGE_SIZE_OPTIONS.includes(pageSizeParam) ? pageSizeParam : 5,
    );
    if (
      sortKeyParam &&
      ["customer", "invoiceId", "date", "amount"].includes(sortKeyParam)
    ) {
      setSortKey(sortKeyParam);
      setSortDir(sortDirParam === "desc" ? "desc" : "asc");
    }
    setIsHydrated(true);
  }, []);

  // Reset page to 1 when filters change
  React.useEffect(() => {
    if (!isHydrated) return;
    if (skipNextReset.current) {
      skipNextReset.current = false;
      return;
    }
    setCurrentPage(1);
  }, [searchQuery, statusFilter, pageSize, isHydrated]);

  // Sync state to URL
  React.useEffect(() => {
    if (!isHydrated) return;
    if (typeof window === "undefined") return;
    const params = new URLSearchParams(window.location.search);

    if (searchQuery) {
      params.set("q", searchQuery);
    } else {
      params.delete("q");
    }

    if (statusFilter !== "all") {
      params.set("invoiceStatus", statusFilter);
    } else {
      params.delete("invoiceStatus");
    }

    if (currentPage > 1) {
      params.set("page", String(currentPage));
    } else {
      params.delete("page");
    }

    if (pageSize !== INVOICE_PAGE_SIZE_OPTIONS[0]) {
      params.set("pageSize", String(pageSize));
    } else {
      params.delete("pageSize");
    }

    if (sortKey) {
      params.set("sortKey", sortKey);
      params.set("sortDir", sortDir);
    } else {
      params.delete("sortKey");
      params.delete("sortDir");
    }

    const nextQuery = params.toString();
    const nextUrl = nextQuery
      ? `${window.location.pathname}?${nextQuery}`
      : window.location.pathname;
    window.history.replaceState(null, "", nextUrl);
  }, [
    searchQuery,
    statusFilter,
    currentPage,
    pageSize,
    sortKey,
    sortDir,
    isHydrated,
  ]);

  const handleSort = (key: InvoiceSortKey) => {
    if (sortKey === key) {
      setSortDir((prev) => (prev === "asc" ? "desc" : "asc"));
    } else {
      setSortKey(key);
      setSortDir("asc");
    }
  };

  const filteredInvoices = React.useMemo(() => {
    return invoices.filter((invoice) => {
      const matchesSearch =
        invoice.customer.toLowerCase().includes(searchQuery.toLowerCase()) ||
        invoice.invoiceId.toLowerCase().includes(searchQuery.toLowerCase());

      const matchesStatus =
        statusFilter === "all" || invoice.status === statusFilter;

      return matchesSearch && matchesStatus;
    });
  }, [searchQuery, statusFilter]);

  const sortedInvoices = React.useMemo(() => {
    if (!sortKey) return filteredInvoices;

    return [...filteredInvoices].sort((a, b) => {
      let cmp = 0;
      switch (sortKey) {
        case "customer":
          cmp = a.customer.localeCompare(b.customer);
          break;
        case "invoiceId":
          cmp = a.invoiceId.localeCompare(b.invoiceId);
          break;
        case "date":
          cmp = a.date.localeCompare(b.date);
          break;
        case "amount":
          cmp = a.amount - b.amount;
          break;
      }
      return sortDir === "desc" ? -cmp : cmp;
    });
  }, [filteredInvoices, sortKey, sortDir]);

  const totalPages = Math.max(1, Math.ceil(sortedInvoices.length / pageSize));

  const paginatedInvoices = React.useMemo(() => {
    const startIndex = (currentPage - 1) * pageSize;
    return sortedInvoices.slice(startIndex, startIndex + pageSize);
  }, [sortedInvoices, currentPage, pageSize]);

  const goToPage = (page: number) => {
    setCurrentPage(Math.max(1, Math.min(page, totalPages)));
  };

  const sortableHeader = (
    label: string,
    key: InvoiceSortKey,
    className?: string,
  ) => (
    <TableHead
      className={cn(
        "text-xs font-medium text-muted-foreground sm:text-sm",
        className,
      )}
      aria-sort={
        sortKey === key
          ? sortDir === "asc"
            ? "ascending"
            : "descending"
          : undefined
      }
    >
      <button
        type="button"
        className="inline-flex cursor-pointer items-center gap-1"
        onClick={() => handleSort(key)}
      >
        {label}
        <ArrowUpDown
          className="size-3 text-muted-foreground/60"
          aria-hidden="true"
        />
      </button>
    </TableHead>
  );

  return (
    <div>
      <div className="flex flex-col gap-3 py-3 sm:flex-row sm:items-center sm:gap-4 sm:py-3.5">
        <div className="flex flex-1 flex-col gap-0.5">
          <div className="flex items-center gap-2.5">
            <h2 className="text-sm font-medium text-pretty sm:text-base">
              فاکتورهای اخیر
            </h2>
            <span className="ms-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20">
              {sortedInvoices.length.toLocaleString("fa-IR")}
            </span>
          </div>
          <p className="hidden text-xs text-muted-foreground sm:block">
            فاکتورهای اخیر در جدول زیر نمایش داده می‌شوند.
          </p>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <div className="relative flex-1 sm:flex-none">
            <Search
              className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
              aria-hidden="true"
            />
            <Input
              placeholder="جستجوی فاکتور… (مثلاً فاکتور-00012)"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              name="invoice-search"
              inputMode="search"
              autoComplete="off"
              aria-label="جستجوی فاکتورها"
              className="h-8 w-full pe-12 ps-9 text-sm sm:h-9 sm:w-[180px] lg:w-[220px]"
            />
            <kbd className="pointer-events-none absolute top-1/2 end-2.5 hidden -translate-y-1/2 rounded border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground select-none sm:inline-block">
              ⌘1
            </kbd>
          </div>

          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="outline"
                size="sm"
                className={cn(
                  "h-8 gap-1.5 sm:h-9 sm:gap-2",
                  hasActiveFilters && "border-primary",
                )}
                aria-label="فیلتر فاکتورها"
              >
                <Filter className="size-3.5 sm:size-4" aria-hidden="true" />
                <span className="hidden sm:inline">فیلتر</span>
                {hasActiveFilters && (
                  <span className="size-1.5 rounded-full bg-primary sm:size-2" />
                )}
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-[180px]">
              <DropdownMenuLabel>فیلتر بر اساس وضعیت</DropdownMenuLabel>
              <DropdownMenuCheckboxItem
                checked={statusFilter === "all"}
                onCheckedChange={() => setStatusFilter("all")}
              >
                همه وضعیت‌ها
              </DropdownMenuCheckboxItem>
              {invoiceStatuses.map((status) => (
                <DropdownMenuCheckboxItem
                  key={status}
                  checked={statusFilter === status}
                  onCheckedChange={() => setStatusFilter(status)}
                >
                  {invoiceStatusLabels[status]}
                </DropdownMenuCheckboxItem>
              ))}

              {hasActiveFilters && (
                <>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem
                    onClick={clearFilters}
                    className="text-destructive"
                  >
                    <X className="me-2 size-4" aria-hidden="true" />
                    پاک کردن فیلترها
                  </DropdownMenuItem>
                </>
              )}
            </DropdownMenuContent>
          </DropdownMenu>

          <Button
            variant="outline"
            size="sm"
            className="h-8 text-xs sm:h-9 sm:text-sm"
          >
            مشاهده همه
          </Button>
        </div>
      </div>

      {hasActiveFilters && (
        <div className="flex flex-wrap items-center gap-2 pb-3">
          <span className="text-[10px] text-muted-foreground sm:text-xs">
            فیلترها:
          </span>
          {statusFilter !== "all" && (
            <button
              type="button"
              className="inline-flex cursor-pointer items-center gap-1 rounded-md bg-gray-50 px-2 py-1 text-[10px] font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20"
              onClick={() => setStatusFilter("all")}
              aria-label={`حذف فیلتر ${invoiceStatusLabels[statusFilter as InvoiceStatus]}`}
            >
              {invoiceStatusLabels[statusFilter as InvoiceStatus]}
              <X className="size-2.5 sm:size-3" aria-hidden="true" />
            </button>
          )}
        </div>
      )}

      <div className="overflow-x-auto pb-3 sm:pb-4">
        <Table>
          <TableHeader>
            <TableRow className="bg-muted/50 hover:bg-muted/50">
              {sortableHeader("مشتری", "customer", "min-w-[160px]")}
              {sortableHeader("شناسه فاکتور", "invoiceId", "min-w-[120px]")}
              {sortableHeader(
                "تاریخ",
                "date",
                "hidden min-w-[100px] sm:table-cell",
              )}
              {sortableHeader("مبلغ", "amount", "min-w-[90px]")}
              <TableHead className="min-w-[80px] text-xs font-medium text-muted-foreground sm:text-sm">
                اولویت
              </TableHead>
              <TableHead className="min-w-[80px] text-xs font-medium text-muted-foreground sm:text-sm">
                وضعیت
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {paginatedInvoices.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={6}
                  className="h-24 text-center text-sm text-muted-foreground"
                >
                  فاکتوری با این فیلترها یافت نشد.
                </TableCell>
              </TableRow>
            ) : (
              paginatedInvoices.map((invoice) => (
                <TableRow key={invoice.id}>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <Avatar className="size-8">
                        <AvatarFallback className="text-xs">
                          {invoice.customerInitials}
                        </AvatarFallback>
                      </Avatar>
                      <span className="text-xs font-medium sm:text-sm">
                        {invoice.customer}
                      </span>
                    </div>
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground tabular-nums sm:text-sm">
                    {invoice.invoiceId}
                  </TableCell>
                  <TableCell className="hidden text-xs text-muted-foreground sm:table-cell sm:text-sm">
                    {invoiceDateFormatter.format(new Date(invoice.date))}
                  </TableCell>
                  <TableCell className="text-xs font-medium text-foreground tabular-nums sm:text-sm">
                    {currencyFormatter.format(invoice.amount)}
                  </TableCell>
                  <TableCell>
                    <span
                      className={cn(
                        badgeClassName,
                        invoicePriorityStyles[invoice.priority],
                      )}
                    >
                      {invoicePriorityLabels[invoice.priority]}
                    </span>
                  </TableCell>
                  <TableCell>
                    <span
                      className={cn(
                        badgeClassName,
                        invoiceStatusStyles[invoice.status],
                      )}
                    >
                      {invoiceStatusLabels[invoice.status]}
                    </span>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <div className="flex flex-col items-center justify-between gap-3 border-t py-3 sm:flex-row">
        <div className="flex items-center gap-2 text-xs text-muted-foreground sm:text-sm">
          <span className="hidden sm:inline">ردیف در هر صفحه:</span>
          <Select
            value={pageSize.toString()}
            onValueChange={(value) => setPageSize(Number(value))}
          >
            <SelectTrigger className="h-8 w-[70px]" aria-label="ردیف در هر صفحه">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {INVOICE_PAGE_SIZE_OPTIONS.map((size) => (
                <SelectItem key={size} value={size.toString()}>
                  {size.toLocaleString("fa-IR")}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <span className="text-muted-foreground">
            {sortedInvoices.length === 0
              ? "۰"
              : `${((currentPage - 1) * pageSize + 1).toLocaleString("fa-IR")}-${Math.min(
                  currentPage * pageSize,
                  sortedInvoices.length,
                ).toLocaleString("fa-IR")}`}{" "}
            از {sortedInvoices.length.toLocaleString("fa-IR")}
          </span>
        </div>

        <div className="flex items-center gap-1">
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => goToPage(1)}
            disabled={currentPage === 1}
            aria-label="رفتن به صفحه اول"
          >
            <ChevronsLeft className="size-4 rtl:rotate-180" aria-hidden="true" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => goToPage(currentPage - 1)}
            disabled={currentPage === 1}
            aria-label="رفتن به صفحه قبل"
          >
            <ChevronLeft className="size-4 rtl:rotate-180" aria-hidden="true" />
          </Button>

          <div className="flex items-center gap-1 px-2">
            {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
              let pageNum: number;
              if (totalPages <= 5) {
                pageNum = i + 1;
              } else if (currentPage <= 3) {
                pageNum = i + 1;
              } else if (currentPage >= totalPages - 2) {
                pageNum = totalPages - 4 + i;
              } else {
                pageNum = currentPage - 2 + i;
              }

              return (
                <Button
                  key={pageNum}
                  variant={currentPage === pageNum ? "default" : "ghost"}
                  size="icon"
                  className="size-8"
                  onClick={() => goToPage(pageNum)}
                  aria-label={`رفتن به صفحه ${pageNum.toLocaleString("fa-IR")}`}
                  aria-current={currentPage === pageNum ? "page" : undefined}
                >
                  {pageNum.toLocaleString("fa-IR")}
                </Button>
              );
            })}
          </div>

          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => goToPage(currentPage + 1)}
            disabled={currentPage === totalPages}
            aria-label="رفتن به صفحه بعد"
          >
            <ChevronRight className="size-4 rtl:rotate-180" aria-hidden="true" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            className="size-8"
            onClick={() => goToPage(totalPages)}
            disabled={currentPage === totalPages}
            aria-label="رفتن به صفحه آخر"
          >
            <ChevronsRight className="size-4 rtl:rotate-180" aria-hidden="true" />
          </Button>
        </div>
      </div>
    </div>
  );
};

const DashboardContent = () => {
  return (
    <div
      id="dashboard-main"
      tabIndex={-1}
      className="w-full flex-1 space-y-4 overflow-auto bg-background p-3 sm:space-y-6 sm:p-4 md:p-6"
    >
      <AccountingStatsCards />

      <div className="flex flex-col gap-4 sm:gap-6 xl:flex-row">
        <RevenueChart />
        <SalesPipelineChart />
      </div>

      <div className="grid gap-4 sm:gap-6 lg:grid-cols-3">
        <IncomeByCategoryChart />
        <TrafficSourcesHeatmap />
        <OrderStatusChart />
      </div>
      <RecentInvoicesTable />
    </div>
  );
};

const Dashboard8 = ({ className }: { className?: string }) => {
  return (
    <ShadTooltipProvider>
      <SidebarProvider
        dir="rtl"
        lang="fa"
        className={cn("min-h-svh w-full overflow-hidden bg-sidebar", className)}
      >
        <a
          href="#dashboard-main"
          className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:text-foreground focus:ring-2 focus:ring-ring"
        >
          رفتن به محتوای اصلی
        </a>
        <AppSidebar />
        <SidebarInset className="min-h-svh min-w-0 w-full overflow-hidden md:peer-data-[variant=inset]:m-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-none md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:me-0">
          <DashboardHeader />
          <DashboardContent />
        </SidebarInset>
      </SidebarProvider>
    </ShadTooltipProvider>
  );
};

export { Dashboard8 };