Facturas de cliente

modules/core/src/web/components/form/index.ts

@@ -1,2 +1 @@
 export * from "./form-debug.tsx";
-export * from "./taxes-multi-select-field.tsx";

modules/core/src/web/components/form/taxes-multi-select-field.tsx

@@ -1,77 +0,0 @@
-// DatePickerField.tsx
-
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@repo/shadcn-ui/components";
-
-import { cn } from "@repo/shadcn-ui/lib/utils";
-import { Control, FieldPath, FieldValues } from "react-hook-form";
-import { useTranslation } from "../../i18n.ts";
-import { TaxesMultiSelect } from '../taxes-multi-select.tsx';
-
-export type TaxesMultiSelectFieldProps<TFormValues extends FieldValues> = {
-  control: Control<TFormValues>;
-  name: FieldPath<TFormValues>;
-  label?: string;
-  placeholder?: string;
-  description?: string;
-  disabled?: boolean;
-  required?: boolean;
-  readOnly?: boolean;
-  className?: string;
-  variant?: "default" | "secondary" | "destructive" | "inverted"
-};
-
-export function TaxesMultiSelectField<TFormValues extends FieldValues>({
-  control,
-  name,
-  label,
-  placeholder,
-  description,
-  disabled = false,
-  required = false,
-  readOnly = false,
-  className,
-  variant = "inverted",
-}: TaxesMultiSelectFieldProps<TFormValues>) {
-  const { t } = useTranslation();
-  const isDisabled = disabled || readOnly;
-
-  return (
-    <FormField
-      control={control}
-      name={name}
-      render={({ field }) => (
-        <FormItem className={cn("space-y-0", className)}>
-          {label && (
-            <div className='mb-1 flex justify-between'>
-              <div className='flex items-center gap-2'>
-                <FormLabel htmlFor={name} className='m-0'>
-                  {label}
-                </FormLabel>
-                {required && (
-                  <span className='text-xs text-destructive'>{t("common.required")}</span>
-                )}
-              </div>
-            </div>
-          )}
-          <FormControl>
-            <TaxesMultiSelect disabled={isDisabled} placeholder={placeholder} variant={variant} {...field} />
-          </FormControl>
-
-          <FormDescription
-            className={cn("text-xs text-muted-foreground", !description && "invisible")}
-          >
-            {description || "\u00A0"}
-          </FormDescription>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  );
-}

modules/core/src/web/components/index.ts

@@ -3,4 +3,3 @@ import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
 ModuleRegistry.registerModules([AllCommunityModule]);
 
 export * from "./form";
-export * from "./taxes-multi-select";

modules/core/src/web/components/taxes-multi-select.tsx

@@ -1,126 +0,0 @@
-import { MultiSelect } from "@repo/rdx-ui/components";
-import { useTranslation } from "../i18n";
-
-// Tipos
-type TaxGroup = "IVA" | "Retención" | "Recargo de equivalencia";
-
-interface TaxOption {
-  label: string;
-  value: string;
-  group: TaxGroup;
-}
-
-export const TaxesList: ReadonlyArray<TaxOption> = [
-  { label: "IVA 21%", value: "iva_21", group: "IVA" },
-  { label: "IVA 10%", value: "iva_10", group: "IVA" },
-  { label: "IVA 7,5%", value: "iva_7_5", group: "IVA" },
-  { label: "IVA 5%", value: "iva_5", group: "IVA" },
-  { label: "IVA 4%", value: "iva_4", group: "IVA" },
-  { label: "IVA 2%", value: "iva_2", group: "IVA" },
-  { label: "IVA 0%", value: "iva_0", group: "IVA" },
-  { label: "Exenta", value: "iva_exenta", group: "IVA" },
-  { label: "No sujeto", value: "iva_no_sujeto", group: "IVA" },
-  { label: "Iva Intracomunitario Bienes", value: "iva_intracomunitario_bienes", group: "IVA" },
-  { label: "Iva Intracomunitario Servicio", value: "iva_intracomunitario_servicio", group: "IVA" },
-  { label: "Exportación", value: "iva_exportacion", group: "IVA" },
-  { label: "Inv. Suj. Pasivo", value: "iva_inversion_sujeto_pasivo", group: "IVA" },
-
-  { label: "Retención 35%", value: "retencion_35", group: "Retención" },
-  { label: "Retención 19%", value: "retencion_19", group: "Retención" },
-  { label: "Retención 15%", value: "retencion_15", group: "Retención" },
-  { label: "Retención 7%", value: "retencion_7", group: "Retención" },
-  { label: "Retención 2%", value: "retencion_2", group: "Retención" },
-
-  { label: "REC 5,2%", value: "rec_5_2", group: "Recargo de equivalencia" },
-  { label: "REC 1,75%", value: "rec_1_75", group: "Recargo de equivalencia" },
-  { label: "REC 1,4%", value: "rec_1_4", group: "Recargo de equivalencia" },
-  { label: "REC 1%", value: "rec_1", group: "Recargo de equivalencia" },
-  { label: "REC 0,62%", value: "rec_0_62", group: "Recargo de equivalencia" },
-  { label: "REC 0,5%", value: "rec_0_5", group: "Recargo de equivalencia" },
-  { label: "REC 0,26%", value: "rec_0_26", group: "Recargo de equivalencia" },
-  { label: "REC 0%", value: "rec_0", group: "Recargo de equivalencia" },
-];
-
-// Índices para lookup
-const TAX_GROUP_BY_VALUE = new Map<string, TaxGroup>(
-  TaxesList.map((t) => [t.value, t.group])
-);
-
-// Util: deduplicar por grupo manteniendo el *último índice* de `arr`
-function dedupeByTaxGroup(arr: readonly string[]): string[] {
-  const seen = new Set<string>();
-  const out: string[] = [];
-  for (let i = arr.length - 1; i >= 0; i--) {
-    const v = arr[i];
-    const g = TAX_GROUP_BY_VALUE.get(v) ?? `__nogroup:${v}`;
-    if (!seen.has(g)) {
-      out.push(v);
-      seen.add(g);
-    }
-  }
-  out.reverse();
-  return out;
-}
-
-// Normaliza usando el *delta* para saber cuál fue el último clicado.
-// Si se añadió uno, elimina los anteriores de su grupo.
-// Si se quitaron, acepta `next` tal cual. Fallback: dedupe por índice.
-function normalizeSelection(prev: readonly string[], next: readonly string[]): string[] {
-  const added = next.filter((v) => !prev.includes(v));
-  const removed = prev.filter((v) => !next.includes(v));
-
-  if (added.length === 1 && removed.length <= 1) {
-    const clicked = added[0];
-    const g = TAX_GROUP_BY_VALUE.get(clicked);
-    if (!g) return dedupeByTaxGroup(next);
-    return next.filter((v) => TAX_GROUP_BY_VALUE.get(v) !== g || v === clicked);
-  }
-
-  // Multi-selección por teclado/ratón o reordenamientos del componente
-  return dedupeByTaxGroup(next);
-}
-
-
-interface TaxesMultiSelectProps {
-  name: string;
-  value: string[];
-  variant?: "default" | "secondary" | "destructive" | "inverted"
-  onChange: (selectedValues: string[]) => void;
-  [key: string]: any;
-}
-
-export const TaxesMultiSelect = (props: TaxesMultiSelectProps) => {
-  const { variant, value, onChange, ...otherProps } = props;
-  const { t } = useTranslation();
-
-  const msVariant =
-    variant as "default" | "secondary" | "destructive" | "inverted" | undefined;
-
-  // IMPORTANTE: usar `value` (controlado). No usar `defaultValue`.
-  const handleOnValueChange = (nextValues: string[]) => {
-    const normalized = normalizeSelection(value, nextValues);
-    // Evitar renders innecesarios si no cambia
-    if (
-      normalized.length === value.length &&
-      normalized.every((v, i) => v === value[i])
-    ) {
-      return;
-    }
-    onChange(normalized);
-  };
-
-  return (
-    <div className="w-full max-w-md">
-      <MultiSelect
-        options={[...TaxesList]}
-        value={value}
-        onValueChange={handleOnValueChange}
-        placeholder={t("components.taxes_multi_select.placeholder")}
-        variant={msVariant}
-        animation={0}
-        maxCount={3}
-        {...otherProps}
-      />
-    </div>
-  );
-};

modules/customer-invoices/src/web/components/customer-invoice-taxes-multi-select.tsx

@@ -73,7 +73,7 @@ export const CustomerInvoiceTaxesMultiSelect = (props: CustomerInvoiceTaxesMulti
         onValueChange={onChange}
         defaultValue={value}
         placeholder={t("components.customer_invoice_taxes_multi_select.placeholder")}
-        variant='inverted'
+        variant='secondary'
         animation={0}
         maxCount={3}
         autoFilter={true}

modules/customer-invoices/src/web/components/editor/items/blocks-view.tsx

@@ -1,10 +1,10 @@
-import { TaxesMultiSelectField } from "@erp/core/components";
 import { Badge, Button, Input, Label } from "@repo/shadcn-ui/components";
 import { Trash2 } from "lucide-react";
 import { useFormContext } from "react-hook-form";
 
 import { useTranslation } from "../../../i18n";
 import { CustomerInvoiceFormData } from "../../../schemas";
+import { CustomerInvoiceTaxesMultiSelect } from '../../customer-invoice-taxes-multi-select';
 import { CustomItemViewProps } from "./types";
 
 export interface BlocksViewProps extends CustomItemViewProps { }
@@ -89,7 +89,7 @@ export const BlocksView = ({ items, removeItem, updateItem }: BlocksViewProps) =
             </div>
 
             <div className='space-y-2 col-start-1'>
-              <TaxesMultiSelectField
+              <CustomerInvoiceTaxesMultiSelect
                 control={control}
                 name={`items.${index}.tax_codes`}
                 required

modules/customer-invoices/src/web/components/editor/items/index.ts

@@ -1,3 +1 @@
-export * from "./blocks-view";
 export * from "./items-editor";
-export * from "./table-view";

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

@@ -1,5 +1,4 @@
 import { SpainTaxCatalogProvider } from '@erp/core';
-import { TaxesMultiSelect } from '@erp/core/components';
 import { Button, Checkbox, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tooltip, TooltipContent, TooltipTrigger } from "@repo/shadcn-ui/components";
 import { ArrowDown, ArrowUp, CopyIcon, Trash2 } from "lucide-react";
 import * as React from "react";
@@ -13,7 +12,6 @@ import { HoverCardTotalsSummary } from './hover-card-total-summary';
 import { ItemsEditorToolbar } from './items-editor-toolbar';
 import { PercentageDTOInputField } from './percentage-dto-input-field';
 import { QuantityDTOInputField } from './quantity-dto-input-field';
-import { TAXES } from './types.d';
 
 interface ItemsEditorProps {
     value?: CustomerInvoiceItemFormData[];
@@ -209,23 +207,6 @@ export const ItemsEditor = ({ value = [], onChange, readOnly = false }: ItemsEdi
                                         />
                                     </TableCell>
 
-                                    {/* taxes2 */}
-                                    <TableCell>
-                                        <Controller
-                                            control={control}
-                                            name={`items.${rowIndex}.tax_codes`}
-                                            render={({ field }) => (
-                                                <TaxesMultiSelect
-                                                    catalog={TAXES}
-                                                    value={field.value ?? ["iva_21"]}
-                                                    onChange={field.onChange}
-                                                    disabled={readOnly}
-                                                    buttonClassName='h-8 self-start translate-y-[-1px]'
-                                                />
-                                            )}
-                                        />
-                                    </TableCell>
-
 
                                     {/* total (solo lectura) */}
                                     <TableCell className='text-right tabular-nums pt-[6px] leading-5'>

modules/customer-invoices/src/web/components/editor/items/table-view.tsx

@@ -16,7 +16,6 @@ import {
 import { ChevronDownIcon, ChevronUpIcon, CopyIcon, Plus, TrashIcon } from "lucide-react";
 
 
-import { TaxesMultiSelectField } from '@erp/core/components';
 import { useMoney } from '@erp/core/hooks';
 import { useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
@@ -209,12 +208,6 @@ export const TableView = ({ items, actions }: TableViewProps) => {
                 </TableCell>
 
                 <TableCell className="text-right">
-                  <TaxesMultiSelectField
-                    control={control}
-                    name={`item.${i}.tax_codes`}
-                    required
-                    placeholder={t("form_fields.item.tax_codes.placeholder")}
-                  />
                 </TableCell>
 
 

modules/customer-invoices/src/web/components/editor/items/tax-multi-select-field.tsx

@@ -1,262 +0,0 @@
-import { TaxItemType, TaxLookupItems } from '@erp/core';
-
-import {
-    Badge,
-    Button,
-    Command,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-    Separator
-} from "@repo/shadcn-ui/components";
-import { cn } from "@repo/shadcn-ui/lib/utils";
-import { VariantProps, cva } from 'class-variance-authority';
-import { CheckIcon, ChevronDownIcon, WandSparklesIcon, XCircleIcon } from "lucide-react";
-import * as React from "react";
-import { Control, useController } from "react-hook-form";
-import { useTranslation } from 'react-i18next';
-
-
-/**
- * Variants for the multi-select component to handle different styles.
- * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
- */
-const multiSelectVariants = cva(
-    "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
-    {
-        variants: {
-            variant: {
-                default: "border-foreground/10 text-foreground bg-card hover:bg-card/80",
-                secondary:
-                    "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
-                destructive:
-                    "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-                inverted: "inverted",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-        },
-    }
-);
-
-
-interface TaxMultiSelectFieldProps extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof multiSelectVariants> {
-    name: string;
-    control: Control<any>;
-    lookupCatalog: TaxLookupItems;
-    disabled?: boolean;
-    buttonClassName?: string;
-
-    onValidateOption?: (value: string) => boolean;
-    placeholder?: string;
-    defaultValue?: string[];
-
-    maxCount?: number; // Maximum number of items to display
-    animation?: number; // Animation duration in seconds for the visual effects
-    modalPopover?: boolean;
-}
-
-export const TaxMultiSelectField = ({
-    name,
-    control,
-    lookupCatalog,
-    disabled,
-    buttonClassName,
-    variant,
-
-    onValidateOption,
-    defaultValue = [],
-    placeholder,
-    maxCount = 3,
-    animation = 0,
-    modalPopover = false,
-}: TaxMultiSelectFieldProps) => {
-    const { t } = useTranslation();
-    const [isAnimating, setIsAnimating] = React.useState(true);
-
-    const { field } = useController({ name, control });
-
-    const [open, setOpen] = React.useState(false);
-
-    const value: string[] = field.value ?? [];
-    const selected = value.map((id) => lookupCatalog.find((item) => item.code === id)).filter(Boolean);
-
-    // Agrupar catálogo por grupo
-    const grouped = React.useMemo(() => {
-        return Object.values(lookupCatalog).reduce<Record<string, TaxItemType[]>>((acc, item) => {
-            if (!acc[item.group]) acc[item.group] = [];
-            acc[item.group].push(item);
-            return acc;
-        }, {});
-    }, [lookupCatalog]);
-
-    // Mantener un solo elemento por grupo
-    const toggleTax = (id: string) => {
-        const t = lookupCatalog.find((item) => item.code === id);
-        if (!t) return;
-        const active = value.includes(id);
-        let next: string[];
-        if (active) {
-            next = value.filter((v) => v !== id);
-        } else {
-            next = [...value.filter((v) => lookupCatalog.find((item) => item.code === v)?.group !== t.group), id];
-        }
-        field.onChange(next);
-    };
-
-    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            setOpen(true);
-        } else if (event.key === "Backspace" && !event.currentTarget.value) {
-            const newSelectedValues = [...value];
-            newSelectedValues.pop();
-            field.onChange(newSelectedValues);
-        }
-    };
-
-    const handleTogglePopover = () => {
-        setOpen((prev) => !prev);
-    };
-
-    const clearExtraOptions = () => {
-        field.onChange(selected.slice(0, maxCount));
-    };
-
-    const handleClear = () => {
-        field.onChange([]);
-    };
-
-    return (
-        <Popover open={open} onOpenChange={setOpen} modal={modalPopover}>
-            <PopoverTrigger asChild>
-                <Button
-                    onClick={handleTogglePopover}
-                    className={cn(
-                        "flex w-full -mt-0.5 px-1 py-0.5 rounded-md border min-h-8 h-auto items-center justify-between bg-background hover:bg-inherit [&_svg]:pointer-events-auto",
-                        buttonClassName
-                    )}
-                    disabled={disabled}
-                    aria-label="Select taxes"
-                >
-                    <div className="flex gap-1 flex-wrap">
-                        {selected.length > 0 ? (
-                            <div className='flex justify-between items-center w-full'>
-                                <div className='flex flex-wrap items-center'>
-                                    {selected.slice(0, maxCount).map((item) => {
-                                        const option = lookupCatalog.find((o) => o.code === item?.code);
-                                        return (
-                                            <Badge
-                                                key={item?.code}
-                                                className={cn(
-                                                    isAnimating ? "animate-bounce" : "",
-                                                    multiSelectVariants({ variant })
-                                                )}
-                                                style={{ animationDuration: `${animation}s` }}
-                                            >
-                                                {option?.name}
-                                                {/*<XCircle
-                                              className='ml-2 h-4 w-4 cursor-pointer'
-                                              onClick={(event) => {
-                                                event.stopPropagation();
-                                                toggleOption(value);
-                                              }}
-                                            />*/}
-                                            </Badge>
-                                        );
-                                    })}
-                                    {selected.length > maxCount && (
-                                        <Badge
-                                            className={cn(
-                                                "bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
-                                                isAnimating ? "animate-bounce" : "",
-                                                multiSelectVariants({ variant })
-                                            )}
-                                            style={{ animationDuration: `${animation}s` }}
-                                        >
-                                            {`+ ${selected.length - maxCount} more`}
-                                            <XCircleIcon
-                                                className='ml-2 h-4 w-4 cursor-pointer'
-                                                onClick={(event) => {
-                                                    event.stopPropagation();
-                                                    clearExtraOptions();
-                                                }}
-                                            />
-                                        </Badge>
-                                    )}
-                                </div>
-                                <div className='flex items-center justify-between'>
-                                    <Separator orientation='vertical' className='flex min-h-6 h-full' />
-                                    <ChevronDownIcon className='h-4 mx-2 cursor-pointer text-muted-foreground' />
-                                </div>
-                            </div>
-                        ) : (
-                            <div className='flex items-center justify-between w-full mx-auto'>
-                                <span className='text-sm text-muted-foreground mx-3'>
-                                    {placeholder || t("components.multi_select.select_options")}
-                                </span>
-                                <ChevronDownIcon className='h-4 cursor-pointer text-muted-foreground mx-2' />
-                            </div>
-                        )}
-                    </div>
-                </Button>
-            </PopoverTrigger>
-
-            <PopoverContent className="p-0 w-64" align="start">
-                <Command>
-                    <CommandInput placeholder={t("common.search")} onKeyDown={handleInputKeyDown} />
-
-                    <CommandList>
-                        {Object.entries(grouped).map(([group, items], idx, arr) => (
-                            <React.Fragment key={group}>
-                                <CommandGroup key={`group-${group || "ungrouped"}`} heading={group}>
-                                    {items.map((t) => {
-                                        const active = value.includes(t.code);
-                                        return (
-                                            <CommandItem
-                                                key={t.code}
-                                                onSelect={() => toggleTax(t.code)}
-                                                aria-selected={active}
-                                                className='cursor-pointer'
-                                            >
-                                                <div
-                                                    className={cn(
-                                                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
-                                                        active
-                                                            ? "bg-primary text-primary-foreground"
-                                                            : "opacity-50 [&_svg]:invisible"
-                                                    )}
-                                                >
-                                                    <CheckIcon
-                                                        className={cn("h-4 w-4", active ? "text-primary-foreground" : "")}
-                                                    />
-                                                </div>
-                                                <span>{t.name}</span>
-                                            </CommandItem>
-                                        );
-                                    })}
-                                </CommandGroup>
-                                {idx < arr.length - 1 && <Separator className="my-1" />}
-                            </React.Fragment>
-                        ))}
-                    </CommandList>
-
-                </Command>
-            </PopoverContent>
-            {animation > 0 && value.length > 0 && (
-                <WandSparklesIcon
-                    className={cn(
-                        "cursor-pointer my-2 text-foreground bg-background w-3 h-3",
-                        isAnimating ? "" : "text-muted-foreground"
-                    )}
-                    onClick={() => setIsAnimating(!isAnimating)}
-                />
-            )}
-        </Popover>
-    );
-}

modules/customers/src/web/components/editor/customer-basic-info-fields.tsx

@@ -1,4 +1,3 @@
-import { TaxesMultiSelectField } from "@erp/core/components";
 import {
   Description,
   Field,
@@ -17,7 +16,8 @@ import {
   RadioGroup,
   RadioGroupItem,
 } from "@repo/shadcn-ui/components";
-import { useFormContext, useWatch } from "react-hook-form";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { CustomerInvoiceTaxesMultiSelect } from '../../../../../customer-invoices/src/web/components';
 import { useTranslation } from "../../i18n";
 import { CustomerFormData } from "../../schemas";
 
@@ -107,13 +107,19 @@ export const CustomerBasicInfoFields = () => {
           description={t("form_fields.reference.description")}
         />
         <Field className='lg:col-span-2'>
-          <TaxesMultiSelectField
+          <Controller
             control={control}
             name='default_taxes'
-            required
+            render={({ field }) => (
-            label={t("form_fields.default_taxes.label")}
+              <CustomerInvoiceTaxesMultiSelect
-            placeholder={t("form_fields.default_taxes.placeholder")}
+                value={field.value}
-            description={t("form_fields.default_taxes.description")}
+                onChange={field.onChange}
+                required
+                label={t("form_fields.default_taxes.label")}
+                placeholder={t("form_fields.default_taxes.placeholder")}
+                description={t("form_fields.default_taxes.description")}
+              />
+            )}
           />
         </Field>
         <TextAreaField