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

42
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'>
{/* 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" />
<div className={cn("pt-4 pb-6 bg-background flex items-center justify-between", className)}>
{/* Lado izquierdo */}
<div className='flex items-center gap-4'>
{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>}
</div>
<div>
<h2 className='text-2xl font-semibold text-foreground'>{title}</h2>
{description && <p className='text-base text-muted-foreground'>{description}</p>}
</div>
{/* Lado derecho parametrizable */}
{rightSlot && <div>{rightSlot}</div>}
</div>
{/* Lado derecho parametrizable */}
{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",

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

@ -81,30 +81,24 @@ export const InvoiceListPage = () => {
<AppHeader>
<PageHeader
title={t("pages.list.title")}
description={t("pages.list.description")}
rightSlot={
<></>}
<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>
}
/>
</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"}>
<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" />

26
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,24 +12,27 @@ 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)}>
<div className='xl:flex xl:flex-row-reverse xl:items-start'>
<div className='w-full xl:w-6/12'>
<FormDebug />
<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 />
</div>
<div className='w-full xl:grow space-y-6'>
<CustomerBasicInfoFields />
<CustomerContactFields />
<CustomerAddressFields />
<CustomerAdditionalConfigFields />
</div>
</div>
<div className='w-full xl:grow space-y-6'>
<CustomerBasicInfoFields />
<CustomerContactFields />
<CustomerAddressFields />
<CustomerAdditionalConfigFields />
</div>
</div>
</section>
</form>
);
};

36
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,33 +72,25 @@ export const CustomersListPage = () => {
return (
<>
<AppHeader>
<AppBreadcrumb />
<PageHeader
title={t("pages.list.title")}
description={t("pages.list.description")}
rightSlot={
<></>}
<div className='flex items-center space-x-2'>
<Button
onClick={() => navigate("/customers/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>
}
/>
</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

71
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>
<UnsavedChangesProvider isDirty={form.formState.isDirty}>
<AppHeader>
<PageHeader
backIcon
title={t("pages.update.title")}
description={t("pages.update.description")}
rightSlot={
<UpdateCommitButtonGroup
isLoading={isUpdating}
disabled={isUpdating}
@ -151,27 +146,31 @@ export const CustomerUpdatePage = () => {
onBack={() => handleBack()}
onReset={() => handleReset()}
/>
</div>
{/* Alerta de error de actualización (si ha fallado el último intento) */}
{isUpdateError && (
<ErrorAlert
title={t("pages.update.errorTitle", "No se pudo guardar los cambios")}
message={
(updateError as Error)?.message ??
t("pages.update.errorMsg", "Revisa los datos e inténtalo de nuevo.")
}
/>
)}
}
/>
</AppHeader>
<AppContent>
{/* Alerta de error de actualización (si ha fallado el último intento) */}
{isUpdateError && (
<ErrorAlert
title={t("pages.update.errorTitle", "No se pudo guardar los cambios")}
message={
(updateError as Error)?.message ??
t("pages.update.errorMsg", "Revisa los datos e inténtalo de nuevo.")
}
/>
)}
<FormProvider {...form}>
<CustomerEditForm
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>
<FormProvider {...form}>
<CustomerEditForm
formId={"customer-update-form"} // para que el botón del header pueda hacer submit
onSubmit={handleSubmit}
onError={handleError}
/>
</FormProvider>
</UnsavedChangesProvider>
</AppContent>
</>
</UnsavedChangesProvider>
);
};

485
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'>
<Badge variant='secondary' className='font-mono'>
{customer?.reference}
</Badge>
<Badge variant='outline'>{customer?.is_company ? "Empresa" : "Persona"}</Badge>
</div>
</div>
</div>
<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?.tin}
</Badge>
<Badge variant='outline'>{customer?.is_company ? "Empresa" : "Persona"}</Badge>
</div>}
rightSlot={
<div className='flex gap-2'>
<Button variant='outline' size='icon' onClick={() => navigate("/customers/list")}>
<MoreVertical className='h-4 w-4' />
@ -92,248 +80,249 @@ 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 */}
<Card>
<CardHeader>
<CardTitle className='flex items-center gap-2 text-lg'>
<FileText className='size-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?.legal_record}</dd>
</div>
<div>
<dt className='text-sm font-medium text-muted-foreground'>
Impuestos por Defecto
</dt>
<dd className='mt-1'>
{customer?.default_taxes.map((tax) => (<Badge key={tax} variant={"secondary"}>{tax}</Badge>))}
</dd>
</div>
</CardContent>
</Card>
{/* 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='size-5 text-primary' />
Información Básica
</CardTitle>
</CardHeader>
<CardContent className='space-y-4'>
{/* Dirección */}
<Card>
<CardHeader>
<CardTitle className='flex items-center gap-2 text-lg'>
<MapPin className='size-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?.street}
{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'>Nombre</dt>
<dd className='mt-1 text-base text-foreground'>{customer?.name}</dd>
<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'>Referencia</dt>
<dd className='mt-1 font-mono text-base text-foreground'>
{customer?.reference}
</dd>
<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'>Registro Legal</dt>
<dd className='mt-1 text-base text-foreground'>{customer?.legalRecord}</dd>
<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>
<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>
</div>
</CardContent>
</Card>
{/* Dirección */}
<Card>
<CardHeader>
<CardTitle className='flex items-center gap-2 text-lg'>
<MapPin className='size-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='size-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>
{/* Información de Contacto */}
<Card className='md:col-span-2'>
<CardHeader>
<CardTitle className='flex items-center gap-2 text-lg'>
<Mail className='size-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>
)}
{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?.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>
)}
{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>
)}
{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>
</CardContent>
</Card>
{/* Preferencias */}
<Card className='md:col-span-2'>
<CardHeader>
<CardTitle className='flex items-center gap-2 text-lg'>
<Languages className='size-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>
{/* 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 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>
</CardContent>
</Card>
{/* Preferencias */}
<Card className='md:col-span-2'>
<CardHeader>
<CardTitle className='flex items-center gap-2 text-lg'>
<Languages className='size-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>
</CardContent>
</Card>
</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>
</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>