Mejoras integrales: visitas, POS, WACRM, reportes, temas y módulos legacy

- Módulo Visitas completo (auto desde agenda, insumos con descargo de
  inventario, fotos antes/después y documentos, receta imprimible)
- Punto de Venta (catálogo + ticket sticky, cobro con cambio, pago con
  puntos monedero, ticket imprimible)
- WACRM: leads automáticos desde WhatsApp, asignación de conversaciones
  y leads a agentes, conversión lead→paciente, ficha del paciente en chat
- Pacientes: completitud de expediente, alertas clínicas, historial
  unificado con detalle, foto, WhatsApp, estado de cuenta, filtros
  rápidos (VIP/recientes/médico), documentos (expediente escaneado + galería)
- Agenda: vistas por médico y por hora, filtros rápidos (libres, primera
  vez, check-in, no-show), modal de acciones, bloqueos por médico,
  drag&drop para mover citas
- Reportes: 18 pestañas (diario, cortes, ingresos, inventario, adeudos,
  comisiones, pagos, devoluciones, top clientes, horas, paquetes,
  vendedores, concentrado, recomendaciones, KPIs) con exportación Excel
- Temas: nuevo tema Clásico (look legacy AdminLTE) con submenús tipo
  treeview, selector de tema; accesos rápidos personalizables con 3
  presentaciones; búsqueda global; notificaciones reales
- Configuración: secciones (clínica, usuarios con permisos por sección,
  recetas, catálogos de diagnósticos y procedimientos)
- Inventario: alertas de caducidad y sugerencia de compra, cron diario
  que descuenta artículos caducados, compras/bajas
- Consultas Médicas, página Expedientes, importadores delta
  (citas/visitas legacy idempotentes), depuración de duplicados
- Infra: tema Tailwind conectado (@config), gzip en nginx, secuencias
  Odoo corregidas (noupdate, company_id), rollback en validaciones

frontend/src/components/reportes/KpisReport.tsx

@@ -0,0 +1,244 @@
+import type { FC } from 'react';
+import { useEffect, useState, useCallback } from 'react';
+import { Gauge, UserX, TrendingUp, UserPlus } from 'lucide-react';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+import { Card, Input, EmptyState, Skeleton, toast } from '../ui';
+import { ExportButton } from '../ui/ExportButton';
+import { exportToExcel } from '../../lib/exporter';
+import { odooApi, type KpisReport as KpisData } from '../../services/odoo';
+
+const pct = (v: number) => `${Math.round(v * 100)}%`;
+
+const inicioDeMes = () => {
+  const d = new Date();
+  d.setDate(1);
+  return d.toISOString().split('T')[0];
+};
+const hoy = () => new Date().toISOString().split('T')[0];
+
+const Kpi: FC<{ label: string; value: React.ReactNode; icon: React.ReactNode; rose?: boolean }> = ({ label, value, icon, rose }) => (
+  <Card className="p-4 bg-theme-bg border-0">
+    <div className="flex items-center gap-2 mb-1">
+      <span className="text-theme-muted">{icon}</span>
+      <p className="text-xs text-theme-muted">{label}</p>
+    </div>
+    <p className={`text-xl font-heading font-semibold ${rose ? 'text-rose-600' : 'text-theme-heading'}`}>{value}</p>
+  </Card>
+);
+
+const KpisReport: FC = () => {
+  const [start, setStart] = useState(inicioDeMes());
+  const [end, setEnd] = useState(hoy());
+  const [data, setData] = useState<KpisData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [exporting, setExporting] = useState(false);
+
+  const load = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await odooApi.getKpis(start, end);
+      if (res.status === 'success') {
+        const { no_show, ocupacion, leads, primera_vez, start: s, end: e } = res;
+        setData({ no_show, ocupacion, leads, primera_vez, start: s, end: e });
+      }
+    } catch (err) {
+      toast.error('Error al cargar KPIs');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [start, end]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const exportar = async () => {
+    if (!data) return;
+    try {
+      setExporting(true);
+      const rows: Record<string, unknown>[] = [];
+      data.no_show.por_medico.forEach((m) =>
+        rows.push({ seccion: 'No-show', medico: m.medico, citas: m.citas, casos: m.no_shows, horas: null, tasa: m.tasa }));
+      data.ocupacion.por_medico.forEach((o) =>
+        rows.push({ seccion: 'Ocupación', medico: o.medico, citas: null, casos: null, horas: o.horas_vendidas, tasa: o.ocupacion }));
+      rows.push({ seccion: 'Resumen', medico: 'No-show global', citas: data.no_show.total_citas, casos: data.no_show.total_no_shows, horas: null, tasa: data.no_show.tasa });
+      rows.push({ seccion: 'Resumen', medico: 'Conversión leads', citas: data.leads.total, casos: data.leads.ganados, horas: null, tasa: data.leads.tasa });
+      rows.push({ seccion: 'Resumen', medico: 'Primera vez', citas: data.primera_vez.primera + data.primera_vez.subsecuentes, casos: data.primera_vez.primera, horas: null, tasa: data.primera_vez.tasa });
+      await exportToExcel({
+        filename: `kpis-${start}_${end}`,
+        sheetName: 'KPIs',
+        title: 'KPIs clínicos SKEEN',
+        subtitle: `Del ${start} al ${end}`,
+        columns: [
+          { header: 'Sección', key: 'seccion' },
+          { header: 'Médico / Concepto', key: 'medico' },
+          { header: 'Citas / Leads', key: 'citas', format: 'number' },
+          { header: 'Casos', key: 'casos', format: 'number' },
+          { header: 'Horas vendidas', key: 'horas', format: 'number' },
+          { header: 'Tasa', key: 'tasa', format: 'percent' },
+        ],
+        rows,
+      });
+      toast.success('Excel descargado');
+    } catch (err) {
+      toast.error('Error al exportar');
+      console.error(err);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4 sm:space-y-6">
+      <Card>
+        <Card.Body>
+          <div className="flex flex-col sm:flex-row gap-3 items-end">
+            <Input label="Inicio" type="date" value={start} onChange={(e) => setStart(e.target.value)} className="sm:max-w-[160px]" />
+            <Input label="Fin" type="date" value={end} onChange={(e) => setEnd(e.target.value)} className="sm:max-w-[160px]" />
+            <div className="sm:ml-auto">
+              <ExportButton onClick={exportar} loading={exporting} />
+            </div>
+          </div>
+        </Card.Body>
+      </Card>
+
+      {loading ? (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-24 w-full" />)}
+        </div>
+      ) : data ? (
+        <>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <Kpi label="Tasa no-show" value={pct(data.no_show.tasa)} icon={<UserX size={15} />} rose={data.no_show.tasa > 0.15} />
+            <Kpi label="Ocupación promedio" value={pct(data.ocupacion.promedio)} icon={<Gauge size={15} />} />
+            <Kpi label="Conversión de leads" value={pct(data.leads.tasa)} icon={<TrendingUp size={15} />} />
+            <Kpi label="Pacientes primera vez" value={pct(data.primera_vez.tasa)} icon={<UserPlus size={15} />} />
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
+            {/* No-show por médico */}
+            <Card>
+              <Card.Body>
+                <h3 className="font-heading text-xl text-theme-heading mb-1">No-show por médico</h3>
+                <p className="text-xs text-theme-muted mb-4">
+                  {data.no_show.total_no_shows} no-shows de {data.no_show.total_citas} citas (canceladas no cuentan).
+                </p>
+                {data.no_show.por_medico.length === 0 ? (
+                  <p className="text-sm text-theme-muted">Sin citas en el periodo.</p>
+                ) : (
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm">
+                      <thead className="bg-theme-bg text-theme-muted text-xs uppercase">
+                        <tr>
+                          <th className="text-left px-4 py-3">Médico</th>
+                          <th className="text-right px-4 py-3">Citas</th>
+                          <th className="text-right px-4 py-3">No-shows</th>
+                          <th className="text-right px-4 py-3">Tasa</th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-theme-border">
+                        {data.no_show.por_medico.map((m) => (
+                          <tr key={m.medico} className="hover:bg-theme-bg">
+                            <td className="px-4 py-3 font-medium text-theme-heading">{m.medico}</td>
+                            <td className="px-4 py-3 text-right text-theme-muted">{m.citas}</td>
+                            <td className="px-4 py-3 text-right text-theme-muted">{m.no_shows}</td>
+                            <td className={`px-4 py-3 text-right font-medium ${m.tasa > 0.15 ? 'text-rose-600' : 'text-theme-heading'}`}>
+                              {pct(m.tasa)}
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+              </Card.Body>
+            </Card>
+
+            {/* Ocupación por médico */}
+            <Card>
+              <Card.Body>
+                <h3 className="font-heading text-xl text-theme-heading mb-1">Ocupación por médico</h3>
+                <p className="text-xs text-theme-muted mb-4">
+                  {data.ocupacion.dias_habiles} días hábiles × 8h (domingos no cuentan), menos bloqueos de agenda.
+                </p>
+                {data.ocupacion.por_medico.length === 0 ? (
+                  <p className="text-sm text-theme-muted">Sin citas en el periodo.</p>
+                ) : (
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm">
+                      <thead className="bg-theme-bg text-theme-muted text-xs uppercase">
+                        <tr>
+                          <th className="text-left px-4 py-3">Médico</th>
+                          <th className="text-right px-4 py-3">Vendidas</th>
+                          <th className="text-right px-4 py-3">Disponibles</th>
+                          <th className="text-right px-4 py-3">Libres</th>
+                          <th className="text-right px-4 py-3">Ocupación</th>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-theme-border">
+                        {data.ocupacion.por_medico.map((o) => (
+                          <tr key={o.medico} className="hover:bg-theme-bg">
+                            <td className="px-4 py-3 font-medium text-theme-heading">{o.medico}</td>
+                            <td className="px-4 py-3 text-right text-theme-muted">{o.horas_vendidas}h</td>
+                            <td className="px-4 py-3 text-right text-theme-muted">{o.horas_disponibles}h</td>
+                            <td className="px-4 py-3 text-right text-theme-muted">{o.horas_libres}h</td>
+                            <td className="px-4 py-3 text-right font-medium text-theme-heading">{pct(o.ocupacion)}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+                {data.ocupacion.por_medico.length > 0 && (
+                  <div className="mt-4">
+                    <ResponsiveContainer width="100%" height={180}>
+                      <BarChart data={data.ocupacion.por_medico.map((o) => ({ name: o.medico.split(' ')[0], ocupacion: Math.round(o.ocupacion * 100) }))} margin={{ top: 4, right: 8, left: -16, bottom: 0 }}>
+                        <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e7e5e4" />
+                        <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#78716c', fontSize: 11 }} />
+                        <YAxis axisLine={false} tickLine={false} tick={{ fill: '#78716c', fontSize: 11 }} unit="%" />
+                        <Tooltip contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 4px 12px rgba(0,0,0,0.08)' }} formatter={(v) => `${v}%`} />
+                        <Bar dataKey="ocupacion" fill="#57534e" radius={[4, 4, 0, 0]} name="Ocupación" />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </div>
+                )}
+              </Card.Body>
+            </Card>
+          </div>
+
+          {/* Leads y primera vez */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Card className="p-4 bg-theme-bg border-0">
+              <p className="text-xs text-theme-muted mb-1">Conversión de leads (deals creados en el periodo)</p>
+              <p className="text-sm text-theme-heading">
+                <span className="font-semibold">{data.leads.ganados}</span> ganados de{' '}
+                <span className="font-semibold">{data.leads.total}</span> leads ({pct(data.leads.tasa)})
+                {data.leads.dias_promedio_ganar !== null && (
+                  <span className="text-theme-muted"> · prom. {data.leads.dias_promedio_ganar} días a ganar</span>
+                )}
+              </p>
+            </Card>
+            <Card className="p-4 bg-theme-bg border-0">
+              <p className="text-xs text-theme-muted mb-1">Primera vez vs subsecuentes</p>
+              <p className="text-sm text-theme-heading">
+                <span className="font-semibold">{data.primera_vez.primera}</span> primera vez ·{' '}
+                <span className="font-semibold">{data.primera_vez.subsecuentes}</span> subsecuentes
+              </p>
+            </Card>
+          </div>
+        </>
+      ) : (
+        <EmptyState title="Sin datos" subtitle="No se pudieron calcular los KPIs." />
+      )}
+    </div>
+  );
+};
+
+export default KpisReport;