داشبورد

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

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

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

{formatter.format(stat.value)}

{stat.isPositive ? (

{index < statsData.length - 1 && (

)}

); })}

); }; // ============================================================================ // Channel Revenue Chart // ============================================================================ function ChannelTooltip({ active, payload, label, }: TooltipContentProps) { if (!active || !payload?.length) return null; const total = payload.reduce( (sum, entry) => sum + Number(entry.value ?? 0), 0, ); return (

{label}

{payload.map((entry) => { const dataKey = String( entry.dataKey ?? "", ) as keyof typeof channelChartConfig; const label = channelChartConfig[dataKey]?.label ?? entry.name ?? dataKey; return (

{label}: {compactCurrencyFormatter.format(Number(entry.value))}

); })}

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

); } const ChannelRevenueChart = () => { const [mrrRange, setMrrRange] = React.useState<"3m" | "6m" | "ytd">("6m"); const mrrChartData = React.useMemo(() => { if (mrrRange === "3m") return channelRevenueData.slice(-3); if (mrrRange === "ytd") return channelRevenueData.slice(0, 4); return channelRevenueData; }, [mrrRange]); return (

درآمد ماهانه تکرارشونده بر اساس پلن

{[ { label: channelChartConfig.starter.label, color: palette.primary }, { label: channelChartConfig.pro.label, color: palette.secondary.light }, { label: channelChartConfig.enterprise.label, color: palette.tertiary.light, }, { label: channelChartConfig.addOns.label, color: palette.quaternary.light }, ].map((item) => (

{item.label}

))}

compactCurrencyFormatter.format(v)} />

); }; // ============================================================================ // Total Revenue Chart (from Dashboard9) // ============================================================================ function RevenueTooltip({ active, payload, label, colors, variant, primaryLabel, secondaryLabel, comparisonPhrase, }: TooltipContentProps & { colors: { primary: string; secondary: string }; variant: "year" | "month"; primaryLabel: string; secondaryLabel: string; comparisonPhrase: string; }) { if (!active || !payload?.length) return null; const primaryKey = variant === "year" ? "thisYear" : "current"; const secondaryKey = variant === "year" ? "prevYear" : "previous"; const primaryVal = payload.find((p) => p.dataKey === primaryKey)?.value ?? 0; const secondaryVal = payload.find((p) => p.dataKey === secondaryKey)?.value ?? 0; const diff = Number(primaryVal) - Number(secondaryVal); const percentage = secondaryVal ? diff / Number(secondaryVal) : 0; const currentYear = new Date().getFullYear().toLocaleString("fa-IR"); const formattedDelta = `${diff >= 0 ? "+" : ""}${percentFormatter.format( Math.abs(percentage), )}`; const title = variant === "year" ? `${label}, ${currentYear}` : `${label} · ${currentYear}`; return (

{title}

{primaryLabel}: {currencyFormatter.format(Number(primaryVal))}

{secondaryLabel}: {currencyFormatter.format(Number(secondaryVal))}

= 0 ? "text-emerald-500" : "text-red-500", )} > {formattedDelta} {comparisonPhrase}

); } const TotalRevenueChart = () => { const [timeline, setTimeline] = React.useState<"year" | "month">("year"); const isYear = timeline === "year"; const chartData = isYear ? fullYearData : revenueMonthTimelineData; const xKey = isYear ? "month" : "label"; const lineKey = isYear ? "thisYear" : "current"; const areaKey = isYear ? "prevYear" : "previous"; const chartConfig = isYear ? revenueFlowChartConfig : revenueMonthChartConfig; const lineColorVar = isYear ? "ارزش افزوده(--color-thisYear)" : "ارزش افزوده(--color-current)"; const areaColorVar = isYear ? "ارزش افزوده(--color-prevYear)" : "ارزش افزوده(--color-previous)"; const totalRevenue = isYear ? fullYearData.reduce((acc, item) => acc + item.thisYear, 0) : revenueMonthTimelineData.reduce((acc, item) => acc + item.current, 0); const legendDotClass = "size-2 rounded-full sm:size-2.5"; const primaryLegend = isYear ? "امسال" : "این ماه"; const secondaryLegend = isYear ? "سال قبل" : "ماه قبل"; const subtitle = isYear ? "امسال در برابر سال قبل" : "این ماه در برابر ماه قبل"; return (

درآمد کل

{primaryLegend}

{secondaryLegend}

{currencyFormatter.format(totalRevenue)}

{subtitle}

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

); }; // ============================================================================ // Mini Chart Cards // ============================================================================ const standardChartMenuLabels = [ "مشاهده جزئیات", "خروجی جدول", "باز کردن در تحلیل فروش", ] as const; type MiniChartCardProps = { title: string; value: string; changePercent: number; isPositive: boolean; helper: string; icon: React.ComponentType>; legend?: React.ReactNode; footer?: React.ReactNode; children: React.ReactNode; toolbar?: React.ReactNode; menuLabels?: readonly string[]; }; const MiniChartCard = ({ title, value, changePercent, isPositive, helper, icon: Icon, legend, footer, children, toolbar, menuLabels = standardChartMenuLabels, }: MiniChartCardProps) => { return (

{title}

{value} {isPositive ? ( {helper}

{toolbar} {menuLabels.map((label) => ( {label} ))}

{legend && (

{legend}

)}

{children}

{footer ? (

{footer}

) : (

{chartDates[0]} {chartDates[chartDates.length - 1]}

)}

); }; const renderActiveShape = (props: unknown) => { const p = props as { cx: number; cy: number; innerRadius: number; outerRadius: number; startAngle: number; endAngle: number; fill: string; }; return ( ); }; const MiniChartsSection = () => { const [activeSlice, setActiveSlice] = React.useState(null); const [planWindow, setPlanWindow] = React.useState<"7d" | "28d" | "90d">( "28d", ); const [arpuRange, setArpuRange] = React.useState<"28d" | "90d">("28d"); const [dauWindow, setDauWindow] = React.useState<"14d" | "28d">("28d"); const planMix = channelMixByWindow[planWindow]; const topPlan = planMix.reduce((top, item) => item.value > top.value ? item : top, ); const arpuChartData = arpuRange === "90d" ? aovData90 : aovData; const arpuRefAverage = arpuRange === "90d" ? aovAverage90 : aovAverage; const arpuHeadline = Math.round( (arpuRange === "90d" ? aovValues90 : aovValues).reduce((a, b) => a + b, 0) / (arpuRange === "90d" ? aovValues90.length : aovValues.length), ); const dauChartData = React.useMemo( () => averageSalesData.slice(-(dauWindow === "14d" ? 14 : 28)), [dauWindow], ); const dauHeadline = Math.round( dauChartData.reduce((acc, row) => acc + row.thisMonth, 0) / Math.max(dauChartData.length, 1), ); const planMixCaption = planWindow === "7d" ? "۷ روز اخیر" : planWindow === "90d" ? "۹۰ روز اخیر" : "۲۸ روز اخیر"; const arpuToolbar = ( ); const dauToolbar = ( ); return (

{arpuChartData[0]?.date} –{" "} {arpuChartData[arpuChartData.length - 1]?.date} } > { if (!active || !payload?.length) return null; const value = payload[0].value as number; const diff = value - arpuRefAverage; const diffPercent = Math.round((diff / arpuRefAverage) * 100); return (

{label}

{currencyFormatter.format(value)}

{diff >= 0 ? "+" : ""} {diffPercent.toLocaleString("fa-IR")}٪ نسبت به میانگین

); }} cursor={{ fillOpacity: 0.05 }} /> {averageSalesChartConfig.thisMonth.label} {averageSalesChartConfig.lastMonth.label} } footer={ <> {dauChartData[0]?.date} –{" "} {dauChartData[dauChartData.length - 1]?.date} } > { if (!active || !payload?.length) return null; const thisMonth = payload.find((p) => p.dataKey === "thisMonth") ?.value as number; const lastMonth = payload.find((p) => p.dataKey === "lastMonth") ?.value as number; const diff = thisMonth - lastMonth; const diffPercent = Math.round((diff / lastMonth) * 100); return (

{label}

{averageSalesChartConfig.thisMonth.label}: {numberFormatter.format(thisMonth)}

{averageSalesChartConfig.lastMonth.label}: {numberFormatter.format(lastMonth)}

{diff >= 0 ? "+" : ""} {diffPercent.toLocaleString("fa-IR")}٪ تغییر

); }} cursor={{ strokeOpacity: 0.2 }} />

اعضای تیم بر اساس پلن

{standardChartMenuLabels.map((label) => ( {label} ))}

setActiveSlice(index) } onMouseLeave={() => setActiveSlice(null)} > {planMix.map((entry) => ( ))}

{Math.round(topPlan.value).toLocaleString("fa-IR")}٪ {topPlan.name}

{planMix.map((item, index) => (

setActiveSlice(index)} onMouseLeave={() => setActiveSlice(null)} >

{item.name} {Math.round(item.value).toLocaleString("fa-IR")}٪

))}

{planMixCaption}

); }; // ============================================================================ // Dashboard Content // ============================================================================ const DashboardContent = () => { return (

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