50: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"] 51: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"] 52:T12e2,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; type Risk = 'low' | 'medium' | 'high'; interface Customer { id: string; company: string; owner: string; avatar: string; plan: 'Enterprise' | 'Scale' | 'Team' | 'Starter'; mrr: number; risk: Risk; since: string; } const CUSTOMERS: Customer[] = [ { id: 'c1', company: 'Driftlab', owner: 'Freya Lindgren', avatar: '/avatars/people/01.jpg', plan: 'Enterprise', mrr: 4200, risk: 'low', since: 'Jan 2024', }, { id: 'c2', company: 'Keelworks', owner: 'Mateo Alvarez', avatar: '/avatars/people/03.jpg', plan: 'Scale', mrr: 1840, risk: 'low', since: 'Mar 2024', }, { id: 'c3', company: 'Lumenshift', owner: 'Aiko Watanabe', avatar: '/avatars/people/06.jpg', plan: 'Scale', mrr: 1420, risk: 'medium', since: 'Nov 2024', }, { id: 'c4', company: 'Fernwerk', owner: 'Jonas Keller', avatar: '/avatars/people/09.jpg', plan: 'Team', mrr: 640, risk: 'high', since: 'Feb 2025', }, { id: 'c5', company: 'Copperline', owner: 'Zara Osei', avatar: '/avatars/people/12.jpg', plan: 'Team', mrr: 520, risk: 'low', since: 'Jun 2025', }, { id: 'c6', company: 'Havenpoint', owner: 'Nils Bakker', avatar: '/avatars/people/13.jpg', plan: 'Starter', mrr: 96, risk: 'medium', since: 'Apr 2026', }, { id: 'c7', company: 'Sable & Co', owner: 'Leila Haddad', avatar: '/avatars/people/05.jpg', plan: 'Enterprise', mrr: 3600, risk: 'low', since: 'Sep 2023', }, ]; const RISK_STYLE: Record = { low: 'text-emerald-700 dark:text-emerald-300', medium: 'text-amber-700 dark:text-amber-300', high: 'text-rose-700 dark:text-rose-300', }; const RISK_RANK: Record = { low: 0, medium: 1, high: 2 }; const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }); const columns: DataTableColumn[] = [ { id: 'company', header: 'Customer', sortable: true, value: (row) => row.company, cell: (row) => (

{/* eslint-disable-next-line @next/next/no-img-element */}

{row.company} {row.owner}

), }, { id: 'plan', header: 'Plan', sortable: true, value: (row) => row.plan, cell: (row) => ( {row.plan} ), }, { id: 'mrr', header: 'MRR', sortable: true, numeric: true, value: (row) => row.mrr, formatTotal: (sum) => money.format(sum), cell: (row) => ( {money.format(row.mrr)} ), }, { id: 'risk', header: 'Churn risk', sortable: true, hideBelow: 'sm', value: (row) => RISK_RANK[row.risk], cell: (row) => ( ), }, { id: 'since', header: 'Since', hideBelow: 'lg', value: (row) => row.since }, ]; export function CustomersTable({ variant = 'Comfortable', }: { variant?: 'Comfortable' | 'Compact'; }) { return (

row.id} rowLabel={(row) => row.company} caption="Customers ranked by monthly recurring revenue, with plan and churn risk." density={variant === 'Compact' ? 'compact' : 'default'} title="Customers" quickFilter={{ columnId: 'plan', label: 'Filter by plan', getValue: (row) => row.plan }} totals={['mrr']} defaultSort={{ columnId: 'mrr', direction: 'desc' }} />

); } 4f:["$","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,["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/data-table"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/spectrumui/blocks/tables/customers-table.tsx","content":"$52","type":"registry:block","target":"components/spectrumui/blocks/tables/customers-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]