133 lines
4.1 KiB
TypeScript
133 lines
4.1 KiB
TypeScript
'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')} />
|
|
}
|