@spaceinvoices/react-ui 0.1.1

package/src/components/customers/create-customer-form/locales/de.ts

@@ -0,0 +1,20 @@
+export default {
+  Name: "Name",
+  "Enter name": "Namen eingeben",
+  Address: "Adresse",
+  "Enter address": "Adresse eingeben",
+  "Post Code": "Postleitzahl",
+  "Enter post code": "Postleitzahl eingeben",
+  City: "Stadt",
+  "Enter city": "Stadt eingeben",
+  State: "Bundesland",
+  "Enter state": "Bundesland eingeben",
+  Country: "Land",
+  "Enter country": "Land eingeben",
+  "Tax Number": "Steuernummer",
+  "Enter tax number": "Steuernummer eingeben",
+  "Create Customer": "Kunde erstellen",
+  Cancel: "Abbrechen",
+  "Search by company name or tax number": "Suche nach Firmenname oder Steuernummer",
+  "There was an error creating the customer": "Beim Erstellen des Kunden ist ein Fehler aufgetreten",
+} as const;

package/src/components/customers/create-customer-form/locales/sl.ts

@@ -0,0 +1,20 @@
+export default {
+  Name: "Ime",
+  "Enter name": "Vnesite ime stranke",
+  Address: "Naslov",
+  "Enter address": "Vnesite naslov",
+  "Post Code": "Poštna številka",
+  "Enter post code": "Vnesite poštno številko",
+  City: "Mesto",
+  "Enter city": "Vnesite mesto",
+  State: "Regija",
+  "Enter state": "Vnesite regijo",
+  Country: "Država",
+  "Enter country": "Vnesite državo",
+  "Tax Number": "Davčna številka",
+  "Enter tax number": "Vnesite davčno številko",
+  "Create Customer": "Ustvari stranko",
+  Cancel: "Prekliči",
+  "Search by company name or tax number": "Iskanje po imenu podjetja ali davčni številki",
+  "There was an error creating the customer": "Prišlo je do napake pri ustvarjanju stranke",
+} as const;

package/src/components/customers/customer-autocomplete.tsx

@@ -0,0 +1,173 @@
+import type { Customer } from "@spaceinvoices/js-sdk";
+
+import { Plus } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { Autocomplete } from "@/ui/common/autocomplete";
+import { useDebounce } from "@/ui/hooks/use-debounce";
+
+import { useCustomerSearch, useRecentCustomers } from "./customers.hooks";
+
+const MAX_TEXT_LENGTH = 100;
+
+const truncateText = (text: string, maxLength: number = MAX_TEXT_LENGTH): string => {
+  return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
+};
+
+type CustomerAutocompleteProps = {
+  entityId: string;
+  value?: string | null;
+  onValueChange?: (value: string, customer: Customer) => void;
+  onClear?: () => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  onBlur?: () => void; // Added onBlur prop
+  /** Initial display name when pre-populating with a customer (e.g., for duplication) */
+  initialDisplayName?: string;
+};
+
+export function CustomerAutocomplete({
+  entityId,
+  value,
+  onValueChange,
+  placeholder = "Name",
+  className,
+  disabled,
+  onBlur: onBlurPropFromParent, // Destructure the onBlur prop from parent
+  initialDisplayName,
+}: CustomerAutocompleteProps) {
+  const [search, setSearch] = useState(initialDisplayName || "");
+  const [displayValue, setDisplayValue] = useState(initialDisplayName || "");
+  const debouncedSearch = useDebounce(search, 300);
+
+  const handleSearch = (value: string) => {
+    setSearch(value);
+    // Clear displayValue when user starts typing to allow free editing
+    if (displayValue && value !== displayValue) {
+      setDisplayValue("");
+    }
+  };
+
+  // Fetch recent customers (non-blocking, cached)
+  const { data: recentData } = useRecentCustomers(entityId);
+  const recentCustomers = recentData?.data || [];
+
+  // Fetch search results
+  const { data: searchData, isLoading } = useCustomerSearch(entityId, debouncedSearch);
+  const searchResults = searchData?.data || [];
+
+  // Use search results if searching, otherwise show recent customers
+  const customers = useMemo(() => {
+    if (debouncedSearch) {
+      return searchResults;
+    }
+    return recentCustomers;
+  }, [debouncedSearch, searchResults, recentCustomers]);
+
+  const options = customers.map((customer) => {
+    const truncatedName = truncateText(customer.name);
+    const address = [customer.address, customer.city, customer.country].filter(Boolean).join(", ");
+    const truncatedAddress = truncateText(address);
+
+    return {
+      value: customer.id,
+      label: (
+        <div className="flex flex-col overflow-hidden">
+          <span className="truncate">{truncatedName}</span>
+          {truncatedAddress && <span className="truncate text-muted-foreground text-xs">{truncatedAddress}</span>}
+        </div>
+      ),
+    };
+  });
+
+  // Always add "Create new" option at the top
+  const createNewLabel = debouncedSearch?.trim() ? `Create "${debouncedSearch}"` : "Create new";
+
+  options.unshift({
+    value: `__create__:${debouncedSearch || ""}`,
+    label: (
+      <span className="flex items-center gap-2">
+        <Plus className="size-4" />
+        {createNewLabel}
+      </span>
+    ) as any,
+  });
+
+  const handleValueChange = (selectedValue: string) => {
+    // Handle "create new" selection
+    if (selectedValue.startsWith("__create__:")) {
+      const customerName = selectedValue.replace("__create__:", "");
+      const truncatedName = truncateText(customerName);
+
+      if (onValueChange) {
+        // Pass pseudo-customer with just name, empty id to indicate new customer
+        onValueChange("", {
+          name: customerName || "",
+          address: null,
+          address_2: null,
+          post_code: null,
+          city: null,
+          state: null,
+          country: null,
+          tax_number: null,
+        } as Customer);
+      }
+
+      // Set search to the customer name so it shows in the input
+      setSearch(truncatedName);
+      setDisplayValue(truncatedName);
+      return;
+    }
+
+    // Find customer in both recent and search results
+    const selectedCustomer =
+      customers.find((c) => c.id === selectedValue) ||
+      recentCustomers.find((c) => c.id === selectedValue) ||
+      searchResults.find((c) => c.id === selectedValue);
+
+    if (selectedCustomer) {
+      if (onValueChange) {
+        onValueChange(selectedValue, selectedCustomer);
+      }
+      // Set search to the customer name (truncated) so it shows in the input
+      const truncatedName = truncateText(selectedCustomer.name);
+      setSearch(truncatedName);
+      setDisplayValue(truncatedName);
+    }
+  };
+
+  const handleBlur = () => {
+    // If displayValue is empty (nothing selected) and there's text in search (something was typed),
+    // then behave as if "Create new" was clicked.
+    if (!displayValue && search) {
+      handleValueChange(`__create__:${search}`);
+    }
+    onBlurPropFromParent?.(); // Call the passed onBlur prop after internal logic
+  };
+
+  // Reset search when value changes externally
+  useEffect(() => {
+    if (!value) {
+      setSearch("");
+      setDisplayValue("");
+    }
+  }, [value]);
+
+  return (
+    <Autocomplete
+      searchValue={search}
+      onSearch={handleSearch}
+      value={value ?? undefined}
+      onValueChange={handleValueChange}
+      onBlur={handleBlur} // Pass the new handleBlur to Autocomplete
+      options={options}
+      placeholder={placeholder}
+      className={className}
+      disabled={disabled}
+      loading={isLoading}
+      emptyText={debouncedSearch ? "No customers found" : "Recent customers"}
+      displayValue={displayValue}
+    />
+  );
+}

package/src/components/customers/customer-combobox.tsx

@@ -0,0 +1,130 @@
+import type { Customer } from "@spaceinvoices/js-sdk";
+
+import { Plus } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { Combobox } from "@/ui/components/combobox";
+import { useDebounce } from "@/ui/hooks/use-debounce";
+
+import { useCustomerSearch, useRecentCustomers } from "./customers.hooks";
+
+type CustomerComboboxProps = {
+  entityId: string;
+  value?: string | null;
+  onValueChange?: (value: string, customer: Customer) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+};
+
+export function CustomerCombobox({
+  entityId,
+  value,
+  onValueChange,
+  placeholder = "Search customer...",
+  className,
+  disabled,
+}: CustomerComboboxProps) {
+  const [search, setSearch] = useState("");
+  const [selectedLabel, setSelectedLabel] = useState<string | undefined>(undefined);
+  const debouncedSearch = useDebounce(search, 300);
+
+  // Fetch recent customers (non-blocking, cached)
+  const { data: recentData } = useRecentCustomers(entityId);
+  const recentCustomers = recentData?.data || [];
+
+  // Fetch search results
+  const { data: searchData, isLoading } = useCustomerSearch(entityId, debouncedSearch);
+  const searchResults = searchData?.data || [];
+
+  // Use search results if searching, otherwise show recent customers
+  const customers = useMemo(() => {
+    if (debouncedSearch) {
+      return searchResults;
+    }
+    return recentCustomers;
+  }, [debouncedSearch, searchResults, recentCustomers]);
+
+  const options = customers.map((customer) => ({
+    value: customer.id,
+    label: customer.name,
+  }));
+
+  // Always add "Create new" option at the top
+  const createNewLabel = debouncedSearch?.trim() ? `Create "${debouncedSearch}"` : "Create new";
+
+  options.unshift({
+    value: `__create__:${debouncedSearch || ""}`,
+    label: (
+      <span className="flex items-center gap-2">
+        <Plus className="size-4" />
+        {createNewLabel}
+      </span>
+    ) as any,
+  });
+
+  const handleValueChange = (selectedValue: string) => {
+    // Handle "create new" selection
+    if (selectedValue.startsWith("__create__:")) {
+      const customerName = selectedValue.replace("__create__:", "");
+
+      if (onValueChange) {
+        // Pass pseudo-customer with just name, empty id to indicate new customer
+        onValueChange("", {
+          name: customerName || "",
+          address: null,
+          address_2: null,
+          post_code: null,
+          city: null,
+          state: null,
+          country: null,
+          tax_number: null,
+        } as Customer);
+      }
+
+      // Clear display
+      setSelectedLabel(undefined);
+      setSearch("");
+      return;
+    }
+
+    // Find customer in both recent and search results
+    const selectedCustomer =
+      customers.find((c) => c.id === selectedValue) ||
+      recentCustomers.find((c) => c.id === selectedValue) ||
+      searchResults.find((c) => c.id === selectedValue);
+
+    if (selectedCustomer) {
+      if (onValueChange) {
+        onValueChange(selectedValue, selectedCustomer);
+      }
+    }
+
+    // Clear display after selection
+    setSelectedLabel(undefined);
+    setSearch("");
+  };
+
+  // Reset search and label when value changes externally
+  useEffect(() => {
+    setSearch("");
+    if (!value) {
+      setSelectedLabel(undefined);
+    }
+  }, [value]);
+
+  return (
+    <Combobox
+      value={value ?? undefined}
+      onValueChange={handleValueChange}
+      onSearch={setSearch}
+      options={options}
+      placeholder={placeholder}
+      className={className}
+      disabled={disabled}
+      loading={isLoading}
+      emptyText={debouncedSearch ? "No customers found" : "Recent customers"}
+      selectedLabel={selectedLabel}
+    />
+  );
+}

package/src/components/customers/customer-list-table/customer-list-row-actions.tsx

@@ -0,0 +1,48 @@
+import type { Customer } from "@spaceinvoices/js-sdk";
+
+import { MoreHorizontal } from "lucide-react";
+import { Button } from "@/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/ui/components/ui/dropdown-menu";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+
+type CustomerListRowActionsProps = {
+  customer: Customer;
+} & ComponentTranslationProps;
+
+export default function CustomerListRowActions({ customer, ...i18nProps }: CustomerListRowActionsProps) {
+  const t = createTranslation(i18nProps);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 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>
+        <DropdownMenuItem className="cursor-pointer" onClick={() => navigator.clipboard.writeText(customer.id)}>
+          {t("Copy customer ID")}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => {
+            window.location.href = `/app/customers/${customer.id}`;
+          }}
+        >
+          {t("View customer")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/customers/customer-list-table/customer-list-table.tsx

@@ -0,0 +1,124 @@
+import type { Customer } from "@spaceinvoices/js-sdk";
+import { User } from "lucide-react";
+import { useMemo } from "react";
+import { Button } from "@/ui/components/ui/button";
+import { createTranslation } from "@/ui/lib/translation";
+import { useSDK } from "@/ui/providers/sdk-provider";
+import { DataTable } from "../../table/data-table";
+import { useTableFetch } from "../../table/hooks/use-table-fetch";
+import type { Column, ListTableProps, TableQueryParams, TableQueryResponse } from "../../table/types";
+import { CUSTOMERS_CACHE_KEY } from "../customers.hooks";
+import CustomerListRowActions from "./customer-list-row-actions";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+type CustomerListTableProps = {
+  t?: (key: string) => string;
+  namespace?: string;
+  locale?: string;
+  entityId?: string;
+} & ListTableProps<Customer>;
+
+export default function CustomerListTable({
+  queryParams,
+  createNewTrigger,
+  onRowClick,
+  onChangeParams,
+  entityId,
+  ...i18nProps
+}: CustomerListTableProps) {
+  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.customers.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<Customer>;
+  }, entityId);
+
+  const columns: Column<Customer>[] = useMemo(
+    () => [
+      {
+        id: "name",
+        header: t("Name"),
+        sortable: true,
+        cell: (customer) => (
+          <Button variant="link" className="cursor-pointer py-0 underline" onClick={() => onRowClick?.(customer)}>
+            <User className="h-4 w-4 flex-shrink-0" />
+            {customer.name}
+          </Button>
+        ),
+      },
+      {
+        id: "address",
+        header: t("Address"),
+        sortable: true,
+        cell: (customer) => customer.address,
+      },
+      {
+        id: "post_code",
+        header: t("Post Code"),
+        cell: (customer) => customer.post_code,
+      },
+      {
+        id: "city",
+        header: t("City"),
+        cell: (customer) => customer.city,
+      },
+      {
+        id: "state",
+        header: t("State"),
+        cell: (customer) => customer.state,
+      },
+      {
+        id: "country",
+        header: t("Country"),
+        cell: (customer) => customer.country,
+      },
+      {
+        id: "tax_number",
+        header: t("Tax number"),
+        align: "right",
+        cell: (customer) => customer.tax_number,
+      },
+      {
+        id: "actions",
+        header: "",
+        align: "right",
+        cell: (customer) => <CustomerListRowActions customer={customer} t={t} />,
+      },
+    ],
+    [t, onRowClick],
+  );
+
+  return (
+    <DataTable
+      columns={columns}
+      queryParams={queryParams}
+      resourceName="customer"
+      cacheKey={CUSTOMERS_CACHE_KEY}
+      createNewTrigger={createNewTrigger}
+      onFetch={handleFetch}
+      onChangeParams={onChangeParams}
+      entityId={entityId}
+    />
+  );
+}

package/src/components/customers/customer-list-table/index.ts

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

package/src/components/customers/customer-list-table/locales/de.ts

@@ -0,0 +1,16 @@
+export default {
+  Name: "Name",
+  Address: "Adresse",
+  "Post Code": "Postleitzahl",
+  City: "Stadt",
+  State: "Bundesland",
+  Country: "Land",
+  "Tax number": "Steuernummer",
+  Email: "E-Mail",
+  "Created At": "Erstellt am",
+  Actions: "Aktionen",
+  "Create new customer": "Neuen Kunden erstellen",
+  "Copy customer ID": "Kunden-ID kopieren",
+  "View customer": "Kunde anzeigen",
+  "Open menu": "Menü öffnen",
+} as const;

package/src/components/customers/customer-list-table/locales/sl.ts

@@ -0,0 +1,16 @@
+export default {
+  Name: "Ime",
+  Address: "Naslov",
+  "Post Code": "Poštna številka",
+  City: "Mesto",
+  State: "Kraj",
+  Country: "Država",
+  "Tax number": "Davčna številka",
+  Email: "E-pošta",
+  "Created At": "Ustvarjeno",
+  Actions: "Akcije",
+  "Create new customer": "Ustvari novo stranko",
+  "Copy customer ID": "Kopiraj ID stranke",
+  "View customer": "Prikaži stranko",
+  "Open menu": "Odpri meni",
+} as const;