Analytics Dashboard

interface KPIs {
  active_patients: number;
  revenue_month: number;
  billed_month: number;
  avg_ticket: number;
  pending_today: number;
  cancelled_today: number;
}

function barChartPath(rows) {
  const maxY = Math.max(...rows.map(r => Number(r.total)), 1);
  const W = 520, H = 140;
  const barW = Math.min(40, W / rows.length - 6);
  
  return rows.map((r, i) => {
    const h = (Number(r.total) / maxY) * H;
    const x = (W / rows.length) * i + (W / rows.length - barW) / 2;
    return { ...r, h, x, y: H - h, barW };
  });
}

[
  { "month": "2026-03", "total": 125000.00, "label": "Mar" }
]

const donutSegments = data.apptStatus.map((s, i) => {
  const pct = totalAppts > 0 ? Number(s.total) / totalAppts : 0;
  const circumference = 2 * Math.PI * 54; // radius = 54
  const dash = pct * circumference;
  return {
    color: colors[i],
    dash,
    gap: circumference - dash,
    offset: currentOffset * circumference
  };
});

#1 [Service Name] ████████████████ 45 veces  RD$85,000
#2 [Service Name] ███████████      32 veces  RD$64,000
#3 [Service Name] ████████         28 veces  RD$42,000

const colors = [
  '#0d9488', // Teal
  '#2563eb', // Blue
  '#7c3aed', // Purple
  '#db2777', // Pink
  '#d97706', // Amber
  '#059669'  // Green
];

const rate = total_appts > 0 
  ? Math.round((completed / total_appts) * 100) 
  : 0;

[
  {
    "doctor_name": "Dr. Juan Díaz",
    "completed": 28,
    "total_appts": 32,
    "rate": 88
  }
]

GET /api/analytics?period=30&branchId=all

{
  "revenue": Array<{month: string, total: number, label: string}>,
  "apptStatus": Array<{status: string, total: number}>,
  "newPatients": Array<{month: string, total: number, label: string}>,
  "topServices": Array<{name: string, count: number, revenue: number}>,
  "dailyAppts": Array<{day: string, total: number}>,
  "doctorProductivity": Array<DoctorStats>,
  "kpis": KPIObject
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}