Facturas de cliente

This commit is contained in:
David Arranz 2025-09-19 11:29:49 +02:00
parent 1919a54dc2
commit a30d914680
17 changed files with 130 additions and 55 deletions

View File

@ -0,0 +1,7 @@
import { UtcDate } from "@repo/rdx-ddd";
export function formatDateDTO(dateString: string) {
const result = UtcDate.createFromISO(dateString).data;
return result.toDateString();
}

View File

@ -2,6 +2,10 @@ import { MoneyDTO } from "@erp/core";
import { MoneyValue } from "@repo/rdx-ddd"; import { MoneyValue } from "@repo/rdx-ddd";
export function formatMoneyDTO(amount: MoneyDTO, locale: string) { export function formatMoneyDTO(amount: MoneyDTO, locale: string) {
if (amount.value === "") {
return "";
}
const money = MoneyValue.create({ const money = MoneyValue.create({
value: Number(amount.value), value: Number(amount.value),
currency_code: amount.currency_code, currency_code: amount.currency_code,

View File

@ -1,11 +1,11 @@
import { PercentageDTO } from "@erp/core"; import { PercentageDTO } from "@erp/core";
import { Percentage } from "@repo/rdx-ddd"; import { Percentage } from "@repo/rdx-ddd";
export function formatPercentageDTO(Percentage_value: PercentageDTO) { export function formatPercentageDTO(Percentage_value: PercentageDTO, locale: string) {
const value = Percentage.create({ const value = Percentage.create({
value: Number(Percentage_value.value), value: Number(Percentage_value.value),
scale: Number(Percentage_value.scale), scale: Number(Percentage_value.scale),
}).data; }).data;
return value.toNumber; return value.format(locale);
} }

View File

@ -2,10 +2,14 @@ import { QuantityDTO } from "@erp/core";
import { Quantity } from "@repo/rdx-ddd"; import { Quantity } from "@repo/rdx-ddd";
export function formatQuantityDTO(quantity_value: QuantityDTO) { export function formatQuantityDTO(quantity_value: QuantityDTO) {
if (quantity_value.value === "") {
return "";
}
const value = Quantity.create({ const value = Quantity.create({
value: Number(quantity_value.value), value: Number(quantity_value.value),
scale: Number(quantity_value.scale), scale: Number(quantity_value.scale),
}).data; }).data;
return value.toNumber; return value.format();
} }

View File

@ -1,3 +1,4 @@
export * from "./format-date-dto";
export * from "./format-money-dto"; export * from "./format-money-dto";
export * from "./format-percentage-dto"; export * from "./format-percentage-dto";
export * from "./format-quantity-dto"; export * from "./format-quantity-dto";

View File

@ -17,6 +17,7 @@ export class CustomerInvoiceItemsFullPresenter extends Presenter {
return { return {
id: invoiceItem.id.toPrimitive(), id: invoiceItem.id.toPrimitive(),
isNonValued: String(invoiceItem.isNonValued),
position: String(index), position: String(index),
description: toEmptyString(invoiceItem.description, (value) => value.toPrimitive()), description: toEmptyString(invoiceItem.description, (value) => value.toPrimitive()),

View File

@ -1,7 +1,7 @@
import { IPresenterOutputParams, Presenter } from "@erp/core/api"; import { IPresenterOutputParams, Presenter } from "@erp/core/api";
import { GetCustomerInvoiceByIdResponseDTO } from "@erp/customer-invoices/common"; import { GetCustomerInvoiceByIdResponseDTO } from "@erp/customer-invoices/common";
import { ArrayElement } from "@repo/rdx-utils"; import { ArrayElement } from "@repo/rdx-utils";
import { formatMoneyDTO, formatPercentageDTO, formatQuantityDTO } from "../../helpers"; import { formatMoneyDTO, formatQuantityDTO } from "../../helpers";
type CustomerInvoiceItemsDTO = GetCustomerInvoiceByIdResponseDTO["items"]; type CustomerInvoiceItemsDTO = GetCustomerInvoiceByIdResponseDTO["items"];
type CustomerInvoiceItemDTO = ArrayElement<CustomerInvoiceItemsDTO>; type CustomerInvoiceItemDTO = ArrayElement<CustomerInvoiceItemsDTO>;
@ -20,8 +20,9 @@ export class CustomerInvoiceItemsReportPersenter extends Presenter<
unit_amount: formatMoneyDTO(invoiceItem.unit_amount, this._locale), unit_amount: formatMoneyDTO(invoiceItem.unit_amount, this._locale),
subtotal_amount: formatMoneyDTO(invoiceItem.subtotal_amount, this._locale), subtotal_amount: formatMoneyDTO(invoiceItem.subtotal_amount, this._locale),
discount_percetage: formatPercentageDTO(invoiceItem.discount_percentage), // discount_percetage: formatPercentageDTO(invoiceItem.discount_percentage, this._locale),
discount_amount: formatMoneyDTO(invoiceItem.discount_amount, this._locale), discount_amount: formatMoneyDTO(invoiceItem.discount_amount, this._locale),
taxable_amount: formatMoneyDTO(invoiceItem.taxable_amount, this._locale),
taxes_amount: formatMoneyDTO(invoiceItem.taxes_amount, this._locale), taxes_amount: formatMoneyDTO(invoiceItem.taxes_amount, this._locale),
total_amount: formatMoneyDTO(invoiceItem.total_amount, this._locale), total_amount: formatMoneyDTO(invoiceItem.total_amount, this._locale),
}; };

View File

@ -1,6 +1,6 @@
import { Presenter } from "@erp/core/api"; import { Presenter } from "@erp/core/api";
import { GetCustomerInvoiceByIdResponseDTO } from "../../../../common/dto"; import { GetCustomerInvoiceByIdResponseDTO } from "../../../../common/dto";
import { formatMoneyDTO, formatPercentageDTO } from "../../helpers"; import { formatDateDTO, formatMoneyDTO, formatPercentageDTO } from "../../helpers";
export class CustomerInvoiceReportPresenter extends Presenter< export class CustomerInvoiceReportPresenter extends Presenter<
GetCustomerInvoiceByIdResponseDTO, GetCustomerInvoiceByIdResponseDTO,
@ -21,9 +21,12 @@ export class CustomerInvoiceReportPresenter extends Presenter<
return { return {
...invoiceDTO, ...invoiceDTO,
items: itemsDTO, items: itemsDTO,
invoice_date: formatDateDTO(invoiceDTO.invoice_date),
subtotal_amount: formatMoneyDTO(invoiceDTO.subtotal_amount, locale), subtotal_amount: formatMoneyDTO(invoiceDTO.subtotal_amount, locale),
discount_percetage: formatPercentageDTO(invoiceDTO.discount_percentage), discount_percetage: formatPercentageDTO(invoiceDTO.discount_percentage, locale),
discount_amount: formatMoneyDTO(invoiceDTO.discount_amount, locale), discount_amount: formatMoneyDTO(invoiceDTO.discount_amount, locale),
taxable_amount: formatMoneyDTO(invoiceDTO.taxable_amount, locale),
taxes_amount: formatMoneyDTO(invoiceDTO.taxes_amount, locale), taxes_amount: formatMoneyDTO(invoiceDTO.taxes_amount, locale),
total_amount: formatMoneyDTO(invoiceDTO.total_amount, locale), total_amount: formatMoneyDTO(invoiceDTO.total_amount, locale),
}; };

View File

@ -20,6 +20,8 @@ export class CustomerInvoiceReportPDFPresenter extends Presenter<
const htmlData = htmlPresenter.toOutput(customerInvoice); const htmlData = htmlPresenter.toOutput(customerInvoice);
console.log(htmlData);
// Generar el PDF con Puppeteer // Generar el PDF con Puppeteer
const browser = await puppeteer.launch({ const browser = await puppeteer.launch({
args: [ args: [
@ -44,6 +46,10 @@ export class CustomerInvoiceReportPDFPresenter extends Presenter<
right: "10mm", right: "10mm",
top: "10mm", top: "10mm",
}, },
landscape: false,
preferCSSPageSize: true,
omitBackground: false,
printBackground: true,
}); });
await browser.close(); await browser.close();

View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.css"
referrerpolicy="no-referrer" /> referrerpolicy="no-referrer" />
<title>Factura F26200</title> <title>Factura F26200</title>
<style> <style>
@ -23,6 +23,10 @@
padding-bottom: 0; padding-bottom: 0;
} }
.accent-color {
background-color: #F08119;
}
.company-info, .company-info,
.invoice-meta { .invoice-meta {
width: 48%; width: 48%;
@ -52,7 +56,7 @@
table th, table th,
table td { table td {
border: 0px solid #ccc; border: 0px solid #ccc;
padding: 10px; padding: 3px 10px;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
} }
@ -84,7 +88,15 @@
background-color: #eef; background-color: #eef;
} }
.accent-color {
background-color: #F08119;
}
@media print { @media print {
* {
-webkit-print-color-adjust: exact;
}
thead { thead {
display: table-header-group; display: table-header-group;
} }
@ -106,7 +118,7 @@
<div class="flex w-full"> <div class="flex w-full">
<div class="p-1 "> <div class="p-1 ">
<p>Factura nº:<strong>&nbsp;{{invoice_number}}</strong></p> <p>Factura nº:<strong>&nbsp;{{invoice_number}}</strong></p>
<p><span>Fecha:<strong>&nbsp;{{operation_date}}</strong></p> <p><span>Fecha:<strong>&nbsp;{{invoice_date}}</strong></p>
<p><span>Página:</span>1 / 1</p> <p><span>Página:</span>1 / 1</p>
</div> </div>
<div class="p-1 ml-9"> <div class="p-1 ml-9">
@ -133,13 +145,16 @@
</header> </header>
<main id="main"> <main id="main">
<section id="details"> <section id="details" class="border-b border-black ">
<div class="relative pt-0 border-b border-black"> <div class="relative pt-0 border-b border-black">
<!-- Badge TOTAL superpuesto --> <!-- Badge TOTAL decorado con imagen -->
<div class="absolute -top-7 right-0"> <div class="absolute -top-9 right-0">
<div class="relative bg-[#f08119] text-white text-sm font-semibold px-3 py-1 shadow">
TOTAL: {{total_amount}} <div class="relative text-sm font-semibold text-black pr-2 pl-10 py-2 justify-center bg-red-900"
style="background-image: url('https://rodax-software.com/images/img-total2.jpg'); background-size: cover; background-position: left;">
<!-- Texto del total -->
<span>TOTAL: {{total_amount}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -159,9 +174,9 @@
{{#each items}} {{#each items}}
<tr> <tr>
<td>{{description}}</td> <td>{{description}}</td>
<td class="text-right">{{quantity.value}}</td> <td class="text-right">{{quantity}}</td>
<td class="text-right">{{unit_amount.value}}</td> <td class="text-right">{{unit_amount}}</td>
<td class="text-right">{{total_amount.value}}</td> <td class="text-right">{{total_amount}}</td>
</tr> </tr>
{{/each}} {{/each}}
</tbody> </tbody>
@ -179,32 +194,40 @@
</div> </div>
</div> </div>
<div class="grow"> <div class="relative pt-10 grow">
<table class="table-header min-w-full bg-transparent"> <table class="table-header min-w-full bg-transparent">
<tbody> <tbody>
{{#if percentage}} {{#if percentage}}
<tr> <tr>
<td class="px-4 py-2 text-right">Importe&nbsp;neto</td> <td class="px-4 text-right">Importe&nbsp;neto</td>
<td class="px-4 py-2 text-right">761,14 €</td> <td class="w-5">&nbsp;</td>
<td class="px-4 text-right">{{subtotal_amount}}</td>
</tr> </tr>
<tr> <tr>
<td class="px-4 py-2 text-right">Descuento&nbsp;0%</td> <td class="px-4 text-right">Descuento&nbsp;0%</td>
<td class="px-4 py-2 text-right">{{discount_amount.value}}</td> <td class="w-5">&nbsp;</td>
<td class="px-4 text-right">{{discount_amount.value}}</td>
</tr> </tr>
{{else}} {{else}}
<!-- dto 0--> <!-- dto 0-->
{{/if}} {{/if}}
<tr> <tr>
<td class="px-4 py-2 text-right">Base&nbsp;imponible</td> <td class="px-4 text-right">Base&nbsp;imponible</td>
<td class="px-4 py-2 text-right">{{subtotal_amount}}</td> <td class="w-5">&nbsp;</td>
<td class="px-4 text-right">{{taxable_amount}}</td>
</tr> </tr>
<tr> <tr>
<td class="px-4 py-2 text-right">IVA&nbsp;21%</td> <td class="px-4 text-right">IVA&nbsp;21%</td>
<td class="px-4 py-2 text-right">{{taxes_amount}}</td> <td class="w-5">&nbsp;</td>
<td class="px-4 text-right">{{taxes_amount}}</td>
</tr> </tr>
<tr class="bg-[#f08119] text-white font-semibold"> <tr class="">
<td class="px-4 py-2 text-right bg-amber-700">Total&nbsp;factura</td> <td class="px-4 text-right accent-color">
<td class="px-4 py-2 text-right">{{total_amount}}</td> Total&nbsp;factura
</td>
<td class="w-5">&nbsp;</td>
<td class="px-4 text-right accent-color">
{{total_amount}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -22,6 +22,8 @@ export interface CustomerInvoiceItemProps {
} }
export interface ICustomerInvoiceItem { export interface ICustomerInvoiceItem {
isNonValued: boolean;
description: Maybe<CustomerInvoiceItemDescription>; description: Maybe<CustomerInvoiceItemDescription>;
quantity: Maybe<ItemQuantity>; // Cantidad de unidades quantity: Maybe<ItemQuantity>; // Cantidad de unidades
@ -46,6 +48,8 @@ export class CustomerInvoiceItem
extends DomainEntity<CustomerInvoiceItemProps> extends DomainEntity<CustomerInvoiceItemProps>
implements ICustomerInvoiceItem implements ICustomerInvoiceItem
{ {
protected _isNonValued!: boolean;
public static create( public static create(
props: CustomerInvoiceItemProps, props: CustomerInvoiceItemProps,
id?: UniqueID id?: UniqueID
@ -59,6 +63,16 @@ export class CustomerInvoiceItem
return Result.ok(item); return Result.ok(item);
} }
protected constructor(props: CustomerInvoiceItemProps, id?: UniqueID) {
super(props, id);
this._isNonValued = this.quantity.isNone() || this.unitAmount.isNone();
}
get isNonValued(): boolean {
return this._isNonValued;
}
get description(): Maybe<CustomerInvoiceItemDescription> { get description(): Maybe<CustomerInvoiceItemDescription> {
return this.props.description; return this.props.description;
} }

View File

@ -42,6 +42,7 @@ export const GetCustomerInvoiceByIdResponseSchema = z.object({
items: z.array( items: z.array(
z.object({ z.object({
id: z.uuid(), id: z.uuid(),
isNonValued: z.string(),
position: z.string(), position: z.string(),
description: z.string(), description: z.string(),
quantity: QuantitySchema, quantity: QuantitySchema,

View File

@ -14,21 +14,25 @@ import { CustomerContactFields } from "./customer-contact-fields";
interface CustomerFormProps { interface CustomerFormProps {
formId: string; formId: string;
data?: CustomerData; defaultValues: CustomerData; // ✅ ya no recibe DTO
isPending?: boolean; isPending?: boolean;
/** onSubmit: (data: CustomerData) => void;
* Callback function to handle form submission. onError: (errors: FieldErrors<CustomerUpdateData>) => void;
* @param data - The customer data submitted by the form. errorMessage?: string; // ✅ prop nueva para mostrar error global
*/
onSubmit?: (data: CustomerUpdateData) => void;
} }
export const CustomerEditForm = ({ formId, data, onSubmit, isPending }: CustomerFormProps) => { export const CustomerEditForm = ({
formId,
defaultValues,
onSubmit,
isPending,
errorMessage,
}: CustomerFormProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const form = useForm<CustomerUpdateData>({ const form = useForm<CustomerUpdateData>({
resolver: zodResolver(CustomerUpdateSchema), resolver: zodResolver(CustomerUpdateSchema),
defaultValues: data, defaultValues,
disabled: isPending, disabled: isPending,
}); });
@ -36,24 +40,10 @@ export const CustomerEditForm = ({ formId, data, onSubmit, isPending }: Customer
isDirty: form.formState.isDirty, isDirty: form.formState.isDirty,
}); });
const handleSubmit = (data: CustomerUpdateData) => {
console.log("Datos del formulario:", data);
onSubmit?.(data);
};
const handleError = (errors: FieldErrors<CustomerUpdateData>) => {
console.error("Errores en el formulario:", errors);
// Aquí puedes manejar los errores, por ejemplo, mostrar un mensaje al usuario
};
const handleCancel = () => {
form.reset(data);
};
return ( return (
<Form {...form}> <Form {...form}>
<FormDebug form={form} /> <FormDebug form={form} />
<form id={formId} onSubmit={form.handleSubmit(handleSubmit, handleError)}> <form id={formId} onSubmit={form.handleSubmit(onSubmit, oError)}>
<div className='w-full grid grid-cols-1 space-y-8 space-x-8 xl:grid-cols-2'> <div className='w-full grid grid-cols-1 space-y-8 space-x-8 xl:grid-cols-2'>
<CustomerBasicInfoFields control={form.control} /> <CustomerBasicInfoFields control={form.control} />
<CustomerAddressFields control={form.control} /> <CustomerAddressFields control={form.control} />

View File

@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
import { useUrlParamId } from "@erp/core/hooks"; import { useUrlParamId } from "@erp/core/hooks";
import { showErrorToast, showSuccessToast } from "@repo/shadcn-ui/lib/utils"; import { showErrorToast, showSuccessToast } from "@repo/shadcn-ui/lib/utils";
import { FieldErrors } from "react-hook-form";
import { CustomerEditorSkeleton, ErrorAlert, NotFoundCard } from "../../components"; import { CustomerEditorSkeleton, ErrorAlert, NotFoundCard } from "../../components";
import { useCustomerQuery, useUpdateCustomerMutation } from "../../hooks"; import { useCustomerQuery, useUpdateCustomerMutation } from "../../hooks";
import { useTranslation } from "../../i18n"; import { useTranslation } from "../../i18n";
@ -46,6 +47,11 @@ export const CustomerUpdate = () => {
} }
}; };
const handleError = (errors: FieldErrors<CustomerUpdateData>) => {
console.error("Errores en el formulario:", errors);
// Aquí puedes manejar los errores, por ejemplo, mostrar un mensaje al usuario
};
if (isLoadingCustomer) { if (isLoadingCustomer) {
return <CustomerEditorSkeleton />; return <CustomerEditorSkeleton />;
} }
@ -127,9 +133,10 @@ export const CustomerUpdate = () => {
{/* Importante: proveemos un formId para que el botón del header pueda hacer submit */} {/* Importante: proveemos un formId para que el botón del header pueda hacer submit */}
<CustomerEditForm <CustomerEditForm
formId='customer-edit-form' formId='customer-edit-form'
data={customerData} defaultValues={defaultValues}
onSubmit={handleSubmit} onSubmit={handleSubmit}
isPending={isUpdating} isPending={isUpdating}
errorMessage={isUpdateError ? getErrorMessage(updateError) : undefined}
/> />
</div> </div>
</AppContent> </AppContent>

View File

@ -212,7 +212,6 @@ export class MoneyValue extends ValueObject<MoneyValueProps> implements IMoneyVa
* @returns Importe formateado * @returns Importe formateado
*/ */
format(locale: string): string { format(locale: string): string {
const value = this.value;
const currencyCode = this.currencyCode; const currencyCode = this.currencyCode;
const scale = this.scale; const scale = this.scale;

View File

@ -92,4 +92,14 @@ export class Percentage extends ValueObject<PercentageProps> {
scale: String(this.scale), scale: String(this.scale),
}; };
} }
format(locale: string): string {
const scale = this.scale;
return this.toNumber().toLocaleString(locale, {
style: "percent",
minimumFractionDigits: scale,
maximumSignificantDigits: scale,
});
}
} }

View File

@ -135,4 +135,8 @@ export class Quantity extends ValueObject<QuantityProps> {
return Quantity.create({ value: newValue, scale: newScale }); return Quantity.create({ value: newValue, scale: newScale });
} }
format(): string {
return this.toNumber().toLocaleString();
}
} }