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

.

Browse Source
This commit is contained in:
David Arranz 2025-11-09 12:05:33 +01:00
parent 5a4b457384
commit 6be0ad686c
2 changed files with 110 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
modules/customer-invoices/src/web/components/editor/invoice-totals.tsx
View File

@ -1,6 +1,12 @@
import { formatCurrency } from "@erp/core"; import { formatCurrency } from "@erp/core";
import { FieldDescription, FieldGroup, FieldLegend, FieldSet, Separator } from '@repo/shadcn-ui/components'; import {
import { cn } from '@repo/shadcn-ui/lib/utils'; FieldDescription,
FieldGroup,
FieldLegend,
FieldSet,
Separator,
} from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { ReceiptIcon } from "lucide-react"; import { ReceiptIcon } from "lucide-react";
import { ComponentProps } from "react"; import { ComponentProps } from "react";
import { useFormContext, useWatch } from "react-hook-form"; import { useFormContext, useWatch } from "react-hook-form";
@ -20,46 +26,55 @@ export const InvoiceTotals = (props: ComponentProps<"fieldset">) => {
defaultValue: [], defaultValue: [],
}); });
const subtotal_amount = useWatch({
control,
name: "subtotal_amount",
defaultValue: 0,
});
return ( return (
<FieldSet {...props}> <FieldSet {...props}>
<FieldLegend className='hidden'> <FieldLegend className='hidden'>
<ReceiptIcon className='size-6 text-muted-foreground' />{t("form_groups.totals.title")} <ReceiptIcon className='size-6 text-muted-foreground' />
{t("form_groups.totals.title")}
</FieldLegend> </FieldLegend>
<FieldDescription className='hidden'>{t("form_groups.totals.description")}</FieldDescription> <FieldDescription className='hidden'>{t("form_groups.totals.description")}</FieldDescription>
<FieldGroup className='grid grid-cols-1 border rounded-lg bg-muted/10 p-4 gap-4'> <FieldGroup className='grid grid-cols-1 border rounded-lg bg-muted/10 p-4 gap-4'>
<div className='space-y-1.5'> <div className='space-y-1.5'>
{/* Sección: Subtotal y Descuentos */} {/* Sección: Subtotal y Descuentos */}
<div className="flex justify-between text-sm"> <div className='flex justify-between text-sm'>
<span className="text-muted-foreground">Subtotal sin descuento</span> <span className='text-muted-foreground'>Subtotal sin descuento</span>
<span className="font-medium tabular-nums text-muted-foreground"> <span className='font-medium tabular-nums text-muted-foreground'>
{formatCurrency(getValues('subtotal_amount'), 2, currency_code, language_code)} {formatCurrency(subtotal_amount, 2, currency_code, language_code)}
</span> </span>
</div> </div>
<div className="flex justify-between text-sm"> <div className='flex justify-between text-sm'>
<div className="flex items-center gap-3"> <div className='flex items-center gap-3'>
<span className="text-muted-foreground">Descuento global</span> <span className='text-muted-foreground'>Descuento global</span>
<PercentageInputField <PercentageInputField
control={control} control={control}
name={"discount_percentage"} name={"discount_percentage"}
readOnly={readOnly} readOnly={readOnly}
inputId={"header-discount-percentage"} inputId={"header-discount-percentage"}
showSuffix={true} showSuffix={true}
className={cn("w-20 text-right tabular-nums bg-background", "border-input border text-sm shadow-xs")} className={cn(
"w-20 text-right tabular-nums bg-background",
"border-input border text-sm shadow-xs"
)}
/> />
</div> </div>
<span className="font-medium text-destructive tabular-nums">-{formatCurrency(getValues("discount_amount"), 2, currency_code, language_code)}</span> <span className='font-medium text-destructive tabular-nums'>
-{formatCurrency(getValues("discount_amount"), 2, currency_code, language_code)}
</span>
</div> </div>
{/* Sección: Base Imponible */} {/* Sección: Base Imponible */}
<div className="flex justify-between text-sm"> <div className='flex justify-between text-sm'>
<span className="text-foreground">Base imponible</span> <span className='text-foreground'>Base imponible</span>
<span className="font-medium tabular-nums"> <span className='font-medium tabular-nums'>
{formatCurrency(getValues('taxable_amount'), 2, currency_code, language_code)} {formatCurrency(getValues("taxable_amount"), 2, currency_code, language_code)}
</span> </span>
</div> </div>
</div> </div>
@ -67,10 +82,8 @@ export const InvoiceTotals = (props: ComponentProps<"fieldset">) => {
<Separator /> <Separator />
{/* Sección: Impuestos */} {/* Sección: Impuestos */}
<div className="space-y-1.5"> <div className='space-y-1.5'>
<h3 <h3 className='text-xs font-semibold text-muted-foreground uppercase tracking-wide'>
className="text-xs font-semibold text-muted-foreground uppercase tracking-wide"
>
Impuestos y retenciones Impuestos y retenciones
</h3> </h3>
@ -88,9 +101,7 @@ export const InvoiceTotals = (props: ComponentProps<"fieldset">) => {
if (taxesInGroup?.length === 0) return null; if (taxesInGroup?.length === 0) return null;
return ( return (
<div key={`tax-group-${group}`} className='space-y-1.5 leading-3'>
<div key={`tax-group-${group}`} className="space-y-1.5 leading-3">
{taxesInGroup?.map((item) => { {taxesInGroup?.map((item) => {
const tax = taxCatalog.findByCode(item.tax_code).match( const tax = taxCatalog.findByCode(item.tax_code).match(
(t) => t, (t) => t,
@ -99,42 +110,35 @@ export const InvoiceTotals = (props: ComponentProps<"fieldset">) => {
return ( return (
<div <div
key={`${group}:${item.tax_code}`} key={`${group}:${item.tax_code}`}
className="flex items-center justify-between text-sm" className='flex items-center justify-between text-sm'
> >
<span className="text-muted-foreground text-sm">{tax?.name}</span> <span className='text-muted-foreground text-sm'>{tax?.name}</span>
<span className="font-medium tabular-nums text-sm text-muted-foreground"> <span className='font-medium tabular-nums text-sm text-muted-foreground'>
{formatCurrency( {formatCurrency(item.taxes_amount, 2, currency_code, language_code)}
item.taxes_amount,
2,
currency_code,
language_code
)}
</span> </span>
</div> </div>
); );
})} })}
</div> </div>
); );
})} })}
<div className="flex justify-between text-sm mt-3"> <div className='flex justify-between text-sm mt-3'>
<span className="text-foreground">Total de impuestos</span> <span className='text-foreground'>Total de impuestos</span>
<span className="font-medium tabular-nums"> <span className='font-medium tabular-nums'>
{formatCurrency(getValues('taxes_amount'), 2, currency_code, language_code)} {formatCurrency(getValues("taxes_amount"), 2, currency_code, language_code)}
</span> </span>
</div> </div>
</div> </div>
<Separator /> <Separator />
<div className="flex justify-between text-sm "> <div className='flex justify-between text-sm '>
<span className="font-bold text-foreground">Total de la factura</span> <span className='font-bold text-foreground'>Total de la factura</span>
<span className="font-bold tabular-nums"> <span className='font-bold tabular-nums'>
{formatCurrency(getValues('total_amount'), 2, currency_code, language_code)} {formatCurrency(getValues("total_amount"), 2, currency_code, language_code)}
</span> </span>
</div> </div>
</FieldGroup> </FieldGroup>
</FieldSet> </FieldSet>
); );

35
modules/customer-invoices/src/web/components/editor/items/items-editor.tsx
View File

@ -1,14 +1,13 @@
import { DataTable, useWithRowSelection } from '@repo/rdx-ui/components'; import { DataTable, useWithRowSelection } from "@repo/rdx-ui/components";
import { useMemo } from 'react'; import { useMemo } from "react";
import { useFieldArray, useFormContext } from "react-hook-form"; import { useFieldArray, useFormContext } from "react-hook-form";
import { useInvoiceContext } from '../../../context'; import { useInvoiceContext } from "../../../context";
import { useInvoiceAutoRecalc } from '../../../hooks'; import { useInvoiceAutoRecalc } from "../../../hooks";
import { useTranslation } from '../../../i18n'; import { useTranslation } from "../../../i18n";
import { InvoiceFormData, defaultCustomerInvoiceItemFormData } from '../../../schemas'; import { defaultCustomerInvoiceItemFormData, InvoiceFormData } from "../../../schemas";
import { debugIdCol } from './debug-id-col'; import { debugIdCol } from "./debug-id-col";
import { ItemRowEditor } from './item-row-editor'; import { ItemRowEditor } from "./item-row-editor";
import { useItemsColumns } from './use-items-columns'; import { useItemsColumns } from "./use-items-columns";
const createEmptyItem = () => defaultCustomerInvoiceItemFormData; const createEmptyItem = () => defaultCustomerInvoiceItemFormData;
@ -26,14 +25,13 @@ export const ItemsEditor = () => {
}); });
const baseColumns = useWithRowSelection(useItemsColumns(), true); const baseColumns = useWithRowSelection(useItemsColumns(), true);
const columns = useMemo( const columns = useMemo(() => [...baseColumns, debugIdCol], [baseColumns]);
() => [...baseColumns, debugIdCol],
[baseColumns]
);
return ( return (
<div className="space-y-0"> <div className='space-y-0'>
<DataTable columns={columns as any} data={fields} <DataTable
columns={columns as any}
data={fields}
meta={{ meta={{
tableOps: { tableOps: {
onAdd: () => append({ ...createEmptyItem() }), onAdd: () => append({ ...createEmptyItem() }),
@ -73,7 +71,7 @@ export const ItemsEditor = () => {
removeSelected: (indexes) => indexes.sort((a, b) => b - a).forEach(remove), removeSelected: (indexes) => indexes.sort((a, b) => b - a).forEach(remove),
moveSelectedUp: (indexes) => indexes.forEach((i) => move(i, i - 1)), moveSelectedUp: (indexes) => indexes.forEach((i) => move(i, i - 1)),
moveSelectedDown: (indexes) => [...indexes].reverse().forEach((i) => move(i, i + 1)), moveSelectedDown: (indexes) => [...indexes].reverse().forEach((i) => move(i, i + 1)),
} },
}} }}
enableRowSelection enableRowSelection
enablePagination={false} enablePagination={false}
@ -83,5 +81,4 @@ export const ItemsEditor = () => {
/> />
</div> </div>
); );
} };