snlavaise/administracionHospital
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Agregar hora a laboratorios: modal importar, save con hora seleccionada

Browse Source
This commit is contained in:
snlavaise
2026-04-17 01:43:22 -03:00
parent e9df92a1fb
commit 711b910344
6 changed files with 497 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/accordion.tsx
+28 -37
View File
@@ -1,64 +1,55 @@
import * as React from "react" import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion" import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "lucide-react" import { ChevronDown } from "lucide-react"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
function Accordion({ const Accordion = AccordionPrimitive.Root
...props
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}
function AccordionItem({ const AccordionItem = React.forwardRef<
className, React.ElementRef<typeof AccordionPrimitive.Item>,
...props React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
}: React.ComponentProps<typeof AccordionPrimitive.Item>) { >(({ className, ...props }, ref) => (
return (
<AccordionPrimitive.Item <AccordionPrimitive.Item
data-slot="accordion-item" ref={ref}
className={cn("border-b last:border-b-0", className)} className={cn("border-b", className)}
{...props} {...props}
/> />
) ))
} AccordionItem.displayName = "AccordionItem"
function AccordionTrigger({ const AccordionTrigger = React.forwardRef<
className, React.ElementRef<typeof AccordionPrimitive.Trigger>,
children, React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
...props >(({ className, children, ...props }, ref) => (
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
return (
<AccordionPrimitive.Header className="flex"> <AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger <AccordionPrimitive.Trigger
data-slot="accordion-trigger" ref={ref}
className={cn( className={cn(
"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
className className
)} )}
{...props} {...props}
> >
{children} {children}
<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" /> <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
</AccordionPrimitive.Trigger> </AccordionPrimitive.Trigger>
</AccordionPrimitive.Header> </AccordionPrimitive.Header>
) ))
} AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
function AccordionContent({ const AccordionContent = React.forwardRef<
className, React.ElementRef<typeof AccordionPrimitive.Content>,
children, React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
...props >(({ className, children, ...props }, ref) => (
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
return (
<AccordionPrimitive.Content <AccordionPrimitive.Content
data-slot="accordion-content" ref={ref}
className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props} {...props}
> >
<div className={cn("pt-0 pb-4", className)}>{children}</div> <div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content> </AccordionPrimitive.Content>
) ))
} AccordionContent.displayName = AccordionPrimitive.Content.displayName
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
src/sections/EditIngreso.tsx
+1 -3
View File
@@ -84,9 +84,7 @@ export function EditIngreso({
<div className="space-y-6 dark:text-white"> <div className="space-y-6 dark:text-white">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Button variant="ghost" size="icon" onClick={onVolver}>
<ArrowLeft className="h-5 w-5" />
</Button>
<div> <div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2"> <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
<User className="h-6 w-6 text-blue-600" /> <User className="h-6 w-6 text-blue-600" />
src/sections/HistoriaClinica.tsx
+93 -129
View File
@@ -1,5 +1,13 @@
import { useState } from 'react'; import { useState } from 'react';
import { PDFDocument } from 'pdf-lib'; import { PDFDocument } from 'pdf-lib';
import { User } from 'lucide-react';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { import {
FlaskConical, FlaskConical,
Microscope, Microscope,
@@ -145,6 +153,8 @@ function wrapText(text: string, font: any, fontSize: number, maxWidth: number):
return lines; return lines;
} }
export function HistoriaClinica({ export function HistoriaClinica({
internacion, internacion,
paciente, paciente,
@@ -203,40 +213,23 @@ export function HistoriaClinica({
return Math.floor(diff / (1000 * 60 * 60 * 24)); return Math.floor(diff / (1000 * 60 * 60 * 24));
}; };
const handleGuardarEdicion = () => {
if (editCamaId && editCamaId !== internacion.camaId && cama) {
onActualizarCama(cama.id, { estado: 'Disponible', pacienteId: undefined, internacionId: undefined });
}
if (editCamaId) {
onActualizarCama(editCamaId, { estado: 'Ocupada', pacienteId: paciente.id, internacionId: internacion.id });
}
onActualizarInternacion(internacion.id, {
fechaIngresoClinica: editFechaIngreso,
motivoConsulta: editMotivoConsulta,
diagnosticoIngreso: editDiagnostico,
enfermedadActual: editEnfermedadActual,
antecedentesEnfermedadActual: editAntecedentes,
medicoIngresante: editMedico,
camaId: editCamaId || undefined,
});
setEditIngresoDialog(false);
};
return ( return (
<div className="space-y-6 dark:text-white"> <div className="space-y-6 dark:text-white">
<div>
<div className="flex items-center gap-4 mb-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2"><ClipboardList className="h-6 w-6" />Historia Clínica</h1> <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
<p className="text-gray-500"> <ClipboardList className="h-6 w-6 text-blue-600" />
Cama: {cama?.numero || 'N/A'} | {paciente.apellido}, {paciente.nombre} | {paciente.fechaNacimiento ? calcularEdad(paciente.fechaNacimiento) + ' años' : ''} | DNI: {paciente.dni} {cama?.numero || 'N/A'} - Historia Clínica
</p> </h1>
<p className="text-gray-500 dark:text-gray-400">Módulo de Historia Clínica de Internación</p>
</div> </div>
</div> <div className="flex items-center gap-2">
<div className="flex items-center gap-2 flex-wrap">
<Button variant="outline" onClick={onVolver}> <Button variant="outline" onClick={onVolver}>
<ArrowLeft className="h-4 w-4 mr-2" /> <ArrowLeft className="h-4 w-4 mr-2" />
Volver Volver
@@ -246,120 +239,79 @@ export function HistoriaClinica({
Editar Ingreso Editar Ingreso
</Button> </Button>
</div> </div>
</div> </div>
<Dialog open={editIngresoDialog} onOpenChange={setEditIngresoDialog}>
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>Editar Ingreso</DialogTitle>
</DialogHeader>
<Card className="bg-muted/50">
<CardContent className="p-4">
<div className="flex flex-wrap gap-2 mb-2">
<Badge variant="outline" className="bg-primary/10 text-primary border-primary/30">
{paciente.apellido}, {paciente.nombre}
</Badge>
<Badge variant="outline" className="bg-primary/10 text-primary border-primary/30">
{paciente.fechaNacimiento ? calcularEdad(paciente.fechaNacimiento) + ' años' : ''}
</Badge>
<Badge variant="outline" className="bg-primary/10 text-primary border-primary/30">
DNI: {paciente.dni}
</Badge>
</div>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary">
HC: {paciente.historiaClinica || 'N/A'}
</Badge>
<Badge variant="secondary">
{paciente.obraSocial || 'Sin obra social'}
</Badge>
<Badge variant="secondary">
{paciente.nacionalidad || 'N/A'}
</Badge>
</div>
</CardContent>
</Card>
<div className="space-y-4">
<div className="grid grid-cols-3 gap-4">
<div>
<Label>Fecha de Ingreso *</Label>
<Input type="date" value={editFechaIngreso} onChange={e => setEditFechaIngreso(e.target.value)} />
</div>
<div>
<Label>Médico Ingresante *</Label>
<Input value={editMedico} onChange={e => setEditMedico(e.target.value)} placeholder="Nombre del médico" />
</div>
<div>
<Label>Cama</Label>
<Select value={editCamaId} onValueChange={setEditCamaId}>
<SelectTrigger><SelectValue placeholder="Seleccionar cama" /></SelectTrigger>
<SelectContent>
{(allCamas || []).filter((c: Cama) => c.estado === 'Disponible' || c.id === cama?.id).map((c: Cama) => (
<SelectItem key={c.id} value={c.id}>{c.numero}</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div>
<Label>Motivo de Consulta</Label>
<textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={editMotivoConsulta} onChange={e => setEditMotivoConsulta(e.target.value)} />
</div>
<div>
<Label>Diagnóstico de Ingreso *</Label>
<textarea className="w-full p-2 border rounded-md text-sm min-h-[60px]" value={editDiagnostico} onChange={e => setEditDiagnostico(e.target.value)} />
</div>
<div>
<Label>Enfermedad Actual</Label>
<textarea className="w-full p-2 border rounded-md text-sm min-h-[80px]" value={editEnfermedadActual} onChange={e => setEditEnfermedadActual(e.target.value)} />
</div>
<div>
<Label>Antecedentes de la Enfermedad Actual</Label>
<textarea className="w-full p-2 border rounded-md text-sm min-h-[80px]" value={editAntecedentes} onChange={e => setEditAntecedentes(e.target.value)} />
</div>
</div>
<div className="flex justify-end gap-2 mt-4">
<Button variant="outline" onClick={() => setEditIngresoDialog(false)}><X className="h-4 w-4 mr-2" />Cancelar</Button>
<Button onClick={handleGuardarEdicion} disabled={!editFechaIngreso || !editDiagnostico || !editMedico}><Save className="h-4 w-4 mr-2" />Guardar</Button>
</div>
</DialogContent>
</Dialog>
<Card> <Card>
<CardContent className="p-0"> <CardContent className="p-4">
<button type="button" className="w-full p-4 flex items-center justify-between hover:bg-gray-50" onClick={() => setDetalleExpandido(!detalleExpandido)}> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 text-sm w-full"> <div><h2 className="font-bold text-lg text-gray-900 flex items-center gap-2">
<User className="h-4 w-4" />
{paciente.apellido}, {paciente.nombre}
</h2>
</div>
<div className="flex items-center gap-2">
<Badge className={internacion.fechaIngresoClinica && calcularDiasInternado(internacion.fechaIngresoClinica) > 7 ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800'}>
{internacion.fechaIngresoClinica ? calcularDiasInternado(internacion.fechaIngresoClinica) : 0} días internado
</Badge>
</div>
</div>
<div className="space-y-2">
<div className="flex flex-wrap gap-2">
<Badge variant="outline" className="text-sm px-3 py-1 bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
{paciente.fechaNacimiento ? calcularEdad(paciente.fechaNacimiento) + ' años' : ''}
</Badge>
<Badge variant="outline" className="text-sm px-3 py-1 bg-blue-50 text-blue-700 border-blue-200">
DNI: {paciente.dni}
</Badge>
</div>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="text-sm px-3 py-1">
HC: {paciente.historiaClinica || 'No posee'}
</Badge>
<Badge variant="secondary" className="text-sm px-3 py-1">
OS: {paciente.obraSocial || 'No posee'}
</Badge>
<Badge variant="secondary" className="text-sm px-3 py-1">
Nacionalidad: {paciente.nacionalidad || 'N/A'}
</Badge>
</div>
<div className="border-t p-4 space-y-4">
<div> <div>
<p className="text-gray-500">Antecedentes</p> <p className="text-gray-500 text-sm">Antecedentes</p>
<p className="font-medium truncate">{paciente.antecedentes || 'No constan'}</p> <p className="font-medium">{paciente.antecedentes || 'No refiere'}</p>
</div>
<div>
<p className="text-gray-500 text-sm">MH</p>
<p className="font-medium">{paciente.medicacionHabitual || 'No refiere'}</p>
</div> </div>
<div> <div>
<p className="text-gray-500">Fecha de Ingreso</p> <p className="text-gray-500">Fecha de Ingreso</p>
<p className="font-medium">{internacion.fechaIngresoClinica ? formatDateDDMMYYYY(internacion.fechaIngresoClinica) : 'N/A'}</p> <p className="font-medium">{internacion.fechaIngresoClinica ? formatDateDDMMYYYY(internacion.fechaIngresoClinica) : 'N/A'}</p>
</div> </div>
<div> <div>
<p className="text-gray-500">Diagnóstico de Ingreso</p> <p className="text-gray-500">Diagnóstico de Ingreso</p>
<p className="font-medium truncate">{internacion.diagnosticoIngreso}</p> <p className="font-medium">{internacion.diagnosticoIngreso}</p>
</div>
<div>
<p className="text-gray-500">Días de Internación</p>
<Badge className={internacion.fechaIngresoClinica && calcularDiasInternado(internacion.fechaIngresoClinica) > 7 ? 'bg-red-100 text-red-800' : 'bg-blue-100 text-blue-800'}>
{internacion.fechaIngresoClinica ? calcularDiasInternado(internacion.fechaIngresoClinica) : 0} días
</Badge>
</div> </div>
</div> <Accordion type="single" collapsible defaultValue="item-1">
{detalleExpandido ? <ChevronUp className="h-5 w-5 text-gray-400" /> : <ChevronDown className="h-5 w-5 text-gray-400" />} <AccordionItem value="item-1">
</button> <AccordionTrigger>Detalle Episodio Actual</AccordionTrigger>
{detalleExpandido && ( <AccordionContent className="p4">
<div className="border-t p-4 space-y-4"> <div className="border-t p-4 space-y-4">
<div> <div>
<p className="text-gray-500 text-sm">Motivo de Consulta</p> <p className="text-gray-500 text-sm">Motivo de Consulta</p>
<p className="font-medium">{internacion.motivoConsulta || 'Sin motivo registrado'}</p> <p className="font-medium">{internacion.motivoConsulta || 'Sin motivo registrado'}</p>
@@ -489,10 +441,22 @@ export function HistoriaClinica({
Descargar Formulario de Ingreso Descargar Formulario de Ingreso
</Button> </Button>
</div> </div>
)} </AccordionContent>
</AccordionItem>
</Accordion>
</div>
</div>
</CardContent> </CardContent>
</Card> </Card>
<Tabs value={tabActivo} onValueChange={setTabActivo}> <Tabs value={tabActivo} onValueChange={setTabActivo}>
<TabsList className="flex w-full overflow-x-auto gap-1 pb-2"> <TabsList className="flex w-full overflow-x-auto gap-1 pb-2">
<TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm"> <TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
@@ -665,7 +629,7 @@ function SeccionLaboratorios({ lab, patientId, add, update, del, addAcidoBase }:
if (tp) res.push({ parametro: 'Tiempo de Protrombina', valor: tp, unidad: 'seg', estado: calcularEstadoLaboratorio('Tiempo de Protrombina', tp) }); if (tp) res.push({ parametro: 'Tiempo de Protrombina', valor: tp, unidad: 'seg', estado: calcularEstadoLaboratorio('Tiempo de Protrombina', tp) });
if (kptt) res.push({ parametro: 'KPTT', valor: kptt, unidad: 'seg', estado: calcularEstadoLaboratorio('KPTT', kptt) }); if (kptt) res.push({ parametro: 'KPTT', valor: kptt, unidad: 'seg', estado: calcularEstadoLaboratorio('KPTT', kptt) });
if (rin) res.push({ parametro: 'INR', valor: rin, unidad: '', estado: calcularEstadoLaboratorio('INR', rin) }); if (rin) res.push({ parametro: 'INR', valor: rin, unidad: '', estado: calcularEstadoLaboratorio('INR', rin) });
return res; return res;
}; };
const reset = () => { const reset = () => {
@@ -726,7 +690,7 @@ return res;
const lineas = texto.split('\n'); const lineas = texto.split('\n');
for (const linea of lineas) { for (const linea of lineas) {
const lineaLower = linea.toLowerCase().trim(); const lineaLower = linea.toLowerCase().trim();
for (const [clave, info] of Object.entries(mapeoParametros)) { for (const [clave, info] of Object.entries(mapeoParametros)) {
@@ -1146,7 +1110,7 @@ for (const linea of lineas) {
<Button variant="outline" onClick={() => setImportDialog(false)}>Cancelar</Button> <Button variant="outline" onClick={() => setImportDialog(false)}>Cancelar</Button>
<Button onClick={handleImportarLaboratorio} disabled={importResultados.length === 0 && !importObservaciones && !importAcidoBase}> <Button onClick={handleImportarLaboratorio} disabled={importResultados.length === 0 && !importObservaciones && !importAcidoBase}>
<Save className="h-4 w-4 mr-2" /> <Save className="h-4 w-4 mr-2" />
{(importAcidoBase ? 'Guardar Gasometría' : 'Guardar Laboratorio')} {(importAcidoBase ? 'Guardar' : 'Guardar Laboratorio')}
</Button> </Button>
</div> </div>
</DialogContent> </DialogContent>
@@ -1568,7 +1532,7 @@ function SeccionAcidosBase({ ab, patientId, add, update, del }: {
<div><p className="font-medium">{a.fecha} {a.hora}</p></div> <div><p className="font-medium">{a.fecha} {a.hora}</p></div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Badge variant="outline" className="text-xs">{a.fio2 && a.po2 &&<span className="mr-1">PaFiO2: {Math.round(a.po2 / a.fio2 * 100) / 100}</span>}</Badge> <Badge variant="outline" className="text-xs">{a.fio2 && a.po2 && <span className="mr-1">PaFiO2: {Math.round(a.po2 / a.fio2 * 100) / 100}</span>}</Badge>
<Badge variant="outline" className="text-xs">{a.fio2 && <span className="mr-1">FiO₂:{a.fio2}</span>}</Badge> <Badge variant="outline" className="text-xs">{a.fio2 && <span className="mr-1">FiO₂:{a.fio2}</span>}</Badge>
<Badge className={getColorPh(a.ph)}>pH: {a.ph}</Badge> <Badge className={getColorPh(a.ph)}>pH: {a.ph}</Badge>
<Button size="sm" variant="ghost" className="text-blue-600" onClick={() => loadEdit(a)}><Edit /></Button> <Button size="sm" variant="ghost" className="text-blue-600" onClick={() => loadEdit(a)}><Edit /></Button>
@@ -1626,7 +1590,7 @@ function SeccionCultivos({ cults, patient, add, update, del }: {
setSelected(null); setSelected(null);
}; };
const resetRes = () => { const resetRes = () => {
setFechaResultado(new Date().toISOString().split('T')[0]); setFechaResultado(new Date().toISOString().split('T')[0]);
setEstadoResultado('Positivo'); setEstadoResultado('Positivo');
setGermen(''); setGermen('');
src/sections/Internaciones.tsx
+3 -4
View File
@@ -257,7 +257,7 @@ export function Internaciones({
placeholder="Nombre del médico ingresante" placeholder="Nombre del médico ingresante"
/> />
</div> </div>
<Button variant="outline" <Button variant="outline"
className="w-full" className="w-full"
onClick={handleIniciarInternacion} onClick={handleIniciarInternacion}
disabled={!pacienteSeleccionado || !camaSeleccionada || !motivoConsulta || !enfermedadActual || !medicoIngresante} disabled={!pacienteSeleccionado || !camaSeleccionada || !motivoConsulta || !enfermedadActual || !medicoIngresante}
@@ -307,11 +307,10 @@ export function Internaciones({
return ( return (
<Card key={internacion.id} className="hover:shadow-md transition-shadow"> <Card key={internacion.id} className="hover:shadow-md transition-shadow">
<CardContent className="p-4 dark:bg-gray-800"> <CardContent className="p-4 dark:bg-gray-800">
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4"> <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className={`h-12 w-12 rounded-full flex items-center justify-center flex-shrink-0 ${ <div className={`h-12 w-12 rounded-full flex items-center justify-center flex-shrink-0 ${internacion.activa ? 'bg-purple-100' : 'bg-gray-100'
internacion.activa ? 'bg-purple-100' : 'bg-gray-100'
}`}> }`}>
{internacion.activa ? ( {internacion.activa ? (
<ClipboardList className="h-6 w-6 text-purple-600" /> <ClipboardList className="h-6 w-6 text-purple-600" />
src/sections/MapaCamas.tsx
+2 -2
View File
@@ -173,7 +173,7 @@ export function MapaCamas({
return !internacionActiva; return !internacionActiva;
}); });
return ( return (
<div className="space-y-6 dark:text-white"> <div className="space-y-6 dark:text-white">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div> <div>
@@ -398,7 +398,7 @@ return (
placeholder="Nombre del médico..." placeholder="Nombre del médico..."
/> />
</div> </div>
<Button variant="outline" <Button variant="outline"
className="w-full" className="w-full"
onClick={handleOcuparCama} onClick={handleOcuparCama}
disabled={!pacienteSeleccionado || !diagnostico || !enfermedadActual || !medico} disabled={!pacienteSeleccionado || !diagnostico || !enfermedadActual || !medico}
src/sections/Pacientes.tsx
+1 -1
View File
@@ -330,7 +330,7 @@ export function Pacientes({
<div className="grid grid-cols-1 gap-4"> <div className="grid grid-cols-1 gap-4">
{pacientesFiltrados.map((paciente) => ( {pacientesFiltrados.map((paciente) => (
<Card key={paciente.id} className="hover:shadow-md transition-shadow"> <Card key={paciente.id} className="hover:shadow-md transition-shadow">
<CardContent className="p-4 dark:bg-gray-800"> <CardContent className="p-4 dark:bg-gray-800">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0"> <div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">