@spaceinvoices/react-ui 0.1.1

package/src/components/company-registry/company-registry-autocomplete.tsx

@@ -0,0 +1,151 @@
+import type { CompanyRegistryResult } from "@spaceinvoices/js-sdk";
+import { Building2 } from "lucide-react";
+import { useState } from "react";
+import { Autocomplete } from "@/ui/common/autocomplete";
+import { useCompanyRegistrySearch, useIsCountrySupported } from "./company-registry.hooks";
+
+const MAX_TEXT_LENGTH = 80;
+
+const truncateText = (text: string, maxLength: number = MAX_TEXT_LENGTH): string => {
+  return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
+};
+
+type CompanyRegistryAutocompleteProps = {
+  /**
+   * ISO 3166-1 alpha-2 country code (e.g., "SI", "AT")
+   * Typically from the entity's country_code
+   */
+  countryCode: string;
+  /**
+   * Callback when a company is selected
+   * Use this to auto-fill customer form fields
+   */
+  onSelect?: (company: CompanyRegistryResult) => void;
+  /**
+   * Placeholder text for the search input
+   */
+  placeholder?: string;
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+  /**
+   * Whether the autocomplete is disabled
+   */
+  disabled?: boolean;
+};
+
+/**
+ * Company Registry Autocomplete
+ *
+ * Searches public company registries (e.g., AJPES for Slovenia) and allows
+ * users to select a company to auto-fill customer details.
+ *
+ * Features:
+ * - Searches by company name or tax number
+ * - Displays company address and legal form
+ * - Shows bank accounts if available
+ * - Only renders if country has registry data available
+ *
+ * Usage:
+ * ```tsx
+ * <CompanyRegistryAutocomplete
+ *   countryCode={entity.country_code}
+ *   onSelect={(company) => {
+ *     form.setValue("name", company.name);
+ *     form.setValue("address", company.address);
+ *     form.setValue("tax_number", company.tax_number);
+ *     // etc.
+ *   }}
+ * />
+ * ```
+ */
+export function CompanyRegistryAutocomplete({
+  countryCode,
+  onSelect,
+  placeholder = "Search company registry...",
+  className,
+  disabled,
+}: CompanyRegistryAutocompleteProps) {
+  const [search, setSearch] = useState("");
+
+  const { isSupported, isLoading: isCheckingSupport } = useIsCountrySupported(countryCode);
+  const { data: searchData, isLoading: isSearching } = useCompanyRegistrySearch(countryCode, search);
+
+  const companies = searchData?.data || [];
+
+  // Don't render if country doesn't have registry data
+  if (isCheckingSupport) {
+    return null;
+  }
+
+  if (!isSupported) {
+    return null;
+  }
+
+  const options = companies.map((company) => {
+    const truncatedName = truncateText(company.name);
+    const addressParts = [company.address, company.city].filter(Boolean);
+    const address = addressParts.join(", ");
+    const truncatedAddress = truncateText(address);
+
+    // Build subtitle with legal form and bank account indicator
+    const subtitleParts: string[] = [];
+    if (company.legal_form) {
+      subtitleParts.push(company.legal_form);
+    }
+    if (company.tax_number) {
+      subtitleParts.push(`Tax: ${company.tax_number}`);
+    }
+    if (company.bank_accounts && company.bank_accounts.length > 0) {
+      subtitleParts.push(`${company.bank_accounts.length} bank account(s)`);
+    }
+    const subtitle = subtitleParts.join(" • ");
+
+    return {
+      value: company.id,
+      label: (
+        <div className="flex flex-col overflow-hidden py-1">
+          <span className="truncate font-medium">{truncatedName}</span>
+          {truncatedAddress && <span className="truncate text-muted-foreground text-xs">{truncatedAddress}</span>}
+          {subtitle && <span className="truncate text-muted-foreground text-xs">{subtitle}</span>}
+        </div>
+      ),
+      company, // Pass full company object for selection
+    };
+  });
+
+  const handleValueChange = (selectedValue: string) => {
+    const selectedOption = options.find((o) => o.value === selectedValue);
+    if (selectedOption?.company && onSelect) {
+      onSelect(selectedOption.company);
+      // Clear search after selection
+      setSearch("");
+    }
+  };
+
+  const handleSearch = (value: string) => {
+    setSearch(value);
+  };
+
+  return (
+    <div className={className}>
+      <div className="mb-2 flex items-center gap-2">
+        <Building2 className="size-4 text-muted-foreground" />
+        <span className="font-medium text-muted-foreground text-sm">Search {countryCode} company registry</span>
+      </div>
+      <Autocomplete
+        searchValue={search}
+        onSearch={handleSearch}
+        onValueChange={handleValueChange}
+        options={options}
+        placeholder={placeholder}
+        disabled={disabled}
+        loading={isSearching}
+        emptyText={search.length < 2 ? "Type at least 2 characters" : "No companies found"}
+      />
+    </div>
+  );
+}
+
+export default CompanyRegistryAutocomplete;

package/src/components/company-registry/company-registry.hooks.ts

@@ -0,0 +1,67 @@
+import type { CompanyRegistryResult } from "@spaceinvoices/js-sdk";
+import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "@/ui/hooks/use-debounce";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+// Cache key for company registry queries
+export const COMPANY_REGISTRY_CACHE_KEY = "company-registry";
+
+/**
+ * Search company registry for autocomplete
+ * Debounced to reduce API calls while typing
+ */
+export function useCompanyRegistrySearch(countryCode: string, query: string) {
+  const { sdk } = useSDK();
+  const debouncedQuery = useDebounce(query, 300);
+
+  return useQuery({
+    queryKey: [COMPANY_REGISTRY_CACHE_KEY, "search", countryCode, debouncedQuery],
+    queryFn: async (): Promise<{ data: CompanyRegistryResult[] }> => {
+      if (!debouncedQuery || debouncedQuery.length < 2) {
+        return { data: [] };
+      }
+
+      // SDK auto-unwraps response - returns CompanyRegistrySearchResponse directly
+      const response = await sdk.companyRegistry.searchCompanyRegistry({
+        country_code: countryCode,
+        q: debouncedQuery,
+        limit: "10",
+      });
+
+      return { data: response.data };
+    },
+    enabled: Boolean(countryCode && debouncedQuery && debouncedQuery.length >= 2),
+    staleTime: 1000 * 60 * 5, // Cache for 5 minutes
+  });
+}
+
+/**
+ * Get list of countries that have company registry data available
+ */
+export function useSupportedCountries() {
+  const { sdk } = useSDK();
+
+  return useQuery({
+    queryKey: [COMPANY_REGISTRY_CACHE_KEY, "countries"],
+    queryFn: async (): Promise<{ data: string[] }> => {
+      // SDK method renamed to `list`, auto-unwraps response
+      const response = await sdk.companyRegistry.list();
+      return { data: response.data };
+    },
+    staleTime: 1000 * 60 * 60, // Cache for 1 hour - doesn't change often
+  });
+}
+
+/**
+ * Check if company registry is available for a specific country
+ */
+export function useIsCountrySupported(countryCode: string) {
+  const { data: countriesData, isLoading } = useSupportedCountries();
+
+  const isSupported = countriesData?.data?.includes(countryCode) ?? false;
+
+  return {
+    isSupported,
+    isLoading,
+  };
+}

package/src/components/company-registry/index.ts

@@ -0,0 +1,7 @@
+export {
+  COMPANY_REGISTRY_CACHE_KEY,
+  useCompanyRegistrySearch,
+  useIsCountrySupported,
+  useSupportedCountries,
+} from "./company-registry.hooks";
+export { CompanyRegistryAutocomplete } from "./company-registry-autocomplete";

package/src/components/credit-notes/create/create-credit-note-form.tsx

@@ -0,0 +1,332 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { CreateCreditNoteRequest, CreditNote } from "@spaceinvoices/js-sdk";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Resolver } from "react-hook-form";
+import { useForm, useWatch } from "react-hook-form";
+import type { z } from "zod";
+import { Form } from "@/ui/components/ui/form";
+import { createCreditNoteSchema } from "@/ui/generated/schemas";
+import { useNextDocumentNumber } from "@/ui/hooks/use-next-document-number";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useEntities } from "@/ui/providers/entities-context";
+import { useFormFooterRegistration } from "@/ui/providers/form-footer-context";
+import { CUSTOMERS_CACHE_KEY } from "../../customers/customers.hooks";
+import {
+  DocumentDetailsSection,
+  DocumentNoteField,
+  DocumentPaymentTermsField,
+} from "../../documents/create/document-details-section";
+import { DocumentItemsSection, type PriceModesMap } from "../../documents/create/document-items-section";
+import { DocumentRecipientSection } from "../../documents/create/document-recipient-section";
+import { MarkAsPaidSection } from "../../documents/create/mark-as-paid-section";
+import { prepareDocumentSubmission } from "../../documents/create/prepare-document-submission";
+import { useDocumentCustomerForm } from "../../documents/create/use-document-customer-form";
+import type { DocumentTypes } from "../../documents/types";
+import { useCreateCreditNote } from "../credit-notes.hooks";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+// Form values: extend schema with local-only fields (number is for display, not sent to API)
+type CreateCreditNoteFormValues = z.infer<typeof createCreditNoteSchema> & {
+  number?: string;
+};
+
+/** Preview payload extends request with display-only fields */
+type CreditNotePreviewPayload = Partial<CreateCreditNoteRequest> & { number?: string };
+
+type CreateCreditNoteFormProps = {
+  type: DocumentTypes;
+  entityId: string;
+  onSuccess?: (data: CreditNote) => void;
+  onError?: (error: unknown) => void;
+  onChange?: (data: CreditNotePreviewPayload) => void;
+  onAddNewTax?: () => void;
+  /** Initial values for form fields (used for document duplication) */
+  initialValues?: Partial<CreateCreditNoteRequest>;
+} & ComponentTranslationProps;
+
+export default function CreateCreditNoteForm({
+  type: _type,
+  entityId,
+  onSuccess,
+  onError,
+  onChange,
+  onAddNewTax,
+  initialValues,
+  t: translateProp,
+  namespace,
+  locale,
+}: CreateCreditNoteFormProps) {
+  const t = createTranslation({
+    t: translateProp,
+    namespace,
+    locale,
+    translations,
+  });
+
+  const { activeEntity } = useEntities();
+  const queryClient = useQueryClient();
+
+  // Fetch next credit note number
+  const { data: nextNumberData } = useNextDocumentNumber(entityId, "credit_note", {
+    enabled: !!entityId,
+  });
+
+  // UI-only state (not part of API schema)
+  const [markAsPaid, setMarkAsPaid] = useState(false);
+  const [paymentType, setPaymentType] = useState("bank_transfer");
+  const [isDraftPending, setIsDraftPending] = useState(false);
+
+  // Price modes per item (gross vs net) - collected from component state at submit
+  const initialPriceModes = useMemo(() => {
+    if (!initialValues?.items) return {};
+    return initialValues.items.reduce((acc, item, index) => {
+      acc[index] = item.gross_price != null;
+      return acc;
+    }, {} as PriceModesMap);
+  }, [initialValues?.items]);
+  const priceModesRef = useRef<PriceModesMap>(initialPriceModes);
+
+  // Get default payment terms from entity settings
+  const defaultPaymentTerms = (activeEntity?.settings as any)?.default_credit_note_payment_terms || "";
+
+  const form = useForm<CreateCreditNoteFormValues>({
+    // Cast resolver to accept extended form type (includes UI-only fields)
+    resolver: zodResolver(createCreditNoteSchema) as Resolver<CreateCreditNoteFormValues>,
+    defaultValues: {
+      number: "",
+      date: initialValues?.date || new Date().toISOString(),
+      customer_id: initialValues?.customer_id ?? undefined,
+      // Cast customer to form schema type (API type may have additional fields)
+      customer: (initialValues?.customer as CreateCreditNoteFormValues["customer"]) ?? undefined,
+      items: initialValues?.items?.length
+        ? initialValues.items.map((item) => ({
+            name: item.name || "",
+            description: item.description || "",
+            quantity: item.quantity ?? 1,
+            // Use gross_price if set, otherwise use price
+            price: item.gross_price ?? item.price,
+            taxes: item.taxes || [],
+          }))
+        : [
+            {
+              name: "",
+              description: "",
+              quantity: 1,
+              price: undefined,
+              taxes: [],
+            },
+          ],
+      currency_code: initialValues?.currency_code || activeEntity?.currency_code || "EUR",
+      note: initialValues?.note ?? "",
+      payment_terms: initialValues?.payment_terms ?? defaultPaymentTerms,
+    },
+  });
+
+  const formValues = useWatch({
+    control: form.control,
+  });
+
+  // Extract customer management logic into a shared hook
+  const {
+    originalCustomer,
+    showCustomerForm,
+    shouldFocusName,
+    selectedCustomerId,
+    initialCustomerName,
+    handleCustomerSelect,
+    handleCustomerClear,
+  } = useDocumentCustomerForm(form);
+
+  // Pre-fill credit note number from preview
+  useEffect(() => {
+    if (nextNumberData?.number) {
+      form.setValue("number", nextNumberData.number);
+    }
+  }, [nextNumberData?.number, form]);
+
+  const { mutate: createCreditNote, isPending } = useCreateCreditNote({
+    entityId,
+    onSuccess: (data) => {
+      // Invalidate customers cache when a customer was created/linked
+      if (data.customer_id) {
+        queryClient.invalidateQueries({ queryKey: [CUSTOMERS_CACHE_KEY] });
+      }
+      onSuccess?.(data);
+    },
+    onError,
+  });
+
+  // Shared submit logic for both regular save and save as draft
+  const submitCreditNote = useCallback(
+    (values: CreateCreditNoteFormValues, isDraft: boolean) => {
+      const payload = prepareDocumentSubmission(values, {
+        originalCustomer,
+        wasCustomerFormShown: showCustomerForm,
+        markAsPaid: isDraft ? false : markAsPaid,
+        paymentType,
+        documentType: "credit_note",
+        priceModes: priceModesRef.current,
+        isDraft,
+      });
+      createCreditNote(payload as CreateCreditNoteRequest);
+    },
+    [createCreditNote, markAsPaid, originalCustomer, paymentType, showCustomerForm],
+  );
+
+  // Handle save as draft
+  const handleSaveAsDraft = useCallback(async () => {
+    setIsDraftPending(true);
+    try {
+      const isValid = await form.trigger();
+      if (isValid) {
+        const values = form.getValues();
+        submitCreditNote(values, true);
+      }
+    } finally {
+      setIsDraftPending(false);
+    }
+  }, [form, submitCreditNote]);
+
+  useFormFooterRegistration({
+    formId: "create-credit-note-form",
+    isPending,
+    isDirty: form.formState.isDirty,
+    label: t("Save"),
+    secondaryAction: {
+      label: t("Save as Draft"),
+      onClick: handleSaveAsDraft,
+      isPending: isDraftPending,
+    },
+  });
+
+  // Set default note and payment terms from entity settings when entity data is available
+  useEffect(() => {
+    const entityDefaultNote = (activeEntity?.settings as any)?.default_credit_note_note;
+    if (entityDefaultNote && !form.getValues("note")) {
+      form.setValue("note", entityDefaultNote);
+    }
+    const entityDefaultPaymentTerms = (activeEntity?.settings as any)?.default_credit_note_payment_terms;
+    if (entityDefaultPaymentTerms && !form.getValues("payment_terms")) {
+      form.setValue("payment_terms", entityDefaultPaymentTerms);
+    }
+  }, [activeEntity, form]);
+
+  // Auto-add tax field for tax subject entities
+  useEffect(() => {
+    if (activeEntity?.is_tax_subject) {
+      const items = form.getValues("items") || [];
+      if (items.length > 0 && (!items[0].taxes || items[0].taxes.length === 0)) {
+        form.setValue("items.0.taxes", [{ tax_id: undefined }]);
+      }
+    }
+  }, [activeEntity?.is_tax_subject, form]);
+
+  useEffect(() => {
+    if (onChange) {
+      const currentItems = form.getValues("items") || [];
+
+      // Transform items to use gross_price when price mode is gross
+      const transformedItems = currentItems.map((item: any, index: number) => {
+        const { price, ...rest } = item;
+        const isGross = priceModesRef.current[index] ?? false;
+        if (isGross) {
+          return { ...rest, gross_price: price };
+        }
+        return { ...rest, price };
+      });
+
+      // Build preview payload (includes number for display)
+      const payload: CreditNotePreviewPayload = {
+        number: formValues.number,
+        date: formValues.date,
+        customer_id: formValues.customer_id,
+        customer: formValues.customer,
+        items: transformedItems,
+        currency_code: formValues.currency_code,
+        note: formValues.note,
+        payment_terms: formValues.payment_terms,
+      };
+      onChange(payload);
+    }
+  }, [formValues, onChange, form]);
+
+  const onSubmit = (values: CreateCreditNoteFormValues) => {
+    submitCreditNote(values, false);
+  };
+
+  return (
+    <Form {...form}>
+      <form id="create-credit-note-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <div className="flex w-full flex-col md:flex-row md:gap-6">
+          <DocumentRecipientSection
+            control={form.control}
+            entityId={entityId}
+            onCustomerSelect={handleCustomerSelect}
+            onCustomerClear={handleCustomerClear}
+            showCustomerForm={showCustomerForm}
+            shouldFocusName={shouldFocusName}
+            selectedCustomerId={selectedCustomerId}
+            initialCustomerName={initialCustomerName}
+            t={t}
+          />
+          <DocumentDetailsSection control={form.control} documentType={_type} t={t}>
+            {/* Credit note specific: Mark as paid section (UI-only state, not in form schema) */}
+            <MarkAsPaidSection
+              checked={markAsPaid}
+              onCheckedChange={setMarkAsPaid}
+              paymentType={paymentType}
+              onPaymentTypeChange={setPaymentType}
+              t={t}
+            />
+          </DocumentDetailsSection>
+        </div>
+
+        <DocumentItemsSection
+          control={form.control}
+          watch={form.watch}
+          setValue={form.setValue}
+          getValues={form.getValues}
+          entityId={entityId}
+          currencyCode={activeEntity?.currency_code ?? undefined}
+          onAddNewTax={onAddNewTax}
+          t={t}
+          maxTaxesPerItem={activeEntity?.country_rules?.max_taxes_per_item}
+          priceModesRef={priceModesRef}
+          initialPriceModes={initialPriceModes}
+        />
+
+        <DocumentNoteField
+          control={form.control}
+          t={t}
+          entity={activeEntity}
+          document={{
+            number: formValues.number,
+            date: formValues.date,
+            currency_code: formValues.currency_code,
+            customer: formValues.customer as any,
+          }}
+        />
+
+        <DocumentPaymentTermsField
+          control={form.control}
+          t={t}
+          entity={activeEntity}
+          document={{
+            number: formValues.number,
+            date: formValues.date,
+            currency_code: formValues.currency_code,
+            customer: formValues.customer as any,
+          }}
+        />
+      </form>
+    </Form>
+  );
+}

package/src/components/credit-notes/create/index.ts

@@ -0,0 +1 @@
+export { default as CreateCreditNoteForm } from "./create-credit-note-form";

package/src/components/credit-notes/create/locales/de.ts

@@ -0,0 +1,69 @@
+export default {
+  Recipient: "Empfänger",
+  Name: "Name",
+  Details: "Details",
+  Number: "Nummer",
+  Date: "Datum",
+  "Pick a date": "Datum auswählen",
+  "Due Date": "Fälligkeitsdatum",
+  "Valid Until": "Gültig bis",
+  Items: "Artikel",
+  "Add item": "Artikel hinzufügen",
+  Save: "Speichern",
+  "Save as Draft": "Als Entwurf speichern",
+  Quantity: "Menge",
+  Price: "Preis",
+  Unit: "Einheit",
+  Discount: "Rabatt",
+  Tax: "Steuer",
+  "Tax rate": "Steuersatz",
+  "Add tax": "Steuer hinzufügen",
+  "Select tax...": "Steuer auswählen...",
+  "Loading...": "Laden...",
+  "No taxes found": "Keine Steuern gefunden",
+  "Add new tax...": "Neue Steuer hinzufügen...",
+  Description: "Beschreibung",
+  "Mark as Paid": "Als bezahlt markieren",
+  Paid: "Bezahlt",
+  "Credit note will be marked as fully paid upon creation":
+    "Gutschrift wird bei Erstellung als vollständig bezahlt markiert",
+  "Payment Type": "Zahlungsart",
+  "Select payment type": "Zahlungsart auswählen",
+  Cash: "Bargeld",
+  "Bank Transfer": "Banküberweisung",
+  Card: "Karte",
+  Check: "Scheck",
+  Other: "Andere",
+  // Note field
+  Note: "Notiz",
+  "Insert variable": "Variable einfügen",
+  "Add payment instructions, terms, or other notes...":
+    "Zahlungsanweisungen, Bedingungen oder andere Notizen hinzufügen...",
+  // Payment terms field
+  "Payment Terms": "Zahlungsbedingungen",
+  "Add payment terms...": "Zahlungsbedingungen hinzufügen...",
+  // Recipient fields
+  "Search or create customer...": "Kunde suchen oder erstellen...",
+  Clear: "Löschen",
+  Address: "Adresse",
+  "Address 2": "Adresse 2",
+  "Post Code": "Postleitzahl",
+  City: "Stadt",
+  State: "Bundesland",
+  Country: "Land",
+  "Tax Number": "Steuernummer",
+  // Currency
+  Currency: "Währung",
+  "Select currency": "Währung auswählen",
+  // Discount types
+  "Percentage discount": "Prozentualer Rabatt",
+  "Fixed amount discount": "Fester Rabatt",
+  Percentage: "Prozent",
+  "Fixed amount": "Fester Betrag",
+  "Taxes disabled": "Steuern deaktiviert",
+  // Gross price support
+  "Gross price": "Bruttopreis",
+  "Net price": "Nettopreis",
+  "Gross price (tax included)": "Bruttopreis (inkl. MwSt.)",
+  "Net price (before tax)": "Nettopreis (exkl. MwSt.)",
+} as const;