@spaceinvoices/react-ui 0.4.12 → 0.4.31

package/src/components/documents/create/document-details-section.tsx

@@ -5,6 +5,7 @@
 import type { Entity, Estimate, Invoice, TransactionTypeCheckResponse } from "@spaceinvoices/js-sdk";
 import { CalendarIcon, ChevronDown, Globe, Info, Loader2 } from "lucide-react";
 import { useRef, useState } from "react";
+import { useWatch } from "react-hook-form";
 import { Badge } from "@/ui/components/ui/badge";
 import { Button } from "@/ui/components/ui/button";
 import { Calendar } from "@/ui/components/ui/calendar";
@@ -15,10 +16,11 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/ui/components/ui/popo
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/components/ui/select";
 import { Textarea } from "@/ui/components/ui/textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { normalizeDateOnlyInput, toLocalDateOnlyString } from "@/ui/lib/date-only";
 import { CURRENCY_CODES } from "@/ui/lib/constants";
 import { replaceTemplateVariablesForPreview } from "@/ui/lib/template-variables";
 import { cn } from "@/ui/lib/utils";
-import type { DocumentTypes } from "../types";
+import { getDocumentConfig, type DocumentTypes } from "../types";
 import type { AnyControl } from "./form-types";
 import { SmartCodeInsertButton } from "./smart-code-insert-button";
 
@@ -73,7 +75,21 @@ type DueDaysProps = {
   onDueDaysTypeChange: (type: number | "custom") => void;
 };
 
+type DateLockProps = {
+  isLocked: boolean;
+  reason: string;
+};
+
 const LABEL_WIDTH = "w-[6.5rem] shrink-0";
+const MIN_DOCUMENT_DATE = new Date("1900-01-01");
+
+function isAfterDateOnly(date: Date, maxDateOnly: string | undefined): boolean {
+  return !!maxDateOnly && toLocalDateOnlyString(date) > maxDateOnly;
+}
+
+function isBeforeDateOnly(date: Date, minDateOnly: string | undefined): boolean {
+  return !!minDateOnly && toLocalDateOnlyString(date) < minDateOnly;
+}
 
 function extractSequenceNumber(fullNumber: string, premise?: string, device?: string): string {
   if (!fullNumber || (!premise && !device)) return fullNumber;
@@ -92,6 +108,7 @@ type DocumentDetailsSectionProps = {
   finaInline?: FinaInlineProps; // FINA premise/device inline with number
   serviceDate?: ServiceDateProps; // Service date section (invoice only)
   dueDays?: DueDaysProps; // Due days selector (invoice only)
+  dateLock?: DateLockProps;
 };
 
 export function DocumentDetailsSection({
@@ -104,12 +121,18 @@ export function DocumentDetailsSection({
   finaInline,
   serviceDate,
   dueDays,
+  dateLock,
 }: DocumentDetailsSectionProps) {
-  // Determine the date field name based on document type
-  // Delivery notes don't have a secondary date field
-  const hasSecondaryDate = documentType !== "delivery_note" && documentType !== "advance_invoice";
-  const dateFieldName = documentType === "invoice" ? "date_due" : "date_valid_till";
-  const dateFieldLabel = documentType === "invoice" ? t("Due Date") : t("Valid Until");
+  const documentConfig = getDocumentConfig(documentType);
+  const hasSecondaryDate = documentConfig.dateFieldName !== null;
+  const dateFieldName = documentConfig.dateFieldName;
+  const dateFieldLabel = documentConfig.dateFieldLabel ? t(documentConfig.dateFieldLabel) : "";
+  const watchedIssueDate = useWatch({ control, name: "date" });
+  const watchedServiceStartDate = useWatch({ control, name: "date_service" });
+  const issueDateOnly = normalizeDateOnlyInput(typeof watchedIssueDate === "string" ? watchedIssueDate : undefined);
+  const serviceStartDateOnly = normalizeDateOnlyInput(
+    typeof watchedServiceStartDate === "string" ? watchedServiceStartDate : undefined,
+  );
 
   // Check if FURS/FINA inline should show premise/device selects
   const showFursSelects = fursInline && !fursInline.isSkipped;
@@ -259,18 +282,18 @@ export function DocumentDetailsSection({
           <FormItem>
             <div className="flex items-center gap-3">
               <FormLabel className={LABEL_WIDTH}>{t("Date")} *</FormLabel>
-              {showFinaSelects ? (
+              {dateLock?.isLocked ? (
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <FormControl>
                       <Button variant="outline" disabled className="flex-1 pl-3 text-left font-normal">
-                        {new Date().toLocaleDateString(locale)}
+                        {new Date(field.value || new Date()).toLocaleDateString(locale)}
                         <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                       </Button>
                     </FormControl>
                   </TooltipTrigger>
                   <TooltipContent>
-                    <p>{t("FINA fiscalized invoices always use the current date")}</p>
+                    <p>{dateLock.reason}</p>
                   </TooltipContent>
                 </Tooltip>
               ) : (
@@ -278,6 +301,7 @@ export function DocumentDetailsSection({
                   <PopoverTrigger asChild>
                     <FormControl>
                       <Button
+                        type="button"
                         variant="outline"
                         className={cn("flex-1 pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
                       >
@@ -291,14 +315,14 @@ export function DocumentDetailsSection({
                     </FormControl>
                   </PopoverTrigger>
                   <PopoverContent className="w-auto p-0" align="start">
-                    <Calendar
-                      mode="single"
-                      selected={field.value ? new Date(field.value) : undefined}
-                      onSelect={(date) => field.onChange(date?.toISOString())}
-                      disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
-                      initialFocus
-                    />
-                  </PopoverContent>
+                      <Calendar
+                        mode="single"
+                        selected={field.value ? new Date(field.value) : undefined}
+                        onSelect={(date) => field.onChange(date?.toISOString())}
+                        disabled={(date) => date > new Date() || date < MIN_DOCUMENT_DATE}
+                        initialFocus
+                      />
+                    </PopoverContent>
                 </Popover>
               )}
             </div>
@@ -325,11 +349,11 @@ export function DocumentDetailsSection({
                       "h-auto border-none p-0 font-medium text-sm shadow-none [&>svg]:ml-1 [&>svg]:size-3.5",
                     )}
                   >
-                    <SelectValue>{serviceDate.dateType === "single" ? t("Single Date") : t("Date Range")}</SelectValue>
+                    <SelectValue>{serviceDate.dateType === "single" ? t("Service Date") : t("Service Period")}</SelectValue>
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="single">{t("Single Date")}</SelectItem>
-                    <SelectItem value="range">{t("Date Range")}</SelectItem>
+                    <SelectItem value="single">{t("Service Date")}</SelectItem>
+                    <SelectItem value="range">{t("Service Period")}</SelectItem>
                   </SelectContent>
                 </Select>
                 {serviceDate.dateType === "single" ? (
@@ -337,6 +361,7 @@ export function DocumentDetailsSection({
                     <PopoverTrigger asChild>
                       <FormControl>
                         <Button
+                          type="button"
                           variant="outline"
                           className={cn("flex-1 pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
                         >
@@ -354,6 +379,9 @@ export function DocumentDetailsSection({
                         mode="single"
                         selected={field.value ? new Date(field.value) : undefined}
                         onSelect={(date) => field.onChange(date?.toISOString())}
+                        disabled={(date) =>
+                          date > new Date() || date < MIN_DOCUMENT_DATE || isAfterDateOnly(date, issueDateOnly)
+                        }
                         initialFocus
                       />
                     </PopoverContent>
@@ -364,6 +392,7 @@ export function DocumentDetailsSection({
                       <PopoverTrigger asChild>
                         <FormControl>
                           <Button
+                            type="button"
                             variant="outline"
                             className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
                           >
@@ -377,6 +406,9 @@ export function DocumentDetailsSection({
                           mode="single"
                           selected={field.value ? new Date(field.value) : undefined}
                           onSelect={(date) => field.onChange(date?.toISOString())}
+                          disabled={(date) =>
+                            date > new Date() || date < MIN_DOCUMENT_DATE || isAfterDateOnly(date, issueDateOnly)
+                          }
                           initialFocus
                         />
                       </PopoverContent>
@@ -386,32 +418,44 @@ export function DocumentDetailsSection({
                       control={control}
                       name="date_service_to"
                       render={({ field: toField }) => (
-                        <Popover>
-                          <PopoverTrigger asChild>
-                            <Button
-                              variant="outline"
-                              className={cn(
-                                "w-full pl-3 text-left font-normal",
-                                !toField.value && "text-muted-foreground",
-                              )}
-                            >
-                              {toField.value ? (
-                                new Date(toField.value).toLocaleDateString(locale)
-                              ) : (
-                                <span>{t("To")}</span>
-                              )}
-                              <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                            </Button>
-                          </PopoverTrigger>
-                          <PopoverContent className="w-auto p-0" align="start">
-                            <Calendar
-                              mode="single"
-                              selected={toField.value ? new Date(toField.value) : undefined}
-                              onSelect={(date) => toField.onChange(date?.toISOString())}
-                              initialFocus
-                            />
-                          </PopoverContent>
-                        </Popover>
+                        <FormItem>
+                          <Popover>
+                            <PopoverTrigger asChild>
+                              <FormControl>
+                                <Button
+                                  type="button"
+                                  variant="outline"
+                                  className={cn(
+                                    "w-full pl-3 text-left font-normal",
+                                    !toField.value && "text-muted-foreground",
+                                  )}
+                                >
+                                  {toField.value ? (
+                                    new Date(toField.value).toLocaleDateString(locale)
+                                  ) : (
+                                    <span>{t("To")}</span>
+                                  )}
+                                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                                </Button>
+                              </FormControl>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-auto p-0" align="start">
+                              <Calendar
+                                mode="single"
+                                selected={toField.value ? new Date(toField.value) : undefined}
+                                onSelect={(date) => toField.onChange(date?.toISOString())}
+                                disabled={(date) =>
+                                  date > new Date() ||
+                                  date < MIN_DOCUMENT_DATE ||
+                                  isAfterDateOnly(date, issueDateOnly) ||
+                                  isBeforeDateOnly(date, serviceStartDateOnly)
+                                }
+                                initialFocus
+                              />
+                            </PopoverContent>
+                          </Popover>
+                          <FormMessage />
+                        </FormItem>
                       )}
                     />
                   </div>
@@ -426,7 +470,7 @@ export function DocumentDetailsSection({
       {hasSecondaryDate && (
         <FormField
           control={control}
-          name={dateFieldName}
+          name={dateFieldName!}
           render={({ field }) => (
             <FormItem>
               <div className="flex items-center gap-3">
@@ -459,6 +503,7 @@ export function DocumentDetailsSection({
                   <PopoverTrigger asChild>
                     <FormControl>
                       <Button
+                        type="button"
                         variant="outline"
                         className={cn("flex-1 pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
                       >
@@ -481,7 +526,7 @@ export function DocumentDetailsSection({
                           dueDays.onDueDaysTypeChange("custom");
                         }
                       }}
-                      disabled={(date) => date < new Date("1900-01-01")}
+                      disabled={(date) => date < MIN_DOCUMENT_DATE || isBeforeDateOnly(date, issueDateOnly)}
                       initialFocus
                     />
                   </PopoverContent>

package/src/components/documents/create/document-form-item.ts

@@ -0,0 +1,67 @@
+type SourceDocumentTax = {
+  tax_id?: string | null;
+  rate?: number | null;
+  classification?: string | null;
+  reverse_charge?: boolean | null;
+  pt_exemption_code?: string | null;
+  pt_exemption_reason?: string | null;
+};
+
+type SourceDocumentDiscount = {
+  value: number;
+  type?: string | null;
+};
+
+type SourceDocumentItem = {
+  type?: string | null;
+  item_id?: string | null;
+  name?: string | null;
+  description?: string | null;
+  quantity?: number | null;
+  price?: number | null;
+  gross_price?: number | null;
+  unit?: string | null;
+  classification?: string | null;
+  taxes?: SourceDocumentTax[] | null;
+  discounts?: SourceDocumentDiscount[] | null;
+  metadata?: Record<string, unknown> | null;
+};
+
+export function toDocumentFormTaxes(taxes: SourceDocumentTax[] | null | undefined) {
+  return (taxes ?? []).map((tax) => ({
+    tax_id: tax?.tax_id ?? undefined,
+    rate: tax?.rate ?? undefined,
+    classification: tax?.classification ?? undefined,
+    reverse_charge: tax?.reverse_charge ?? undefined,
+    pt_exemption_code: tax?.pt_exemption_code ?? undefined,
+    pt_exemption_reason: tax?.pt_exemption_reason ?? undefined,
+  }));
+}
+
+export function toDocumentFormDiscounts(discounts: SourceDocumentDiscount[] | null | undefined) {
+  return (discounts ?? []).map((discount) => ({
+    value: discount.value,
+    type: discount.type ?? undefined,
+  }));
+}
+
+export function toDocumentFormItem(item: SourceDocumentItem) {
+  return {
+    type: item.type ?? undefined,
+    name: item.name ?? "",
+    description: item.description ?? undefined,
+    ...(item.type !== "separator"
+      ? {
+          item_id: item.item_id ?? undefined,
+          quantity: item.quantity ?? 1,
+          price: item.gross_price ?? item.price ?? undefined,
+          gross_price: item.gross_price ?? undefined,
+          unit: item.unit ?? undefined,
+          classification: item.classification ?? undefined,
+          taxes: toDocumentFormTaxes(item.taxes),
+          discounts: toDocumentFormDiscounts(item.discounts),
+          metadata: item.metadata ?? undefined,
+        }
+      : {}),
+  };
+}

package/src/components/documents/create/document-item-validation.ts

@@ -13,10 +13,14 @@ export function withRequiredDocumentItemFields<T extends z.ZodTypeAny>(schema: T
       if (item?.type === "separator") return;
 
       const name = typeof item?.name === "string" ? item.name.trim() : "";
+      const itemId = typeof item?.item_id === "string" ? item.item_id.trim() : "";
       const quantity = item?.quantity;
       const price = item?.price;
+      const grossPrice = item?.gross_price;
+      const hasPrice = !(price == null || Number.isNaN(price as number));
+      const hasGrossPrice = !(grossPrice == null || Number.isNaN(grossPrice as number));
 
-      if (!name) {
+      if (!name && !itemId) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           path: ["items", index, "name"],
@@ -32,7 +36,7 @@ export function withRequiredDocumentItemFields<T extends z.ZodTypeAny>(schema: T
         });
       }
 
-      if (price == null || Number.isNaN(price)) {
+      if (!hasPrice && !hasGrossPrice) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           path: ["items", index, "price"],

package/src/components/documents/create/form-types.ts

@@ -4,14 +4,14 @@
  * This file provides type utilities to handle react-hook-form's complex generic types
  * when passing control and other form utilities between components.
  */
-import type { Control, UseFormGetValues, UseFormSetValue, UseFormWatch } from "react-hook-form";
+import type { UseFormGetValues, UseFormSetValue, UseFormWatch } from "react-hook-form";
 
 /**
  * A more permissive Control type that accepts any form control.
  * Use this in component props when the component doesn't need to know
  * the exact form type, only that it has certain fields.
  */
-export type AnyControl = Control<any, any, any>;
+export type AnyControl = any;
 
 /**
  * Base props for document form sections that receive form utilities.

package/src/components/documents/create/linked-documents-info.tsx

@@ -1,4 +1,5 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/ui/components/ui/table";
+import { formatDateOnlyForDisplay } from "@/ui/lib/date-only";
 
 export type LinkedDocumentSummary = {
   id: string;
@@ -21,17 +22,7 @@ export function LinkedDocumentsInfo({ documents, locale, t }: LinkedDocumentsInf
 
   const currencyCode = validDocuments[0].currency_code || "EUR";
 
-  const formatDate = (dateStr: string) => {
-    try {
-      return new Date(dateStr).toLocaleDateString(locale, {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-      });
-    } catch {
-      return dateStr;
-    }
-  };
+  const formatDate = (dateStr: string) => formatDateOnlyForDisplay(dateStr, locale);
 
   const formatCurrency = (amount: number) => {
     try {

package/src/components/documents/create/live-preview.tsx

@@ -10,7 +10,7 @@ import { DocumentPreviewSkeleton } from "../shared/document-preview-skeleton";
 import { ScaledDocumentPreview } from "../shared/scaled-document-preview";
 import { useA4Scaling } from "../shared/use-a4-scaling";
 import type { DocumentTypes } from "../types";
-import { filterUnresolvedTaxes } from "./prepare-preview-data";
+import { filterUnresolvedTaxes, normalizeDocumentPreviewDates } from "./prepare-preview-data";
 
 const LIVE_PREVIEW_TIMING_EVENT = "si:live-preview-timing";
 const LIVE_PREVIEW_DEBOUNCE_MS = 300;
@@ -126,7 +126,7 @@ export function LiveInvoicePreview({
         // Prepare preview data with active entity as issuer (if not already set)
         // Exclude 'number' as it's auto-generated by the render endpoint
         const { number: _number, ...invoiceDataWithoutNumber } = invoiceData as any;
-        const previewData = {
+        const previewData = normalizeDocumentPreviewDates({
           ...invoiceDataWithoutNumber,
           // Filter out unresolved tax_ids (race condition: form may add
           // { tax_id: undefined } before the tax dropdown auto-selects a value)
@@ -142,7 +142,7 @@ export function LiveInvoicePreview({
             tax_number: activeEntity.tax_number,
             ...invoiceData.issuer,
           },
-        };
+        });
         const requestKey = JSON.stringify({
           documentType,
           template,

package/src/components/documents/create/mark-as-paid-section.tsx

@@ -61,6 +61,7 @@ export function MarkAsPaidSection({
 }: MarkAsPaidSectionProps) {
   const showPaymentTypes = forced || checked || alwaysShowPaymentType;
   const showPaymentAmounts = paymentRows.length > 1;
+  const showPaymentSummary = paymentRows.length > 1;
   const derivedAmounts = derivePaymentRowAmounts(paymentRows, documentTotal);
   const recordedTotal = getRecordedPaymentTotal(paymentRows, documentTotal);
   const remainingTotal = Math.max(0, Math.round((documentTotal - recordedTotal) * 100) / 100);
@@ -120,7 +121,7 @@ export function MarkAsPaidSection({
                 }}
               >
                 <SelectTrigger className="w-full md:w-fit">
-                  <SelectValue placeholder={t("Please select")}>
+                  <SelectValue placeholder={t("Select payment type")}>
                     {row.type ? t(PAYMENT_TYPE_LABELS[row.type]) : undefined}
                   </SelectValue>
                 </SelectTrigger>
@@ -176,17 +177,19 @@ export function MarkAsPaidSection({
             <Plus className="size-4" />
             {t("Add payment")}
           </Button>
-          {validationMessage && <p className="text-destructive text-sm">{validationMessage}</p>}
-          <div className="grid gap-1 text-muted-foreground text-sm">
-            <div className="flex items-center justify-between">
-              <span>{t("Recorded now")}</span>
-              <span>{recordedTotal.toFixed(2)}</span>
+          {validationMessage && <p className="text-destructive text-sm">{t(validationMessage)}</p>}
+          {showPaymentSummary && (
+            <div className="grid gap-1 text-muted-foreground text-sm">
+              <div className="flex items-center justify-between">
+                <span>{t("Recorded now")}</span>
+                <span>{recordedTotal.toFixed(2)}</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span>{requireFullPayment ? t("Remaining to allocate") : t("Remaining due")}</span>
+                <span>{remainingTotal.toFixed(2)}</span>
+              </div>
             </div>
-            <div className="flex items-center justify-between">
-              <span>{requireFullPayment ? t("Remaining to allocate") : t("Remaining due")}</span>
-              <span>{remainingTotal.toFixed(2)}</span>
-            </div>
-          </div>
+          )}
         </div>
       )}
     </div>

package/src/components/documents/create/payment-rows.ts

@@ -16,6 +16,11 @@ export type SerializedPaymentRow = {
   amount: number;
 };
 
+export type ApiSerializedPaymentRow = {
+  type: RegularPaymentType;
+  amount?: number;
+};
+
 export type PaymentRowsEvaluation = {
   payments: SerializedPaymentRow[];
   totalAmount: number;
@@ -289,3 +294,28 @@ export function validatePaymentRows(
 export function serializePaymentRows(paymentRows: DraftPaymentRow[], documentTotal: number): SerializedPaymentRow[] {
   return evaluatePaymentRows(paymentRows, documentTotal).payments;
 }
+
+export function serializePaymentRowsForApi(
+  paymentRows: DraftPaymentRow[],
+  documentTotal: number,
+  options?: { preserveUntouchedAmounts?: boolean },
+): ApiSerializedPaymentRow[] {
+  const resolvedPayments = evaluatePaymentRows(paymentRows, documentTotal).payments;
+
+  if (!options?.preserveUntouchedAmounts) {
+    return resolvedPayments;
+  }
+
+  return paymentRows.flatMap((row, index) => {
+    if (!isValidPaymentTypeSelection(row.type)) {
+      return [];
+    }
+
+    const resolvedPayment = resolvedPayments[index];
+    if (!resolvedPayment) {
+      return [];
+    }
+
+    return row.amountTouched ? [resolvedPayment] : [{ type: resolvedPayment.type }];
+  });
+}