.
This commit is contained in:
parent
5a4b457384
commit
6be0ad686c
@ -1,6 +1,12 @@
|
||||
import { formatCurrency } from "@erp/core";
|
||||
import { FieldDescription, FieldGroup, FieldLegend, FieldSet, Separator } from '@repo/shadcn-ui/components';
|
||||
import { cn } from '@repo/shadcn-ui/lib/utils';
|
||||
import {
|
||||
FieldDescription,
|
||||
FieldGroup,
|
||||
FieldLegend,
|
||||
FieldSet,
|
||||
Separator,
|
||||
} from "@repo/shadcn-ui/components";
|
||||
import { cn } from "@repo/shadcn-ui/lib/utils";
|
||||
import { ReceiptIcon } from "lucide-react";
|
||||
import { ComponentProps } from "react";
|
||||
import { useFormContext, useWatch } from "react-hook-form";
|
||||
@ -20,46 +26,55 @@ export const InvoiceTotals = (props: ComponentProps<"fieldset">) => {
|
||||
defaultValue: [],
|
||||
});
|
||||
|
||||
const subtotal_amount = useWatch({
|
||||
control,
|
||||
name: "subtotal_amount",
|
||||
defaultValue: 0,
|
||||
});
|
||||
|
||||
return (
|
||||
<FieldSet {...props}>
|
||||
<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>
|
||||
|
||||
<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'>
|
||||
|
||||
<div className='space-y-1.5'>
|
||||
{/* Sección: Subtotal y Descuentos */}
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">Subtotal sin descuento</span>
|
||||
<span className="font-medium tabular-nums text-muted-foreground">
|
||||
{formatCurrency(getValues('subtotal_amount'), 2, currency_code, language_code)}
|
||||
<div className='flex justify-between text-sm'>
|
||||
<span className='text-muted-foreground'>Subtotal sin descuento</span>
|
||||
<span className='font-medium tabular-nums text-muted-foreground'>
|
||||
{formatCurrency(subtotal_amount, 2, currency_code, language_code)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-muted-foreground">Descuento global</span>
|
||||
<div className='flex justify-between text-sm'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<span className='text-muted-foreground'>Descuento global</span>
|
||||
<PercentageInputField
|
||||
control={control}
|
||||
name={"discount_percentage"}
|
||||
readOnly={readOnly}
|
||||
inputId={"header-discount-percentage"}
|
||||
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>
|
||||
<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>
|
||||
|
||||
|
||||
{/* Sección: Base Imponible */}
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-foreground">Base imponible</span>
|
||||
<span className="font-medium tabular-nums">
|
||||
{formatCurrency(getValues('taxable_amount'), 2, currency_code, language_code)}
|
||||
<div className='flex justify-between text-sm'>
|
||||
<span className='text-foreground'>Base imponible</span>
|
||||
<span className='font-medium tabular-nums'>
|
||||
{formatCurrency(getValues("taxable_amount"), 2, currency_code, language_code)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -67,10 +82,8 @@ export const InvoiceTotals = (props: ComponentProps<"fieldset">) => {
|
||||
<Separator />
|
||||
|
||||
{/* Sección: Impuestos */}
|
||||
<div className="space-y-1.5">
|
||||
<h3
|
||||
className="text-xs font-semibold text-muted-foreground uppercase tracking-wide"
|
||||
>
|
||||
<div className='space-y-1.5'>
|
||||
<h3 className='text-xs font-semibold text-muted-foreground uppercase tracking-wide'>
|
||||
Impuestos y retenciones
|
||||
</h3>
|
||||
|
||||
@ -88,9 +101,7 @@ export const InvoiceTotals = (props: ComponentProps<"fieldset">) => {
|
||||
if (taxesInGroup?.length === 0) return null;
|
||||
|
||||
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) => {
|
||||
const tax = taxCatalog.findByCode(item.tax_code).match(
|
||||
(t) => t,
|
||||
@ -99,43 +110,36 @@ export const InvoiceTotals = (props: ComponentProps<"fieldset">) => {
|
||||
return (
|
||||
<div
|
||||
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="font-medium tabular-nums text-sm text-muted-foreground">
|
||||
{formatCurrency(
|
||||
item.taxes_amount,
|
||||
2,
|
||||
currency_code,
|
||||
language_code
|
||||
)}
|
||||
<span className='text-muted-foreground text-sm'>{tax?.name}</span>
|
||||
<span className='font-medium tabular-nums text-sm text-muted-foreground'>
|
||||
{formatCurrency(item.taxes_amount, 2, currency_code, language_code)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="flex justify-between text-sm mt-3">
|
||||
<span className="text-foreground">Total de impuestos</span>
|
||||
<span className="font-medium tabular-nums">
|
||||
{formatCurrency(getValues('taxes_amount'), 2, currency_code, language_code)}
|
||||
<div className='flex justify-between text-sm mt-3'>
|
||||
<span className='text-foreground'>Total de impuestos</span>
|
||||
<span className='font-medium tabular-nums'>
|
||||
{formatCurrency(getValues("taxes_amount"), 2, currency_code, language_code)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="flex justify-between text-sm ">
|
||||
<span className="font-bold text-foreground">Total de la factura</span>
|
||||
<span className="font-bold tabular-nums">
|
||||
{formatCurrency(getValues('total_amount'), 2, currency_code, language_code)}
|
||||
<div className='flex justify-between text-sm '>
|
||||
<span className='font-bold text-foreground'>Total de la factura</span>
|
||||
<span className='font-bold tabular-nums'>
|
||||
{formatCurrency(getValues("total_amount"), 2, currency_code, language_code)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</FieldGroup>
|
||||
</FieldSet >
|
||||
</FieldSet>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,49 +1,47 @@
|
||||
import { DataTable, useWithRowSelection } from '@repo/rdx-ui/components';
|
||||
import { useMemo } from 'react';
|
||||
import { DataTable, useWithRowSelection } from "@repo/rdx-ui/components";
|
||||
import { useMemo } from "react";
|
||||
import { useFieldArray, useFormContext } from "react-hook-form";
|
||||
import { useInvoiceContext } from '../../../context';
|
||||
import { useInvoiceAutoRecalc } from '../../../hooks';
|
||||
import { useTranslation } from '../../../i18n';
|
||||
import { InvoiceFormData, defaultCustomerInvoiceItemFormData } from '../../../schemas';
|
||||
import { debugIdCol } from './debug-id-col';
|
||||
import { ItemRowEditor } from './item-row-editor';
|
||||
import { useItemsColumns } from './use-items-columns';
|
||||
|
||||
import { useInvoiceContext } from "../../../context";
|
||||
import { useInvoiceAutoRecalc } from "../../../hooks";
|
||||
import { useTranslation } from "../../../i18n";
|
||||
import { defaultCustomerInvoiceItemFormData, InvoiceFormData } from "../../../schemas";
|
||||
import { debugIdCol } from "./debug-id-col";
|
||||
import { ItemRowEditor } from "./item-row-editor";
|
||||
import { useItemsColumns } from "./use-items-columns";
|
||||
|
||||
const createEmptyItem = () => defaultCustomerInvoiceItemFormData;
|
||||
|
||||
export const ItemsEditor = () => {
|
||||
const { t } = useTranslation();
|
||||
const context = useInvoiceContext();
|
||||
const form = useFormContext<InvoiceFormData>();
|
||||
const { control, getValues } = form;
|
||||
const { t } = useTranslation();
|
||||
const context = useInvoiceContext();
|
||||
const form = useFormContext<InvoiceFormData>();
|
||||
const { control, getValues } = form;
|
||||
|
||||
useInvoiceAutoRecalc(form, context);
|
||||
useInvoiceAutoRecalc(form, context);
|
||||
|
||||
const { fields, append, remove, move, insert, update } = useFieldArray({
|
||||
control,
|
||||
name: "items",
|
||||
});
|
||||
const { fields, append, remove, move, insert, update } = useFieldArray({
|
||||
control,
|
||||
name: "items",
|
||||
});
|
||||
|
||||
const baseColumns = useWithRowSelection(useItemsColumns(), true);
|
||||
const columns = useMemo(
|
||||
() => [...baseColumns, debugIdCol],
|
||||
[baseColumns]
|
||||
);
|
||||
const baseColumns = useWithRowSelection(useItemsColumns(), true);
|
||||
const columns = useMemo(() => [...baseColumns, debugIdCol], [baseColumns]);
|
||||
|
||||
return (
|
||||
<div className="space-y-0">
|
||||
<DataTable columns={columns as any} data={fields}
|
||||
meta={{
|
||||
tableOps: {
|
||||
onAdd: () => append({ ...createEmptyItem() }),
|
||||
//appendItem: (item: any) => append(item),
|
||||
},
|
||||
rowOps: {
|
||||
remove: (i: number) => remove(i),
|
||||
move: (from: number, to: number) => move(from, to),
|
||||
//insertItem: (index: number, item: any) => insert(index, item),
|
||||
/*duplicateItems: (indexes: number[], table: Table<InvoiceFormData>) => {
|
||||
return (
|
||||
<div className='space-y-0'>
|
||||
<DataTable
|
||||
columns={columns as any}
|
||||
data={fields}
|
||||
meta={{
|
||||
tableOps: {
|
||||
onAdd: () => append({ ...createEmptyItem() }),
|
||||
//appendItem: (item: any) => append(item),
|
||||
},
|
||||
rowOps: {
|
||||
remove: (i: number) => remove(i),
|
||||
move: (from: number, to: number) => move(from, to),
|
||||
//insertItem: (index: number, item: any) => insert(index, item),
|
||||
/*duplicateItems: (indexes: number[], table: Table<InvoiceFormData>) => {
|
||||
const items = getValues("items") || [];
|
||||
// duplicate in descending order to keep indexes stable
|
||||
[...indexes].sort((a, b) => b - a).forEach(i => {
|
||||
@ -54,34 +52,33 @@ export const ItemsEditor = () => {
|
||||
}
|
||||
});
|
||||
},*/
|
||||
/*deleteItems: (indexes: number[]) => {
|
||||
/*deleteItems: (indexes: number[]) => {
|
||||
// remove in descending order to avoid shifting issues
|
||||
[...indexes].sort((a, b) => b - a).forEach(i => remove(i));
|
||||
},*/
|
||||
//updateItem: (index: number, item: any) => update(index, item),
|
||||
},
|
||||
bulkOps: {
|
||||
duplicateSelected: (indexes, table) => {
|
||||
const originalData = indexes.map((i) => {
|
||||
const { id, ...original } = table.getRowModel().rows[i].original;
|
||||
return original;
|
||||
});
|
||||
|
||||
insert(indexes[indexes.length - 1] + 1, originalData, { shouldFocus: true });
|
||||
table.resetRowSelection();
|
||||
},
|
||||
removeSelected: (indexes) => indexes.sort((a, b) => b - a).forEach(remove),
|
||||
moveSelectedUp: (indexes) => indexes.forEach((i) => move(i, i - 1)),
|
||||
moveSelectedDown: (indexes) => [...indexes].reverse().forEach((i) => move(i, i + 1)),
|
||||
}
|
||||
}}
|
||||
enableRowSelection
|
||||
enablePagination={false}
|
||||
pageSize={999}
|
||||
readOnly={false}
|
||||
EditorComponent={ItemRowEditor}
|
||||
/>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
//updateItem: (index: number, item: any) => update(index, item),
|
||||
},
|
||||
bulkOps: {
|
||||
duplicateSelected: (indexes, table) => {
|
||||
const originalData = indexes.map((i) => {
|
||||
const { id, ...original } = table.getRowModel().rows[i].original;
|
||||
return original;
|
||||
});
|
||||
|
||||
insert(indexes[indexes.length - 1] + 1, originalData, { shouldFocus: true });
|
||||
table.resetRowSelection();
|
||||
},
|
||||
removeSelected: (indexes) => indexes.sort((a, b) => b - a).forEach(remove),
|
||||
moveSelectedUp: (indexes) => indexes.forEach((i) => move(i, i - 1)),
|
||||
moveSelectedDown: (indexes) => [...indexes].reverse().forEach((i) => move(i, i + 1)),
|
||||
},
|
||||
}}
|
||||
enableRowSelection
|
||||
enablePagination={false}
|
||||
pageSize={999}
|
||||
readOnly={false}
|
||||
EditorComponent={ItemRowEditor}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user