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

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

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

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

      <Description>{t("form_groups.totals.description")}</Description>
      <FieldGroup className='grid grid-cols-1'>
        <div className='space-y-3'>
          <div className='flex justify-between items-center'>
            <Label className='text-sm'>Subtotal</Label>
            <span className='font-medium tabular-nums'>{formatCurrency(getValues('subtotal_amount'), 2, currency_code, language_code)}</span>
          </div>

          <div className='flex justify-between items-center gap-4'>
            <Label className='text-sm'>Descuento global (%)</Label>
            <div className='flex items-center gap-2'>
              <Controller
                control={control}
                name={"discount_percentage"}
                render={({
                  field, fieldState
                }) => (
                  <Input
                    readOnly={false}
                    value={field.value}
                    onChange={field.onChange}
                    disabled={fieldState.isValidating}
                    onBlur={field.onBlur}
                    className='w-20 text-right'
                  />)}
              />
            </div>
          </div>

          <div className='flex justify-between items-center'>
            <Label className='text-sm'>Importe del descuento</Label>
            <span className='font-medium text-destructive tabular-nums'>
              -{formatCurrency(getValues("discount_amount"), 2, currency_code, language_code)}
            </span>
          </div>

          <Separator className='bg-muted-foreground' />

          <div className='flex justify-between items-center'>
            <Label className='text-sm'>Base imponible</Label>
            <span className='font-medium tabular-nums'>{formatCurrency(getValues('taxable_amount'), 2, currency_code, language_code)}</span>
          </div>

          <div className='flex justify-between items-center'>
            <Label className='text-sm'>Total de impuestos</Label>
            <span className='font-medium tabular-nums'>{formatCurrency(getValues('taxes_amount'), 2, currency_code, language_code)}</span>
          </div>

          <Separator className='bg-muted-foreground h-0.5' />

          <div className='flex justify-between items-center'>
            <Label className='text-xl font-semibold'>Total de la factura</Label>
            <span className='text-xl font-bold text-primary tabular-nums'>
              {formatCurrency(getValues('total_amount'), 2, currency_code, language_code)}
            </span>
          </div>
        </div>
      </FieldGroup>
    </Fieldset>
  );
};