UX Pacientes: drawer de ficha clicable global, cumpleanos en dashboard/agenda, badges VIP/alergias/adeudo en ficha y POS

frontend/src/pages/Ventas.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import { useEffect, useState, useCallback } from 'react';
 import { Plus, Trash2, CreditCard, ShoppingCart, Search, Undo2, Download } from 'lucide-react';
 import Layout from '../components/Layout';
+import { usePatientDrawer } from '../components/PatientDrawer';
 import {
   Card,
   Button,
@@ -37,6 +38,7 @@ const emptyLine = (): LineForm => ({
 const paymentMethods = ['Efectivo', 'Tarjeta', 'Transferencia', 'MercadoPago'];
 
 const Ventas: FC = () => {
+  const { openPatient } = usePatientDrawer();
   const [sales, setSales] = useState<Sale[]>([]);
   const [services, setServices] = useState<Service[]>([]);
   const [patients, setPatients] = useState<Patient[]>([]);
@@ -356,7 +358,16 @@ const Ventas: FC = () => {
                     {sales.map((s) => (
                       <tr key={s.id} className="hover:bg-theme-bg">
                         <td className="p-3 text-sm text-theme-muted">{s.name}</td>
-                        <td className="p-3 text-sm font-medium text-theme-heading">{s.patient}</td>
+                        <td className="p-3 text-sm font-medium text-theme-heading">
+                          <button
+                            type="button"
+                            onClick={() => openPatient(s.patient_id)}
+                            className="hover:underline hover:text-theme-accent text-left"
+                            title="Abrir ficha del paciente"
+                          >
+                            {s.patient}
+                          </button>
+                        </td>
                         <td className="p-3 text-sm font-semibold text-theme-heading">${s.total}</td>
                         <td className="p-3 text-sm text-theme-muted hidden md:table-cell">${s.amount_paid}</td>
                         <td className="p-3">
@@ -391,7 +402,16 @@ const Ventas: FC = () => {
                 {sales.map((s) => (
                   <MobileCard
                     key={s.id}
-                    title={s.patient}
+                    title={
+                      <button
+                        type="button"
+                        onClick={() => openPatient(s.patient_id)}
+                        className="hover:underline hover:text-theme-accent text-left"
+                        title="Abrir ficha del paciente"
+                      >
+                        {s.patient}
+                      </button>
+                    }
                     subtitle={s.name}
                     rows={[
                       { label: 'Total', value: `$${s.total}` },