@spaceinvoices/react-ui 0.4.10 → 0.4.12

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

@@ -86,6 +86,7 @@ type DocumentDetailsSectionProps = {
   control: AnyControl;
   documentType: DocumentTypes;
   t: (key: string) => string;
+  locale?: string;
   children?: React.ReactNode; // For document-specific additions (e.g., mark as paid for invoices)
   fursInline?: FursInlineProps; // FURS premise/device inline with number
   finaInline?: FinaInlineProps; // FINA premise/device inline with number
@@ -97,6 +98,7 @@ export function DocumentDetailsSection({
   control,
   documentType,
   t,
+  locale = "en-US",
   children,
   fursInline,
   finaInline,
@@ -114,7 +116,7 @@ export function DocumentDetailsSection({
   const showFinaSelects = !!finaInline;
 
   return (
-    <div className="flex-1 space-y-3">
+    <div className="mt-6 flex-1 space-y-3 md:mt-0">
       <h2 className="font-bold text-xl">{t("Details")}</h2>
 
       {/* Number field - inline with optional FURS/FINA premise/device + sequence number */}
@@ -262,7 +264,7 @@ export function DocumentDetailsSection({
                   <TooltipTrigger asChild>
                     <FormControl>
                       <Button variant="outline" disabled className="flex-1 pl-3 text-left font-normal">
-                        {new Date().toLocaleDateString()}
+                        {new Date().toLocaleDateString(locale)}
                         <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                       </Button>
                     </FormControl>
@@ -279,7 +281,11 @@ export function DocumentDetailsSection({
                         variant="outline"
                         className={cn("flex-1 pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
                       >
-                        {field.value ? new Date(field.value).toLocaleDateString() : <span>{t("Pick a date")}</span>}
+                        {field.value ? (
+                          new Date(field.value).toLocaleDateString(locale)
+                        ) : (
+                          <span>{t("Pick a date")}</span>
+                        )}
                         <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                       </Button>
                     </FormControl>
@@ -334,7 +340,11 @@ export function DocumentDetailsSection({
                           variant="outline"
                           className={cn("flex-1 pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
                         >
-                          {field.value ? new Date(field.value).toLocaleDateString() : <span>{t("Pick a date")}</span>}
+                          {field.value ? (
+                            new Date(field.value).toLocaleDateString(locale)
+                          ) : (
+                            <span>{t("Pick a date")}</span>
+                          )}
                           <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                         </Button>
                       </FormControl>
@@ -357,7 +367,7 @@ export function DocumentDetailsSection({
                             variant="outline"
                             className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
                           >
-                            {field.value ? new Date(field.value).toLocaleDateString() : <span>{t("From")}</span>}
+                            {field.value ? new Date(field.value).toLocaleDateString(locale) : <span>{t("From")}</span>}
                             <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                           </Button>
                         </FormControl>
@@ -385,7 +395,11 @@ export function DocumentDetailsSection({
                                 !toField.value && "text-muted-foreground",
                               )}
                             >
-                              {toField.value ? new Date(toField.value).toLocaleDateString() : <span>{t("To")}</span>}
+                              {toField.value ? (
+                                new Date(toField.value).toLocaleDateString(locale)
+                              ) : (
+                                <span>{t("To")}</span>
+                              )}
                               <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                             </Button>
                           </PopoverTrigger>
@@ -448,7 +462,11 @@ export function DocumentDetailsSection({
                         variant="outline"
                         className={cn("flex-1 pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
                       >
-                        {field.value ? new Date(field.value).toLocaleDateString() : <span>{t("Pick a date")}</span>}
+                        {field.value ? (
+                          new Date(field.value).toLocaleDateString(locale)
+                        ) : (
+                          <span>{t("Pick a date")}</span>
+                        )}
                         <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                       </Button>
                     </FormControl>
@@ -549,7 +567,7 @@ export function DocumentNoteField({
       render={({ field }) => {
         const hasContent = field.value;
         const showPreview = !isFocused && hasContent && entity;
-        const preview = showPreview ? replaceTemplateVariablesForPreview(field.value || "", entity, document) : null;
+        const preview = showPreview ? replaceTemplateVariablesForPreview(field.value || "", entity, document, t) : null;
 
         return (
           <FormItem>
@@ -644,7 +662,7 @@ export function DocumentTaxClauseField({
       render={({ field }) => {
         const hasContent = field.value;
         const showPreview = !isFocused && hasContent && entity;
-        const preview = showPreview ? replaceTemplateVariablesForPreview(field.value || "", entity, document) : null;
+        const preview = showPreview ? replaceTemplateVariablesForPreview(field.value || "", entity, document, t) : null;
 
         return (
           <FormItem>
@@ -738,7 +756,7 @@ export function DocumentSignatureField({
       render={({ field }) => {
         const hasContent = field.value;
         const showPreview = !isFocused && hasContent && entity;
-        const preview = showPreview ? replaceTemplateVariablesForPreview(field.value || "", entity, document) : null;
+        const preview = showPreview ? replaceTemplateVariablesForPreview(field.value || "", entity, document, t) : null;
 
         return (
           <FormItem>
@@ -806,7 +824,7 @@ export function DocumentPaymentTermsField({
       render={({ field }) => {
         const hasContent = field.value;
         const showPreview = !isFocused && hasContent && entity;
-        const preview = showPreview ? replaceTemplateVariablesForPreview(field.value || "", entity, document) : null;
+        const preview = showPreview ? replaceTemplateVariablesForPreview(field.value || "", entity, document, t) : null;
 
         return (
           <FormItem>
@@ -874,7 +892,7 @@ export function DocumentFooterField({
       render={({ field }) => {
         const hasContent = field.value;
         const showPreview = !isFocused && hasContent && entity;
-        const preview = showPreview ? replaceTemplateVariablesForPreview(field.value || "", entity, document) : null;
+        const preview = showPreview ? replaceTemplateVariablesForPreview(field.value || "", entity, document, t) : null;
 
         return (
           <FormItem>

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

@@ -0,0 +1,50 @@
+import { z } from "zod";
+
+const ITEM_NAME_REQUIRED_MESSAGE = "Item name is required";
+const ITEM_QUANTITY_REQUIRED_MESSAGE = "Quantity is required";
+const ITEM_PRICE_REQUIRED_MESSAGE = "Price is required";
+
+export function withRequiredDocumentItemFields<T extends z.ZodTypeAny>(schema: T) {
+  return schema.superRefine((value, ctx) => {
+    const items = (value as { items?: Array<Record<string, unknown>> } | undefined)?.items;
+    if (!Array.isArray(items)) return;
+
+    items.forEach((item, index) => {
+      if (item?.type === "separator") return;
+
+      const name = typeof item?.name === "string" ? item.name.trim() : "";
+      const quantity = item?.quantity;
+      const price = item?.price;
+
+      if (!name) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["items", index, "name"],
+          message: ITEM_NAME_REQUIRED_MESSAGE,
+        });
+      }
+
+      if (quantity == null || Number.isNaN(quantity)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["items", index, "quantity"],
+          message: ITEM_QUANTITY_REQUIRED_MESSAGE,
+        });
+      }
+
+      if (price == null || Number.isNaN(price)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["items", index, "price"],
+          message: ITEM_PRICE_REQUIRED_MESSAGE,
+        });
+      }
+    });
+  });
+}
+
+export const documentItemValidationMessages = {
+  name: ITEM_NAME_REQUIRED_MESSAGE,
+  quantity: ITEM_QUANTITY_REQUIRED_MESSAGE,
+  price: ITEM_PRICE_REQUIRED_MESSAGE,
+} as const;

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

@@ -4,9 +4,17 @@
  */
 import { PlusIcon, SeparatorHorizontal } from "lucide-react";
 import type { MutableRefObject } from "react";
-import type { UseFormGetValues, UseFormSetValue, UseFormWatch } from "react-hook-form";
-import { useFieldArray } from "react-hook-form";
+import type {
+  UseFormClearErrors,
+  UseFormGetValues,
+  UseFormSetValue,
+  UseFormTrigger,
+  UseFormWatch,
+} from "react-hook-form";
+import { useController, useFieldArray } from "react-hook-form";
+import type { DocumentTypes } from "@/ui/components/documents/types";
 import { Button } from "@/ui/components/ui/button";
+import { cn } from "@/ui/lib/utils";
 import DocumentAddItemForm from "./document-add-item-form";
 import type { AnyControl } from "./form-types";
 
@@ -23,12 +31,15 @@ function reindexPriceModes(priceModes: PriceModesMap, nextLength: number): Price
 
 type DocumentItemsSectionProps = {
   control: AnyControl;
-
   watch: UseFormWatch<any>;
 
   setValue: UseFormSetValue<any>;
+  clearErrors: UseFormClearErrors<any>;
+  trigger: UseFormTrigger<any>;
+  isSubmitted: boolean;
 
   getValues: UseFormGetValues<any>;
+  documentType?: DocumentTypes;
   entityId: string;
   currencyCode?: string;
   onAddNewTax?: () => void;
@@ -45,12 +56,17 @@ type DocumentItemsSectionProps = {
   initialPriceModes?: PriceModesMap;
   /** Called when item ordering or price mode changes outside normal field edits. */
   onItemsStateChange?: () => void;
+  locale?: string;
 };
 
 export function DocumentItemsSection({
   control,
+  documentType,
   watch,
   setValue,
+  clearErrors,
+  trigger,
+  isSubmitted,
   getValues,
   entityId,
   currencyCode,
@@ -62,11 +78,17 @@ export function DocumentItemsSection({
   priceModesRef,
   initialPriceModes = {},
   onItemsStateChange,
+  locale = "en",
 }: DocumentItemsSectionProps) {
   const { fields, append, remove, move } = useFieldArray({
     control: control as any,
     name: "items",
   });
+  const itemsController = useController({
+    control: control as any,
+    name: "items" as any,
+  });
+  const itemsError = itemsController.fieldState.error?.message;
 
   const syncPriceModes = (updater: (current: PriceModesMap) => PriceModesMap) => {
     if (!priceModesRef) return;
@@ -77,6 +99,7 @@ export function DocumentItemsSection({
     append({
       name: "",
       description: "",
+      classification: undefined,
       quantity: 1,
       price: undefined,
       taxes: [],
@@ -139,10 +162,16 @@ export function DocumentItemsSection({
       <h2 className="font-bold text-xl">{t("Items")}</h2>
 
       {fields.map((field, index: number) => (
-        <div key={field.id}>
+        <div
+          key={field.id}
+          className={cn(
+            index === 0 && itemsError && "rounded-lg border border-destructive/70 ring-1 ring-destructive/20",
+          )}
+        >
           <DocumentAddItemForm
-            form={{ control, watch, setValue, getValues } as any}
+            form={{ control, watch, setValue, clearErrors, trigger, getValues, formState: { isSubmitted } } as any}
             index={index}
+            documentType={documentType}
             control={control}
             entityId={entityId}
             currencyCode={currencyCode}
@@ -164,12 +193,21 @@ export function DocumentItemsSection({
               }
               onItemsStateChange?.();
             }}
+            locale={locale}
           />
         </div>
       ))}
 
+      {itemsError && <p className="font-normal text-destructive text-xs">{itemsError}</p>}
+
       <div className="flex gap-2">
-        <Button type="button" variant="outline" onClick={addItem} className="flex-1 cursor-pointer border-dashed">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={addItem}
+          className="flex-1 cursor-pointer border-dashed"
+          data-demo="marketing-demo-add-item"
+        >
           <PlusIcon className="mr-2 h-4 w-4" /> {t("Add item")}
         </Button>
         <Button type="button" variant="ghost" onClick={addSeparator} className="cursor-pointer text-muted-foreground">

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

@@ -27,6 +27,7 @@ type DocumentRecipientSectionProps = {
   /** Show end consumer (B2C) toggle next to tax number (Croatian entity + domestic transaction) */
   showEndConsumerToggle?: boolean;
   t: (key: string) => string;
+  locale?: string;
 };
 
 export function DocumentRecipientSection({
@@ -40,6 +41,7 @@ export function DocumentRecipientSection({
   initialCustomerName,
   showEndConsumerToggle,
   t,
+  locale = "en",
 }: DocumentRecipientSectionProps) {
   const nameInputRef = useRef<HTMLInputElement>(null);
 
@@ -51,6 +53,7 @@ export function DocumentRecipientSection({
     control: control as any,
     name: "customer.name" as any,
   });
+  const customerNameError = customerNameController.fieldState.error?.message;
 
   useEffect(() => {
     if (showCustomerForm && shouldFocusName) {
@@ -80,7 +83,7 @@ export function DocumentRecipientSection({
       </div>
 
       <div className="space-y-2">
-        <Label>{t("Name")}</Label>
+        <Label className={cn(customerNameError && "text-destructive")}>{t("Name")}</Label>
         <CustomerAutocomplete
           entityId={entityId}
           value={selectedCustomerId}
@@ -88,12 +91,17 @@ export function DocumentRecipientSection({
           onValueChange={onCustomerSelect}
           onCommitInlineName={(nextName) => customerNameController.field.onChange(nextName)}
           onClear={onCustomerClear}
-          placeholder={t("Search or create customer...")}
+          placeholder="Search or create customer..."
           initialDisplayName={initialCustomerName}
           inputTestId="document-customer-input"
+          inputDataDemo="marketing-demo-customer-input"
           inputRef={nameInputRef}
           commitOnBlurMode={showCustomerForm ? "update-inline" : "create"}
+          t={t}
+          locale={locale}
+          ariaInvalid={!!customerNameError}
         />
+        {customerNameError && <p className="font-normal text-destructive text-xs">{customerNameError}</p>}
       </div>
 
       {showCustomerForm && (

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

@@ -16,9 +16,10 @@ type LinkedDocumentsInfoProps = {
 };
 
 export function LinkedDocumentsInfo({ documents, locale, t }: LinkedDocumentsInfoProps) {
-  if (documents.length === 0) return null;
+  const validDocuments = documents.filter((document): document is LinkedDocumentSummary => !!document && !!document.id);
+  if (validDocuments.length === 0) return null;
 
-  const currencyCode = documents[0].currency_code || "EUR";
+  const currencyCode = validDocuments[0].currency_code || "EUR";
 
   const formatDate = (dateStr: string) => {
     try {
@@ -67,7 +68,7 @@ export function LinkedDocumentsInfo({ documents, locale, t }: LinkedDocumentsInf
           </TableRow>
         </TableHeader>
         <TableBody>
-          {documents.map((doc) => (
+          {validDocuments.map((doc) => (
             <TableRow key={doc.id}>
               <TableCell className="py-1.5 text-sm">{typeLabel(doc.type)}</TableCell>
               <TableCell className="py-1.5 text-sm">{doc.number}</TableCell>

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

@@ -1,11 +1,11 @@
 "use client";
 
 import type { CreateInvoiceRequest } from "@spaceinvoices/js-sdk";
+import { advanceInvoices, creditNotes, deliveryNotes, estimates, invoices } from "@spaceinvoices/js-sdk";
 import { Loader2 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "@/ui/lib/utils";
 import { useEntities } from "@/ui/providers/entities-context";
-import { useSDK } from "@/ui/providers/sdk-provider";
 import { DocumentPreviewSkeleton } from "../shared/document-preview-skeleton";
 import { ScaledDocumentPreview } from "../shared/scaled-document-preview";
 import { useA4Scaling } from "../shared/use-a4-scaling";
@@ -29,8 +29,6 @@ type LiveInvoicePreviewProps = {
   className?: string;
   apiBaseUrl?: string;
   getAuthToken?: () => string | undefined;
-  /** Locale for document rendering (e.g., "en-US", "sl-SI"). Uses user's UI language. */
-  locale?: string;
   /** Fixed scale to use instead of dynamic scaling. Useful to prevent layout shifts. */
   fixedScale?: number;
   /** Translation function for UI strings */
@@ -66,7 +64,6 @@ export function LiveInvoicePreview({
   currency: _currency = "EUR",
   template,
   className,
-  locale: _locale,
   fixedScale,
   t: tProp,
   documentTypeLabel: _documentTypeLabel,
@@ -80,7 +77,6 @@ export function LiveInvoicePreview({
   const [isRefreshPending, setIsRefreshPending] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const { activeEntity } = useEntities();
-  const { sdk } = useSDK();
   const abortControllerRef = useRef<AbortController | null>(null);
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const lastRequestKeyRef = useRef<string | null>(null);
@@ -122,7 +118,7 @@ export function LiveInvoicePreview({
       setError(null);
 
       try {
-        if (!sdk || !activeEntity?.id) {
+        if (!activeEntity?.id) {
           throw new Error("Authentication required");
         }
         const startedAt = performance.now();
@@ -173,7 +169,8 @@ export function LiveInvoicePreview({
         });
 
         // Call the render API using the appropriate SDK method for the document type
-        // Don't send locale — let entity locale drive formatting (decimal separators, date format)
+        // Frontend preview requests intentionally avoid locale/language overrides.
+        // Backend/entity defaults drive document formatting and default output language.
         const renderParams: Record<string, any> = { partial: "true" as const, template };
         if (qrOverrides?.upn_qr_enabled !== undefined) {
           renderParams.upn_qr_enabled = qrOverrides.upn_qr_enabled ? "true" : "false";
@@ -188,19 +185,19 @@ export function LiveInvoicePreview({
         let html: string;
         switch (documentType) {
           case "estimate":
-            html = await sdk.estimates.renderEstimatePreview(previewData as any, renderParams, requestOpts);
+            html = await estimates.renderEstimatePreview(previewData as any, renderParams, requestOpts);
             break;
           case "credit_note":
-            html = await sdk.creditNotes.renderCreditNotePreview(previewData as any, renderParams, requestOpts);
+            html = await creditNotes.renderCreditNotePreview(previewData as any, renderParams, requestOpts);
             break;
           case "advance_invoice":
-            html = await sdk.advanceInvoices.renderAdvanceInvoicePreview(previewData as any, renderParams, requestOpts);
+            html = await advanceInvoices.renderAdvanceInvoicePreview(previewData as any, renderParams, requestOpts);
             break;
           case "delivery_note":
-            html = await sdk.deliveryNotes.renderDeliveryNotePreview(previewData as any, renderParams, requestOpts);
+            html = await deliveryNotes.renderDeliveryNotePreview(previewData as any, renderParams, requestOpts);
             break;
           default:
-            html = await sdk.invoices.renderInvoicePreview(previewData as any, renderParams, requestOpts);
+            html = await invoices.renderInvoicePreview(previewData as any, renderParams, requestOpts);
             break;
         }
 
@@ -258,7 +255,6 @@ export function LiveInvoicePreview({
       activeEntity?.city,
       activeEntity?.name,
       template,
-      sdk,
       documentType,
       qrOverrides,
       qrOverrides?.upn_qr_enabled,
@@ -325,7 +321,12 @@ export function LiveInvoicePreview({
   const showRefreshBadge = !!previewHtml && (isRefreshPending || isLoading);
 
   return (
-    <div ref={containerRef} className={cn("relative", className)}>
+    <div
+      ref={containerRef}
+      className={cn("relative", className)}
+      data-testid="live-preview"
+      data-demo="marketing-demo-live-preview"
+    >
       {/* Error state */}
       {error && !isLoading && (
         <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-destructive/50 bg-destructive/10 p-8">
@@ -351,7 +352,10 @@ export function LiveInvoicePreview({
             </div>
           )}
           {isLoading && <div className="absolute inset-0 z-10 rounded-lg bg-background/35 backdrop-blur-[1.5px]" />}
-          <div className={cn(isLoading && "opacity-75 transition-opacity duration-200")}>
+          <div
+            className={cn(isLoading && "opacity-75 transition-opacity duration-200")}
+            data-demo="marketing-demo-totals-root"
+          >
             <ScaledDocumentPreview
               htmlContent={previewHtml}
               scale={scale}

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

@@ -1,10 +1,18 @@
 import { HelpCircle, Plus, Trash2 } from "lucide-react";
 import { Button } from "@/ui/components/ui/button";
 import { Checkbox } from "@/ui/components/ui/checkbox";
+import { Input } from "@/ui/components/ui/input";
 import { Label } from "@/ui/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/components/ui/select";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
 import { cn } from "@/ui/lib/utils";
+import {
+  createEmptyPaymentRow,
+  type DraftPaymentRow,
+  derivePaymentRowAmounts,
+  getDisplayPaymentAmount,
+  getRecordedPaymentTotal,
+} from "./payment-rows";
 
 // Regular payment types (excluding special types like credit_note and advance)
 const regularPaymentTypes = ["cash", "bank_transfer", "card", "check", "other"] as const;
@@ -24,27 +32,38 @@ type MarkAsPaidSectionProps = {
   /** Called when the checkbox changes */
   onCheckedChange: (checked: boolean) => void;
   /** Selected payment types */
-  paymentTypes: string[];
-  /** Called when payment types change */
-  onPaymentTypesChange: (values: string[]) => void;
+  paymentRows: DraftPaymentRow[];
+  /** Called when payment rows change */
+  onPaymentRowsChange: (values: DraftPaymentRow[]) => void;
+  /** Current document total used for derived payment suggestions */
+  documentTotal: number;
   /** Translation function */
   t: (key: string) => string;
   /** Always show payment type selector (e.g. for FINA fiscalization) */
   alwaysShowPaymentType?: boolean;
   /** Force paid state — hides the checkbox and always shows payment selectors */
   forced?: boolean;
+  validationMessage?: string;
+  requireFullPayment?: boolean;
 };
 
 export function MarkAsPaidSection({
   checked,
   onCheckedChange,
-  paymentTypes,
-  onPaymentTypesChange,
+  paymentRows,
+  onPaymentRowsChange,
+  documentTotal,
   t,
   alwaysShowPaymentType,
   forced,
+  validationMessage,
+  requireFullPayment,
 }: MarkAsPaidSectionProps) {
   const showPaymentTypes = forced || checked || alwaysShowPaymentType;
+  const showPaymentAmounts = paymentRows.length > 1;
+  const derivedAmounts = derivePaymentRowAmounts(paymentRows, documentTotal);
+  const recordedTotal = getRecordedPaymentTotal(paymentRows, documentTotal);
+  const remainingTotal = Math.max(0, Math.round((documentTotal - recordedTotal) * 100) / 100);
 
   return (
     <div className={cn("flex flex-col gap-4 rounded-md border p-4", showPaymentTypes && "gap-3")}>
@@ -68,7 +87,11 @@ export function MarkAsPaidSection({
                     <HelpCircle className="size-4 text-muted-foreground" />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent side="top">{t("Invoice will be marked as fully paid upon creation")}</TooltipContent>
+                <TooltipContent side="top">
+                  {requireFullPayment
+                    ? t("This document must be fully paid on creation")
+                    : t("Record one or more payments on creation")}
+                </TooltipContent>
               </Tooltip>
             )}
           </div>
@@ -80,21 +103,26 @@ export function MarkAsPaidSection({
           {alwaysShowPaymentType && !checked && (
             <Label className="text-muted-foreground text-xs">{t("Payment Type")}</Label>
           )}
-          {paymentTypes.map((type, index) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: payment types list uses index key
-            <div key={index} className="flex items-center gap-2">
+          {paymentRows.map((row, index) => (
+            <div
+              key={row.id ?? `${row.type ?? "payment"}-${row.amount || "empty"}`}
+              className={cn(
+                "grid gap-2 md:items-center",
+                showPaymentAmounts ? "md:grid-cols-[minmax(0,1fr)_140px_auto]" : "md:grid-cols-[minmax(0,1fr)_auto]",
+              )}
+            >
               <Select
-                value={type}
+                value={row.type ?? undefined}
                 onValueChange={(v) => {
-                  if (v) {
-                    const updated = [...paymentTypes];
-                    updated[index] = v;
-                    onPaymentTypesChange(updated);
-                  }
+                  const updated = [...paymentRows];
+                  updated[index] = { ...updated[index], type: (v as any) ?? null };
+                  onPaymentRowsChange(updated);
                 }}
               >
                 <SelectTrigger className="w-full md:w-fit">
-                  <SelectValue placeholder={t("Select payment type")}>{t(PAYMENT_TYPE_LABELS[type])}</SelectValue>
+                  <SelectValue placeholder={t("Please select")}>
+                    {row.type ? t(PAYMENT_TYPE_LABELS[row.type]) : undefined}
+                  </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
                   {regularPaymentTypes.map((pt) => (
@@ -104,15 +132,33 @@ export function MarkAsPaidSection({
                   ))}
                 </SelectContent>
               </Select>
-              {paymentTypes.length > 1 && (
+              {showPaymentAmounts && (
+                <Input
+                  type="number"
+                  step="0.01"
+                  inputMode="decimal"
+                  value={getDisplayPaymentAmount(row, derivedAmounts[index])}
+                  onChange={(event) => {
+                    const updated = [...paymentRows];
+                    updated[index] = {
+                      ...updated[index],
+                      amount: event.target.value,
+                      amountTouched: true,
+                    };
+                    onPaymentRowsChange(updated);
+                  }}
+                  placeholder={t("Amount")}
+                />
+              )}
+              {paymentRows.length > 1 && (
                 <Button
                   type="button"
                   variant="ghost"
                   size="icon"
                   className="size-8 shrink-0"
                   onClick={() => {
-                    const updated = paymentTypes.filter((_, i) => i !== index);
-                    onPaymentTypesChange(updated);
+                    const updated = paymentRows.filter((_, i) => i !== index);
+                    onPaymentRowsChange(updated);
                   }}
                 >
                   <Trash2 className="size-4 text-muted-foreground" />
@@ -125,11 +171,22 @@ export function MarkAsPaidSection({
             variant="ghost"
             size="sm"
             className="w-fit gap-1 text-muted-foreground"
-            onClick={() => onPaymentTypesChange([...paymentTypes, "bank_transfer"])}
+            onClick={() => onPaymentRowsChange([...paymentRows, createEmptyPaymentRow()])}
           >
             <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>
+            </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>