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 12:26:29 +02:00
parent e337331650
commit c69a7cd142
12 changed files with 344 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
modules/core/src/web/components/page-header.tsx
View File

@ -6,43 +6,39 @@ 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) */
backIcon?: ReactNode;
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) {
export function PageHeader({ backIcon, title, description, rightSlot, className }: PageHeaderProps) {
return (
<div className={cn("py-4", className)}>
<div className='flex items-center justify-between'>
<div className={cn("pt-4 pb-6 bg-background flex items-center justify-between", className)}>
{/* 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" />
{backIcon && (
<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>}
<h2 className='text-2xl font-semibold text-foreground'>{title}</h2>
{description && <p className='text-base text-muted-foreground'>{description}</p>}
</div>
</div>
{/* Lado derecho parametrizable */}
{rightSlot && <div>{rightSlot}</div>}
</div>
{rightSlot && <>{rightSlot}</>}
</div>
);
}

2
modules/customer-invoices/src/common/locales/en.json
View File

@ -34,7 +34,7 @@
"title": "Customer invoices",
"description": "Manage your customer invoices",
"list": {
"title": "Customer invoice list",
"title": "Customer invoices",
"description": "List all customer invoices",
"grid_columns": {
"invoice_number": "Inv. number",

2
modules/customer-invoices/src/common/locales/es.json
View File

@ -33,7 +33,7 @@
"title": "Facturas de clientes",
"description": "Gestiona tus facturas de clientes",
"list": {
"title": "Listado de facturas de clientes",
"title": "Facturas de clientes",
"description": "Lista todas las facturas de clientes",
"grid_columns": {
"invoice_number": "Nº factura",

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

@ -81,18 +81,8 @@ export const InvoiceListPage = () => {
<AppHeader>
<PageHeader
title={t("pages.list.title")}
description={t("pages.list.description")}
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")}
@ -104,7 +94,11 @@ export const InvoiceListPage = () => {
{t("pages.create.title")}
</Button>
</div>
</div>
}
/>
</AppHeader>
<AppContent>
<div className='flex flex-col w-full h-full py-3'>
<div className={"flex-1"}>
<InvoicesListGrid

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

@ -84,7 +84,9 @@ export const InvoiceUpdateComp = ({
<UnsavedChangesProvider isDirty={form.formState.isDirty}>
<AppHeader>
<PageHeader
title={`${t("pages.edit.title")} ${invoiceData.invoice_number}`}
backIcon
title={`${t("pages.edit.title")} #${invoiceData.invoice_number}`}
description={t("pages.edit.description")}
rightSlot={
<UpdateCommitButtonGroup
isLoading={isPending}
@ -93,9 +95,6 @@ export const InvoiceUpdateComp = ({
cancel={{ to: "/customer-invoices/list" }}
onBack={() => navigate(-1)}
/>
}
/>
</AppHeader>
@ -106,7 +105,7 @@ export const InvoiceUpdateComp = ({
formId="invoice-update-form"
onSubmit={handleSubmit}
onError={handleError}
className="max-w-full"
className="bg-white rounded-xl border shadow-xl max-w-full"
/>
</FormProvider>
</AppContent>

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

@ -9,7 +9,7 @@ interface InvoiceUpdateFormProps {
formId: string;
onSubmit: (data: InvoiceFormData) => void;
onError: (errors: FieldErrors<InvoiceFormData>) => void;
className: string;
className?: string;
}
export const InvoiceUpdateForm = ({
@ -22,7 +22,7 @@ export const InvoiceUpdateForm = ({
return (
<form noValidate id={formId} onSubmit={form.handleSubmit(onSubmit, onError)} >
<section className={cn("bg-white rounded-xl border shadow-xl space-y-6", className)}>
<section className={cn("p-6 space-y-6", className)}>
<div className="w-full p-6 bg-transparent grid grid-cols-1 lg:grid-cols-3 gap-6">
<InvoiceRecipient className="flex flex-col" />
<InvoiceBasicInfoFields className="flex flex-col lg:col-span-2" />

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

@ -1,6 +1,7 @@
import { FormDebug } from "@erp/core/components";
import { FieldErrors, useFormContext } from "react-hook-form";
import { cn } from '@repo/shadcn-ui/lib/utils';
import { CustomerFormData } from "../../schemas";
import { CustomerAdditionalConfigFields } from "./customer-additional-config-fields";
import { CustomerAddressFields } from "./customer-address-fields";
@ -11,13 +12,15 @@ interface CustomerFormProps {
formId: string;
onSubmit: (data: CustomerFormData) => void;
onError: (errors: FieldErrors<CustomerFormData>) => void;
className?: string;
}
export const CustomerEditForm = ({ formId, onSubmit, onError }: CustomerFormProps) => {
export const CustomerEditForm = ({ formId, onSubmit, onError, className }: CustomerFormProps) => {
const form = useFormContext<CustomerFormData>();
return (
<form id={formId} onSubmit={form.handleSubmit(onSubmit, onError)}>
<section className={cn("p-6", className)}>
<div className='xl:flex xl:flex-row-reverse xl:items-start'>
<div className='w-full xl:w-6/12'>
<FormDebug />
@ -29,6 +32,7 @@ export const CustomerEditForm = ({ formId, onSubmit, onError }: CustomerFormProp
<CustomerAdditionalConfigFields />
</div>
</div>
</section>
</form>
);
};

22
modules/customers/src/web/pages/list/customers-list-page.tsx
View File

@ -1,5 +1,5 @@
import { PageHeader } from '@erp/core/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';
@ -72,24 +72,13 @@ export const CustomersListPage = () => {
return (
<>
<AppHeader>
<AppBreadcrumb />
<PageHeader
title={t("pages.list.title")}
description={t("pages.list.description")}
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")}
onClick={() => navigate("/customers/create")}
variant={'default'}
aria-label={t("pages.create.title")}
className='cursor-pointer'
@ -98,7 +87,10 @@ export const CustomersListPage = () => {
{t("pages.create.title")}
</Button>
</div>
</div>
}
/>
</AppHeader>
<AppContent>
<div className='flex flex-col w-full h-full py-3'>
<div className={"flex-1"}>
<CustomersListGrid

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

@ -1,7 +1,8 @@
import { AppBreadcrumb, AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
import { AppContent, AppHeader, BackHistoryButton } from "@repo/rdx-ui/components";
import { useNavigate } from "react-router-dom";
import { formHasAnyDirty, pickFormDirtyValues } from "@erp/core/client";
import { PageHeader } from '@erp/core/components';
import {
UnsavedChangesProvider,
UpdateCommitButtonGroup,
@ -92,7 +93,7 @@ export const CustomerUpdatePage = () => {
if (isLoadError) {
return (
<>
<AppBreadcrumb />
<AppContent>
<ErrorAlert
title={t("pages.update.loadErrorTitle", "No se pudo cargar el cliente")}
@ -113,7 +114,7 @@ export const CustomerUpdatePage = () => {
if (!customerData)
return (
<>
<AppBreadcrumb />
<AppContent>
<NotFoundCard
title={t("pages.update.notFoundTitle", "Cliente no encontrado")}
@ -124,19 +125,13 @@ export const CustomerUpdatePage = () => {
);
return (
<>
<AppBreadcrumb />
<AppContent>
<UnsavedChangesProvider isDirty={form.formState.isDirty}>
<div className='flex items-center justify-between space-y-6'>
<div className='space-y-2'>
<h2 className='text-2xl font-bold tracking-tight text-balance scroll-m-2'>
{t("pages.update.title")}
</h2>
<p className='text-muted-foreground scroll-m-20 tracking-tight text-balance'>
{t("pages.update.description")}
</p>
</div>
<AppHeader>
<PageHeader
backIcon
title={t("pages.update.title")}
description={t("pages.update.description")}
rightSlot={
<UpdateCommitButtonGroup
isLoading={isUpdating}
disabled={isUpdating}
@ -151,7 +146,10 @@ export const CustomerUpdatePage = () => {
onBack={() => handleBack()}
onReset={() => handleReset()}
/>
</div>
}
/>
</AppHeader>
<AppContent>
{/* Alerta de error de actualización (si ha fallado el último intento) */}
{isUpdateError && (
<ErrorAlert
@ -168,10 +166,11 @@ export const CustomerUpdatePage = () => {
formId={"customer-update-form"} // para que el botón del header pueda hacer submit
onSubmit={handleSubmit}
onError={handleError}
className="bg-white rounded-xl border shadow-xl max-w-7xl mx-auto"
/>
</FormProvider>
</UnsavedChangesProvider>
</AppContent>
</>
</UnsavedChangesProvider>
);
};

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

@ -1,8 +1,7 @@
import { AppContent, BackHistoryButton } from "@repo/rdx-ui/components";
import { AppContent, AppHeader, BackHistoryButton } from "@repo/rdx-ui/components";
import { Button, Card, CardContent, CardHeader, CardTitle } from "@repo/shadcn-ui/components";
import {
Banknote,
Building2,
EditIcon,
FileText,
Globe,
@ -11,11 +10,11 @@ import {
MapPin,
MoreVertical,
Phone,
Smartphone,
User,
Smartphone
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { PageHeader } from '@erp/core/components';
import { useUrlParamId } from "@erp/core/hooks";
import { Badge } from "@repo/shadcn-ui/components";
import { CustomerEditorSkeleton, ErrorAlert } from "../../components";
@ -61,28 +60,17 @@ export const CustomerViewPage = () => {
return (
<>
<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'>
{customer?.is_company ? (
<Building2 className='size-8 text-primary' />
) : (
<User className='size-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'>
<AppHeader>
<PageHeader
backIcon
title={(<div className="flex flex-wrap items-center gap-2">{customer?.name} {customer?.trade_name && <span className="text-muted-foreground">({customer.trade_name})</span>}</div>)}
description={<div className='mt-2 flex items-center gap-3'>
<Badge variant='secondary' className='font-mono'>
{customer?.reference}
{customer?.tin}
</Badge>
<Badge variant='outline'>{customer?.is_company ? "Empresa" : "Persona"}</Badge>
</div>
</div>
</div>
</div>}
rightSlot={
<div className='flex gap-2'>
<Button variant='outline' size='icon' onClick={() => navigate("/customers/list")}>
<MoreVertical className='h-4 w-4' />
@ -92,8 +80,10 @@ export const CustomerViewPage = () => {
Editar
</Button>
</div>
</div>
}
/>
</AppHeader>
<AppContent>
{/* Main Content Grid */}
<div className='grid gap-6 md:grid-cols-2'>
{/* Información Básica */}
@ -117,14 +107,14 @@ export const CustomerViewPage = () => {
</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>
<dd className='mt-1 text-base text-foreground'>{customer?.legal_record}</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>
{customer?.default_taxes.map((tax) => (<Badge key={tax} variant={"secondary"}>{tax}</Badge>))}
</dd>
</div>
</CardContent>
@ -142,7 +132,7 @@ export const CustomerViewPage = () => {
<div>
<dt className='text-sm font-medium text-muted-foreground'>Calle</dt>
<dd className='mt-1 text-base text-foreground'>
{customer?.street1}
{customer?.street}
{customer?.street2 && (
<>
<br />
@ -332,8 +322,7 @@ export const CustomerViewPage = () => {
</CardContent>
</Card>
</div>
</div>
</AppContent>
</AppContent >
</>
);
};

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 gap-4 px-6 pt-0 border-b bg-card", className)} {...props}>
<div className={cn("app-header gap-4 px-6 pt-0 border-b bg-background", 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 bg-background'>
<SidebarInset className='app-main'>
<Outlet />
</SidebarInset>
</SidebarProvider>