Se puso la tabla de tripulacion en el tab cont

This commit is contained in:
2026-02-09 09:12:07 -06:00
parent 92300038a8
commit 48e171def6
2 changed files with 49 additions and 62 deletions

View File

@@ -205,21 +205,21 @@
<Card.Root <Card.Root
class="overflow-hidden border shadow-sm {showForm ? 'lg:col-span-7 xl:col-span-8' : ''}" class="overflow-hidden border shadow-sm {showForm ? 'lg:col-span-7 xl:col-span-8' : ''}"
> >
<Card.Header class="border-b bg-muted/30 pb-4"> <Card.Header class="border-b bg-muted/30 p-2 px-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-3"> <div class="flex items-center gap-2">
<div class="rounded-lg bg-primary/10 p-2"> <div class="rounded-md bg-primary/10 p-1.5">
<Users class="h-5 w-5 text-primary" /> <Users class="h-4 w-4 text-primary" />
</div> </div>
<div> <div>
<Card.Title class="text-lg font-semibold tracking-tight">Tripulación</Card.Title> <Card.Title class="text-base font-bold tracking-tight">Tripulación</Card.Title>
<Card.Description class="text-xs">Conductores y personal activo</Card.Description> <Card.Description class="text-xs">Personal activo</Card.Description>
</div> </div>
</div> </div>
{#if !showForm} {#if !showForm}
<Button onclick={handleAdd} size="sm" class="h-9 gap-2"> <Button onclick={handleAdd} size="sm" class="h-7 gap-1.5 px-3 text-xs">
<Plus class="h-4 w-4" /> <Plus class="h-3.5 w-3.5" />
Nuevo Miembro Nuevo
</Button> </Button>
{/if} {/if}
</div> </div>
@@ -228,13 +228,13 @@
<div class="min-h-[300px] overflow-x-auto"> <div class="min-h-[300px] overflow-x-auto">
<table class="w-full text-left text-sm"> <table class="w-full text-left text-sm">
<thead <thead
class="border-b bg-muted/50 text-[11px] font-bold tracking-wider text-muted-foreground uppercase" class="border-b bg-muted/50 text-xs font-bold tracking-wider text-muted-foreground uppercase"
> >
<tr> <tr>
<th class="px-6 py-3">Nombre</th> <th class="px-4 py-2">Nombre</th>
<th class="px-6 py-3">Tipo</th> <th class="px-4 py-2">Tipo</th>
<th class="px-6 py-3 {showForm ? 'hidden xl:table-cell' : ''}">Ubicación</th> <th class="px-4 py-2 {showForm ? 'hidden xl:table-cell' : ''}">Ubicación</th>
<th class="w-[80px] px-6 py-3 text-right"></th> <th class="w-[80px] px-4 py-2 text-right"></th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y"> <tbody class="divide-y">
@@ -258,13 +258,13 @@
? 'bg-primary/5' ? 'bg-primary/5'
: ''}" : ''}"
> >
<td class="px-6 py-3 font-medium"> <td class="px-4 py-2 text-sm font-medium">
{driver.driver_name} {driver.driver_name}
</td> </td>
<td class="px-6 py-3"> <td class="px-4 py-2">
<Badge <Badge
variant="outline" variant="outline"
class="text-[10px] font-bold uppercase {typeLabels[ class="h-5 text-[10px] font-bold uppercase {typeLabels[
driver.driver_type as keyof typeof typeLabels driver.driver_type as keyof typeof typeLabels
]?.color || ''}" ]?.color || ''}"
> >
@@ -273,7 +273,7 @@
</Badge> </Badge>
</td> </td>
<td <td
class="px-6 py-3 text-muted-foreground {showForm class="px-4 py-2 text-muted-foreground {showForm
? 'hidden xl:table-cell' ? 'hidden xl:table-cell'
: ''}" : ''}"
> >
@@ -282,25 +282,23 @@
{driver.city || ''}, {driver.country || ''} {driver.city || ''}, {driver.country || ''}
</div> </div>
</td> </td>
<td class="px-6 py-3 text-right"> <td class="px-4 py-2 text-right">
<div <div class="flex justify-end gap-1">
class="flex justify-end gap-1 opacity-100 transition-opacity group-hover:opacity-100 lg:opacity-0"
>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
class="h-8 w-8" class="h-7 w-7"
onclick={() => handleEdit(i)} onclick={() => handleEdit(i)}
> >
<Pencil class="h-3.5 w-3.5" /> <Pencil class="h-3 w-3" />
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
class="h-8 w-8 text-destructive" class="h-7 w-7 text-destructive"
onclick={() => handleDelete(i)} onclick={() => handleDelete(i)}
> >
<Trash2 class="h-3.5 w-3.5" /> <Trash2 class="h-3 w-3" />
</Button> </Button>
</div> </div>
</td> </td>

View File

@@ -690,43 +690,43 @@
<div class="mx-auto max-w-[1400px] pb-48"> <div class="mx-auto max-w-[1400px] pb-48">
<Tabs.Root bind:value={activeTab}> <Tabs.Root bind:value={activeTab}>
<!-- Top Fields (Global across tabs) --> <!-- Top Fields (Global across tabs) -->
<Card.Root class="mb-6 border-primary/5 shadow-sm"> <Card.Root class="mb-2.5 border-primary/5 shadow-sm">
<Card.Content class="p-6"> <Card.Content class="p-2.5 py-1.5">
<div class="grid grid-cols-1 gap-6 md:grid-cols-4"> <div class="grid grid-cols-1 gap-2.5 md:grid-cols-4">
<div class="space-y-2"> <div class="space-y-0.5">
<Label class="text-xs font-bold text-muted-foreground uppercase" <Label class="text-[8px] font-bold text-muted-foreground uppercase"
>Número de Manifiesto</Label >Número de Manifiesto</Label
> >
<div class="relative"> <div class="relative">
<Package class="absolute top-2.5 left-3 h-4 w-4 text-muted-foreground" /> <Package class="absolute top-1.5 left-2 h-3 w-3 text-muted-foreground" />
<Input <Input
bind:value={formData.manifest_number} bind:value={formData.manifest_number}
class="bg-muted/20 pl-9 font-mono" class="h-7 bg-muted/20 pl-7 font-mono text-[10px]"
placeholder="MAN-000" placeholder="MAN-000"
/> />
</div> </div>
</div> </div>
<div class="space-y-2"> <div class="space-y-0.5">
<Label class="text-xs font-bold text-muted-foreground uppercase" <Label class="text-[8px] font-bold text-muted-foreground uppercase"
>Fecha Entrada/Arribo</Label >Fecha Entrada/Arribo</Label
> >
<div class="relative"> <div class="relative">
<Calendar <Calendar
class="pointer-events-none absolute top-2.5 left-3 h-4 w-4 text-muted-foreground" class="pointer-events-none absolute top-1.5 left-2 h-3 w-3 text-muted-foreground"
/> />
<Input type="date" bind:value={entryDateStr} class="pl-9" /> <Input type="date" bind:value={entryDateStr} class="h-7 pl-7 text-[10px]" />
</div> </div>
</div> </div>
<div class="space-y-2"> <div class="space-y-0.5">
<Label class="text-xs font-bold text-muted-foreground uppercase" <Label class="text-[8px] font-bold text-muted-foreground uppercase"
>Transportista</Label >Transportista</Label
> >
<div class="flex gap-2"> <div class="flex gap-1">
<div class="relative w-full"> <div class="relative w-full">
<Truck class="absolute top-2.5 left-3 h-4 w-4 text-muted-foreground" /> <Truck class="absolute top-1.5 left-2 h-3 w-3 text-muted-foreground" />
<Input <Input
value={selectedTransporterName || formData.carrier_code} value={selectedTransporterName || formData.carrier_code}
class="pl-9 font-mono" class="h-7 pl-7 font-mono text-[10px]"
placeholder="Catálogo..." placeholder="Catálogo..."
readonly readonly
onclick={() => (showTransporterModal = true)} onclick={() => (showTransporterModal = true)}
@@ -735,25 +735,22 @@
<Button <Button
variant="outline" variant="outline"
size="icon" size="icon"
class="shrink-0" class="h-7 w-7 shrink-0"
onclick={() => (showTransporterModal = true)} onclick={() => (showTransporterModal = true)}
> >
<FolderSearch class="h-4 w-4" /> <FolderSearch class="h-3 w-3" />
</Button> </Button>
</div> </div>
{#if selectedTransporterName && selectedTransporterName !== formData.carrier_code}
<!-- Name already shown in Input -->
{/if}
</div> </div>
<div class="space-y-2"> <div class="space-y-0.5">
<Label class="text-xs font-bold text-muted-foreground uppercase" <Label class="text-[8px] font-bold text-muted-foreground uppercase"
>Persona a Cargo</Label >Persona a Cargo</Label
> >
<div class="relative"> <div class="relative">
<User class="absolute top-2.5 left-3 h-4 w-4 text-muted-foreground" /> <User class="absolute top-1.5 left-2 h-3 w-3 text-muted-foreground" />
<Input <Input
bind:value={formData.person_in_charge} bind:value={formData.person_in_charge}
class="pl-9" class="h-7 pl-7 text-[10px]"
placeholder="Nombre completo" placeholder="Nombre completo"
/> />
</div> </div>
@@ -1034,15 +1031,14 @@
</div> </div>
</Tabs.Content> </Tabs.Content>
<Tabs.Content value="tripulacion" class="animate-in fade-in space-y-6 duration-300"> <Tabs.Content value="cont" class="animate-in fade-in space-y-6 duration-300">
<ManifestDriverSubForm <ManifestDriverSubForm
manifestNumber={formData.manifest_number} manifestNumber={formData.manifest_number}
carrierName={selectedTransporterName || formData.carrier_code} carrierName={selectedTransporterName || formData.carrier_code}
isNewManifest={isNew} isNewManifest={isNew}
/> />
</Tabs.Content>
<Tabs.Content value="cont" class="animate-in fade-in space-y-6 duration-300"> <Separator />
<div class="grid grid-cols-1 gap-6 md:grid-cols-2"> <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<!-- Config --> <!-- Config -->
<Card.Root class="shadow-sm"> <Card.Root class="shadow-sm">
@@ -1276,7 +1272,7 @@
<!-- Tabs Navigation in Footer --> <!-- Tabs Navigation in Footer -->
<Tabs.Root bind:value={activeTab}> <Tabs.Root bind:value={activeTab}>
<div class="w-full"> <div class="w-full">
<Tabs.List class="grid w-full grid-cols-4"> <Tabs.List class="grid w-full grid-cols-3">
<Tabs.Trigger <Tabs.Trigger
value="generales" value="generales"
class="whitespace-nowrap data-[state=active]:bg-primary data-[state=active]:text-primary-foreground" class="whitespace-nowrap data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
@@ -1284,13 +1280,6 @@
<FileText size={16} class="mr-2" /> <FileText size={16} class="mr-2" />
Generales Generales
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger
value="tripulacion"
class="whitespace-nowrap data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
>
<Users size={16} class="mr-2" />
Tripulación
</Tabs.Trigger>
<Tabs.Trigger <Tabs.Trigger
value="cont" value="cont"
class="whitespace-nowrap data-[state=active]:bg-primary data-[state=active]:text-primary-foreground" class="whitespace-nowrap data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"