527 lines
20 KiB
TypeScript
527 lines
20 KiB
TypeScript
'use client';
|
|
|
|
import { Badge } from '@repo/shadcn/badge';
|
|
import { Button } from '@repo/shadcn/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@repo/shadcn/components/ui/card';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@repo/shadcn/components/ui/dialog';
|
|
import { ScrollArea } from '@repo/shadcn/components/ui/scroll-area';
|
|
import { Separator } from '@repo/shadcn/components/ui/separator';
|
|
import {
|
|
ExternalLink,
|
|
Factory,
|
|
MapPin,
|
|
Package,
|
|
Wrench,
|
|
X,
|
|
} from 'lucide-react';
|
|
import React, { useState } from 'react';
|
|
import { TrainingSchema } from '../schemas/training';
|
|
import {
|
|
useMunicipalityQuery,
|
|
useParishQuery,
|
|
useStateQuery,
|
|
} from '@/feactures/location/hooks/use-query-location';
|
|
|
|
interface TrainingViewModalProps {
|
|
data: TrainingSchema | null;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function TrainingViewModal({
|
|
data,
|
|
isOpen,
|
|
onClose,
|
|
}: TrainingViewModalProps) {
|
|
const [selectedImage, setSelectedImage] = useState<string | null>(null);
|
|
|
|
const { data: statesData } = useStateQuery();
|
|
const { data: municipalitiesData } = useMunicipalityQuery(data?.state || 0);
|
|
const { data: parishesData } = useParishQuery(data?.municipality || 0);
|
|
|
|
if (!data) return null;
|
|
|
|
const stateName = statesData?.data?.find((s: any) => s.id === data.state)?.name;
|
|
const municipalityName = municipalitiesData?.data?.find(
|
|
(m: any) => m.id === data.municipality,
|
|
)?.name;
|
|
const parishName = parishesData?.data?.find(
|
|
(p: any) => p.id === data.parish,
|
|
)?.name;
|
|
|
|
const DetailItem = ({ label, value }: { label: string; value: any }) => (
|
|
<div className="space-y-1">
|
|
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
|
{label}
|
|
</p>
|
|
<p className="text-sm font-semibold text-foreground break-words">
|
|
{value !== null && value !== undefined && value !== '' ? value : 'N/A'}
|
|
</p>
|
|
</div>
|
|
);
|
|
|
|
const Section = ({
|
|
title,
|
|
icon: Icon,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
icon?: React.ElementType;
|
|
children: React.ReactNode;
|
|
}) => (
|
|
<Card className="overflow-hidden border-l-4 border-l-primary/20">
|
|
<CardHeader className="py-3 bg-muted/30">
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
|
{Icon && <Icon className="h-5 w-5 text-primary" />}
|
|
{title}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-6 pt-4">
|
|
{children}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
|
|
const BooleanBadge = ({ value }: { value?: boolean }) => (
|
|
<Badge variant={value ? 'default' : 'secondary'}>
|
|
{value ? 'Sí' : 'No'}
|
|
</Badge>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="sm:max-w-[1000px] max-h-[90vh] p-0 flex flex-col">
|
|
<DialogHeader className="px-6 py-4 border-b">
|
|
<DialogTitle className="text-2xl font-bold flex items-center gap-2">
|
|
<Factory className="h-6 w-6" />
|
|
{data.ospName}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{data.ospType} • {data.ospRif} •{' '}
|
|
<span
|
|
className={
|
|
data.currentStatus === 'ACTIVA'
|
|
? 'text-green-600 font-medium'
|
|
: 'text-red-600'
|
|
}
|
|
>
|
|
{data.currentStatus}
|
|
</span>
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<ScrollArea className="flex-1 px-6 py-6">
|
|
<div className="space-y-8">
|
|
{/* 1. Datos de la Visita */}
|
|
<Section title="Datos de la Visita">
|
|
<DetailItem
|
|
label="Coordinador"
|
|
value={`${data.firstname} ${data.lastname}`}
|
|
/>
|
|
<DetailItem label="Teléfono Coord." value={data.coorPhone} />
|
|
<DetailItem
|
|
label="Fecha Visita"
|
|
value={
|
|
data.visitDate
|
|
? new Date(data.visitDate).toLocaleString()
|
|
: 'N/A'
|
|
}
|
|
/>
|
|
<DetailItem label="Estado" value={stateName} />
|
|
<DetailItem label="Municipio" value={municipalityName} />
|
|
<DetailItem label="Parroquia" value={parishName} />
|
|
</Section>
|
|
|
|
{/* 2. Sectores y Actividad */}
|
|
<Section title="Sectores Económicos">
|
|
<DetailItem label="Sector Económico" value={data.ecoSector} />
|
|
<DetailItem
|
|
label="Sector Productivo"
|
|
value={data.productiveSector}
|
|
/>
|
|
<DetailItem
|
|
label="Actividad Central"
|
|
value={data.centralProductiveActivity}
|
|
/>
|
|
<DetailItem
|
|
label="Actividad Principal"
|
|
value={data.mainProductiveActivity}
|
|
/>
|
|
<div className="col-span-full">
|
|
<DetailItem
|
|
label="Actividad Específica"
|
|
value={data.productiveActivity}
|
|
/>
|
|
</div>
|
|
</Section>
|
|
|
|
{/* 3. Infraestructura y Ubicación */}
|
|
<Section title="Infraestructura y Ubicación" icon={MapPin}>
|
|
<DetailItem
|
|
label="Año Constitución"
|
|
value={data.companyConstitutionYear}
|
|
/>
|
|
<DetailItem
|
|
label="Infraestructura (m²)"
|
|
value={data.infrastructureMt2}
|
|
/>
|
|
<DetailItem
|
|
label="Tipo Estructura"
|
|
value={data.structureType}
|
|
/>
|
|
|
|
<DetailItem
|
|
label="Posee Transporte"
|
|
value={<BooleanBadge value={data.hasTransport} />}
|
|
/>
|
|
<DetailItem
|
|
label="Espacio Abierto"
|
|
value={<BooleanBadge value={data.isOpenSpace} />}
|
|
/>
|
|
|
|
<div className="col-span-full space-y-4 mt-2">
|
|
<div className="space-y-1">
|
|
<p className="text-xs font-medium text-muted-foreground uppercase">
|
|
Dirección
|
|
</p>
|
|
<p className="text-sm font-medium">{data.ospAddress}</p>
|
|
</div>
|
|
{data.ospGoogleMapsLink && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
asChild
|
|
className="gap-2"
|
|
>
|
|
<a
|
|
href={data.ospGoogleMapsLink}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<MapPin className="h-4 w-4" />
|
|
Ver en Google Maps
|
|
<ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</Section>
|
|
|
|
{/* 4. LISTAS DETALLADAS (Lo nuevo) */}
|
|
|
|
{/* PRODUCTOS */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
|
<Package className="h-5 w-5" />
|
|
Productos y Mano de Obra
|
|
<Badge variant="secondary" className="ml-2">
|
|
{data.productList?.length || 0}
|
|
</Badge>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-4">
|
|
{data.productList?.map((prod: any, idx: number) => (
|
|
<div
|
|
key={idx}
|
|
className="bg-muted/40 p-4 rounded-lg border text-sm"
|
|
>
|
|
<div className="flex justify-between items-start mb-2">
|
|
<h4 className="font-bold text-base text-primary">
|
|
{prod.productName}
|
|
</h4>
|
|
<Badge variant="outline">
|
|
Mano de obra:{' '}
|
|
{Number(prod.menCount || 0) +
|
|
Number(prod.womenCount || 0)}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-muted-foreground mb-3">
|
|
{prod.description}
|
|
</p>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-3">
|
|
<DetailItem label="Diario" value={prod.dailyCount} />
|
|
<DetailItem label="Semanal" value={prod.weeklyCount} />
|
|
<DetailItem label="Mensual" value={prod.monthlyCount} />
|
|
<DetailItem
|
|
label="Hombres / Mujeres"
|
|
value={`${prod.menCount || 0} / ${prod.womenCount || 0}`}
|
|
/>
|
|
</div>
|
|
|
|
{/* Detalles de distribución si existen */}
|
|
{(prod.internalQuantity || prod.externalQuantity) && (
|
|
<>
|
|
<Separator className="my-2" />
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{prod.internalQuantity && (
|
|
<div>
|
|
<span className="text-xs font-bold text-muted-foreground block mb-1">
|
|
DISTRIBUCIÓN INTERNA
|
|
</span>
|
|
<p>Cant: {prod.internalQuantity}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{prod.internalDescription}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{prod.externalQuantity && (
|
|
<div>
|
|
<span className="text-xs font-bold text-muted-foreground block mb-1">
|
|
EXPORTACIÓN ({prod.externalCountry})
|
|
</span>
|
|
<p>Cant: {prod.externalQuantity}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{prod.externalDescription}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
))}
|
|
{(!data.productList || data.productList.length === 0) && (
|
|
<p className="text-sm text-muted-foreground italic">
|
|
No hay productos registrados.
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* EQUIPAMIENTO Y PRODUCCIÓN */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
|
<Wrench className="h-5 w-5" />
|
|
Equipamiento
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{data.equipmentList?.map((eq: any, idx: number) => (
|
|
<div
|
|
key={idx}
|
|
className="flex justify-between items-center p-2 rounded bg-muted/40 border"
|
|
>
|
|
<div>
|
|
<p className="font-medium">{eq.machine}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{eq.specifications}
|
|
</p>
|
|
</div>
|
|
<Badge
|
|
variant="outline"
|
|
className="text-sm font-bold h-8 w-8 flex items-center justify-center rounded-full"
|
|
>
|
|
{eq.quantity}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
{(!data.equipmentList ||
|
|
data.equipmentList.length === 0) && (
|
|
<p className="text-sm text-muted-foreground italic">
|
|
No hay equipamiento registrado.
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
|
<Factory className="h-5 w-5" />
|
|
Materia Prima
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{data.productionList?.map((mat: any, idx: number) => (
|
|
<div
|
|
key={idx}
|
|
className="flex justify-between items-center p-2 rounded bg-muted/40 border"
|
|
>
|
|
<div>
|
|
<p className="font-medium">{mat.rawMaterial}</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
{mat.supplyType}
|
|
</p>
|
|
</div>
|
|
<Badge variant="secondary">Cant: {mat.quantity}</Badge>
|
|
</div>
|
|
))}
|
|
{(!data.productionList ||
|
|
data.productionList.length === 0) && (
|
|
<p className="text-sm text-muted-foreground italic">
|
|
No hay materia prima registrada.
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 5. Comuna y Responsable */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<Section title="Datos de la Comuna">
|
|
<DetailItem label="Comuna" value={data.communeName} />
|
|
<DetailItem
|
|
label="Código SITUR"
|
|
value={data.siturCodeCommune}
|
|
/>
|
|
<DetailItem
|
|
label="Vocero"
|
|
value={data.communeSpokespersonName}
|
|
/>
|
|
<DetailItem
|
|
label="Teléfono"
|
|
value={data.communeSpokespersonPhone}
|
|
/>
|
|
<div className="col-span-full border-t pt-4 mt-2">
|
|
<DetailItem
|
|
label="Consejo Comunal"
|
|
value={data.communalCouncil}
|
|
/>
|
|
<DetailItem
|
|
label="Vocero C.C."
|
|
value={data.communalCouncilSpokespersonName}
|
|
/>
|
|
</div>
|
|
</Section>
|
|
|
|
<Section title="Responsable OSP">
|
|
<DetailItem
|
|
label="Nombre"
|
|
value={data.ospResponsibleFullname}
|
|
/>
|
|
<DetailItem
|
|
label="Cédula"
|
|
value={data.ospResponsibleCedula}
|
|
/>
|
|
<DetailItem
|
|
label="Teléfono"
|
|
value={data.ospResponsiblePhone}
|
|
/>
|
|
<DetailItem label="Email" value={data.ospResponsibleEmail} />
|
|
<DetailItem
|
|
label="Carga Familiar"
|
|
value={data.familyBurden}
|
|
/>
|
|
<DetailItem label="Hijos" value={data.numberOfChildren} />
|
|
</Section>
|
|
</div>
|
|
|
|
{/* 6. Observaciones */}
|
|
{(data.generalObservations || data.paralysisReason) && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Observaciones</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{data.generalObservations && (
|
|
<div>
|
|
<p className="text-xs font-bold text-muted-foreground uppercase mb-1">
|
|
Generales
|
|
</p>
|
|
<p className="text-sm">{data.generalObservations}</p>
|
|
</div>
|
|
)}
|
|
{data.paralysisReason && (
|
|
<div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-md border border-red-200 dark:border-red-900">
|
|
<p className="text-xs font-bold text-red-600 dark:text-red-400 uppercase mb-1">
|
|
Motivo de Paralización
|
|
</p>
|
|
<p className="text-sm">{data.paralysisReason}</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* 7. Fotos */}
|
|
<Section title="Registro Fotográfico">
|
|
{[data.photo1, data.photo2, data.photo3].some(Boolean) ? (
|
|
<div className="col-span-full grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
{[data.photo1, data.photo2, data.photo3].map(
|
|
(photo, idx) =>
|
|
photo && (
|
|
<div
|
|
key={idx}
|
|
className="relative aspect-video rounded-lg overflow-hidden cursor-zoom-in border hover:shadow-lg transition-all"
|
|
onClick={() => setSelectedImage(photo)}
|
|
>
|
|
<img
|
|
src={`${process.env.NEXT_PUBLIC_API_URL}${photo}`}
|
|
alt={`Evidencia ${idx + 1}`}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
),
|
|
)}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground col-span-full">
|
|
No hay imágenes cargadas.
|
|
</p>
|
|
)}
|
|
</Section>
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
<DialogFooter className="px-6 py-4 border-t bg-muted/20">
|
|
<Button
|
|
onClick={onClose}
|
|
variant="outline"
|
|
className="w-full sm:w-auto"
|
|
>
|
|
Cerrar
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Lightbox para imágenes */}
|
|
<Dialog
|
|
open={!!selectedImage}
|
|
onOpenChange={() => setSelectedImage(null)}
|
|
>
|
|
<DialogContent className="max-w-[95vw] max-h-[95vh] p-0 overflow-hidden bg-black/95 border-none">
|
|
<DialogHeader className="sr-only">
|
|
<DialogTitle>Imagen Ampliada</DialogTitle>
|
|
</DialogHeader>
|
|
<DialogDescription></DialogDescription>
|
|
<div className="relative w-full h-full flex items-center justify-center p-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute top-4 right-4 text-white hover:bg-white/20 rounded-full z-50"
|
|
onClick={() => setSelectedImage(null)}
|
|
>
|
|
<X className="h-6 w-6" />
|
|
</Button>
|
|
{selectedImage && (
|
|
<img
|
|
src={`${process.env.NEXT_PUBLIC_API_URL}${selectedImage}`}
|
|
alt="Vista ampliada"
|
|
className="max-w-full max-h-[90vh] object-contain rounded-md"
|
|
/>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|