1358 lines
41 KiB
TypeScript
1358 lines
41 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
BarChart3,
|
|
Bell,
|
|
Box,
|
|
ChevronRight,
|
|
ChevronsUpDown,
|
|
ClipboardList,
|
|
Globe,
|
|
HelpCircle,
|
|
LayoutDashboard,
|
|
LogOut,
|
|
MessageSquare,
|
|
MoreHorizontal,
|
|
Package,
|
|
RotateCcw,
|
|
Search,
|
|
Settings,
|
|
Truck,
|
|
User,
|
|
Users,
|
|
} from "lucide-react";
|
|
import * as React from "react";
|
|
import type { TooltipProps } from "recharts";
|
|
import {
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
Line,
|
|
LineChart,
|
|
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,
|
|
DropdownMenuCheckboxItem,
|
|
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,
|
|
SidebarInset,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuSub,
|
|
SidebarMenuSubButton,
|
|
SidebarMenuSubItem,
|
|
SidebarProvider,
|
|
SidebarRail,
|
|
SidebarTrigger,
|
|
} from "@/components/ui/sidebar";
|
|
import { TooltipProvider } 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 TimePeriod = "6months" | "year";
|
|
|
|
type StatGridItem = {
|
|
label: string;
|
|
value: number;
|
|
format: "currency" | "number" | "percent" | "days" | "compact";
|
|
change: number;
|
|
invertColor: boolean;
|
|
};
|
|
|
|
type FulfillmentItem = {
|
|
order: string;
|
|
shipped: Date;
|
|
progress: number;
|
|
segments: 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: 1,
|
|
});
|
|
|
|
const numberFormatter = new Intl.NumberFormat("fa-IR");
|
|
const compactNumberFormatter = new Intl.NumberFormat("fa-IR", {
|
|
notation: "compact",
|
|
});
|
|
const percentFormatter = new Intl.NumberFormat("fa-IR", {
|
|
style: "percent",
|
|
maximumFractionDigits: 1,
|
|
});
|
|
const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
|
|
maximumFractionDigits: 1,
|
|
});
|
|
const weekdayFormatter = new Intl.DateTimeFormat("fa-IR", {
|
|
weekday: "short",
|
|
});
|
|
const monthDayFormatter = new Intl.DateTimeFormat("fa-IR", {
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
const shippedDateFormatter = new Intl.DateTimeFormat("fa-IR", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
});
|
|
|
|
const monthLabel = (monthIndex: number) =>
|
|
new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
|
|
new Date(2025, monthIndex, 1),
|
|
);
|
|
|
|
const formatStatValue = (stat: StatGridItem) => {
|
|
switch (stat.format) {
|
|
case "currency":
|
|
return currencyFormatter.format(stat.value);
|
|
case "percent":
|
|
return percentFormatter.format(stat.value);
|
|
case "days":
|
|
return `${oneDecimalFormatter.format(stat.value)} روز`;
|
|
case "compact":
|
|
return compactNumberFormatter.format(stat.value);
|
|
default:
|
|
return numberFormatter.format(stat.value);
|
|
}
|
|
};
|
|
|
|
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 revenueChartConfig = {
|
|
thisYear: { label: "امسال", color: palette.primary },
|
|
prevYear: { label: "سال قبل", theme: palette.secondary },
|
|
} satisfies ChartConfig;
|
|
|
|
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: Box,
|
|
href: "#",
|
|
children: [
|
|
{ label: "همه محصولات", icon: Package, href: "#" },
|
|
{ label: "دستهبندیها", icon: Package, href: "#" },
|
|
{ label: "موجودی", icon: Package, href: "#" },
|
|
],
|
|
},
|
|
{ label: "مشتریان", icon: Users, href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "تحلیل فروش",
|
|
defaultOpen: true,
|
|
items: [
|
|
{ label: "تحلیل فروش", icon: BarChart3, href: "#" },
|
|
{ label: "گزارشها", icon: Globe, href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "سایر",
|
|
defaultOpen: false,
|
|
items: [
|
|
{ label: "ارسال", icon: Truck, href: "#" },
|
|
{ label: "پیامها", icon: MessageSquare, href: "#" },
|
|
{ label: "مرجوعیها", icon: RotateCcw, href: "#" },
|
|
],
|
|
},
|
|
],
|
|
footerGroup: {
|
|
title: "تنظیمات",
|
|
items: [{ label: "تنظیمات", icon: Settings, href: "#" }],
|
|
},
|
|
user: {
|
|
name: "علی رضایی",
|
|
email: "john@acme.store",
|
|
avatar:
|
|
"/block-media/shadcnblocks/block/avatar-4.webp",
|
|
},
|
|
};
|
|
|
|
const fullYearData = [
|
|
{ month: monthLabel(0), thisYear: 42000, prevYear: 38000 },
|
|
{ month: monthLabel(1), thisYear: 38000, prevYear: 45000 },
|
|
{ month: monthLabel(2), thisYear: 52000, prevYear: 41000 },
|
|
{ month: monthLabel(3), thisYear: 45000, prevYear: 48000 },
|
|
{ month: monthLabel(4), thisYear: 58000, prevYear: 44000 },
|
|
{ month: monthLabel(5), thisYear: 41000, prevYear: 52000 },
|
|
{ month: monthLabel(6), thisYear: 55000, prevYear: 47000 },
|
|
{ month: monthLabel(7), thisYear: 48000, prevYear: 53000 },
|
|
{ month: monthLabel(8), thisYear: 62000, prevYear: 49000 },
|
|
{ month: monthLabel(9), thisYear: 54000, prevYear: 58000 },
|
|
{ month: monthLabel(10), thisYear: 67000, prevYear: 52000 },
|
|
{ month: monthLabel(11), thisYear: 71000, prevYear: 61000 },
|
|
];
|
|
|
|
const periodLabels: Record<TimePeriod, string> = {
|
|
"6months": "۶ ماه اخیر",
|
|
year: "۱۲ ماه",
|
|
};
|
|
|
|
function getDataForPeriod(period: TimePeriod) {
|
|
if (period === "6months") return fullYearData.slice(0, 6);
|
|
return fullYearData;
|
|
}
|
|
|
|
const statsGridData: StatGridItem[] = [
|
|
{
|
|
label: "درآمد کل",
|
|
value: 1_800_000,
|
|
format: "currency",
|
|
change: 12.0,
|
|
invertColor: false,
|
|
},
|
|
{
|
|
label: "میانگین تکمیل",
|
|
value: 2.4,
|
|
format: "days",
|
|
change: -5.0,
|
|
invertColor: false,
|
|
},
|
|
{
|
|
label: "سفارشها",
|
|
value: 9420,
|
|
format: "number",
|
|
change: 18.0,
|
|
invertColor: false,
|
|
},
|
|
{
|
|
label: "نرخ تبدیل",
|
|
value: 0.042,
|
|
format: "percent",
|
|
change: 1.2,
|
|
invertColor: false,
|
|
},
|
|
{
|
|
label: "نرخ مرجوعی",
|
|
value: 0.031,
|
|
format: "percent",
|
|
change: -11.0,
|
|
invertColor: true,
|
|
},
|
|
{
|
|
label: "بازدید صفحات",
|
|
value: 184_000,
|
|
format: "compact",
|
|
change: 22.0,
|
|
invertColor: false,
|
|
},
|
|
];
|
|
|
|
const categoryWeekData = [
|
|
{
|
|
day: weekdayFormatter.format(new Date(2025, 0, 6)),
|
|
electronics: 180,
|
|
clothing: 220,
|
|
homeGarden: 280,
|
|
sports: 350,
|
|
},
|
|
{
|
|
day: weekdayFormatter.format(new Date(2025, 0, 7)),
|
|
electronics: 420,
|
|
clothing: 550,
|
|
homeGarden: 380,
|
|
sports: 280,
|
|
},
|
|
{
|
|
day: weekdayFormatter.format(new Date(2025, 0, 8)),
|
|
electronics: 280,
|
|
clothing: 380,
|
|
homeGarden: 520,
|
|
sports: 450,
|
|
},
|
|
{
|
|
day: weekdayFormatter.format(new Date(2025, 0, 9)),
|
|
electronics: 550,
|
|
clothing: 280,
|
|
homeGarden: 420,
|
|
sports: 620,
|
|
},
|
|
{
|
|
day: weekdayFormatter.format(new Date(2025, 0, 10)),
|
|
electronics: 323,
|
|
clothing: 729,
|
|
homeGarden: 506,
|
|
sports: 490,
|
|
},
|
|
{
|
|
day: weekdayFormatter.format(new Date(2025, 0, 11)),
|
|
electronics: 480,
|
|
clothing: 420,
|
|
homeGarden: 280,
|
|
sports: 380,
|
|
},
|
|
{
|
|
day: weekdayFormatter.format(new Date(2025, 0, 12)),
|
|
electronics: 220,
|
|
clothing: 550,
|
|
homeGarden: 450,
|
|
sports: 320,
|
|
},
|
|
];
|
|
|
|
const categoryMonthData = [
|
|
{
|
|
day: monthDayFormatter.format(new Date(2025, 0, 1)),
|
|
electronics: 180,
|
|
clothing: 220,
|
|
homeGarden: 280,
|
|
sports: 350,
|
|
},
|
|
{
|
|
day: monthDayFormatter.format(new Date(2025, 0, 5)),
|
|
electronics: 420,
|
|
clothing: 550,
|
|
homeGarden: 380,
|
|
sports: 280,
|
|
},
|
|
{
|
|
day: monthDayFormatter.format(new Date(2025, 0, 9)),
|
|
electronics: 280,
|
|
clothing: 380,
|
|
homeGarden: 520,
|
|
sports: 450,
|
|
},
|
|
{
|
|
day: monthDayFormatter.format(new Date(2025, 0, 13)),
|
|
electronics: 550,
|
|
clothing: 280,
|
|
homeGarden: 420,
|
|
sports: 620,
|
|
},
|
|
{
|
|
day: monthDayFormatter.format(new Date(2025, 0, 15)),
|
|
electronics: 323,
|
|
clothing: 729,
|
|
homeGarden: 506,
|
|
sports: 490,
|
|
},
|
|
{
|
|
day: monthDayFormatter.format(new Date(2025, 0, 17)),
|
|
electronics: 480,
|
|
clothing: 420,
|
|
homeGarden: 280,
|
|
sports: 380,
|
|
},
|
|
{
|
|
day: monthDayFormatter.format(new Date(2025, 0, 21)),
|
|
electronics: 220,
|
|
clothing: 550,
|
|
homeGarden: 450,
|
|
sports: 320,
|
|
},
|
|
{
|
|
day: monthDayFormatter.format(new Date(2025, 0, 25)),
|
|
electronics: 380,
|
|
clothing: 320,
|
|
homeGarden: 580,
|
|
sports: 480,
|
|
},
|
|
{
|
|
day: monthDayFormatter.format(new Date(2025, 0, 30)),
|
|
electronics: 520,
|
|
clothing: 450,
|
|
homeGarden: 350,
|
|
sports: 420,
|
|
},
|
|
];
|
|
|
|
const categoryChartConfig = {
|
|
electronics: { label: "الکترونیک", color: palette.primary },
|
|
clothing: {
|
|
label: "پوشاک",
|
|
theme: palette.secondary,
|
|
},
|
|
homeGarden: {
|
|
label: "خانه و باغ",
|
|
theme: palette.tertiary,
|
|
},
|
|
sports: {
|
|
label: "ورزشی",
|
|
theme: palette.quaternary,
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
const fulfillmentData: FulfillmentItem[] = [
|
|
{
|
|
order: "ORD-4821",
|
|
shipped: new Date(2025, 0, 27),
|
|
progress: 92,
|
|
segments: [
|
|
0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.5, 0.8, 0.9, 1.0, 0.6, 0.7, 0.8,
|
|
0.9, 1.0, 0.5, 0.7, 0.8, 0.9, 0.6, 1.0, 0.8, 0.7, 0.3, 0.2, 0.1, 0.1, 0.1,
|
|
],
|
|
},
|
|
{
|
|
order: "ORD-4819",
|
|
shipped: new Date(2025, 0, 26),
|
|
progress: 78,
|
|
segments: [
|
|
0.8, 0.6, 0.9, 0.7, 1.0, 0.5, 0.8, 0.9, 0.6, 0.7, 1.0, 0.8, 0.5, 0.9, 0.7,
|
|
0.6, 0.8, 1.0, 0.7, 0.5, 0.2, 0.1, 0.15, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
|
|
0.1,
|
|
],
|
|
},
|
|
{
|
|
order: "ORD-4815",
|
|
shipped: new Date(2025, 0, 25),
|
|
progress: 100,
|
|
segments: [
|
|
1.0, 0.9, 0.8, 1.0, 0.7, 0.9, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0,
|
|
0.6, 0.8, 0.9, 1.0, 0.7, 0.9, 0.8, 1.0, 0.6, 0.9, 0.7, 1.0, 0.8, 0.9, 1.0,
|
|
],
|
|
},
|
|
{
|
|
order: "ORD-4812",
|
|
shipped: new Date(2025, 0, 24),
|
|
progress: 65,
|
|
segments: [
|
|
0.9, 1.0, 0.7, 0.8, 0.6, 0.9, 0.5, 0.8, 1.0, 0.7, 0.9, 0.6, 0.8, 0.5, 0.7,
|
|
1.0, 0.6, 0.9, 0.8, 0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
|
|
],
|
|
},
|
|
{
|
|
order: "ORD-4808",
|
|
shipped: new Date(2025, 0, 23),
|
|
progress: 43,
|
|
segments: [
|
|
0.8, 0.7, 1.0, 0.6, 0.9, 0.8, 0.5, 0.7, 1.0, 0.9, 0.6, 0.8, 0.7, 0.1, 0.1,
|
|
0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
|
|
],
|
|
},
|
|
{
|
|
order: "ORD-4805",
|
|
shipped: new Date(2025, 0, 22),
|
|
progress: 100,
|
|
segments: [
|
|
0.9, 0.8, 1.0, 0.7, 0.9, 0.6, 1.0, 0.8, 0.7, 0.9, 1.0, 0.8, 0.6, 0.9, 0.7,
|
|
1.0, 0.8, 0.9, 0.7, 1.0, 0.8, 0.9, 0.6, 1.0, 0.7, 0.8, 0.9, 1.0, 0.8, 0.9,
|
|
],
|
|
},
|
|
{
|
|
order: "ORD-4801",
|
|
shipped: new Date(2025, 0, 21),
|
|
progress: 88,
|
|
segments: [
|
|
1.0, 0.8, 0.7, 0.9, 0.6, 1.0, 0.8, 0.5, 0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 0.7,
|
|
0.8, 1.0, 0.6, 0.5, 0.3, 0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
|
|
],
|
|
},
|
|
{
|
|
order: "ORD-4798",
|
|
shipped: new Date(2025, 0, 20),
|
|
progress: 55,
|
|
segments: [
|
|
0.7, 0.9, 1.0, 0.6, 0.8, 0.9, 0.7, 1.0, 0.5, 0.8, 0.6, 0.9, 0.1, 0.1, 0.1,
|
|
0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
|
|
],
|
|
},
|
|
{
|
|
order: "ORD-4794",
|
|
shipped: new Date(2025, 0, 19),
|
|
progress: 100,
|
|
segments: [
|
|
0.8, 1.0, 0.9, 0.7, 0.8, 1.0, 0.6, 0.9, 0.8, 1.0, 0.7, 0.9, 0.8, 1.0, 0.6,
|
|
0.9, 0.7, 1.0, 0.8, 0.9, 0.7, 1.0, 0.8, 0.6, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0,
|
|
],
|
|
},
|
|
{
|
|
order: "ORD-4790",
|
|
shipped: new Date(2025, 0, 18),
|
|
progress: 71,
|
|
segments: [
|
|
0.9, 0.6, 0.8, 1.0, 0.7, 0.9, 0.5, 0.8, 1.0, 0.6, 0.9, 0.7, 0.8, 0.5, 0.3,
|
|
0.2, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
|
|
],
|
|
},
|
|
{
|
|
order: "ORD-4786",
|
|
shipped: new Date(2025, 0, 17),
|
|
progress: 35,
|
|
segments: [
|
|
1.0, 0.8, 0.9, 0.7, 0.6, 0.8, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
|
|
0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1,
|
|
],
|
|
},
|
|
{
|
|
order: "ORD-4782",
|
|
shipped: new Date(2025, 0, 16),
|
|
progress: 96,
|
|
segments: [
|
|
0.8, 0.9, 1.0, 0.7, 0.8, 0.9, 1.0, 0.6, 0.8, 0.9, 1.0, 0.7, 0.9, 0.8, 1.0,
|
|
0.6, 0.9, 0.7, 1.0, 0.8, 0.9, 0.6, 1.0, 0.8, 0.7, 0.9, 1.0, 0.8, 0.3, 0.1,
|
|
],
|
|
},
|
|
];
|
|
|
|
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">
|
|
<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 rounded-md 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>
|
|
);
|
|
};
|
|
|
|
function CustomTooltip({
|
|
active,
|
|
payload,
|
|
label,
|
|
colors,
|
|
}: any & {
|
|
colors: { primary: string; secondary: string };
|
|
}) {
|
|
if (!active || !payload?.length) return null;
|
|
|
|
const thisYear = payload.find((p: any) => p.dataKey === "thisYear")?.value || 0;
|
|
const prevYear = payload.find((p: any) => p.dataKey === "prevYear")?.value || 0;
|
|
const diff = Number(thisYear) - Number(prevYear);
|
|
const percentage = prevYear ? Math.round((diff / Number(prevYear)) * 100) : 0;
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
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}، {currentYear.toLocaleString("fa-IR")}
|
|
</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: colors.primary }}
|
|
/>
|
|
<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(thisYear))}
|
|
</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: colors.secondary }}
|
|
/>
|
|
<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(prevYear))}
|
|
</span>
|
|
</div>
|
|
<div className="mt-1 border-t border-border pt-1">
|
|
<span
|
|
className={cn(
|
|
"text-[10px] font-medium sm:text-xs",
|
|
diff >= 0 ? "text-emerald-500" : "text-red-500",
|
|
)}
|
|
>
|
|
{diff >= 0 ? "+" : ""}
|
|
{percentage.toLocaleString("fa-IR")}٪ نسبت به سال قبل
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const RevenueFlowChart = () => {
|
|
const [period, setPeriod] = React.useState<TimePeriod>("6months");
|
|
|
|
React.useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
const params = new URLSearchParams(window.location.search);
|
|
const nextPeriod = params.get("period");
|
|
if (nextPeriod === "6months" || nextPeriod === "year") {
|
|
setPeriod(nextPeriod);
|
|
}
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (period !== "6months") {
|
|
params.set("period", period);
|
|
} else {
|
|
params.delete("period");
|
|
}
|
|
const nextQuery = params.toString();
|
|
const nextUrl = nextQuery
|
|
? `${window.location.pathname}?${nextQuery}`
|
|
: window.location.pathname;
|
|
window.history.replaceState(null, "", nextUrl);
|
|
}, [period]);
|
|
|
|
const chartData = getDataForPeriod(period);
|
|
const totalRevenue = chartData.reduce((acc, item) => acc + item.thisYear, 0);
|
|
|
|
return (
|
|
<div className="flex min-w-0 flex-1 flex-col gap-4 rounded-xl border bg-card p-4 sm:gap-6 sm:p-6">
|
|
<div className="flex flex-wrap items-center gap-2 sm:gap-4">
|
|
<div className="flex flex-1 flex-col gap-1">
|
|
<p className="text-xl leading-tight font-semibold tracking-tight sm:text-xl">
|
|
{currencyFormatter.format(totalRevenue)}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
درآمد کل ({periodLabels[period]})
|
|
</p>
|
|
</div>
|
|
<div className="hidden items-center gap-3 sm:flex sm:gap-5">
|
|
<div className="flex items-center gap-1.5">
|
|
<div
|
|
className="size-2.5 rounded-full sm:size-3"
|
|
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.5 rounded-full sm:size-3"
|
|
style={{ backgroundColor: palette.secondary.light }}
|
|
/>
|
|
<span className="text-[10px] text-muted-foreground sm:text-xs">
|
|
سال قبل
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-7 sm:size-8"
|
|
aria-label="انتخاب بازه زمانی"
|
|
>
|
|
<MoreHorizontal className="size-4" aria-hidden="true" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
<DropdownMenuLabel>بازه زمانی</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
{(Object.keys(periodLabels) as TimePeriod[]).map((key) => (
|
|
<DropdownMenuCheckboxItem
|
|
key={key}
|
|
checked={period === key}
|
|
onCheckedChange={() => setPeriod(key)}
|
|
>
|
|
{periodLabels[key]}
|
|
</DropdownMenuCheckboxItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<div className="h-[200px] w-full min-w-0 sm:h-[240px] lg:h-[280px]">
|
|
<ChartContainer config={revenueChartConfig} className="h-full w-full">
|
|
<BarChart data={chartData} barGap={2}>
|
|
<CartesianGrid strokeDasharray="0" vertical={false} />
|
|
<XAxis
|
|
dataKey="month"
|
|
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={
|
|
<CustomTooltip
|
|
colors={{
|
|
primary: "var(--color-thisYear)",
|
|
secondary: "var(--color-prevYear)",
|
|
}}
|
|
/>
|
|
}
|
|
cursor={{ fillOpacity: 0.05, radius: 4 }}
|
|
/>
|
|
<Bar
|
|
dataKey="thisYear"
|
|
fill="var(--color-thisYear)"
|
|
radius={[4, 4, 0, 0]}
|
|
maxBarSize={24}
|
|
/>
|
|
<Bar
|
|
dataKey="prevYear"
|
|
fill="var(--color-prevYear)"
|
|
fillOpacity={0.4}
|
|
radius={[4, 4, 0, 0]}
|
|
maxBarSize={24}
|
|
/>
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const StatsCardsGrid = () => {
|
|
return (
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 xl:w-[420px] xl:grid-cols-2">
|
|
{statsGridData.map((stat) => {
|
|
const isPositive = stat.invertColor ? stat.change < 0 : stat.change > 0;
|
|
|
|
return (
|
|
<div
|
|
key={stat.label}
|
|
className="flex flex-col rounded-xl border bg-card p-4 sm:p-5"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<span className="text-xs text-muted-foreground sm:text-sm">
|
|
{stat.label}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="-mt-1 -me-2 size-6 text-muted-foreground"
|
|
aria-label={`گزینههای بیشتر برای ${stat.label}`}
|
|
>
|
|
<MoreHorizontal className="size-3.5" aria-hidden="true" />
|
|
</Button>
|
|
</div>
|
|
<span className="mt-3 text-lg font-semibold tracking-tight sm:text-xl">
|
|
{formatStatValue(stat)}
|
|
</span>
|
|
<div className="mt-1 flex items-center gap-2 text-[10px] sm:text-xs">
|
|
<span
|
|
className={cn(
|
|
"font-medium",
|
|
isPositive
|
|
? "text-emerald-600 dark:text-emerald-400"
|
|
: "text-red-600 dark:text-red-400",
|
|
)}
|
|
>
|
|
{stat.change > 0 ? "+" : ""}
|
|
{stat.change.toLocaleString("fa-IR", {
|
|
minimumFractionDigits: 1,
|
|
maximumFractionDigits: 1,
|
|
})}
|
|
٪
|
|
</span>
|
|
<span className="text-muted-foreground">نسبت به ماه قبل</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const CategoryPerformanceChart = () => {
|
|
const [tab, setTab] = React.useState<"week" | "month">("week");
|
|
|
|
React.useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
const params = new URLSearchParams(window.location.search);
|
|
const nextTab = params.get("categoryTab");
|
|
if (nextTab === "week" || nextTab === "month") {
|
|
setTab(nextTab);
|
|
}
|
|
}, []);
|
|
|
|
React.useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (tab !== "week") {
|
|
params.set("categoryTab", tab);
|
|
} else {
|
|
params.delete("categoryTab");
|
|
}
|
|
const nextQuery = params.toString();
|
|
const nextUrl = nextQuery
|
|
? `${window.location.pathname}?${nextQuery}`
|
|
: window.location.pathname;
|
|
window.history.replaceState(null, "", nextUrl);
|
|
}, [tab]);
|
|
|
|
const chartData = tab === "week" ? categoryWeekData : categoryMonthData;
|
|
const totalOrders = chartData.reduce(
|
|
(acc, item) =>
|
|
acc + item.electronics + item.clothing + item.homeGarden + item.sports,
|
|
0,
|
|
);
|
|
|
|
return (
|
|
<div className="flex min-w-0 flex-1 flex-col gap-4 rounded-xl border bg-card p-5">
|
|
<div className="flex flex-wrap items-start justify-between gap-2">
|
|
<div className="flex flex-col gap-1">
|
|
<h2 className="text-sm font-medium text-pretty">
|
|
عملکرد دستهها
|
|
</h2>
|
|
<span className="text-xl font-bold tracking-tight">
|
|
{numberFormatter.format(totalOrders)}
|
|
</span>
|
|
<div className="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1">
|
|
{Object.entries(categoryChartConfig).map(([key, config]) => (
|
|
<div key={key} className="flex items-center gap-1.5">
|
|
<div
|
|
className="size-2 rounded-full"
|
|
style={{
|
|
backgroundColor:
|
|
"color" in config ? config.color : config.theme.light,
|
|
}}
|
|
/>
|
|
<span className="text-[10px] text-muted-foreground">
|
|
{config.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-0.5 rounded-lg border bg-muted/50 p-0.5">
|
|
{(
|
|
[
|
|
{ value: "week" as const, label: "هفته" },
|
|
{ value: "month" as const, label: "ماه" },
|
|
] as const
|
|
).map(({ value, label }) => (
|
|
<button
|
|
key={value}
|
|
onClick={() => setTab(value)}
|
|
className={cn(
|
|
"rounded-md px-3 py-1 text-xs font-medium transition-colors",
|
|
tab === value
|
|
? "bg-background text-foreground shadow-sm"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="h-[240px] w-full min-w-0 sm:h-[280px]">
|
|
<ChartContainer config={categoryChartConfig} className="h-full w-full">
|
|
<LineChart data={chartData}>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
|
<XAxis
|
|
dataKey="day"
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tick={{ fontSize: 10 }}
|
|
dy={8}
|
|
/>
|
|
<YAxis
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tick={{ fontSize: 10 }}
|
|
dx={-5}
|
|
domain={[0, 1000]}
|
|
width={32}
|
|
/>
|
|
<Tooltip
|
|
content={({ active, payload, label }) => {
|
|
if (!active || !payload?.length) return null;
|
|
return (
|
|
<div className="rounded-lg border border-border bg-popover p-2 shadow-lg">
|
|
<p className="mb-1 text-xs font-medium text-foreground">
|
|
{label}
|
|
</p>
|
|
{payload.map((entry) => (
|
|
<div
|
|
key={`${entry.dataKey ?? entry.name ?? "revenue"}`}
|
|
className="flex items-center gap-1.5 text-[10px]"
|
|
>
|
|
<div
|
|
className="size-2 rounded-full"
|
|
style={{ backgroundColor: entry.color }}
|
|
/>
|
|
<span className="text-muted-foreground">
|
|
{categoryChartConfig[
|
|
entry.dataKey as keyof typeof categoryChartConfig
|
|
]?.label ?? entry.dataKey}
|
|
:
|
|
</span>
|
|
<span className="font-medium text-foreground">
|
|
{numberFormatter.format(Number(entry.value))}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="electronics"
|
|
stroke="var(--color-electronics)"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
activeDot={{ r: 4, strokeWidth: 0 }}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="clothing"
|
|
stroke="var(--color-clothing)"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
activeDot={{ r: 4, strokeWidth: 0 }}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="homeGarden"
|
|
stroke="var(--color-homeGarden)"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
activeDot={{ r: 4, strokeWidth: 0 }}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="sports"
|
|
stroke="var(--color-sports)"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
activeDot={{ r: 4, strokeWidth: 0 }}
|
|
/>
|
|
</LineChart>
|
|
</ChartContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FulfillmentPanel = () => {
|
|
return (
|
|
<div className="flex flex-col gap-4 rounded-xl border bg-card p-5 xl:w-[420px]">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<h2 className="text-sm font-medium text-pretty">تکمیل سفارش</h2>
|
|
<div className="flex items-center gap-1">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-7"
|
|
aria-label="بروزرسانی"
|
|
>
|
|
<RotateCcw className="size-3.5" aria-hidden="true" />
|
|
</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-7"
|
|
aria-label="گزینهها"
|
|
>
|
|
<MoreHorizontal className="size-3.5" aria-hidden="true" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem>خروجی جدول</DropdownMenuItem>
|
|
<DropdownMenuItem>مشاهده همه سفارشها</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center border-b pe-3 pb-2 text-[10px] text-muted-foreground">
|
|
<span className="w-20 shrink-0">سفارش</span>
|
|
<span className="w-24 shrink-0">ارسال</span>
|
|
<span className="flex-1">وضعیت</span>
|
|
<span className="w-8 shrink-0 text-end">تحویل٪</span>
|
|
</div>
|
|
<ScrollArea className="h-[280px]">
|
|
<div className="divide-y pe-3">
|
|
{fulfillmentData.map((row) => (
|
|
<div
|
|
key={row.order}
|
|
className="flex items-center gap-2 py-2.5 text-xs"
|
|
>
|
|
<span className="w-20 shrink-0 font-medium">{row.order}</span>
|
|
<span className="w-24 shrink-0 text-muted-foreground">
|
|
{shippedDateFormatter.format(row.shipped)}
|
|
</span>
|
|
<div className="flex min-w-0 flex-1 items-center gap-px overflow-hidden">
|
|
{row.segments.slice(0, 15).map((opacity, i) => {
|
|
const filled = i < Math.round((row.progress / 100) * 15);
|
|
return (
|
|
<div
|
|
key={i}
|
|
className="h-2 w-1.5 shrink-0 rounded-[1px]"
|
|
style={{
|
|
backgroundColor: filled
|
|
? palette.primary
|
|
: "var(--muted)",
|
|
opacity: filled ? opacity : 0.2,
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
<span className="w-8 shrink-0 text-end font-medium">
|
|
{row.progress.toLocaleString("fa-IR")}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</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:p-4 md:p-6"
|
|
>
|
|
<div className="flex flex-col gap-4 xl:flex-row">
|
|
<RevenueFlowChart />
|
|
<StatsCardsGrid />
|
|
</div>
|
|
<div className="flex flex-col gap-4 xl:flex-row">
|
|
<CategoryPerformanceChart />
|
|
<FulfillmentPanel />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Dashboard6 = ({ className }: { className?: string }) => {
|
|
return (
|
|
<TooltipProvider>
|
|
<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>
|
|
</TooltipProvider>
|
|
);
|
|
};
|
|
|
|
export { Dashboard6 };
|