{label}

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

); } // Custom gradient bar shape for Sales Revenue chart const CustomGradientBar = ( props: React.SVGProps & { index?: number; activeIndex: number | undefined; setActiveIndex: (index: number | undefined) => void; maxValueIndex: number; }, ) => { const { fill, x, y, width, height, index, activeIndex, setActiveIndex, maxValueIndex, } = props; const highlightedIndex = activeIndex !== undefined ? activeIndex : maxValueIndex; const isActive = index === highlightedIndex; const gradientId = `revenue-gradient-${index}`; const barFill = isActive ? palette.secondary.light : palette.tertiary.light; return ( setActiveIndex(index)}> {/* Gradient body */} {/* 2px solid cap at top */} ); }; // 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={false} /> } /> } />

); }; // Proportional Bubble Chart (Pure SVG) const ProportionalBubbleChart = ({ activeIndex, onHover, }: { activeIndex: number | null; onHover: (index: number | null) => void; }) => { const maxPct = Math.max(...customerSegmentsData.map((r) => r.percentage)); const maxRadius = 70; const positions = [ { cx: 180, cy: 105 }, { cx: 75, cy: 130 }, { cx: 100, cy: 55 }, ]; return ( ); }; // Customer Segments Card const CustomerSegmentsCard = () => { const isPositive = totalCustomersChange >= 0; const [activeIndex, setActiveIndex] = React.useState(null); return (

setActiveIndex(null)} > {/* Header - matches SalesRevenueCard pattern */}

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

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

{formatChangePercent(totalCustomersChange)} {isPositive ? (

{/* Right: Details button */}

{/* Bubble chart */}

{/* Legend rows */}

{customerSegmentsData.map((segment, i) => { const segmentPositive = segment.change >= 0; const isActive = activeIndex === i; const isDimmed = activeIndex !== null && activeIndex !== i; return (

setActiveIndex(i)} onMouseLeave={() => setActiveIndex(null)} >

{segment.name}

{numberFormatter.format(segment.customers)}

{segmentPositive ? (

); })}

); }; // Dotted World Map (Pure SVG) const DottedWorldMap = ({ activeIndex, onSelect, hoveredIndex, onHover, }: { activeIndex: number | null; onSelect: (index: number | null) => void; hoveredIndex: number | null; onHover: (index: number | null) => void; }) => { const maxUsers = Math.max(...geographyCountries.map((c) => c.users)); const minRadius = 1.2; const maxRadius = 2.8; return ( ); }; // Geography Card const GeographyCard = () => { const [activeIndex, setActiveIndex] = React.useState(null); const [hoveredIndex, setHoveredIndex] = React.useState(null); const selected = activeIndex !== null ? geographyCountries[activeIndex] : null; const hovered = hoveredIndex !== null ? geographyCountries[hoveredIndex] : null; const previewCountry = hovered ?? selected; const globalDemographics = { men: Math.round( geographyCountries.reduce((s, c) => s + c.demographics.men * c.users, 0) / totalGeographyUsers, ), women: Math.round( geographyCountries.reduce( (s, c) => s + c.demographics.women * c.users, 0, ) / totalGeographyUsers, ), other: Math.round( geographyCountries.reduce( (s, c) => s + c.demographics.other * c.users, 0, ) / totalGeographyUsers, ), }; const displayUsers = previewCountry ? previewCountry.users : totalGeographyUsers; const displayDemographics = previewCountry ? previewCountry.demographics : globalDemographics; const displayLabel = previewCountry ? { flag: previewCountry.flag, name: previewCountry.name } : null; const tooltipCountry = hovered; const tooltipPin = hoveredIndex !== null ? geographyPinPositions[hoveredIndex] : null; const viewBoxW = 63; const viewBoxH = 30; let tooltipLeft = 0; let tooltipTop = 0; let tooltipAbove = false; if (tooltipPin) { tooltipLeft = (tooltipPin.x / viewBoxW) * 100; tooltipTop = (tooltipPin.y / viewBoxH) * 100; tooltipAbove = tooltipPin.y > viewBoxH / 2; } const tooltipTranslateX = tooltipLeft < 20 ? "0%" : tooltipLeft > 80 ? "-100%" : "-50%"; return (

جغرافیا

{numberFormatter.format(displayUsers)} {displayLabel && ( {displayLabel.flag} {displayLabel.name} )}

مرد {displayDemographics.men.toLocaleString("fa-IR")}٪ زن {displayDemographics.women.toLocaleString("fa-IR")}٪ سایر {displayDemographics.other.toLocaleString("fa-IR")}٪

{tooltipCountry && tooltipPin && (

{tooltipCountry.flag} {tooltipCountry.name}

{numberFormatter.format(tooltipCountry.users)}

م {tooltipCountry.demographics.men.toLocaleString("fa-IR")}٪ ز {tooltipCountry.demographics.women.toLocaleString("fa-IR")}٪ س {tooltipCountry.demographics.other.toLocaleString("fa-IR")}٪

)}

); }; // Recent Orders Card (activity table) function RecentOrdersCard() { return (

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

{recentOrders.map((order) => ( ))}

مشتری	سفارش	وضعیت	مبلغ	زمان
{order.customer.avatar} {order.customer.name}	{order.orderId}	{orderStatusLabels[order.status]}	{currencyFormatter.format(order.amount)}	{order.date}

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

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

{/* Bottom Row: Geography + Recent Orders */}

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

ری یو آی Store / نمای کلی

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