Clientes y Facturas de cliente

modules/core/src/web/components/page-header.tsx

@@ -6,43 +6,39 @@ import type { ReactNode } from "react";
 
 
 interface PageHeaderProps {
-  /** Icono que aparece a la izquierda del título */
+  backIcon?: ReactNode;
-  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) {
+export function PageHeader({ backIcon, title, description, rightSlot, className }: PageHeaderProps) {
   return (
-    <div className={cn("py-4", className)}>
+    <div className={cn("pt-4 pb-6 bg-background flex items-center justify-between", 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()}>
+        {backIcon && (
-            <ChevronLeftIcon className="size-5" />
+          <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'>
+          <h2 className='text-2xl font-semibold text-foreground'>{title}</h2>
-              <h1 className='text-xl font-semibold text-foreground'>{title}</h1>
+          {description && <p className='text-base text-muted-foreground'>{description}</p>}
-            </div>
-            {description && <p className='text-sm text-muted-foreground'>{description}</p>}
         </div>
       </div>
 
       {/* Lado derecho parametrizable */}
-        {rightSlot && <div>{rightSlot}</div>}
+      {rightSlot && <>{rightSlot}</>}
-      </div>
-
     </div>
   );
 }

modules/customer-invoices/src/common/locales/en.json

@@ -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",

modules/customer-invoices/src/common/locales/es.json

@@ -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",

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

@@ -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

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

@@ -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>

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

@@ -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" />

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

@@ -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>
   );
 };

modules/customers/src/web/pages/list/customers-list-page.tsx

@@ -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

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

@@ -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'>
+      <AppHeader>
-            <div className='space-y-2'>
+        <PageHeader
-              <h2 className='text-2xl font-bold tracking-tight text-balance scroll-m-2'>
+          backIcon
-                {t("pages.update.title")}
+          title={t("pages.update.title")}
-              </h2>
+          description={t("pages.update.description")}
-              <p className='text-muted-foreground scroll-m-20 tracking-tight text-balance'>
+          rightSlot={
-                {t("pages.update.description")}
-              </p>
-            </div>
             <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>
   );
 };

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

@@ -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,
+  Smartphone
-  User,
 } 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>
+      <AppHeader>
-        <div className='space-y-6 max-w-4xl'>
+        <PageHeader
-          {/* Header */}
+          backIcon
-          <div className='flex items-start justify-between'>
+          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>)}
-            <div className='flex items-start gap-4'>
+          description={<div className='mt-2 flex items-center gap-3'>
-              <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'>
             <Badge variant='secondary' className='font-mono'>
-                    {customer?.reference}
+              {customer?.tin}
             </Badge>
             <Badge variant='outline'>{customer?.is_company ? "Empresa" : "Persona"}</Badge>
-                </div>
+          </div>}
-              </div>
+          rightSlot={
-            </div>
             <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,7 +322,6 @@ export const CustomerViewPage = () => {
             </CardContent>
           </Card>
         </div>
-        </div>
       </AppContent >
     </>
   );

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

@@ -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>
   );

packages/rdx-ui/src/components/layout/app-layout.tsx

@@ -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>