1894 lines
58 KiB
TypeScript
1894 lines
58 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
BarChart3,
|
||
Bell,
|
||
Box,
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
ChevronsLeft,
|
||
ChevronsRight,
|
||
ChevronsUpDown,
|
||
ClipboardList,
|
||
Copy,
|
||
Eye,
|
||
Filter,
|
||
Globe,
|
||
HelpCircle,
|
||
LayoutDashboard,
|
||
LogOut,
|
||
MessageSquare,
|
||
MoreHorizontal,
|
||
Package,
|
||
Pencil,
|
||
RotateCcw,
|
||
Search,
|
||
Settings,
|
||
Truck,
|
||
User,
|
||
Users,
|
||
X,
|
||
} from "lucide-react";
|
||
import * as React from "react";
|
||
import {
|
||
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 {
|
||
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 { 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 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[];
|
||
};
|
||
|
||
type OrderStatus = "Processing" | "Shipped" | "Delivered" | "Cancelled";
|
||
|
||
type Order = {
|
||
id: string;
|
||
orderNumber: string;
|
||
customer: string;
|
||
customerInitials: string;
|
||
products: string[];
|
||
productCount: number;
|
||
status: OrderStatus;
|
||
total: number;
|
||
date: Date;
|
||
};
|
||
|
||
const currencyFormatter = new Intl.NumberFormat("fa-IR", {
|
||
style: "currency",
|
||
currency: "IRR",
|
||
});
|
||
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 dateFormatter = new Intl.DateTimeFormat("fa-IR", {
|
||
month: "short",
|
||
day: "numeric",
|
||
year: "numeric",
|
||
});
|
||
|
||
const orderStatusLabels: Record<OrderStatus, string> = {
|
||
Processing: "در حال پردازش",
|
||
Shipped: "ارسالشده",
|
||
Delivered: "تحویلشده",
|
||
Cancelled: "لغوشده",
|
||
};
|
||
|
||
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 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-5.webp",
|
||
},
|
||
};
|
||
|
||
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;
|
||
|
||
function getCategoryColor(
|
||
config: (typeof categoryChartConfig)[keyof typeof categoryChartConfig],
|
||
): string {
|
||
if ("color" in config && config.color) return config.color;
|
||
if ("theme" in config && config.theme) {
|
||
const theme = config.theme as { light: string; dark: string };
|
||
return theme.light;
|
||
}
|
||
return "var(--primary)";
|
||
}
|
||
|
||
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 orderStatuses: OrderStatus[] = [
|
||
"Processing",
|
||
"Shipped",
|
||
"Delivered",
|
||
"Cancelled",
|
||
];
|
||
|
||
const orders: Order[] = [
|
||
{
|
||
id: "1",
|
||
orderNumber: "ORD-2024-001",
|
||
customer: "Sarah Johnson",
|
||
customerInitials: "SJ",
|
||
products: ["MacBook Pro 14", "Magic Mouse"],
|
||
productCount: 2,
|
||
status: "Delivered",
|
||
total: 2499.0,
|
||
date: new Date(2024, 0, 28),
|
||
},
|
||
{
|
||
id: "2",
|
||
orderNumber: "ORD-2024-002",
|
||
customer: "Michael Chen",
|
||
customerInitials: "MC",
|
||
products: ["iPhone 15 Pro", "AirPods Pro"],
|
||
productCount: 2,
|
||
status: "Shipped",
|
||
total: 1348.0,
|
||
date: new Date(2024, 0, 27),
|
||
},
|
||
{
|
||
id: "3",
|
||
orderNumber: "ORD-2024-003",
|
||
customer: "Emma Wilson",
|
||
customerInitials: "EW",
|
||
products: ["iPad Air", "Apple Pencil", "Smart Keyboard"],
|
||
productCount: 3,
|
||
status: "Processing",
|
||
total: 1198.0,
|
||
date: new Date(2024, 0, 27),
|
||
},
|
||
{
|
||
id: "4",
|
||
orderNumber: "ORD-2024-004",
|
||
customer: "James Rodriguez",
|
||
customerInitials: "JR",
|
||
products: ["Apple Watch Ultra"],
|
||
productCount: 1,
|
||
status: "Delivered",
|
||
total: 799.0,
|
||
date: new Date(2024, 0, 26),
|
||
},
|
||
{
|
||
id: "5",
|
||
orderNumber: "ORD-2024-005",
|
||
customer: "Lisa Park",
|
||
customerInitials: "LP",
|
||
products: ["Mac Mini M2"],
|
||
productCount: 1,
|
||
status: "Cancelled",
|
||
total: 599.0,
|
||
date: new Date(2024, 0, 26),
|
||
},
|
||
{
|
||
id: "6",
|
||
orderNumber: "ORD-2024-006",
|
||
customer: "David Kim",
|
||
customerInitials: "DK",
|
||
products: ["Studio Display", "Mac Studio"],
|
||
productCount: 2,
|
||
status: "Shipped",
|
||
total: 5498.0,
|
||
date: new Date(2024, 0, 25),
|
||
},
|
||
{
|
||
id: "7",
|
||
orderNumber: "ORD-2024-007",
|
||
customer: "Anna Martinez",
|
||
customerInitials: "AM",
|
||
products: ["MacBook Air M2"],
|
||
productCount: 1,
|
||
status: "Delivered",
|
||
total: 1199.0,
|
||
date: new Date(2024, 0, 25),
|
||
},
|
||
{
|
||
id: "8",
|
||
orderNumber: "ORD-2024-008",
|
||
customer: "Robert Taylor",
|
||
customerInitials: "RT",
|
||
products: ["iPhone 15", "MagSafe Charger"],
|
||
productCount: 2,
|
||
status: "Processing",
|
||
total: 878.0,
|
||
date: new Date(2024, 0, 24),
|
||
},
|
||
{
|
||
id: "9",
|
||
orderNumber: "ORD-2024-009",
|
||
customer: "Jennifer Lee",
|
||
customerInitials: "JL",
|
||
products: ["AirPods Max"],
|
||
productCount: 1,
|
||
status: "Shipped",
|
||
total: 549.0,
|
||
date: new Date(2024, 0, 24),
|
||
},
|
||
{
|
||
id: "10",
|
||
orderNumber: "ORD-2024-010",
|
||
customer: "William Brown",
|
||
customerInitials: "WB",
|
||
products: ["iPad Pro 12.9", "Magic Keyboard"],
|
||
productCount: 2,
|
||
status: "Delivered",
|
||
total: 1648.0,
|
||
date: new Date(2024, 0, 23),
|
||
},
|
||
{
|
||
id: "11",
|
||
orderNumber: "ORD-2024-011",
|
||
customer: "Sophia Davis",
|
||
customerInitials: "SD",
|
||
products: ["MacBook Pro 16"],
|
||
productCount: 1,
|
||
status: "Processing",
|
||
total: 2499.0,
|
||
date: new Date(2024, 0, 23),
|
||
},
|
||
{
|
||
id: "12",
|
||
orderNumber: "ORD-2024-012",
|
||
customer: "Daniel Garcia",
|
||
customerInitials: "DG",
|
||
products: ["Apple TV 4K", "HomePod mini"],
|
||
productCount: 2,
|
||
status: "Cancelled",
|
||
total: 278.0,
|
||
date: new Date(2024, 0, 22),
|
||
},
|
||
{
|
||
id: "13",
|
||
orderNumber: "ORD-2024-013",
|
||
customer: "Olivia White",
|
||
customerInitials: "OW",
|
||
products: ["iPhone 15 Pro Max"],
|
||
productCount: 1,
|
||
status: "Delivered",
|
||
total: 1199.0,
|
||
date: new Date(2024, 0, 22),
|
||
},
|
||
{
|
||
id: "14",
|
||
orderNumber: "ORD-2024-014",
|
||
customer: "Thomas Anderson",
|
||
customerInitials: "TA",
|
||
products: ["Mac Pro", "Pro Display XDR"],
|
||
productCount: 2,
|
||
status: "Shipped",
|
||
total: 12498.0,
|
||
date: new Date(2024, 0, 21),
|
||
},
|
||
{
|
||
id: "15",
|
||
orderNumber: "ORD-2024-015",
|
||
customer: "Emily Thompson",
|
||
customerInitials: "ET",
|
||
products: ["iPad mini", "Apple Pencil"],
|
||
productCount: 2,
|
||
status: "Delivered",
|
||
total: 648.0,
|
||
date: new Date(2024, 0, 21),
|
||
},
|
||
{
|
||
id: "16",
|
||
orderNumber: "ORD-2024-016",
|
||
customer: "Christopher Moore",
|
||
customerInitials: "CM",
|
||
products: ["AirPods Pro 2"],
|
||
productCount: 1,
|
||
status: "Processing",
|
||
total: 249.0,
|
||
date: new Date(2024, 0, 20),
|
||
},
|
||
{
|
||
id: "17",
|
||
orderNumber: "ORD-2024-017",
|
||
customer: "Isabella Jackson",
|
||
customerInitials: "IJ",
|
||
products: ["Apple Watch Series 9"],
|
||
productCount: 1,
|
||
status: "Shipped",
|
||
total: 399.0,
|
||
date: new Date(2024, 0, 20),
|
||
},
|
||
{
|
||
id: "18",
|
||
orderNumber: "ORD-2024-018",
|
||
customer: "Matthew Harris",
|
||
customerInitials: "MH",
|
||
products: ["MacBook Air 15"],
|
||
productCount: 1,
|
||
status: "Delivered",
|
||
total: 1299.0,
|
||
date: new Date(2024, 0, 19),
|
||
},
|
||
{
|
||
id: "19",
|
||
orderNumber: "ORD-2024-019",
|
||
customer: "Ava Clark",
|
||
customerInitials: "AC",
|
||
products: ["iPhone SE", "EarPods"],
|
||
productCount: 2,
|
||
status: "Cancelled",
|
||
total: 448.0,
|
||
date: new Date(2024, 0, 19),
|
||
},
|
||
{
|
||
id: "20",
|
||
orderNumber: "ORD-2024-020",
|
||
customer: "Joshua Lewis",
|
||
customerInitials: "JL",
|
||
products: ["Mac Mini M2 Pro"],
|
||
productCount: 1,
|
||
status: "Processing",
|
||
total: 1299.0,
|
||
date: new Date(2024, 0, 18),
|
||
},
|
||
];
|
||
|
||
const PAGE_SIZE_OPTIONS = [10, 25, 50];
|
||
|
||
function readRecentOrdersTableState() {
|
||
const defaults = {
|
||
searchQuery: "",
|
||
statusFilter: "all",
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
};
|
||
|
||
if (typeof window === "undefined") return defaults;
|
||
|
||
const params = new URLSearchParams(window.location.search);
|
||
const statusParam = params.get("status");
|
||
const pageParam = Number.parseInt(params.get("page") ?? "", 10);
|
||
const pageSizeParam = Number.parseInt(params.get("pageSize") ?? "", 10);
|
||
|
||
return {
|
||
searchQuery: params.get("q") ?? "",
|
||
statusFilter:
|
||
statusParam && orderStatuses.includes(statusParam as OrderStatus)
|
||
? statusParam
|
||
: "all",
|
||
currentPage: Number.isFinite(pageParam) && pageParam > 0 ? pageParam : 1,
|
||
pageSize: PAGE_SIZE_OPTIONS.includes(pageSizeParam) ? pageSizeParam : 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">
|
||
<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>
|
||
);
|
||
};
|
||
|
||
const StatsCardsGrid = () => {
|
||
return (
|
||
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
|
||
{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"
|
||
>
|
||
<span className="text-xl font-semibold tracking-tight sm:text-3xl">
|
||
{formatStatValue(stat)}
|
||
</span>
|
||
<div className="mt-2 flex items-center gap-2">
|
||
<span className="text-xs text-muted-foreground sm:text-sm">
|
||
{stat.label}
|
||
</span>
|
||
<span
|
||
className={cn(
|
||
"text-[10px] font-medium sm:text-xs",
|
||
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>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const CategoryPerformanceChart = () => {
|
||
const subscribeToCategoryTab = React.useCallback((onStoreChange: () => void) => {
|
||
if (typeof window === "undefined") return () => {};
|
||
window.addEventListener("popstate", onStoreChange);
|
||
return () => window.removeEventListener("popstate", onStoreChange);
|
||
}, []);
|
||
|
||
const readCategoryTabParam = React.useCallback((): "week" | "month" => {
|
||
if (typeof window === "undefined") return "week";
|
||
const nextTab = new URLSearchParams(window.location.search).get(
|
||
"categoryTab",
|
||
);
|
||
return nextTab === "month" ? "month" : "week";
|
||
}, []);
|
||
|
||
const tab = React.useSyncExternalStore(
|
||
subscribeToCategoryTab,
|
||
readCategoryTabParam,
|
||
() => "week" as const,
|
||
);
|
||
|
||
const setTab = React.useCallback((next: "week" | "month") => {
|
||
if (typeof window === "undefined") return;
|
||
const params = new URLSearchParams(window.location.search);
|
||
if (next !== "week") {
|
||
params.set("categoryTab", next);
|
||
} else {
|
||
params.delete("categoryTab");
|
||
}
|
||
const nextQuery = params.toString();
|
||
const nextUrl = nextQuery
|
||
? `${window.location.pathname}?${nextQuery}`
|
||
: window.location.pathname;
|
||
window.history.replaceState(null, "", nextUrl);
|
||
window.dispatchEvent(new PopStateEvent("popstate"));
|
||
}, []);
|
||
|
||
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: getCategoryColor(config) }}
|
||
aria-hidden="true"
|
||
/>
|
||
<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"
|
||
role="group"
|
||
aria-label="بازه زمانی عملکرد دستهها"
|
||
>
|
||
<button
|
||
type="button"
|
||
onClick={() => setTab("week")}
|
||
className={cn(
|
||
"rounded-md px-3 py-1 text-xs font-medium transition-colors",
|
||
tab === "week"
|
||
? "bg-background text-foreground shadow-sm"
|
||
: "text-muted-foreground hover:text-foreground",
|
||
)}
|
||
aria-label="نمایش هفتگی"
|
||
>
|
||
هفته
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setTab("month")}
|
||
className={cn(
|
||
"rounded-md px-3 py-1 text-xs font-medium transition-colors",
|
||
tab === "month"
|
||
? "bg-background text-foreground shadow-sm"
|
||
: "text-muted-foreground hover:text-foreground",
|
||
)}
|
||
aria-label="نمایش ماهانه"
|
||
>
|
||
ماه
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
id="category-chart-panel"
|
||
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" />
|
||
<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 ?? "segment"}`}
|
||
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="linear"
|
||
dataKey="electronics"
|
||
stroke="var(--color-electronics)"
|
||
strokeWidth={2}
|
||
dot={false}
|
||
activeDot={{ r: 4, strokeWidth: 0 }}
|
||
/>
|
||
<Line
|
||
type="linear"
|
||
dataKey="clothing"
|
||
stroke="var(--color-clothing)"
|
||
strokeWidth={2}
|
||
dot={false}
|
||
activeDot={{ r: 4, strokeWidth: 0 }}
|
||
/>
|
||
<Line
|
||
type="linear"
|
||
dataKey="homeGarden"
|
||
stroke="var(--color-homeGarden)"
|
||
strokeWidth={2}
|
||
dot={false}
|
||
activeDot={{ r: 4, strokeWidth: 0 }}
|
||
/>
|
||
<Line
|
||
type="linear"
|
||
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">
|
||
{dateFormatter.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 tableHeadClass = "text-xs font-medium text-muted-foreground sm:text-sm";
|
||
|
||
const statusStyles: Record<OrderStatus, string> = {
|
||
Processing:
|
||
"bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-400 dark:ring-amber-400/20",
|
||
Shipped:
|
||
"bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-900/30 dark:text-blue-400 dark:ring-blue-400/20",
|
||
Delivered:
|
||
"bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-400 dark:ring-emerald-400/20",
|
||
Cancelled:
|
||
"bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-400/20",
|
||
};
|
||
|
||
const RecentOrdersTable = () => {
|
||
const [searchQuery, setSearchQuery] = React.useState(
|
||
() => readRecentOrdersTableState().searchQuery,
|
||
);
|
||
const [statusFilter, setStatusFilter] = React.useState<string>(
|
||
() => readRecentOrdersTableState().statusFilter,
|
||
);
|
||
const [currentPage, setCurrentPage] = React.useState(
|
||
() => readRecentOrdersTableState().currentPage,
|
||
);
|
||
const [pageSize, setPageSize] = React.useState(
|
||
() => readRecentOrdersTableState().pageSize,
|
||
);
|
||
const isHydrated = typeof window !== "undefined";
|
||
const skipNextReset = React.useRef(true);
|
||
|
||
const hasActiveFilters = statusFilter !== "all";
|
||
|
||
const clearFilters = () => {
|
||
setStatusFilter("all");
|
||
};
|
||
|
||
const filteredOrders = React.useMemo(() => {
|
||
return orders.filter((order) => {
|
||
const matchesSearch =
|
||
order.orderNumber.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
order.customer.toLowerCase().includes(searchQuery.toLowerCase());
|
||
|
||
const matchesStatus =
|
||
statusFilter === "all" || order.status === statusFilter;
|
||
|
||
return matchesSearch && matchesStatus;
|
||
});
|
||
}, [searchQuery, statusFilter]);
|
||
|
||
const totalPages = Math.ceil(filteredOrders.length / pageSize);
|
||
|
||
const paginatedOrders = React.useMemo(() => {
|
||
const startIndex = (currentPage - 1) * pageSize;
|
||
const endIndex = startIndex + pageSize;
|
||
return filteredOrders.slice(startIndex, endIndex);
|
||
}, [filteredOrders, currentPage, pageSize]);
|
||
|
||
React.useEffect(() => {
|
||
if (!isHydrated) return;
|
||
if (skipNextReset.current) {
|
||
skipNextReset.current = false;
|
||
return;
|
||
}
|
||
setCurrentPage(1);
|
||
}, [searchQuery, statusFilter, pageSize, isHydrated]);
|
||
|
||
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("status", statusFilter);
|
||
} else {
|
||
params.delete("status");
|
||
}
|
||
|
||
if (currentPage > 1) {
|
||
params.set("page", String(currentPage));
|
||
} else {
|
||
params.delete("page");
|
||
}
|
||
|
||
if (pageSize !== PAGE_SIZE_OPTIONS[0]) {
|
||
params.set("pageSize", String(pageSize));
|
||
} else {
|
||
params.delete("pageSize");
|
||
}
|
||
|
||
const nextQuery = params.toString();
|
||
const nextUrl = nextQuery
|
||
? `${window.location.pathname}?${nextQuery}`
|
||
: window.location.pathname;
|
||
window.history.replaceState(null, "", nextUrl);
|
||
}, [searchQuery, statusFilter, currentPage, pageSize, isHydrated]);
|
||
|
||
const goToPage = (page: number) => {
|
||
setCurrentPage(Math.max(1, Math.min(page, totalPages)));
|
||
};
|
||
|
||
return (
|
||
<div className="rounded-xl border bg-card">
|
||
<div className="flex flex-col gap-3 p-3 sm:flex-row sm:items-center sm:gap-4 sm:px-6 sm:py-3.5">
|
||
<div className="flex flex-1 items-center gap-2 sm:gap-2.5">
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
className="size-7 shrink-0 sm:size-8"
|
||
aria-label="سفارشهای اخیر"
|
||
>
|
||
<ClipboardList
|
||
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>
|
||
<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">
|
||
{filteredOrders.length.toLocaleString("fa-IR")}
|
||
</span>
|
||
</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 sm:size-5"
|
||
aria-hidden="true"
|
||
/>
|
||
<Input
|
||
placeholder="جستجوی سفارش… (مثلاً سفارش-۱۴۰۳-002)"
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
name="orders-search"
|
||
inputMode="search"
|
||
autoComplete="off"
|
||
aria-label="جستجوی سفارشها"
|
||
className="h-8 w-full ps-9 text-sm sm:h-9 sm:w-[160px] sm:ps-10 lg:w-[200px]"
|
||
/>
|
||
</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>
|
||
{orderStatuses.map((status) => (
|
||
<DropdownMenuCheckboxItem
|
||
key={status}
|
||
checked={statusFilter === status}
|
||
onCheckedChange={() => setStatusFilter(status)}
|
||
>
|
||
{orderStatusLabels[status]}
|
||
</DropdownMenuCheckboxItem>
|
||
))}
|
||
|
||
{hasActiveFilters && (
|
||
<>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem
|
||
onClick={clearFilters}
|
||
className="text-destructive"
|
||
>
|
||
<X className="me-2 size-4" aria-hidden="true" />
|
||
پاک کردن فیلترها
|
||
</DropdownMenuItem>
|
||
</>
|
||
)}
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
</div>
|
||
|
||
{hasActiveFilters && (
|
||
<div className="flex flex-wrap items-center gap-2 px-3 pb-3 sm:px-6">
|
||
<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={`حذف فیلتر ${orderStatusLabels[statusFilter as OrderStatus]}`}
|
||
>
|
||
{orderStatusLabels[statusFilter as OrderStatus]}
|
||
<X className="size-2.5 sm:size-3" aria-hidden="true" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div className="overflow-x-auto px-3 pb-3 sm:px-6 sm:pb-4">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow className="bg-muted/50 hover:bg-muted/50">
|
||
<TableHead className={cn("w-[40px]", tableHeadClass)}>
|
||
#
|
||
</TableHead>
|
||
<TableHead className={cn("min-w-[160px]", tableHeadClass)}>
|
||
سفارش
|
||
</TableHead>
|
||
<TableHead
|
||
className={cn(
|
||
"hidden min-w-[140px] md:table-cell",
|
||
tableHeadClass,
|
||
)}
|
||
>
|
||
مشتری
|
||
</TableHead>
|
||
<TableHead className={cn("min-w-[100px]", tableHeadClass)}>
|
||
وضعیت
|
||
</TableHead>
|
||
<TableHead className={cn("min-w-[90px]", tableHeadClass)}>
|
||
مجموع
|
||
</TableHead>
|
||
<TableHead className={cn("hidden sm:table-cell", tableHeadClass)}>
|
||
تاریخ
|
||
</TableHead>
|
||
<TableHead className="w-[40px]"></TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{paginatedOrders.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell
|
||
colSpan={7}
|
||
className="h-24 text-center text-sm text-muted-foreground"
|
||
>
|
||
سفارشی با این فیلترها یافت نشد.
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
paginatedOrders.map((order, index) => (
|
||
<TableRow key={order.id}>
|
||
<TableCell className="text-xs font-medium sm:text-sm">
|
||
{((currentPage - 1) * pageSize + index + 1).toLocaleString(
|
||
"fa-IR",
|
||
)}
|
||
</TableCell>
|
||
<TableCell>
|
||
<div className="min-w-0">
|
||
<span className="block truncate text-xs font-medium sm:text-sm">
|
||
{order.orderNumber}
|
||
</span>
|
||
<span className="text-[10px] text-muted-foreground sm:text-xs">
|
||
{order.productCount.toLocaleString("fa-IR")} قلم
|
||
</span>
|
||
</div>
|
||
</TableCell>
|
||
<TableCell className="hidden md:table-cell">
|
||
<div className="flex items-center gap-2">
|
||
<Avatar className="size-6 bg-muted">
|
||
<AvatarFallback className="text-[8px] font-semibold text-muted-foreground uppercase">
|
||
{order.customerInitials}
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
<span className="text-xs text-muted-foreground sm:text-sm">
|
||
{order.customer}
|
||
</span>
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>
|
||
<span
|
||
className={cn(
|
||
"inline-flex items-center rounded-md px-2 py-1 text-[10px] font-medium sm:text-xs",
|
||
statusStyles[order.status],
|
||
)}
|
||
>
|
||
{orderStatusLabels[order.status]}
|
||
</span>
|
||
</TableCell>
|
||
<TableCell className="text-xs text-foreground tabular-nums sm:text-sm">
|
||
{currencyFormatter.format(order.total)}
|
||
</TableCell>
|
||
<TableCell className="hidden text-xs text-muted-foreground sm:table-cell sm:text-sm">
|
||
{dateFormatter.format(order.date)}
|
||
</TableCell>
|
||
<TableCell>
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="size-7 text-muted-foreground hover:text-foreground sm:size-8"
|
||
aria-label={`عملیات ${order.orderNumber}`}
|
||
>
|
||
<MoreHorizontal
|
||
className="size-3.5 sm:size-4"
|
||
aria-hidden="true"
|
||
/>
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end">
|
||
<DropdownMenuItem>
|
||
<Eye className="me-2 size-4" aria-hidden="true" />
|
||
مشاهده جزئیات
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem>
|
||
<Pencil className="me-2 size-4" aria-hidden="true" />
|
||
ویرایش سفارش
|
||
</DropdownMenuItem>
|
||
<DropdownMenuItem>
|
||
<Copy className="me-2 size-4" aria-hidden="true" />
|
||
تکثیر
|
||
</DropdownMenuItem>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuItem
|
||
className="text-destructive"
|
||
onSelect={(event) => {
|
||
event.preventDefault();
|
||
if (typeof window === "undefined") return;
|
||
window.confirm(
|
||
"این سفارش لغو شود؟ این عمل قابل بازگشت نیست.",
|
||
);
|
||
}}
|
||
>
|
||
<X className="me-2 size-4" aria-hidden="true" />
|
||
لغو سفارش
|
||
</DropdownMenuItem>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</TableCell>
|
||
</TableRow>
|
||
))
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
|
||
<div className="flex flex-col items-center justify-between gap-3 border-t px-3 py-3 sm:flex-row sm:px-6">
|
||
<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>
|
||
{PAGE_SIZE_OPTIONS.map((size) => (
|
||
<SelectItem key={size} value={size.toString()}>
|
||
{size.toLocaleString("fa-IR")}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
<span className="text-muted-foreground">
|
||
{filteredOrders.length === 0
|
||
? "۰"
|
||
: `${((currentPage - 1) * pageSize + 1).toLocaleString("fa-IR")}-${Math.min(
|
||
currentPage * pageSize,
|
||
filteredOrders.length,
|
||
).toLocaleString("fa-IR")}`}{" "}
|
||
از {filteredOrders.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:p-4 md:p-6"
|
||
>
|
||
<StatsCardsGrid />
|
||
<div className="flex flex-col gap-4 xl:flex-row">
|
||
<CategoryPerformanceChart />
|
||
<FulfillmentPanel />
|
||
</div>
|
||
<RecentOrdersTable />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const Dashboard7 = ({ 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 { Dashboard7 };
|