nuevas correciones al formulario y esquema base de datos para osp

This commit is contained in:
2026-02-25 12:17:33 -04:00
parent a88cf94adb
commit f910aea3cc
15 changed files with 4889 additions and 731 deletions

View File

@@ -1,7 +1,9 @@
'use client';
import { COUNTRY_OPTIONS } from '@/constants/countries';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@repo/shadcn/button';
import { Separator } from '@repo/shadcn/components/ui/separator';
import {
Form,
FormControl,
@@ -18,6 +20,7 @@ import {
SelectTrigger,
SelectValue,
} from '@repo/shadcn/select';
import { Switch } from '@repo/shadcn/switch';
import { Textarea } from '@repo/shadcn/textarea';
import { useForm, useWatch } from 'react-hook-form';
import {
@@ -98,8 +101,7 @@ export function CreateTrainingForm({
const form = useForm<TrainingSchema>({
resolver: zodResolver(trainingSchema),
defaultValues: {
firstname: defaultValues?.firstname || '',
lastname: defaultValues?.lastname || '',
coorFullName: defaultValues?.coorFullName || '',
coorState: defaultValues?.coorState || undefined,
coorMunicipality: defaultValues?.coorMunicipality || undefined,
coorParish: defaultValues?.coorParish || undefined,
@@ -157,6 +159,17 @@ export function CreateTrainingForm({
state: defaultValues?.state || undefined,
municipality: defaultValues?.municipality || undefined,
parish: defaultValues?.parish || undefined,
internalDistributionZone: defaultValues?.internalDistributionZone || '',
isExporting: defaultValues?.isExporting || false,
externalCountry: defaultValues?.externalCountry || '',
externalCity: defaultValues?.externalCity || '',
externalDescription: defaultValues?.externalDescription || '',
externalQuantity: defaultValues?.externalQuantity || '',
externalUnit: defaultValues?.externalUnit || '',
womenCount: defaultValues?.womenCount || 0,
menCount: defaultValues?.menCount || 0,
},
mode: 'onChange',
});
@@ -213,23 +226,6 @@ export function CreateTrainingForm({
mainProductiveActivity,
]);
const { data: dataCoorState } = useStateQuery();
const { data: dataCoorMunicipality } = useMunicipalityQuery(coorState);
const { data: dataCoorParish } = useParishQuery(coorMunicipality);
const coorStateOptions = dataCoorState?.data || [
{ id: 0, name: 'Sin estados' },
];
const coorMunicipalityOptions = dataCoorMunicipality?.data?.length
? dataCoorMunicipality.data
: [{ id: 0, stateId: 0, name: 'Sin Municipios' }];
const coorParishOptions =
Array.isArray(dataCoorParish?.data) && dataCoorParish?.data?.length
? dataCoorParish.data
: [{ id: 0, stateId: 0, name: 'Sin Parroquias' }];
const stateOptions = dataState?.data || [{ id: 0, name: 'Sin estados' }];
const municipalityOptions = dataMunicipality?.data?.length
@@ -313,6 +309,7 @@ export function CreateTrainingForm({
selectedFiles.forEach((file) => {
data.append('files', file);
});
const mutation = defaultValues?.id ? updateTraining : createTraining;
mutation(data as any, {
@@ -359,26 +356,14 @@ export function CreateTrainingForm({
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="firstname"
name="coorFullName"
render={({ field }) => (
<FormItem>
<FormLabel>Nombre del Coordinador Estadal</FormLabel>
<FormLabel>
Nombre y Apellido del Coordinador Estadal
</FormLabel>
<FormControl>
<Input {...field} placeholder="Ej. Juan" />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="lastname"
render={({ field }) => (
<FormItem>
<FormLabel>Apellido del Coordinador Estadal</FormLabel>
<FormControl>
<Input {...field} placeholder="Ej. Pérez" />
<Input {...field} placeholder="Ej. Juan Pérez" />
</FormControl>
<FormMessage />
</FormItem>
@@ -825,7 +810,7 @@ export function CreateTrainingForm({
</FormLabel>
<Select
onValueChange={(val) => field.onChange(val === 'true')}
defaultValue={field.value ? 'true' : 'false'}
value={field.value ? 'true' : 'false'}
>
<FormControl>
<SelectTrigger>
@@ -881,7 +866,7 @@ export function CreateTrainingForm({
</FormLabel>
<Select
onValueChange={(val) => field.onChange(val === 'true')}
defaultValue={field.value ? 'true' : 'false'}
value={field.value ? 'true' : 'false'}
>
<FormControl>
<SelectTrigger>
@@ -936,6 +921,212 @@ export function CreateTrainingForm({
</CardContent>
</Card>
{/* Distribución y Exportación */}
<Card>
<CardHeader>
<CardTitle>Zona de Distribución y Exportación</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<FormField
control={form.control}
name="internalDistributionZone"
render={({ field }) => (
<FormItem>
<FormLabel>
Breve Descripción de la Zona de Distribución
</FormLabel>
<FormControl>
<Input
{...field}
placeholder="Ej. Mercado local y regional"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Separator />
<FormField
control={form.control}
name="isExporting"
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
<div className="space-y-0.5">
<FormLabel className="text-base">
¿El producto es para exportación?
</FormLabel>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
{form.watch('isExporting') && (
<div className="space-y-4 pt-4 border-t">
<h4 className="font-semibold text-sm">
Datos de Exportación
</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="externalCountry"
render={({ field }) => (
<FormItem>
<FormLabel>País</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value ?? undefined}
>
<FormControl>
<SelectTrigger className="w-full">
<SelectValue placeholder="Seleccione País" />
</SelectTrigger>
</FormControl>
<SelectContent>
{COUNTRY_OPTIONS.map((country: string) => (
<SelectItem key={country} value={country}>
{country}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="externalCity"
render={({ field }) => (
<FormItem>
<FormLabel>Ciudad</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="externalDescription"
render={({ field }) => (
<FormItem>
<FormLabel>Breve Descripción</FormLabel>
<FormControl>
<Input {...field} value={field.value ?? ''} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="grid grid-cols-2 gap-2">
<FormField
control={form.control}
name="externalQuantity"
render={({ field }) => (
<FormItem>
<FormLabel>Cantidad</FormLabel>
<FormControl>
<Input
type="number"
{...field}
value={field.value ?? ''}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="externalUnit"
render={({ field }) => (
<FormItem>
<FormLabel>Unidad</FormLabel>
<Select
onValueChange={field.onChange}
defaultValue={field.value ?? undefined}
>
<FormControl>
<SelectTrigger className="w-full">
<SelectValue placeholder="Unidad" />
</SelectTrigger>
</FormControl>
<SelectContent>
{[
'KG',
'TON',
'UNID',
'LT',
'MTS',
'QQ',
'HM2',
'SACOS',
].map((unit) => (
<SelectItem key={unit} value={unit}>
{unit}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
</div>
</div>
</div>
)}
</CardContent>
</Card>
{/* Mano de Obra */}
<Card>
<CardHeader>
<CardTitle>Mano de Obra</CardTitle>
</CardHeader>
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="womenCount"
render={({ field }) => (
<FormItem>
<FormLabel>Mujeres (cantidad)</FormLabel>
<FormControl>
<Input type="number" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="menCount"
render={({ field }) => (
<FormItem>
<FormLabel>Hombres (cantidad)</FormLabel>
<FormControl>
<Input type="number" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</CardContent>
</Card>
{/* 3. Detalles de la ubicación */}
<Card>
<CardHeader>
@@ -963,12 +1154,14 @@ export function CreateTrainingForm({
name="ospGoogleMapsLink"
render={({ field }) => (
<FormItem className="col-span-1 lg:col-span-2 flex flex-col space-y-2">
<FormLabel>Dirección Link Google Maps</FormLabel>
<FormLabel>
Coordenadas de la Ubicación (Google Maps)
</FormLabel>
<FormControl>
<Input
{...field}
value={field.value ?? ''}
placeholder="https://maps.google.com/..."
placeholder="10.123456, -66.123456"
/>
</FormControl>
<FormMessage />

View File

@@ -1,9 +1,3 @@
import { COUNTRY_OPTIONS } from '@/constants/countries';
import {
useMunicipalityQuery,
useParishQuery,
useStateQuery,
} from '@/feactures/location/hooks/use-query-location';
import { Button } from '@repo/shadcn/button';
import {
Dialog,
@@ -23,15 +17,6 @@ import {
} from '@repo/shadcn/components/ui/table';
import { Input } from '@repo/shadcn/input';
import { Label } from '@repo/shadcn/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@repo/shadcn/select';
import { SelectSearchable } from '@repo/shadcn/select-searchable';
import { Switch } from '@repo/shadcn/switch';
import { Trash2 } from 'lucide-react';
import { useState } from 'react';
import { useFieldArray, useFormContext } from 'react-hook-form';
@@ -58,48 +43,8 @@ export function ProductActivityList() {
dailyCount: '',
weeklyCount: '',
monthlyCount: '',
internalDistributionZone: '',
// Internal dist
internalState: null,
internalMunicipality: null,
internalParish: null,
internalDescription: '',
internalQuantity: '',
internalUnit: '',
// External dist
externalCountry: '',
externalState: null,
externalMunicipality: null,
externalParish: null,
externalCity: '',
externalDescription: '',
externalQuantity: '',
externalUnit: '',
// Workforce
womenCount: '',
menCount: '',
isExporting: false,
});
// Location logic for Internal Validation
const [internalStateId, setInternalStateId] = useState(0);
const [internalMuniId, setInternalMuniId] = useState(0);
const { data: statesData } = useStateQuery();
const { data: internalMuniData } = useMunicipalityQuery(internalStateId);
const { data: internalParishData } = useParishQuery(internalMuniId);
// Location logic for External Validation
const [externalStateId, setExternalStateId] = useState(0);
const [externalMuniId, setExternalMuniId] = useState(0);
const { data: externalMuniData } = useMunicipalityQuery(externalStateId);
const { data: externalParishData } = useParishQuery(externalMuniId);
const isVenezuela = newItem.externalCountry === 'Venezuela';
const handleAdd = () => {
if (newItem.description) {
append(newItem);
@@ -108,39 +53,11 @@ export function ProductActivityList() {
dailyCount: '',
weeklyCount: '',
monthlyCount: '',
internalDistributionZone: '',
internalState: null,
internalMunicipality: null,
internalParish: null,
internalDescription: '',
internalQuantity: '',
internalUnit: '',
externalCountry: '',
externalState: null,
externalMunicipality: null,
externalParish: null,
externalCity: '',
externalDescription: '',
externalQuantity: '',
externalUnit: '',
womenCount: '',
menCount: '',
isExporting: false,
});
setInternalStateId(0);
setInternalMuniId(0);
setExternalStateId(0);
setExternalMuniId(0);
setIsOpen(false);
}
};
const stateOptions = statesData?.data || [];
const internalMuniOptions = internalMuniData?.data || [];
const internalParishOptions = internalParishData?.data || [];
const externalMuniOptions = externalMuniData?.data || [];
const externalParishOptions = externalParishData?.data || [];
return (
<div className="space-y-4">
<div className="flex justify-between items-center">
@@ -203,209 +120,6 @@ export function ProductActivityList() {
</div>
</div>
<hr />
<h4 className="font-semibold">Zona de Distribucción</h4>
<div className="grid grid-cols-1 gap-4">
<div className="space-y-2">
<Label>Breve Descripción de la Zona de Distribucción</Label>
<Input
value={newItem.internalDistributionZone}
onChange={(e) =>
setNewItem({
...newItem,
internalDistributionZone: e.target.value,
})
}
/>
</div>
</div>
<hr />
<div className="flex items-center space-x-2">
<Switch
id="export-toggle"
checked={newItem.isExporting}
onCheckedChange={(val: boolean) =>
setNewItem({ ...newItem, isExporting: val })
}
/>
<Label htmlFor="export-toggle">
¿El producto es para exportación?
</Label>
</div>
{newItem.isExporting && (
<>
<h4 className="font-semibold text-sm">
Datos de Exportación
</h4>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>País</Label>
<Select
value={newItem.externalCountry}
onValueChange={(val) =>
setNewItem({ ...newItem, externalCountry: val })
}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Seleccione País" />
</SelectTrigger>
<SelectContent>
{COUNTRY_OPTIONS.map((country: string) => (
<SelectItem key={country} value={country}>
{country}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{!isVenezuela && (
<div className="space-y-2">
<Label>Ciudad</Label>
<Input
value={newItem.externalCity}
onChange={(e) =>
setNewItem({
...newItem,
externalCity: e.target.value,
})
}
/>
</div>
)}
</div>
{isVenezuela && (
<div className="grid grid-cols-3 gap-4">
<div className="space-y-2">
<Label>Estado</Label>
<SelectSearchable
options={stateOptions.map((s) => ({
value: String(s.id),
label: s.name,
}))}
onValueChange={(val) => {
const id = Number(val);
setExternalStateId(id);
setNewItem({ ...newItem, externalState: id });
}}
placeholder="Estado"
/>
</div>
<div className="space-y-2">
<Label>Municipio</Label>
<SelectSearchable
options={externalMuniOptions.map((s) => ({
value: String(s.id),
label: s.name,
}))}
onValueChange={(val) => {
const id = Number(val);
setExternalMuniId(id);
setNewItem({
...newItem,
externalMunicipality: id,
});
}}
placeholder="Municipio"
disabled={!externalStateId}
/>
</div>
<div className="space-y-2">
<Label>Parroquia</Label>
<SelectSearchable
options={externalParishOptions.map((s) => ({
value: String(s.id),
label: s.name,
}))}
onValueChange={(val) =>
setNewItem({
...newItem,
externalParish: Number(val),
})
}
placeholder="Parroquia"
disabled={!externalMuniId}
/>
</div>
</div>
)}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Breve Descripción</Label>
<Input
value={newItem.externalDescription}
onChange={(e) =>
setNewItem({
...newItem,
externalDescription: e.target.value,
})
}
/>
</div>
<div className="space-y-2">
<Label>Cantidad Numérica</Label>
<div className="flex gap-2">
<Input
type="number"
className="flex-1"
value={newItem.externalQuantity}
onChange={(e) =>
setNewItem({
...newItem,
externalQuantity: e.target.value,
})
}
/>
<Select
value={newItem.externalUnit}
onValueChange={(val) =>
setNewItem({ ...newItem, externalUnit: val })
}
>
<SelectTrigger className="w-[120px]">
<SelectValue placeholder="Unidad" />
</SelectTrigger>
<SelectContent>
{UNIT_OPTIONS.map((unit) => (
<SelectItem key={unit} value={unit}>
{unit}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
</div>
</>
)}
<hr />
<h4 className="font-semibold">Mano de Obra</h4>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Mujer (cantidad)</Label>
<Input
type="number"
value={newItem.womenCount}
onChange={(e) =>
setNewItem({ ...newItem, womenCount: e.target.value })
}
/>
</div>
<div className="space-y-2">
<Label>Hombre (cantidad)</Label>
<Input
type="number"
value={newItem.menCount}
onChange={(e) =>
setNewItem({ ...newItem, menCount: e.target.value })
}
/>
</div>
</div>
<div className="flex justify-end gap-4">
<Button
variant="outline"
@@ -427,6 +141,8 @@ export function ProductActivityList() {
<TableHeader>
<TableRow>
<TableHead>Producto/Descripción</TableHead>
<TableHead>Producción Diario</TableHead>
<TableHead>Producción Semanal</TableHead>
<TableHead>Producción Mensual</TableHead>
<TableHead className="w-[50px]"></TableHead>
</TableRow>
@@ -455,75 +171,10 @@ export function ProductActivityList() {
{...register(`productList.${index}.monthlyCount`)}
defaultValue={field.monthlyCount ?? ''}
/>
<input
type="hidden"
{...register(
`productList.${index}.internalDistributionZone`,
)}
defaultValue={field.internalDistributionZone ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.internalQuantity`)}
defaultValue={field.internalQuantity ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.internalUnit`)}
defaultValue={field.internalUnit ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.externalCountry`)}
defaultValue={field.externalCountry ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.externalState`)}
defaultValue={field.externalState ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.externalMunicipality`)}
defaultValue={field.externalMunicipality ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.externalParish`)}
defaultValue={field.externalParish ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.externalCity`)}
defaultValue={field.externalCity ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.externalDescription`)}
defaultValue={field.externalDescription ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.externalQuantity`)}
defaultValue={field.externalQuantity ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.externalUnit`)}
defaultValue={field.externalUnit ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.womenCount`)}
defaultValue={field.womenCount ?? ''}
/>
<input
type="hidden"
{...register(`productList.${index}.menCount`)}
defaultValue={field.menCount ?? ''}
/>
{field.description}
</TableCell>
<TableCell>{field.dailyCount}</TableCell>
<TableCell>{field.weeklyCount}</TableCell>
<TableCell>{field.monthlyCount}</TableCell>
<TableCell>
<Button

View File

@@ -22,7 +22,6 @@ import {
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,
@@ -129,10 +128,7 @@ export function TrainingViewModal({
<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="Coordinador" value={data.coorFullName} />
<DetailItem label="Teléfono Coord." value={data.coorPhone} />
<DetailItem
label="Fecha Visita"
@@ -209,7 +205,11 @@ export function TrainingViewModal({
className="gap-2"
>
<a
href={data.ospGoogleMapsLink}
href={
data.ospGoogleMapsLink.startsWith('http')
? data.ospGoogleMapsLink
: `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(data.ospGoogleMapsLink)}`
}
target="_blank"
rel="noreferrer"
>
@@ -229,80 +229,36 @@ export function TrainingViewModal({
<CardHeader className="pb-3">
<CardTitle className="text-lg flex items-center gap-2">
<Package className="h-5 w-5" />
Productos y Mano de Obra
Productos Registrados
<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}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{data.productList?.map((prod: any, idx: number) => (
<div
key={idx}
className="bg-muted/40 p-4 rounded-lg border text-sm"
>
<h4 className="font-bold text-base text-primary mb-2">
{prod.description}
</h4>
<Badge variant="outline">
Mano de obra:{' '}
{Number(prod.menCount || 0) +
Number(prod.womenCount || 0)}
</Badge>
<div className="grid grid-cols-3 gap-2">
<DetailItem label="Diario" value={prod.dailyCount} />
<DetailItem
label="Semanal"
value={prod.weeklyCount}
/>
<DetailItem
label="Mensual"
value={prod.monthlyCount}
/>
</div>
</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}{' '}
{prod.internalUnit}
</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}{' '}
{prod.externalUnit}
</p>
<p className="text-xs text-muted-foreground">
{prod.externalDescription}
</p>
</div>
)}
</div>
</>
)}
</div>
))}
))}
</div>
{(!data.productList || data.productList.length === 0) && (
<p className="text-sm text-muted-foreground italic">
No hay productos registrados.
@@ -311,6 +267,64 @@ export function TrainingViewModal({
</CardContent>
</Card>
{/* DISTRIBUCIÓN, EXPORTACIÓN Y MANO DE OBRA */}
<Section title="Distribución, Exportación y Mano de Obra">
<div className="col-span-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="space-y-4">
<h4 className="text-sm font-bold border-b pb-1">
Distribución Interna
</h4>
<DetailItem
label="Zona de Distribución"
value={data.internalDistributionZone}
/>
</div>
<div className="space-y-4">
<h4 className="text-sm font-bold border-b pb-1">
Mano de Obra
</h4>
<div className="grid grid-cols-2 gap-4">
<DetailItem label="Mujeres" value={data.womenCount} />
<DetailItem label="Hombres" value={data.menCount} />
<DetailItem
label="Total"
value={
Number(data.womenCount || 0) +
Number(data.menCount || 0)
}
/>
</div>
</div>
<div className="space-y-4">
<h4 className="text-sm font-bold border-b pb-1 flex items-center gap-2">
Exportación <BooleanBadge value={data.isExporting} />
</h4>
{data.isExporting && (
<div className="space-y-3">
<DetailItem label="País" value={data.externalCountry} />
<DetailItem label="Ciudad" value={data.externalCity} />
<DetailItem
label="Descripción"
value={data.externalDescription}
/>
<div className="grid grid-cols-2 gap-2">
<DetailItem
label="Cantidad"
value={data.externalQuantity}
/>
<DetailItem
label="Unidad"
value={data.externalUnit}
/>
</div>
</div>
)}
</div>
</div>
</Section>
{/* EQUIPAMIENTO Y PRODUCCIÓN */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card>