@spaceinvoices/react-ui 0.1.1

package/src/components/documents/types.ts

@@ -0,0 +1,61 @@
+/**
+ * Shared document types for invoices, estimates, credit notes, and advance invoices
+ */
+
+export type DocumentTypes = "invoice" | "estimate" | "credit_note" | "advance_invoice";
+
+export interface DocumentConfig {
+  type: DocumentTypes;
+  apiEndpoint: string;
+  cacheKey: string;
+  dateFieldName: "date_due" | "date_valid_till" | null;
+  dateFieldLabel: string | null;
+  singularName: string;
+  pluralName: string;
+}
+
+export const DOCUMENT_CONFIGS: Record<DocumentTypes, DocumentConfig> = {
+  invoice: {
+    type: "invoice",
+    apiEndpoint: "invoices",
+    cacheKey: "invoices",
+    dateFieldName: "date_due",
+    dateFieldLabel: "Due Date",
+    singularName: "Invoice",
+    pluralName: "Invoices",
+  },
+  estimate: {
+    type: "estimate",
+    apiEndpoint: "estimates",
+    cacheKey: "estimates",
+    dateFieldName: "date_valid_till",
+    dateFieldLabel: "Valid Until",
+    singularName: "Estimate",
+    pluralName: "Estimates",
+  },
+  credit_note: {
+    type: "credit_note",
+    apiEndpoint: "credit-notes",
+    cacheKey: "credit-notes",
+    dateFieldName: null, // Credit notes don't have a due date
+    dateFieldLabel: null,
+    singularName: "Credit Note",
+    pluralName: "Credit Notes",
+  },
+  advance_invoice: {
+    type: "advance_invoice",
+    apiEndpoint: "advance-invoices",
+    cacheKey: "advance-invoices",
+    dateFieldName: "date_due",
+    dateFieldLabel: "Due Date",
+    singularName: "Advance Invoice",
+    pluralName: "Advance Invoices",
+  },
+} as const;
+
+/**
+ * Get document configuration by type
+ */
+export function getDocumentConfig(type: DocumentTypes): DocumentConfig {
+  return DOCUMENT_CONFIGS[type];
+}

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

@@ -0,0 +1,328 @@
+import type { AdvanceInvoice, CreditNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
+import {
+  Check,
+  CheckCircle,
+  ChevronDown,
+  Copy,
+  Download,
+  FileCode2,
+  Link2Off,
+  Loader2,
+  Mail,
+  Pencil,
+  Plus,
+  Share2,
+  Trash2,
+} from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/ui/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { type DocumentType, getAllowedDuplicateTargets } from "@/ui/hooks/use-duplicate-document";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import type { Entity } from "@/ui/providers/entities-context";
+import de from "./locales/de";
+import sl from "./locales/sl";
+import { useDocumentDownload } from "./use-document-download";
+
+const translations = { de, sl } as const;
+
+type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
+
+const PDF_LOCALES = [
+  { code: "en-US", label: "English" },
+  { code: "de-DE", label: "Deutsch" },
+  { code: "es-ES", label: "Español" },
+  { code: "fr-FR", label: "Français" },
+  { code: "it-IT", label: "Italiano" },
+  { code: "sl-SI", label: "Slovenščina" },
+] as const;
+
+interface DocumentActionsBarProps extends ComponentTranslationProps {
+  document: Document;
+  documentType: DocumentType;
+  entity: Entity;
+  currentLocale: string;
+  onAddPayment?: () => void;
+  onSendEmail?: () => void;
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+  onShareLinkCopied?: () => void;
+  /** Called when user wants to share the document (generate shareable link) */
+  onShare?: () => Promise<void>;
+  /** Called when user wants to unshare the document (remove shareable link) */
+  onUnshare?: () => Promise<void>;
+  /** Whether sharing is in progress */
+  isSharing?: boolean;
+  /** Whether unsharing is in progress */
+  isUnsharing?: boolean;
+  /** Called when user wants to duplicate/convert document */
+  onDuplicate?: (targetType: DocumentType) => void;
+  /** Called when user wants to edit the document */
+  onEdit?: () => void;
+  /** Whether the document is editable (not voided, not FURS fiscalized) */
+  isEditable?: boolean;
+  /** Called when user wants to finalize a draft document */
+  onFinalize?: () => void;
+  /** Whether finalization is in progress */
+  isFinalizing?: boolean;
+  /** Called when user wants to delete a draft document */
+  onDeleteDraft?: () => void;
+  /** Whether draft deletion is in progress */
+  isDeletingDraft?: boolean;
+}
+
+function getApiLocale(uiLanguage: string): string {
+  const localeMap: Record<string, string> = {
+    en: "en-US",
+    sl: "sl-SI",
+    de: "de-DE",
+    es: "es-ES",
+    fr: "fr-FR",
+    it: "it-IT",
+  };
+  return localeMap[uiLanguage] || "en-US";
+}
+
+export function DocumentActionsBar({
+  document,
+  documentType,
+  entity,
+  currentLocale,
+  onAddPayment,
+  onSendEmail,
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  onShareLinkCopied,
+  onShare,
+  onUnshare,
+  isSharing,
+  isUnsharing,
+  onDuplicate,
+  onEdit,
+  isEditable,
+  onFinalize,
+  isFinalizing,
+  onDeleteDraft,
+  isDeletingDraft,
+  ...i18nProps
+}: DocumentActionsBarProps) {
+  const t = createTranslation({ translations, locale: currentLocale, ...i18nProps });
+  const [linkCopied, setLinkCopied] = useState(false);
+
+  const { isDownloadingPdf, isDownloadingEslog, downloadPdf, downloadEslog } = useDocumentDownload({
+    onDownloadStart,
+    onDownloadSuccess,
+    onDownloadError,
+  });
+
+  const supportsPayments =
+    documentType === "invoice" || documentType === "advance_invoice" || documentType === "credit_note";
+
+  const eslogFeatureAvailable = entity.country_rules?.features?.includes("eslog") ?? false;
+  const eslogValid = (document as Invoice).eslog?.validation_status === "valid";
+  const showEslogDownload = eslogFeatureAvailable && eslogValid;
+
+  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 handleDownloadEslog = () => downloadEslog(document, documentType);
+
+  const handleCopyShareLink = async () => {
+    if (!shareUrl) return;
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setLinkCopied(true);
+      onShareLinkCopied?.();
+      setTimeout(() => setLinkCopied(false), 2000);
+    } catch (error) {
+      console.error("Failed to copy link:", error);
+    }
+  };
+
+  const apiLocale = getApiLocale(currentLocale);
+  const isDraft = (document as any).is_draft === true;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {/* PDF Download */}
+      <div className="flex">
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={isDownloadingPdf}
+          onClick={() => handleDownloadPdf(apiLocale)}
+          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" />}
+          {t("PDF")}
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={isDownloadingPdf}
+              className="cursor-pointer rounded-l-none border-l-0 px-2"
+            >
+              <ChevronDown className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {PDF_LOCALES.map((locale) => (
+              <DropdownMenuItem
+                key={locale.code}
+                onClick={() => handleDownloadPdf(locale.code)}
+                className="cursor-pointer"
+              >
+                {locale.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* e-SLOG Download */}
+      {showEslogDownload && (
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={isDownloadingEslog}
+          onClick={handleDownloadEslog}
+          className="cursor-pointer"
+        >
+          {isDownloadingEslog ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <FileCode2 className="mr-2 h-4 w-4" />
+          )}
+          e-SLOG
+        </Button>
+      )}
+
+      {/* Send Email */}
+      <Button variant="outline" size="sm" onClick={onSendEmail} className="cursor-pointer">
+        <Mail className="mr-2 h-4 w-4" />
+        {t("Send")}
+      </Button>
+
+      {/* Add Payment */}
+      {supportsPayments && (
+        <Button variant="outline" size="sm" onClick={onAddPayment} className="cursor-pointer">
+          <Plus className="mr-2 h-4 w-4" />
+          {t("Payment")}
+        </Button>
+      )}
+
+      {/* Edit */}
+      {onEdit && isEditable && (
+        <Button variant="outline" size="sm" onClick={onEdit} className="cursor-pointer">
+          <Pencil className="mr-2 h-4 w-4" />
+          {t("Edit")}
+        </Button>
+      )}
+
+      {/* Share Link */}
+      {shareUrl ? (
+        <div className="flex">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCopyShareLink}
+                className="cursor-pointer rounded-r-none"
+              >
+                {linkCopied ? <Check className="mr-2 h-4 w-4 text-green-600" /> : <Share2 className="mr-2 h-4 w-4" />}
+                {linkCopied ? t("Copied") : t("Share")}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t("Copy shareable link")}</p>
+            </TooltipContent>
+          </Tooltip>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="cursor-pointer rounded-l-none border-l-0 px-2">
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={handleCopyShareLink} className="cursor-pointer">
+                <Share2 className="mr-2 h-4 w-4" />
+                {t("Copy shareable link")}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={onUnshare}
+                disabled={isUnsharing}
+                className="hover:!bg-destructive hover:!text-destructive-foreground focus:!bg-destructive focus:!text-destructive-foreground cursor-pointer text-destructive"
+              >
+                {isUnsharing ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <Link2Off className="mr-2 h-4 w-4" />
+                )}
+                {t("Unshare")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      ) : onShare ? (
+        <Button variant="outline" size="sm" onClick={onShare} disabled={isSharing} className="cursor-pointer">
+          {isSharing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Share2 className="mr-2 h-4 w-4" />}
+          {t("Share")}
+        </Button>
+      ) : null}
+
+      {/* Duplicate/Convert */}
+      {onDuplicate && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" className="cursor-pointer">
+              <Copy className="mr-2 h-4 w-4" />
+              {t("Duplicate")}
+              <ChevronDown className="ml-1 h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {getAllowedDuplicateTargets(documentType).map((targetType) => (
+              <DropdownMenuItem key={targetType} onClick={() => onDuplicate(targetType)} className="cursor-pointer">
+                {targetType === documentType ? t(`Duplicate ${documentType}`) : t(`Create ${targetType}`)}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+
+      {/* Draft Actions */}
+      {isDraft && onFinalize && (
+        <Button variant="default" size="sm" onClick={onFinalize} disabled={isFinalizing} className="cursor-pointer">
+          {isFinalizing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <CheckCircle className="mr-2 h-4 w-4" />}
+          {t("Finalize")}
+        </Button>
+      )}
+
+      {isDraft && onDeleteDraft && (
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={onDeleteDraft}
+          disabled={isDeletingDraft}
+          className="cursor-pointer"
+        >
+          {isDeletingDraft ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Trash2 className="mr-2 h-4 w-4" />}
+          {t("Delete Draft")}
+        </Button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,179 @@
+import type { AdvanceInvoice, CreditNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
+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 type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = { de, sl } as const;
+
+// Document type union
+type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
+type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice";
+
+interface DocumentDetailsCardProps extends ComponentTranslationProps {
+  document: Document;
+  documentType: DocumentType;
+  /** Locale for date formatting */
+  locale?: string;
+}
+
+/**
+ * Format currency value
+ */
+function formatCurrency(amount: number, currencyCode: string, locale: string): string {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: currencyCode,
+  }).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(
+  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" };
+  }
+  if (document.paid_in_full) {
+    return { label: t("Paid in full"), variant: "default" };
+  }
+  if (document.total_paid > 0) {
+    return { label: t("Partially paid"), variant: "outline" };
+  }
+  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, locale = "en", ...i18nProps }: DocumentDetailsCardProps) {
+  const t = createTranslation({ translations, locale, ...i18nProps });
+
+  const currencyCode = document.currency_code;
+  const fmt = (amount: number) => formatCurrency(amount, currencyCode, locale);
+  const fmtDate = (date: Date | string | null | undefined) => formatDate(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 || "-";
+
+  // Calculate tax total
+  const taxTotal = document.total_with_tax - document.total;
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center justify-between text-lg">
+          {t("Details")}
+          {isInvoiceOrAdvance && (
+            <Badge variant={getPaymentStatus(invoiceDoc, t).variant}>{getPaymentStatus(invoiceDoc, t).label}</Badge>
+          )}
+        </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="font-medium">{document.number}</div>
+
+          <div className="text-muted-foreground">{t("Date")}</div>
+          <div>{fmtDate(document.date)}</div>
+
+          {isInvoiceOrAdvance && (
+            <>
+              <div className="text-muted-foreground">{t("Due date")}</div>
+              <div>{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>
+                {(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>{fmtDate(estimateDoc.date_valid_till)}</div>
+            </>
+          )}
+
+          <div className="text-muted-foreground">{t("Customer")}</div>
+          <div>{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>
+    </Card>
+  );
+}