Fondemi/sistema_base
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correciones visuales al formulario

Browse Source
This commit is contained in:
Sergio Ramirez
2026-01-29 09:31:00 -04:00
parent 8efe595f73
commit 2566e5e9a7
3 changed files with 133 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/app/dashboard/formulario/nuevo/page.tsx
View File

@@ -1,6 +1,4 @@
'use client'; 'use client';
import PageContainer from '@/components/layout/page-container';
import { CreateTrainingForm } from '@/feactures/training/components/form'; import { CreateTrainingForm } from '@/feactures/training/components/form';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
@@ -9,7 +7,7 @@ export default function NewTrainingPage() {
return ( return (
// <PageContainer scrollable> // <PageContainer scrollable>
<div className="px-6 pt-2 pb-6 flex-1 space-y-4"> <div className="p-6 space-y-6">
<CreateTrainingForm <CreateTrainingForm
onSuccess={() => router.push('/dashboard/formulario')} onSuccess={() => router.push('/dashboard/formulario')}
onCancel={() => router.back()} onCancel={() => router.back()}

200
apps/web/feactures/training/components/form.tsx
View File

@@ -409,13 +409,17 @@ export function CreateTrainingForm({
2. Datos de la Organización Socioproductiva (OSP) 2. Datos de la Organización Socioproductiva (OSP)
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4"> {/* CAMBIO 1: lg:grid-cols-2 para evitar columnas estrechas en tablets */}
<CardContent className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
<FormField <FormField
control={form.control} control={form.control}
name="ospType" name="ospType"
render={({ field }) => ( render={({ field }) => (
<FormItem> /* CAMBIO 2: flex flex-col y space-y-3 para forzar separación vertical interna */
<FormLabel>Tipo de Organización</FormLabel> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel className="whitespace-normal leading-tight font-semibold">
Tipo de Organización
</FormLabel>
<Select <Select
onValueChange={field.onChange} onValueChange={field.onChange}
defaultValue={field.value} defaultValue={field.value}
@@ -442,12 +446,13 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="ecoSector" name="ecoSector"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>Sector Económico</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
Sector Económico
</FormLabel>
<Select <Select
onValueChange={(val) => { onValueChange={(val) => {
field.onChange(val); field.onChange(val);
// Reset downstream
form.setValue('productiveSector', ''); form.setValue('productiveSector', '');
form.setValue('centralProductiveActivity', ''); form.setValue('centralProductiveActivity', '');
form.setValue('mainProductiveActivity', ''); form.setValue('mainProductiveActivity', '');
@@ -477,8 +482,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="productiveSector" name="productiveSector"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>SECTOR PRODUCTIVO</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
Sector Productivo
</FormLabel>
<Select <Select
onValueChange={(val) => { onValueChange={(val) => {
field.onChange(val); field.onChange(val);
@@ -511,8 +518,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="centralProductiveActivity" name="centralProductiveActivity"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>ACTIVIDAD CENTRAL PRODUCTIVO</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
Actividad Central Productiva
</FormLabel>
<Select <Select
onValueChange={(val) => { onValueChange={(val) => {
field.onChange(val); field.onChange(val);
@@ -544,8 +553,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="mainProductiveActivity" name="mainProductiveActivity"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>ACTIVIDAD PRODUCTIVA PRINCIPAL</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
Actividad Productiva Principal
</FormLabel>
<Select <Select
onValueChange={(val) => { onValueChange={(val) => {
field.onChange(val); field.onChange(val);
@@ -576,8 +587,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="productiveActivity" name="productiveActivity"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>ACTIVIDAD PRODUCTIVA</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
Actividad Productiva
</FormLabel>
<Select <Select
onValueChange={field.onChange} onValueChange={field.onChange}
defaultValue={field.value} defaultValue={field.value}
@@ -605,8 +618,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="ospRif" name="ospRif"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>RIF de la organización (opcional)</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
RIF de la organización (opcional)
</FormLabel>
<FormControl> <FormControl>
<Input {...field} placeholder="J-12345678-9" /> <Input {...field} placeholder="J-12345678-9" />
</FormControl> </FormControl>
@@ -619,8 +634,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="ospName" name="ospName"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>Nombre de la organización</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
Nombre de la organización
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -633,8 +650,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="companyConstitutionYear" name="companyConstitutionYear"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>Año de constitución</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
Año de constitución
</FormLabel>
<FormControl> <FormControl>
<Input type="number" {...field} /> <Input type="number" {...field} />
</FormControl> </FormControl>
@@ -647,8 +666,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="currentStatus" name="currentStatus"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>Estatus</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
Estatus
</FormLabel>
<Select <Select
onValueChange={field.onChange} onValueChange={field.onChange}
defaultValue={field.value} defaultValue={field.value}
@@ -675,8 +696,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="infrastructureMt2" name="infrastructureMt2"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>INFRAESTRUCTURA (MT2)</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
infraestrutura (MT2)
</FormLabel>
<FormControl> <FormControl>
<Input {...field} placeholder="e.g. 500" /> <Input {...field} placeholder="e.g. 500" />
</FormControl> </FormControl>
@@ -689,8 +712,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="hasTransport" name="hasTransport"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>POSEE TRANSPORTE</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
¿Posee Transporte?
</FormLabel>
<Select <Select
onValueChange={(val) => field.onChange(val === 'true')} onValueChange={(val) => field.onChange(val === 'true')}
defaultValue={field.value ? 'true' : 'false'} defaultValue={field.value ? 'true' : 'false'}
@@ -714,8 +739,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="structureType" name="structureType"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>TIPO DE ESTRUCTURA</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
Tipo Estructura
</FormLabel>
<Select <Select
onValueChange={field.onChange} onValueChange={field.onChange}
defaultValue={field.value} defaultValue={field.value}
@@ -739,8 +766,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="isOpenSpace" name="isOpenSpace"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-3">
<FormLabel>Es un ESPACIO ABIERTO</FormLabel> <FormLabel className="whitespace-normal leading-tight font-semibold">
¿Es un Espacio Abierto?
</FormLabel>
<Select <Select
onValueChange={(val) => field.onChange(val === 'true')} onValueChange={(val) => field.onChange(val === 'true')}
defaultValue={field.value ? 'true' : 'false'} defaultValue={field.value ? 'true' : 'false'}
@@ -764,8 +793,11 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="paralysisReason" name="paralysisReason"
render={({ field }) => ( render={({ field }) => (
<FormItem className="col-span-2"> /* CAMBIO: Se mantiene col-span-2 para que ocupe todo el ancho si hay espacio */
<FormLabel>Razones de paralización (opcional)</FormLabel> <FormItem className="col-span-1 lg:col-span-2 flex flex-col space-y-3">
<FormLabel className="whitespace-normal leading-tight font-semibold">
Razones de paralización (opcional)
</FormLabel>
<FormControl> <FormControl>
<Textarea {...field} /> <Textarea {...field} />
</FormControl> </FormControl>
@@ -800,12 +832,12 @@ export function CreateTrainingForm({
<CardHeader> <CardHeader>
<CardTitle>3. Detalles de la ubicación</CardTitle> <CardTitle>3. Detalles de la ubicación</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="grid grid-cols-1 md:grid-cols-2 gap-4"> <CardContent className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
<FormField <FormField
control={form.control} control={form.control}
name="ospAddress" name="ospAddress"
render={({ field }) => ( render={({ field }) => (
<FormItem className="col-span-2"> <FormItem className="col-span-1 lg:col-span-2 flex flex-col space-y-2">
<FormLabel> <FormLabel>
Dirección de la Organización Socio Productivo Dirección de la Organización Socio Productivo
</FormLabel> </FormLabel>
@@ -821,7 +853,7 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="ospGoogleMapsLink" name="ospGoogleMapsLink"
render={({ field }) => ( render={({ field }) => (
<FormItem className="col-span-2"> <FormItem className="col-span-1 lg:col-span-2 flex flex-col space-y-2">
<FormLabel>Dirección Link Google Maps</FormLabel> <FormLabel>Dirección Link Google Maps</FormLabel>
<FormControl> <FormControl>
<Input <Input
@@ -834,7 +866,7 @@ export function CreateTrainingForm({
)} )}
/> />
<div className="col-span-2"> <div className="col-span-1 lg:col-span-2 border-b pb-2 mt-4 hidden md:inline">
<h4 className="font-semibold mb-2">Datos de la Comuna</h4> <h4 className="font-semibold mb-2">Datos de la Comuna</h4>
</div> </div>
@@ -842,8 +874,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communeName" name="communeName"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Nombre de la Comuna</FormLabel> <FormLabel className="font-semibold">
Nombre de la Comuna
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -856,8 +890,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="siturCodeCommune" name="siturCodeCommune"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Código SITUR de la Comuna</FormLabel> <FormLabel className="font-semibold">
Código SITUR de la Comuna
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -870,8 +906,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communeRif" name="communeRif"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Rif de la Comuna</FormLabel> <FormLabel className="font-semibold">
Rif de la Comuna
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -884,8 +922,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communeSpokespersonName" name="communeSpokespersonName"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Nombre del Vocero o Vocera</FormLabel> <FormLabel className="font-semibold">
Nombre del Vocero o Vocera
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -898,8 +938,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communeSpokespersonCedula" name="communeSpokespersonCedula"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Cédula de Identidad del Vocero</FormLabel> <FormLabel className="font-semibold">
Cédula de Identidad del Vocero
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -912,8 +954,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communeSpokespersonRif" name="communeSpokespersonRif"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>RIF del Vocero</FormLabel> <FormLabel className="font-semibold">
RIF del Vocero
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -926,8 +970,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communeSpokespersonPhone" name="communeSpokespersonPhone"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Número de Teléfono del Vocero</FormLabel> <FormLabel className="font-semibold">
Número de Teléfono del Vocero
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -940,8 +986,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communeEmail" name="communeEmail"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Correo Electrónico de la Comuna</FormLabel> <FormLabel className="font-semibold">
Correo Electrónico de la Comuna
</FormLabel>
<FormControl> <FormControl>
<Input type="email" {...field} /> <Input type="email" {...field} />
</FormControl> </FormControl>
@@ -950,7 +998,7 @@ export function CreateTrainingForm({
)} )}
/> />
<div className="col-span-2"> <div className="col-span-2 hidden md:inline">
<h4 className="font-semibold mb-2"> <h4 className="font-semibold mb-2">
Datos del Consejo Comunal Datos del Consejo Comunal
</h4> </h4>
@@ -960,8 +1008,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communalCouncil" name="communalCouncil"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Nombre del Consejo Comunal</FormLabel> <FormLabel className="font-semibold">
Nombre del Consejo Comunal
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -974,8 +1024,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="siturCodeCommunalCouncil" name="siturCodeCommunalCouncil"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Código SITUR del Consejo Comunal</FormLabel> <FormLabel className="font-semibold">
Código SITUR del Consejo Comunal
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -988,8 +1040,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communalCouncilRif" name="communalCouncilRif"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Rif del Consejo Comunal</FormLabel> <FormLabel className="font-semibold">
Rif del Consejo Comunal
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -1002,8 +1056,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communalCouncilSpokespersonName" name="communalCouncilSpokespersonName"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Nombre del Vocero o Vocera</FormLabel> <FormLabel className="font-semibold">
Nombre del Vocero o Vocera
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -1016,8 +1072,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communalCouncilSpokespersonCedula" name="communalCouncilSpokespersonCedula"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Cédula de Identidad del Vocero</FormLabel> <FormLabel className="font-semibold">
Cédula de Identidad del Vocero
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -1030,8 +1088,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communalCouncilSpokespersonRif" name="communalCouncilSpokespersonRif"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>RIF del Vocero</FormLabel> <FormLabel className="font-semibold">
RIF del Vocero
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -1044,8 +1104,10 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communalCouncilSpokespersonPhone" name="communalCouncilSpokespersonPhone"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel>Número de Teléfono del Vocero</FormLabel> <FormLabel className="font-semibold">
Número de Teléfono del Vocero
</FormLabel>
<FormControl> <FormControl>
<Input {...field} /> <Input {...field} />
</FormControl> </FormControl>
@@ -1058,8 +1120,8 @@ export function CreateTrainingForm({
control={form.control} control={form.control}
name="communalCouncilEmail" name="communalCouncilEmail"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem className="w-full flex flex-col space-y-2">
<FormLabel> <FormLabel className="font-semibold">
Correo Electrónico del Consejo Comunal Correo Electrónico del Consejo Comunal
</FormLabel> </FormLabel>
<FormControl> <FormControl>

2
apps/web/feactures/training/components/training-tables/training-table-action.tsx
View File

@@ -24,7 +24,7 @@ export default function TrainingTableAction() {
size="sm" size="sm"
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Nuevo Registro <span className="hidden md:inline">Nuevo Registro</span>
</Button> </Button>
</div> </div>
); );