{label}

درآمد: {currencyFormatter.format(Number(value))}

); } function CustomersAreaTooltip({ active, payload, label, }: any) { if (!active || !payload?.length) return null; const value = Number(payload[0]?.value ?? 0); const pointIndex = customerTrendData.findIndex( (entry) => entry.day === label, ); const previousValue = pointIndex > 0 ? customerTrendData[pointIndex - 1].customers : value; const delta = previousValue === 0 ? 0 : ((value - previousValue) / previousValue) * 100; const isPositive = delta >= 0; return (

{label}

مشتریان: {numberFormatter.format(value)}

{formatChangePercent(delta)}

); } // Sales Revenue Card with Animated Value Line Bar Chart const SalesRevenueCard = () => { const changePercent = 8.2; // Track which bar is being hovered const [activeIndex, setActiveIndex] = React.useState( undefined, ); // Calculate the currently tracked value (hovered bar or max bar) const maxValueData = React.useMemo(() => { if (activeIndex !== undefined) { return { index: activeIndex, value: monthlyRevenueData[activeIndex].revenue, }; } return monthlyRevenueData.reduce( (max, data, index) => data.revenue > max.value ? { index, value: data.revenue } : max, { index: 0, value: 0 }, ); }, [activeIndex]); const isPositive = changePercent >= 0; // Spring animation for the reference line value const valueSpring = useSpring(maxValueData.value, { stiffness: 100, damping: 20, }); const [springyValue, setSpringyValue] = React.useState(maxValueData.value); useMotionValueEvent(valueSpring, "change", (latest) => { setSpringyValue(Number(latest.toFixed(0))); }); React.useEffect(() => { valueSpring.set(maxValueData.value); }, [maxValueData.value, valueSpring]); return (

{/* Left: Title + Value + Change */}

درآمد فروش {currencyFormatter.format(maxValueData.value)}

{formatChangePercent(changePercent)} {isPositive ? (

{/* Right: Growth sections */}

setActiveIndex(undefined)} > } cursor={{ fillOpacity: 0.05 }} /> {monthlyRevenueData.map((_, index) => ( setActiveIndex(index)} /> ))} } />

); }; // Segmentation Card (Conversion Rate Style) const SegmentationCard = () => { const [activeCustomerIndex, setActiveCustomerIndex] = React.useState< number | undefined >(undefined); const trackedCustomerPoint = React.useMemo(() => { if ( activeCustomerIndex !== undefined && activeCustomerIndex >= 0 && activeCustomerIndex < customerTrendData.length ) { return { index: activeCustomerIndex, ...customerTrendData[activeCustomerIndex], }; } const fallbackIndex = customerTrendData.length - 1; return { index: fallbackIndex, ...customerTrendData[fallbackIndex] }; }, [activeCustomerIndex]); const previousCustomerPoint = React.useMemo(() => { const previousIndex = Math.max(0, trackedCustomerPoint.index - 1); return customerTrendData[previousIndex]; }, [trackedCustomerPoint.index]); const totalCustomers = trackedCustomerPoint.customers; const totalChange = previousCustomerPoint.customers === 0 ? 0 : ((totalCustomers - previousCustomerPoint.customers) / previousCustomerPoint.customers) * 100; const comparisonLabel = trackedCustomerPoint.index === 0 ? "نسبت به ابتدای هفته" : `نسبت به ${previousCustomerPoint.day}`; const isPositive = totalChange >= 0; return (

{/* Header - matches Sales Revenue layout */}

{/* Left: Label + Value + Change */}

کل مشتریان {numberFormatter.format(totalCustomers)} {trackedCustomerPoint.day}

{formatChangePercent(totalChange)} {isPositive ? (

{/* Right: Details button */}

{/* Segment metrics rows */}

{segments.map((segment) => { const isPositive = segment.change >= 0; return (

{segment.name}

{numberFormatter.format(segment.value)}

{isPositive ? (

); })}

{/* Area chart */}

{ if (typeof state.activeTooltipIndex === "number") { setActiveCustomerIndex(state.activeTooltipIndex); } }} onMouseLeave={() => setActiveCustomerIndex(undefined)} > compactNumberFormatter.format(v)} /> } cursor={{ stroke: "var(--color-customers)", strokeDasharray: "3 3", strokeOpacity: 0.35, }} />

); }; // User Retention Cohort Heatmap Card const UserRetentionCard = () => { const maxMonths = 7; return (

{/* Header */}

نگهداشت کاربر {percentFormatter.format(0.24)}

{formatChangePercent(2.0)}

{/* Heatmap */}

{cohortRetentionData.map((cohort) => (

{cohort.retentionByMonth.map((value, monthIndex) => (

{cohort.label} ماه{" "} {(monthIndex + 1).toLocaleString("fa-IR")}:{" "} {value.toLocaleString("fa-IR")}٪ ))}

))}

{/* X-axis labels */}

{Array.from({ length: maxMonths }, (_, i) => ( {(i + 1).toLocaleString("fa-IR")} ))}

); }; const StoreVisitsTargetLineChart = () => { const chartWrapperRef = React.useRef(null); const [chartWidth, setChartWidth] = React.useState(0); const [axis, setAxis] = React.useState(0); const lastVisitValue = storeVisitsData[storeVisitsData.length - 1]?.visits ?? 0; const axisSpring = useSpring(0, { stiffness: 100, damping: 30, }); const valueSpring = useSpring(lastVisitValue, { stiffness: 100, damping: 30, }); const [springyValue, setSpringyValue] = React.useState(lastVisitValue); useMotionValueEvent(axisSpring, "change", (latest) => { setAxis(Number(latest)); }); useMotionValueEvent(valueSpring, "change", (latest) => { setSpringyValue(Number(Number(latest).toFixed(0))); }); React.useEffect(() => { const el = chartWrapperRef.current; if (!el) return; const updateWidth = () => { const nextWidth = Math.max( 0, Math.floor(el.getBoundingClientRect().width), ); setChartWidth(nextWidth); setAxis((prev) => (prev === 0 ? nextWidth : prev)); }; updateWidth(); const ro = new ResizeObserver(updateWidth); ro.observe(el); return () => { ro.disconnect(); }; }, []); React.useEffect(() => { valueSpring.set(lastVisitValue); }, [lastVisitValue, valueSpring]); const safeAxis = chartWidth > 0 ? Math.min(Math.max(axis, 0), chartWidth) : axis; const rightInset = chartWidth > 0 ? Math.max(0, chartWidth - safeAxis) : 0; const clipPath = chartWidth > 0 ? `inset(0px ${rightInset}px 0px 0px)` : undefined; const tagWidth = 56; const tagHeight = 18; const tagHalfWidth = tagWidth / 2; const tagX = chartWidth > 0 ? Math.min(Math.max(safeAxis - tagWidth, 0), chartWidth - tagWidth) : 0; const textX = chartWidth > 0 ? Math.min( Math.max(safeAxis - tagHalfWidth, tagHalfWidth), chartWidth - tagHalfWidth, ) : 0; return (

{ const x = state.activeCoordinate?.x; const dataValue = state.activePayload?.[0]?.value; if (typeof x === "number" && dataValue !== undefined) { axisSpring.set(x); valueSpring.set(Number(dataValue)); } }} onMouseLeave={() => { if (chartWidth > 0) axisSpring.set(chartWidth); valueSpring.set(lastVisitValue); }} > {compactNumberFormatter.format(springyValue)}

); }; // Store Visits Card with Area Chart const StoreVisitsCard = () => { const totalVisits = 701340000; const changePercent = -12.5; return (

{/* Left: Title + Value + Change */}

بازدید فروشگاه {compactNumberFormatter.format(totalVisits)}

{formatChangePercent(changePercent, false)}

{/* Right: Growth sections */}

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

{/* KPI Stats Row */} {/* Middle Row: Sales Revenue + Segmentation */}

{/* Bottom Row: User Retention + Store Visits */}

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