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

Clientes y Facturas de cliente

Browse Source
This commit is contained in:
David Arranz 2025-10-20 11:35:24 +02:00
parent bdc5637a81
commit e337331650
30 changed files with 618 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
modules/core/src/web/components/index.ts
View File

@ -3,3 +3,4 @@ import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
ModuleRegistry.registerModules([AllCommunityModule]);
export * from "./form";
export * from "./page-header";

48
modules/core/src/web/components/page-header.tsx Normal file
View File

@ -0,0 +1,48 @@
import { Button } from '@repo/shadcn-ui/components';
import { cn } from '@repo/shadcn-ui/lib/utils';
import { ChevronLeftIcon } from 'lucide-react';
// features/common/components/page-header.tsx
import type { ReactNode } from "react";
interface PageHeaderProps {
/** Icono que aparece a la izquierda del título */
icon?: ReactNode;
/** Contenido del título (texto plano o nodo complejo) */
title: ReactNode;
/** Descripción secundaria debajo del título */
description?: ReactNode;
/** Estado opcional (ej. "draft", "paid") */
status?: string;
/** Contenido del lado derecho (botones, menús, etc.) */
rightSlot?: ReactNode;
className?: string;
}
export function PageHeader({ icon, title, description, status, rightSlot, className }: PageHeaderProps) {
return (
<div className={cn("py-4", className)}>
<div className='flex items-center justify-between'>
{/* Lado izquierdo */}
<div className='flex items-center gap-4'>
<Button variant="ghost" size="icon" className="cursor-pointer" onClick={() => window.history.back()}>
<ChevronLeftIcon className="size-5" />
</Button>
{icon && <div className='shrink-0'>{icon}</div>}
<div>
<div className='flex items-center gap-3'>
<h1 className='text-xl font-semibold text-foreground'>{title}</h1>
</div>
{description && <p className='text-sm text-muted-foreground'>{description}</p>}
</div>
</div>
{/* Lado derecho parametrizable */}
{rightSlot && <div>{rightSlot}</div>}
</div>
</div>
);
}

1
modules/customer-invoices/src/web/components/index.tsx
View File

@ -6,5 +6,4 @@ export * from "./customer-invoices-layout";
export * from "./editor";
export * from "./editor/invoice-tax-summary";
export * from "./editor/invoice-totals";
export * from "./page-header";

50
modules/customer-invoices/src/web/components/page-header.tsx
View File

@ -1,50 +0,0 @@
import { Button } from '@repo/shadcn-ui/components';
import { cn } from '@repo/shadcn-ui/lib/utils';
import { ChevronLeftIcon } from 'lucide-react';
// features/common/components/page-header.tsx
import type { ReactNode } from "react";
import { CustomerInvoiceStatusBadge } from "./customer-invoice-status-badge";
interface PageHeaderProps {
/** Icono que aparece a la izquierda del título */
icon?: ReactNode;
/** Contenido del título (texto plano o nodo complejo) */
title: ReactNode;
/** Descripción secundaria debajo del título */
description?: ReactNode;
/** Estado opcional (ej. "draft", "paid") */
status?: string;
/** Contenido del lado derecho (botones, menús, etc.) */
rightSlot?: ReactNode;
className?: string;
}
export function PageHeader({ icon, title, description, status, rightSlot, className }: PageHeaderProps) {
return (
<div className={cn("border-b bg-card -px-4 pt-4", className)}>
<div className="mx-auto px-6 py-4">
<div className='flex items-center justify-between'>
{/* Lado izquierdo */}
<div className='flex items-center gap-4'>
<Button variant="ghost" size="icon" className="cursor-pointer" onClick={() => window.history.back()}>
<ChevronLeftIcon className="size-5" />
</Button>
{icon && <div className='shrink-0'>{icon}</div>}
<div>
<div className='flex items-center gap-3'>
<h1 className='text-xl font-semibold text-foreground'>{title}</h1>
{status && <CustomerInvoiceStatusBadge status={status} />}
</div>
{description && <p className='text-sm text-muted-foreground'>{description}</p>}
</div>
</div>
{/* Lado derecho parametrizable */}
{rightSlot && <div>{rightSlot}</div>}
</div>
</div>
</div>
);
}

2
modules/customer-invoices/src/web/pages/list/invoices-list-grid.tsx
View File

@ -41,6 +41,7 @@ export const InvoicesListGrid = ({
}: InvoiceUpdateCompProps) => {
const { t } = useTranslation();
const navigate = useNavigate();
const { items, total_items } = invoicesPage;
// Hook con Sheet de shadcn
const preview = usePinnedPreviewSheet<InvoiceSummaryFormData>({
@ -57,7 +58,6 @@ export const InvoicesListGrid = ({
onSendEmail: (invoice) => null, //sendInvoiceEmail(inv.id),
onDelete: (invoice) => null, //confirmDelete(inv.id),
});
const { items, total_items } = invoicesPage;
// Navegación accesible (click o teclado)
const goToRow = useCallback(

5
modules/customer-invoices/src/web/pages/list/invoices-list-page.tsx
View File

@ -1,10 +1,10 @@
import { PageHeader } from '@erp/core/components';
import { ErrorAlert } from '@erp/customers/components';
import { AppBreadcrumb, AppContent, AppHeader, BackHistoryButton, useDebounce } from "@repo/rdx-ui/components";
import { AppContent, AppHeader, BackHistoryButton, useDebounce } from "@repo/rdx-ui/components";
import { Button } from "@repo/shadcn-ui/components";
import { PlusIcon } from "lucide-react";
import { useMemo, useState } from 'react';
import { useNavigate } from "react-router-dom";
import { PageHeader } from '../../components';
import { useInvoicesQuery } from '../../hooks';
import { useTranslation } from "../../i18n";
import { invoiceResumeDtoToFormAdapter } from '../../schemas/invoice-resume-dto.adapter';
@ -79,7 +79,6 @@ export const InvoiceListPage = () => {
return (
<>
<AppHeader>
<AppBreadcrumb />
<PageHeader
title={t("pages.list.title")}
rightSlot={

4
modules/customer-invoices/src/web/pages/update/invoice-update-comp.tsx
View File

@ -1,3 +1,4 @@
import { PageHeader } from '@erp/core/components';
import {
UnsavedChangesProvider,
UpdateCommitButtonGroup,
@ -8,9 +9,6 @@ import { showErrorToast, showSuccessToast } from "@repo/rdx-ui/helpers";
import { useMemo } from 'react';
import { FieldErrors, FormProvider } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import {
PageHeader
} from "../../components";
import { useInvoiceContext } from '../../context';
import { useUpdateCustomerInvoice } from "../../hooks";
import { useTranslation } from "../../i18n";

1
modules/customers/package.json
View File

@ -40,6 +40,7 @@
"@repo/rdx-ui": "workspace:*",
"@repo/rdx-utils": "workspace:*",
"@repo/shadcn-ui": "workspace:*",
"@tanstack/react-table": "^8.21.3",
"ag-grid-react": "^33.3.0",
"lucide-react": "^0.503.0",
"react": "^19.1.0",

3
modules/customers/src/common/dto/response/list-customers.response.dto.ts
View File

@ -29,9 +29,6 @@ export const ListCustomersResponseSchema = createPaginatedListSchema(
fax: z.string(),
website: z.string(),
//legal_record: z.string(),
//default_taxes: z.array(z.string()),
language_code: z.string(),
currency_code: z.string(),

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

@ -1,205 +0,0 @@
import { AG_GRID_LOCALE_ES } from "@ag-grid-community/locale";
import type { CellKeyDownEvent, RowClickedEvent, ValueFormatterParams } from "ag-grid-community";
import {
ColDef,
GridOptions,
SizeColumnsToContentStrategy,
SizeColumnsToFitGridStrategy,
SizeColumnsToFitProvidedWidthStrategy,
} from "ag-grid-community";
import { useCallback, useMemo, useState } from "react";
import { ErrorOverlay } from "@repo/rdx-ui/components";
import { Button } from "@repo/shadcn-ui/components";
import { AgGridReact } from "ag-grid-react";
import { ChevronRightIcon } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useCustomersQuery } from "../hooks";
import { useTranslation } from "../i18n";
import { CustomerStatusBadge } from "./customer-status-badge";
// Create new GridExample component
export const CustomersListGrid = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const {
data: customersData,
isLoading: isLoadingCustomers,
isError: isLoadError,
error: loadError,
} = useCustomersQuery({
pagination: {
pageSize: 999,
},
});
// Column Definitions: Defines & controls grid columns.
const [columnDefs] = useState<ColDef[]>([
{ field: "name", headerName: t("pages.list.grid_columns.name"), minWidth: 300 },
{
field: "tin",
headerName: t("pages.list.grid_columns.tin"),
maxWidth: 120,
},
{
field: "city",
headerName: t("pages.list.grid_columns.city"),
},
{
field: "email_primary",
headerName: t("pages.list.grid_columns.email"),
},
{
field: "phone_primary",
headerName: t("pages.list.grid_columns.phone"),
maxWidth: 120,
},
{
field: "mobile_primary",
headerName: t("pages.list.grid_columns.mobile"),
maxWidth: 120,
},
{
field: "status",
headerName: t("pages.list.grid_columns.status"),
maxWidth: 135,
cellRenderer: (params: ValueFormatterParams) => {
return <CustomerStatusBadge status={params.value} />;
},
},
{
colId: "actions",
headerName: t("pages.list.grid_columns.actions", "Actions"),
cellRenderer: (params: ValueFormatterParams) => {
const { data } = params;
return (
<Button
variant='secondary'
size='icon'
className='size-8'
onClick={() => {
navigate(`/customers/${data.id}/edit`);
}}
>
<ChevronRightIcon />
</Button>
);
},
},
]);
// 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
| SizeColumnsToContentStrategy
>(() => {
return {
type: "fitGridWidth",
defaultMinWidth: 100,
columnLimits: [{ colId: "actions", minWidth: 75, maxWidth: 75 }],
};
}, []);
const gridOptions: GridOptions = useMemo(
() => ({
columnDefs: columnDefs,
autoSizeStrategy: autoSizeStrategy,
defaultColDef: {
editable: false,
flex: 1,
filter: false,
sortable: false,
resizable: true,
},
pagination: true,
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, columnDefs, onCellKeyDown, onRowClicked]
);
if (isLoadError) {
return (
<>
<ErrorOverlay
errorMessage={
(loadError as Error)?.message ??
t("pages.update.loadErrorMsg", "Inténtalo de nuevo más tarde.")
}
/>
</>
);
}
// Container: Defines the grid's theme & dimensions.
return (
<div
className='ag-theme-alpine'
style={{
height: "100%",
width: "100%",
}}
>
<AgGridReact
rowData={customersData?.items ?? []}
loading={isLoadingCustomers}
{...gridOptions}
/>
</div>
);
};

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

@ -1,7 +1,6 @@
export * from "./client-selector-modal";
export * from "./customer-modal-selector";
export * from "./customers-layout";
export * from "./customers-list-grid";
export * from "./editor";
export * from "./error-alert";
export * from "./not-found-card";

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

@ -7,9 +7,10 @@ const CustomersLayout = lazy(() =>
import("./components").then((m) => ({ default: m.CustomersLayout }))
);
const CustomersList = lazy(() => import("./pages").then((m) => ({ default: m.CustomersList })));
const CustomersList = lazy(() => import("./pages").then((m) => ({ default: m.CustomersListPage })));
const CustomerView = lazy(() => import("./pages").then((m) => ({ default: m.CustomerViewPage })));
const CustomerAdd = lazy(() => import("./pages").then((m) => ({ default: m.CustomerCreatePage })));
const CustomerUpdate = lazy(() => import("./pages").then((m) => ({ default: m.CustomerUpdatePage })));
export const CustomerRoutes = (params: ModuleClientParams): RouteObject[] => {
return [
@ -21,11 +22,11 @@ export const CustomerRoutes = (params: ModuleClientParams): RouteObject[] => {
</CustomersLayout>
),
children: [
/*{ path: "", index: true, element: <CustomersList /> }, // index
{ path: "", index: true, element: <CustomersList /> }, // index
{ path: "list", element: <CustomersList /> },
{ path: "create", element: <CustomerAdd /> },
{ path: ":id", element: <CustomerView /> },
{ path: ":id/edit", element: <CustomerUpdatePage /> },*/
{ path: ":id/edit", element: <CustomerUpdate /> },
//
/*{ path: "create", element: <CustomersList /> },

44
modules/customers/src/web/hooks/use-customers-query.tsx
View File

@ -1,22 +1,40 @@
import { useDataSource, useQueryKey } from "@erp/core/hooks";
import { useQuery } from "@tanstack/react-query";
import { CustomersListData } from "../schemas";
import { CriteriaDTO } from '@erp/core';
import { useDataSource } from "@erp/core/hooks";
import { DefaultError, QueryKey, useQuery } from "@tanstack/react-query";
import { CustomersPage } from '../schemas';
export const CUSTOMERS_QUERY_KEY = (criteria: CriteriaDTO): QueryKey => [
"customer_invoices", {
pageNumber: criteria.pageNumber ?? 0,
pageSize: criteria.pageSize ?? 10,
q: criteria.q ?? "",
filters: criteria.filters ?? [],
orderBy: criteria.orderBy ?? "",
order: criteria.order ?? "",
},
];
type CustomersQueryOptions = {
enabled?: boolean;
criteria?: CriteriaDTO
};
// Obtener todos los clientes
export const useCustomersQuery = (params?: any) => {
export const useCustomersQuery = (options?: CustomersQueryOptions) => {
const dataSource = useDataSource();
const keys = useQueryKey();
const enabled = options?.enabled ?? true;
const criteria = options?.criteria ?? {};
return useQuery<CustomersListData>({
queryKey: keys().data().resource("customers").action("list").params(params).get(),
queryFn: async (context) => {
const { signal } = context;
const customers = await dataSource.getList("customers", {
return useQuery<CustomersPage, DefaultError>({
queryKey: CUSTOMERS_QUERY_KEY(criteria),
queryFn: async ({ signal }) => {
return await dataSource.getList<CustomersPage>("customers", {
signal,
...params,
...criteria,
});
return customers as CustomersListData;
},
enabled,
placeholderData: (previousData, previousQuery) => previousData, // Mantener datos previos mientras se carga nueva datos (antiguo `keepPreviousData`)
});
};

35
modules/customers/src/web/pages/customer-list.tsx
View File

@ -1,35 +0,0 @@
import { AppBreadcrumb, AppContent } from "@repo/rdx-ui/components";
import { Button } from "@repo/shadcn-ui/components";
import { PlusIcon } from "lucide-react";
import { Outlet, useNavigate } from "react-router-dom";
import { CustomersListGrid } from "../components";
import { useTranslation } from "../i18n";
export const CustomersList = () => {
const { t } = useTranslation();
const navigate = useNavigate();
return (
<>
<AppBreadcrumb />
<AppContent>
<div className='flex items-center justify-between space-y-6'>
<div>
<h2 className='text-2xl font-bold tracking-tight'>{t("pages.list.title")}</h2>
<p className='text-muted-foreground'>{t("pages.list.description")}</p>
</div>
<div className='flex items-center space-x-2'>
<Button onClick={() => navigate("/customers/create")} className='cursor-pointer'>
<PlusIcon className='w-4 h-4 mr-2' />
{t("pages.create.title")}
</Button>
</div>
</div>
<div className='flex flex-col w-full h-full py-3'>
<CustomersListGrid />
</div>
<Outlet />
</AppContent>
</>
);
};

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

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

160
modules/customers/src/web/pages/list/customers-list-grid.tsx Normal file
View File

@ -0,0 +1,160 @@
import { DataTable, SkeletonDataTable } from "@repo/rdx-ui/components";
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, Spinner } from '@repo/shadcn-ui/components';
import { SearchIcon, XIcon } from 'lucide-react';
import { useCallback, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "../../i18n";
import { CustomerSummaryFormData, CustomersPageFormData } from '../../schemas';
import { useCustomersListColumns } from './use-customers-list-columns';
export type CustomerUpdateCompProps = {
customersPage: CustomersPageFormData;
loading?: boolean;
pageIndex: number;
pageSize: number;
onPageChange?: (pageNumber: number) => void;
onPageSizeChange?: (pageSize: number) => void;
searchValue: string;
onSearchChange: (value: string) => void;
onRowClick?: (row: CustomerSummaryFormData, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
}
export const CustomersListGrid = ({
customersPage,
loading,
pageIndex,
pageSize,
onPageChange,
onPageSizeChange,
searchValue, onSearchChange,
onRowClick
}: CustomerUpdateCompProps) => {
const { t } = useTranslation();
const navigate = useNavigate();
const { items, total_items } = customersPage;
const [statusFilter, setStatusFilter] = useState("todas");
const columns = useCustomersListColumns({
onEdit: (customer) => navigate(`/customers/${customer.id}/edit`),
onView: (customer) => null, //duplicateInvoice(inv.id),
onDelete: (customer) => null, //confirmDelete(inv.id),
});
// 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]
);
// Handlers de búsqueda
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value);
const handleClear = () => onSearchChange("");
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
// Envío inmediato: forzar “salto” del debounce
onSearchChange((e.target as HTMLInputElement).value);
}
};
/*const handleRowClick = useCallback(
(customer: CustomerSummaryFormData, _i: number, e: React.MouseEvent) => {
const url = `/customer-invoices/${customer.id}/edit`;
if (e.metaKey || e.ctrlKey) { window.open(url, "_blank", "noopener,noreferrer"); return; }
preview.open(customer);
},
[preview]
);*/
if (loading) {
return (
<div className="flex flex-col gap-4">
<SkeletonDataTable
columns={columns.length}
rows={Math.max(6, pageSize)}
showFooter
footerProps={{ pageIndex, pageSize, totalItems: total_items ?? 0 }}
/>
</div>
);
}
// Render principal
return (
<div className="flex flex-col gap-4">
{/* Barra de filtros */}
<div className="flex flex-col sm:flex-row gap-4 mb-6">
<div className="relative flex-1 max-w-lg" aria-label={t("pages.list.searchPlaceholder")}>
<InputGroup className='bg-background' data-disabled={loading}>
<InputGroupInput
placeholder={t("common.search_placeholder")}
value={searchValue}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
inputMode="search"
autoComplete="off"
spellCheck={false}
disabled={loading}
/>
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
<InputGroupAddon align="inline-end">
{loading && <Spinner />}
{!searchValue && !loading && <InputGroupButton variant='secondary' className='cursor-pointer'>
{t("common.search")}
</InputGroupButton>}
{searchValue && !loading && <InputGroupButton variant='secondary' className='cursor-pointer' aria-label={t("common.clear")} onClick={handleClear}>
<XIcon className="size-4" aria-hidden />
<span className="sr-only">{t("common.search")}</span>
</InputGroupButton>}
</InputGroupAddon>
</InputGroup>
</div>
</div>
<div className="relative flex">
<div className={/*preview.isPinned ? "flex-1 mr-[500px]" : */"flex-1"}>
<DataTable
columns={columns}
data={items}
readOnly
enableRowSelection
enablePagination
manualPagination
pageIndex={pageIndex}
pageSize={pageSize}
totalItems={total_items}
onPageChange={onPageChange}
onPageSizeChange={onPageSizeChange}
onRowClick={() => null /*handleRowClick*/}
/>
</div>
{/*<preview.Preview>
{({ item, isPinned, close, togglePin }) => (
<InvoicePreviewPanel
invoice={item}
isPinned={isPinned}
onClose={close}
onTogglePin={togglePin}
/>
)}
</preview.Preview>*/}
</div>
</div>
);
};

120
modules/customers/src/web/pages/list/customers-list-page.tsx Normal file
View File

@ -0,0 +1,120 @@
import { PageHeader } from '@erp/core/components';
import { AppBreadcrumb, AppContent, AppHeader, BackHistoryButton, useDebounce } from "@repo/rdx-ui/components";
import { Button } from "@repo/shadcn-ui/components";
import { PlusIcon } from "lucide-react";
import { useMemo, useState } from 'react';
import { Outlet, useNavigate } from "react-router-dom";
import { ErrorAlert } from '../../components';
import { useCustomersQuery } from '../../hooks';
import { useTranslation } from "../../i18n";
import { CustomersListGrid } from './customers-list-grid';
export const CustomersListPage = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const [pageIndex, setPageIndex] = useState(0);
const [pageSize, setPageSize] = useState(10);
const [search, setSearch] = useState("");
const debouncedQ = useDebounce(search, 300);
const criteria = useMemo(
() => ({
q: debouncedQ || "",
pageSize,
pageNumber: pageIndex,
}),
[pageSize, pageIndex, debouncedQ]
);
const {
data: customersPageData,
isLoading,
isError,
error,
} = useCustomersQuery({
criteria
});
const handlePageChange = (newPageIndex: number) => {
// TanStack usa pageIndex 0-based → API usa 0-based también
setPageIndex(newPageIndex);
};
const handlePageSizeChange = (newSize: number) => {
setPageSize(newSize);
setPageIndex(0);
};
const handleSearchChange = (value: string) => {
// Normalización ligera: recorta y colapsa espacios internos
const cleaned = value.trim().replace(/\s+/g, " ");
setSearch(cleaned);
setPageIndex(0);
};
if (isError || !customersPageData) {
return (
<AppContent>
<ErrorAlert
title={t("pages.list.loadErrorTitle")}
message={(error as Error)?.message || "Error al cargar el listado"}
/>
<BackHistoryButton />
</AppContent>
);
}
return (
<>
<AppHeader>
<AppBreadcrumb />
<PageHeader
title={t("pages.list.title")}
rightSlot={
<></>}
/>
</AppHeader>
<AppContent>
<div className='flex items-center justify-between space-y-6'>
<div>
<h2 className='text-2xl font-bold tracking-tight'>{t("pages.list.title")}</h2>
<p className='text-muted-foreground'>{t("pages.list.description")}</p>
</div>
<div className='flex items-center space-x-2'>
<Button
onClick={() => navigate("/customer-invoices/create")}
variant={'default'}
aria-label={t("pages.create.title")}
className='cursor-pointer'
>
<PlusIcon className="mr-2 h-4 w-4" aria-hidden />
{t("pages.create.title")}
</Button>
</div>
</div>
<div className='flex flex-col w-full h-full py-3'>
<div className={"flex-1"}>
<CustomersListGrid
customersPage={customersPageData}
loading={isLoading}
pageIndex={pageIndex}
pageSize={pageSize}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
searchValue={search}
onSearchChange={handleSearchChange}
/>
</div>
</div>
<Outlet />
</AppContent>
</>
);
};

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

@ -0,0 +1 @@
export * from "./customers-list-page";

218
modules/customers/src/web/pages/list/use-customers-list-columns.tsx Normal file
View File

@ -0,0 +1,218 @@
import {
Avatar,
AvatarFallback,
Badge,
Button,
DropdownMenu, DropdownMenuContent,
DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger
} from '@repo/shadcn-ui/components';
import type { ColumnDef } from "@tanstack/react-table";
import { Building2Icon, GlobeIcon, MailIcon, MoreHorizontalIcon, PencilIcon, PhoneIcon, User2Icon } from 'lucide-react';
import * as React from "react";
import { useTranslation } from '../../i18n';
import { CustomerSummaryFormData } from '../../schemas';
type CustomerActionHandlers = {
onEdit?: (customer: CustomerSummaryFormData) => void;
onView?: (customer: CustomerSummaryFormData) => void;
onDelete?: (customer: CustomerSummaryFormData) => void;
};
function shortId(id: string) {
return id ? `${id.slice(0, 4)}_${id.slice(-4)}` : "-";
}
// ---- Helpers UI ----
const StatusBadge = ({ status }: { status: string }) => {
// Map visual simple; ajustar a tu catálogo real
const v =
status.toLowerCase() === "active"
? "default"
: status.toLowerCase() === "inactive"
? "outline"
: "secondary";
return (
<Badge variant={v as any} className="uppercase tracking-wide text-[11px]">
{status}
</Badge>
);
};
const KindBadge = ({ isCompany }: { isCompany: boolean }) => (
<Badge variant="outline" className="gap-1">
{isCompany ? <Building2Icon className="size-3.5" /> : <User2Icon className="size-3.5" />}
{isCompany ? "Company" : "Person"}
</Badge>
);
const Soft = ({ children }: { children: React.ReactNode }) => (
<span className="text-muted-foreground">{children}</span>
);
const ContactCell = ({ customer }: { customer: CustomerSummaryFormData }) => (
<div className="grid gap-1">
<div className="flex items-center gap-2 group:text-foreground group-hover:text-primary">
<MailIcon className="size-3.5 group" />
<a className="group" href={`mailto:${customer.email_primary}`}>
{customer.email_primary || <Soft>—</Soft>}
</a>
{customer.email_secondary && <Soft>• {customer.email_secondary}</Soft>}
</div>
<div className="flex flex-wrap items-center gap-2 group:text-foreground group-hover:text-primary">
<PhoneIcon className="size-3.5 group" />
<span>{customer.phone_primary || customer.mobile_primary || <Soft>-</Soft>}</span>
{customer.phone_secondary && <Soft>• {customer.phone_secondary}</Soft>}
{customer.mobile_secondary && <Soft>• {customer.mobile_secondary}</Soft>}
{customer.fax && <Soft>• fax {customer.fax}</Soft>}
</div>
{customer.website && (
<div className="flex items-center gap-2">
<GlobeIcon className="size-3.5" />
<a className="underline underline-offset-2" href={safeHttp(customer.website)} target="_blank" rel="noreferrer">
{customer.website}
</a>
</div>
)}
</div>
);
const AddressCell: React.FC<{ c: CustomerSummaryFormData }> = ({ c }) => {
const line1 = [c.street, c.street2].filter(Boolean).join(", ");
const line2 = [c.postal_code, c.city].filter(Boolean).join(" ");
const line3 = [c.province, c.country].filter(Boolean).join(", ");
return (
<address className="not-italic grid gap-1 text-sm">
<div>{line1 || <Soft>—</Soft>}</div>
<div>{[line2, line3].filter(Boolean).join(" • ")}</div>
</address>
);
};
function initials(name: string) {
const parts = name.trim().split(/\s+/).slice(0, 2);
return parts.map(p => p[0]?.toUpperCase() ?? "").join("") || "?";
}
function safeHttp(url: string) {
if (!url) return "#";
if (/^https?:\/\//i.test(url)) return url;
return `https://${url}`;
}
export function useCustomersListColumns(
handlers: CustomerActionHandlers = {}
): ColumnDef<CustomerSummaryFormData>[] {
const { t } = useTranslation();
const {
onEdit, onView, onDelete,
} = handlers;
return React.useMemo<ColumnDef<CustomerSummaryFormData>[]>(() => [
// Identidad + estado + metadatos (columna compuesta)
{
id: "identity",
header: "Customer",
accessorFn: (row) => row.name, // para ordenar/buscar por nombre
enableHiding: false,
size: 380,
cell: ({ row }) => {
const c = row.original;
const isCompany = String(c.is_company).toLowerCase() === "true";
return (
<div className="flex items-start gap-3">
<Avatar className="size-10">
<AvatarFallback aria-label={c.name}>{initials(c.name)}</AvatarFallback>
</Avatar>
<div className="min-w-0 grid gap-1">
<div className="flex flex-wrap items-center gap-2">
<span className="font-medium truncate">{c.name}</span>
{c.trade_name && <Soft>({c.trade_name})</Soft>}
</div>
<div className="flex flex-wrap items-center gap-2">
{c.tin && <span className="font-medium truncate">{c.tin}</span>}
</div>
<div className="flex flex-wrap items-center gap-2">
<StatusBadge status={c.status} />
<KindBadge isCompany={isCompany} />
{c.reference && <Badge variant="secondary">Ref: {c.reference}</Badge>}
</div>
</div>
</div>
);
},
},
// Contacto (emails, teléfonos, web)
{
id: "contact",
header: "Contact",
accessorFn: (r) => `${r.email_primary} ${r.phone_primary} ${r.mobile_primary} ${r.website}`,
size: 420,
cell: ({ row }) => <ContactCell customer={row.original} />,
},
// Dirección (múltiples campos en bloque)
{
id: "address",
header: "Address",
accessorFn: (r) =>
`${r.street} ${r.street2} ${r.city} ${r.postal_code} ${r.province} ${r.country}`,
size: 360,
cell: ({ row }) => <AddressCell c={row.original} />,
},
// Acciones
{
id: "actions",
header: () => <span className="sr-only">Actions</span>,
size: 72,
enableSorting: false,
enableHiding: false,
cell: ({ row }) => {
const customer = row.original;
const { website, email_primary } = customer;
return (
<div className="flex justify-end">
<div className="flex items-center gap-1">
<Button
variant="ghost"
size="icon"
aria-label="Edit customer"
onClick={() => onEdit?.(customer)}
>
<PencilIcon className="size-4" />
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" aria-label="More actions">
<MoreHorizontalIcon className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => onView?.(customer)}>Open</DropdownMenuItem>
<DropdownMenuItem onClick={() => onEdit?.(customer)}>Edit</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => window.open(safeHttp(website), "_blank")}>
Visit website
</DropdownMenuItem>
<DropdownMenuItem onClick={() => navigator.clipboard.writeText(email_primary)}>
Copy email
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
className="text-destructive"
onClick={() => onDelete?.(customer)}
>
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
);
},
},
], [t, onEdit, onView, onDelete]);
}

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

@ -3,8 +3,8 @@ import { useNavigate } from "react-router-dom";
import { formHasAnyDirty, pickFormDirtyValues } from "@erp/core/client";
import {
FormCommitButtonGroup,
UnsavedChangesProvider,
UpdateCommitButtonGroup,
useHookForm,
useUrlParamId,
} from "@erp/core/hooks";
@ -137,7 +137,7 @@ export const CustomerUpdatePage = () => {
{t("pages.update.description")}
</p>
</div>
<FormCommitButtonGroup
<UpdateCommitButtonGroup
isLoading={isUpdating}
disabled={isUpdating}
cancel={{

6
modules/customers/src/web/pages/view/customer-view-page.tsx
View File

@ -1,4 +1,4 @@
import { AppBreadcrumb, AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
import { AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
import { Button, Card, CardContent, CardHeader, CardTitle } from "@repo/shadcn-ui/components";
import {
Banknote,
@ -42,7 +42,6 @@ export const CustomerViewPage = () => {
if (isLoadError) {
return (
<>
<AppBreadcrumb />
<AppContent>
<ErrorAlert
title={t("pages.update.loadErrorTitle", "No se pudo cargar el cliente")}
@ -62,13 +61,12 @@ export const CustomerViewPage = () => {
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'>
<div className='flex h-16 w-16 items-center justify-center rounded-lg'>
{customer?.is_company ? (
<Building2 className='size-8 text-primary' />
) : (

7
modules/customers/src/web/schemas/customer-resume.form.schema.ts Normal file
View File

@ -0,0 +1,7 @@
import { CustomerSummary, CustomersPage } from "./customer.api.schema";
export type CustomerSummaryFormData = CustomerSummary & {};
export type CustomersPageFormData = CustomersPage & {
items: CustomerSummaryFormData[];
};

10
modules/customers/src/web/schemas/customer.api.schema.ts
View File

@ -1,10 +1,11 @@
import { z } from "zod/v4";
import { PaginationSchema } from "@erp/core";
import { ArrayElement } from "@repo/rdx-utils";
import {
CreateCustomerRequestSchema,
GetCustomerByIdResponseSchema,
ListCustomersResponseDTO,
ListCustomersResponseSchema,
UpdateCustomerByIdRequestSchema,
} from "../../common";
@ -19,7 +20,12 @@ export type CustomerCreateInput = z.infer<typeof CustomerCreateSchema>; // Cuerp
export type CustomerUpdateInput = z.infer<typeof CustomerUpdateSchema>; // Cuerpo para actualizar
// Resultado de consulta con criteria (paginado, etc.)
export type CustomersPage = ListCustomersResponseDTO;
export const CustomersPageSchema = ListCustomersResponseSchema.omit({
metadata: true,
});
export type PaginatedResponse = z.infer<typeof PaginationSchema>;
export type CustomersPage = z.infer<typeof CustomersPageSchema>;
// Ítem simplificado dentro del listado (no toda la entidad)
export type CustomerSummary = Omit<ArrayElement<CustomersPage["items"]>, "metadata">;

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

@ -1,2 +1,3 @@
export * from "./customer-resume.form.schema";
export * from "./customer.api.schema";
export * from "./customer.form.schema";

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

@ -62,7 +62,7 @@ export function TextAreaField<TFormValues extends FieldValues>({
{...inputRest}
disabled={disabled}
aria-disabled={disabled}
className={cn(inputClassName)}
className={cn("bg-background", inputClassName)}
/>

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

@ -71,7 +71,7 @@ export function TextField<TFormValues extends FieldValues>({
{...inputRest}
disabled={disabled}
aria-disabled={disabled}
className={cn(inputClassName)}
className={cn("bg-background", inputClassName)}
/>
{false && <FieldDescription className='text-xs'>{description || "\u00A0"}</FieldDescription>}
<FieldError errors={[fieldState.error]} />

2
packages/rdx-ui/src/components/layout/app-content.tsx
View File

@ -9,7 +9,7 @@ export const AppContent = ({
return (
<div
className={cn(
"app-content flex flex-1 flex-col gap-4 p-6 pt-8 bg-sidebar/25 min-h-screen",
"app-content flex flex-1 flex-col gap-4 p-6 pt-8 bg-primary/5 min-h-screen",
className
)}
{...props}

2
packages/rdx-ui/src/components/layout/app-header.tsx
View File

@ -7,7 +7,7 @@ export const AppHeader = ({
...props
}: PropsWithChildren<{ className?: string }>) => {
return (
<div className={cn("app-header bg-background", className)} {...props}>
<div className={cn("app-header bg-background gap-4 px-6 pt-0 border-b bg-card", className)} {...props}>
{children}
</div>
);

2
packages/rdx-ui/src/components/layout/app-layout.tsx
View File

@ -14,7 +14,7 @@ export const AppLayout = () => {
>
<AppSidebar variant='inset' />
{/* Aquí está el MAIN */}
<SidebarInset className='app-main'>
<SidebarInset className='app-main bg-background'>
<Outlet />
</SidebarInset>
</SidebarProvider>

3
pnpm-lock.yaml
View File

@ -613,6 +613,9 @@ importers:
'@tanstack/react-query':
specifier: ^5.74.11
version: 5.90.2(react@19.2.0)
'@tanstack/react-table':
specifier: ^8.21.3
version: 8.21.3(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
ag-grid-community:
specifier: ^33.3.0
version: 33.3.2