داشبورد

اعلان‌ها {headerNotificationItems.map((item) => ( event.preventDefault()} > {item.title} {item.body} {item.time} ))} علامت‌گذاری همه به‌عنوان خوانده‌شده

{label}

{revenueChartConfig.revenue.label}: {currencyFormatter.format(Number(value))}

); } const RevenueChart = ({ period }: { period: PeriodKey }) => { const data = revenueData[period]; const summary = revenueSummary[period]; return (

نمای کلی درآمد

{currencyFormatter.format(summary.total)}

{summary.isPositive ? (

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

); }; function CostsTooltip({ active, payload, label, colors, }: any & { colors: { primary: string; secondary: string }; }) { if (!active || !payload?.length) return null; const cogs = payload.find((p: any) => p.dataKey === "cogs")?.value || 0; const operatingExpenses = payload.find((p: any) => p.dataKey === "operatingExpenses")?.value || 0; const total = Number(cogs) + Number(operatingExpenses); return (

{label}

{costsChartConfig.cogs.label}: {currencyFormatter.format(Number(cogs))}

هزینه عملیاتی: {currencyFormatter.format(Number(operatingExpenses))}

جمع: {currencyFormatter.format(total)}

); } const CostsChart = ({ period }: { period: PeriodKey }) => { const data = costsData[period]; const summary = costsSummary[period]; return (

تفکیک هزینه‌ها

{costsChartConfig.cogs.label}

{costsChartConfig.operatingExpenses.label}

{currencyFormatter.format(summary.total)}

{summary.isPositive ? (

compactCurrencyFormatter.format(value)} width={40} /> } cursor={{ fillOpacity: 0.05 }} />

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

{statsData.map((stat, index) => { const formatter = stat.format === "currency" ? currencyFormatter : percentFormatter; return (

{formatter.format(stat.previousValue)} ماه قبل

{formatter.format(stat.value)}

{stat.isPositive ? ( ) : (

{index < statsData.length - 1 && (

)}

); })}

); }; const transactionStatusStyles: Record = { completed: "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", pending: "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", failed: "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-900/30 dark:text-red-400 dark:ring-red-400/20", refunded: "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", }; const transactionStatusIcons: Record< TransactionStatus, React.ComponentType> > = { completed: CheckCircle2, pending: Clock, failed: XCircle, refunded: RotateCcw, }; const transactionStatusLabels: Record = { completed: "تکمیل‌شده", pending: "در انتظار", failed: "ناموفق", refunded: "بازپرداخت‌شده", }; const allTransactionStatuses: TransactionStatus[] = [ "completed", "pending", "failed", "refunded", ]; const allPaymentMethods = [ "Credit Card", "Debit Card", "PayPal", "Bank Transfer", ] as const; const dateFilterOptions = [ { label: "همه", value: "all" }, { label: "امروز", value: "today" }, { label: "دیروز", value: "yesterday" }, { label: "۷ روز اخیر", value: "7days" }, { label: "۳۰ روز اخیر", value: "30days" }, ]; const filterChipClassName = "inline-flex h-5 cursor-pointer items-center gap-1 rounded-md bg-gray-50 px-2 text-[10px] font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 sm:h-6 sm:text-xs dark:bg-gray-800/50 dark:text-gray-400 dark:ring-gray-400/20"; const TransactionsTable = () => { const [searchQuery, setSearchQuery] = React.useState(""); const [statusFilter, setStatusFilter] = React.useState("all"); const [dateFilter, setDateFilter] = React.useState("all"); const [paymentMethodFilter, setPaymentMethodFilter] = React.useState("all"); const [currentPage, setCurrentPage] = React.useState(1); const [pageSize, setPageSize] = React.useState(10); const [isHydrated, setIsHydrated] = React.useState(false); const hasActiveFilters = statusFilter !== "all" || dateFilter !== "all" || paymentMethodFilter !== "all"; const clearFilters = () => { setStatusFilter("all"); setDateFilter("all"); setPaymentMethodFilter("all"); }; React.useEffect(() => { if (typeof window === "undefined") return; const params = new URLSearchParams(window.location.search); setSearchQuery(params.get("q") ?? ""); const nextStatus = params.get("status"); if ( nextStatus && (nextStatus === "all" || allTransactionStatuses.includes(nextStatus as TransactionStatus)) ) { setStatusFilter(nextStatus); } const nextDate = params.get("date"); if ( nextDate && dateFilterOptions.some((option) => option.value === nextDate) ) { setDateFilter(nextDate); } const nextPayment = params.get("payment"); if ( nextPayment && (nextPayment === "all" || allPaymentMethods.includes( nextPayment as (typeof allPaymentMethods)[number], )) ) { setPaymentMethodFilter(nextPayment); } const nextPage = Number(params.get("page")); if (!Number.isNaN(nextPage) && nextPage > 0) { setCurrentPage(nextPage); } const nextPageSize = Number(params.get("pageSize")); if ( !Number.isNaN(nextPageSize) && PAGE_SIZE_OPTIONS.includes(nextPageSize) ) { setPageSize(nextPageSize); } setIsHydrated(true); }, []); const filteredTransactions = React.useMemo(() => { const query = searchQuery.toLowerCase(); return transactionRecords.filter((txn) => { const matchesSearch = txn.txnId.toLowerCase().includes(query) || txn.customerName.toLowerCase().includes(query); const matchesStatus = statusFilter === "all" || txn.status === statusFilter; const matchesPaymentMethod = paymentMethodFilter === "all" || txn.paymentMethod === paymentMethodFilter; let matchesDate = true; const pd = txn.date.toLowerCase(); switch (dateFilter) { case "today": matchesDate = pd === "today"; break; case "yesterday": matchesDate = pd === "1 day ago"; break; case "7days": matchesDate = pd === "today" || pd.includes("day ago") || (pd.includes("days ago") && parseInt(pd) <= 7); break; case "30days": matchesDate = pd === "today" || pd.includes("day ago") || (pd.includes("days ago") && parseInt(pd) <= 30); break; } return ( matchesSearch && matchesStatus && matchesPaymentMethod && matchesDate ); }); }, [searchQuery, statusFilter, dateFilter, paymentMethodFilter]); const totalPages = Math.ceil(filteredTransactions.length / pageSize); const paginatedTransactions = React.useMemo(() => { const startIndex = (currentPage - 1) * pageSize; const endIndex = startIndex + pageSize; return filteredTransactions.slice(startIndex, endIndex); }, [filteredTransactions, currentPage, pageSize]); React.useEffect(() => { setCurrentPage(1); }, [searchQuery, statusFilter, dateFilter, paymentMethodFilter, pageSize]); React.useEffect(() => { if (!isHydrated || 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 (dateFilter !== "all") { params.set("date", dateFilter); } else { params.delete("date"); } if (paymentMethodFilter !== "all") { params.set("payment", paymentMethodFilter); } else { params.delete("payment"); } 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, dateFilter, paymentMethodFilter, currentPage, pageSize, isHydrated, ]); const goToPage = (page: number) => { setCurrentPage(Math.max(1, Math.min(page, totalPages))); }; return (

تراکنش‌ها {filteredTransactions.length.toLocaleString("fa-IR")}

فیلتر بر اساس وضعیت setStatusFilter("all")} > همه وضعیت‌ها {allTransactionStatuses.map((status) => ( setStatusFilter(status)} > {transactionStatusLabels[status]} ))} روش پرداخت setPaymentMethodFilter("all")} > همه روش‌ها {allPaymentMethods.map((method) => ( setPaymentMethodFilter(method)} > {paymentMethodLabels[method]} ))}

{hasActiveFilters && (

فیلترها: {statusFilter !== "all" && ( )} {dateFilter !== "all" && ( )} {paymentMethodFilter !== "all" && ( )}

)}

شناسه تراکنش مشتری مبلغ نوع روش پرداخت تاریخ وضعیت {paginatedTransactions.length === 0 ? ( تراکنشی با این فیلترها یافت نشد. ) : ( paginatedTransactions.map((txn) => { const StatusIcon = transactionStatusIcons[txn.status]; return ( {txn.txnId}

{txn.customerInitials} {txn.customerName}

{currencyFormatter.format(txn.amount)} {transactionTypeLabels[txn.type]} {paymentMethodLabels[txn.paymentMethod]} {formatTransactionDate(txn.date)} { event.preventDefault(); if (typeof window === "undefined") return; window.confirm( "این تراکنش باطل شود؟ این عمل قابل بازگشت نیست.", ); }} > ); }) )}

ردیف در هر صفحه: {filteredTransactions.length === 0 ? "۰" : `${((currentPage - 1) * pageSize + 1).toLocaleString("fa-IR")}-${Math.min( currentPage * pageSize, filteredTransactions.length, ).toLocaleString("fa-IR")}`}{" "} از {filteredTransactions.length.toLocaleString("fa-IR")}

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

); }; const DashboardContent = () => { const [period, setPeriod] = React.useState("1year"); const [newTxnOpen, setNewTxnOpen] = React.useState(false); const [txnNote, setTxnNote] = React.useState(""); React.useEffect(() => { if (typeof window === "undefined") return; const params = new URLSearchParams(window.location.search); const nextPeriod = params.get("period"); if ( nextPeriod === "1year" || nextPeriod === "3months" || nextPeriod === "30days" ) { setPeriod(nextPeriod); } }, []); React.useEffect(() => { if (typeof window === "undefined") return; const params = new URLSearchParams(window.location.search); if (period !== "1year") { 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]); return (

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