4e: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50:Te26,"use client"; import React from "react"; import { LabelList, Pie, PieChart } from "recharts"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, } from "@/components/ui/chart"; export type CategoryMixDatum = { category: string; /** Percent of total (0–100). Usually sums to 100. */ share: number; }; const SLICE_PALETTE = [ "var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)", ] as const; /** At most four named slices; remaining share rolls into a fifth slice, “Others”. */ const MAX_NAMED_SLICES = 4; /** Rolling window for the mix (days). */ const periodDays = 7; /** Demo mix (sums to 100). Replace or pass `data` on the component. */ const data = [ { category: "Apparel", share: 22 }, { category: "Accessories", share: 22 }, { category: "Footwear", share: 18 }, { category: "Home & living", share: 14 }, { category: "Beauty", share: 11 }, { category: "Outlet", share: 8 }, { category: "Sports", share: 5 }, ] as const satisfies readonly CategoryMixDatum[]; /** Sort by share descending, keep top four, merge the rest into “Others” (max five slices). */ function consolidateTopFourAndOthers( data: readonly CategoryMixDatum[] ): CategoryMixDatum[] { if (data.length <= MAX_NAMED_SLICES) { return [...data]; } const sorted = [...data].sort((a, b) => b.share - a.share); const head = sorted.slice(0, MAX_NAMED_SLICES); const tail = sorted.slice(MAX_NAMED_SLICES); const othersShare = tail.reduce((sum, row) => sum + row.share, 0); return [...head, { category: "Others", share: othersShare }]; } type SliceRow = { key: string; category: string; share: number; fill: string; }; function buildSlices(data: readonly CategoryMixDatum[]): { chartConfig: ChartConfig; pieData: SliceRow[]; } { const chartConfig: ChartConfig = { share: { label: "Share", }, }; const pieData: SliceRow[] = data.map((row, i) => { const key = `s${i}`; const color = SLICE_PALETTE[i % SLICE_PALETTE.length]; chartConfig[key] = { label: row.category, color, }; return { key, category: row.category, share: row.share, fill: `var(--color-${key})`, }; }); return { chartConfig, pieData }; } export function CategoryRankChart() { const { chartConfig, pieData } = React.useMemo( () => buildSlices(consolidateTopFourAndOthers(data)), [] ); return ( Revenue Share by Category Last {periodDays} days. { const n = Number(label); return Number.isFinite(n) ? `${n}%` : String(label ?? ""); }} position="inside" stroke="none" /> } /> ); } 51:T9b2,import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from "@/components/ui/item"; const actions = [ { title: "Add product", description: "Create a new SKU.", href: "#", icon: ( ), }, { title: "Review unfulfilled", description: "Orders waiting to ship.", href: "#", icon: ( ), }, { title: "Store settings", description: "Payments, checkouts etc.", href: "#", icon: ( ), }, { title: "Export sales", description: "CSV for accountings.", href: "#", icon: ( ), }, ] as const; export function QuickActions() { return ( Quick actions Shortcuts to same destinations. {actions.map((a) => ( {a.icon} {a.title} {a.description} ))} ); } 52:Tce6,"use client"; import { CartesianGrid, Line, LineChart, XAxis } from "recharts"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; import { Delta, DeltaIcon, DeltaValue } from "@/components/delta"; /** Daily return rate (% of fulfilled orders returned), last 7 days (demo). */ const returnDaily7 = [ { day: "Mon", returnRate: 2.2 }, { day: "Tue", returnRate: 1.5 }, { day: "Wed", returnRate: 3.1 }, { day: "Thu", returnRate: 4.8 }, { day: "Fri", returnRate: 2.4 }, { day: "Sat", returnRate: 3.2 }, { day: "Sun", returnRate: 3.9 }, ] as const; /** Share of orders that were refunded over the same window (demo). */ const REFUNDED_SHARE_OF_ORDERS_PCT = 2.6; const chartConfig = { returnRate: { label: "Return %", color: "var(--chart-1)", }, } satisfies ChartConfig; export function RefundReturnRateChart() { const first = returnDaily7[0]; const lastW = returnDaily7.at(-1) ?? first; const returnTrendPct = first.returnRate > 0 ? ((lastW.returnRate - first.returnRate) / first.returnRate) * 100 : 0; return (

Return rate Last 7 days

{REFUNDED_SHARE_OF_ORDERS_PCT}% of orders refunded

} />

vs first day (last 7 days)

); } 53:Tedf,export const revenueChartDemo = [ { date: "2026-01-21", revenue: 10_135 }, { date: "2026-01-22", revenue: 10_415 }, { date: "2026-01-23", revenue: 10_349 }, { date: "2026-01-24", revenue: 10_011 }, { date: "2026-01-25", revenue: 9657 }, { date: "2026-01-26", revenue: 9548 }, { date: "2026-01-27", revenue: 9770 }, { date: "2026-01-28", revenue: 10_177 }, { date: "2026-01-29", revenue: 10_500 }, { date: "2026-01-30", revenue: 10_539 }, { date: "2026-01-31", revenue: 10_302 }, { date: "2026-02-01", revenue: 9993 }, { date: "2026-02-02", revenue: 9858 }, { date: "2026-02-03", revenue: 10_014 }, { date: "2026-02-04", revenue: 10_367 }, { date: "2026-02-05", revenue: 10_700 }, { date: "2026-02-06", revenue: 10_828 }, { date: "2026-02-07", revenue: 10_739 }, { date: "2026-02-08", revenue: 10_204 }, { date: "2026-02-09", revenue: 10_137 }, { date: "2026-02-10", revenue: 10_288 }, { date: "2026-02-11", revenue: 10_583 }, { date: "2026-02-12", revenue: 11_391 }, { date: "2026-02-13", revenue: 11_548 }, { date: "2026-02-14", revenue: 11_569 }, { date: "2026-02-15", revenue: 11_590 }, { date: "2026-02-16", revenue: 11_748 }, { date: "2026-02-17", revenue: 12_056 }, { date: "2026-02-18", revenue: 12_380 }, { date: "2026-02-19", revenue: 12_539 }, { date: "2026-02-20", revenue: 12_448 }, { date: "2026-02-21", revenue: 12_200 }, { date: "2026-02-22", revenue: 12_016 }, { date: "2026-02-23", revenue: 12_085 }, { date: "2026-02-24", revenue: 12_845 }, { date: "2026-02-25", revenue: 13_283 }, { date: "2026-02-26", revenue: 13_160 }, { date: "2026-02-27", revenue: 13_188 }, { date: "2026-02-28", revenue: 13_031 }, { date: "2026-03-01", revenue: 12_930 }, { date: "2026-03-02", revenue: 13_113 }, { date: "2026-03-03", revenue: 13_618 }, { date: "2026-03-04", revenue: 14_259 }, { date: "2026-03-05", revenue: 14_745 }, { date: "2026-03-06", revenue: 14_880 }, { date: "2026-03-07", revenue: 14_692 }, { date: "2026-03-08", revenue: 14_414 }, { date: "2026-03-09", revenue: 14_316 }, { date: "2026-03-10", revenue: 14_519 }, { date: "2026-03-11", revenue: 14_924 }, { date: "2026-03-12", revenue: 15_299 }, { date: "2026-03-13", revenue: 15_451 }, { date: "2026-03-14", revenue: 14_847 }, { date: "2026-03-15", revenue: 15_211 }, { date: "2026-03-16", revenue: 15_192 }, { date: "2026-03-17", revenue: 15_411 }, { date: "2026-03-18", revenue: 15_789 }, { date: "2026-03-19", revenue: 16_140 }, { date: "2026-03-20", revenue: 16_317 }, { date: "2026-03-21", revenue: 16_321 }, { date: "2026-03-22", revenue: 16_020 }, { date: "2026-03-23", revenue: 16_380 }, { date: "2026-03-24", revenue: 16_060 }, { date: "2026-03-25", revenue: 16_710 }, { date: "2026-03-26", revenue: 16_340 }, { date: "2026-03-27", revenue: 16_890 }, { date: "2026-03-28", revenue: 16_530 }, { date: "2026-03-29", revenue: 16_995 }, { date: "2026-03-30", revenue: 16_720 }, { date: "2026-03-31", revenue: 17_115 }, { date: "2026-04-01", revenue: 16_865 }, { date: "2026-04-02", revenue: 17_395 }, { date: "2026-04-03", revenue: 17_055 }, { date: "2026-04-04", revenue: 16_695 }, { date: "2026-04-05", revenue: 16_425 }, { date: "2026-04-06", revenue: 16_980 }, { date: "2026-04-07", revenue: 16_520 }, { date: "2026-04-08", revenue: 17_410 }, { date: "2026-04-09", revenue: 16_745 }, { date: "2026-04-10", revenue: 17_595 }, { date: "2026-04-11", revenue: 16_955 }, { date: "2026-04-12", revenue: 17_720 }, { date: "2026-04-13", revenue: 17_185 }, { date: "2026-04-14", revenue: 18_020 }, { date: "2026-04-15", revenue: 17_395 }, { date: "2026-04-16", revenue: 17_880 }, { date: "2026-04-17", revenue: 17_210 }, { date: "2026-04-18", revenue: 18_240 }, { date: "2026-04-19", revenue: 17_420 }, { date: "2026-04-20", revenue: 17_785 }, ]; 54:T1528,"use client"; import { useId, useMemo, useState } from "react"; import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; import { formatChartAxisTick, formatChartTooltipDate } from "@/lib/formater"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Delta, DeltaIcon, DeltaValue } from "@/components/delta"; import { revenueChartDemo } from "@/components/revenue-chart-data"; /** Matches ` { setPeriodDays(Number(v) as PeriodDays); }} value={String(periodDays)} > Last 7 days Last 14 days Last 30 days Last 60 days Last 90 days formatChartAxisTick(String(value), periodDays) } tickLine={false} tickMargin={8} /> { const row = payload?.[0]?.payload as RevenueRow | undefined; if (!row?.date) { return ""; } return formatChartTooltipDate(row.date, "short"); }} /> } />

vs first day in last {periodDays} days.

); } 55:T59a,import { Card, CardContent, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { Delta, DeltaIcon, DeltaValue } from "@/components/delta"; type Stat = { label: string; value: string; delta: number; hint: string; }; const stats: readonly Stat[] = [ { label: "Total revenue", value: "$284,920", delta: 8.2, hint: "vs prior 30 days", }, { label: "Orders", value: "1,842", delta: 4.1, hint: "vs prior 30 days", }, { label: "Average order value", value: "$154.60", delta: -1.3, hint: "vs prior 30 days", }, { label: "Store conversion", value: "3.06%", delta: 0.6, hint: "vs prior 30 days", }, ] as const; export function DashboardStats() { return ( <> {stats.map((s) => ( ))} ); } function StatCard({ stat }: { stat: Stat }) { const { label, value, delta, hint } = stat; return ( {label}

{value}

{hint} ); } 56:T13a3,"use client"; import { cn } from "@/lib/utils"; import * as React from "react"; import { Badge } from "@/components/ui/badge"; type DeltaIconVariant = "default" | "trend" | "arrow"; type DeltaVariant = "default" | "badge"; type DeltaContextValue = { value: number; }; const DeltaContext = React.createContext(null); function useDeltaValue() { const context = React.useContext(DeltaContext); if (!context) { throw new Error( "DeltaIcon and DeltaValue must be used inside a `Delta` component." ); } return context.value; } function Delta({ className, value, variant = "default", ...props }: React.ComponentProps<"div"> & { value: number; variant?: DeltaVariant; }) { return ( {variant === "badge" ? ( 0 ? "bg-emerald-500/10 text-emerald-500" : "bg-red-500/10 text-red-500", className )} data-slot="delta" variant="secondary" {...(props as React.ComponentProps)} /> ) : (

0 ? "text-emerald-600 dark:text-emerald-400" : "", value < 0 ? "text-rose-600 dark:text-rose-400" : "", className )} data-slot="delta" {...props} /> )} ); } function FilledShell({ value, children, }: { value: number; children: React.ReactNode; }) { return ( 0 && "bg-emerald-500", value < 0 && "bg-red-500", (!value || value === 0) && "bg-muted-foreground" )} data-slot="delta-icon" > {children} ); } function DeltaIcon({ variant = "default", filled = false, className, ...props }: Omit, "fill"> & { variant?: DeltaIconVariant; filled?: boolean; }) { const resolvedValue = useDeltaValue(); const mergedClassName = cn(className); const shell = (node: React.ReactElement) => filled ? {node} : node; const slotProps = filled ? {} : { "data-slot": "delta-icon" as const }; if (!resolvedValue || resolvedValue === 0) { return shell( ); } if (resolvedValue > 0) { if (variant === "trend") { return shell( ); } if (variant === "arrow") { return shell( ); } return shell( ); } if (variant === "trend") { return shell( ); } if (variant === "arrow") { return shell( ); } return shell( ); } function DeltaValue({ className, precision = 1, suffix = "%", absolute = true, ...props }: React.ComponentProps<"span"> & { precision?: number; suffix?: string; absolute?: boolean; }) { const resolvedValue = useDeltaValue(); const formattedValue = ( absolute ? Math.abs(resolvedValue) : resolvedValue ).toFixed(precision); return ( {formattedValue} {suffix} ); } export { Delta, DeltaIcon, DeltaValue }; 4d:["$","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":[null,["$","$L4e",null,{"namespace":"@efferd","registryDependencies":["badge","button","card","chart","item","select","@efferd/app-shell-4","@efferd/formater"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/dashboard/4/category-rank-chart.tsx","content":"$50","type":"registry:component"},{"path":"registry/blocks/dashboard/4/dashboard.tsx","content":"import { CategoryRankChart } from \"@/components/category-rank-chart\";\nimport { QuickActions } from \"@/components/quick-actions\";\nimport { RefundReturnRateChart } from \"@/components/refund-return-rate-chart\";\nimport { RevenueChart } from \"@/components/revenue-chart\";\nimport { DashboardStats } from \"@/components/stats\";\n\nexport function Dashboard() {\n\treturn (\n\t\t

\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t

\n\t);\n}\n","type":"registry:component"},{"path":"registry/blocks/dashboard/4/quick-actions.tsx","content":"$51","type":"registry:component"},{"path":"registry/blocks/dashboard/4/refund-return-rate-chart.tsx","content":"$52","type":"registry:component"},{"path":"registry/blocks/dashboard/4/revenue-chart-data.ts","content":"$53","type":"registry:component"},{"path":"registry/blocks/dashboard/4/revenue-chart.tsx","content":"$54","type":"registry:component"},{"path":"registry/blocks/dashboard/4/stats.tsx","content":"$55","type":"registry:component"},{"path":"registry/blocks/dashboard/delta.tsx","content":"$56","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]