b6167bcb-7363-4695-9481-addd81de4367

2026-10-26 13:40:52 +00:00
1 parent fdc3b82d10
commit d226dabba3
@@ -0,0 +1,132 @@
+'use client'
+
+import { type LucideIcon } from 'lucide-react'
+import { Card } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { cn } from '@/lib/utils'
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+}: {
+  title: string
+  description?: string
+  actions?: React.ReactNode
+}) {
+  return (
+    <div className="flex flex-col gap-3 border-b border-border pb-5 sm:flex-row sm:items-end sm:justify-between">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+        {description && <p className="max-w-2xl text-sm text-muted-foreground">{description}</p>}
+      </div>
+      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+    </div>
+  )
+}
+
+export function KpiCard({
+  label,
+  value,
+  sub,
+  icon: Icon,
+  delta,
+  tone = 'default',
+}: {
+  label: string
+  value: React.ReactNode
+  sub?: string
+  icon?: LucideIcon
+  delta?: { value: string; positive: boolean }
+  tone?: 'default' | 'muted'
+}) {
+  return (
+    <Card className={cn('gap-0 p-4', tone === 'muted' && 'bg-muted/40')}>
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0 space-y-1.5">
+          <p className="truncate text-xs font-medium text-muted-foreground">{label}</p>
+          <p className="text-2xl font-semibold tracking-tight tabular-nums">{value}</p>
+          {sub && <p className="text-[11px] text-muted-foreground">{sub}</p>}
+        </div>
+        {Icon && (
+          <div className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border text-muted-foreground">
+            <Icon className="size-4" />
+          </div>
+        )}
+      </div>
+      {delta && (
+        <p className={cn('mt-2 text-[11px] font-medium', delta.positive ? 'text-foreground' : 'text-muted-foreground')}>
+          {delta.value}
+        </p>
+      )}
+    </Card>
+  )
+}
+
+export function CardSkeletons({ count = 4 }: { count?: number }) {
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <Card key={i} className="p-4">
+          <Skeleton className="h-3 w-20" />
+          <Skeleton className="mt-3 h-7 w-28" />
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+}: {
+  icon: LucideIcon
+  title: string
+  description?: string
+  action?: React.ReactNode
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-muted/20 px-6 py-14 text-center">
+      <div className="flex size-12 items-center justify-center rounded-full border border-border bg-background">
+        <Icon className="size-5 text-muted-foreground" />
+      </div>
+      <div className="space-y-1">
+        <p className="text-sm font-medium">{title}</p>
+        {description && <p className="max-w-sm text-xs text-muted-foreground">{description}</p>}
+      </div>
+      {action}
+    </div>
+  )
+}
+
+export function StatusDot({ status }: { status: string }) {
+  const map: Record<string, string> = {
+    active: 'bg-foreground',
+    paid: 'bg-foreground',
+    won: 'bg-foreground',
+    done: 'bg-foreground',
+    approved: 'bg-foreground',
+    pending: 'bg-muted-foreground/60',
+    draft: 'bg-muted-foreground/40',
+    sent: 'bg-muted-foreground/70',
+    planning: 'bg-muted-foreground/60',
+    todo: 'bg-muted-foreground/40',
+    qualified: 'bg-muted-foreground/70',
+    proposal: 'bg-muted-foreground/70',
+    negotiation: 'bg-muted-foreground/80',
+    'in-progress': 'bg-muted-foreground/80',
+    review: 'bg-muted-foreground/80',
+    suspended: 'bg-muted-foreground/60',
+    expired: 'bg-muted-foreground/40',
+    overdue: 'bg-foreground/80',
+    lost: 'bg-muted-foreground/40',
+    rejected: 'bg-muted-foreground/40',
+    expired_assets: 'bg-muted-foreground/40',
+    expiring: 'bg-foreground/60',
+    cancelled: 'bg-muted-foreground/30',
+    storno: 'bg-muted-foreground/30',
+  }
+  return <span className={cn('inline-block size-1.5 rounded-full', map[status] ?? 'bg-muted-foreground/50')} />
+}