@spaceinvoices/react-ui 0.4.11 → 0.4.12

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" | "quote" | 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" | "quote" | null,
+): string {
+  if (type === "estimate" && titleType === "quote") {
+    return t("Quote");
+  }
+
   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}
               />
             )}
           </>

package/src/components/documents/view/document-version-history.tsx

@@ -0,0 +1,137 @@
+import type { DocumentVersion } from "@spaceinvoices/js-sdk";
+import { advanceInvoices, creditNotes, deliveryNotes, estimates, invoices } from "@spaceinvoices/js-sdk";
+import { useQuery } from "@tanstack/react-query";
+import { History } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import { Skeleton } from "@/ui/components/ui/skeleton";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import de from "./locales/de";
+import es from "./locales/es";
+import fr from "./locales/fr";
+import hr from "./locales/hr";
+import it from "./locales/it";
+import nl from "./locales/nl";
+import pl from "./locales/pl";
+import pt from "./locales/pt";
+import sl from "./locales/sl";
+
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
+type DocumentViewDocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
+
+interface DocumentVersionHistoryProps extends ComponentTranslationProps {
+  documentId: string;
+  documentType: DocumentViewDocumentType;
+  entityId: string;
+  locale?: string;
+  variant?: "card" | "inline";
+}
+
+function formatDate(date: string, locale: string) {
+  return new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(new Date(date));
+}
+
+function getActorLabel(version: DocumentVersion, t: (key: string) => string) {
+  if (version.user?.name) return version.user.name;
+  if (version.user?.email) return version.user.email;
+  return t("System");
+}
+
+export function DocumentVersionHistory({
+  documentId,
+  documentType,
+  entityId,
+  locale = "en",
+  variant = "card",
+  ...i18nProps
+}: DocumentVersionHistoryProps) {
+  const t = createTranslation({ translations, locale, ...i18nProps });
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["document-versions", documentType, documentId, entityId],
+    queryFn: async () => {
+      if (documentType === "invoice") {
+        return invoices.getVersions(documentId, { entity_id: entityId });
+      }
+      if (documentType === "estimate") {
+        return estimates.getVersions(documentId, { entity_id: entityId });
+      }
+      if (documentType === "credit_note") {
+        return creditNotes.getVersions(documentId, { entity_id: entityId });
+      }
+      if (documentType === "advance_invoice") {
+        return advanceInvoices.getVersions(documentId, { entity_id: entityId });
+      }
+      return deliveryNotes.getVersions(documentId, { entity_id: entityId });
+    },
+    enabled: !!documentId && !!entityId,
+    staleTime: 30_000,
+    gcTime: 300_000,
+    refetchOnWindowFocus: false,
+  });
+
+  const versions = data?.versions ?? [];
+
+  const body = isLoading ? (
+    <div className="space-y-2">
+      <Skeleton className="h-14 w-full" />
+      <Skeleton className="h-14 w-full" />
+    </div>
+  ) : versions.length === 0 ? (
+    <p className="py-2 text-muted-foreground text-sm">{t("No version history")}</p>
+  ) : (
+    <div className="space-y-2">
+      {versions.map((version: DocumentVersion) => (
+        <div key={version.id} className="rounded-md border p-3">
+          <div className="flex items-start justify-between gap-3">
+            <div>
+              <div className="font-medium text-sm">
+                {t("Version")} {version.version}
+              </div>
+              <div className="text-muted-foreground text-xs">
+                {t("by")} {getActorLabel(version, t)}
+              </div>
+            </div>
+            <div className="text-right text-muted-foreground text-xs">{formatDate(version.created_at, locale)}</div>
+          </div>
+          {version.changed_fields.length > 0 ? (
+            <p className="mt-2 text-muted-foreground text-xs">{version.changed_fields.join(", ")}</p>
+          ) : null}
+          {version.reason ? <p className="mt-1 text-xs">{version.reason}</p> : null}
+        </div>
+      ))}
+    </div>
+  );
+
+  if (variant === "inline") {
+    return (
+      <div>
+        <div className="mb-3 flex items-center gap-2 font-medium text-sm">
+          <History className="h-4 w-4" />
+          <span>
+            {t("Version history")} {versions.length > 0 ? `(${versions.length})` : ""}
+          </span>
+        </div>
+        {body}
+      </div>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <History className="h-4 w-4" />
+          {t("Version history")}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>{body}</CardContent>
+    </Card>
+  );
+}

package/src/components/documents/view/index.ts

@@ -4,4 +4,5 @@ export { DocumentDetailsCard } from "./document-details-card";
 export { DocumentPaymentsList } from "./document-payments-list";
 export { DocumentRelationsList } from "./document-relations-list";
 export { DocumentSidebar } from "./document-sidebar";
+export { DocumentVersionHistory } from "./document-version-history";
 export { useDocumentDownload } from "./use-document-download";