@spaceinvoices/react-ui 0.4.3 → 0.4.5

package/src/components/documents/view/document-actions-bar.tsx

@@ -44,7 +44,8 @@ const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
 
-const PDF_LOCALE_CODES = [
+/** Language options for PDF label translations (formatting always uses entity locale) */
+const PDF_LANGUAGE_CODES = [
   { label: "English", code: "en-US" },
   { label: "German", code: "de-DE" },
   { label: "Slovenian", code: "sl-SI" },
@@ -100,22 +101,6 @@ interface DocumentActionsBarProps extends ComponentTranslationProps {
   isVoiding?: boolean;
 }
 
-function getApiLocale(uiLanguage: string): string {
-  const localeMap: Record<string, string> = {
-    en: "en-US",
-    de: "de-DE",
-    sl: "sl-SI",
-    it: "it-IT",
-    fr: "fr-FR",
-    es: "es-ES",
-    pt: "pt-PT",
-    nl: "nl-NL",
-    pl: "pl-PL",
-    hr: "hr-HR",
-  };
-  return localeMap[uiLanguage] || "en-US";
-}
-
 export function DocumentActionsBar({
   document,
   documentType,
@@ -163,7 +148,7 @@ export function DocumentActionsBar({
   const shareableId = (document as Invoice).shareable_id;
   const shareUrl = shareableId ? `${window.location.origin}/public/invoices/${shareableId}` : null;
 
-  const handleDownloadPdf = (locale: string) => downloadPdf(document, documentType, locale);
+  const handleDownloadPdf = (language?: string) => downloadPdf(document, documentType, language);
   const handleDownloadEslog = () => downloadEslog(document, documentType);
 
   const handleCopyShareLink = async () => {
@@ -178,7 +163,6 @@ export function DocumentActionsBar({
     }
   };
 
-  const apiLocale = getApiLocale(currentLocale);
   const isDraft = (document as any).is_draft === true;
 
   return (
@@ -189,7 +173,7 @@ export function DocumentActionsBar({
           variant="outline"
           size="sm"
           disabled={isDownloadingPdf}
-          onClick={() => handleDownloadPdf(apiLocale)}
+          onClick={() => handleDownloadPdf()}
           className="cursor-pointer rounded-r-none"
         >
           {isDownloadingPdf ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Download className="mr-2 h-4 w-4" />}
@@ -207,13 +191,9 @@ export function DocumentActionsBar({
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-            {PDF_LOCALE_CODES.map((locale) => (
-              <DropdownMenuItem
-                key={locale.code}
-                onClick={() => handleDownloadPdf(locale.code)}
-                className="cursor-pointer"
-              >
-                {t(locale.label)}
+            {PDF_LANGUAGE_CODES.map((lang) => (
+              <DropdownMenuItem key={lang.code} onClick={() => handleDownloadPdf(lang.code)} className="cursor-pointer">
+                {t(lang.label)}
               </DropdownMenuItem>
             ))}
           </DropdownMenuContent>

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

@@ -27,6 +27,7 @@ interface DocumentActivitiesListProps extends ComponentTranslationProps {
   entityId: string;
   currentUserId?: string;
   locale?: string;
+  variant?: "card" | "inline";
 }
 
 function formatActivityDate(date: string, locale: string): string {
@@ -67,6 +68,7 @@ export function DocumentActivitiesList({
   entityId,
   currentUserId,
   locale = "en",
+  variant = "card",
   ...i18nProps
 }: DocumentActivitiesListProps) {
   const t = createTranslation({ translations, locale, ...i18nProps });
@@ -107,60 +109,76 @@ export function DocumentActivitiesList({
   const hasPrev = cursors.length > 0;
   const hasNext = !!pagination?.has_more;
 
+  const paginationButtons = (hasPrev || hasNext) && (
+    <div className="flex items-center gap-1">
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={handlePrevPage}
+        disabled={!hasPrev}
+        className="h-8 w-8 cursor-pointer p-0"
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={handleNextPage}
+        disabled={!hasNext}
+        className="h-8 w-8 cursor-pointer p-0"
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+
+  const bodyContent = isLoading ? (
+    <div className="space-y-2">
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+  ) : activities.length === 0 ? (
+    <p className="py-4 text-center text-muted-foreground text-sm">{t("No activity")}</p>
+  ) : (
+    <div className="space-y-2">
+      {activities.map((activity) => (
+        <div key={activity.id} className="flex items-start justify-between rounded-md border p-3">
+          <div className="flex flex-col gap-0.5">
+            <span className="font-medium text-sm">{getActionLabel(activity.action, t)}</span>
+            <span className="text-muted-foreground text-xs">
+              {t("by")} {getActorLabel(activity, t, currentUserId)}
+            </span>
+          </div>
+          <span className="text-muted-foreground text-xs">{formatActivityDate(activity.created_at, locale)}</span>
+        </div>
+      ))}
+    </div>
+  );
+
+  if (variant === "inline") {
+    return (
+      <div>
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="font-medium text-sm">
+            {t("Activity")} {pagination && pagination.total > 0 && `(${pagination.total})`}
+          </h3>
+          {paginationButtons}
+        </div>
+        {bodyContent}
+      </div>
+    );
+  }
+
   return (
     <Card>
       <CardHeader className="flex flex-row items-center justify-between pb-3">
         <CardTitle className="text-lg">
           {t("Activity")} {pagination && pagination.total > 0 && `(${pagination.total})`}
         </CardTitle>
-        {(hasPrev || hasNext) && (
-          <div className="flex items-center gap-1">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handlePrevPage}
-              disabled={!hasPrev}
-              className="h-8 w-8 cursor-pointer p-0"
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={handleNextPage}
-              disabled={!hasNext}
-              className="h-8 w-8 cursor-pointer p-0"
-            >
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
+        {paginationButtons}
       </CardHeader>
-      <CardContent>
-        {isLoading ? (
-          <div className="space-y-2">
-            <Skeleton className="h-10 w-full" />
-            <Skeleton className="h-10 w-full" />
-            <Skeleton className="h-10 w-full" />
-          </div>
-        ) : activities.length === 0 ? (
-          <p className="py-4 text-center text-muted-foreground text-sm">{t("No activity")}</p>
-        ) : (
-          <div className="space-y-2">
-            {activities.map((activity) => (
-              <div key={activity.id} className="flex items-start justify-between rounded-md border p-3">
-                <div className="flex flex-col gap-0.5">
-                  <span className="font-medium text-sm">{getActionLabel(activity.action, t)}</span>
-                  <span className="text-muted-foreground text-xs">
-                    {t("by")} {getActorLabel(activity, t, currentUserId)}
-                  </span>
-                </div>
-                <span className="text-muted-foreground text-xs">{formatActivityDate(activity.created_at, locale)}</span>
-              </div>
-            ))}
-          </div>
-        )}
-      </CardContent>
+      <CardContent>{bodyContent}</CardContent>
     </Card>
   );
 }

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

@@ -25,6 +25,7 @@ interface DocumentDetailsCardProps extends ComponentTranslationProps {
   documentType: DocumentType;
   /** Locale for date formatting */
   locale?: string;
+  variant?: "card" | "inline";
 }
 
 /**
@@ -79,10 +80,17 @@ function getPaymentStatus(
  * - Totals breakdown
  * - Payment status (for invoices/advance invoices)
  */
-export function DocumentDetailsCard({ document, documentType, locale = "en", ...i18nProps }: DocumentDetailsCardProps) {
+export function DocumentDetailsCard({
+  document,
+  documentType,
+  locale = "en",
+  variant = "card",
+  ...i18nProps
+}: DocumentDetailsCardProps) {
   const t = createTranslation({ translations, locale, ...i18nProps });
 
   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);
 
@@ -95,8 +103,114 @@ export function DocumentDetailsCard({ document, documentType, locale = "en", ...
   // Get customer name
   const customerName = document.customer?.name || "-";
 
-  // Calculate tax total
-  const taxTotal = document.total_with_tax - document.total;
+  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-muted-foreground">{t("Date")}</div>
+        <div className="text-right">{fmtDate(document.date)}</div>
+
+        {isInvoiceOrAdvance && invoiceDoc.date_due && (
+          <>
+            <div className="text-muted-foreground">{t("Due date")}</div>
+            <div className="text-right">{fmtDate(invoiceDoc.date_due)}</div>
+          </>
+        )}
+
+        {isInvoiceOrAdvance && (invoiceDoc as any).date_service && (
+          <>
+            <div className="text-muted-foreground">
+              {(invoiceDoc as any).date_service_to ? t("Service period") : t("Service date")}
+            </div>
+            <div className="text-right">
+              {(invoiceDoc as any).date_service_to
+                ? `${fmtDate((invoiceDoc as any).date_service)} - ${fmtDate((invoiceDoc as any).date_service_to)}`
+                : fmtDate((invoiceDoc as any).date_service)}
+            </div>
+          </>
+        )}
+
+        {isEstimate && estimateDoc.date_valid_till && (
+          <>
+            <div className="text-muted-foreground">{t("Valid until")}</div>
+            <div className="text-right">{fmtDate(estimateDoc.date_valid_till)}</div>
+          </>
+        )}
+
+        <div className="text-muted-foreground">{t("Customer")}</div>
+        <div className="text-right">{customerName}</div>
+      </div>
+
+      <Separator />
+
+      {/* Totals */}
+      <div className="space-y-2 text-sm">
+        <div className="flex justify-between">
+          <span className="text-muted-foreground">{t("Subtotal")}</span>
+          <span>{fmt(document.total * sign)}</span>
+        </div>
+        {document.taxes && document.taxes.length > 0 ? (
+          document.taxes.map((tax: Document["taxes"][number]) => {
+            const taxAmount = tax.amount ?? 0;
+            return (
+              <div key={String(tax.rate)} className="flex justify-between">
+                <span className="text-muted-foreground">
+                  {t("Tax")} {tax.rate ?? 0}%{" "}
+                  {tax.base != null && (
+                    <span className="text-xs">
+                      {t("of")} {fmt(tax.base * sign)}
+                    </span>
+                  )}
+                </span>
+                <span>{fmt(taxAmount * sign)}</span>
+              </div>
+            );
+          })
+        ) : (
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">{t("Tax")}</span>
+            <span>{fmt(0)}</span>
+          </div>
+        )}
+        <div className="flex justify-between font-semibold">
+          <span>{t("Total")}</span>
+          <span>{fmt(document.total_with_tax * sign)}</span>
+        </div>
+
+        {/* Payment info for invoices/advance invoices */}
+        {isInvoiceOrAdvance && invoiceDoc.total_paid > 0 && (
+          <>
+            <Separator />
+            <div className="flex justify-between text-green-600">
+              <span>{t("Paid")}</span>
+              <span>-{fmt(invoiceDoc.total_paid)}</span>
+            </div>
+            <div className="flex justify-between font-semibold">
+              <span>{t("Due")}</span>
+              <span>{fmt(invoiceDoc.total_due)}</span>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+
+  if (variant === "inline") {
+    return (
+      <div className="space-y-3">
+        <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>
+          )}
+        </div>
+        <div className="space-y-4">{bodyContent}</div>
+      </div>
+    );
+  }
 
   return (
     <Card>
@@ -108,79 +222,7 @@ export function DocumentDetailsCard({ document, documentType, locale = "en", ...
           )}
         </CardTitle>
       </CardHeader>
-      <CardContent className="space-y-4">
-        {/* 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-muted-foreground">{t("Date")}</div>
-          <div className="text-right">{fmtDate(document.date)}</div>
-
-          {isInvoiceOrAdvance && (
-            <>
-              <div className="text-muted-foreground">{t("Due date")}</div>
-              <div className="text-right">{fmtDate(invoiceDoc.date_due)}</div>
-            </>
-          )}
-
-          {isInvoiceOrAdvance && (invoiceDoc as any).date_service && (
-            <>
-              <div className="text-muted-foreground">
-                {(invoiceDoc as any).date_service_to ? t("Service period") : t("Service date")}
-              </div>
-              <div className="text-right">
-                {(invoiceDoc as any).date_service_to
-                  ? `${fmtDate((invoiceDoc as any).date_service)} - ${fmtDate((invoiceDoc as any).date_service_to)}`
-                  : fmtDate((invoiceDoc as any).date_service)}
-              </div>
-            </>
-          )}
-
-          {isEstimate && estimateDoc.date_valid_till && (
-            <>
-              <div className="text-muted-foreground">{t("Valid until")}</div>
-              <div className="text-right">{fmtDate(estimateDoc.date_valid_till)}</div>
-            </>
-          )}
-
-          <div className="text-muted-foreground">{t("Customer")}</div>
-          <div className="text-right">{customerName}</div>
-        </div>
-
-        <Separator />
-
-        {/* Totals */}
-        <div className="space-y-2 text-sm">
-          <div className="flex justify-between">
-            <span className="text-muted-foreground">{t("Subtotal")}</span>
-            <span>{fmt(document.total)}</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-muted-foreground">{t("Tax")}</span>
-            <span>{fmt(taxTotal)}</span>
-          </div>
-          <div className="flex justify-between font-semibold">
-            <span>{t("Total")}</span>
-            <span>{fmt(document.total_with_tax)}</span>
-          </div>
-
-          {/* Payment info for invoices/advance invoices */}
-          {isInvoiceOrAdvance && invoiceDoc.total_paid > 0 && (
-            <>
-              <Separator />
-              <div className="flex justify-between text-green-600">
-                <span>{t("Paid")}</span>
-                <span>-{fmt(invoiceDoc.total_paid)}</span>
-              </div>
-              <div className="flex justify-between font-semibold">
-                <span>{t("Due")}</span>
-                <span>{fmt(invoiceDoc.total_due)}</span>
-              </div>
-            </>
-          )}
-        </div>
-      </CardContent>
+      <CardContent className="space-y-4">{bodyContent}</CardContent>
     </Card>
   );
 }

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

@@ -51,6 +51,7 @@ interface DocumentPaymentsListProps extends ComponentTranslationProps {
   onDeleteSuccess?: () => void;
   /** Callback on delete error */
   onDeleteError?: (error: string) => void;
+  variant?: "card" | "inline";
 }
 
 /**
@@ -94,6 +95,7 @@ export function DocumentPaymentsList({
   onEditPayment,
   onDeleteSuccess,
   onDeleteError,
+  variant = "card",
   ...i18nProps
 }: DocumentPaymentsListProps) {
   const t = createTranslation({ translations, locale, ...i18nProps });
@@ -180,6 +182,101 @@ export function DocumentPaymentsList({
   const fmt = (amount: number) => formatCurrency(amount, currencyCode, locale);
   const fmtDate = (date: Date | string | null) => formatDate(date, locale);
 
+  const headerContent = (
+    <div
+      className={
+        variant === "inline" ? "flex items-center justify-between" : "flex flex-row items-center justify-between"
+      }
+    >
+      <h3
+        className={variant === "inline" ? "font-medium text-sm" : "font-semibold text-lg leading-none tracking-tight"}
+      >
+        {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>
+    </div>
+  );
+
+  const bodyContent = isLoading ? (
+    <div className="space-y-2">
+      <Skeleton className="h-10 w-full" />
+      <Skeleton className="h-10 w-full" />
+    </div>
+  ) : payments.length === 0 ? (
+    <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>
+      ))}
+    </div>
+  );
+
+  const deleteDialog = (
+    <Dialog open={!!paymentToDelete} onOpenChange={() => setPaymentToDelete(null)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t("Delete payment")}</DialogTitle>
+          <DialogDescription>{t("Delete payment confirmation")}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            disabled={isDeleting}
+            onClick={() => setPaymentToDelete(null)}
+            className="cursor-pointer"
+          >
+            {t("Cancel")}
+          </Button>
+          <Button variant="destructive" onClick={handleDelete} disabled={isDeleting} className="cursor-pointer">
+            {t("Delete")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+
+  if (variant === "inline") {
+    return (
+      <>
+        <div>
+          {headerContent}
+          <div className="mt-3">{bodyContent}</div>
+        </div>
+        {deleteDialog}
+      </>
+    );
+  }
+
   return (
     <>
       <Card>
@@ -192,72 +289,9 @@ export function DocumentPaymentsList({
             {t("Add payment")}
           </Button>
         </CardHeader>
-        <CardContent>
-          {isLoading ? (
-            <div className="space-y-2">
-              <Skeleton className="h-10 w-full" />
-              <Skeleton className="h-10 w-full" />
-            </div>
-          ) : payments.length === 0 ? (
-            <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>
-              ))}
-            </div>
-          )}
-        </CardContent>
+        <CardContent>{bodyContent}</CardContent>
       </Card>
-
-      {/* Delete Confirmation Dialog */}
-      <Dialog open={!!paymentToDelete} onOpenChange={() => setPaymentToDelete(null)}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t("Delete payment")}</DialogTitle>
-            <DialogDescription>{t("Delete payment confirmation")}</DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              disabled={isDeleting}
-              onClick={() => setPaymentToDelete(null)}
-              className="cursor-pointer"
-            >
-              {t("Cancel")}
-            </Button>
-            <Button variant="destructive" onClick={handleDelete} disabled={isDeleting} className="cursor-pointer">
-              {t("Delete")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      {deleteDialog}
     </>
   );
 }