pn-new-crm/src/components/dashboard/kpi-cards.tsx

'use client';

import { useQuery } from '@tanstack/react-query';

import { apiFetch } from '@/lib/api/client';
import { KPITile } from '@/components/ui/kpi-tile';
import { Skeleton } from '@/components/ui/skeleton';
import { WidgetErrorBoundary } from './widget-error-boundary';

interface KpiData {
  totalClients: number;
  activeInterests: number;
  pipelineValueUsd: number;
  occupancyRate: number;
}

function formatCurrency(value: number): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: 0,
  }).format(value);
}

function formatPercent(value: number): string {
  return `${value.toFixed(1)}%`;
}

function KpiTileSkeleton() {
  return (
    <div className="relative overflow-hidden rounded-xl border border-border bg-card p-5 shadow-sm">
      <div className="absolute inset-x-0 top-0 h-1 bg-muted" aria-hidden />
      <Skeleton className="h-3 w-24" />
      <Skeleton className="mt-3 h-7 w-32" />
      <Skeleton className="mt-2 h-3 w-12" />
    </div>
  );
}

export function KpiCards() {
  const { data, isLoading, isError } = useQuery<KpiData>({
    queryKey: ['dashboard', 'kpis'],
    queryFn: () => apiFetch<KpiData>('/api/v1/dashboard/kpis'),
    staleTime: 60_000,
    retry: 2,
  });

  if (isLoading) {
    return (
      <>
        <KpiTileSkeleton />
        <KpiTileSkeleton />
        <KpiTileSkeleton />
        <KpiTileSkeleton />
      </>
    );
  }

  const kpis: Array<{
    label: string;
    value: string;
    accent: 'brand' | 'success' | 'warning' | 'mint' | 'teal' | 'purple';
  }> = [
    {
      label: 'Total Clients',
      value: isError ? '—' : String(data?.totalClients ?? 0),
      accent: 'brand',
    },
    {
      label: 'Active Interests',
      value: isError ? '—' : String(data?.activeInterests ?? 0),
      accent: 'teal',
    },
    {
      label: 'Pipeline Value',
      value: isError ? '—' : formatCurrency(data?.pipelineValueUsd ?? 0),
      accent: 'success',
    },
    {
      label: 'Occupancy Rate',
      value: isError ? '—' : formatPercent(data?.occupancyRate ?? 0),
      accent: 'purple',
    },
  ];

  return (
    <>
      {kpis.map(({ label, value, accent }) => (
        <KPITile key={label} title={label} value={value} accent={accent} />
      ))}
    </>
  );
}

export function KpiCardsWithBoundary() {
  return (
    <WidgetErrorBoundary>
      <KpiCards />
    </WidgetErrorBoundary>
  );
}