reui-blocks/blocks/dashboard11.tsx

"use client";

import { useMotionValueEvent, useSpring } from "framer-motion";
import {
  ArrowDownRight,
  ArrowUpRight,
  BarChart3,
  Bell,
  Box,
  ChevronRight,
  ChevronsUpDown,
  ClipboardList,
  Facebook,
  Globe,
  HelpCircle,
  Instagram,
  LayoutDashboard,
  LogOut,
  MessageSquare,
  Package,
  RotateCcw,
  Search,
  Settings,
  Truck,
  Twitter,
  User,
  Users,
  Wallet,
} from "lucide-react";
import * as React from "react";
import type { TooltipProps } from "recharts";
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Cell,
  ReferenceLine,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarInset,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import {
  Tooltip as ShadTooltip,
  TooltipContent as ShadTooltipContent,
  TooltipProvider as ShadTooltipProvider,
  TooltipTrigger as ShadTooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

// ============================================================================
// Color Palette
// ============================================================================

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})`,
  },
  quinary: {
    light: `color-mix(in oklch, var(--primary) 25%, ${mixBase})`,
    dark: `color-mix(in oklch, var(--primary) 30%, ${mixBase})`,
  },
};

const getRetentionColor = (percent: number): string => {
  const mix = Math.max(5, Math.round(percent * 0.85));
  return `color-mix(in oklch, var(--primary) ${mix}%, ${mixBase})`;
};

// ============================================================================
// Types
// ============================================================================

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[];
  user?: UserData;
};

type KPIStat = {
  title: string;
  value: number;
  change: number;
  format: "currency" | "percent" | "number";
};

type Segment = {
  name: string;
  value: number;
  color: string;
  change: number;
};

type Channel = {
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  name: string;
  count: number;
  change: number;
};

type CohortRow = {
  label: string;
  retentionByMonth: number[];
};

// ============================================================================
// Formatters
// ============================================================================

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

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

const numberFormatter = new Intl.NumberFormat("fa-IR");

const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
  notation: "compact",
  maximumFractionDigits: 2,
});

const percentFormatter = new Intl.NumberFormat("fa-IR", {
  style: "percent",
  maximumFractionDigits: 1,
});

const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
  maximumFractionDigits: 1,
});

const monthFormatter = new Intl.DateTimeFormat("fa-IR", { month: "short" });

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

const weekdayFormatter = new Intl.DateTimeFormat("fa-IR", {
  weekday: "short",
});

const formatChangePercent = (change: number, signed = true) => {
  const formatted = Math.abs(change).toLocaleString("fa-IR", {
    minimumFractionDigits: change % 1 !== 0 ? 1 : 0,
    maximumFractionDigits: 1,
  });
  if (!signed) return `${formatted}٪`;
  return `${change >= 0 ? "+" : "-"}${formatted}٪`;
};

// ============================================================================
// Hooks
// ============================================================================

function useHoverHighlight<T extends string | number>() {
  const [active, setActive] = React.useState<T | null>(null);

  const handleHover = React.useCallback((value: T | null) => {
    setActive(value);
  }, []);

  return { active, handleHover };
}

// ============================================================================
// Mock Data
// ============================================================================

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: "#" },
      ],
    },
    {
      title: "تنظیمات",
      defaultOpen: false,
      items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
    },
  ],
  user: {
    name: "علی رضایی",
    email: "john@acmestore.com",
    avatar:
      "/block-media/shadcnblocks/block/avatar-5.webp",
  },
};

const kpiStats: KPIStat[] = [
  { title: "درآمد کل", value: 485000, change: -12.5, format: "currency" },
  { title: "نرخ تبدیل", value: 18.5, change: -12.5, format: "percent" },
  { title: "کل سفارش‌ها", value: 92, change: 25, format: "number" },
  { title: "مشتریان فعال", value: 38, change: 25, format: "number" },
  { title: "مشتریان جدید", value: 12, change: 25, format: "number" },
];

const monthlyRevenueData = [
  { month: monthLabel(0), revenue: 72000 },
  { month: monthLabel(1), revenue: 128000 },
  { month: monthLabel(2), revenue: 103000 },
  { month: monthLabel(3), revenue: 176000 },
  { month: monthLabel(4), revenue: 230000 },
  { month: monthLabel(5), revenue: 142000 },
  { month: monthLabel(6), revenue: 310000 },
  { month: monthLabel(7), revenue: 640000 },
  { month: monthLabel(8), revenue: 410000 },
  { month: monthLabel(9), revenue: 210000 },
  { month: monthLabel(10), revenue: 98000 },
  { month: monthLabel(11), revenue: 260000 },
];

const segments: Segment[] = [
  { name: "سازمانی", value: 1074, color: palette.primary, change: 3.2 },
  { name: "کسب‌وکار متوسط", value: 836, color: palette.secondary.light, change: -1.5 },
  {
    name: "شخصی",
    value: 478,
    color: palette.tertiary.light,
    change: 5.8,
  },
];

const customerTrendData = [
  { day: weekdayFormatter.format(new Date(2025, 0, 6)), customers: 1850 },
  { day: weekdayFormatter.format(new Date(2025, 0, 7)), customers: 2150 },
  { day: weekdayFormatter.format(new Date(2025, 0, 8)), customers: 1720 },
  { day: weekdayFormatter.format(new Date(2025, 0, 9)), customers: 2480 },
  { day: weekdayFormatter.format(new Date(2025, 0, 10)), customers: 1890 },
  { day: weekdayFormatter.format(new Date(2025, 0, 11)), customers: 2320 },
  { day: weekdayFormatter.format(new Date(2025, 0, 12)), customers: 2388 },
];

const channelsData: Channel[] = [
  { icon: Facebook, name: "فیس‌بوک", count: 2341, change: 25 },
  { icon: Twitter, name: "توییتر", count: 1231, change: -25 },
  { icon: Globe, name: "گوگل", count: 1123, change: -25 },
  { icon: Instagram, name: "اینستاگرام", count: 125, change: 25 },
];

const cohortRetentionData: CohortRow[] = [
  { label: monthLabel(5), retentionByMonth: [100, 65, 51, 43, 37, 32, 28] },
  { label: monthLabel(6), retentionByMonth: [100, 71, 59, 50, 43, 37] },
  { label: monthLabel(7), retentionByMonth: [100, 73, 60, 51, 44] },
  { label: monthLabel(8), retentionByMonth: [100, 69, 55, 46] },
  { label: monthLabel(9), retentionByMonth: [100, 75, 62] },
  { label: monthLabel(10), retentionByMonth: [100, 67] },
  { label: monthLabel(11), retentionByMonth: [100] },
];

const storeVisitsData = [
  { date: monthLabel(0), visits: 245 },
  { date: monthLabel(1), visits: 654 },
  { date: monthLabel(2), visits: 387 },
  { date: monthLabel(3), visits: 521 },
  { date: monthLabel(4), visits: 412 },
  { date: monthLabel(5), visits: 598 },
  { date: monthLabel(6), visits: 312 },
  { date: monthLabel(7), visits: 743 },
  { date: monthLabel(8), visits: 489 },
  { date: monthLabel(9), visits: 476 },
  { date: monthLabel(10), visits: 687 },
  { date: monthLabel(11), visits: 198 },
];

// ============================================================================
// Chart Configs
// ============================================================================

const revenueChartConfig = {
  revenue: {
    label: "درآمد",
    color: palette.secondary.light,
  },
} satisfies ChartConfig;

const visitsChartConfig = {
  visits: {
    label: "بازدید",
    color: palette.secondary.light,
  },
} satisfies ChartConfig;

const customerChartConfig = {
  customers: {
    label: "مشتریان",
    color: palette.secondary.light,
  },
} satisfies ChartConfig;

// ============================================================================
// Sidebar Components
// ============================================================================

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 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}
                  className={
                    child.isActive
                      ? "relative overflow-visible before:absolute before:top-0 before:-start-2.5 before:z-10 before:h-full before:w-px before:bg-primary before:content-['']"
                      : ""
                  }
                >
                  <a href={child.href}>{child.label}</a>
                </SidebarMenuSubButton>
              </SidebarMenuSubItem>
            ))}
          </SidebarMenuSub>
        </CollapsibleContent>
      </SidebarMenuItem>
    </Collapsible>
  );
};

const NavUser = ({ user }: { user: UserData }) => {
  const initials = user.name
    .split(" ")
    .map((n) => n[0])
    .join("");

  const userAvatar = (
    <Avatar className="size-8 rounded-none">
      <AvatarImage src={user.avatar} alt={user.name} />
      <AvatarFallback className="rounded-none">{initials}</AvatarFallback>
    </Avatar>
  );

  const userInfo = (
    <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>
  );

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
            >
              {userAvatar}
              {userInfo}
              <ChevronsUpDown className="ms-auto size-4" aria-hidden="true" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-none"
            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">
                {userAvatar}
                {userInfo}
              </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>
        <ScrollArea className="h-full">
          {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>
          ))}
        </ScrollArea>
      </SidebarContent>
      <SidebarFooter>
        {sidebarData.user && <NavUser user={sidebarData.user} />}
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  );
};

// ============================================================================
// Dashboard Header
// ============================================================================

const DashboardHeader = () => {
  return (
    <header className="flex w-full items-center gap-3 border-b bg-background px-4 py-4 sm:px-6">
      <LayoutDashboard className="size-5" aria-hidden="true" />
      <h1 className="text-base font-medium text-pretty">داشبورد</h1>

      <div className="ms-auto flex items-center gap-2">
        <div className="relative w-full max-w-[220px] sm:max-w-[260px]">
          <Search
            className="absolute top-1/2 start-3 size-4 -translate-y-1/2 text-muted-foreground"
            aria-hidden="true"
          />
          <Input
            type="search"
            name="header-search"
            inputMode="search"
            autoComplete="off"
            aria-label="جستجوی داشبورد"
            placeholder="جستجو…"
            className="h-9 w-full pe-14 ps-9 text-sm"
          />
          <kbd className="pointer-events-none absolute top-1/2 end-2 hidden -translate-y-1/2 border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground sm:inline-flex">
            {"\u2318"}
            {"\u00a0"}K
          </kbd>
        </div>
        <Button
          variant="outline"
          size="icon"
          className="size-9"
          aria-label="اعلان‌ها"
        >
          <Bell className="size-4" aria-hidden="true" />
        </Button>
        <Button
          variant="outline"
          size="icon"
          className="size-9"
          aria-label="راهنما"
        >
          <HelpCircle className="size-4" aria-hidden="true" />
        </Button>
      </div>
    </header>
  );
};

// ============================================================================
// Dashboard Content Components
// ============================================================================

// Growth section component (vertical layout for SalesRevenueCard header)
const GrowthSection = ({
  label,
  change,
}: {
  label: string;
  change: number;
}) => {
  const isPositive = change >= 0;
  return (
    <div className="flex items-center gap-1.5 border bg-muted/30 px-2 py-1">
      <span className="text-xs text-muted-foreground">{label}</span>
      <span
        className={cn(
          "font-mono",
          "flex items-center gap-0.5 text-xs font-medium",
          isPositive ? "text-emerald-600" : "text-red-600",
        )}
      >
        {isPositive ? (
          <ArrowUpRight className="size-3" aria-hidden="true" />
        ) : (
          <ArrowDownRight className="size-3" aria-hidden="true" />
        )}
        {formatChangePercent(change)}
      </span>
    </div>
  );
};

// KPI Stat Card
const KPIStatCard = ({ stat }: { stat: KPIStat }) => {
  const isPositive = stat.change >= 0;

  const formatValue = (value: number, format: KPIStat["format"]) => {
    switch (format) {
      case "currency":
        return currencyFormatter.format(value);
      case "percent":
        return percentFormatter.format(value / 100);
      case "number":
        return numberFormatter.format(value);
    }
  };

  return (
    <div className="flex flex-col gap-1 border bg-card p-4">
      <span className="text-xs text-muted-foreground">{stat.title}</span>
      <div className="flex items-baseline gap-2">
        <span className={cn("font-mono", "text-xl font-semibold")}>
          {formatValue(stat.value, stat.format)}
        </span>
      </div>
      <div className="flex items-center gap-1 text-xs">
        {isPositive ? (
          <ArrowUpRight
            className="size-3.5 text-emerald-600"
            aria-hidden="true"
          />
        ) : (
          <ArrowDownRight
            className="size-3.5 text-red-600"
            aria-hidden="true"
          />
        )}
        <span
          className={cn(
            "font-mono",
            isPositive ? "text-emerald-600" : "text-red-600",
          )}
        >
          {formatChangePercent(stat.change)}
        </span>
        <span className="text-muted-foreground">نسبت به ماه قبل</span>
      </div>
    </div>
  );
};

// KPI Stats Row
const KPIStatsRow = () => {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
      {kpiStats.map((stat) => (
        <KPIStatCard key={stat.title} stat={stat} />
      ))}
    </div>
  );
};

// ============================================================================
// Animated Reference Line Components
// ============================================================================

interface CustomReferenceLabelProps {
  viewBox?: { x?: number; y?: number };
  value: number;
}

const CustomReferenceLabel: React.FC<CustomReferenceLabelProps> = (props) => {
  const { viewBox, value } = props;
  const y = viewBox?.y ?? 0;

  const width = React.useMemo(() => {
    const characterWidth = 8;
    const padding = 10;
    return value.toString().length * characterWidth + padding;
  }, [value]);

  return (
    <>
      <rect
        x={0}
        y={y - 9}
        width={width}
        height={18}
        fill="var(--secondary-foreground)"
        rx={0}
      />
      <text
        className="font-mono"
        fontWeight={600}
        x={6}
        y={y + 4}
        fill="var(--primary-foreground)"
      >
        {compactCurrencyFormatter.format(value)}
      </text>
    </>
  );
};

// Revenue Bar Chart Tooltip
function RevenueBarTooltip({
  active,
  payload,
  label,
}: any) {
  if (!active || !payload?.length) return null;

  const value = payload[0]?.value || 0;

  return (
    <div className="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="flex items-center gap-1.5 sm:gap-2">
        <div className="size-2 rounded-full bg-primary sm:size-2.5" />
        <span className="text-[10px] text-muted-foreground sm:text-sm">
          درآمد:
        </span>
        <span
          className={cn(
            "font-mono",
            "text-[10px] font-medium text-foreground sm:text-sm",
          )}
        >
          {currencyFormatter.format(Number(value))}
        </span>
      </div>
    </div>
  );
}

function CustomersAreaTooltip({
  active,
  payload,
  label,
}: any) {
  if (!active || !payload?.length) return null;

  const value = Number(payload[0]?.value ?? 0);
  const pointIndex = customerTrendData.findIndex(
    (entry) => entry.day === label,
  );
  const previousValue =
    pointIndex > 0 ? customerTrendData[pointIndex - 1].customers : value;
  const delta =
    previousValue === 0 ? 0 : ((value - previousValue) / previousValue) * 100;
  const isPositive = delta >= 0;

  return (
    <div className="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="flex items-center gap-1.5 sm:gap-2">
        <div
          className="size-2 rounded-full sm:size-2.5"
          style={{ backgroundColor: "var(--color-customers)" }}
        />
        <span className="text-[10px] text-muted-foreground sm:text-sm">
          مشتریان:
        </span>
        <span
          className={cn(
            "font-mono",
            "text-[10px] font-medium text-foreground sm:text-sm",
          )}
        >
          {numberFormatter.format(value)}
        </span>
      </div>
      <p
        className={cn(
          "font-mono",
          "mt-1.5 text-[10px] sm:text-xs",
          isPositive ? "text-emerald-600" : "text-red-600",
        )}
      >
        {formatChangePercent(delta)}
      </p>
    </div>
  );
}

// Sales Revenue Card with Animated Value Line Bar Chart
const SalesRevenueCard = () => {
  const changePercent = 8.2;

  // Track which bar is being hovered
  const [activeIndex, setActiveIndex] = React.useState<number | undefined>(
    undefined,
  );

  // Calculate the currently tracked value (hovered bar or max bar)
  const maxValueData = React.useMemo(() => {
    if (activeIndex !== undefined) {
      return {
        index: activeIndex,
        value: monthlyRevenueData[activeIndex].revenue,
      };
    }
    return monthlyRevenueData.reduce(
      (max, data, index) =>
        data.revenue > max.value ? { index, value: data.revenue } : max,
      { index: 0, value: 0 },
    );
  }, [activeIndex]);

  const isPositive = changePercent >= 0;

  // Spring animation for the reference line value
  const valueSpring = useSpring(maxValueData.value, {
    stiffness: 100,
    damping: 20,
  });
  const [springyValue, setSpringyValue] = React.useState(maxValueData.value);

  useMotionValueEvent(valueSpring, "change", (latest) => {
    setSpringyValue(Number(latest.toFixed(0)));
  });

  React.useEffect(() => {
    valueSpring.set(maxValueData.value);
  }, [maxValueData.value, valueSpring]);

  return (
    <div className="flex min-w-0 flex-1 flex-col gap-4 border bg-card p-4 sm:gap-5 sm:p-5 lg:col-span-2">
      <div className="flex items-start justify-between gap-4">
        {/* Left: Title + Value + Change */}
        <div className="flex flex-col gap-1">
          <span className="text-xs text-muted-foreground">درآمد فروش</span>
          <span
            className={cn(
              "font-mono",
              "text-xl font-semibold tabular-nums sm:text-3xl",
            )}
          >
            {currencyFormatter.format(maxValueData.value)}
          </span>
          <div className="flex items-center gap-1">
            <span
              className={cn(
                "font-mono",
                "text-sm font-medium",
                isPositive ? "text-emerald-600" : "text-red-600",
              )}
            >
              {formatChangePercent(changePercent)}
            </span>
            {isPositive ? (
              <ArrowUpRight
                className="size-3.5 text-emerald-600"
                aria-hidden="true"
              />
            ) : (
              <ArrowDownRight
                className="size-3.5 text-red-600"
                aria-hidden="true"
              />
            )}
            <span className="text-sm text-muted-foreground">نسبت به ماه قبل</span>
          </div>
        </div>

        {/* Right: Growth sections */}
        <div className="flex flex-wrap gap-2">
          <GrowthSection label="۴ هفته" change={11.6} />
          <GrowthSection label="۱۳ هفته" change={7.9} />
          <GrowthSection label="۱۲ ماه" change={-3.4} />
        </div>
      </div>

      <div className="h-[180px] w-full min-w-0 sm:h-[220px]">
        <ChartContainer
          config={revenueChartConfig}
          className="aspect-auto h-full w-full"
        >
          <BarChart
            data={monthlyRevenueData}
            onMouseLeave={() => setActiveIndex(undefined)}
          >
            <XAxis
              dataKey="month"
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 10 }}
              dy={8}
            />
            <YAxis hide />
            <Tooltip
              content={<RevenueBarTooltip />}
              cursor={{ fillOpacity: 0.05 }}
            />
            <Bar dataKey="revenue" radius={0}>
              {monthlyRevenueData.map((_, index) => (
                <Cell
                  key={`cell-${index}`}
                  className="duration-200"
                  opacity={index === maxValueData.index ? 1 : 0.2}
                  fill={
                    index === maxValueData.index
                      ? palette.secondary.light
                      : palette.tertiary.light
                  }
                  onMouseEnter={() => setActiveIndex(index)}
                />
              ))}
            </Bar>
            <ReferenceLine
              opacity={0.4}
              y={springyValue}
              stroke="var(--secondary-foreground)"
              strokeWidth={1}
              strokeDasharray="3 3"
              label={<CustomReferenceLabel value={maxValueData.value} />}
            />
          </BarChart>
        </ChartContainer>
      </div>
    </div>
  );
};

// Segmentation Card (Conversion Rate Style)
const SegmentationCard = () => {
  const [activeCustomerIndex, setActiveCustomerIndex] = React.useState<
    number | undefined
  >(undefined);

  const trackedCustomerPoint = React.useMemo(() => {
    if (
      activeCustomerIndex !== undefined &&
      activeCustomerIndex >= 0 &&
      activeCustomerIndex < customerTrendData.length
    ) {
      return {
        index: activeCustomerIndex,
        ...customerTrendData[activeCustomerIndex],
      };
    }

    const fallbackIndex = customerTrendData.length - 1;
    return { index: fallbackIndex, ...customerTrendData[fallbackIndex] };
  }, [activeCustomerIndex]);

  const previousCustomerPoint = React.useMemo(() => {
    const previousIndex = Math.max(0, trackedCustomerPoint.index - 1);
    return customerTrendData[previousIndex];
  }, [trackedCustomerPoint.index]);

  const totalCustomers = trackedCustomerPoint.customers;
  const totalChange =
    previousCustomerPoint.customers === 0
      ? 0
      : ((totalCustomers - previousCustomerPoint.customers) /
        previousCustomerPoint.customers) *
      100;
  const comparisonLabel =
    trackedCustomerPoint.index === 0
      ? "نسبت به ابتدای هفته"
      : `نسبت به ${previousCustomerPoint.day}`;
  const isPositive = totalChange >= 0;

  return (
    <div className="flex min-w-0 flex-col gap-4 border bg-card p-4 sm:gap-5 sm:p-5">
      {/* Header - matches Sales Revenue layout */}
      <div className="flex items-start justify-between gap-4">
        {/* Left: Label + Value + Change */}
        <div className="flex flex-col gap-1">
          <span className="text-xs text-muted-foreground">کل مشتریان</span>
          <span
            className={cn(
              "font-mono",
              "text-xl font-semibold tabular-nums sm:text-3xl",
            )}
          >
            {numberFormatter.format(totalCustomers)}
          </span>
          <span
            className={cn(
              "font-mono",
              "text-[11px] tracking-wide text-muted-foreground uppercase",
            )}
          >
            {trackedCustomerPoint.day}
          </span>
          <div className="flex items-center gap-1">
            <span
              className={cn(
                "font-mono",
                "text-sm font-medium",
                isPositive ? "text-emerald-600" : "text-red-600",
              )}
            >
              {formatChangePercent(totalChange)}
            </span>
            {isPositive ? (
              <ArrowUpRight
                className="size-3.5 text-emerald-600"
                aria-hidden="true"
              />
            ) : (
              <ArrowDownRight
                className="size-3.5 text-red-600"
                aria-hidden="true"
              />
            )}
            <span className="text-sm text-muted-foreground">
              {comparisonLabel}
            </span>
          </div>
        </div>

        {/* Right: Details button */}
        <Button variant="outline" size="sm" className="h-7 px-2 text-xs">
          جزئیات
        </Button>
      </div>

      {/* Segment metrics rows */}
      <div className="flex flex-col gap-3">
        {segments.map((segment) => {
          const isPositive = segment.change >= 0;
          return (
            <div
              key={segment.name}
              className="flex items-center justify-between"
            >
              <span className="text-sm text-muted-foreground">
                {segment.name}
              </span>
              <div className="flex items-center gap-4">
                <span
                  className={cn(
                    "font-mono",
                    "text-sm font-medium tabular-nums",
                  )}
                >
                  {numberFormatter.format(segment.value)}
                </span>
                <div
                  className={cn(
                    "font-mono",
                    "flex items-center gap-0.5 text-xs",
                    isPositive ? "text-emerald-600" : "text-red-600",
                  )}
                >
                  {isPositive ? (
                    <ArrowUpRight className="size-3" aria-hidden="true" />
                  ) : (
                    <ArrowDownRight className="size-3" aria-hidden="true" />
                  )}
                  {formatChangePercent(segment.change)}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Area chart */}
      <div className="h-[120px] w-full">
        <ChartContainer config={customerChartConfig} className="h-full w-full">
          <AreaChart
            data={customerTrendData}
            onMouseMove={(state) => {
              if (typeof state.activeTooltipIndex === "number") {
                setActiveCustomerIndex(state.activeTooltipIndex);
              }
            }}
            onMouseLeave={() => setActiveCustomerIndex(undefined)}
          >
            <defs>
              <linearGradient id="customerGradient" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="0%"
                  stopColor="var(--color-customers)"
                  stopOpacity={0.3}
                />
                <stop
                  offset="100%"
                  stopColor="var(--color-customers)"
                  stopOpacity={0.05}
                />
              </linearGradient>
            </defs>
            <CartesianGrid
              strokeDasharray="3 3"
              vertical={true}
              horizontal={true}
              stroke="hsl(var(--muted-foreground) / 0.3)"
            />
            <XAxis
              dataKey="day"
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 10 }}
              dy={5}
            />
            <YAxis
              axisLine={false}
              tickLine={false}
              tick={{ fontSize: 9 }}
              width={30}
              tickFormatter={(v) => compactNumberFormatter.format(v)}
            />
            <Tooltip
              content={<CustomersAreaTooltip />}
              cursor={{
                stroke: "var(--color-customers)",
                strokeDasharray: "3 3",
                strokeOpacity: 0.35,
              }}
            />
            <ReferenceLine
              x={trackedCustomerPoint.day}
              stroke="var(--color-customers)"
              strokeDasharray="3 3"
              strokeOpacity={0.2}
            />
            <Area
              type="linear"
              dataKey="customers"
              stroke="var(--color-customers)"
              strokeWidth={1}
              fill="url(#customerGradient)"
              activeDot={{
                r: 3.5,
                fill: "var(--color-customers)",
                strokeWidth: 0,
              }}
            />
          </AreaChart>
        </ChartContainer>
      </div>
    </div>
  );
};

// User Retention Cohort Heatmap Card
const UserRetentionCard = () => {
  const maxMonths = 7;

  return (
    <div className="flex min-w-0 flex-col gap-4 border bg-card p-4 sm:gap-5 sm:p-5">
      {/* Header */}
      <div className="flex items-start justify-between gap-4">
        <div className="flex flex-col gap-1">
          <span className="text-xs text-muted-foreground">نگهداشت کاربر</span>
          <span
            className={cn("font-mono", "text-xl font-semibold sm:text-3xl")}
          >
            {percentFormatter.format(0.24)}
          </span>
          <div className="flex items-center gap-1">
            <span
              className={cn(
                "font-mono",
                "text-sm font-medium text-emerald-600",
              )}
            >
              {formatChangePercent(2.0)}
            </span>
            <ArrowUpRight
              className="size-3.5 text-emerald-600"
              aria-hidden="true"
            />
          </div>
        </div>
        <Button variant="outline" size="sm" className="h-7 px-2 text-xs">
          جزئیات
        </Button>
      </div>

      {/* Heatmap */}
      <div className="flex flex-col gap-px">
        {cohortRetentionData.map((cohort) => (
          <div
            key={cohort.label}
            className="grid gap-px"
            style={{
              gridTemplateColumns: `repeat(${maxMonths}, minmax(0, 1fr))`,
            }}
          >
            {cohort.retentionByMonth.map((value, monthIndex) => (
              <ShadTooltipProvider key={monthIndex}>
                <ShadTooltip>
                  <ShadTooltipTrigger asChild>
                    <div
                      className="h-5 cursor-default transition-shadow hover:ring-1 hover:ring-foreground/20"
                      style={{
                        backgroundColor: getRetentionColor(value),
                      }}
                    />
                  </ShadTooltipTrigger>
                  <ShadTooltipContent>
                    <span className={cn("font-mono", "text-xs")}>
                      {cohort.label}  ماه{" "}
                      {(monthIndex + 1).toLocaleString("fa-IR")}:{" "}
                      {value.toLocaleString("fa-IR")}٪
                    </span>
                  </ShadTooltipContent>
                </ShadTooltip>
              </ShadTooltipProvider>
            ))}
          </div>
        ))}
      </div>

      {/* X-axis labels */}
      <div
        className="grid gap-px"
        style={{
          gridTemplateColumns: `repeat(${maxMonths}, minmax(0, 1fr))`,
        }}
      >
        {Array.from({ length: maxMonths }, (_, i) => (
          <span
            key={i}
            className={cn(
              "font-mono",
              "text-center text-[10px] text-muted-foreground",
            )}
          >
            {(i + 1).toLocaleString("fa-IR")}
          </span>
        ))}
      </div>
    </div>
  );
};

const StoreVisitsTargetLineChart = () => {
  const chartWrapperRef = React.useRef<HTMLDivElement>(null);
  const [chartWidth, setChartWidth] = React.useState(0);
  const [axis, setAxis] = React.useState(0);

  const lastVisitValue =
    storeVisitsData[storeVisitsData.length - 1]?.visits ?? 0;

  const axisSpring = useSpring(0, {
    stiffness: 100,
    damping: 30,
  });
  const valueSpring = useSpring(lastVisitValue, {
    stiffness: 100,
    damping: 30,
  });
  const [springyValue, setSpringyValue] = React.useState(lastVisitValue);

  useMotionValueEvent(axisSpring, "change", (latest) => {
    setAxis(Number(latest));
  });

  useMotionValueEvent(valueSpring, "change", (latest) => {
    setSpringyValue(Number(Number(latest).toFixed(0)));
  });

  React.useEffect(() => {
    const el = chartWrapperRef.current;
    if (!el) return;

    const updateWidth = () => {
      const nextWidth = Math.max(
        0,
        Math.floor(el.getBoundingClientRect().width),
      );
      setChartWidth(nextWidth);
      setAxis((prev) => (prev === 0 ? nextWidth : prev));
    };

    updateWidth();
    const ro = new ResizeObserver(updateWidth);
    ro.observe(el);

    return () => {
      ro.disconnect();
    };
  }, []);

  React.useEffect(() => {
    valueSpring.set(lastVisitValue);
  }, [lastVisitValue, valueSpring]);

  const safeAxis =
    chartWidth > 0 ? Math.min(Math.max(axis, 0), chartWidth) : axis;
  const rightInset = chartWidth > 0 ? Math.max(0, chartWidth - safeAxis) : 0;
  const clipPath =
    chartWidth > 0 ? `inset(0px ${rightInset}px 0px 0px)` : undefined;

  const tagWidth = 56;
  const tagHeight = 18;
  const tagHalfWidth = tagWidth / 2;
  const tagX =
    chartWidth > 0
      ? Math.min(Math.max(safeAxis - tagWidth, 0), chartWidth - tagWidth)
      : 0;
  const textX =
    chartWidth > 0
      ? Math.min(
        Math.max(safeAxis - tagHalfWidth, tagHalfWidth),
        chartWidth - tagHalfWidth,
      )
      : 0;

  return (
    <div ref={chartWrapperRef} className="h-full w-full min-w-0">
      <ChartContainer config={visitsChartConfig} className="h-full w-full">
        <AreaChart
          className="overflow-visible"
          data={storeVisitsData}
          margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
          onMouseMove={(state: any) => {
            const x = state.activeCoordinate?.x;
            const dataValue = state.activePayload?.[0]?.value;
            if (typeof x === "number" && dataValue !== undefined) {
              axisSpring.set(x);
              valueSpring.set(Number(dataValue));
            }
          }}
          onMouseLeave={() => {
            if (chartWidth > 0) axisSpring.set(chartWidth);
            valueSpring.set(lastVisitValue);
          }}
        >
          <defs>
            <linearGradient id="visitsGradient" x1="0" y1="0" x2="0" y2="1">
              <stop
                offset="0%"
                stopColor="var(--color-visits)"
                stopOpacity={0.3}
              />
              <stop
                offset="100%"
                stopColor="var(--color-visits)"
                stopOpacity={0.05}
              />
            </linearGradient>
          </defs>
          <XAxis
            dataKey="date"
            axisLine={false}
            tickLine={false}
            tick={{ fontSize: 10 }}
            dy={8}
            interval={0}
            padding={{ left: 12, right: 12 }}
          />

          <Area
            type="monotone"
            dataKey="visits"
            stroke="var(--color-visits)"
            strokeWidth={1}
            fill="url(#visitsGradient)"
            fillOpacity={0.4}
            clipPath={clipPath}
          />
          <line
            x1={safeAxis}
            y1={0}
            x2={safeAxis}
            y2="85%"
            stroke="var(--color-visits)"
            strokeDasharray="3 3"
            strokeLinecap="round"
            strokeOpacity={0.2}
          />
          <rect
            x={tagX}
            y={0}
            width={tagWidth}
            height={tagHeight}
            fill="var(--secondary-foreground)"
          />
          <text
            x={textX}
            fontWeight={600}
            y={13}
            textAnchor="middle"
            fill="var(--primary-foreground)"
          >
            {compactNumberFormatter.format(springyValue)}
          </text>
          <Area
            type="monotone"
            dataKey="visits"
            stroke="var(--color-visits)"
            strokeOpacity={0.1}
            fill="none"
          />
        </AreaChart>
      </ChartContainer>
    </div>
  );
};

// Store Visits Card with Area Chart
const StoreVisitsCard = () => {
  const totalVisits = 701340000;
  const changePercent = -12.5;

  return (
    <div className="flex min-w-0 flex-col gap-4 border bg-card p-4 sm:gap-5 sm:p-5 lg:col-span-2">
      <div className="flex items-start justify-between gap-4">
        {/* Left: Title + Value + Change */}
        <div className="flex flex-col gap-1">
          <span className="text-xs text-muted-foreground">بازدید فروشگاه</span>
          <span
            className={cn("font-mono", "text-xl font-semibold sm:text-3xl")}
          >
            {compactNumberFormatter.format(totalVisits)}
          </span>
          <div className="flex items-center gap-1">
            <span
              className={cn("font-mono", "text-sm font-medium text-red-600")}
            >
              {formatChangePercent(changePercent, false)}
            </span>
            <ArrowDownRight
              className="size-3.5 text-red-600"
              aria-hidden="true"
            />
            <span className="text-sm text-muted-foreground">نسبت به ماه قبل</span>
          </div>
        </div>

        {/* Right: Growth sections */}
        <div className="flex flex-wrap gap-2">
          <GrowthSection label="۳ ماه" change={25} />
          <GrowthSection label="۶ ماه" change={25} />
          <GrowthSection label="۱ سال" change={-12.5} />
        </div>
      </div>

      <div className="h-[140px] w-full min-w-0 sm:h-[160px]">
        <StoreVisitsTargetLineChart />
      </div>
    </div>
  );
};

// Main Dashboard Content
const DashboardContent = () => {
  return (
    <div
      id="dashboard-main"
      className="flex h-full w-full flex-1 flex-col gap-4 overflow-auto p-4 sm:gap-6 sm:p-6"
    >
      {/* KPI Stats Row */}
      <KPIStatsRow />

      {/* Middle Row: Sales Revenue + Segmentation */}
      <div className="grid gap-4 sm:gap-6 lg:grid-cols-3">
        <SalesRevenueCard />
        <SegmentationCard />
      </div>

      {/* Bottom Row: User Retention + Store Visits */}
      <div className="grid gap-4 sm:gap-6 lg:grid-cols-3">
        <UserRetentionCard />
        <StoreVisitsCard />
      </div>
    </div>
  );
};

// ============================================================================
// Main Dashboard Component
// ============================================================================

const Dashboard11 = ({ 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 { Dashboard11 };