@spaceinvoices/react-ui 0.1.1

package/src/components/advance-invoices/create/locales/de.ts

@@ -0,0 +1,29 @@
+export default {
+  Save: "Speichern",
+  "Save as Draft": "Als Entwurf speichern",
+  "Create Advance Invoice": "Vorauszahlungsrechnung erstellen",
+  "e-SLOG": "e-SLOG",
+  "Fiscally verify": "Steuerlich bestätigen",
+  "Click to skip e-SLOG validation for this advance invoice":
+    "Klicken, um die e-SLOG-Validierung für diese Vorauszahlungsrechnung zu überspringen",
+  "Click to enable e-SLOG validation": "Klicken, um die e-SLOG-Validierung zu aktivieren",
+  "Click to skip fiscalization for this advance invoice":
+    "Klicken, um die Fiskalisierung für diese Vorauszahlungsrechnung zu überspringen",
+  "Click to enable fiscalization": "Klicken, um die Fiskalisierung zu aktivieren",
+  "Cannot skip fiscalization for cash payments": "Fiskalisierung kann für Barzahlungen nicht übersprungen werden",
+  "e-SLOG Validation Failed": "e-SLOG-Validierung fehlgeschlagen",
+  "The following entity settings need to be updated:":
+    "Die folgenden Entitätseinstellungen müssen aktualisiert werden:",
+  "Reverse charge - tax exempt EU B2B sale": "Umkehrung der Steuerschuldnerschaft - steuerbefreiter EU B2B-Verkauf",
+  "Mark as Paid": "Als bezahlt markieren",
+  Paid: "Bezahlt",
+  "Advance invoice will be marked as fully paid upon creation":
+    "Vorauszahlungsrechnung 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",
+} as const;

package/src/components/advance-invoices/create/locales/sl.ts

@@ -0,0 +1,25 @@
+export default {
+  Save: "Shrani",
+  "Save as Draft": "Shrani kot osnutek",
+  "Create Advance Invoice": "Ustvari avansni račun",
+  "e-SLOG": "e-SLOG",
+  "Fiscally verify": "Davčno potrdi",
+  "Click to skip e-SLOG validation for this advance invoice": "Klikni za preskok e-SLOG validacije za ta avansni račun",
+  "Click to enable e-SLOG validation": "Klikni za vključitev e-SLOG validacije",
+  "Click to skip fiscalization for this advance invoice": "Klikni za preskok davčnega potrjevanja za ta avansni račun",
+  "Click to enable fiscalization": "Klikni za vključitev davčnega potrjevanja",
+  "Cannot skip fiscalization for cash payments": "Za gotovinska plačila ni mogoče preskočiti davčnega potrjevanja",
+  "e-SLOG Validation Failed": "e-SLOG validacija ni uspela",
+  "The following entity settings need to be updated:": "Naslednje nastavitve entitete je treba posodobiti:",
+  "Reverse charge - tax exempt EU B2B sale": "Obrnjeno davčno breme - davčno oproščena EU B2B prodaja",
+  "Mark as Paid": "Označi kot plačano",
+  Paid: "Plačano",
+  "Advance invoice will be marked as fully paid upon creation": "Avansni račun 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",
+} as const;

package/src/components/advance-invoices/create/prepare-advance-invoice-submission.ts

@@ -0,0 +1,74 @@
+import type { CreateAdvanceInvoiceRequest } from "@spaceinvoices/js-sdk";
+import type { CreateAdvanceInvoiceSchema } from "@/ui/generated/schemas";
+import { prepareDocumentSubmission } from "../../documents/create/prepare-document-submission";
+
+type FursData = {
+  business_premise_name?: string;
+  electronic_device_name?: string;
+  skip?: boolean;
+};
+
+type EslogData = {
+  validation_enabled?: boolean;
+};
+
+/** Map of item index to gross price mode */
+type PriceModesMap = Record<number, boolean>;
+
+type PrepareOptions = {
+  originalCustomer: any;
+  wasCustomerFormShown?: boolean;
+  markAsPaid?: boolean;
+  paymentType?: string;
+  /** FURS fiscalization data (for Slovenia) */
+  furs?: FursData;
+  /** e-SLOG validation data (for Slovenia) */
+  eslog?: EslogData;
+  /** Map of item index to gross price mode (collected from component state) */
+  priceModes?: PriceModesMap;
+  /** Whether to save as draft (skips numbering and fiscalization) */
+  isDraft?: boolean;
+};
+
+/**
+ * Prepares advance invoice form data for API submission
+ * Handles customer data transformation, payment data, and FURS fiscalization
+ */
+export function prepareAdvanceInvoiceSubmission(
+  values: CreateAdvanceInvoiceSchema,
+  options: PrepareOptions,
+): CreateAdvanceInvoiceRequest {
+  const payload = prepareDocumentSubmission(values as any, {
+    originalCustomer: options.originalCustomer,
+    wasCustomerFormShown: options.wasCustomerFormShown,
+    markAsPaid: options.markAsPaid,
+    paymentType: options.paymentType,
+    documentType: "advance_invoice",
+    secondaryDate: values.date_due,
+    priceModes: options.priceModes,
+    isDraft: options.isDraft,
+  }) as CreateAdvanceInvoiceRequest;
+
+  // Add FURS data if provided
+  if (options.furs) {
+    if (options.furs.skip) {
+      // Skip fiscalization - only send skip flag
+      (payload as any).furs = { skip: true };
+    } else if (options.furs.business_premise_name && options.furs.electronic_device_name) {
+      // Full FURS fiscalization
+      (payload as any).furs = {
+        business_premise_name: options.furs.business_premise_name,
+        electronic_device_name: options.furs.electronic_device_name,
+      };
+    }
+  }
+
+  // Add e-SLOG data if provided
+  if (options.eslog !== undefined) {
+    (payload as any).eslog = {
+      validation_enabled: options.eslog.validation_enabled,
+    };
+  }
+
+  return payload;
+}

package/src/components/advance-invoices/index.ts

@@ -0,0 +1,5 @@
+export * from "./advance-invoices.hooks";
+export { default as CreateAdvanceInvoiceForm } from "./create/create-advance-invoice-form";
+export { default as AdvanceInvoiceListRowActions } from "./list/list-row-actions";
+export { default as AdvanceInvoiceListTable } from "./list/list-table";
+export { useAdvanceInvoiceDownload } from "./list/use-advance-invoice-download";

package/src/components/advance-invoices/list/index.ts

@@ -0,0 +1,3 @@
+export { default as AdvanceInvoiceListRowActions } from "./list-row-actions";
+export { default as AdvanceInvoiceListTable } from "./list-table";
+export { useAdvanceInvoiceDownload } from "./use-advance-invoice-download";

package/src/components/advance-invoices/list/list-row-actions.tsx

@@ -0,0 +1,119 @@
+import type { AdvanceInvoice } from "@spaceinvoices/js-sdk";
+
+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 { useAdvanceInvoiceDownload } from "./use-advance-invoice-download";
+
+type AdvanceInvoiceListRowActionsProps = {
+  advanceInvoice: AdvanceInvoice;
+  onAddPayment?: (advanceInvoice: AdvanceInvoice) => void;
+  onDuplicate?: (advanceInvoice: AdvanceInvoice) => void;
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+  onUnshare?: (advanceInvoice: AdvanceInvoice) => Promise<void>;
+  isUnsharing?: boolean;
+} & ComponentTranslationProps;
+
+export default function AdvanceInvoiceListRowActions({
+  advanceInvoice,
+  onAddPayment,
+  onDuplicate,
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  onUnshare,
+  isUnsharing,
+  ...i18nProps
+}: AdvanceInvoiceListRowActionsProps) {
+  const t = createTranslation(i18nProps);
+  const { isDownloading, downloadPDF } = useAdvanceInvoiceDownload({
+    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(advanceInvoice.id)}>
+            <Copy className="h-4 w-4" />
+            {t("Copy advance invoice ID")}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            className="cursor-pointer"
+            onClick={() => {
+              window.location.href = `/app/documents/view/${advanceInvoice.id}`;
+            }}
+          >
+            <Eye className="h-4 w-4" />
+            {t("View advance invoice")}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="cursor-pointer"
+            onClick={() => downloadPDF(advanceInvoice)}
+            disabled={isDownloading}
+          >
+            <Download className="h-4 w-4" />
+            {isDownloading ? t("Downloading...") : t("Download PDF")}
+          </DropdownMenuItem>
+          {onDuplicate && (
+            <DropdownMenuItem className="cursor-pointer" onClick={() => onDuplicate(advanceInvoice)}>
+              <Copy className="h-4 w-4" />
+              {t("Duplicate")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuGroup>
+        {!advanceInvoice.paid_in_full && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem className="cursor-pointer" onClick={() => onAddPayment?.(advanceInvoice)}>
+                <Plus className="h-4 w-4" />
+                {t("Add Payment")}
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </>
+        )}
+        {advanceInvoice.shareable_id && onUnshare && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                className="cursor-pointer text-destructive focus:text-destructive"
+                onClick={() => onUnshare(advanceInvoice)}
+                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/advance-invoices/list/list-table.tsx

@@ -0,0 +1,178 @@
+import type { AdvanceInvoice } 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 AdvanceInvoiceListRowActions from "./list-row-actions";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+type AdvanceInvoiceListTableProps = {
+  t?: (key: string) => string;
+  namespace?: string;
+  locale?: string;
+  entityId?: string;
+  onAddPayment?: (advanceInvoice: AdvanceInvoice) => void;
+  onDuplicate?: (advanceInvoice: AdvanceInvoice) => void;
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+} & ListTableProps<AdvanceInvoice>;
+
+export default function AdvanceInvoiceListTable({
+  queryParams,
+  onRowClick,
+  onAddPayment,
+  onDuplicate,
+  onChangeParams,
+  entityId,
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  ...i18nProps
+}: AdvanceInvoiceListTableProps) {
+  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.advanceInvoices.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<AdvanceInvoice>;
+  }, entityId);
+
+  const filterConfig: FilterConfig = useMemo(
+    () => ({
+      dateFields: [
+        { id: "date", label: t("Date") },
+        { id: "date_due", label: t("Date Due") },
+        { id: "created_at", label: t("Created At") },
+      ],
+      statusFilter: true,
+    }),
+    [t],
+  );
+
+  const columns: Column<AdvanceInvoice>[] = useMemo(
+    () => [
+      {
+        id: "number",
+        header: t("Number"),
+        sortable: true,
+        cell: (advanceInvoice) => (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="link"
+              className="cursor-pointer py-0 underline"
+              onClick={() => onRowClick?.(advanceInvoice)}
+            >
+              {advanceInvoice.number}
+            </Button>
+            {(advanceInvoice 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: (advanceInvoice) => advanceInvoice.customer?.name ?? "-",
+      },
+      {
+        id: "date",
+        header: t("Date"),
+        sortable: true,
+        cell: (advanceInvoice) => <FormattedDate date={advanceInvoice.date} />,
+      },
+      {
+        id: "date_due",
+        header: t("Date Due"),
+        sortable: true,
+        cell: (advanceInvoice) => <FormattedDate date={advanceInvoice.date_due} />,
+      },
+      {
+        id: "total",
+        header: t("Total"),
+        sortable: true,
+        align: "right",
+        cell: (advanceInvoice) => advanceInvoice.total,
+      },
+      {
+        id: "total_with_tax",
+        header: t("Total with Tax"),
+        sortable: true,
+        align: "right",
+        cell: (advanceInvoice) => advanceInvoice.total_with_tax,
+      },
+      {
+        id: "actions",
+        header: "",
+        align: "right",
+        cell: (advanceInvoice) => (
+          <AdvanceInvoiceListRowActions
+            advanceInvoice={advanceInvoice}
+            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="advance_invoice"
+      cacheKey="advance-invoices"
+      createNewLink="/app/documents/add/advance_invoice"
+      onFetch={handleFetch}
+      onChangeParams={onChangeParams}
+      entityId={entityId}
+      filterConfig={filterConfig}
+      t={t}
+      locale={i18nProps.locale}
+    />
+  );
+}

package/src/components/advance-invoices/list/locales/de.ts

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

package/src/components/advance-invoices/list/locales/sl.ts

@@ -0,0 +1,32 @@
+export default {
+  Draft: "Osnutek",
+  Number: "Številka",
+  Customer: "Stranka",
+  Date: "Datum",
+  "Date Due": "Datum zapadlosti",
+  Total: "Skupaj",
+  "Total with Tax": "Skupaj z DDV",
+  Actions: "Akcije",
+  "Open menu": "Odpri meni",
+  "Copy advance invoice ID": "Kopiraj ID avansnega računa",
+  "View advance invoice": "Prikaži avansni račun",
+  "Add Payment": "Dodaj plačilo",
+  "Download PDF": "Prenesi PDF",
+  "Downloading...": "Prenašam...",
+  Duplicate: "Podvoji",
+  "Advance Invoice": "Avansni račun",
+  "Failed to download PDF": "Prenos PDF-ja je spodletel",
+  // Filter translations
+  "Search...": "Iskanje...",
+  Filters: "Filtri",
+  "Date Range": "Datumski razpon",
+  From: "Od",
+  To: "Do",
+  "Clear filters": "Počisti filtre",
+  Status: "Status",
+  Paid: "Plačano",
+  Unpaid: "Neplačano",
+  Overdue: "Zapadlo",
+  Voided: "Stornirano",
+  "Created At": "Ustvarjeno",
+} as const;

package/src/components/advance-invoices/list/use-advance-invoice-download.ts

@@ -0,0 +1,63 @@
+import type { AdvanceInvoice } from "@spaceinvoices/js-sdk";
+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 UseAdvanceInvoiceDownloadProps = {
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+} & ComponentTranslationProps;
+
+export function useAdvanceInvoiceDownload({
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  ...i18nProps
+}: UseAdvanceInvoiceDownloadProps) {
+  const [isDownloading, setIsDownloading] = useState(false);
+  const { activeEntity } = useEntities();
+  const { sdk } = useSDK();
+  const t = createTranslation(i18nProps);
+
+  const downloadPDF = async (advanceInvoice: AdvanceInvoice) => {
+    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(advanceInvoice.id, {}, { entity_id: activeEntity.id });
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      const fileName = `${t("Advance Invoice")} ${advanceInvoice.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/button-loader.tsx

@@ -0,0 +1,11 @@
+import { Loader2 } from "lucide-react";
+
+import { cn } from "../lib/utils";
+
+type ButtonLoaderProps = {
+  className?: string;
+};
+
+export default function ButtonLoader({ className }: ButtonLoaderProps) {
+  return <Loader2 className={cn("h-4 w-4 animate-spin", className)} role="status" aria-label="Loading" />;
+}

package/src/components/combobox.tsx

@@ -0,0 +1,96 @@
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/ui/components/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/ui/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/ui/components/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { cn } from "@/ui/lib/utils";
+
+export type ComboboxOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  tooltip?: string;
+};
+
+type ComboboxProps = {
+  options: ComboboxOption[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  emptyText?: string;
+  className?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  onSearch?: (value: string) => void;
+  selectedLabel?: string;
+};
+
+export function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select an option",
+  emptyText = "No results found.",
+  className,
+  disabled,
+  loading,
+  onSearch,
+  selectedLabel,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn("w-full justify-between", className)}
+          disabled={disabled}
+        >
+          {value ? selectedLabel || options.find((option) => option.value === value)?.label : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full min-w-[var(--radix-popover-trigger-width)] p-0">
+        <Command shouldFilter={false}>
+          <CommandInput placeholder={placeholder} onValueChange={onSearch} className="h-9" disabled={disabled} />
+          <CommandEmpty>{loading ? "Loading..." : emptyText}</CommandEmpty>
+          <CommandGroup>
+            {options.map((option) => {
+              const item = (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  disabled={option.disabled}
+                  onSelect={() => {
+                    if (option.disabled) return;
+                    onValueChange?.(option.value);
+                    setOpen(false);
+                  }}
+                  className={cn(option.disabled && "cursor-not-allowed opacity-50")}
+                >
+                  <Check className={cn("mr-2 h-4 w-4", value === option.value ? "opacity-100" : "opacity-0")} />
+                  {option.label}
+                </CommandItem>
+              );
+
+              if (option.disabled && option.tooltip) {
+                return (
+                  <Tooltip key={option.value}>
+                    <TooltipTrigger asChild>{item}</TooltipTrigger>
+                    <TooltipContent>{option.tooltip}</TooltipContent>
+                  </Tooltip>
+                );
+              }
+
+              return item;
+            })}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}