@spaceinvoices/react-ui 0.4.2 → 0.4.3

package/src/components/documents/view/locales/sl.ts

@@ -118,4 +118,25 @@ export default {
   Dutch: "Nizozemščina",
   Polish: "Poljščina",
   Croatian: "Hrvaščina",
+
+  // Linked documents
+  "Linked documents": "Povezani dokumenti",
+  "No linked documents": "Ni povezanih dokumentov",
+  Invoice: "Račun",
+  Estimate: "Predračun",
+  "Credit note": "Dobropis",
+  "Advance invoice": "Avansni račun",
+  "Delivery note": "Dobavnica",
+  "Credit for": "Dobropis za",
+  "Converted from": "Pretvorjeno iz",
+  "Converted to": "Pretvorjeno v",
+  "Has credit": "Ima dobropis",
+  "Advance applied": "Avans uporabljen",
+  "Applied to": "Uporabljen za",
+  "Delivered for": "Dostavljeno za",
+  "Has delivery": "Ima dobavnico",
+  Fulfills: "Izpolnjuje",
+  "Fulfilled by": "Izpolnjeno z",
+  References: "Sklicuje se na",
+  View: "Poglej",
 } as const;

package/src/components/documents/view/use-document-download.ts

@@ -1,10 +1,10 @@
-import type { AdvanceInvoice, CreditNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
+import type { AdvanceInvoice, CreditNote, DeliveryNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
 import { useState } from "react";
 import { useEntities } from "@/ui/providers/entities-context";
 import { useSDK } from "@/ui/providers/sdk-provider";
 
-type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
-type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice";
+type Document = Invoice | Estimate | CreditNote | AdvanceInvoice | DeliveryNote;
+type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
 
 // Document type labels for PDF filename
 const TYPE_LABELS: Record<string, string> = {
@@ -12,6 +12,7 @@ const TYPE_LABELS: Record<string, string> = {
   estimate: "Estimate",
   credit_note: "Credit Note",
   advance_invoice: "Advance Invoice",
+  delivery_note: "Delivery Note",
 };
 
 interface UseDocumentDownloadOptions {
@@ -90,6 +91,7 @@ export function useDocumentDownload({
         advance_invoice: "advance_invoice",
         credit_note: "credit_note",
         estimate: "estimate",
+        delivery_note: "delivery_note",
       };
 
       // e-SLOG download - cast to any since the SDK structure may vary

package/src/components/entities/fina-settings-form/fina-settings-form.tsx

@@ -54,6 +54,11 @@ interface FinaSettingsFormProps extends ComponentTranslationProps {
   initialStep?: FinaStepType;
   onStepChange?: (step: FinaStepType) => void;
   renderSection?: (section: FinaSectionType, content: ReactNode) => ReactNode;
+  /**
+   * Hide user-specific operator section (for embed/API key contexts without user session).
+   * When true, the "Advanced Settings" entity-level operator fields are auto-expanded instead.
+   */
+  hideUserOperatorSection?: boolean;
 }
 
 /**
@@ -75,6 +80,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
   initialStep = "settings",
   onStepChange,
   renderSection,
+  hideUserOperatorSection,
 }) => {
   const [activeStep, setActiveStep] = useState<FinaStepType>(initialStep);
   const [hasInitializedStep, setHasInitializedStep] = useState(false);
@@ -138,7 +144,9 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
   });
 
   // User FINA operator settings (per-user, stored in user.settings)
-  const { data: userFinaSettings, isLoading: userSettingsLoading } = useUserFinaSettings(entity.id);
+  const { data: userFinaSettings, isLoading: userSettingsLoading } = useUserFinaSettings(entity.id, {
+    enabled: !hideUserOperatorSection,
+  });
   const [userOperatorOib, setUserOperatorOib] = useState("");
   const [userOperatorLabel, setUserOperatorLabel] = useState("");
 
@@ -166,7 +174,7 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
   };
 
   // Form state for entity-level settings (API default)
-  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
+  const [isAdvancedOpen, setIsAdvancedOpen] = useState(!!hideUserOperatorSection);
   const [formData, setFormData] = useState({
     enabled: false,
     numbering_sequence: "N" as "N" | "P",
@@ -553,73 +561,77 @@ export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
 
           <Separator />
 
-          {/* Per-user operator settings */}
-          {wrapSection(
-            "user-operator",
-            <div className="space-y-4">
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10">
-                  <User className="h-5 w-5 text-blue-600 dark:text-blue-400" />
-                </div>
-                <div>
-                  <h3 className="font-semibold text-lg">{translate("Your Operator Settings")}</h3>
-                  <p className="text-muted-foreground text-sm">
-                    {translate("Your personal operator info for FINA invoices")}
-                  </p>
-                </div>
-              </div>
+          {/* Per-user operator settings (hidden in embed/API key mode) */}
+          {!hideUserOperatorSection && (
+            <>
+              {wrapSection(
+                "user-operator",
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10">
+                      <User className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg">{translate("Your Operator Settings")}</h3>
+                      <p className="text-muted-foreground text-sm">
+                        {translate("Your personal operator info for FINA invoices")}
+                      </p>
+                    </div>
+                  </div>
 
-              {(!userFinaSettings?.operator_oib || !userFinaSettings?.operator_label) && (
-                <Alert variant="destructive">
-                  <AlertTriangle className="h-4 w-4" />
-                  <AlertDescription>
-                    {translate("Operator OIB and label are required for FINA fiscalization")}
-                  </AlertDescription>
-                </Alert>
-              )}
+                  {(!userFinaSettings?.operator_oib || !userFinaSettings?.operator_label) && (
+                    <Alert variant="destructive">
+                      <AlertTriangle className="h-4 w-4" />
+                      <AlertDescription>
+                        {translate("Operator OIB and label are required for FINA fiscalization")}
+                      </AlertDescription>
+                    </Alert>
+                  )}
 
-              <div className="space-y-4">
-                <div>
-                  <Label className="font-medium text-sm">{translate("Operator OIB")}</Label>
-                  <Input
-                    type="text"
-                    value={userOperatorOib}
-                    onChange={(e) => {
-                      const val = e.target.value.replace(/[^0-9]/g, "");
-                      setUserOperatorOib(val);
-                    }}
-                    placeholder={translate("OIB of the operator (11 digits)")}
-                    className={cn("mt-1", userOperatorOibError && "border-destructive")}
-                    maxLength={11}
-                    disabled={userSettingsLoading}
-                  />
-                  {userOperatorOibError && <p className="mt-1 text-destructive text-xs">{userOperatorOibError}</p>}
-                </div>
-                <div>
-                  <Label className="font-medium text-sm">{translate("Operator Label")}</Label>
-                  <Input
-                    type="text"
-                    value={userOperatorLabel}
-                    onChange={(e) => setUserOperatorLabel(e.target.value)}
-                    placeholder={translate("e.g. Cashier 1")}
-                    className="mt-1"
-                    disabled={userSettingsLoading}
-                  />
-                </div>
+                  <div className="space-y-4">
+                    <div>
+                      <Label className="font-medium text-sm">{translate("Operator OIB")}</Label>
+                      <Input
+                        type="text"
+                        value={userOperatorOib}
+                        onChange={(e) => {
+                          const val = e.target.value.replace(/[^0-9]/g, "");
+                          setUserOperatorOib(val);
+                        }}
+                        placeholder={translate("OIB of the operator (11 digits)")}
+                        className={cn("mt-1", userOperatorOibError && "border-destructive")}
+                        maxLength={11}
+                        disabled={userSettingsLoading}
+                      />
+                      {userOperatorOibError && <p className="mt-1 text-destructive text-xs">{userOperatorOibError}</p>}
+                    </div>
+                    <div>
+                      <Label className="font-medium text-sm">{translate("Operator Label")}</Label>
+                      <Input
+                        type="text"
+                        value={userOperatorLabel}
+                        onChange={(e) => setUserOperatorLabel(e.target.value)}
+                        placeholder={translate("e.g. Cashier 1")}
+                        className="mt-1"
+                        disabled={userSettingsLoading}
+                      />
+                    </div>
 
-                <Button
-                  type="button"
-                  onClick={handleSaveUserSettings}
-                  disabled={isUserSettingsPending || userSettingsLoading || !!userOperatorOibError}
-                  className="cursor-pointer"
-                >
-                  {isUserSettingsPending ? translate("Saving...") : translate("Save Operator Settings")}
-                </Button>
-              </div>
-            </div>,
-          )}
+                    <Button
+                      type="button"
+                      onClick={handleSaveUserSettings}
+                      disabled={isUserSettingsPending || userSettingsLoading || !!userOperatorOibError}
+                      className="cursor-pointer"
+                    >
+                      {isUserSettingsPending ? translate("Saving...") : translate("Save Operator Settings")}
+                    </Button>
+                  </div>
+                </div>,
+              )}
 
-          <Separator />
+              <Separator />
+            </>
+          )}
 
           {/* API Default Operator (advanced/entity-level) */}
           {wrapSection(

package/src/components/entities/fina-settings-form/fina-settings.hooks.ts

@@ -251,8 +251,13 @@ function useCurrentUser(options?: Omit<UseQueryOptions<any>, "queryKey" | "query
  * Hook: Get user FINA settings for a specific entity
  * Extracts FINA settings from user.settings using the fina_<entity_id> key
  */
-export function useUserFinaSettings(entityId: string) {
-  const { data: user, isLoading, error, ...rest } = useCurrentUser();
+export function useUserFinaSettings(entityId: string, options?: { enabled?: boolean }) {
+  const {
+    data: user,
+    isLoading,
+    error,
+    ...rest
+  } = useCurrentUser(options?.enabled === false ? { enabled: false } : undefined);
 
   const userFinaSettings = useMemo<UserFinaSettings | null>(() => {
     if (!user?.settings) return null;

package/src/components/entities/furs-settings-form/furs-settings-form.tsx

@@ -69,6 +69,11 @@ interface FursSettingsFormProps extends ComponentTranslationProps {
    * Optional render prop to wrap each section with help content
    */
   renderSection?: (section: SectionType, content: ReactNode) => ReactNode;
+  /**
+   * Hide user-specific operator section (for embed/API key contexts without user session).
+   * When true, the "Advanced Settings" entity-level operator fields are auto-expanded instead.
+   */
+  hideUserOperatorSection?: boolean;
 }
 
 /**
@@ -92,6 +97,7 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
   initialStep = "settings",
   onStepChange,
   renderSection,
+  hideUserOperatorSection,
 }) => {
   // Step navigation state (can be controlled via props for URL sync)
   const [activeStep, setActiveStep] = useState<StepType>(initialStep);
@@ -117,7 +123,9 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
   // Fetch FURS settings and premises
   const { data: fursSettings, isLoading: settingsLoading } = useFursSettings(entity.id);
   const { data: premises, isLoading: premisesLoading } = useFursPremises(entity.id);
-  const { data: userFursSettings } = useUserFursSettings(entity.id);
+  const { data: userFursSettings } = useUserFursSettings(entity.id, {
+    enabled: !hideUserOperatorSection,
+  });
 
   const { mutate: updateSettings, isPending } = useUpdateFursSettings({
     onSuccess: () => {
@@ -388,6 +396,7 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
             onSuccess={onSuccess}
             onError={onError}
             wrapSection={wrapSection}
+            hideUserOperatorSection={hideUserOperatorSection}
           />
         )}
 

package/src/components/entities/furs-settings-form/furs-settings.hooks.ts

@@ -277,8 +277,13 @@ export function useCurrentUser(options?: Omit<UseQueryOptions<User>, "queryKey"
  * Hook: Get user FURS settings for a specific entity
  * Extracts FURS settings from user.settings using the furs_<entity_id> key
  */
-export function useUserFursSettings(entityId: string) {
-  const { data: user, isLoading, error, ...rest } = useCurrentUser();
+export function useUserFursSettings(entityId: string, options?: { enabled?: boolean }) {
+  const {
+    data: user,
+    isLoading,
+    error,
+    ...rest
+  } = useCurrentUser(options?.enabled === false ? { enabled: false } : undefined);
 
   const userFursSettings = useMemo<UserFursSettings | null>(() => {
     if (!user?.settings) return null;

package/src/components/entities/furs-settings-form/sections/general-settings-section.tsx

@@ -20,6 +20,7 @@ interface GeneralSettingsSectionProps {
   onSuccess?: () => void;
   onError?: (error: unknown) => void;
   wrapSection?: (section: SectionType, content: ReactNode) => ReactNode;
+  hideUserOperatorSection?: boolean;
 }
 
 export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
@@ -29,9 +30,10 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
   onSuccess,
   onError,
   wrapSection,
+  hideUserOperatorSection,
 }) => {
   const wrap = (section: SectionType, content: ReactNode) => (wrapSection ? wrapSection(section, content) : content);
-  const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
+  const [isAdvancedOpen, setIsAdvancedOpen] = useState(!!hideUserOperatorSection);
 
   // Entity info (local state for form)
   const [entityTaxNumber, setEntityTaxNumber] = useState("");
@@ -65,7 +67,9 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
   };
 
   // User operator settings (local state for form)
-  const { data: userFursSettings, isLoading: userSettingsLoading } = useUserFursSettings(entity.id);
+  const { data: userFursSettings, isLoading: userSettingsLoading } = useUserFursSettings(entity.id, {
+    enabled: !hideUserOperatorSection,
+  });
   const [operatorTaxNumber, setOperatorTaxNumber] = useState("");
   const [operatorLabel, setOperatorLabel] = useState("");
 
@@ -375,8 +379,12 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
     <div className="space-y-6">
       {wrap("entity-info", entityInfoContent)}
       <Separator />
-      {wrap("operator", operatorContent)}
-      <Separator />
+      {!hideUserOperatorSection && (
+        <>
+          {wrap("operator", operatorContent)}
+          <Separator />
+        </>
+      )}
       {wrap("fiscalization", fiscalizationContent)}
       <Separator />
       {wrap("advanced", advancedContent)}

package/src/components/invoices/invoices-furs.hooks.ts

@@ -1,28 +1,43 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useSDK } from "@/ui/providers/sdk-provider";
 
-interface VoidInvoiceParams {
-  invoiceId: string;
+interface VoidDocumentParams {
+  documentId: string;
+  documentType: "invoice" | "credit_note" | "advance_invoice";
   entityId: string;
   reason?: string;
 }
 
 /**
- * Hook to void an invoice
- * Automatically handles FURS technical cancellation for fiscalized invoices
+ * Hook to void a document (invoice, credit note, or advance invoice)
+ * Automatically handles FURS/FINA technical cancellation for fiscalized documents
  */
-export function useVoidInvoice() {
+export function useVoidDocument() {
   const { sdk } = useSDK();
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({ invoiceId, entityId, reason }: VoidInvoiceParams) => {
-      return sdk.invoices.void(invoiceId, { reason: reason || undefined }, { entity_id: entityId });
+    mutationFn: async ({ documentId, documentType, entityId, reason }: VoidDocumentParams) => {
+      const body = { reason: reason || undefined };
+      const opts = { entity_id: entityId };
+
+      switch (documentType) {
+        case "invoice":
+          return sdk.invoices.void(documentId, body, opts);
+        case "credit_note":
+          return sdk.creditNotes.void(documentId, body, opts);
+        case "advance_invoice":
+          return sdk.advanceInvoices.void(documentId, body, opts);
+      }
     },
     onSuccess: (_, variables) => {
-      // Invalidate invoice queries to refresh the data
       queryClient.invalidateQueries({ queryKey: ["invoices"] });
-      queryClient.invalidateQueries({ queryKey: ["documents", "invoice", variables.invoiceId] });
+      queryClient.invalidateQueries({ queryKey: ["credit-notes"] });
+      queryClient.invalidateQueries({ queryKey: ["advance-invoices"] });
+      queryClient.invalidateQueries({ queryKey: ["documents", variables.documentType, variables.documentId] });
     },
   });
 }
+
+/** @deprecated Use useVoidDocument instead */
+export const useVoidInvoice = useVoidDocument;

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

@@ -1,7 +1,7 @@
 import type { Invoice } from "@spaceinvoices/js-sdk";
 
 import { Ban, Copy, Download, Eye, Link2Off, Loader2, Mail, MoreHorizontal, Plus } from "lucide-react";
-import { useState } from "react";
+import { memo, useState } from "react";
 import { Button } from "@/ui/components/ui/button";
 import {
   DropdownMenu,
@@ -31,7 +31,7 @@ type InvoiceListRowActionsProps = {
   isVoiding?: boolean;
 } & ComponentTranslationProps;
 
-export default function InvoiceListRowActions({
+export default memo(function InvoiceListRowActions({
   invoice,
   onView,
   onAddPayment,
@@ -144,4 +144,4 @@ export default function InvoiceListRowActions({
       />
     </>
   );
-}
+});

package/src/components/invoices/list/list-table.tsx

@@ -11,6 +11,7 @@ import type {
   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";
@@ -138,9 +139,19 @@ export default function InvoiceListTable({
         header: t("Number"),
         sortable: true,
         cell: (invoice) => (
-          <Button variant="link" className="cursor-pointer py-0 underline" onClick={() => onRowClick?.(invoice)}>
-            {(invoice as any).is_draft ? t("Draft") : invoice.number}
-          </Button>
+          <div className="flex items-center gap-2">
+            <Button variant="link" className="cursor-pointer py-0 underline" onClick={() => onRowClick?.(invoice)}>
+              {invoice.number}
+            </Button>
+            {(invoice 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>
         ),
       },
       {
@@ -174,6 +185,11 @@ export default function InvoiceListTable({
         align: "right",
         cell: (invoice) => invoice.total_with_tax,
       },
+      {
+        id: "status",
+        header: t("Status"),
+        cell: (invoice) => <InvoiceStatusBadge invoice={invoice} t={t} />,
+      },
       {
         id: "actions",
         header: "",
@@ -231,3 +247,52 @@ export default function InvoiceListTable({
     />
   );
 }
+
+/** Status badge for invoices */
+function InvoiceStatusBadge({ invoice, t }: { invoice: Invoice; t: (key: string) => string }) {
+  if ((invoice as any).voided_at) {
+    return (
+      <Badge variant="outline" className="border-red-500 bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-400">
+        {t("Voided")}
+      </Badge>
+    );
+  }
+  if ((invoice as any).is_draft) {
+    return null;
+  }
+  if (invoice.paid_in_full) {
+    return (
+      <Badge
+        variant="outline"
+        className="border-green-500 bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-400"
+      >
+        {t("Paid")}
+      </Badge>
+    );
+  }
+  if (invoice.date_due && new Date(invoice.date_due) < new Date()) {
+    return (
+      <Badge
+        variant="outline"
+        className="border-orange-500 bg-orange-50 text-orange-700 dark:bg-orange-950 dark:text-orange-400"
+      >
+        {t("Overdue")}
+      </Badge>
+    );
+  }
+  if (invoice.total_paid > 0) {
+    return (
+      <Badge
+        variant="outline"
+        className="border-yellow-500 bg-yellow-50 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-400"
+      >
+        {t("Partially Paid")}
+      </Badge>
+    );
+  }
+  return (
+    <Badge variant="outline" className="border-gray-500 bg-gray-50 text-gray-700 dark:bg-gray-800 dark:text-gray-400">
+      {t("Unpaid")}
+    </Badge>
+  );
+}

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

@@ -43,4 +43,5 @@ export default {
   "Export PDFs": "PDFs exportieren",
   "Deselect all": "Auswahl aufheben",
   Void: "Stornieren",
+  "Partially Paid": "Teilweise bezahlt",
 } as const;

package/src/components/invoices/list/locales/en.ts

@@ -9,4 +9,5 @@ export default {
   "Export PDFs": "Export PDFs",
   "Deselect all": "Deselect all",
   Void: "Void",
+  "Partially Paid": "Partially Paid",
 } as const;

package/src/components/invoices/list/locales/es.ts

@@ -43,4 +43,5 @@ export default {
   "Export PDFs": "Exportar PDFs",
   "Deselect all": "Deseleccionar todo",
   Void: "Anular",
+  "Partially Paid": "Parcialmente pagado",
 } as const;

package/src/components/invoices/list/locales/fr.ts

@@ -43,4 +43,5 @@ export default {
   "Export PDFs": "Exporter les PDF",
   "Deselect all": "Tout désélectionner",
   Void: "Annuler",
+  "Partially Paid": "Partiellement payé",
 } as const;

package/src/components/invoices/list/locales/hr.ts

@@ -43,4 +43,5 @@ export default {
   "Export PDFs": "Izvezi PDF-ove",
   "Deselect all": "Poništi odabir",
   Void: "Storniraj",
+  "Partially Paid": "Djelomično plaćeno",
 } as const;

package/src/components/invoices/list/locales/it.ts

@@ -43,4 +43,5 @@ export default {
   "Export PDFs": "Esporta PDF",
   "Deselect all": "Deseleziona tutto",
   Void: "Annulla",
+  "Partially Paid": "Parzialmente pagato",
 } as const;

package/src/components/invoices/list/locales/nl.ts

@@ -43,4 +43,5 @@ export default {
   "Export PDFs": "PDFs exporteren",
   "Deselect all": "Alles deselecteren",
   Void: "Nietig verklaren",
+  "Partially Paid": "Gedeeltelijk betaald",
 } as const;

package/src/components/invoices/list/locales/pl.ts

@@ -43,4 +43,5 @@ export default {
   "Export PDFs": "Eksportuj PDF-y",
   "Deselect all": "Odznacz wszystko",
   Void: "Anuluj",
+  "Partially Paid": "Częściowo opłacona",
 } as const;

package/src/components/invoices/list/locales/pt.ts

@@ -43,4 +43,5 @@ export default {
   "Export PDFs": "Exportar PDFs",
   "Deselect all": "Desselecionar tudo",
   Void: "Anular",
+  "Partially Paid": "Parcialmente pago",
 } as const;

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

@@ -43,4 +43,5 @@ export default {
   "Export PDFs": "Izvozi PDF-je",
   "Deselect all": "Počisti izbiro",
   Void: "Storniraj",
+  "Partially Paid": "Delno plačano",
 } as const;

package/src/components/items/item-list-table/item-list-row-actions.tsx

@@ -1,6 +1,7 @@
 import type { Item } from "@spaceinvoices/js-sdk";
 
 import { MoreHorizontal } from "lucide-react";
+import { memo } from "react";
 import { Button } from "@/ui/components/ui/button";
 import {
   DropdownMenu,
@@ -18,7 +19,7 @@ type ItemListRowActionsProps = {
   onView?: (item: Item) => void;
 } & ComponentTranslationProps;
 
-export default function ItemListRowActions({ item, onView, ...i18nProps }: ItemListRowActionsProps) {
+export default memo(function ItemListRowActions({ item, onView, ...i18nProps }: ItemListRowActionsProps) {
   const t = createTranslation(i18nProps);
 
   return (
@@ -41,4 +42,4 @@ export default function ItemListRowActions({ item, onView, ...i18nProps }: ItemL
       </DropdownMenuContent>
     </DropdownMenu>
   );
-}
+});

package/src/components/items/item-list-table/item-list-row.tsx

@@ -1,5 +1,6 @@
 import type { Item } from "@spaceinvoices/js-sdk";
 import { Package } from "lucide-react";
+import { memo } from "react";
 import { TableCell, TableRow } from "@/ui/components/ui/table";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
@@ -12,7 +13,7 @@ type ItemListRowProps = {
   onView?: (item: Item) => void;
 } & ComponentTranslationProps;
 
-export default function ItemListRow({ item, onRowClick, onView, ...i18nProps }: ItemListRowProps) {
+export default memo(function ItemListRow({ item, onRowClick, onView, ...i18nProps }: ItemListRowProps) {
   const t = createTranslation(i18nProps);
 
   return (
@@ -30,4 +31,4 @@ export default function ItemListRow({ item, onRowClick, onView, ...i18nProps }:
       </TableCell>
     </TableRow>
   );
-}
+});