92 lines
3.1 KiB
JavaScript
92 lines
3.1 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { ChevronDown, ChevronRight } from 'lucide-react';
|
|
|
|
export function fmt(isoStr) {
|
|
if (!isoStr) return '—';
|
|
const d = new Date(isoStr);
|
|
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
|
|
+ ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
}
|
|
|
|
export function importErrorState(err, fallback) {
|
|
const data = err?.data || {};
|
|
return {
|
|
message: err?.message || data.message || data.error || fallback,
|
|
error: data.error || fallback,
|
|
code: data.code || err?.code || null,
|
|
details: Array.isArray(data.details) ? data.details : (Array.isArray(err?.details) ? err.details : []),
|
|
error_id: data.error_id || null,
|
|
};
|
|
}
|
|
|
|
export function SectionCard({
|
|
title,
|
|
subtitle,
|
|
children,
|
|
className,
|
|
collapsible = false,
|
|
defaultOpen = true,
|
|
storageKey,
|
|
summary,
|
|
actions,
|
|
}) {
|
|
const [open, setOpen] = useState(() => {
|
|
if (!collapsible || !storageKey || typeof window === 'undefined') return defaultOpen;
|
|
const stored = window.localStorage.getItem(storageKey);
|
|
return stored === null ? defaultOpen : stored === 'true';
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!collapsible || !storageKey || typeof window === 'undefined') return;
|
|
window.localStorage.setItem(storageKey, String(open));
|
|
}, [collapsible, open, storageKey]);
|
|
|
|
const headerContent = (
|
|
<>
|
|
{collapsible && (
|
|
open
|
|
? <ChevronDown className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
|
: <ChevronRight className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
|
|
)}
|
|
<div className="min-w-0 flex-1">
|
|
<h2 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">{title}</h2>
|
|
{subtitle && <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>}
|
|
{collapsible && !open && summary && (
|
|
<p className="mt-1 truncate text-xs font-medium text-muted-foreground/80">{summary}</p>
|
|
)}
|
|
</div>
|
|
{actions && <div className="shrink-0">{actions}</div>}
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<div className={cn('table-surface mb-6', className)}>
|
|
{collapsible ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(value => !value)}
|
|
className="flex w-full items-start gap-2 border-b border-border/50 px-6 py-4 text-left transition-colors hover:bg-muted/20"
|
|
aria-expanded={open}
|
|
>
|
|
{headerContent}
|
|
</button>
|
|
) : (
|
|
<div className="flex items-start gap-2 border-b border-border/50 px-6 py-4">
|
|
{headerContent}
|
|
</div>
|
|
)}
|
|
{open && <div className="divide-y divide-border/50">{children}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CountPill({ label, value }) {
|
|
return (
|
|
<div className="rounded-lg border border-border/60 bg-muted/25 px-3 py-2">
|
|
<p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">{label}</p>
|
|
<p className="mt-1 text-sm font-semibold tabular-nums">{value ?? 0}</p>
|
|
</div>
|
|
);
|
|
}
|