.

client/src/app/quotes/components/editors/QuoteDetailsCardEditor.tsx

@@ -41,7 +41,7 @@ export const QuoteDetailsCardEditor = ({ currency }: { currency: CurrencyData })
         header: () => (
           <div className='text-right'>{t("quotes.form_fields.items.quantity.label")}</div>
         ),
-        size: 8,
+        size: 6,
         cell: ({ row: { index } }) => {
           return (
             <FormQuantityField
@@ -59,7 +59,9 @@ export const QuoteDetailsCardEditor = ({ currency }: { currency: CurrencyData })
         header: t("quotes.form_fields.items.description.label"),
         size: 24,
         cell: ({ row: { index } }) => {
-          return <FormTextField autoSize {...register(`items.${index}.description`)} />;
+          return (
+            <FormTextField variant='outline' autoSize {...register(`items.${index}.description`)} />
+          );
         },
       },
       {
@@ -80,29 +82,30 @@ export const QuoteDetailsCardEditor = ({ currency }: { currency: CurrencyData })
           );
         },
       },
-      /*{
+      {
         id: "subtotal_price" as const,
         accessorKey: "subtotal_price",
         header: () => (
           <div className='text-right'>{t("quotes.form_fields.items.subtotal_price.label")}</div>
         ),
+        size: 12,
         cell: ({ row: { index }, column: { id } }) => {
           return (
             <FormCurrencyField
               variant='outline'
               currency={currency}
               scale={4}
-              disabled
+              readOnly
               className='text-right'
               {...register(`items.${index}.subtotal_price`)}
             />
           );
         },
-      },*/
+      },
       {
         id: "discount" as const,
         accessorKey: "discount",
-        size: 8,
+        size: 6,
         header: () => (
           <div className='text-right'>{t("quotes.form_fields.items.discount.label")}</div>
         ),
@@ -117,25 +120,26 @@ export const QuoteDetailsCardEditor = ({ currency }: { currency: CurrencyData })
           );
         },
       },
-      /*{
+      {
         id: "total_price" as const,
         accessorKey: "total_price",
         header: () => (
           <div className='text-right'>{t("quotes.form_fields.items.total_price.label")}</div>
         ),
+        size: 12,
         cell: ({ row: { index }, column: { id } }) => {
           return (
             <FormCurrencyField
               variant='outline'
               currency={currency}
               scale={4}
-              disabled
+              readOnly
-              className='text-right'
+              className='font-semibold text-right'
               {...register(`items.${index}.total_price`)}
             />
           );
         },
-      },*/
+      },
     ],
     {
       enableDragHandleColumn: true,
@@ -191,6 +195,8 @@ export const QuoteDetailsCardEditor = ({ currency }: { currency: CurrencyData })
   const defaultLayout = [265, 440, 655];
   const navCollapsedSize = 4;
 
+  return <SortableDataTable actions={fieldActions} columns={columns} data={fields} />;
+
   return (
     <ResizablePanelGroup
       direction='horizontal'
@@ -216,7 +222,7 @@ export const QuoteDetailsCardEditor = ({ currency }: { currency: CurrencyData })
       <ResizableHandle withHandle className='mx-3' />
       <ResizablePanel defaultSize={defaultLayout[1]} minSize={10}>
         <DataTableProvider syncWithLocation={false}>
-          {/*<CatalogPickerDataTable onClick={handleInsertArticle} />*/}
+          <CatalogPickerDataTable onClick={handleInsertArticle} />
         </DataTableProvider>
       </ResizablePanel>
     </ResizablePanelGroup>

client/src/app/quotes/edit.tsx

@@ -68,11 +68,12 @@ export const QuoteEdit = () => {
         scale: 2,
         currency_code: data?.currency_code,
       },
-      /*items: [
+      items: [
         {
+          description: "",
           quantity: {
             amount: undefined,
-            scale: 2,
+            scale: 0,
           },
           subtotal_price: {
             amount: undefined,
@@ -81,7 +82,7 @@ export const QuoteEdit = () => {
           },
           discount: {
             amount: undefined,
-            scale: 0,
+            scale: 2,
           },
           total_price: {
             amount: undefined,
@@ -89,7 +90,7 @@ export const QuoteEdit = () => {
             currency_code: data?.currency_code,
           },
         },
-      ],*/
+      ],
     },
   });
 
@@ -129,6 +130,8 @@ export const QuoteEdit = () => {
     const { unsubscribe } = watch((_, { name, type }) => {
       const value = getValues();
 
+      console.log(value);
+
       if (name) {
         if (name === "currency_code") {
           setQuoteCurrency(
@@ -146,8 +149,6 @@ export const QuoteEdit = () => {
             items.map((item, index) => {
               const itemTotals = calculateItemTotals(item);
 
-              console.log(itemTotals?.quantity.toObject());
-
               if (itemTotals === null) {
                 return;
               }

client/src/components/Forms/FormCurrencyField.tsx

@@ -61,6 +61,8 @@ export const FormCurrencyField = React.forwardRef<HTMLInputElement, FormCurrency
 
     const { control } = useFormContext();
 
+    const [oldValue, setOldValue] = React.useState<string>("");
+
     const transform = {
       input: (value: any) => {
         if (typeof value !== "object") {
@@ -73,11 +75,20 @@ export const FormCurrencyField = React.forwardRef<HTMLInputElement, FormCurrency
           throw moneyOrError.error;
         }
 
-        return moneyOrError.object.toString();
+        let result = moneyOrError.object.toString();
+        console.log(result, oldValue);
+
+        if (oldValue.endsWith(",")) {
+          result = result.replace(/.0$/, ",");
+        }
+
+        return result;
       },
       output: (value: string | undefined, name?: string, values?: CurrencyInputOnChangeValues) => {
         const { value: amount } = values ?? { value: null };
 
+        setOldValue(amount ?? "");
+
         const moneyOrError = MoneyValue.createFromFormattedValue(amount, currency.code);
         if (moneyOrError.isFailure) {
           throw moneyOrError.error;
@@ -126,6 +137,7 @@ export const FormCurrencyField = React.forwardRef<HTMLInputElement, FormCurrency
                   }
                 />
               </FormControl>
+
               {description && <FormDescription>{description}</FormDescription>}
               <FormErrorMessage />
             </FormItem>

client/src/components/Forms/FormTextField.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@/lib/utils";
 import { FormControl, FormDescription, FormField, FormItem, Input, InputProps } from "@/ui";
 
-import { cva } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { createElement } from "react";
 import { FieldPath, FieldValues, UseControllerProps, useFormContext } from "react-hook-form";
@@ -9,7 +9,7 @@ import { FormErrorMessage } from "./FormErrorMessage";
 import { FormLabel, FormLabelProps } from "./FormLabel";
 import { FormInputProps, FormInputWithIconProps } from "./FormProps";
 
-const FormTextFieldVariants = cva("", {
+const formTextFieldVariants = cva("", {
   variants: {
     variant: {
       default: "",
@@ -31,7 +31,8 @@ export type FormTextFieldProps<
   FormInputProps &
   Partial<FormLabelProps> &
   FormInputWithIconProps &
-  UseControllerProps<TFieldValues, TName>;
+  UseControllerProps<TFieldValues, TName> &
+  VariantProps<typeof formTextFieldVariants>;
 
 export const FormTextField = React.forwardRef<HTMLInputElement, FormTextFieldProps>(
   (props, ref) => {
@@ -95,7 +96,7 @@ export const FormTextField = React.forwardRef<HTMLInputElement, FormTextFieldPro
                       placeholder={placeholder}
                       className={cn(
                         fieldState.error ? "border-destructive focus-visible:ring-destructive" : "",
-                        FormTextFieldVariants({ variant, className })
+                        formTextFieldVariants({ variant, className })
                       )}
                       {...field}
                     />

client/src/lib/calc.ts

@@ -12,8 +12,14 @@ export const calculateItemTotals = (item: {
   discount: Percentage;
   totalPrice: MoneyValue;
 } | null => {
+  console.log(item);
+
   const { quantity: quantity_dto, unit_price: unit_price_dto, discount: discount_dto } = item;
 
+  if (quantity_dto === "" || unit_price_dto === "") {
+    return null;
+  }
+
   const quantityOrError = Quantity.create(quantity_dto);
   if (quantityOrError.isFailure) {
     throw quantityOrError.error;

shared/lib/contexts/common/domain/entities/MoneyValue.ts

@@ -141,8 +141,6 @@ export class MoneyValue extends ValueObject<Dinero> implements IMoneyValue {
       scale = defaultMoneyValueProps.scale,
     } = props || {};
 
-    console.log(props, { amount, currencyCode, scale });
-
     const validationResult = MoneyValue.validate(amount, options);
 
     if (validationResult.isFailure) {