@spaceinvoices/react-ui 0.1.1

package/src/components/payments/edit-payment-form/index.ts

@@ -0,0 +1 @@
+export { default as EditPaymentForm } from "./edit-payment-form";

package/src/components/payments/edit-payment-form/locales/de.ts

@@ -0,0 +1,20 @@
+export default {
+  Amount: "Betrag",
+  "Enter amount": "Betrag eingeben",
+  "Payment Type": "Zahlungsart",
+  "Select payment type": "Zahlungsart auswählen",
+  Cash: "Bargeld",
+  "Bank Transfer": "Banküberweisung",
+  Card: "Karte",
+  Check: "Scheck",
+  "Credit Note": "Gutschrift",
+  Advance: "Vorauszahlung",
+  Other: "Andere",
+  "Payment Date": "Zahlungsdatum",
+  "Pick a date": "Datum auswählen",
+  Reference: "Referenz",
+  "Enter reference number": "Referenznummer eingeben",
+  Note: "Notiz",
+  "Enter payment notes": "Zahlungsnotizen eingeben",
+  "There was an error updating the payment": "Beim Aktualisieren der Zahlung ist ein Fehler aufgetreten",
+} as const;

package/src/components/payments/edit-payment-form/locales/sl.ts

@@ -0,0 +1,20 @@
+export default {
+  Amount: "Znesek",
+  "Enter amount": "Vnesite znesek",
+  "Payment Type": "Vrsta plačila",
+  "Select payment type": "Izberite vrsto plačila",
+  Cash: "Gotovina",
+  "Bank Transfer": "Bančno nakazilo",
+  Card: "Kartica",
+  Check: "Ček",
+  "Credit Note": "Dobropis",
+  Advance: "Avans",
+  Other: "Drugo",
+  "Payment Date": "Datum plačila",
+  "Pick a date": "Izberite datum",
+  Reference: "Referenca",
+  "Enter reference number": "Vnesite referenčno številko",
+  Note: "Opomba",
+  "Enter payment notes": "Vnesite opombe plačila",
+  "There was an error updating the payment": "Prišlo je do napake pri posodabljanju plačila",
+} as const;

package/src/components/payments/index.ts

@@ -0,0 +1,4 @@
+export { default as CreatePaymentForm } from "./create-payment-form/create-payment-form";
+export { default as EditPaymentForm } from "./edit-payment-form/edit-payment-form";
+export * from "./list";
+export * from "./payments.hooks";

package/src/components/payments/list/index.ts

@@ -0,0 +1,2 @@
+export { default as PaymentListRowActions } from "./list-row-actions";
+export { default as PaymentListTable } from "./list-table";

package/src/components/payments/list/list-row-actions.tsx

@@ -0,0 +1,98 @@
+import type { Payment } from "@spaceinvoices/js-sdk";
+import { Eye, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
+import { Button } from "@/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/ui/components/ui/dropdown-menu";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+
+import { useDeletePayment } from "../payments.hooks";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+type PaymentListRowActionsProps = {
+  payment: Payment;
+  entityId?: string;
+  onViewInvoice?: (invoiceId: string) => void;
+  onEditPayment?: (payment: Payment) => void;
+  onDeleteSuccess?: () => void;
+  onDeleteError?: (error: string) => void;
+} & ComponentTranslationProps;
+
+export default function PaymentListRowActions({
+  payment,
+  entityId,
+  onViewInvoice,
+  onEditPayment,
+  onDeleteSuccess,
+  onDeleteError,
+  ...i18nProps
+}: PaymentListRowActionsProps) {
+  const t = createTranslation({
+    translations,
+    ...i18nProps,
+  });
+
+  const { mutate: deletePayment, isPending: isDeleting } = useDeletePayment({
+    entityId,
+    onSuccess: () => {
+      onDeleteSuccess?.();
+    },
+    onError: (error: Error) => {
+      onDeleteError?.(error.message);
+    },
+  });
+
+  const handleDelete = () => {
+    deletePayment({ id: payment.id });
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 cursor-pointer p-0" id="action-menu-trigger">
+          <span className="sr-only">{t("Open menu")}</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>{t("Actions")}</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem className="cursor-pointer" onClick={() => onEditPayment?.(payment)}>
+            <Pencil className="h-4 w-4" />
+            {t("Edit payment")}
+          </DropdownMenuItem>
+          {payment.invoice_id && (
+            <DropdownMenuItem className="cursor-pointer" onClick={() => onViewInvoice?.(payment.invoice_id!)}>
+              <Eye className="h-4 w-4" />
+              {t("View invoice")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            className="cursor-pointer text-destructive focus:text-destructive"
+            onClick={handleDelete}
+            disabled={isDeleting}
+          >
+            <Trash2 className="h-4 w-4" />
+            {isDeleting ? t("Deleting...") : t("Delete payment")}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/payments/list/list-table.tsx

@@ -0,0 +1,186 @@
+import type { Payment } from "@spaceinvoices/js-sdk";
+import { Info } from "lucide-react";
+import { useMemo } from "react";
+import { DataTable } from "@/ui/components/table/data-table";
+import { FormattedDate } from "@/ui/components/table/date-cell";
+import { useTableFetch } from "@/ui/components/table/hooks/use-table-fetch";
+import type { Column, ListTableProps, TableQueryParams, TableQueryResponse } from "@/ui/components/table/types";
+import { Button } from "@/ui/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/ui/components/ui/popover";
+import { createTranslation } from "@/ui/lib/translation";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+import PaymentListRowActions from "./list-row-actions";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+// Extended payment type that includes Invoice relation from API
+type PaymentWithInvoice = Payment & {
+  Invoice?: { id: string; number: string } | null;
+};
+
+type PaymentListTableProps = {
+  t?: (key: string) => string;
+  namespace?: string;
+  locale?: string;
+  entityId?: string;
+  onViewInvoice?: (invoiceId: string) => void;
+  onEditPayment?: (payment: Payment) => void;
+  onDeleteSuccess?: () => void;
+  onDeleteError?: (error: string) => void;
+} & ListTableProps<Payment>;
+
+export default function PaymentListTable({
+  queryParams,
+  onChangeParams,
+  entityId,
+  onViewInvoice,
+  onEditPayment,
+  onDeleteSuccess,
+  onDeleteError,
+  ...i18nProps
+}: PaymentListTableProps) {
+  const t = createTranslation({
+    translations,
+    ...i18nProps,
+  });
+
+  const { sdk } = useSDK();
+
+  const handleFetch = useTableFetch(async (params: TableQueryParams) => {
+    if (!sdk) throw new Error("SDK not initialized");
+    if (!params.entity_id) throw new Error("Entity ID required");
+
+    const response = await sdk.payments.list({
+      entity_id: params.entity_id,
+      limit: params.limit,
+      next_cursor: params.next_cursor,
+      prev_cursor: params.prev_cursor,
+      order_by: params.order_by,
+      search: params.search,
+      query: params.query,
+    });
+    return response as unknown as TableQueryResponse<Payment>;
+  }, entityId);
+
+  const typeLabels: Record<string, string> = useMemo(
+    () => ({
+      cash: t("type.cash"),
+      bank_transfer: t("type.bank_transfer"),
+      card: t("type.card"),
+      check: t("type.check"),
+      other: t("type.other"),
+    }),
+    [t],
+  );
+
+  const columns: Column<PaymentWithInvoice>[] = useMemo(
+    () => [
+      {
+        id: "date",
+        header: t("Date"),
+        sortable: true,
+        cell: (payment) => <FormattedDate date={payment.date} />,
+      },
+      {
+        id: "amount",
+        header: t("Amount"),
+        sortable: true,
+        align: "right",
+        cell: (payment) => <span className="font-medium">{payment.amount.toFixed(2)}</span>,
+      },
+      {
+        id: "type",
+        header: t("Type"),
+        sortable: true,
+        cell: (payment) => typeLabels[payment.type] ?? payment.type,
+      },
+      {
+        id: "invoice",
+        header: t("Invoice"),
+        cell: (payment) =>
+          payment.Invoice ? (
+            <Button
+              variant="link"
+              className="h-auto cursor-pointer p-0 text-foreground underline"
+              onClick={() => onViewInvoice?.(payment.Invoice!.id)}
+            >
+              {payment.Invoice.number}
+            </Button>
+          ) : (
+            <span className="text-muted-foreground">-</span>
+          ),
+      },
+      {
+        id: "reference",
+        header: t("Reference"),
+        cell: (payment) => payment.reference ?? "-",
+      },
+      {
+        id: "note",
+        header: t("Note"),
+        className: "max-w-[200px]",
+        cell: (payment) => <NoteCell note={payment.note} />,
+      },
+      {
+        id: "actions",
+        header: "",
+        align: "right",
+        cell: (payment) => (
+          <PaymentListRowActions
+            payment={payment}
+            entityId={entityId}
+            onViewInvoice={onViewInvoice}
+            onEditPayment={onEditPayment}
+            onDeleteSuccess={onDeleteSuccess}
+            onDeleteError={onDeleteError}
+            {...i18nProps}
+          />
+        ),
+      },
+    ],
+    [t, typeLabels, entityId, onViewInvoice, onEditPayment, onDeleteSuccess, onDeleteError, i18nProps],
+  );
+
+  return (
+    <DataTable
+      columns={columns}
+      queryParams={queryParams}
+      resourceName="payment"
+      cacheKey="payments"
+      onFetch={handleFetch}
+      onChangeParams={onChangeParams}
+      entityId={entityId}
+    />
+  );
+}
+
+/** Note cell with popover for long notes */
+function NoteCell({ note }: { note?: string | null }) {
+  if (!note) return "-";
+
+  const hasLongNote = note.length > 30;
+
+  return (
+    <div className="flex items-center gap-1">
+      <span className="truncate">{note}</span>
+      {hasLongNote && (
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0">
+              <Info className="h-3.5 w-3.5 text-muted-foreground" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80">
+            <p className="text-sm">{note}</p>
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  );
+}

package/src/components/payments/list/locales/de.ts

@@ -0,0 +1,19 @@
+export default {
+  Date: "Datum",
+  Amount: "Betrag",
+  Type: "Typ",
+  Invoice: "Rechnung",
+  Reference: "Referenz",
+  Note: "Notiz",
+  Actions: "Aktionen",
+  "Open menu": "Menü öffnen",
+  "Edit payment": "Zahlung bearbeiten",
+  "Delete payment": "Zahlung löschen",
+  "Deleting...": "Wird gelöscht...",
+  "View invoice": "Rechnung anzeigen",
+  "type.cash": "Bargeld",
+  "type.bank_transfer": "Banküberweisung",
+  "type.card": "Karte",
+  "type.check": "Scheck",
+  "type.other": "Andere",
+} as const;

package/src/components/payments/list/locales/sl.ts

@@ -0,0 +1,19 @@
+export default {
+  Date: "Datum",
+  Amount: "Znesek",
+  Type: "Vrsta",
+  Invoice: "Račun",
+  Reference: "Referenca",
+  Note: "Opomba",
+  Actions: "Akcije",
+  "Open menu": "Odpri meni",
+  "Edit payment": "Uredi plačilo",
+  "Delete payment": "Izbriši plačilo",
+  "Deleting...": "Brišem...",
+  "View invoice": "Prikaži račun",
+  "type.cash": "Gotovina",
+  "type.bank_transfer": "Bančno nakazilo",
+  "type.card": "Kartica",
+  "type.check": "Ček",
+  "type.other": "Drugo",
+} as const;

package/src/components/payments/payments.hooks.ts

@@ -0,0 +1,15 @@
+import type { CreatePaymentRequest, Payment } from "@spaceinvoices/js-sdk";
+
+import { createResourceHooks } from "@/ui/hooks/create-resource-hooks";
+
+// Define a constant for the payments cache key
+export const PAYMENTS_CACHE_KEY = "payments";
+
+// Create payment-specific hooks using the factory
+const {
+  useCreateResource: useCreatePayment,
+  useUpdateResource: useUpdatePayment,
+  useDeleteResource: useDeletePayment,
+} = createResourceHooks<Payment, CreatePaymentRequest>("payments", PAYMENTS_CACHE_KEY);
+
+export { useCreatePayment, useUpdatePayment, useDeletePayment };

package/src/components/request-logs/index.ts

@@ -0,0 +1,3 @@
+export { RequestLogDetail } from "./request-log-detail";
+export type { RequestLogResponse, RequestLogsPageProps } from "./request-logs-page";
+export { REQUEST_LOGS_CACHE_KEY, RequestLogsPage } from "./request-logs-page";

package/src/components/request-logs/request-log-detail.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import { format, formatDistanceToNow } from "date-fns";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/ui/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui/components/ui/tabs";
+import { cn } from "../../lib/utils";
+import type { RequestLogResponse } from "./request-log-list-table";
+
+type TranslationFn = (key: string, fallback: string) => string;
+
+const defaultT: TranslationFn = (_key, fallback) => fallback;
+
+export interface RequestLogDetailProps {
+  log: RequestLogResponse;
+  /** Translation function - defaults to returning fallback */
+  t?: TranslationFn;
+}
+
+/**
+ * Try to unwrap response data that may be wrapped as { text: "json string" }
+ */
+function unwrapResponseData(data: unknown): unknown {
+  if (
+    data &&
+    typeof data === "object" &&
+    "text" in data &&
+    Object.keys(data).length === 1 &&
+    typeof (data as { text: unknown }).text === "string"
+  ) {
+    try {
+      return JSON.parse((data as { text: string }).text);
+    } catch {
+      // Not valid JSON, return original
+      return data;
+    }
+  }
+  return data;
+}
+
+function JsonViewer({ data, label }: { data: unknown; label: string }) {
+  const [copied, setCopied] = useState(false);
+  // Unwrap { text: "json" } format if present
+  const unwrappedData = unwrapResponseData(data);
+  const jsonString = unwrappedData ? JSON.stringify(unwrappedData, null, 2) : null;
+
+  const handleCopy = async () => {
+    if (jsonString) {
+      await navigator.clipboard.writeText(jsonString);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  if (
+    !unwrappedData ||
+    (typeof unwrappedData === "object" && Object.keys(unwrappedData as Record<string, unknown>).length === 0)
+  ) {
+    return (
+      <div className="rounded-lg border bg-muted/30 p-4 text-center text-muted-foreground text-sm">
+        No {label.toLowerCase()} data
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="absolute top-2 right-2 h-8 w-8 p-0"
+        onClick={handleCopy}
+        title="Copy to clipboard"
+      >
+        {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+      </Button>
+      <pre className="overflow-x-auto rounded-lg border bg-muted/30 p-4 font-mono text-sm">
+        <JsonHighlight json={jsonString ?? ""} />
+      </pre>
+    </div>
+  );
+}
+
+function JsonHighlight({ json }: { json: string }) {
+  // Parse JSON into tokens for safe rendering
+  const tokens: { type: string; value: string }[] = [];
+  const lines = json.split("\n");
+
+  for (const line of lines) {
+    // Match key-value patterns
+    const keyMatch = line.match(/^(\s*)"([^"]+)":/);
+    if (keyMatch) {
+      const [, indent, key] = keyMatch;
+      const rest = line.slice(keyMatch[0].length);
+      tokens.push({ type: "indent", value: indent });
+      tokens.push({ type: "key", value: `"${key}"` });
+      tokens.push({ type: "punctuation", value: ":" });
+
+      // Parse value
+      const valueMatch = rest.match(/^\s*(.+?)(,?)$/);
+      if (valueMatch) {
+        const [, value, comma] = valueMatch;
+        tokens.push({ type: "space", value: " " });
+        if (value.startsWith('"')) {
+          tokens.push({ type: "string", value: value.replace(/,$/, "") });
+        } else if (value === "true" || value === "false") {
+          tokens.push({ type: "boolean", value });
+        } else if (value === "null") {
+          tokens.push({ type: "null", value });
+        } else if (!Number.isNaN(Number(value.replace(/,$/, "")))) {
+          tokens.push({ type: "number", value: value.replace(/,$/, "") });
+        } else {
+          tokens.push({ type: "other", value: value.replace(/,$/, "") });
+        }
+        if (comma) tokens.push({ type: "punctuation", value: comma });
+      }
+    } else {
+      tokens.push({ type: "other", value: line });
+    }
+    tokens.push({ type: "newline", value: "\n" });
+  }
+
+  const colorMap: Record<string, string> = {
+    key: "text-blue-600 dark:text-blue-400",
+    string: "text-green-600 dark:text-green-400",
+    number: "text-orange-600 dark:text-orange-400",
+    boolean: "text-purple-600 dark:text-purple-400",
+    null: "text-gray-500",
+  };
+
+  return (
+    <code>
+      {tokens.map((token, i) => (
+        <span key={`${i}-${token.type}`} className={colorMap[token.type] || ""}>
+          {token.value}
+        </span>
+      ))}
+    </code>
+  );
+}
+
+export function RequestLogDetail({ log, t = defaultT }: RequestLogDetailProps) {
+  const createdAt = new Date(log.created_at);
+  const statusCode = log.res_status ? Number.parseInt(log.res_status, 10) : 0;
+
+  let statusColor = "text-gray-500";
+  let statusBg = "bg-gray-100 dark:bg-gray-800";
+  if (statusCode >= 200 && statusCode < 300) {
+    statusColor = "text-green-700 dark:text-green-400";
+    statusBg = "bg-green-100 dark:bg-green-900";
+  } else if (statusCode >= 400 && statusCode < 500) {
+    statusColor = "text-yellow-700 dark:text-yellow-400";
+    statusBg = "bg-yellow-100 dark:bg-yellow-900";
+  } else if (statusCode >= 500) {
+    statusColor = "text-red-700 dark:text-red-400";
+    statusBg = "bg-red-100 dark:bg-red-900";
+  }
+
+  return (
+    <div className="space-y-6 p-4 pt-6">
+      {/* Summary */}
+      <div className="flex flex-wrap items-center gap-4">
+        <span className={cn("rounded-md px-2.5 py-1 font-medium font-mono text-sm", statusBg, statusColor)}>
+          {log.res_status || "—"}
+        </span>
+        <div className="text-muted-foreground text-sm">
+          <time dateTime={log.created_at} title={format(createdAt, "PPpp")}>
+            {formatDistanceToNow(createdAt, { addSuffix: true })}
+          </time>
+          <span className="mx-2">•</span>
+          <span>{format(createdAt, "PPpp")}</span>
+        </div>
+      </div>
+
+      {/* Metadata */}
+      {(log.resource_type || log.resource_id || log.action) && (
+        <div className="flex flex-wrap gap-4 text-sm">
+          {log.resource_type && (
+            <div>
+              <span className="text-muted-foreground">{t("request-logs.detail.resource-type", "Resource")}:</span>{" "}
+              <span className="font-medium">{log.resource_type}</span>
+            </div>
+          )}
+          {log.resource_id && (
+            <div>
+              <span className="text-muted-foreground">{t("request-logs.detail.resource-id", "ID")}:</span>{" "}
+              <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{log.resource_id}</code>
+            </div>
+          )}
+          {log.action && (
+            <div>
+              <span className="text-muted-foreground">{t("request-logs.detail.action", "Action")}:</span>{" "}
+              <span className="font-medium">{log.action}</span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Tabs for Request/Response/Headers */}
+      <Tabs defaultValue="request" className="w-full">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="request">{t("request-logs.detail.request", "Request")}</TabsTrigger>
+          <TabsTrigger value="response">{t("request-logs.detail.response", "Response")}</TabsTrigger>
+          <TabsTrigger value="headers">{t("request-logs.detail.headers", "Headers")}</TabsTrigger>
+        </TabsList>
+        <TabsContent value="request" className="mt-4">
+          <JsonViewer data={log.req_body} label="Request body" />
+        </TabsContent>
+        <TabsContent value="response" className="mt-4">
+          <JsonViewer data={log.res_body} label="Response body" />
+        </TabsContent>
+        <TabsContent value="headers" className="mt-4">
+          <JsonViewer data={log.headers} label="Headers" />
+        </TabsContent>
+      </Tabs>
+
+      {/* Request ID */}
+      <RequestIdDisplay requestId={log.request_id} t={t} />
+    </div>
+  );
+}
+
+function RequestIdDisplay({ requestId, t }: { requestId: string; t: (key: string, fallback: string) => string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(requestId);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="flex items-center gap-2 border-t pt-4 text-muted-foreground text-xs">
+      <span>{t("request-logs.detail.request-id", "Request ID")}:</span>
+      <code className="font-mono">{requestId}</code>
+      <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={handleCopy} title="Copy to clipboard">
+        {copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
+      </Button>
+    </div>
+  );
+}