@spaceinvoices/react-ui 0.1.1

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

@@ -0,0 +1,67 @@
+export default {
+  Recipient: "Prejemnik",
+  Name: "Ime",
+  Details: "Podrobnosti",
+  Number: "Številka",
+  Date: "Datum",
+  "Pick a date": "Izberi datum",
+  "Due Date": "Rok plačila",
+  "Valid Until": "Veljavno do",
+  Items: "Postavke",
+  "Add item": "Dodaj postavko",
+  Save: "Shrani",
+  "Save as Draft": "Shrani kot osnutek",
+  Quantity: "Količina",
+  Price: "Cena",
+  Unit: "Enota",
+  Discount: "Popust",
+  Tax: "Davek",
+  "Tax rate": "Davčna stopnja",
+  "Add tax": "Dodaj davek",
+  "Select tax...": "Izberi davek...",
+  "Loading...": "Nalaganje...",
+  "No taxes found": "Ni najdenih davkov",
+  "Add new tax...": "Dodaj nov davek...",
+  Description: "Opis",
+  "Mark as Paid": "Označi kot plačano",
+  Paid: "Plačano",
+  "Credit note will be marked as fully paid upon creation": "Dobropis bo označen kot plačan ob ustvarjanju",
+  "Payment Type": "Vrsta plačila",
+  "Select payment type": "Izberite vrsto plačila",
+  Cash: "Gotovina",
+  "Bank Transfer": "Bančno nakazilo",
+  Card: "Kartica",
+  Check: "Ček",
+  Other: "Drugo",
+  // Note field
+  Note: "Opomba",
+  "Insert variable": "Vstavi spremenljivko",
+  "Add payment instructions, terms, or other notes...": "Dodajte navodila za plačilo, pogoje ali druge opombe...",
+  // Payment terms field
+  "Payment Terms": "Plačilni pogoji",
+  "Add payment terms...": "Dodajte plačilne pogoje...",
+  // Recipient fields
+  "Search or create customer...": "Išči ali ustvari stranko...",
+  Clear: "Počisti",
+  Address: "Naslov",
+  "Address 2": "Naslov 2",
+  "Post Code": "Poštna številka",
+  City: "Mesto",
+  State: "Regija",
+  Country: "Država",
+  "Tax Number": "Davčna številka",
+  // Currency
+  Currency: "Valuta",
+  "Select currency": "Izberi valuto",
+  // Discount types
+  "Percentage discount": "Odstotni popust",
+  "Fixed amount discount": "Fiksni popust",
+  Percentage: "Odstotek",
+  "Fixed amount": "Fiksni znesek",
+  "Taxes disabled": "Davki onemogočeni",
+  // Gross price support
+  "Gross price": "Bruto cena",
+  "Net price": "Neto cena",
+  "Gross price (tax included)": "Bruto cena (z davkom)",
+  "Net price (before tax)": "Neto cena (brez davka)",
+} as const;

package/src/components/credit-notes/credit-notes.hooks.ts

@@ -0,0 +1,22 @@
+/**
+ * Credit note hooks using the shared createResourceHooks factory
+ *
+ * This provides:
+ * - Optimistic updates
+ * - Automatic cache invalidation
+ * - Consistent error handling
+ * - Less code duplication
+ */
+
+import type { CreateCreditNoteRequest, CreditNote } from "@spaceinvoices/js-sdk";
+import { createResourceHooks } from "@/ui/hooks/create-resource-hooks";
+
+export const CREDIT_NOTES_CACHE_KEY = "credit-notes";
+
+const {
+  useCreateResource: useCreateCreditNote,
+  useUpdateResource: useUpdateCreditNote,
+  useDeleteResource: useDeleteCreditNote,
+} = createResourceHooks<CreditNote, CreateCreditNoteRequest>("creditNotes", CREDIT_NOTES_CACHE_KEY);
+
+export { useCreateCreditNote, useUpdateCreditNote, useDeleteCreditNote };

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

@@ -0,0 +1,10 @@
+/**
+ * Credit Notes components - Main exports
+ */
+
+// Credit Note Form
+export * from "./create";
+// Credit Note Hooks
+export * from "./credit-notes.hooks";
+// Credit Note List
+export * from "./list";

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

@@ -0,0 +1,3 @@
+export { default as CreditNoteListRowActions } from "./list-row-actions";
+export { default as CreditNoteListTable } from "./list-table";
+export { useCreditNoteDownload } from "./use-credit-note-download";

package/src/components/credit-notes/list/list-row-actions.tsx

@@ -0,0 +1,116 @@
+import { Copy, Download, Eye, Link2Off, Loader2, MoreHorizontal, Plus } 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 { useCreditNoteDownload } from "./use-credit-note-download";
+
+// Type for credit note - using any until SDK is regenerated
+type CreditNote = any;
+
+type CreditNoteListRowActionsProps = {
+  creditNote: CreditNote;
+  onAddPayment?: (creditNote: CreditNote) => void;
+  onDuplicate?: (creditNote: CreditNote) => void;
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+  onUnshare?: (creditNote: CreditNote) => Promise<void>;
+  isUnsharing?: boolean;
+} & ComponentTranslationProps;
+
+export default function CreditNoteListRowActions({
+  creditNote,
+  onAddPayment,
+  onDuplicate,
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  onUnshare,
+  isUnsharing,
+  ...i18nProps
+}: CreditNoteListRowActionsProps) {
+  const t = createTranslation(i18nProps);
+  const { isDownloading, downloadPDF } = useCreditNoteDownload({
+    onDownloadStart,
+    onDownloadSuccess,
+    onDownloadError,
+    ...i18nProps,
+  });
+
+  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={() => navigator.clipboard.writeText(creditNote.id)}>
+            <Copy className="h-4 w-4" />
+            {t("Copy credit note ID")}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            className="cursor-pointer"
+            onClick={() => {
+              window.location.href = `/app/documents/view/${creditNote.id}`;
+            }}
+          >
+            <Eye className="h-4 w-4" />
+            {t("View credit note")}
+          </DropdownMenuItem>
+          <DropdownMenuItem className="cursor-pointer" onClick={() => downloadPDF(creditNote)} disabled={isDownloading}>
+            <Download className="h-4 w-4" />
+            {isDownloading ? t("Downloading...") : t("Download PDF")}
+          </DropdownMenuItem>
+          {onDuplicate && (
+            <DropdownMenuItem className="cursor-pointer" onClick={() => onDuplicate(creditNote)}>
+              <Copy className="h-4 w-4" />
+              {t("Duplicate")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuGroup>
+        {!creditNote.paid_in_full && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem className="cursor-pointer" onClick={() => onAddPayment?.(creditNote)}>
+                <Plus className="h-4 w-4" />
+                {t("Add Payment")}
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </>
+        )}
+        {creditNote.shareable_id && onUnshare && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                className="cursor-pointer text-destructive focus:text-destructive"
+                onClick={() => onUnshare(creditNote)}
+                disabled={isUnsharing}
+              >
+                {isUnsharing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Link2Off className="h-4 w-4" />}
+                {t("Unshare")}
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/credit-notes/list/list-table.tsx

@@ -0,0 +1,183 @@
+import type { CreditNote } from "@spaceinvoices/js-sdk";
+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,
+  FilterConfig,
+  ListTableProps,
+  TableQueryParams,
+  TableQueryResponse,
+} from "@/ui/components/table/types";
+import { Badge } from "@/ui/components/ui/badge";
+import { Button } from "@/ui/components/ui/button";
+import { createTranslation } from "@/ui/lib/translation";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+import CreditNoteListRowActions from "./list-row-actions";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+type CreditNoteListTableProps = {
+  t?: (key: string) => string;
+  namespace?: string;
+  locale?: string;
+  entityId?: string;
+  onAddPayment?: (creditNote: CreditNote) => void;
+  onDuplicate?: (creditNote: CreditNote) => void;
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+} & ListTableProps<CreditNote>;
+
+export default function CreditNoteListTable({
+  queryParams,
+  onRowClick,
+  onAddPayment,
+  onDuplicate,
+  onChangeParams,
+  entityId,
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  ...i18nProps
+}: CreditNoteListTableProps) {
+  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.creditNotes.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<CreditNote>;
+  }, entityId);
+
+  const filterConfig: FilterConfig = useMemo(
+    () => ({
+      dateFields: [
+        { id: "date", label: t("Date") },
+        { id: "created_at", label: t("Created At") },
+      ],
+      statusFilter: true, // Credit notes have payment status
+    }),
+    [t],
+  );
+
+  const columns: Column<CreditNote>[] = useMemo(
+    () => [
+      {
+        id: "number",
+        header: t("Number"),
+        sortable: true,
+        cell: (creditNote) => (
+          <div className="flex items-center gap-2">
+            <Button variant="link" className="cursor-pointer py-0 underline" onClick={() => onRowClick?.(creditNote)}>
+              {creditNote.number}
+            </Button>
+            {(creditNote as any).is_draft && (
+              <Badge
+                variant="outline"
+                className="border-amber-500 bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-400"
+              >
+                {t("Draft")}
+              </Badge>
+            )}
+          </div>
+        ),
+      },
+      {
+        id: "customer",
+        header: t("Customer"),
+        cell: (creditNote) => creditNote.customer?.name ?? "-",
+      },
+      {
+        id: "date",
+        header: t("Date"),
+        sortable: true,
+        cell: (creditNote) => <FormattedDate date={creditNote.date} />,
+      },
+      {
+        id: "total",
+        header: t("Total"),
+        sortable: true,
+        align: "right",
+        cell: (creditNote) => creditNote.total,
+      },
+      {
+        id: "total_with_tax",
+        header: t("Total with Tax"),
+        sortable: true,
+        align: "right",
+        cell: (creditNote) => creditNote.total_with_tax,
+      },
+      {
+        id: "status",
+        header: t("Status"),
+        cell: (creditNote) => <PaymentStatusBadge creditNote={creditNote} />,
+      },
+      {
+        id: "actions",
+        header: "",
+        align: "right",
+        cell: (creditNote) => (
+          <CreditNoteListRowActions
+            creditNote={creditNote}
+            onAddPayment={onAddPayment}
+            onDuplicate={onDuplicate}
+            onDownloadStart={onDownloadStart}
+            onDownloadSuccess={onDownloadSuccess}
+            onDownloadError={onDownloadError}
+            {...i18nProps}
+          />
+        ),
+      },
+    ],
+    [t, onRowClick, onAddPayment, onDuplicate, onDownloadStart, onDownloadSuccess, onDownloadError, i18nProps],
+  );
+
+  return (
+    <DataTable
+      columns={columns}
+      queryParams={queryParams}
+      resourceName="credit_note"
+      cacheKey="credit-notes"
+      createNewLink="/app/documents/add/credit_note"
+      onFetch={handleFetch}
+      onChangeParams={onChangeParams}
+      entityId={entityId}
+      filterConfig={filterConfig}
+      t={t}
+      locale={i18nProps.locale}
+    />
+  );
+}
+
+/** Payment status badge for credit notes */
+function PaymentStatusBadge({ creditNote }: { creditNote: CreditNote }) {
+  if (creditNote.paid_in_full) {
+    return <span className="rounded-full bg-green-100 px-2 py-1 text-green-800 text-xs">Paid</span>;
+  }
+  if (creditNote.total_paid > 0) {
+    return <span className="rounded-full bg-yellow-100 px-2 py-1 text-xs text-yellow-800">Partial</span>;
+  }
+  return <span className="rounded-full bg-gray-100 px-2 py-1 text-gray-800 text-xs">Unpaid</span>;
+}

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

@@ -0,0 +1,33 @@
+export default {
+  Draft: "Entwurf",
+  Number: "Nummer",
+  Customer: "Kunde",
+  Date: "Datum",
+  Total: "Gesamt",
+  "Total with Tax": "Gesamt mit MwSt.",
+  Status: "Status",
+  Actions: "Aktionen",
+  "Open menu": "Menü öffnen",
+  "Copy credit note ID": "Gutschrift-ID kopieren",
+  "View credit note": "Gutschrift anzeigen",
+  "Download PDF": "PDF herunterladen",
+  "Downloading...": "Wird heruntergeladen...",
+  "Add Payment": "Zahlung hinzufügen",
+  Duplicate: "Duplizieren",
+  "Failed to download PDF": "PDF-Download fehlgeschlagen",
+  "Credit Note": "Gutschrift",
+  "No credit notes found": "Keine Gutschriften gefunden",
+  "Create Credit Note": "Gutschrift erstellen",
+  // Filter translations
+  "Search...": "Suchen...",
+  Filters: "Filter",
+  "Date Range": "Datumsbereich",
+  From: "Von",
+  To: "Bis",
+  "Clear filters": "Filter löschen",
+  Paid: "Bezahlt",
+  Unpaid: "Unbezahlt",
+  Overdue: "Überfällig",
+  Voided: "Storniert",
+  "Created At": "Erstellt am",
+} as const;

package/src/components/credit-notes/list/locales/sl.ts

@@ -0,0 +1,33 @@
+export default {
+  Draft: "Osnutek",
+  Number: "Številka",
+  Customer: "Stranka",
+  Date: "Datum",
+  Total: "Skupaj",
+  "Total with Tax": "Skupaj z DDV",
+  Status: "Status",
+  Actions: "Dejanja",
+  "Open menu": "Odpri meni",
+  "Copy credit note ID": "Kopiraj ID dobropisa",
+  "View credit note": "Prikaži dobropis",
+  "Download PDF": "Prenesi PDF",
+  "Downloading...": "Prenašanje...",
+  "Add Payment": "Dodaj plačilo",
+  Duplicate: "Podvoji",
+  "Failed to download PDF": "Prenos PDF ni uspel",
+  "Credit Note": "Dobropis",
+  "No credit notes found": "Ni najdenih dobropisov",
+  "Create Credit Note": "Ustvari dobropis",
+  // Filter translations
+  "Search...": "Iskanje...",
+  Filters: "Filtri",
+  "Date Range": "Datumski razpon",
+  From: "Od",
+  To: "Do",
+  "Clear filters": "Počisti filtre",
+  Paid: "Plačano",
+  Unpaid: "Neplačano",
+  Overdue: "Zapadlo",
+  Voided: "Stornirano",
+  "Created At": "Ustvarjeno",
+} as const;

package/src/components/credit-notes/list/use-credit-note-download.ts

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useEntities } from "@/ui/providers/entities-context";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+// Type for credit note - using any until SDK is regenerated
+type CreditNote = any;
+
+type UseCreditNoteDownloadProps = {
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+} & ComponentTranslationProps;
+
+export function useCreditNoteDownload({
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  ...i18nProps
+}: UseCreditNoteDownloadProps) {
+  const [isDownloading, setIsDownloading] = useState(false);
+  const { activeEntity } = useEntities();
+  const { sdk } = useSDK();
+  const t = createTranslation(i18nProps);
+
+  const downloadPDF = async (creditNote: CreditNote) => {
+    if (!activeEntity?.id || !sdk) {
+      console.error("Missing SDK or active entity for PDF download");
+      onDownloadError?.(t("Failed to download PDF"));
+      return;
+    }
+
+    setIsDownloading(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
+      const blob = await sdk.invoices.renderPdf(creditNote.id, {}, { entity_id: activeEntity.id });
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      const fileName = `${t("Credit Note")} ${creditNote.number}.pdf`;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(downloadUrl);
+
+      onDownloadSuccess?.(fileName);
+    } catch (error) {
+      console.error("Error downloading PDF:", error);
+      onDownloadError?.(t("Failed to download PDF"));
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return {
+    isDownloading,
+    downloadPDF,
+  };
+}

package/src/components/customers/create-customer-form/create-customer-form.tsx

@@ -0,0 +1,134 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { CompanyRegistryResult, CreateCustomerRequest, Customer } from "@spaceinvoices/js-sdk";
+import { useForm } from "react-hook-form";
+import type z from "zod";
+import { CompanyRegistryAutocomplete } from "@/ui/components/company-registry";
+import { FormInput } from "@/ui/components/form";
+import { Form } from "@/ui/components/ui/form";
+import type { CreateCustomerSchema } from "@/ui/generated/schemas";
+import { createCustomerSchema } from "@/ui/generated/schemas";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useCreateCustomer } from "../customers.hooks";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+type CreateCustomerFormProps = {
+  entityId: string;
+  /**
+   * Entity's ISO 3166-1 alpha-2 country code (e.g., "SI", "AT")
+   * Used to enable company registry autocomplete for supported countries
+   */
+  entityCountryCode?: string;
+  onSuccess?: (customer: Customer) => void;
+  onError?: (error: Error) => void;
+  renderSubmitButton?: (props: { isSubmitting: boolean; submit: () => void }) => React.ReactNode;
+} & ComponentTranslationProps;
+
+export default function CreateCustomerForm({
+  entityId,
+  entityCountryCode,
+  onSuccess,
+  onError,
+  renderSubmitButton,
+  ...i18nProps
+}: CreateCustomerFormProps) {
+  const t = createTranslation({
+    ...i18nProps,
+    translations,
+  });
+
+  /**
+   * Handle company selection from registry autocomplete
+   * Auto-fills form fields with company data
+   */
+  const handleCompanySelect = (company: CompanyRegistryResult) => {
+    form.setValue("name", company.name);
+    if (company.address) form.setValue("address", company.address);
+    if (company.post_code) form.setValue("post_code", company.post_code);
+    if (company.city) form.setValue("city", company.city);
+    if (company.tax_number) form.setValue("tax_number", company.tax_number);
+    // Note: country is intentionally not set - keep entity's country or let user choose
+  };
+
+  const form = useForm<CreateCustomerSchema>({
+    resolver: zodResolver(createCustomerSchema),
+    defaultValues: {
+      name: "",
+      address: "",
+      post_code: "",
+      city: "",
+      state: "",
+      country: "",
+      tax_number: "",
+    },
+  });
+
+  const { mutate: createCustomer, isPending } = useCreateCustomer({
+    entityId,
+    onSuccess: (customer, _variables, _context) => {
+      onSuccess?.(customer);
+      form.reset(); // Reset form after successful submission
+    },
+    onError: (error, _variables, _context) => {
+      form.setError("root", {
+        type: "submit",
+        message: t("There was an error creating the customer"),
+      });
+      onError?.(error);
+    },
+  });
+
+  const onSubmit = async (values: z.infer<typeof createCustomerSchema>) => {
+    // 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
+    createCustomer(values as CreateCustomerRequest);
+  };
+
+  const handleSubmitClick = () => {
+    form.handleSubmit(onSubmit)();
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        {/* Company Registry Autocomplete - only shown for supported countries */}
+        {entityCountryCode && (
+          <div className="mb-4 rounded-lg border bg-muted/30 p-4">
+            <CompanyRegistryAutocomplete
+              countryCode={entityCountryCode}
+              onSelect={handleCompanySelect}
+              placeholder={t("Search by company name or tax number")}
+            />
+          </div>
+        )}
+
+        <FormInput control={form.control} name="name" label={t("Name")} placeholder={t("Enter name")} />
+
+        <FormInput control={form.control} name="address" label={t("Address")} placeholder={t("Enter address")} />
+
+        <div className="grid grid-cols-2 gap-4">
+          <FormInput control={form.control} name="post_code" label={t("Post Code")} />
+          <FormInput control={form.control} name="city" label={t("City")} />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <FormInput control={form.control} name="state" label={t("State")} />
+          <FormInput control={form.control} name="country" label={t("Country")} />
+        </div>
+
+        <FormInput control={form.control} name="tax_number" label={t("Tax Number")} />
+
+        {renderSubmitButton?.({
+          isSubmitting: isPending || form.formState.isSubmitting,
+          submit: handleSubmitClick,
+        })}
+      </form>
+    </Form>
+  );
+}