@spaceinvoices/react-ui 0.1.1

package/src/components/estimates/create/create-estimate-form.tsx

@@ -0,0 +1,384 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { CreateEstimateRequest, Estimate } from "@spaceinvoices/js-sdk";
+import { useQueryClient } from "@tanstack/react-query";
+import { RefreshCw } from "lucide-react";
+import type { ReactNode } from "react";
+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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { createEstimateSchema } 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 type { DocumentTypes } from "../../documents/types";
+import { useCreateEstimate } from "../estimates.hooks";
+import de from "./locales/de";
+import sl from "./locales/sl";
+import { prepareEstimateSubmission } from "./prepare-estimate-submission";
+import { useEstimateCustomerForm } from "./use-estimate-customer-form";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+// Form values: extend schema with local-only fields (number is for display, not sent to API)
+type CreateEstimateFormValues = z.infer<typeof createEstimateSchema> & {
+  number?: string;
+};
+
+/** Preview payload extends request with display-only fields */
+type EstimatePreviewPayload = Partial<CreateEstimateRequest> & { number?: string };
+
+type CreateEstimateFormProps = {
+  type: DocumentTypes;
+  entityId: string;
+  onSuccess?: (data: Estimate) => void;
+  onError?: (error: unknown) => void;
+  onChange?: (data: EstimatePreviewPayload) => void;
+  onAddNewTax?: () => void;
+  /** Callback to update header action (title toggle) */
+  onHeaderActionChange?: (action: ReactNode) => void;
+  /** Initial values for form fields (used for document duplication) */
+  initialValues?: Partial<CreateEstimateRequest>;
+} & ComponentTranslationProps;
+
+export default function CreateEstimateForm({
+  type,
+  entityId,
+  onSuccess,
+  onError,
+  onChange,
+  onAddNewTax,
+  onHeaderActionChange,
+  initialValues,
+  t: translateProp,
+  namespace,
+  locale,
+}: CreateEstimateFormProps) {
+  const t = createTranslation({
+    t: translateProp,
+    namespace,
+    locale,
+    translations,
+  });
+
+  const { activeEntity } = useEntities();
+  const queryClient = useQueryClient();
+
+  // Title type state: "estimate" (default) or "quote"
+  const [titleType, setTitleType] = useState<"estimate" | "quote">((initialValues as any)?.title_type || "estimate");
+
+  // Draft submission state
+  const [isDraftPending, setIsDraftPending] = useState(false);
+
+  // Get default estimate note from entity settings
+  const defaultEstimateNote = (activeEntity?.settings as any)?.default_estimate_note || "";
+
+  // Fetch next estimate number
+  const { data: nextNumberData } = useNextDocumentNumber(entityId, "estimate", {
+    enabled: !!entityId,
+  });
+
+  // Get default payment terms from entity settings
+  const defaultPaymentTerms = (activeEntity?.settings as any)?.default_estimate_payment_terms || "";
+
+  const form = useForm<CreateEstimateFormValues>({
+    resolver: zodResolver(createEstimateSchema) as Resolver<CreateEstimateFormValues>,
+    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 CreateEstimateFormValues["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 ?? defaultEstimateNote,
+      payment_terms: initialValues?.payment_terms ?? defaultPaymentTerms,
+    },
+  });
+
+  // Price modes per item (gross vs net) - collected from component state at submit
+  const onHeaderActionChangeRef = useRef(onHeaderActionChange);
+  onHeaderActionChangeRef.current = onHeaderActionChange;
+
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  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);
+
+  // Update number when fetched
+  useEffect(() => {
+    if (nextNumberData?.number) {
+      form.setValue("number", nextNumberData.number);
+    }
+  }, [nextNumberData?.number, form]);
+
+  // Update default note when entity loads
+  useEffect(() => {
+    const entityDefaultNote = (activeEntity?.settings as any)?.default_estimate_note;
+    if (entityDefaultNote && !form.getValues("note")) {
+      form.setValue("note", entityDefaultNote);
+    }
+  }, [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]);
+
+  // Update header with clickable title toggle
+  useEffect(() => {
+    const callback = onHeaderActionChangeRef.current;
+    if (!callback) return;
+
+    const toggleTitle = () => {
+      setTitleType((prev) => (prev === "estimate" ? "quote" : "estimate"));
+    };
+
+    callback(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={toggleTitle}
+              className="flex cursor-pointer items-center gap-2 font-bold text-2xl hover:text-primary"
+            >
+              {titleType === "estimate" ? t("Create Estimate") : t("Create Quote")}
+              <RefreshCw className="size-4 text-muted-foreground" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            {titleType === "estimate" ? t("Click to switch to Quote") : t("Click to switch to Estimate")}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+  }, [titleType, t]);
+
+  const formValues = useWatch({
+    control: form.control,
+  });
+
+  // Extract customer management logic into a custom hook
+  const {
+    originalCustomer,
+    showCustomerForm,
+    shouldFocusName,
+    selectedCustomerId,
+    initialCustomerName,
+    handleCustomerSelect,
+    handleCustomerClear,
+  } = useEstimateCustomerForm(form as any);
+
+  const { mutate: createEstimate, isPending } = useCreateEstimate({
+    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 submitEstimate = useCallback(
+    (values: CreateEstimateFormValues, isDraft: boolean) => {
+      try {
+        const submission = prepareEstimateSubmission(values, {
+          originalCustomer,
+          priceModes: priceModesRef.current,
+          titleType,
+          isDraft,
+        });
+        createEstimate(submission);
+      } catch (error) {
+        console.error("Estimate submission error:", error);
+        if (onError) {
+          onError(error);
+        }
+      }
+    },
+    [createEstimate, onError, originalCustomer, titleType],
+  );
+
+  // Handle save as draft
+  const handleSaveAsDraft = useCallback(async () => {
+    setIsDraftPending(true);
+    try {
+      const isValid = await form.trigger();
+      if (isValid) {
+        const values = form.getValues();
+        submitEstimate(values, true);
+      }
+    } finally {
+      setIsDraftPending(false);
+    }
+  }, [form, submitEstimate]);
+
+  const secondaryAction = useMemo(
+    () => ({
+      label: t("Save as Draft"),
+      onClick: handleSaveAsDraft,
+      isPending: isDraftPending,
+    }),
+    [t, handleSaveAsDraft, isDraftPending],
+  );
+
+  useFormFooterRegistration({
+    formId: "create-estimate-form",
+    isPending,
+    isDirty: form.formState.isDirty,
+    label: titleType === "estimate" ? t("Create Estimate") : t("Create Quote"),
+    secondaryAction,
+  });
+
+  // Set default payment terms from entity settings when entity data is available
+  useEffect(() => {
+    const entityDefaultPaymentTerms = (activeEntity?.settings as any)?.default_estimate_payment_terms;
+    if (entityDefaultPaymentTerms && !form.getValues("payment_terms")) {
+      form.setValue("payment_terms", entityDefaultPaymentTerms);
+    }
+  }, [activeEntity, form]);
+
+  useEffect(() => {
+    const callback = onChangeRef.current;
+    if (!callback) return;
+
+    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 };
+    });
+
+    const payload: EstimatePreviewPayload = {
+      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,
+      title_type: titleType,
+    };
+    callback(payload);
+  }, [formValues, form, titleType]);
+
+  const onSubmit = (values: CreateEstimateFormValues) => {
+    submitEstimate(values, false);
+  };
+
+  return (
+    <Form {...form}>
+      <form id="create-estimate-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} />
+        </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,
+            date_valid_till: formValues.date_valid_till,
+            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,
+            date_valid_till: formValues.date_valid_till,
+            currency_code: formValues.currency_code,
+            customer: formValues.customer as any,
+          }}
+        />
+      </form>
+    </Form>
+  );
+}

package/src/components/estimates/create/locales/de.ts

@@ -0,0 +1,64 @@
+export default {
+  "Create Estimate": "Angebot erstellen",
+  "Create Quote": "Angebot erstellen",
+  Estimate: "Angebot",
+  Quote: "Angebot",
+  "Click to switch to Quote": "Klicken Sie, um zu Angebot zu wechseln",
+  "Click to switch to Estimate": "Klicken Sie, um zu Angebot zu wechseln",
+  Details: "Details",
+  Number: "Nummer",
+  Date: "Datum",
+  "Due Date": "Fälligkeitsdatum",
+  "Valid Until": "Gültig bis",
+  Recipient: "Empfänger",
+  "Search or create customer...": "Kunde suchen oder erstellen...",
+  Clear: "Löschen",
+  Name: "Name",
+  Address: "Adresse",
+  "Address 2": "Adresse 2",
+  "Post Code": "Postleitzahl",
+  City: "Stadt",
+  State: "Bundesland",
+  Country: "Land",
+  "Tax Number": "Steuernummer",
+  Items: "Positionen",
+  "Add item": "Position hinzufügen",
+  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...",
+  // 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...",
+  // Document item fields
+  Quantity: "Menge",
+  Price: "Preis",
+  Unit: "Einheit",
+  Discount: "Rabatt",
+  Description: "Beschreibung",
+  Save: "Speichern",
+  "Save as Draft": "Als Entwurf speichern",
+  "Pick a date": "Datum auswählen",
+  // 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;

package/src/components/estimates/create/locales/sl.ts

@@ -0,0 +1,63 @@
+export default {
+  "Create Estimate": "Ustvari predračun",
+  "Create Quote": "Ustvari ponudbo",
+  Estimate: "Predračun",
+  Quote: "Ponudba",
+  "Click to switch to Quote": "Kliknite za zamenjavo v Ponudbo",
+  "Click to switch to Estimate": "Kliknite za zamenjavo v Predračun",
+  Details: "Podrobnosti",
+  Number: "Številka",
+  Date: "Datum",
+  "Due Date": "Rok plačila",
+  "Valid Until": "Veljavno do",
+  Recipient: "Prejemnik",
+  "Search or create customer...": "Išči ali ustvari stranko...",
+  Clear: "Počisti",
+  Name: "Ime",
+  Address: "Naslov",
+  "Address 2": "Naslov 2",
+  "Post Code": "Poštna številka",
+  City: "Mesto",
+  State: "Regija",
+  Country: "Država",
+  "Tax Number": "Davčna številka",
+  Items: "Postavke",
+  "Add item": "Dodaj postavko",
+  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...",
+  // 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...",
+  // Document item fields
+  Quantity: "Količina",
+  Price: "Cena",
+  Unit: "Enota",
+  Discount: "Popust",
+  Description: "Opis",
+  Save: "Shrani",
+  "Save as Draft": "Shrani kot osnutek",
+  "Pick a date": "Izberi datum",
+  // 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/estimates/create/prepare-estimate-submission.ts

@@ -0,0 +1,39 @@
+import type { CreateEstimateRequest } from "@spaceinvoices/js-sdk";
+import type { CreateEstimateSchema } from "@/ui/generated/schemas";
+import { prepareDocumentSubmission } from "../../documents/create/prepare-document-submission";
+import type { CustomerData } from "../../documents/create/use-document-customer-form";
+
+/** Map of item index to gross price mode */
+type PriceModesMap = Record<number, boolean>;
+
+type PrepareOptions = {
+  originalCustomer: CustomerData | null;
+  /** Map of item index to gross price mode (collected from component state) */
+  priceModes?: PriceModesMap;
+  /** Title type: "estimate" or "quote" */
+  titleType?: "estimate" | "quote";
+  /** Whether to save as draft (skips numbering) */
+  isDraft?: boolean;
+};
+
+/**
+ * Prepares estimate form data for API submission
+ * Handles customer data transformation (no payment data for estimates)
+ */
+export function prepareEstimateSubmission(
+  values: CreateEstimateSchema,
+  options: PrepareOptions,
+): CreateEstimateRequest {
+  const baseSubmission = prepareDocumentSubmission(values, {
+    originalCustomer: options.originalCustomer,
+    documentType: "estimate",
+    secondaryDate: values.date_valid_till,
+    priceModes: options.priceModes,
+    isDraft: options.isDraft,
+  }) as CreateEstimateRequest;
+
+  return {
+    ...baseSubmission,
+    title_type: options.titleType,
+  };
+}

package/src/components/estimates/create/use-estimate-customer-form.ts

@@ -0,0 +1,5 @@
+/**
+ * @deprecated Use useDocumentCustomerForm from documents/create instead
+ * This re-export exists for backward compatibility
+ */
+export { useDocumentCustomerForm as useEstimateCustomerForm } from "../../documents/create/use-document-customer-form";

package/src/components/estimates/estimates.hooks.ts

@@ -0,0 +1,15 @@
+import type { CreateEstimateRequest, Estimate } from "@spaceinvoices/js-sdk";
+
+import { createResourceHooks } from "@/ui/hooks/create-resource-hooks";
+
+// Define a constant for the estimates cache key
+export const ESTIMATES_CACHE_KEY = "estimates";
+
+// Create estimate-specific hooks using the factory
+const {
+  useCreateResource: useCreateEstimate,
+  useUpdateResource: useUpdateEstimate,
+  useDeleteResource: useDeleteEstimate,
+} = createResourceHooks<Estimate, CreateEstimateRequest>("estimates", ESTIMATES_CACHE_KEY);
+
+export { useCreateEstimate, useUpdateEstimate, useDeleteEstimate };

package/src/components/estimates/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Estimates components - Main exports
+ */
+export { default as CreateEstimateForm } from "./create/create-estimate-form";
+export { ESTIMATES_CACHE_KEY, useCreateEstimate, useDeleteEstimate, useUpdateEstimate } from "./estimates.hooks";
+export { default as EstimateListTable } from "./list/list-table";

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

@@ -0,0 +1,3 @@
+export { default as EstimateListRowActions } from "./list-row-actions";
+export { default as EstimateListTable } from "./list-table";
+export { useEstimateDownload } from "./use-estimate-download";

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

@@ -0,0 +1,103 @@
+import type { Estimate } from "@spaceinvoices/js-sdk";
+
+import { Copy, Download, Eye, Link2Off, Loader2, MoreHorizontal } 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 { useEstimateDownload } from "./use-estimate-download";
+
+type EstimateListRowActionsProps = {
+  estimate: Estimate;
+  onDuplicate?: (estimate: Estimate) => void;
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+  onUnshare?: (estimate: Estimate) => Promise<void>;
+  isUnsharing?: boolean;
+} & ComponentTranslationProps;
+
+export default function EstimateListRowActions({
+  estimate,
+  onDuplicate,
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  onUnshare,
+  isUnsharing,
+  ...i18nProps
+}: EstimateListRowActionsProps) {
+  const t = createTranslation(i18nProps);
+  const { isDownloading, downloadPDF } = useEstimateDownload({
+    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(estimate.id)}>
+            <Copy className="h-4 w-4" />
+            {t("Copy estimate ID")}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            className="cursor-pointer"
+            onClick={() => {
+              // TODO: Use router
+              window.location.href = `/app/estimates/view/${estimate.id}`;
+            }}
+          >
+            <Eye className="h-4 w-4" />
+            {t("View estimate")}
+          </DropdownMenuItem>
+          <DropdownMenuItem className="cursor-pointer" onClick={() => downloadPDF(estimate)} disabled={isDownloading}>
+            <Download className="h-4 w-4" />
+            {isDownloading ? t("Downloading...") : t("Download PDF")}
+          </DropdownMenuItem>
+          {onDuplicate && (
+            <DropdownMenuItem className="cursor-pointer" onClick={() => onDuplicate(estimate)}>
+              <Copy className="h-4 w-4" />
+              {t("Duplicate")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuGroup>
+        {estimate.shareable_id && onUnshare && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                className="cursor-pointer text-destructive focus:text-destructive"
+                onClick={() => onUnshare(estimate)}
+                disabled={isUnsharing}
+              >
+                {isUnsharing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Link2Off className="h-4 w-4" />}
+                {t("Unshare")}
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}