قیف فروش

{numberFormatter.format(totalOrders)}

مجموع سفارش‌ها

numberFormatter.format(v)} /> } />

{compactCurrencyFormatter.format(totalSales)}

مجموع فروش

currencyFormatter.format(v)} /> } />

); }; 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 (

{label}, {currentYear}

امسال: {currencyFormatter.format(Number(thisYear))}

سال قبل: {currencyFormatter.format(Number(prevYear))}

= 0 ? "text-emerald-500" : "text-red-500", )} > {diff >= 0 ? "+" : ""} {percentage.toLocaleString("fa-IR")}٪ نسبت به سال قبل

); } const RevenueFlowChart = () => { const [period, setPeriod] = React.useState("year"); 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 !== "year") { 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 (

{currencyFormatter.format(totalRevenue)}

درآمد کل ({periodLabels[period]})

امسال

سال قبل

بازه زمانی {(Object.keys(periodLabels) as TimePeriod[]).map((key) => ( setPeriod(key)} > {periodLabels[key]} ))}

compactCurrencyFormatter.format(value)} width={40} /> } cursor={{ strokeOpacity: 0.2 }} />

); }; const RecentOrdersTable = () => { const [statusFilter, setStatusFilter] = React.useState( "all", ); const [currentPage, setCurrentPage] = React.useState(1); const [isHydrated, setIsHydrated] = React.useState(false); const pageSize = 6; React.useEffect(() => { if (typeof window === "undefined") return; const params = new URLSearchParams(window.location.search); const nextStatus = params.get("status"); if ( nextStatus && (nextStatus === "all" || orderStatuses.includes(nextStatus as OrderStatus)) ) { setStatusFilter(nextStatus as OrderStatus | "all"); } const nextPage = Number(params.get("page")); if (!Number.isNaN(nextPage) && nextPage > 0) { setCurrentPage(nextPage); } setIsHydrated(true); }, []); const filteredOrders = React.useMemo(() => { if (statusFilter === "all") return orders; return orders.filter((order) => order.status === statusFilter); }, [statusFilter]); const totalPages = Math.max(1, Math.ceil(filteredOrders.length / pageSize)); const paginatedOrders = React.useMemo(() => { const startIndex = (currentPage - 1) * pageSize; return filteredOrders.slice(startIndex, startIndex + pageSize); }, [filteredOrders, currentPage, pageSize]); React.useEffect(() => { setCurrentPage(1); }, [statusFilter]); React.useEffect(() => { if (!isHydrated || typeof window === "undefined") return; const params = new URLSearchParams(window.location.search); if (statusFilter !== "all") { params.set("status", statusFilter); } else { params.delete("status"); } if (currentPage > 1) { params.set("page", String(currentPage)); } else { params.delete("page"); } const nextQuery = params.toString(); const nextUrl = nextQuery ? `${window.location.pathname}?${nextQuery}` : window.location.pathname; window.history.replaceState(null, "", nextUrl); }, [statusFilter, currentPage, isHydrated]); const goToPage = (page: number) => { setCurrentPage(Math.max(1, Math.min(page, totalPages))); }; const startRow = filteredOrders.length ? (currentPage - 1) * pageSize + 1 : 0; const endRow = Math.min(currentPage * pageSize, filteredOrders.length); return (

سفارش‌های اخیر

{filteredOrders.length.toLocaleString("fa-IR")}

فیلتر بر اساس وضعیت setStatusFilter("all")} > همه وضعیت‌ها {orderStatuses.map((status) => ( setStatusFilter(status)} > {orderStatusLabels[status]} ))}

مرجع سفارش خریدار مجموع وضعیت {paginatedOrders.length === 0 ? ( سفارشی یافت نشد. ) : ( paginatedOrders.map((order) => ( {order.orderNumber} {order.customer} {currencyFormatter.format(order.total)} {orderStatusLabels[order.status]} )) )}

{filteredOrders.length === 0 ? "۰" : `${startRow.toLocaleString("fa-IR")}-${endRow.toLocaleString("fa-IR")}`}{" "} از {filteredOrders.length.toLocaleString("fa-IR")}

); }; const FulfillmentPanel = () => { return (

تکمیل سفارش

خروجی جدول مشاهده همه سفارش‌ها

سفارش وضعیت تحویل٪

{fulfillmentData.map((row) => (

{row.order}

{row.segments.slice(0, 15).map((opacity, i) => { const filled = i < Math.round((row.progress / 100) * 15); return (

); })}

{row.progress.toLocaleString("fa-IR")}

))}

); }; const DashboardContent = () => { return (

); }; const Dashboard9 = ({ className }: { className?: string }) => { return ( رفتن به محتوای اصلی ); }; export { Dashboard9 };