@spaceinvoices/react-ui 0.4.11 → 0.4.31

package/src/components/documents/view/document-details-card.tsx

@@ -2,6 +2,8 @@ import type { AdvanceInvoice, CreditNote, DeliveryNote, Estimate, Invoice } from
 import { Badge } from "@/ui/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
 import { Separator } from "@/ui/components/ui/separator";
+import { formatDateOnlyForDisplay } from "@/ui/lib/date-only";
+import { getDisplayDocumentNumber } from "@/ui/lib/document-display";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 import de from "./locales/de";
@@ -16,21 +18,16 @@ import sl from "./locales/sl";
 
 const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
-// Document type union
 type Document = Invoice | Estimate | CreditNote | AdvanceInvoice | DeliveryNote;
 type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
 
 interface DocumentDetailsCardProps extends ComponentTranslationProps {
   document: Document;
   documentType: DocumentType;
-  /** Locale for date formatting */
   locale?: string;
   variant?: "card" | "inline";
 }
 
-/**
- * Format currency value
- */
 function formatCurrency(amount: number, currencyCode: string, locale: string): string {
   return new Intl.NumberFormat(locale, {
     style: "currency",
@@ -38,27 +35,13 @@ function formatCurrency(amount: number, currencyCode: string, locale: string): s
   }).format(amount);
 }
 
-/**
- * Format date
- */
-function formatDate(date: Date | string | null | undefined, locale: string): string {
-  if (!date) return "-";
-  const d = typeof date === "string" ? new Date(date) : date;
-  return new Intl.DateTimeFormat(locale, {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  }).format(d);
-}
-
 /**
  * Get payment status for invoice/advance invoice
  */
-function getPaymentStatus(
+export function getDocumentPaymentStatus(
   document: Invoice | AdvanceInvoice,
   t: (key: string) => string,
 ): { label: string; variant: "default" | "secondary" | "destructive" | "outline" } {
-  // Check voided_at - ensure it's a valid date, not just truthy
   if (document.voided_at && new Date(document.voided_at).getTime() > 0) {
     return { label: t("Voided"), variant: "secondary" };
   }
@@ -71,15 +54,6 @@ function getPaymentStatus(
   return { label: t("Unpaid"), variant: "destructive" };
 }
 
-/**
- * Document Details Card Component
- *
- * Displays document metadata including:
- * - Document number and dates
- * - Customer information
- * - Totals breakdown
- * - Payment status (for invoices/advance invoices)
- */
 export function DocumentDetailsCard({
   document,
   documentType,
@@ -92,23 +66,19 @@ export function DocumentDetailsCard({
   const currencyCode = document.currency_code;
   const sign = documentType === "credit_note" ? -1 : 1;
   const fmt = (amount: number) => formatCurrency(amount, currencyCode, locale);
-  const fmtDate = (date: Date | string | null | undefined) => formatDate(date, locale);
+  const fmtDate = (date: Date | string | null | undefined) => formatDateOnlyForDisplay(date, locale);
 
-  // Type guards for document-specific fields
   const isInvoiceOrAdvance = documentType === "invoice" || documentType === "advance_invoice";
   const isEstimate = documentType === "estimate";
   const invoiceDoc = document as Invoice | AdvanceInvoice;
   const estimateDoc = document as Estimate;
-
-  // Get customer name
   const customerName = document.customer?.name || "-";
 
   const bodyContent = (
     <>
-      {/* Document info */}
       <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
         <div className="text-muted-foreground">{t("Number")}</div>
-        <div className="text-right font-medium">{document.number}</div>
+        <div className="text-right font-medium">{getDisplayDocumentNumber(document, t)}</div>
 
         <div className="text-muted-foreground">{t("Date")}</div>
         <div className="text-right">{fmtDate(document.date)}</div>
@@ -146,7 +116,6 @@ export function DocumentDetailsCard({
 
       <Separator />
 
-      {/* Totals */}
       <div className="space-y-2 text-sm">
         {document.total_discount != null && document.total_discount !== 0 && (
           <div className="flex justify-between">
@@ -186,7 +155,6 @@ export function DocumentDetailsCard({
           <span>{fmt(document.total_with_tax * sign)}</span>
         </div>
 
-        {/* Payment info for invoices/advance invoices */}
         {isInvoiceOrAdvance && invoiceDoc.total_paid > 0 && (
           <>
             <Separator />
@@ -210,7 +178,9 @@ export function DocumentDetailsCard({
         <div className="flex items-center justify-between font-medium text-sm">
           {t("Details")}
           {isInvoiceOrAdvance && (
-            <Badge variant={getPaymentStatus(invoiceDoc, t).variant}>{getPaymentStatus(invoiceDoc, t).label}</Badge>
+            <Badge variant={getDocumentPaymentStatus(invoiceDoc, t).variant}>
+              {getDocumentPaymentStatus(invoiceDoc, t).label}
+            </Badge>
           )}
         </div>
         <div className="space-y-4">{bodyContent}</div>
@@ -224,7 +194,9 @@ export function DocumentDetailsCard({
         <CardTitle className="flex items-center justify-between text-lg">
           {t("Details")}
           {isInvoiceOrAdvance && (
-            <Badge variant={getPaymentStatus(invoiceDoc, t).variant}>{getPaymentStatus(invoiceDoc, t).label}</Badge>
+            <Badge variant={getDocumentPaymentStatus(invoiceDoc, t).variant}>
+              {getDocumentPaymentStatus(invoiceDoc, t).label}
+            </Badge>
           )}
         </CardTitle>
       </CardHeader>

package/src/components/documents/view/document-payments-list.tsx

@@ -1,7 +1,8 @@
 import type { Payment } from "@spaceinvoices/js-sdk";
+import { payments as paymentsApi } from "@spaceinvoices/js-sdk";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react";
-import { useState } from "react";
+import { type ReactNode, useState } from "react";
 import { Button } from "@/ui/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
 import {
@@ -19,9 +20,11 @@ import {
   DropdownMenuTrigger,
 } from "@/ui/components/ui/dropdown-menu";
 import { Skeleton } from "@/ui/components/ui/skeleton";
+import { actionMenuTooltipProps, Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { getPaymentTypeLabel } from "@/ui/lib/payment-display";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
-import { useSDK } from "@/ui/providers/sdk-provider";
+import { getSavedDocumentPreviewQueryPrefix } from "../shared/document-preview-display";
 import de from "./locales/de";
 import es from "./locales/es";
 import fr from "./locales/fr";
@@ -41,6 +44,7 @@ interface DocumentPaymentsListProps extends ComponentTranslationProps {
   documentType: DocumentType;
   entityId: string;
   currencyCode: string;
+  payments?: Payment[];
   /** Locale for formatting */
   locale?: string;
   /** Callback when Add Payment is clicked */
@@ -51,9 +55,20 @@ interface DocumentPaymentsListProps extends ComponentTranslationProps {
   onDeleteSuccess?: () => void;
   /** Callback on delete error */
   onDeleteError?: (error: string) => void;
+  addDisabledReason?: string;
+  editDisabledReason?: string;
+  deleteDisabledReason?: string;
   variant?: "card" | "inline";
 }
 
+function isAppliedAdvancePayment(payment: Payment): boolean {
+  return payment.type === "advance" && !!payment.invoice_id && !!payment.advance_invoice_id;
+}
+
+function isAppliedCreditNotePayment(payment: Payment): boolean {
+  return payment.type === "credit_note" && !!payment.invoice_id && !!payment.credit_note_id;
+}
+
 /**
  * Format currency value
  */
@@ -90,16 +105,19 @@ export function DocumentPaymentsList({
   documentType,
   entityId,
   currencyCode,
+  payments: prefetchedPayments,
   locale = "en",
   onAddPayment,
   onEditPayment,
   onDeleteSuccess,
   onDeleteError,
+  addDisabledReason,
+  editDisabledReason,
+  deleteDisabledReason,
   variant = "card",
   ...i18nProps
 }: DocumentPaymentsListProps) {
   const t = createTranslation({ translations, locale, ...i18nProps });
-  const { sdk } = useSDK();
   const queryClient = useQueryClient();
 
   const [paymentToDelete, setPaymentToDelete] = useState<Payment | null>(null);
@@ -124,9 +142,7 @@ export function DocumentPaymentsList({
   const { data: paymentsData, isLoading } = useQuery({
     queryKey: ["payments", documentType, documentId, entityId],
     queryFn: async () => {
-      if (!sdk) throw new Error("SDK not initialized");
-
-      const response = await sdk.payments.list({
+      const response = await paymentsApi.list({
         entity_id: entityId,
         query: JSON.stringify(getFilter()),
         order_by: "-date",
@@ -134,27 +150,30 @@ export function DocumentPaymentsList({
 
       return response.data;
     },
-    enabled: !!sdk && !!entityId && !!documentId,
+    enabled: !prefetchedPayments && !!entityId && !!documentId,
     staleTime: 30_000,
     gcTime: 600_000,
     refetchOnWindowFocus: false,
   });
 
-  const payments = paymentsData || [];
+  const payments = (prefetchedPayments ?? paymentsData ?? []).filter((payment) =>
+    documentType === "advance_invoice" ? !isAppliedAdvancePayment(payment) : true,
+  );
 
   /**
    * Handle payment deletion
    */
   const handleDelete = async () => {
-    if (!paymentToDelete || !sdk) return;
+    if (!paymentToDelete) return;
 
     setIsDeleting(true);
     try {
-      await sdk.payments.delete(paymentToDelete.id, { entity_id: entityId });
+      await paymentsApi.delete(paymentToDelete.id, { entity_id: entityId });
 
       // Invalidate this document's payments and document view
       queryClient.invalidateQueries({ queryKey: ["payments", documentType, documentId] });
       queryClient.invalidateQueries({ queryKey: ["documents", documentType, documentId] });
+      queryClient.invalidateQueries({ queryKey: getSavedDocumentPreviewQueryPrefix(documentId) });
 
       onDeleteSuccess?.();
     } catch (error) {
@@ -170,21 +189,40 @@ export function DocumentPaymentsList({
    * Get payment type label
    */
   const getTypeLabel = (type: string): string => {
-    const labels: Record<string, string> = {
-      cash: t("cash"),
-      bank_transfer: t("bank_transfer"),
-      card: t("card"),
-      check: t("check"),
-      credit_note: t("credit_note"),
-      other: t("other"),
-      advance: t("advance_invoice"),
-    };
-    return labels[type] || type;
+    return getPaymentTypeLabel(type, t);
   };
 
   const fmt = (amount: number) => formatCurrency(amount, currencyCode, locale);
   const fmtDate = (date: Date | string | null) => formatDate(date, locale);
 
+  const addPaymentButton = (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={addDisabledReason ? undefined : onAddPayment}
+      className="cursor-pointer"
+      disabled={!!addDisabledReason}
+    >
+      <Plus className="mr-1 h-4 w-4" />
+      {t("Add payment")}
+    </Button>
+  );
+
+  const renderDisabledAction = (item: ReactNode, reason?: string, side: "left" | "top" = "left") => {
+    if (!reason) return item;
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div>{item}</div>
+        </TooltipTrigger>
+        <TooltipContent side={side} {...actionMenuTooltipProps}>
+          {reason}
+        </TooltipContent>
+      </Tooltip>
+    );
+  };
+
   const headerContent = (
     <div
       className={
@@ -196,10 +234,7 @@ export function DocumentPaymentsList({
       >
         {t("Payments")} {payments.length > 0 && `(${payments.length})`}
       </h3>
-      <Button variant="outline" size="sm" onClick={onAddPayment} className="cursor-pointer">
-        <Plus className="mr-1 h-4 w-4" />
-        {t("Add payment")}
-      </Button>
+      {renderDisabledAction(addPaymentButton, addDisabledReason)}
     </div>
   );
 
@@ -212,35 +247,60 @@ export function DocumentPaymentsList({
     <p className="py-4 text-center text-muted-foreground text-sm">{t("No payments")}</p>
   ) : (
     <div className="space-y-2">
-      {payments.map((payment) => (
-        <div key={payment.id} className="flex items-center justify-between rounded-md border p-3">
-          <div className="flex items-center gap-4">
-            <span className="text-muted-foreground text-sm">{fmtDate(payment.date)}</span>
-            <span className="font-medium">{fmt(payment.amount)}</span>
-            <span className="text-muted-foreground text-sm">{getTypeLabel(payment.type)}</span>
-          </div>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="sm" className="h-8 w-8 cursor-pointer p-0">
-                <MoreHorizontal className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => onEditPayment?.(payment)} className="cursor-pointer">
-                <Pencil className="mr-2 h-4 w-4" />
-                {t("Edit")}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => setPaymentToDelete(payment)}
-                className="cursor-pointer text-destructive focus:text-destructive"
-              >
-                <Trash2 className="mr-2 h-4 w-4" />
-                {t("Delete")}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      ))}
+      {payments.map((payment) =>
+        (() => {
+          const appliedAdvance = isAppliedAdvancePayment(payment);
+          const appliedCreditNote = isAppliedCreditNotePayment(payment);
+          const managedReason = appliedAdvance
+            ? t("Applied advance payments are managed automatically.")
+            : appliedCreditNote
+              ? t("Applied credit note payments are managed automatically.")
+              : undefined;
+          const paymentEditDisabledReason = managedReason ?? editDisabledReason;
+          const paymentDeleteDisabledReason = managedReason ?? deleteDisabledReason;
+
+          return (
+            <div key={payment.id} className="flex items-center justify-between rounded-md border p-3">
+              <div className="flex items-center gap-4">
+                <span className="text-muted-foreground text-sm">{fmtDate(payment.date)}</span>
+                <span className="font-medium">{fmt(payment.amount)}</span>
+                <span className="text-muted-foreground text-sm">{getTypeLabel(payment.type)}</span>
+              </div>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="sm" className="h-8 w-8 cursor-pointer p-0">
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {renderDisabledAction(
+                    <DropdownMenuItem
+                      onClick={paymentEditDisabledReason ? undefined : () => onEditPayment?.(payment)}
+                      className="cursor-pointer"
+                      disabled={!!paymentEditDisabledReason}
+                    >
+                      <Pencil className="mr-2 h-4 w-4" />
+                      {t("Edit")}
+                    </DropdownMenuItem>,
+                    paymentEditDisabledReason,
+                  )}
+                  {renderDisabledAction(
+                    <DropdownMenuItem
+                      onClick={paymentDeleteDisabledReason ? undefined : () => setPaymentToDelete(payment)}
+                      className="cursor-pointer text-destructive focus:text-destructive"
+                      disabled={!!paymentDeleteDisabledReason}
+                    >
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      {t("Delete")}
+                    </DropdownMenuItem>,
+                    paymentDeleteDisabledReason,
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          );
+        })(),
+      )}
     </div>
   );
 
@@ -287,10 +347,7 @@ export function DocumentPaymentsList({
           <CardTitle className="text-lg">
             {t("Payments")} {payments.length > 0 && `(${payments.length})`}
           </CardTitle>
-          <Button variant="outline" size="sm" onClick={onAddPayment} className="cursor-pointer">
-            <Plus className="mr-1 h-4 w-4" />
-            {t("Add payment")}
-          </Button>
+          {renderDisabledAction(addPaymentButton, addDisabledReason)}
         </CardHeader>
         <CardContent>{bodyContent}</CardContent>
       </Card>

package/src/components/documents/view/document-relations-list.tsx

@@ -14,16 +14,33 @@ import pt from "./locales/pt";
 import sl from "./locales/sl";
 
 const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
+type RelatedDocumentSummary = {
+  id: string;
+  type: "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
+  number: string;
+  title_type?: "estimate" | "proforma_invoice" | null;
+};
+type DocumentRelationWithSummary = DocumentRelation & {
+  related_document?: RelatedDocumentSummary;
+};
 
 interface DocumentRelationsListProps extends ComponentTranslationProps {
   documentId: string;
-  documentRelations?: DocumentRelation[];
+  documentRelations?: DocumentRelationWithSummary[];
   locale?: string;
   onNavigate?: (documentId: string) => void;
   variant?: "card" | "inline";
 }
 
-function getDocumentTypeLabel(type: string, t: (key: string) => string): string {
+function getDocumentTypeLabel(
+  type: string,
+  t: (key: string) => string,
+  titleType?: "estimate" | "proforma_invoice" | null,
+): string {
+  if (type === "estimate" && titleType === "proforma_invoice") {
+    return t("Proforma invoice");
+  }
+
   const labels: Record<string, string> = {
     invoice: t("Invoice"),
     estimate: t("Estimate"),
@@ -60,7 +77,6 @@ export function DocumentRelationsList({
   ...i18nProps
 }: DocumentRelationsListProps) {
   const t = createTranslation({ translations, locale, ...i18nProps });
-
   const relations = documentRelations || [];
 
   if (relations.length === 0) {
@@ -72,19 +88,23 @@ export function DocumentRelationsList({
       {relations.map((relation) => {
         const isSource = relation.source_id === documentId;
         const otherType = isSource ? relation.target_type : relation.source_type;
-        const otherId = isSource ? relation.target_id : relation.source_id;
+        const relatedSummary = relation.related_document;
+        const otherId = relatedSummary?.id ?? (isSource ? relation.target_id : relation.source_id);
+        const title = relatedSummary?.number
+          ? `${getDocumentTypeLabel(otherType, t, relatedSummary.title_type)} ${relatedSummary.number}`
+          : getDocumentTypeLabel(otherType, t, relatedSummary?.title_type);
 
         return (
           <div key={relation.id} className="flex items-center justify-between rounded-md border p-3">
             <div className="flex flex-col gap-0.5">
-              <span className="font-medium text-sm">{getDocumentTypeLabel(otherType, t)}</span>
+              <span className="font-medium text-sm">{title}</span>
               <span className="text-muted-foreground text-xs">{getRelationLabel(relation.relation_type, t)}</span>
             </div>
             {onNavigate ? (
               <button
                 type="button"
                 onClick={() => onNavigate(otherId)}
-                className="flex items-center gap-1 text-primary text-sm hover:underline"
+                className="flex items-center gap-1 text-primary-readable text-sm hover:underline"
               >
                 <Link2 className="h-3.5 w-3.5" />
                 {t("View")}

package/src/components/documents/view/document-sidebar.tsx

@@ -15,6 +15,7 @@ import { DocumentActivitiesList } from "./document-activities-list";
 import { DocumentDetailsCard } from "./document-details-card";
 import { DocumentPaymentsList } from "./document-payments-list";
 import { DocumentRelationsList } from "./document-relations-list";
+import { DocumentVersionHistory } from "./document-version-history";
 
 type Document = Invoice | Estimate | CreditNote | AdvanceInvoice | DeliveryNote;
 type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
@@ -25,18 +26,19 @@ interface DocumentSidebarProps extends ComponentTranslationProps {
   entityId: string;
   locale?: string;
   currentUserId?: string;
-  /** Show payments section */
   showPayments?: boolean;
+  payments?: Payment[];
   onAddPayment?: () => void;
   onEditPayment?: (payment: Payment) => void;
   onPaymentDeleteSuccess?: () => void;
   onPaymentDeleteError?: (error: string) => void;
+  addPaymentDisabledReason?: string;
+  editPaymentDisabledReason?: string;
+  deletePaymentDisabledReason?: string;
   /** Navigate to a related document */
   onNavigateRelation?: (documentId: string) => void;
-  /** FURS fiscalization */
   showFurs?: boolean;
   fursFiscalizationData?: any;
-  /** FINA fiscalization */
   showFina?: boolean;
   finaFiscalizationData?: any;
   onRetryFiscalization?: () => void;
@@ -50,10 +52,14 @@ export function DocumentSidebar({
   locale = "en",
   currentUserId,
   showPayments,
+  payments,
   onAddPayment,
   onEditPayment,
   onPaymentDeleteSuccess,
   onPaymentDeleteError,
+  addPaymentDisabledReason,
+  editPaymentDisabledReason,
+  deletePaymentDisabledReason,
   onNavigateRelation,
   showFurs,
   fursFiscalizationData,
@@ -86,11 +92,15 @@ export function DocumentSidebar({
               documentType={documentType as "invoice" | "credit_note" | "advance_invoice"}
               entityId={entityId}
               currencyCode={document.currency_code}
+              payments={payments}
               locale={locale}
               onAddPayment={onAddPayment}
               onEditPayment={onEditPayment}
               onDeleteSuccess={onPaymentDeleteSuccess}
               onDeleteError={onPaymentDeleteError}
+              addDisabledReason={addPaymentDisabledReason}
+              editDisabledReason={editPaymentDisabledReason}
+              deleteDisabledReason={deletePaymentDisabledReason}
               {...i18nProps}
             />
           </>
@@ -120,6 +130,16 @@ export function DocumentSidebar({
           {...i18nProps}
         />
 
+        <Separator />
+        <DocumentVersionHistory
+          variant="inline"
+          documentId={document.id}
+          documentType={documentType}
+          entityId={entityId}
+          locale={locale}
+          {...i18nProps}
+        />
+
         {(showFurs || showFina) && (
           <>
             <Separator />
@@ -131,6 +151,7 @@ export function DocumentSidebar({
                 onRetry={onRetryFiscalization}
                 isRetrying={isRetryingFiscalization}
                 locale={locale}
+                {...i18nProps}
               />
             )}
             {showFina && (
@@ -141,6 +162,7 @@ export function DocumentSidebar({
                 onRetry={onRetryFiscalization}
                 isRetrying={isRetryingFiscalization}
                 locale={locale}
+                {...i18nProps}
               />
             )}
           </>