60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T28b7,"use client"; import * as React from "react"; import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, } from "recharts"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { FaArrowTrendUp, FaArrowTrendDown, FaArrowRight, FaChartLine, FaSackDollar, } from "react-icons/fa6"; export type TimeRange = "7d" | "14d" | "30d"; export interface RevenueDataPoint { label: string; value: number; } export interface RevenueStat { id: string; icon: React.ReactNode; label: string; value: string; } export interface RevenueOverviewWidgetProps { title?: string; timeRanges?: TimeRange[]; defaultRange?: TimeRange; datasets?: Record; stats?: Record; metricLabel?: string; metricValues?: Record; metricChanges?: Record; ctaLabel?: string; onCtaClick?: () => void; } const defaultDatasets: Record = { "7d": [ { label: "Mon", value: 3100 }, { label: "Tue", value: 7200 }, { label: "Wed", value: 4400 }, { label: "Thu", value: 8600 }, { label: "Fri", value: 5100 }, { label: "Sat", value: 9300 }, { label: "Sun", value: 6800 }, ], "14d": [ { label: "Apr 25", value: 3200 }, { label: "Apr 26", value: 7800 }, { label: "Apr 27", value: 4100 }, { label: "Apr 28", value: 8500 }, { label: "Apr 29", value: 5300 }, { label: "Apr 30", value: 9100 }, { label: "May 1", value: 4600 }, { label: "May 2", value: 7400 }, { label: "May 3", value: 5000 }, { label: "May 4", value: 9600 }, { label: "May 5", value: 6200 }, { label: "May 6", value: 8800 }, { label: "May 7", value: 5700 }, { label: "May 8", value: 10200 }, ], "30d": [ { label: "Apr 9", value: 2800 }, { label: "Apr 11", value: 6500 }, { label: "Apr 13", value: 3400 }, { label: "Apr 15", value: 7900 }, { label: "Apr 17", value: 4200 }, { label: "Apr 19", value: 8700 }, { label: "Apr 21", value: 3800 }, { label: "Apr 23", value: 9200 }, { label: "Apr 25", value: 5100 }, { label: "Apr 27", value: 10400 }, { label: "Apr 29", value: 6000 }, { label: "May 1", value: 8100 }, { label: "May 3", value: 4700 }, { label: "May 5", value: 9800 }, { label: "May 7", value: 6500 }, { label: "May 8", value: 11200 }, ], }; const defaultStats: Record = { "7d": [ { id: "avg", icon: , label: "Avg. daily revenue", value: "$6,214", }, { id: "top", icon: , label: "Top earning day", value: "$8,100", }, ], "14d": [ { id: "avg", icon: , label: "Avg. daily revenue", value: "$5,943", }, { id: "top", icon: , label: "Top earning day", value: "$8,400", }, ], "30d": [ { id: "avg", icon: , label: "Avg. daily revenue", value: "$5,581", }, { id: "top", icon: , label: "Top earning day", value: "$8,400", }, ], }; const defaultMetricValues: Record = { "7d": "$43,500", "14d": "$84,200", "30d": "$172,600", }; const defaultMetricChanges: Record< TimeRange, { value: string; positive: boolean } > = { "7d": { value: "+8.4%", positive: true }, "14d": { value: "+14.2%", positive: true }, "30d": { value: "-3.1%", positive: false }, }; function RevenueTooltip({ active, payload, label, }: { // Typed locally: Recharts 3 no longer declares these on TooltipProps. active?: boolean; payload?: Array<{ value?: number }>; label?: string | number; }) { if (!active || !payload?.length) return null; return (

{label}

${payload[0].value?.toLocaleString()}

); } export function RevenueOverviewWidget({ timeRanges = ["7d", "14d", "30d"], defaultRange = "14d", datasets = defaultDatasets, stats = defaultStats, metricLabel = "Total Revenue", metricValues = defaultMetricValues, metricChanges = defaultMetricChanges, ctaLabel = "Full Report", onCtaClick, }: RevenueOverviewWidgetProps) { const [activeRange, setActiveRange] = React.useState(defaultRange); const chartData = datasets[activeRange] ?? []; const metricValue = metricValues[activeRange] ?? "—"; const metricChange = metricChanges[activeRange]; const activeStats = stats[activeRange] ?? []; return (

{metricLabel}

{timeRanges.map((range) => ( ))}

{metricValue} {metricChange && ( {metricChange.positive ? ( ) : ( )} {metricChange.value} )}

} cursor={{ stroke: "var(--border)", strokeWidth: 1, strokeDasharray: "3 3", }} />

{activeStats.map((stat) => (

{stat.icon} {stat.label}

{stat.value}

))}

); } export default RevenueOverviewWidget; 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","react-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-icons"}]]}]}],["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"recharts"}]]}]}]]}],["$","$L60",null,{"namespace":"@watermelon","registryDependencies":["button","card"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"src/components/watermelon-ui/widget-5.tsx","content":"$62","type":"registry:ui","target":"components/ui/widget-5.tsx"}],"className":"h-[70svh] min-h-80"}]]}]