Uecko_ERP/modules/customer-invoices/src/web/components/editor/invoice-tax-summary.tsx

import { formatCurrency } from '@erp/core';
import { Description, FieldGroup, Fieldset, Legend } from "@repo/rdx-ui/components";
import { Badge } from "@repo/shadcn-ui/components";
import { ReceiptIcon } from "lucide-react";
import { ComponentProps } from 'react';
import { useFormContext, useWatch } from "react-hook-form";
import { useInvoiceContext } from '../../context';
import { useTranslation } from "../../i18n";
import { InvoiceFormData } from "../../schemas";

export const InvoiceTaxSummary = (props: ComponentProps<"fieldset">) => {
  const { t } = useTranslation();
  const { control } = useFormContext<InvoiceFormData>();
  const { currency_code, language_code } = useInvoiceContext();


  const taxes = useWatch({
    control,
    name: "taxes",
    defaultValue: [],
  });

  const displayTaxes = taxes || [];

  return (
    <Fieldset {...props}>
      <Legend className='flex items-center gap-2 text-foreground'>
        <ReceiptIcon className='size-5' /> {t("form_groups.tax_resume.title")}
      </Legend>

      <Description>{t("form_groups.tax_resume.description")}</Description>
      <FieldGroup className='grid grid-cols-1'>
        <div className='space-y-3'>
          {displayTaxes.map((tax, index) => (

            <div key={`${tax.tax_code}-${index}`} className='border rounded-lg p-3 space-y-2 text-base '>
              <div className='flex items-center justify-between mb-2 '>
                <Badge variant='secondary' className='text-sm font-semibold'>
                  {tax.tax_label}
                </Badge>
              </div>
              <div className='space-y-2 text-sm'>
                <div className='flex justify-between'>
                  <span className='text-current'>Base para el impuesto:</span>
                  <span className='text-base text-current tabular-nums'>{formatCurrency(tax.taxable_amount, 2, currency_code, language_code)}</span>
                </div>
                <div className='flex justify-between'>
                  <span className='text-current font-semibold'>Importe de impuesto:</span>
                  <span className='text-base text-current font-semibold tabular-nums'>
                    {formatCurrency(tax.taxes_amount, 2, currency_code, language_code)}
                  </span>
                </div>
              </div>
            </div>
          ))}

          {displayTaxes.length === 0 && (
            <div className='text-center py-6 text-muted-foreground'>
              <ReceiptIcon className='size-8 mx-auto mb-2 opacity-50' />
              <p className='text-sm'>No hay impuestos aplicados</p>
            </div>
          )}
        </div>
      </FieldGroup>
    </Fieldset>
  );
};