Uecko/Uecko_ERP
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Facturas de cliente

Browse Source
This commit is contained in:
David Arranz 2025-10-02 18:30:46 +02:00
parent 58eede59af
commit bb1ce13fee
40 changed files with 1189 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@ -39,7 +39,7 @@
"editor.defaultFormatter": "biomejs.biome"
},
"[typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"

15
modules/core/src/web/hooks/use-hook-form/use-hook-form.ts
View File

@ -3,20 +3,23 @@ import { useEffect } from "react";
import { FieldValues, UseFormProps, UseFormReturn, useForm } from "react-hook-form";
import * as z4 from "zod/v4/core";
type UseHookFormProps<T extends FieldValues = FieldValues> = UseFormProps<T> & {
resolverSchema: z4.$ZodType<T, any>;
initialValues: UseFormProps<T>["defaultValues"];
type UseHookFormProps<TFields extends FieldValues = FieldValues, TContext = any> = UseFormProps<
TFields,
TContext
> & {
resolverSchema: z4.$ZodType<TFields, any>;
initialValues: UseFormProps<TFields>["defaultValues"];
onDirtyChange?: (isDirty: boolean) => void;
};
export function useHookForm<T extends FieldValues = FieldValues>({
export function useHookForm<TFields extends FieldValues = FieldValues, TContext = any>({
resolverSchema,
initialValues,
disabled,
onDirtyChange,
...rest
}: UseHookFormProps<T>): UseFormReturn<T> {
const form = useForm<T>({
}: UseHookFormProps<TFields, TContext>): UseFormReturn<TFields> {
const form = useForm<TFields, TContext>({
...rest,
resolver: zodResolver(resolverSchema),
defaultValues: initialValues,

63
modules/customer-invoices/src/web/components/customer-invoices-list-grid.tsx
View File

@ -1,12 +1,14 @@
import { AG_GRID_LOCALE_ES } from "@ag-grid-community/locale";
import type {
import type { CellKeyDownEvent, RowClickedEvent, ValueFormatterParams } from "ag-grid-community";
import {
ColDef,
GridOptions,
SizeColumnsToContentStrategy,
SizeColumnsToFitGridStrategy,
SizeColumnsToFitProvidedWidthStrategy,
ValueFormatterParams,
} from "ag-grid-community";
import { ColDef, GridOptions } from "ag-grid-community";
import { useMemo, useState } from "react";
import { useCallback, useMemo, useState } from "react";
import { MoneyDTO } from "@erp/core";
import { formatDate, formatMoney } from "@erp/core/client";
@ -110,6 +112,47 @@ export const CustomerInvoicesListGrid = () => {
},
]);
// Navegación centralizada (click/teclado)
const goToRow = useCallback(
(id: string, newTab = false) => {
const url = `/customer-invoices/${id}/edit`;
if (newTab) {
window.open(url, "_blank", "noopener,noreferrer");
} else {
navigate(url);
}
},
[navigate]
);
const onRowClicked = useCallback(
(e: RowClickedEvent<unknown>) => {
if (!e.data) return;
// Soporta Ctrl/Cmd click para nueva pestaña
const newTab = e.event instanceof MouseEvent && (e.event.metaKey || e.event.ctrlKey);
goToRow(e.data.id, newTab);
},
[goToRow]
);
const onCellKeyDown = useCallback(
(e: CellKeyDownEvent<unknown>) => {
if (!e.data) return;
const key = e.event.key;
// Enter o Space disparan navegación
if (key === "Enter" || key === " ") {
e.event.preventDefault();
goToRow(e.data.id);
}
// Ctrl/Cmd+Enter abre en nueva pestaña
if ((e.event.ctrlKey || e.event.metaKey) && key === "Enter") {
e.event.preventDefault();
goToRow(e.data.id, true);
}
},
[goToRow]
);
const autoSizeStrategy = useMemo<
| SizeColumnsToFitGridStrategy
| SizeColumnsToFitProvidedWidthStrategy
@ -137,6 +180,18 @@ export const CustomerInvoicesListGrid = () => {
paginationPageSize: 15,
paginationPageSizeSelector: [10, 15, 20, 30, 50],
localeText: AG_GRID_LOCALE_ES,
// Evita conflictos con selección si la usas
suppressRowClickSelection: true,
// Clase visual de fila clickeable
getRowClass: () => "clickable-row",
// Accesibilidad con teclado
onCellKeyDown,
// Click en cualquier parte de la fila
onRowClicked,
// IDs estables (opcional pero recomendado)
getRowId: (params) => params.data.id,
}),
[autoSizeStrategy, colDefs]
);

61
modules/customer-invoices/src/web/components/editor/customer-invoice-edit-form.tsx
View File

@ -1,63 +1,64 @@
import { Description, FieldGroup, Fieldset, Legend } from "@repo/rdx-ui/components";
import { FieldErrors, useFormContext } from "react-hook-form";
import { FieldErrors, useFormContext, useWatch } from "react-hook-form";
import { FormDebug } from "@erp/core/components";
import { CustomerModalSelectorField } from "@erp/customers/components";
import { UserIcon } from "lucide-react";
import { useTranslation } from "../../i18n";
import { CustomerInvoiceFormData } from "../../schemas";
import { InvoiceBasicInfoFields } from "./invoice-basic-info-fields";
import { InvoiceItems } from "./invoice-items-editor";
import { InvoiceTaxSummary } from "./invoice-tax-summary";
import { InvoiceTotals } from "./invoice-totals";
import { InvoiceRecipient } from "./recipient";
interface CustomerInvoiceFormProps {
formId: string;
onSubmit: (data: CustomerInvoiceFormData) => void;
onError: (errors: FieldErrors<CustomerInvoiceFormData>) => void;
className: string;
}
export const CustomerInvoiceEditForm = ({
formId,
onSubmit,
onError,
className,
}: CustomerInvoiceFormProps) => {
const { t } = useTranslation();
const form = useFormContext<CustomerInvoiceFormData>();
const { defaultValues: initialValues } = form.formState;
initialValues.recip
const prueba = useWatch({
control: form.control,
});
return (
<form id={formId} onSubmit={form.handleSubmit(onSubmit, onError)}>
<div className='w-full'>
<FormDebug />
</div>
<div className='mx-auto grid w-full grid-cols-1 gap-6 lg:grid-flow-col-dense lg:grid-cols-2 items-stretch'>
<div className='lg:col-start-1 space-y-6'>
<InvoiceBasicInfoFields />
<section className={className}>
<div className='w-full'>
<FormDebug />
</div>
<div className='mx-auto grid w-full grid-cols-1 gap-6 lg:grid-flow-col-dense lg:grid-cols-2 items-stretch'>
<div className='lg:col-start-1 space-y-6'>
<InvoiceBasicInfoFields />
</div>
<div className='space-y-6 '>
<Fieldset>
<Legend className='flex items-center gap-2 text-foreground'>
<UserIcon className='size-5' /> {t("form_groups.customer.title")}
</Legend>
<Description>{t("form_groups.customer.description")}</Description>
<FieldGroup>
<CustomerModalSelectorField control={form.control} name='customer_id' />
</FieldGroup>
</Fieldset>
</div>
<div className='space-y-6 '>
<InvoiceRecipient />
</div>
<div className='lg:col-start-1 lg:col-span-2 space-y-6'>
<InvoiceItems />
</div>
<div className='lg:col-start-1 lg:col-span-2 space-y-6'>
<InvoiceItems />
</div>
<div className='lg:col-start-1 space-y-6'>
<InvoiceTaxSummary />
<div className='lg:col-start-1 space-y-6'>
<InvoiceTaxSummary />
</div>
<div className='space-y-6 '>
<InvoiceTotals />
</div>
</div>
<div className='space-y-6 '>
<InvoiceTotals />
</div>
</div>
</section>
</form>
);
};

10
modules/customer-invoices/src/web/components/editor/invoice-basic-info-fields.tsx
View File

@ -30,7 +30,7 @@ export const InvoiceBasicInfoFields = () => {
</Legend>
<Description>{t("form_groups.basic_into.description")}</Description>
<FieldGroup className='grid grid-cols-1 gap-x-6 lg:grid-cols-4'>
<FieldGroup className='grid grid-cols-1 gap-x-6 lg:grid-cols-3'>
<TextField
control={control}
name='invoice_number'
@ -40,6 +40,7 @@ export const InvoiceBasicInfoFields = () => {
description={t("form_fields.invoice_number.description")}
/>
<TextField
typePreset='text'
control={control}
name='series'
label={t("form_fields.series.label")}
@ -51,6 +52,7 @@ export const InvoiceBasicInfoFields = () => {
<DatePickerInputField
control={control}
name='invoice_date'
numberOfMonths={2}
required
label={t("form_fields.invoice_date.label")}
placeholder={t("form_fields.invoice_date.placeholder")}
@ -61,6 +63,7 @@ export const InvoiceBasicInfoFields = () => {
<Field className='lg:col-span-2 lg:col-start-1 2xl:col-auto'>
<DatePickerInputField
control={control}
numberOfMonths={2}
name='operation_date'
label={t("form_fields.operation_date.label")}
placeholder={t("form_fields.operation_date.placeholder")}
@ -68,6 +71,8 @@ export const InvoiceBasicInfoFields = () => {
/>
</Field>
<TextField
typePreset='text'
maxLength={256}
className='lg:col-span-2'
control={control}
name='description'
@ -76,7 +81,8 @@ export const InvoiceBasicInfoFields = () => {
description={t("form_fields.description.description")}
/>
<TextAreaField
className='lg:col-span-2'
maxLength={1024}
className='lg:col-span-full'
control={control}
name='notes'
label={t("form_fields.notes.label")}

2
modules/customer-invoices/src/web/components/editor/invoice-items-editor.tsx
View File

@ -12,6 +12,8 @@ export const InvoiceItems = () => {
const { t } = useTranslation();
const { control } = useFormContext<CustomerInvoiceFormData>();
const invoice = useWatch({ control });
const { fields: items, ...fieldActions } = useFieldArray({

2
modules/customer-invoices/src/web/components/editor/recipient/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./invoice-recipient";
export * from "./recipient-modal-selector-field";

34
modules/customer-invoices/src/web/components/editor/recipient/invoice-recipient.tsx Normal file
View File

@ -0,0 +1,34 @@
import { Description, FieldGroup, Fieldset, Legend } from "@repo/rdx-ui/components";
import { useFormContext, useWatch } from "react-hook-form";
import { UserIcon } from "lucide-react";
import { useTranslation } from "../../../i18n";
import { CustomerInvoiceFormData } from "../../../schemas";
import { RecipientModalSelectorField } from "./recipient-modal-selector-field";
export const InvoiceRecipient = () => {
const { t } = useTranslation();
const { control } = useFormContext<CustomerInvoiceFormData>();
const recipient = useWatch({
control,
name: "recipient",
defaultValue: "",
});
return (
<Fieldset>
<Legend className='flex items-center gap-2 text-foreground'>
<UserIcon className='size-5' /> {t("form_groups.customer.title")}
</Legend>
<Description>{t("form_groups.customer.description")}</Description>
<FieldGroup>
<RecipientModalSelectorField
control={control}
name='customer_id'
initialRecipient='recipient'
/>
</FieldGroup>
</Fieldset>
);
};

45
modules/customer-invoices/src/web/components/editor/recipient/recipient-modal-selector-field.tsx Normal file
View File

@ -0,0 +1,45 @@
import { CustomerModalSelector } from "@erp/customers/components";
import { FormField, FormItem } from "@repo/shadcn-ui/components";
import { Control, FieldPath, FieldValues } from "react-hook-form";
type CustomerModalSelectorFieldProps<TFormValues extends FieldValues> = {
control: Control<TFormValues>;
name: FieldPath<TFormValues>;
disabled?: boolean;
required?: boolean;
readOnly?: boolean;
className?: string;
};
export function RecipientModalSelectorField<TFormValues extends FieldValues>({
control,
name,
disabled = false,
required = false,
readOnly = false,
className,
}: CustomerModalSelectorFieldProps<TFormValues>) {
const isDisabled = disabled;
const isReadOnly = readOnly && !disabled;
return (
<FormField
control={control}
name={name}
render={({ field }) => {
const { name, value, onChange, onBlur, ref } = field;
//console.log({ name, value, onChange, onBlur, ref });
return (
<FormItem className={className}>
<CustomerModalSelector
value={value}
onValueChange={onChange}
className='bg-fuchsia-200'
/>
</FormItem>
);
}}
/>
);
}

2
modules/customer-invoices/src/web/customer-invoice-routes.tsx
View File

@ -15,7 +15,7 @@ const CustomerInvoiceAdd = lazy(() =>
import("./pages").then((m) => ({ default: m.CustomerInvoiceCreate }))
);
const CustomerInvoiceUpdate = lazy(() =>
import("./pages").then((m) => ({ default: m.CustomerInvoiceUpdate }))
import("./pages").then((m) => ({ default: m.CustomerInvoiceUpdatePage }))
);
export const CustomerInvoiceRoutes = (params: ModuleClientParams): RouteObject[] => {

6
modules/customer-invoices/src/web/hooks/use-create-customer-invoice-mutation.ts
View File

@ -2,7 +2,7 @@ import { useDataSource } from "@erp/core/hooks";
import { UniqueID, ValidationErrorCollection } from "@repo/rdx-ddd";
import { DefaultError, useMutation, useQueryClient } from "@tanstack/react-query";
import { CreateCustomerInvoiceRequestSchema } from "../../common";
import { CustomerInvoiceData, CustomerInvoiceFormData } from "../schemas";
import { CustomerInvoice, CustomerInvoiceFormData } from "../schemas";
type CreateCustomerInvoicePayload = {
data: CustomerInvoiceFormData;
@ -13,7 +13,7 @@ export const useCreateCustomerInvoiceMutation = () => {
const dataSource = useDataSource();
const schema = CreateCustomerInvoiceRequestSchema;
return useMutation<CustomerInvoiceData, DefaultError, CreateCustomerInvoicePayload>({
return useMutation<CustomerInvoice, DefaultError, CreateCustomerInvoicePayload>({
mutationKey: ["customer-invoice:create"],
mutationFn: async (payload) => {
@ -37,7 +37,7 @@ export const useCreateCustomerInvoiceMutation = () => {
}
const created = await dataSource.createOne("customer-invoices", newInvoiceData);
return created as CustomerInvoiceData;
return created as CustomerInvoice;
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["customer-invoices"] });

6
modules/customer-invoices/src/web/hooks/use-customer-invoice-query.ts
View File

@ -1,6 +1,6 @@
import { useDataSource } from "@erp/core/hooks";
import { DefaultError, type QueryKey, useQuery } from "@tanstack/react-query";
import { CustomerInvoiceData } from "../schemas";
import { CustomerInvoice } from "../schemas";
export const CUSTOMER_INVOICE_QUERY_KEY = (id: string): QueryKey =>
["customer_invoice", id] as const;
@ -13,14 +13,14 @@ export function useCustomerInvoiceQuery(invoiceId?: string, options?: CustomerIn
const dataSource = useDataSource();
const enabled = (options?.enabled ?? true) && !!invoiceId;
return useQuery<CustomerInvoiceData, DefaultError>({
return useQuery<CustomerInvoice, DefaultError>({
queryKey: CUSTOMER_INVOICE_QUERY_KEY(invoiceId ?? "unknown"),
queryFn: async (context) => {
const { signal } = context;
if (!invoiceId) {
if (!invoiceId) throw new Error("invoiceId is required");
}
return await dataSource.getOne<CustomerInvoiceData>("customer-invoices", invoiceId, {
return await dataSource.getOne<CustomerInvoice>("customer-invoices", invoiceId, {
signal,
});
},

0
modules/customer-invoices/src/web/pages/create/create.tsx → modules/customer-invoices/src/web/pages/create/create-customer-invoice-page.tsx
View File

2
modules/customer-invoices/src/web/pages/create/index.ts
View File

@ -1 +1 @@
export * from "./create";
export * from "./create-customer-invoice-page";

9
modules/customer-invoices/src/web/pages/update/customer-invoices-update.tsx → modules/customer-invoices/src/web/pages/update/customer-invoices-update-page.tsx
View File

@ -19,17 +19,18 @@ import {
import { useCustomerInvoiceQuery, useUpdateCustomerInvoice } from "../../hooks";
import { useTranslation } from "../../i18n";
import {
CustomerInvoice,
CustomerInvoiceFormData,
CustomerInvoiceFormSchema,
defaultCustomerInvoiceFormData,
} from "../../schemas";
export const CustomerInvoiceUpdate = () => {
export const CustomerInvoiceUpdatePage = () => {
const invoiceId = useUrlParamId();
const { t } = useTranslation();
const navigate = useNavigate();
// 1) Estado de carga del cliente (query)
// 1) Estado de carga de la factura (query)
const {
data: invoiceData,
isLoading: isLoadingInvoice,
@ -46,7 +47,7 @@ export const CustomerInvoiceUpdate = () => {
} = useUpdateCustomerInvoice();
// 3) Form hook
const form = useHookForm<CustomerInvoiceFormData>({
const form = useHookForm<CustomerInvoiceFormData, CustomerInvoice>({
resolverSchema: CustomerInvoiceFormSchema,
initialValues: invoiceData ?? defaultCustomerInvoiceFormData,
disabled: isUpdating,
@ -169,6 +170,8 @@ export const CustomerInvoiceUpdate = () => {
formId={"customer-invoice-update-form"} // para que el botón del header pueda hacer submit
onSubmit={handleSubmit}
onError={handleError}
className='max-w-full'
initialValues={invoiceData}
/>
</FormProvider>
</AppContent>

2
modules/customer-invoices/src/web/pages/update/index.ts
View File

@ -1 +1 @@
export * from "./customer-invoices-update";
export * from "./customer-invoices-update-page";

17
modules/customer-invoices/src/web/schemas/customer-invoices.api.schema.ts
View File

@ -1,5 +1,6 @@
import { z } from "zod/v4";
import { ArrayElement } from "@repo/rdx-utils";
import {
CreateCustomerInvoiceRequestSchema,
GetCustomerInvoiceByIdResponseSchema,
@ -7,12 +8,20 @@ import {
UpdateCustomerInvoiceByIdRequestSchema,
} from "../../common";
export const CustomerInvoiceCreateSchema = CreateCustomerInvoiceRequestSchema;
export const CustomerInvoiceUpdateSchema = UpdateCustomerInvoiceByIdRequestSchema;
// Esquemas (Zod) provenientes del servidor
export const CustomerInvoiceSchema = GetCustomerInvoiceByIdResponseSchema.omit({
metadata: true,
});
export const CustomerInvoiceCreateSchema = CreateCustomerInvoiceRequestSchema;
export const CustomerInvoiceUpdateSchema = UpdateCustomerInvoiceByIdRequestSchema;
export type CustomerInvoiceData = z.infer<typeof CustomerInvoiceSchema>;
// Tipos (derivados de Zod o DTOs del backend)
export type CustomerInvoice = z.infer<typeof CustomerInvoiceSchema>;
export type CustomerInvoiceCreateInput = z.infer<typeof CustomerInvoiceCreateSchema>; // Cuerpo para crear
export type CustomerInvoiceUpdateInput = z.infer<typeof CustomerInvoiceUpdateSchema>; // Cuerpo para actualizar
export type CustomerInvoicesListData = ListCustomerInvoicesResponseDTO;
// Resultado de consulta con criteria (paginado, etc.)
export type CustomerInvoicesPage = ListCustomerInvoicesResponseDTO;
// Ítem simplificado dentro del listado (no toda la entidad)
export type CustomerInvoiceSummary = Omit<ArrayElement<CustomerInvoicesPage["items"]>, "metadata">;

9
modules/customers/src/web/components/customer-modal-selector/customer-card.tsx
View File

@ -15,6 +15,8 @@ interface CustomerCardProps {
onViewCustomer?: () => void;
onChangeCustomer?: () => void;
onAddNewCustomer?: () => void;
className: string;
}
export const CustomerCard = ({
@ -22,6 +24,7 @@ export const CustomerCard = ({
onViewCustomer,
onChangeCustomer,
onAddNewCustomer,
className,
}: CustomerCardProps) => {
const hasAddress =
customer.street ||
@ -32,7 +35,7 @@ export const CustomerCard = ({
customer.country;
return (
<section>
<div className={className}>
<div className='flex items-start gap-4'>
{/* Avatar mejorado con gradiente sutil */}
<div className='flex size-12 items-center justify-center rounded-full bg-muted group-hover:bg-primary/15'>
@ -97,7 +100,7 @@ export const CustomerCard = ({
className='flex-1 min-w-[140px] gap-2 bg-transparent'
>
<RefreshCwIcon className='h-4 w-4' />
Cambiar cliente
Cambiar de cliente
</Button>
<Button
variant='outline'
@ -109,6 +112,6 @@ export const CustomerCard = ({
Nuevo cliente
</Button>
</div>
</section>
</div>
);
};

5
modules/customers/src/web/components/customer-modal-selector/customer-modal-selector-field.tsx
View File

@ -28,10 +28,11 @@ export function CustomerModalSelectorField<TFormValues extends FieldValues>({
control={control}
name={name}
render={({ field }) => {
console.log(field);
const { name, value, onChange, onBlur, ref } = field;
console.log({ name, value, onChange, onBlur, ref });
return (
<FormItem className={className}>
<CustomerModalSelector />
<CustomerModalSelector value={value} onValueChange={onChange} />
</FormItem>
);
}}

22
modules/customers/src/web/components/customer-modal-selector/customer-modal-selector.tsx
View File

@ -19,9 +19,16 @@ function useDebouncedValue<T>(value: T, delay = 300) {
interface CustomerModalSelectorProps {
value?: string;
onValueChange?: (id: string) => void;
initialCustomer?: CustomerSummary;
className: string;
}
export const CustomerModalSelector = ({ value, onValueChange }: CustomerModalSelectorProps) => {
export const CustomerModalSelector = ({
value,
onValueChange,
initialCustomer,
className,
}: CustomerModalSelectorProps) => {
// UI state
const [showSearch, setShowSearch] = useState(false);
const [showForm, setShowForm] = useState(false);
@ -55,8 +62,7 @@ export const CustomerModalSelector = ({ value, onValueChange }: CustomerModalSel
// Sync con `value`
useEffect(() => {
if (!value) return;
const found = customers.find((c) => c.id === value) ?? null;
const found = customers.find((c) => c.id === value) ?? initialCustomer;
setSelected(found);
}, [value, customers]);
@ -67,8 +73,7 @@ export const CustomerModalSelector = ({ value, onValueChange }: CustomerModalSel
...newClient,
};
setLocalCreated((prev) => [newCustomer, ...prev]);
setSelected(newCustomer);
onValueChange?.(newCustomer.id);
onValueChange?.(newCustomer.id); // <- ahora el "source of truth" es React Hook Form
setShowForm(false);
setShowSearch(false);
};
@ -77,9 +82,14 @@ export const CustomerModalSelector = ({ value, onValueChange }: CustomerModalSel
<>
<div>
{selected ? (
<CustomerCard customer={selected} onChangeCustomer={() => setShowSearch(true)} />
<CustomerCard
className={className}
customer={selected}
onChangeCustomer={() => setShowSearch(true)}
/>
) : (
<CustomerEmptyCard
className={className}
onClick={() => setShowSearch(true)}
onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && setShowSearch(true)}
/>

62
modules/customers/src/web/components/customers-list-grid.tsx
View File

@ -1,5 +1,5 @@
import { AG_GRID_LOCALE_ES } from "@ag-grid-community/locale";
import type { ValueFormatterParams } from "ag-grid-community";
import type { CellKeyDownEvent, RowClickedEvent, ValueFormatterParams } from "ag-grid-community";
import {
ColDef,
GridOptions,
@ -7,7 +7,7 @@ import {
SizeColumnsToFitGridStrategy,
SizeColumnsToFitProvidedWidthStrategy,
} from "ag-grid-community";
import { useMemo, useState } from "react";
import { useCallback, useMemo, useState } from "react";
import { ErrorOverlay } from "@repo/rdx-ui/components";
import { Button } from "@repo/shadcn-ui/components";
@ -35,7 +35,7 @@ export const CustomersListGrid = () => {
});
// Column Definitions: Defines & controls grid columns.
const [colDefs] = useState<ColDef[]>([
const [columnDefs] = useState<ColDef[]>([
{ field: "name", headerName: t("pages.list.grid_columns.name"), minWidth: 300 },
{
field: "tin",
@ -90,6 +90,47 @@ export const CustomersListGrid = () => {
},
]);
// Navegación centralizada (click/teclado)
const goToRow = useCallback(
(id: string, newTab = false) => {
const url = `/customers/${id}`;
if (newTab) {
window.open(url, "_blank", "noopener,noreferrer");
} else {
navigate(url);
}
},
[navigate]
);
const onRowClicked = useCallback(
(e: RowClickedEvent<unknown>) => {
if (!e.data) return;
// Soporta Ctrl/Cmd click para nueva pestaña
const newTab = e.event instanceof MouseEvent && (e.event.metaKey || e.event.ctrlKey);
goToRow(e.data.id, newTab);
},
[goToRow]
);
const onCellKeyDown = useCallback(
(e: CellKeyDownEvent<unknown>) => {
if (!e.data) return;
const key = e.event.key;
// Enter o Space disparan navegación
if (key === "Enter" || key === " ") {
e.event.preventDefault();
goToRow(e.data.id);
}
// Ctrl/Cmd+Enter abre en nueva pestaña
if ((e.event.ctrlKey || e.event.metaKey) && key === "Enter") {
e.event.preventDefault();
goToRow(e.data.id, true);
}
},
[goToRow]
);
const autoSizeStrategy = useMemo<
| SizeColumnsToFitGridStrategy
| SizeColumnsToFitProvidedWidthStrategy
@ -104,7 +145,7 @@ export const CustomersListGrid = () => {
const gridOptions: GridOptions = useMemo(
() => ({
columnDefs: colDefs,
columnDefs: columnDefs,
autoSizeStrategy: autoSizeStrategy,
defaultColDef: {
editable: false,
@ -117,8 +158,19 @@ export const CustomersListGrid = () => {
paginationPageSize: 15,
paginationPageSizeSelector: [10, 15, 20, 30, 50],
localeText: AG_GRID_LOCALE_ES,
// Evita conflictos con selección si la usas
suppressRowClickSelection: true,
// Clase visual de fila clickeable
getRowClass: () => "clickable-row",
// Accesibilidad con teclado
onCellKeyDown,
// Click en cualquier parte de la fila
onRowClicked,
// IDs estables (opcional pero recomendado)
getRowId: (params) => params.data.id,
}),
[autoSizeStrategy, colDefs]
[autoSizeStrategy, columnDefs, onCellKeyDown, onRowClicked]
);
if (isLoadError) {

3
modules/customers/src/web/components/editor/customer-edit-form.tsx
View File

@ -5,7 +5,6 @@ import { CustomerFormData } from "../../schemas";
import { CustomerAdditionalConfigFields } from "./customer-additional-config-fields";
import { CustomerAddressFields } from "./customer-address-fields";
import { CustomerBasicInfoFields } from "./customer-basic-info-fields";
import { CustomerContactFields } from "./customer-contact-fields";
interface CustomerFormProps {
formId: string;
@ -25,7 +24,7 @@ export const CustomerEditForm = ({ formId, onSubmit, onError }: CustomerFormProp
<div className='w-full xl:grow space-y-6'>
<CustomerBasicInfoFields />
<CustomerAddressFields />
<CustomerContactFields />
<CustomerAddressFields />
<CustomerAdditionalConfigFields />
</div>
</div>

9
modules/customers/src/web/customer-routes.tsx
View File

@ -1,7 +1,7 @@
import { ModuleClientParams } from "@erp/core/client";
import { lazy } from "react";
import { Outlet, RouteObject } from "react-router-dom";
import { CustomerUpdate } from "./pages/update";
import { CustomerUpdatePage } from "./pages/update";
// Lazy load components
const CustomersLayout = lazy(() =>
@ -9,8 +9,8 @@ const CustomersLayout = lazy(() =>
);
const CustomersList = lazy(() => import("./pages").then((m) => ({ default: m.CustomersList })));
const CustomerAdd = lazy(() => import("./pages").then((m) => ({ default: m.CustomerCreate })));
const CustomerView = lazy(() => import("./pages").then((m) => ({ default: m.CustomerViewPage })));
const CustomerAdd = lazy(() => import("./pages").then((m) => ({ default: m.CustomerCreatePage })));
export const CustomerRoutes = (params: ModuleClientParams): RouteObject[] => {
return [
@ -25,7 +25,8 @@ export const CustomerRoutes = (params: ModuleClientParams): RouteObject[] => {
{ path: "", index: true, element: <CustomersList /> }, // index
{ path: "list", element: <CustomersList /> },
{ path: "create", element: <CustomerAdd /> },
{ path: ":id/edit", element: <CustomerUpdate /> },
{ path: ":id", element: <CustomerView /> },
{ path: ":id/edit", element: <CustomerUpdatePage /> },
//
/*{ path: "create", element: <CustomersList /> },

2
modules/customers/src/web/pages/create/customer-create.tsx → modules/customers/src/web/pages/create/customer-create-page.tsx
View File

@ -9,7 +9,7 @@ import { useCreateCustomer } from "../../hooks";
import { useTranslation } from "../../i18n";
import { CustomerFormData, CustomerFormSchema, defaultCustomerFormData } from "../../schemas";
export const CustomerCreate = () => {
export const CustomerCreatePage = () => {
const { t } = useTranslation();
const navigate = useNavigate();

2
modules/customers/src/web/pages/create/index.ts
View File

@ -1 +1 @@
export * from "./customer-create";
export * from "./customer-create-page";

1
modules/customers/src/web/pages/index.ts
View File

@ -1,2 +1,3 @@
export * from "./create";
export * from "./customer-list";
export * from "./view";

168
modules/customers/src/web/pages/update/customer-update-modal.tsx Normal file
View File

@ -0,0 +1,168 @@
import {
Button,
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@repo/shadcn-ui/components";
import { X } from "lucide-react";
import { FieldErrors, FormProvider } from "react-hook-form";
import { CustomerAdditionalConfigFields } from "../../components/editor/customer-additional-config-fields";
import { CustomerAddressFields } from "../../components/editor/customer-address-fields";
import { CustomerBasicInfoFields } from "../../components/editor/customer-basic-info-fields";
import { useNavigate } from "react-router-dom";
import { formHasAnyDirty, pickFormDirtyValues } from "@erp/core/client";
import { UnsavedChangesProvider, useHookForm } from "@erp/core/hooks";
import { showErrorToast, showSuccessToast, showWarningToast } from "@repo/rdx-ui/helpers";
import { CustomerEditorSkeleton } from "../../components";
import { useCustomerQuery, useUpdateCustomer } from "../../hooks";
import { useTranslation } from "../../i18n";
import { CustomerFormData, CustomerFormSchema, defaultCustomerFormData } from "../../schemas";
interface CustomerEditModalProps {
customerId: string;
open: boolean;
onOpenChange: (open: boolean) => void;
}
export function CustomerEditModal({ customerId, open, onOpenChange }: CustomerEditModalProps) {
const { t } = useTranslation();
const navigate = useNavigate();
// 1) Estado de carga del cliente (query)
const {
data: customerData,
isLoading: isLoadingCustomer,
isError: isLoadError,
error: loadError,
} = useCustomerQuery(customerId, { enabled: !!customerId });
// 2) Estado de actualización (mutación)
const {
mutate,
isPending: isUpdating,
isError: isUpdateError,
error: updateError,
} = useUpdateCustomer();
// 3) Form hook
const form = useHookForm<CustomerFormData>({
resolverSchema: CustomerFormSchema,
initialValues: customerData ?? defaultCustomerFormData,
disabled: isUpdating,
});
// 4) Submit con navegación condicionada por éxito
const handleSubmit = (formData: CustomerFormData) => {
const { dirtyFields } = form.formState;
if (!formHasAnyDirty(dirtyFields)) {
showWarningToast("No hay cambios para guardar");
return;
}
const patchData = pickFormDirtyValues(formData, dirtyFields);
mutate(
{ id: customerId!, data: patchData },
{
onSuccess(data) {
showSuccessToast(t("pages.update.successTitle"), t("pages.update.successMsg"));
// 🔹 limpiar el form e isDirty pasa a false
form.reset(data);
},
onError(error) {
showErrorToast(t("pages.update.errorTitle"), error.message);
},
}
);
};
const handleReset = () => form.reset(customerData ?? defaultCustomerFormData);
const handleBack = () => {
navigate(-1);
};
const handleError = (errors: FieldErrors<CustomerFormData>) => {
console.error("Errores en el formulario:", errors);
// Aquí puedes manejar los errores, por ejemplo, mostrar un mensaje al usuario
};
if (isLoadingCustomer || isLoadError) {
return <CustomerEditorSkeleton />;
}
return (
<UnsavedChangesProvider isDirty={form.formState.isDirty}>
<FormProvider {...form}>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className='max-h-[90vh] max-w-3xl overflow-hidden p-0'>
<DialogHeader className='border-b px-6 py-4'>
<div className='flex items-center justify-between'>
<div>
<DialogTitle className='text-xl'>Editar Cliente</DialogTitle>
<DialogDescription className='mt-1'>
Modifica la información del cliente
</DialogDescription>
</div>
<Button
variant='ghost'
size='icon'
onClick={() => onOpenChange(false)}
className='h-8 w-8'
>
<X className='h-4 w-4' />
</Button>
</div>
</DialogHeader>
<Tabs defaultValue='basic' className='flex h-full flex-col'>
<TabsList className='mx-6 mt-4 grid w-auto grid-cols-4 gap-2'>
<TabsTrigger value='basic'>Información Básica</TabsTrigger>
<TabsTrigger value='address'>Dirección</TabsTrigger>
<TabsTrigger value='contact'>Contacto</TabsTrigger>
<TabsTrigger value='preferences'>Preferencias</TabsTrigger>
</TabsList>
<div className='flex-1 overflow-y-auto px-6 py-4'>
<TabsContent value='basic' className='mt-0'>
<CustomerBasicInfoFields />
</TabsContent>
<TabsContent value='address' className='mt-0'>
<CustomerAddressFields />
</TabsContent>
<TabsContent value='contact' className='mt-0'>
<CustomerAddressFields />
</TabsContent>
<TabsContent value='preferences' className='mt-0'>
<CustomerAdditionalConfigFields />
</TabsContent>
</div>
<div className='border-t px-6 py-4'>
<div className='flex justify-end gap-3'>
<Button variant='outline' onClick={() => onOpenChange(false)}>
Cancelar
</Button>
<Button onClick={handleSave}>Guardar</Button>
</div>
</div>
</Tabs>
</DialogContent>
</Dialog>
</FormProvider>
</UnsavedChangesProvider>
);
}

2
modules/customers/src/web/pages/update/customer-update.tsx → modules/customers/src/web/pages/update/customer-update-page.tsx
View File

@ -20,7 +20,7 @@ import { useCustomerQuery, useUpdateCustomer } from "../../hooks";
import { useTranslation } from "../../i18n";
import { CustomerFormData, CustomerFormSchema, defaultCustomerFormData } from "../../schemas";
export const CustomerUpdate = () => {
export const CustomerUpdatePage = () => {
const customerId = useUrlParamId();
const { t } = useTranslation();
const navigate = useNavigate();

3
modules/customers/src/web/pages/update/index.ts
View File

@ -1 +1,2 @@
export * from "./customer-update";
export * from "./customer-update-modal";
export * from "./customer-update-page";

341
modules/customers/src/web/pages/view/customer-view-page.tsx Normal file
View File

@ -0,0 +1,341 @@
import { AppBreadcrumb, AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
import { Button, Card, CardContent, CardHeader, CardTitle } from "@repo/shadcn-ui/components";
import {
Banknote,
Building2,
EditIcon,
FileText,
Globe,
Languages,
Mail,
MapPin,
MoreVertical,
Phone,
Smartphone,
User,
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useUrlParamId } from "@erp/core/hooks";
import { Badge } from "@repo/shadcn-ui/components";
import { CustomerEditorSkeleton, ErrorAlert } from "../../components";
import { useCustomerQuery } from "../../hooks";
import { useTranslation } from "../../i18n";
export const CustomerViewPage = () => {
const customerId = useUrlParamId();
const { t } = useTranslation();
const navigate = useNavigate();
// 1) Estado de carga del cliente (query)
const {
data: customer,
isLoading: isLoadingCustomer,
isError: isLoadError,
error: loadError,
} = useCustomerQuery(customerId, { enabled: !!customerId });
if (isLoadingCustomer) {
return <CustomerEditorSkeleton />;
}
if (isLoadError) {
return (
<>
<AppBreadcrumb />
<AppContent>
<ErrorAlert
title={t("pages.update.loadErrorTitle", "No se pudo cargar el cliente")}
message={
(loadError as Error)?.message ??
t("pages.update.loadErrorMsg", "Inténtalo de nuevo más tarde.")
}
/>
<div className='flex items-center justify-end'>
<BackHistoryButton />
</div>
</AppContent>
</>
);
}
return (
<>
<AppBreadcrumb />
<AppContent>
<div className='space-y-6 max-w-4xl'>
{/* Header */}
<div className='flex items-start justify-between'>
<div className='flex items-start gap-4'>
<div className='flex h-16 w-16 items-center justify-center rounded-lg bg-primary/10'>
{customer?.is_company ? (
<Building2 className='h-8 w-8 text-primary' />
) : (
<User className='h-8 w-8 text-primary' />
)}
</div>
<div>
<h1 className='text-3xl font-bold text-foreground'>{customer?.name}</h1>
<div className='mt-2 flex items-center gap-3'>
<Badge variant='secondary' className='font-mono'>
{customer?.reference}
</Badge>
<Badge variant='outline'>{customer?.is_company ? "Empresa" : "Persona"}</Badge>
</div>
</div>
</div>
<div className='flex gap-2'>
<Button variant='outline' size='icon' onClick={() => navigate("/customers/list")}>
<MoreVertical className='h-4 w-4' />
</Button>
<Button>
<EditIcon className='mr-2 h-4 w-4' />
Editar
</Button>
</div>
</div>
{/* Main Content Grid */}
<div className='grid gap-6 md:grid-cols-2'>
{/* Información Básica */}
<Card>
<CardHeader>
<CardTitle className='flex items-center gap-2 text-lg'>
<FileText className='h-5 w-5 text-primary' />
Información Básica
</CardTitle>
</CardHeader>
<CardContent className='space-y-4'>
<div>
<dt className='text-sm font-medium text-muted-foreground'>Nombre</dt>
<dd className='mt-1 text-base text-foreground'>{customer?.name}</dd>
</div>
<div>
<dt className='text-sm font-medium text-muted-foreground'>Referencia</dt>
<dd className='mt-1 font-mono text-base text-foreground'>
{customer?.reference}
</dd>
</div>
<div>
<dt className='text-sm font-medium text-muted-foreground'>Registro Legal</dt>
<dd className='mt-1 text-base text-foreground'>{customer?.legalRecord}</dd>
</div>
<div>
<dt className='text-sm font-medium text-muted-foreground'>
Impuestos por Defecto
</dt>
<dd className='mt-1'>
<Badge className='bg-blue-600 hover:bg-blue-700'>{customer?.defaultTax}</Badge>
</dd>
</div>
</CardContent>
</Card>
{/* Dirección */}
<Card>
<CardHeader>
<CardTitle className='flex items-center gap-2 text-lg'>
<MapPin className='h-5 w-5 text-primary' />
Dirección
</CardTitle>
</CardHeader>
<CardContent className='space-y-4'>
<div>
<dt className='text-sm font-medium text-muted-foreground'>Calle</dt>
<dd className='mt-1 text-base text-foreground'>
{customer?.street1}
{customer?.street2 && (
<>
<br />
{customer?.street2}
</>
)}
</dd>
</div>
<div className='grid grid-cols-2 gap-4'>
<div>
<dt className='text-sm font-medium text-muted-foreground'>Ciudad</dt>
<dd className='mt-1 text-base text-foreground'>{customer?.city}</dd>
</div>
<div>
<dt className='text-sm font-medium text-muted-foreground'>Código Postal</dt>
<dd className='mt-1 text-base text-foreground'>{customer?.postal_code}</dd>
</div>
</div>
<div className='grid grid-cols-2 gap-4'>
<div>
<dt className='text-sm font-medium text-muted-foreground'>Provincia</dt>
<dd className='mt-1 text-base text-foreground'>{customer?.province}</dd>
</div>
<div>
<dt className='text-sm font-medium text-muted-foreground'>País</dt>
<dd className='mt-1 text-base text-foreground'>{customer?.country}</dd>
</div>
</div>
</CardContent>
</Card>
{/* Información de Contacto */}
<Card className='md:col-span-2'>
<CardHeader>
<CardTitle className='flex items-center gap-2 text-lg'>
<Mail className='h-5 w-5 text-primary' />
Información de Contacto
</CardTitle>
</CardHeader>
<CardContent>
<div className='grid gap-6 md:grid-cols-2'>
{/* Contacto Principal */}
<div className='space-y-4'>
<h3 className='font-semibold text-foreground'>Contacto Principal</h3>
{customer?.email_primary && (
<div className='flex items-start gap-3'>
<Mail className='mt-0.5 h-4 w-4 text-muted-foreground' />
<div className='flex-1'>
<dt className='text-sm font-medium text-muted-foreground'>Email</dt>
<dd className='mt-1 text-base text-foreground'>
{customer?.email_primary}
</dd>
</div>
</div>
)}
{customer?.mobile_primary && (
<div className='flex items-start gap-3'>
<Smartphone className='mt-0.5 h-4 w-4 text-muted-foreground' />
<div className='flex-1'>
<dt className='text-sm font-medium text-muted-foreground'>Móvil</dt>
<dd className='mt-1 text-base text-foreground'>
{customer?.mobile_primary}
</dd>
</div>
</div>
)}
{customer?.phone_primary && (
<div className='flex items-start gap-3'>
<Phone className='mt-0.5 h-4 w-4 text-muted-foreground' />
<div className='flex-1'>
<dt className='text-sm font-medium text-muted-foreground'>Teléfono</dt>
<dd className='mt-1 text-base text-foreground'>
{customer?.phone_primary}
</dd>
</div>
</div>
)}
</div>
{/* Contacto Secundario */}
<div className='space-y-4'>
<h3 className='font-semibold text-foreground'>Contacto Secundario</h3>
{customer?.email_secondary && (
<div className='flex items-start gap-3'>
<Mail className='mt-0.5 h-4 w-4 text-muted-foreground' />
<div className='flex-1'>
<dt className='text-sm font-medium text-muted-foreground'>Email</dt>
<dd className='mt-1 text-base text-foreground'>
{customer?.email_secondary}
</dd>
</div>
</div>
)}
{customer?.mobile_secondary && (
<div className='flex items-start gap-3'>
<Smartphone className='mt-0.5 h-4 w-4 text-muted-foreground' />
<div className='flex-1'>
<dt className='text-sm font-medium text-muted-foreground'>Móvil</dt>
<dd className='mt-1 text-base text-foreground'>
{customer?.mobile_secondary}
</dd>
</div>
</div>
)}
{customer?.phone_secondary && (
<div className='flex items-start gap-3'>
<Phone className='mt-0.5 h-4 w-4 text-muted-foreground' />
<div className='flex-1'>
<dt className='text-sm font-medium text-muted-foreground'>Teléfono</dt>
<dd className='mt-1 text-base text-foreground'>
{customer?.phone_secondary}
</dd>
</div>
</div>
)}
</div>
{/* Otros Contactos */}
{(customer?.website || customer?.fax) && (
<div className='space-y-4 md:col-span-2'>
<h3 className='font-semibold text-foreground'>Otros</h3>
<div className='grid gap-4 md:grid-cols-2'>
{customer?.website && (
<div className='flex items-start gap-3'>
<Globe className='mt-0.5 h-4 w-4 text-muted-foreground' />
<div className='flex-1'>
<dt className='text-sm font-medium text-muted-foreground'>
Sitio Web
</dt>
<dd className='mt-1 text-base text-primary hover:underline'>
<a
href={customer?.website}
target='_blank'
rel='noopener noreferrer'
>
{customer?.website}
</a>
</dd>
</div>
</div>
)}
{customer?.fax && (
<div className='flex items-start gap-3'>
<Phone className='mt-0.5 h-4 w-4 text-muted-foreground' />
<div className='flex-1'>
<dt className='text-sm font-medium text-muted-foreground'>Fax</dt>
<dd className='mt-1 text-base text-foreground'>{customer?.fax}</dd>
</div>
</div>
)}
</div>
</div>
)}
</div>
</CardContent>
</Card>
{/* Preferencias */}
<Card className='md:col-span-2'>
<CardHeader>
<CardTitle className='flex items-center gap-2 text-lg'>
<Languages className='h-5 w-5 text-primary' />
Preferencias
</CardTitle>
</CardHeader>
<CardContent>
<div className='grid gap-6 md:grid-cols-2'>
<div className='flex items-start gap-3'>
<Languages className='mt-0.5 h-4 w-4 text-muted-foreground' />
<div className='flex-1'>
<dt className='text-sm font-medium text-muted-foreground'>
Idioma Preferido
</dt>
<dd className='mt-1 text-base text-foreground'>{customer?.language_code}</dd>
</div>
</div>
<div className='flex items-start gap-3'>
<Banknote className='mt-0.5 h-4 w-4 text-muted-foreground' />
<div className='flex-1'>
<dt className='text-sm font-medium text-muted-foreground'>
Moneda Preferida
</dt>
<dd className='mt-1 text-base text-foreground'>{customer?.currency_code}</dd>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</AppContent>
</>
);
};

1
modules/customers/src/web/pages/view/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./customer-view-page";

180
packages/rdx-ui/src/components/form/DatePickerInputField.tsx
View File

@ -1,180 +0,0 @@
import {
Calendar,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
Popover,
PopoverContent,
PopoverTrigger,
} from "@repo/shadcn-ui/components";
import { CalendarIcon, LockIcon, XIcon } from "lucide-react";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { format, isValid, parse } from "date-fns";
import { useState } from "react";
import { Control, FieldPath, FieldValues } from "react-hook-form";
import { useTranslation } from "../../locales/i18n.ts";
type DatePickerInputFieldProps<TFormValues extends FieldValues> = {
control: Control<TFormValues>;
name: FieldPath<TFormValues>;
label: string;
placeholder?: string;
description?: string;
disabled?: boolean;
required?: boolean;
readOnly?: boolean;
className?: string;
formatDateFn?: (iso: string) => string;
parseDateFormat?: string; // e.g. "dd/MM/yyyy"
};
export function DatePickerInputField<TFormValues extends FieldValues>({
control,
name,
label,
placeholder,
description,
disabled = false,
required = false,
readOnly = false,
className,
formatDateFn = (iso) => format(new Date(iso), "dd/MM/yyyy"),
parseDateFormat = "dd/MM/yyyy",
}: DatePickerInputFieldProps<TFormValues>) {
const { t } = useTranslation();
const isDisabled = disabled;
const isReadOnly = readOnly && !disabled;
return (
<FormField
control={control}
name={name}
render={({ field }) => {
const [inputValue, setInputValue] = useState<string>(
field.value ? formatDateFn(field.value) : ""
);
const [inputError, setInputError] = useState<string | null>(null);
const handleInputChange = (value: string) => {
setInputValue(value);
setInputError(null);
};
const validateAndSetDate = () => {
const trimmed = inputValue.trim();
if (!trimmed) {
field.onChange(undefined);
setInputError(null);
return;
}
const parsed = parse(trimmed, parseDateFormat, new Date());
if (isValid(parsed)) {
field.onChange(parsed.toISOString());
setInputError(null);
} else {
setInputError(t("common.invalidDate") || "Fecha no válida");
}
};
return (
<FormItem className={cn("space-y-0", className)}>
<div className='flex justify-between items-center'>
<FormLabel className='m-0'>{label}</FormLabel>
{required && <span className='text-xs text-destructive'>{t("common.required")}</span>}
</div>
<Popover>
<PopoverTrigger asChild>
<FormControl>
<div className='relative'>
<input
type='text'
value={inputValue}
onChange={(e) => handleInputChange(e.target.value)}
onBlur={validateAndSetDate}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
validateAndSetDate();
}
}}
readOnly={isReadOnly}
disabled={isDisabled}
className={cn(
"w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring placeholder:font-normal placeholder:italic",
isDisabled && "bg-muted text-muted-foreground cursor-not-allowed",
isReadOnly && "bg-muted text-foreground cursor-default",
!isDisabled && !isReadOnly && "bg-white text-foreground",
inputError && "border-destructive ring-destructive"
)}
placeholder={placeholder}
/>
<div className='absolute inset-y-0 right-2 flex items-center gap-2 pr-1'>
{!isReadOnly && !required && inputValue && (
<button
type='button'
onClick={() => {
setInputValue("");
field.onChange(undefined);
setInputError(null);
}}
aria-label={t("common.clearDate") || "Limpiar fecha"}
className='text-muted-foreground hover:text-foreground focus:outline-none'
>
<XIcon className='size-4 hover:text-destructive' />
</button>
)}
{isReadOnly ? (
<LockIcon className='size-4 text-muted-foreground' />
) : (
<CalendarIcon className='size-4 text-muted-foreground hover:text-primary hover:cursor-pointer' />
)}
</div>
</div>
</FormControl>
</PopoverTrigger>
{!isDisabled && !isReadOnly && (
<PopoverContent className='w-auto p-0'>
<Calendar
mode='single'
selected={field.value ? new Date(field.value) : undefined}
onSelect={(date) => {
if (date) {
const iso = date.toISOString();
field.onChange(iso);
setInputValue(formatDateFn(iso));
setInputError(null);
} else {
field.onChange(undefined);
setInputValue("");
}
}}
initialFocus
/>
</PopoverContent>
)}
</Popover>
{isReadOnly && (
<p className='text-xs text-muted-foreground italic mt-1 flex items-center gap-1'>
<LockIcon className='w-3 h-3' /> {t("common.readOnly") || "Solo lectura"}
</p>
)}
<FormDescription className={cn("text-xs truncate", !description && "invisible")}>
{description || "\u00A0"}
</FormDescription>
<FormMessage />
</FormItem>
);
}}
/>
);
}

46
packages/rdx-ui/src/components/form/TextAreaField.tsx
View File

@ -11,10 +11,11 @@ import {
} from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { Control, FieldPath, FieldValues } from "react-hook-form";
import { Control, FieldPath, FieldValues, useController } from "react-hook-form";
import { useTranslation } from "../../locales/i18n.ts";
import { CommonInputProps } from "./types.js";
type TextAreaFieldProps<TFormValues extends FieldValues> = {
type TextAreaFieldProps<TFormValues extends FieldValues> = CommonInputProps & {
control: Control<TFormValues>;
name: FieldPath<TFormValues>;
label?: string;
@ -24,6 +25,9 @@ type TextAreaFieldProps<TFormValues extends FieldValues> = {
required?: boolean;
readOnly?: boolean;
className?: string;
/** Contador de caracteres (si usas maxLength) */
showCounter?: boolean;
};
export function TextAreaField<TFormValues extends FieldValues>({
@ -36,9 +40,17 @@ export function TextAreaField<TFormValues extends FieldValues>({
required = false,
readOnly = false,
className,
showCounter = false,
maxLength,
}: TextAreaFieldProps<TFormValues>) {
const { t } = useTranslation();
const isDisabled = disabled || readOnly;
const { field, fieldState } = useController({ control, name });
const describedById = description ? `${name}-desc` : undefined;
const errorId = fieldState.error ? `${name}-err` : undefined;
const valueLength = (field.value?.length ?? 0) as number;
return (
<FormField
@ -49,13 +61,20 @@ export function TextAreaField<TFormValues extends FieldValues>({
{label && (
<div className='mb-1 flex justify-between gap-2'>
<div className='flex items-center gap-2'>
<FormLabel htmlFor={name} className='m-0'>
<FormLabel
htmlFor={name}
className={cn("m-0", disabled ? "text-muted-foreground" : "")}
>
{label}
</FormLabel>
{required && (
<span className='text-xs text-destructive'>{t("common.required")}</span>
)}
</div>
{/* Punto “unsaved” */}
{fieldState.isDirty && (
<span className='text-[10px] text-muted-foreground'>{t("common.modified")}</span>
)}
</div>
)}
<FormControl>
@ -63,14 +82,27 @@ export function TextAreaField<TFormValues extends FieldValues>({
disabled={isDisabled}
placeholder={placeholder}
className={"placeholder:font-normal placeholder:italic bg-background"}
maxLength={maxLength}
{...field}
/>
</FormControl>
<FormDescription className={cn("text-xs truncate", !description && "invisible")}>
{description || "\u00A0"}
</FormDescription>
<FormMessage />
<div className='mt-1 flex items-start justify-between'>
<FormDescription
id={describedById}
className={cn("text-xs truncate", !description && "invisible")}
>
{description || "\u00A0"}
</FormDescription>
{showCounter && typeof maxLength === "number" && (
<p className='text-xs text-muted-foreground'>
{valueLength} / {maxLength}
</p>
)}
</div>
<FormMessage id={errorId} />
</FormItem>
)}
/>

7
packages/rdx-ui/src/components/form/TextField.tsx
View File

@ -12,6 +12,7 @@ import { cn } from "@repo/shadcn-ui/lib/utils";
import { CheckIcon, Loader2Icon, XIcon } from "lucide-react";
import { Control, FieldPath, FieldValues, useController, useFormState } from "react-hook-form";
import { useTranslation } from "../../locales/i18n.ts";
import { CommonInputProps } from "./types.js";
/**
*
@ -73,11 +74,6 @@ import { useTranslation } from "../../locales/i18n.ts";
/** Presets de comportamiento */
type TextFieldTypePreset = "text" | "email" | "phone" | "number" | "password";
type CommonInputProps = Omit<
React.InputHTMLAttributes<HTMLInputElement>,
"name" | "value" | "onChange" | "onBlur" | "ref" | "type"
>;
type Normalizer = (value: string) => string;
type TextFieldProps<TFormValues extends FieldValues> = CommonInputProps & {
@ -346,6 +342,7 @@ export function TextField<TFormValues extends FieldValues>({
)}
</div>
)}
<FormControl>
<div className={cn("relative")}>
{/* Prefix clicable (si tiene onClick) */}

268
packages/rdx-ui/src/components/form/date-picker-input-field/date-picker-input-comp.tsx Normal file
View File

@ -0,0 +1,268 @@
import {
Button,
Calendar,
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
FormControl,
FormDescription,
FormItem,
FormLabel,
FormMessage,
Popover,
PopoverContent,
PopoverTrigger,
} from "@repo/shadcn-ui/components";
import { CalendarIcon, LockIcon, XIcon } from "lucide-react";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { format, isValid, parse } from "date-fns";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { useTranslation } from "../../../locales/i18n.ts";
import { ControllerFieldState, ControllerRenderProps, UseFormStateReturn } from "react-hook-form";
export type SUICalendarProps = Omit<React.ComponentProps<
typeof Calendar>, "select" | "onSelect">
type DatePickerInputCompProps<TFormValues extends FieldValues> = SUICalendarProps & {
field: ControllerRenderProps<TFormValues>;
fieldState: ControllerFieldState;
formState: UseFormStateReturn<TFormValues>;
displayDateFormat: string; // e.g. "dd/MM/yyyy"
parseDateFormat: string; // e.g. "yyyy/MM/dd"
label: string;
placeholder?: string;
description?: string;
disabled?: boolean;
required?: boolean;
readOnly?: boolean;
className?: string;
};
export function DatePickerInputComp<TFormValues extends FieldValues>({
field,
fieldState,
formState,
parseDateFormat,
displayDateFormat,
label,
placeholder,
description,
disabled = false,
required = false,
readOnly = false,
className,
...calendarProps
}: DatePickerInputCompProps<TFormValues>) {
const { t } = useTranslation();
const isDisabled = disabled;
const isReadOnly = readOnly && !disabled;
const describedById = description ? `${field.name}-desc` : undefined;
const errorId = fieldState.error ? `${field.name}-err` : undefined;
const [open, setOpen] = useState(false); // Popover
const [displayValue, setDisplayValue] = useState<string>("");
// Sync cuando RHF actualiza el valor externamente
useEffect(() => {
if (field.value) {
// field.value ya viene en formato parseDateFormat
console.log(field.value, parseDateFormat);
const parsed = parse(field.value, parseDateFormat, new Date());
console.log("parsed =>", parsed);
if (isValid(parsed)) {
setDisplayValue(format(parsed, displayDateFormat));
}
} else {
setDisplayValue("");
}
}, [field.value, parseDateFormat, displayDateFormat]);
const [inputError, setInputError] = useState<string | null>(null);
const handleDisplayValueChange = (value: string) => {
console.log("handleDisplayValueChange => ", value)
setDisplayValue(value);
setInputError(null);
};
const handleClearDate = () => {
handleDisplayValueChange("");
}
const validateAndSetDate = () => {
const trimmed = displayValue.trim();
if (!trimmed) {
field.onChange(""); // guardar vacío en el form
setInputError(null);
return;
}
const parsed = parse(trimmed, displayDateFormat, new Date());
if (isValid(parsed)) {
// Guardar en form como string con parseDateFormat
const newDateStr = format(parsed, parseDateFormat);
field.onChange(newDateStr);
// Asegurar displayValue consistente
handleDisplayValueChange(newDateStr);
} else {
setInputError(t("components.date_picker_input_field.invalid_date"));
}
};
return (
<FormItem className={cn("space-y-0", className)}>
{label && (
<div className='mb-1 flex justify-between gap-2'>
<div className='flex items-center gap-2'>
<FormLabel
htmlFor={field.name}
className={cn("m-0", disabled ? "text-muted-foreground" : "")}
>
{label}
</FormLabel>
{required && <span className='text-xs text-destructive'>{t("common.required")}</span>}
</div>
{/* Punto “unsaved” */}
{fieldState.isDirty && (
<span className='text-[10px] text-muted-foreground'>{t("common.modified")}</span>
)}
</div>
)}
<Popover modal={true} open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<FormControl>
<div className='relative'>
<input
type='text'
value={displayValue}
onChange={(e) => handleDisplayValueChange(e.target.value)}
onBlur={() => { if (!open) validateAndSetDate(); }}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
validateAndSetDate();
}
}}
readOnly={isReadOnly}
disabled={isDisabled}
className={cn(
"w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring placeholder:font-normal placeholder:italic",
isDisabled && "bg-muted text-muted-foreground cursor-not-allowed",
isReadOnly && "bg-muted text-foreground cursor-default",
!isDisabled && !isReadOnly && "bg-white text-foreground",
inputError && "border-destructive ring-destructive"
)}
placeholder={placeholder}
/>
<div className='absolute inset-y-0 right-2 flex items-center gap-2 pr-1'>
{!isReadOnly && !required && displayValue && (
<button
type='button'
onClick={(e) => {
e.preventDefault();
field.onChange(""); // limpiar valor real en el form
setDisplayValue(""); // limpiar input visible
setInputError(null); // limpiar error
}} aria-label={t("common.clear_date")}
className='text-muted-foreground hover:text-foreground focus:outline-none'
>
<XIcon className='size-4 hover:text-destructive' />
</button>
)}
{isReadOnly ? (
<LockIcon className='size-4 text-muted-foreground' />
) : (
<CalendarIcon className='size-4 text-muted-foreground hover:text-primary hover:cursor-pointer' />
)}
</div>
</div>
</FormControl>
</PopoverTrigger>
{!isDisabled && !isReadOnly && (
<PopoverContent className='w-auto p-0'>
<Card className='border-none shadow-none'>
<CardHeader className="border-b">
<CardTitle>{label}</CardTitle>
<CardDescription>{description || "\u00A0"}</CardDescription>
<CardAction>
<Button
size="sm"
variant="outline"
onClick={(e) => {
e.preventDefault();
const today = format(new Date(), parseDateFormat);
field.onChange(today);
handleDisplayValueChange(today);
setOpen(false);
}}
>
{t("components.date_picker_input_field.today")}
</Button>
</CardAction>
</CardHeader>
<CardContent>
<Calendar
defaultMonth={field.value ? new Date(field.value) : undefined}
{...calendarProps}
mode='single'
selected={field.value ? new Date(field.value) : undefined}
onSelect={(date) => {
const newDateStr = date ? format(date, parseDateFormat) : "";
field.onChange(newDateStr);
handleDisplayValueChange(newDateStr);
setOpen(false);
}}
initialFocus
/>
</CardContent>
<CardFooter className='mx-auto'>
<Button
size="sm"
variant="outline"
onClick={(e) => {
e.preventDefault();
setOpen(false);
}}
>
{t("components.date_picker_input_field.close")}
</Button>
</CardFooter>
</Card>
</PopoverContent>
)}
</Popover>
{isReadOnly && (
<p className='text-xs text-muted-foreground italic mt-1 flex items-center gap-1'>
<LockIcon className='w-3 h-3' /> {t("common.read_only") || "Solo lectura"}
</p>
)}
<div className='mt-1 flex items-start justify-between'>
<FormDescription
id={describedById}
className={cn("text-xs truncate", !description && "invisible")}
>
{description || "\u00A0"}
</FormDescription>
</div>
<FormMessage id={errorId} />
</FormItem>
);
}

43
packages/rdx-ui/src/components/form/date-picker-input-field/date-picker-input-field.tsx Normal file
View File

@ -0,0 +1,43 @@
import { FormField } from "@repo/shadcn-ui/components";
import { Control, FieldPath, FieldValues } from "react-hook-form";
import { DatePickerInputComp, SUICalendarProps } from "./date-picker-input-comp.tsx";
type DatePickerInputFieldProps<TFormValues extends FieldValues> = SUICalendarProps & {
control: Control<TFormValues>;
name: FieldPath<TFormValues>;
label: string;
placeholder?: string;
description?: string;
disabled?: boolean;
required?: boolean;
readOnly?: boolean;
className?: string;
displayDateFormat?: string; // e.g. "dd/MM/yyyy"
parseDateFormat?: string; // e.g. "yyyy-MM-dd"
};
export function DatePickerInputField<TFormValues extends FieldValues>({
control,
name,
displayDateFormat = "dd-MM-yyyy",
parseDateFormat = "yyyy-MM-dd",
...props
}: DatePickerInputFieldProps<TFormValues>) {
return (
<FormField
control={control}
name={name}
render={({ field, fieldState, formState }) => (
<DatePickerInputComp
field={field}
fieldState={fieldState}
formState={formState}
displayDateFormat={displayDateFormat}
parseDateFormat={parseDateFormat}
{...props}
/>
)}
/>
);
}

1
packages/rdx-ui/src/components/form/date-picker-input-field/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./date-picker-input-field.tsx";

2
packages/rdx-ui/src/components/form/index.tsx
View File

@ -1,5 +1,5 @@
export * from "./date-picker-input-field/index.ts";
export * from "./DatePickerField.tsx";
export * from "./DatePickerInputField.tsx";
export * from "./fieldset.tsx";
export * from "./multi-select-field.tsx";
export * from "./SelectField.tsx";

4
packages/rdx-ui/src/components/form/types.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
export type CommonInputProps = Omit<
React.InputHTMLAttributes<HTMLInputElement>,
"name" | "value" | "onChange" | "onBlur" | "ref" | "type"
>;

10
packages/rdx-ui/src/locales/en.json
View File

@ -1,10 +1,10 @@
{
"common": {
"actions": "Actions",
"invalid_date": "Invalid date",
"required": "•",
"modified": "modified",
"search": "Search"
"search": "Search",
"read_only": "Read only"
},
"components": {
"loading_indicator": {
@ -22,6 +22,12 @@
"no_results": "No results found.",
"select_options": "Select options",
"select_all": "Select all"
},
"date_picker_input_field": {
"invalid_date": "Invalid date",
"clear_date": "Clear date",
"today": "Today",
"close": "Close"
}
}
}