Actualizar control de glucemias con eje Y secundario para correcciones e integracion de tienda

src/sections/GestionUsuarios.tsx

@@ -1,17 +1,17 @@
 import { useState, useEffect } from 'react';
 import { useHospitalStore } from '@/hooks/useHospitalStore';
 import type { Usuario, RolUsuario, Area } from '@/types';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { Badge } from '@/components/ui/badge';
-import { Plus, Pencil, Trash2, UserCog, Mail, Shield } from 'lucide-react';
+import { Plus, Pencil, Trash2 } from 'lucide-react';
 
-const API_BASE = 'http://localhost:4001/api';
+const API_BASE = import.meta.env.VITE_API_URL || '/api';
 
 export function GestionUsuarios() {
   const { logout } = useHospitalStore();
@@ -92,23 +92,36 @@ export function GestionUsuarios() {
   };
 
   const handleSubmit = async () => {
+    if (!form.apellido.trim() || !form.nombre.trim() || !form.dni.trim()) {
+      alert('Por favor ingrese Apellido, Nombre y DNI.');
+      return;
+    }
+
     try {
+      let res: Response;
       if (editUsuario) {
-        await fetch(`${API_BASE}/usuarios/${editUsuario.id}`, {
+        res = await fetch(`${API_BASE}/usuarios/${editUsuario.id}`, {
           method: 'PUT',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(form),
         });
       } else {
-        await fetch(`${API_BASE}/usuarios`, {
+        res = await fetch(`${API_BASE}/usuarios`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(form),
         });
       }
+
+      if (!res.ok) {
+        const errData = await res.json().catch(() => ({ error: 'Error al guardar usuario' }));
+        alert(errData.error || 'Error al guardar usuario');
+        return;
+      }
+
       setDialogOpen(false);
       resetForm();
-      fetchUsuarios();
+      await fetchUsuarios();
     } catch (err) {
       console.error(err);
       alert('Error al guardar usuario');
@@ -118,10 +131,16 @@ export function GestionUsuarios() {
   const handleDelete = async (id: string) => {
     if (!confirm('¿Está seguro de eliminar este usuario?')) return;
     try {
-      await fetch(`${API_BASE}/usuarios/${id}`, { method: 'DELETE' });
-      fetchUsuarios();
+      const res = await fetch(`${API_BASE}/usuarios/${id}`, { method: 'DELETE' });
+      if (!res.ok) {
+        const errData = await res.json().catch(() => ({ error: 'Error al eliminar usuario' }));
+        alert(errData.error || 'Error al eliminar usuario');
+        return;
+      }
+      await fetchUsuarios();
     } catch (err) {
       console.error(err);
+      alert('Error al eliminar usuario');
     }
   };
 
@@ -144,19 +163,20 @@ export function GestionUsuarios() {
 
   return (
     <div className="space-y-4">
-      <div className="flex justify-between items-center">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
         <div>
           <h1 className="text-2xl font-bold dark:text-white">Gestión de Usuarios</h1>
           <p className="text-gray-500 dark:text-gray-400">Administrar usuarios del sistema</p>
         </div>
-        <Button onClick={() => { resetForm(); setDialogOpen(true); }}>
+        <Button className="w-full sm:w-auto" onClick={() => { resetForm(); setDialogOpen(true); }}>
           <Plus className="h-4 w-4 mr-2" />
           Nuevo Usuario
         </Button>
       </div>
 
-      <Card>
-        <CardContent className="p-0">
+      {/* Desktop Table View */}
+      <Card className="hidden md:block">
+        <CardContent className="p-0 overflow-x-auto">
           <Table>
             <TableHeader>
               <TableRow>
@@ -180,7 +200,7 @@ export function GestionUsuarios() {
                     </Badge>
                   </TableCell>
                   <TableCell>{getAreaName(usu.areaId)}</TableCell>
-                  <TableCell>{usu.email}</TableCell>
+                  <TableCell>{usu.email || '-'}</TableCell>
                   <TableCell>{usu.matriculaProfesional || '-'}</TableCell>
                   <TableCell>
                     <div className="flex gap-2">
@@ -199,13 +219,60 @@ export function GestionUsuarios() {
         </CardContent>
       </Card>
 
+      {/* Mobile Cards View */}
+      <div className="grid grid-cols-1 gap-3 md:hidden">
+        {usuarios.map((usu) => (
+          <Card key={usu.id} className="p-4 space-y-3">
+            <div className="flex items-start justify-between gap-2">
+              <div>
+                <h3 className="font-semibold text-lg text-gray-900 dark:text-gray-100">
+                  {usu.apellido}, {usu.nombre}
+                </h3>
+                <p className="text-sm text-gray-500 dark:text-gray-400">DNI: {usu.dni}</p>
+              </div>
+              <Badge variant={usu.rol === 'admin' ? 'default' : 'secondary'}>
+                {getRolLabel(usu.rol)}
+              </Badge>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2 text-sm pt-2 border-t border-gray-100 dark:border-gray-800">
+              <div>
+                <span className="text-xs text-gray-400 block">Área</span>
+                <span className="font-medium text-gray-700 dark:text-gray-300">{getAreaName(usu.areaId)}</span>
+              </div>
+              <div>
+                <span className="text-xs text-gray-400 block">Matrícula</span>
+                <span className="font-medium text-gray-700 dark:text-gray-300">{usu.matriculaProfesional || '-'}</span>
+              </div>
+              {usu.email && (
+                <div className="col-span-2">
+                  <span className="text-xs text-gray-400 block">Email</span>
+                  <span className="font-medium text-gray-700 dark:text-gray-300 truncate block">{usu.email}</span>
+                </div>
+              )}
+            </div>
+
+            <div className="flex justify-end gap-2 pt-2 border-t border-gray-100 dark:border-gray-800">
+              <Button variant="outline" size="sm" onClick={() => openEdit(usu)}>
+                <Pencil className="h-4 w-4 mr-1" />
+                Editar
+              </Button>
+              <Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 dark:text-red-400" onClick={() => handleDelete(usu.id)}>
+                <Trash2 className="h-4 w-4 mr-1" />
+                Eliminar
+              </Button>
+            </div>
+          </Card>
+        ))}
+      </div>
+
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
+        <DialogContent className="max-w-lg w-[95vw] sm:w-full max-h-[90vh] overflow-y-auto p-4 sm:p-6">
           <DialogHeader>
             <DialogTitle>{editUsuario ? 'Editar Usuario' : 'Nuevo Usuario'}</DialogTitle>
           </DialogHeader>
-          <div className="space-y-4">
-            <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-4 pt-2">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label>Apellido</Label>
                 <Input value={form.apellido} onChange={(e) => setForm({ ...form, apellido: e.target.value })} />
@@ -216,7 +283,7 @@ export function GestionUsuarios() {
               </div>
             </div>
             
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label>DNI</Label>
                 <Input value={form.dni} onChange={(e) => setForm({ ...form, dni: e.target.value })} disabled={!!editUsuario} />
@@ -232,7 +299,7 @@ export function GestionUsuarios() {
               <Input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
             </div>
 
-            <div className="grid grid-cols-2 gap-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label>Rol</Label>
                 <Select value={form.rol} onValueChange={(v) => setForm({ ...form, rol: v as RolUsuario })}>
@@ -269,14 +336,19 @@ export function GestionUsuarios() {
             )}
 
             <div className="space-y-2">
-              <Label>{editUsuario ? 'Nueva Contraseña (opcional)' : 'Contraseña'}</Label>
-              <Input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} />
+              <Label>{editUsuario ? 'Nueva Contraseña (opcional)' : 'Contraseña (opcional)'}</Label>
+              <Input
+                type="password"
+                placeholder={editUsuario ? 'Dejar en blanco para no modificar' : 'Por defecto se usará el DNI'}
+                value={form.password}
+                onChange={(e) => setForm({ ...form, password: e.target.value })}
+              />
             </div>
           </div>
           
-          <div className="flex justify-end gap-2 mt-4">
-            <Button variant="outline" onClick={() => setDialogOpen(false)}>Cancelar</Button>
-            <Button onClick={handleSubmit}>
+          <div className="flex flex-col-reverse sm:flex-row justify-end gap-2 mt-4">
+            <Button variant="outline" className="w-full sm:w-auto" onClick={() => setDialogOpen(false)}>Cancelar</Button>
+            <Button className="w-full sm:w-auto" onClick={handleSubmit}>
               {editUsuario ? 'Actualizar' : 'Crear'}
             </Button>
           </div>