@spaceinvoices/react-ui 0.1.1

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

@@ -0,0 +1,256 @@
+import type { Payment } from "@spaceinvoices/js-sdk";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/ui/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/ui/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/ui/components/ui/dropdown-menu";
+import { Skeleton } from "@/ui/components/ui/skeleton";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useSDK } from "@/ui/providers/sdk-provider";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = { de, sl } as const;
+
+type DocumentType = "invoice" | "credit_note" | "advance_invoice";
+
+interface DocumentPaymentsListProps extends ComponentTranslationProps {
+  documentId: string;
+  documentType: DocumentType;
+  entityId: string;
+  currencyCode: string;
+  /** Locale for formatting */
+  locale?: string;
+  /** Callback when Add Payment is clicked */
+  onAddPayment?: () => void;
+  /** Callback when Edit Payment is clicked */
+  onEditPayment?: (payment: Payment) => void;
+  /** Callback on successful delete */
+  onDeleteSuccess?: () => void;
+  /** Callback on delete error */
+  onDeleteError?: (error: string) => void;
+}
+
+/**
+ * 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, locale: string): string {
+  if (!date) return "-";
+  const d = typeof date === "string" ? new Date(date) : date;
+  return new Intl.DateTimeFormat(locale, {
+    month: "short",
+    day: "numeric",
+  }).format(d);
+}
+
+/**
+ * Document Payments List Component
+ *
+ * Displays a list of payments for a document with CRUD actions:
+ * - View payments with date, amount, type
+ * - Add new payment
+ * - Edit existing payment
+ * - Delete payment with confirmation
+ */
+export function DocumentPaymentsList({
+  documentId,
+  documentType,
+  entityId,
+  currencyCode,
+  locale = "en",
+  onAddPayment,
+  onEditPayment,
+  onDeleteSuccess,
+  onDeleteError,
+  ...i18nProps
+}: DocumentPaymentsListProps) {
+  const t = createTranslation({ translations, locale, ...i18nProps });
+  const { sdk } = useSDK();
+  const queryClient = useQueryClient();
+
+  const [paymentToDelete, setPaymentToDelete] = useState<Payment | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // Build the filter based on document type
+  const getFilter = () => {
+    if (documentType === "invoice") {
+      return { invoice_id: documentId };
+    }
+    if (documentType === "advance_invoice") {
+      return { advance_invoice_id: documentId };
+    }
+    if (documentType === "credit_note") {
+      return { credit_note_id: documentId };
+    }
+    return {};
+  };
+
+  // Fetch payments for this document
+  // SDK list methods return { data: Payment[], pagination: ... }
+  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({
+        entity_id: entityId,
+        query: JSON.stringify(getFilter()),
+        order_by: "-date",
+      });
+
+      return response.data;
+    },
+    enabled: !!sdk && !!entityId && !!documentId,
+  });
+
+  const payments = paymentsData || [];
+
+  /**
+   * Handle payment deletion
+   */
+  const handleDelete = async () => {
+    if (!paymentToDelete || !sdk) return;
+
+    setIsDeleting(true);
+    try {
+      await sdk.payments.delete(paymentToDelete.id, { entity_id: entityId });
+
+      // Invalidate queries to refresh data
+      queryClient.invalidateQueries({ queryKey: ["payments"] });
+      queryClient.invalidateQueries({ queryKey: ["documents"] });
+
+      onDeleteSuccess?.();
+    } catch (error) {
+      console.error("Failed to delete payment:", error);
+      onDeleteError?.(t("Delete failed"));
+    } finally {
+      setIsDeleting(false);
+      setPaymentToDelete(null);
+    }
+  };
+
+  /**
+   * 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;
+  };
+
+  const fmt = (amount: number) => formatCurrency(amount, currencyCode, locale);
+  const fmtDate = (date: Date | string | null) => formatDate(date, locale);
+
+  return (
+    <>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between pb-3">
+          <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>
+        </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>
+      </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>
+    </>
+  );
+}

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

@@ -0,0 +1,4 @@
+export { DocumentActionsBar } from "./document-actions-bar";
+export { DocumentDetailsCard } from "./document-details-card";
+export { DocumentPaymentsList } from "./document-payments-list";
+export { useDocumentDownload } from "./use-document-download";

package/src/components/documents/view/locales/de.ts

@@ -0,0 +1,85 @@
+export default {
+  // Actions
+  PDF: "PDF",
+  Send: "Senden",
+  Payment: "Zahlung",
+  Share: "Teilen",
+  Unshare: "Freigabe aufheben",
+  Copied: "Kopiert",
+  "Copy shareable link": "Freigabelink kopieren",
+  "Unshare document": "Dokumentfreigabe aufheben",
+  "Unshare document confirmation":
+    "Sind Sie sicher, dass Sie den öffentlichen Zugang zu diesem Dokument entfernen möchten?",
+  "Document unshared": "Dokument ist nicht mehr freigegeben",
+  "Unshare failed": "Freigabe aufheben fehlgeschlagen",
+  "Download failed": "Download fehlgeschlagen",
+  "e-SLOG download failed": "e-SLOG Download fehlgeschlagen",
+  Duplicate: "Duplizieren",
+  "Duplicate invoice": "Rechnung duplizieren",
+  "Duplicate estimate": "Angebot duplizieren",
+  "Duplicate credit_note": "Gutschrift duplizieren",
+  "Duplicate advance_invoice": "Anzahlungsrechnung duplizieren",
+  "Create invoice": "Rechnung erstellen",
+  "Create estimate": "Angebot erstellen",
+  "Create credit_note": "Gutschrift erstellen",
+  "Create advance_invoice": "Anzahlungsrechnung erstellen",
+
+  // Details card
+  Details: "Details",
+  Number: "Nummer",
+  Date: "Datum",
+  "Due date": "Fälligkeitsdatum",
+  "Service date": "Leistungsdatum",
+  "Service period": "Leistungszeitraum",
+  "Valid until": "Gültig bis",
+  Customer: "Kunde",
+  Subtotal: "Zwischensumme",
+  Tax: "Steuer",
+  Total: "Gesamt",
+  Paid: "Bezahlt",
+  Due: "Offen",
+  Status: "Status",
+
+  // Payment status
+  "Paid in full": "Vollständig bezahlt",
+  "Partially paid": "Teilweise bezahlt",
+  Unpaid: "Unbezahlt",
+  Voided: "Storniert",
+
+  // Payments list
+  Payments: "Zahlungen",
+  "No payments": "Keine Zahlungen",
+  "Add payment": "Zahlung hinzufügen",
+  Edit: "Bearbeiten",
+  Delete: "Löschen",
+  "Delete payment": "Zahlung löschen",
+  "Delete payment confirmation": "Sind Sie sicher, dass Sie diese Zahlung löschen möchten?",
+  Cancel: "Abbrechen",
+
+  // Payment types
+  cash: "Bargeld",
+  bank_transfer: "Banküberweisung",
+  card: "Karte",
+  check: "Scheck",
+  credit_note: "Gutschrift",
+  other: "Andere",
+  advance_invoice: "Anzahlungsrechnung",
+
+  // Errors
+  "Delete failed": "Löschen fehlgeschlagen",
+
+  // Draft actions
+  Finalize: "Fertigstellen",
+  "Delete Draft": "Entwurf löschen",
+  "Finalize document": "Dokument fertigstellen",
+  "Finalize document confirmation":
+    "Dadurch wird dem Dokument eine endgültige Nummer zugewiesen. Nach der Fertigstellung kann das Dokument nicht mehr gelöscht werden. Möchten Sie fortfahren?",
+  "Delete draft document": "Entwurfsdokument löschen",
+  "Delete draft confirmation":
+    "Sind Sie sicher, dass Sie diesen Entwurf löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+  "Document finalized": "Dokument wurde fertiggestellt",
+  "Finalize failed": "Fertigstellung fehlgeschlagen",
+  "Draft deleted": "Entwurf wurde gelöscht",
+  "Delete draft failed": "Entwurf löschen fehlgeschlagen",
+  Draft: "Entwurf",
+} as const;

package/src/components/documents/view/locales/sl.ts

@@ -0,0 +1,84 @@
+export default {
+  // Actions
+  PDF: "PDF",
+  Send: "Pošlji",
+  Payment: "Plačilo",
+  Share: "Deli",
+  Unshare: "Odstrani deljenje",
+  Copied: "Kopirano",
+  "Copy shareable link": "Kopiraj povezavo za deljenje",
+  "Unshare document": "Odstrani deljenje dokumenta",
+  "Unshare document confirmation": "Ali ste prepričani, da želite odstraniti javni dostop do tega dokumenta?",
+  "Document unshared": "Dokument ni več deljen",
+  "Unshare failed": "Odstranitev deljenja ni uspela",
+  "Download failed": "Prenos ni uspel",
+  "e-SLOG download failed": "Prenos e-SLOG ni uspel",
+  Duplicate: "Podvoji",
+  "Duplicate invoice": "Podvoji račun",
+  "Duplicate estimate": "Podvoji predračun",
+  "Duplicate credit_note": "Podvoji dobropis",
+  "Duplicate advance_invoice": "Podvoji avansni račun",
+  "Create invoice": "Ustvari račun",
+  "Create estimate": "Ustvari predračun",
+  "Create credit_note": "Ustvari dobropis",
+  "Create advance_invoice": "Ustvari avansni račun",
+
+  // Details card
+  Details: "Podrobnosti",
+  Number: "Številka",
+  Date: "Datum",
+  "Due date": "Datum zapadlosti",
+  "Service date": "Datum storitve",
+  "Service period": "Obdobje storitve",
+  "Valid until": "Veljavno do",
+  Customer: "Stranka",
+  Subtotal: "Vmesni seštevek",
+  Tax: "Davek",
+  Total: "Skupaj",
+  Paid: "Plačano",
+  Due: "Za plačilo",
+  Status: "Status",
+
+  // Payment status
+  "Paid in full": "Plačano v celoti",
+  "Partially paid": "Delno plačano",
+  Unpaid: "Neplačano",
+  Voided: "Stornirano",
+
+  // Payments list
+  Payments: "Plačila",
+  "No payments": "Ni plačil",
+  "Add payment": "Dodaj plačilo",
+  Edit: "Uredi",
+  Delete: "Izbriši",
+  "Delete payment": "Izbriši plačilo",
+  "Delete payment confirmation": "Ali ste prepričani, da želite izbrisati to plačilo?",
+  Cancel: "Prekliči",
+
+  // Payment types
+  cash: "Gotovina",
+  bank_transfer: "Bančno nakazilo",
+  card: "Kartica",
+  check: "Ček",
+  credit_note: "Dobropis",
+  other: "Drugo",
+  advance_invoice: "Avansni račun",
+
+  // Errors
+  "Delete failed": "Brisanje ni uspelo",
+
+  // Draft actions
+  Finalize: "Potrdi",
+  "Delete Draft": "Izbriši osnutek",
+  "Finalize document": "Potrdi dokument",
+  "Finalize document confirmation":
+    "S tem boste dokumentu dodelili končno številko. Po potrditvi dokumenta ni več mogoče izbrisati. Ali želite nadaljevati?",
+  "Delete draft document": "Izbriši osnutek dokumenta",
+  "Delete draft confirmation":
+    "Ali ste prepričani, da želite izbrisati ta osnutek? Tega dejanja ni mogoče razveljaviti.",
+  "Document finalized": "Dokument je bil potrjen",
+  "Finalize failed": "Potrditev ni uspela",
+  "Draft deleted": "Osnutek je bil izbrisan",
+  "Delete draft failed": "Brisanje osnutka ni uspelo",
+  Draft: "Osnutek",
+} as const;

package/src/components/documents/view/use-document-download.ts

@@ -0,0 +1,125 @@
+import type { AdvanceInvoice, CreditNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
+import { useState } from "react";
+import { useEntities } from "@/ui/providers/entities-context";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
+type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice";
+
+// Document type labels for PDF filename
+const TYPE_LABELS: Record<string, string> = {
+  invoice: "Invoice",
+  estimate: "Estimate",
+  credit_note: "Credit Note",
+  advance_invoice: "Advance Invoice",
+};
+
+interface UseDocumentDownloadOptions {
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+}
+
+/**
+ * Hook for downloading document PDFs and e-SLOG XML
+ */
+export function useDocumentDownload({
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+}: UseDocumentDownloadOptions = {}) {
+  const { sdk } = useSDK();
+  const { activeEntity } = useEntities();
+
+  const [isDownloadingPdf, setIsDownloadingPdf] = useState(false);
+  const [isDownloadingEslog, setIsDownloadingEslog] = useState(false);
+
+  /**
+   * Download PDF in specified locale
+   */
+  const downloadPdf = async (document: Document, documentType: DocumentType, _locale: string) => {
+    if (!sdk || !activeEntity?.id) {
+      onDownloadError?.("Download failed");
+      return;
+    }
+
+    setIsDownloadingPdf(true);
+    onDownloadStart?.();
+
+    try {
+      // SDK signature: renderPdf(id, params?, SDKMethodOptions?)
+      // entity_id goes in SDKMethodOptions (last arg), not params
+      // Note: renderPdf is on invoices module but works with any document ID via /documents/{id}/pdf
+      const blob = await sdk.invoices.renderPdf(document.id, {}, { entity_id: activeEntity.id });
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const link = window.document.createElement("a");
+      link.href = downloadUrl;
+
+      const typeLabel = TYPE_LABELS[documentType] || "Document";
+      const fileName = `${typeLabel} ${document.number}.pdf`;
+      link.download = fileName;
+
+      window.document.body.appendChild(link);
+      link.click();
+      window.document.body.removeChild(link);
+      window.URL.revokeObjectURL(downloadUrl);
+
+      onDownloadSuccess?.(fileName);
+    } catch (error) {
+      console.error("Error downloading PDF:", error);
+      onDownloadError?.("Download failed");
+    } finally {
+      setIsDownloadingPdf(false);
+    }
+  };
+
+  /**
+   * Download e-SLOG XML
+   */
+  const downloadEslog = async (document: Document, documentType: DocumentType) => {
+    if (!sdk || !activeEntity?.id) {
+      onDownloadError?.("Download failed");
+      return;
+    }
+
+    setIsDownloadingEslog(true);
+
+    try {
+      const typeMap: Record<DocumentType, string> = {
+        invoice: "invoice",
+        advance_invoice: "advance_invoice",
+        credit_note: "credit_note",
+        estimate: "estimate",
+      };
+
+      // e-SLOG download - cast to any since the SDK structure may vary
+      const eSlogModule = (sdk as any).eSlog;
+      if (!eSlogModule?.download) {
+        throw new Error("e-SLOG download not available");
+      }
+      const xml = await eSlogModule.download(document.id, typeMap[documentType], { entity_id: activeEntity.id });
+
+      const blob = new Blob([xml], { type: "application/xml" });
+      const url = window.URL.createObjectURL(blob);
+      const a = window.document.createElement("a");
+      a.href = url;
+      a.download = `${document.number}.xml`;
+      window.document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      window.document.body.removeChild(a);
+    } catch (error) {
+      console.error("Error downloading e-SLOG:", error);
+      onDownloadError?.("e-SLOG download failed");
+    } finally {
+      setIsDownloadingEslog(false);
+    }
+  };
+
+  return {
+    isDownloadingPdf,
+    isDownloadingEslog,
+    downloadPdf,
+    downloadEslog,
+  };
+}

package/src/components/entities/create-entity-form.tsx

@@ -0,0 +1,105 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { CreateEntityRequest, Entity } from "@spaceinvoices/js-sdk";
+import type { Resolver } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { FormInput } from "@/ui/components/form";
+import { Button } from "@/ui/components/ui/button";
+import { Form } from "@/ui/components/ui/form";
+import { type CreateEntitySchema, createEntitySchema } from "@/ui/generated/schemas";
+
+import ButtonLoader from "../button-loader";
+import { useCreateEntity } from "./entities.hooks";
+
+export type CreateEntityFormProps = {
+  t?: (key: string) => string;
+  namespace?: string;
+  accountId?: string;
+  environment?: string;
+  onSuccess?: (data: Entity) => void;
+  onError?: (error: unknown) => void;
+};
+
+const defaultTranslate = (text: string) => text;
+
+export function CreateEntityForm({
+  t = defaultTranslate,
+  namespace = "",
+  accountId,
+  environment,
+  onSuccess,
+  onError,
+}: CreateEntityFormProps) {
+  const translate = (key: string) => t(namespace ? `${namespace}.${key}` : key);
+
+  const form = useForm<CreateEntitySchema>({
+    resolver: zodResolver(createEntitySchema) as Resolver<CreateEntitySchema>,
+    defaultValues: {
+      name: "",
+      address: "",
+      address_2: "",
+      post_code: "",
+      city: "",
+      state: "",
+      country: "",
+      tax_number: "",
+      environment,
+    },
+  });
+
+  // Wrap onSuccess to reset form only after successful mutation
+  const handleSuccess = (data: Entity) => {
+    form.reset();
+    onSuccess?.(data);
+  };
+
+  // Use the createEntity mutation hook
+  const { mutate: createEntity, isPending } = useCreateEntity({
+    entityId: null,
+    accountId,
+    onSuccess: handleSuccess,
+    onError: (error, _variables, _context) => {
+      onError?.(error);
+    },
+  });
+
+  const onSubmit = async (values: CreateEntitySchema) => {
+    try {
+      // Zod validation ensures required fields are present before this is called
+      // The type cast is safe because React Hook Form's DeepPartial doesn't reflect runtime validation
+      createEntity(values as CreateEntityRequest);
+    } catch (e) {
+      onError?.(e);
+      form.setError("root", {
+        type: "submit",
+        message: "Failed to create entity",
+      });
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormInput control={form.control} name="name" label={translate("Name")} placeholder="Name" required />
+
+        <FormInput control={form.control} name="country" label="Country" placeholder="Country" required />
+
+        <FormInput control={form.control} name="address" label="Address" placeholder="Address" />
+
+        <FormInput control={form.control} name="address_2" label="Address 2" placeholder="Address 2" />
+
+        <div className="grid grid-cols-2 gap-4">
+          <FormInput control={form.control} name="post_code" label="Post code" placeholder="Post code" />
+          <FormInput control={form.control} name="city" label="City" placeholder="City" />
+        </div>
+
+        <FormInput control={form.control} name="state" label="State" placeholder="State" />
+
+        <FormInput control={form.control} name="tax_number" label="Tax number" placeholder="Tax number" />
+
+        <Button type="submit" className="w-full cursor-pointer" disabled={isPending} aria-busy={isPending}>
+          {isPending ? <ButtonLoader /> : "Create"}
+        </Button>
+      </form>
+    </Form>
+  );
+}