@spaceinvoices/react-ui 0.4.10 → 0.4.12

package/src/components/items/edit-item-form/edit-item-form.tsx

@@ -17,8 +17,10 @@ import { Input } from "@/ui/components/ui/input";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
 import type { CreateItemSchema } from "@/ui/generated/schemas";
 import { createItemSchema } from "@/ui/generated/schemas";
+import { getEntityCountryCapabilities } from "@/ui/lib/country-capabilities";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
+import { useEntities } from "@/ui/providers/entities-context";
 
 import { useUpdateItem } from "../items.hooks";
 import de from "./locales/de";
@@ -63,12 +65,16 @@ export default function EditItemForm({
     ...i18nProps,
     translations,
   });
+  const { activeEntity } = useEntities();
+  const countryCapabilities = getEntityCountryCapabilities(activeEntity);
+  const lockPortugalSavedItemFields = !countryCapabilities.allowSavedItemFullEdit;
 
   const [isGrossPrice, setIsGrossPrice] = useState(item.gross_price != null);
 
   const form = useForm<CreateItemSchema>({
     resolver: zodResolver(createItemSchema),
     defaultValues: {
+      classification: item.classification ?? undefined,
       name: item.name ?? "",
       description: item.description ?? "",
       price: isGrossPrice ? (item.gross_price ?? 0) : item.price,
@@ -111,15 +117,47 @@ export default function EditItemForm({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-        <FormInput control={form.control} name="name" label={t("Name")} placeholder={t("Enter name")} />
+        <FormInput
+          control={form.control}
+          name="name"
+          label={t("Name")}
+          placeholder={t("Enter name")}
+          disabled={lockPortugalSavedItemFields}
+        />
 
         <FormInput
           control={form.control}
           name="description"
           label={t("Description")}
           placeholder={t("Enter description")}
+          disabled={lockPortugalSavedItemFields}
         />
 
+        {countryCapabilities.isPortugal && (
+          <FormField
+            control={form.control}
+            name="classification"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("Classification")}</FormLabel>
+                <FormControl>
+                  <select
+                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background"
+                    value={field.value ?? "product"}
+                    onChange={(event) => field.onChange(event.target.value)}
+                    disabled={lockPortugalSavedItemFields}
+                  >
+                    <option value="product">{t("Product")}</option>
+                    <option value="service">{t("Service")}</option>
+                    <option value="advance">{t("Advance")}</option>
+                  </select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+
         <FormField
           control={form.control}
           name="price"

package/src/components/items/edit-item-form/locales/bg.ts

@@ -0,0 +1,12 @@
+export default {
+  Name: "Име",
+  "Enter name": "Въведете име",
+  Description: "Описание",
+  "Enter description": "Enter description",
+  Price: "Цена",
+  "There was an error updating the item": "There was an error updating the item",
+  "Gross price": "Gross price",
+  "Net price": "Net price",
+  "Gross price (tax included)": "Gross price (tax included)",
+  "Net price (before tax)": "Net price (before tax)",
+} as const;

package/src/components/items/edit-item-form/locales/cs.ts

@@ -0,0 +1,12 @@
+export default {
+  Name: "Jméno",
+  "Enter name": "Zadejte jméno",
+  Description: "Popis",
+  "Enter description": "Enter description",
+  Price: "Cena",
+  "There was an error updating the item": "There was an error updating the item",
+  "Gross price": "Gross price",
+  "Net price": "Net price",
+  "Gross price (tax included)": "Gross price (tax included)",
+  "Net price (before tax)": "Net price (before tax)",
+} as const;

package/src/components/items/edit-item-form/locales/en.ts

@@ -0,0 +1,12 @@
+export default {
+  Name: "Name",
+  "Enter name": "Enter name",
+  Description: "Description",
+  "Enter description": "Enter description",
+  Price: "Price",
+  "There was an error updating the item": "There was an error updating the item",
+  "Gross price": "Gross price",
+  "Net price": "Net price",
+  "Gross price (tax included)": "Gross price (tax included)",
+  "Net price (before tax)": "Net price (before tax)",
+} as const;

package/src/components/items/edit-item-form/locales/et.ts

@@ -0,0 +1,12 @@
+export default {
+  Name: "Nimi",
+  "Enter name": "Sisestage nimi",
+  Description: "Kirjeldus",
+  "Enter description": "Enter description",
+  Price: "Hind",
+  "There was an error updating the item": "There was an error updating the item",
+  "Gross price": "Gross price",
+  "Net price": "Net price",
+  "Gross price (tax included)": "Gross price (tax included)",
+  "Net price (before tax)": "Net price (before tax)",
+} as const;

package/src/components/items/edit-item-form/locales/fi.ts

@@ -0,0 +1,12 @@
+export default {
+  Name: "Nimi",
+  "Enter name": "Kirjoita nimi",
+  Description: "Description",
+  "Enter description": "Enter description",
+  Price: "Price",
+  "There was an error updating the item": "There was an error updating the item",
+  "Gross price": "Gross price",
+  "Net price": "Net price",
+  "Gross price (tax included)": "Gross price (tax included)",
+  "Net price (before tax)": "Net price (before tax)",
+} as const;

package/src/components/items/edit-item-form/locales/is.ts

@@ -0,0 +1,12 @@
+export default {
+  Name: "Nafn",
+  "Enter name": "Sláðu inn nafn",
+  Description: "Lýsing",
+  "Enter description": "Enter description",
+  Price: "Verð",
+  "There was an error updating the item": "There was an error updating the item",
+  "Gross price": "Gross price",
+  "Net price": "Net price",
+  "Gross price (tax included)": "Gross price (tax included)",
+  "Net price (before tax)": "Net price (before tax)",
+} as const;

package/src/components/items/edit-item-form/locales/nb.ts

@@ -0,0 +1,12 @@
+export default {
+  Name: "Navn",
+  "Enter name": "Skriv inn navn",
+  Description: "Beskrivelse",
+  "Enter description": "Enter description",
+  Price: "Pris",
+  "There was an error updating the item": "There was an error updating the item",
+  "Gross price": "Gross price",
+  "Net price": "Net price",
+  "Gross price (tax included)": "Gross price (tax included)",
+  "Net price (before tax)": "Net price (before tax)",
+} as const;

package/src/components/items/edit-item-form/locales/sk.ts

@@ -0,0 +1,12 @@
+export default {
+  Name: "Meno",
+  "Enter name": "Zadajte meno",
+  Description: "Popis",
+  "Enter description": "Enter description",
+  Price: "Cena",
+  "There was an error updating the item": "There was an error updating the item",
+  "Gross price": "Gross price",
+  "Net price": "Net price",
+  "Gross price (tax included)": "Gross price (tax included)",
+  "Net price (before tax)": "Net price (before tax)",
+} as const;

package/src/components/items/edit-item-form/locales/sv.ts

@@ -0,0 +1,12 @@
+export default {
+  Name: "Namn",
+  "Enter name": "Ange namn",
+  Description: "Beskrivning",
+  "Enter description": "Enter description",
+  Price: "Pris",
+  "There was an error updating the item": "There was an error updating the item",
+  "Gross price": "Gross price",
+  "Net price": "Net price",
+  "Gross price (tax included)": "Gross price (tax included)",
+  "Net price (before tax)": "Net price (before tax)",
+} as const;

package/src/components/items/item-combobox.tsx

@@ -5,7 +5,10 @@ import { useEffect, useMemo, useState } from "react";
 
 import { Autocomplete } from "@/ui/common/autocomplete";
 import { useDebounce } from "@/ui/hooks/use-debounce";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
 
+import { autocompleteTranslations } from "../common/autocomplete-locales";
 import { useItemSearch, useRecentItems } from "./items.hooks";
 
 type ItemComboboxProps = {
@@ -13,13 +16,15 @@ type ItemComboboxProps = {
   value?: string;
   onSelect?: (item: Item | null, customName?: string) => void;
   onCommitInlineName?: (value: string) => void;
+  onInlineInputChange?: (value: string) => void;
   commitOnBlurMode?: "create" | "update-inline";
   placeholder?: string;
   className?: string;
   disabled?: boolean;
-  locale?: string;
   inputTestId?: string;
-};
+  inputDataDemo?: string;
+  ariaInvalid?: boolean;
+} & ComponentTranslationProps;
 
 /**
  * Autocomplete for selecting saved catalog items
@@ -30,16 +35,30 @@ export function ItemCombobox({
   value,
   onSelect,
   onCommitInlineName,
+  onInlineInputChange,
   commitOnBlurMode = "create",
   placeholder = "Search or enter item name...",
   className,
   disabled,
-  locale,
+  ariaInvalid = false,
+  locale = "en",
+  translationLocale,
   inputTestId,
+  inputDataDemo,
+  t: translationFn,
+  namespace,
 }: ItemComboboxProps) {
+  const t = createTranslation({
+    t: translationFn,
+    namespace,
+    locale,
+    translationLocale,
+    translations: autocompleteTranslations,
+  });
   const [search, setSearch] = useState("");
   const [displayValue, setDisplayValue] = useState(value || "");
   const debouncedSearch = useDebounce(search, 300);
+  const resolvedPlaceholder = placeholder ? t(placeholder) : placeholder;
 
   // Fetch recent items (non-blocking, cached)
   const { data: recentData } = useRecentItems(entityId);
@@ -64,18 +83,27 @@ export function ItemCombobox({
     return ` - ${new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(price)}`;
   };
 
-  const options = items.map((item) => ({
-    value: item.id,
-    label: (
-      <div className="flex flex-col overflow-hidden">
-        <span className="truncate">{item.name}</span>
-        <span className="truncate text-muted-foreground text-xs">
-          {formatPrice(item)}
-          {item.description && ` · ${item.description}`}
-        </span>
-      </div>
-    ),
-  }));
+  const options = items.map((item) => {
+    const itemIndex = items.findIndex((entry) => entry.id === item.id);
+    return {
+      value: item.id,
+      ...(itemIndex === 0
+        ? {
+            testId: "marketing-demo-item-option-0",
+            dataDemo: "marketing-demo-item-option-0",
+          }
+        : {}),
+      label: (
+        <div className="flex flex-col overflow-hidden">
+          <span className="truncate">{item.name}</span>
+          <span className="truncate text-muted-foreground text-xs">
+            {formatPrice(item)}
+            {item.description && ` · ${item.description}`}
+          </span>
+        </div>
+      ),
+    };
+  });
 
   // Add "Use custom name" option when there's search text
   if (debouncedSearch?.trim()) {
@@ -84,7 +112,7 @@ export function ItemCombobox({
       label: (
         <span className="flex items-center gap-2">
           <Plus className="size-4" />
-          Use "{debouncedSearch}"
+          {t("Use")} "{debouncedSearch}"
         </span>
       ),
     });
@@ -92,6 +120,9 @@ export function ItemCombobox({
 
   const handleSearch = (value: string) => {
     setSearch(value);
+    if (commitOnBlurMode === "update-inline") {
+      onInlineInputChange?.(value);
+    }
     // Clear displayValue when user starts typing
     if (displayValue && value !== displayValue) {
       setDisplayValue("");
@@ -156,14 +187,16 @@ export function ItemCombobox({
       onCommitUnselectedInput={commitCustomName}
       commitUnselectedOnBlur={true}
       options={options}
-      placeholder={placeholder}
+      placeholder={resolvedPlaceholder}
       className={className}
       disabled={disabled}
       loading={isLoading}
-      emptyText={debouncedSearch ? "No items found" : "Recent items"}
+      emptyText={debouncedSearch ? t("No items found") : t("Recent items")}
       displayValue={displayValue}
       inputTestId={inputTestId}
+      inputDataDemo={inputDataDemo}
       committedDisplayValue={value}
+      ariaInvalid={ariaInvalid}
     />
   );
 }

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

@@ -1,14 +1,15 @@
 import type { Item } from "@spaceinvoices/js-sdk";
-
-import { withTableTranslations } from "../../table/locales";
+import { items } from "@spaceinvoices/js-sdk";
+import { Package } from "lucide-react";
+import { useMemo } from "react";
+import { Button } from "@/ui/components/ui/button";
 import { createTranslation } from "@/ui/lib/translation";
-import { useSDK } from "@/ui/providers/sdk-provider";
 import { DataTable } from "../../table/data-table";
 import { useTableFetch } from "../../table/hooks/use-table-fetch";
-import type { ListTableProps, TableQueryParams } from "../../table/types";
+import { withTableTranslations } from "../../table/locales";
+import type { Column, ListTableProps, TableQueryParams } from "../../table/types";
 import { ITEMS_CACHE_KEY } from "../items.hooks";
-import ItemListHeader from "./item-list-header";
-import ItemListRow from "./item-list-row";
+import ItemListRowActions from "./item-list-row-actions";
 import de from "./locales/de";
 import en from "./locales/en";
 import es from "./locales/es";
@@ -52,30 +53,53 @@ export default function ItemListTable({
   ...i18nProps
 }: ItemListTableProps) {
   const t = createTranslation({
-    translations,
-    locale: i18nProps.translationLocale ?? i18nProps.locale,
     ...i18nProps,
+    translations,
   });
-  const { sdk } = useSDK();
-
   const handleFetch = useTableFetch((params: TableQueryParams) => {
-    if (!sdk) throw new Error("SDK not initialized");
-    return sdk.items.list(params as any);
+    return items.list(params as any);
   }, entityId);
 
+  const columns: Column<Item>[] = useMemo(
+    () => [
+      {
+        id: "name",
+        header: t("Name"),
+        sort: true,
+        cell: (item) => (
+          <Button variant="link" className="py-0 underline" onClick={() => onRowClick?.(item)}>
+            <Package className="h-4 w-4 flex-shrink-0" />
+            {item.name}
+          </Button>
+        ),
+      },
+      {
+        id: "description",
+        header: t("Description"),
+        cell: (item) => item.description,
+      },
+      {
+        id: "price",
+        header: t("Price"),
+        align: "right",
+        sort: {
+          defaultDirection: "desc",
+        },
+        cell: (item) => item.price,
+      },
+      {
+        id: "actions",
+        header: "",
+        align: "right",
+        cell: (item) => <ItemListRowActions item={item} onView={onView} t={t} />,
+      },
+    ],
+    [t, onRowClick, onView],
+  );
+
   return (
     <DataTable
-      columns={[
-        { id: "name", header: t("Name") },
-        { id: "description", header: t("Description") },
-        { id: "unit", header: t("Unit") },
-        { id: "price", header: t("Price"), align: "right" },
-        { id: "actions", header: "", align: "right" },
-      ]}
-      renderRow={(item) => (
-        <ItemListRow item={item} key={item.id} onRowClick={(item) => onRowClick?.(item)} onView={onView} t={t} />
-      )}
-      renderHeader={() => <ItemListHeader t={t} />}
+      columns={columns}
       queryParams={queryParams}
       resourceName="item"
       cacheKey={ITEMS_CACHE_KEY}

package/src/components/items/item-list-table/locales/bg.ts

@@ -0,0 +1,16 @@
+export default {
+  Name: "Име",
+  Description: "Описание",
+  Unit: "Unit",
+  Price: "Цена",
+  "Open menu": "Отворете менюто",
+  Actions: "Действия",
+  "Copy item ID": "Copy item ID",
+  "View item": "View item",
+  "Your list is empty": "Your item list is empty",
+  "Get started by creating your first entry": "Get started by creating your first item",
+  "No results found": "No items found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/items/item-list-table/locales/cs.ts

@@ -0,0 +1,16 @@
+export default {
+  Name: "Jméno",
+  Description: "Popis",
+  Unit: "Unit",
+  Price: "Cena",
+  "Open menu": "Otevřít nabídku",
+  Actions: "Akce",
+  "Copy item ID": "Copy item ID",
+  "View item": "View item",
+  "Your list is empty": "Your item list is empty",
+  "Get started by creating your first entry": "Get started by creating your first item",
+  "No results found": "No items found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/items/item-list-table/locales/en.ts

@@ -7,9 +7,10 @@ export default {
   Actions: "Actions",
   "Copy item ID": "Copy item ID",
   "View item": "View item",
-  // Empty state translations
   "Your list is empty": "Your item list is empty",
   "Get started by creating your first entry": "Get started by creating your first item",
-  // No results translations
   "No results found": "No items found",
-};
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/items/item-list-table/locales/et.ts

@@ -0,0 +1,16 @@
+export default {
+  Name: "Nimi",
+  Description: "Kirjeldus",
+  Unit: "Unit",
+  Price: "Hind",
+  "Open menu": "Ava menüü",
+  Actions: "Tegevused",
+  "Copy item ID": "Copy item ID",
+  "View item": "View item",
+  "Your list is empty": "Your item list is empty",
+  "Get started by creating your first entry": "Get started by creating your first item",
+  "No results found": "No items found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/items/item-list-table/locales/fi.ts

@@ -0,0 +1,16 @@
+export default {
+  Name: "Nimi",
+  Description: "Description",
+  Unit: "Unit",
+  Price: "Price",
+  "Open menu": "Avaa valikko",
+  Actions: "Toiminnot",
+  "Copy item ID": "Copy item ID",
+  "View item": "View item",
+  "Your list is empty": "Your item list is empty",
+  "Get started by creating your first entry": "Get started by creating your first item",
+  "No results found": "No items found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/items/item-list-table/locales/is.ts

@@ -0,0 +1,16 @@
+export default {
+  Name: "Nafn",
+  Description: "Lýsing",
+  Unit: "Unit",
+  Price: "Verð",
+  "Open menu": "Opna valmynd",
+  Actions: "Aðgerðir",
+  "Copy item ID": "Copy item ID",
+  "View item": "View item",
+  "Your list is empty": "Your item list is empty",
+  "Get started by creating your first entry": "Get started by creating your first item",
+  "No results found": "No items found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/items/item-list-table/locales/nb.ts

@@ -0,0 +1,16 @@
+export default {
+  Name: "Navn",
+  Description: "Beskrivelse",
+  Unit: "Unit",
+  Price: "Pris",
+  "Open menu": "Åpne menyen",
+  Actions: "Handlinger",
+  "Copy item ID": "Copy item ID",
+  "View item": "View item",
+  "Your list is empty": "Your item list is empty",
+  "Get started by creating your first entry": "Get started by creating your first item",
+  "No results found": "No items found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/items/item-list-table/locales/sk.ts

@@ -0,0 +1,16 @@
+export default {
+  Name: "Meno",
+  Description: "Popis",
+  Unit: "Unit",
+  Price: "Cena",
+  "Open menu": "Otvoriť menu",
+  Actions: "Akcie",
+  "Copy item ID": "Copy item ID",
+  "View item": "View item",
+  "Your list is empty": "Your item list is empty",
+  "Get started by creating your first entry": "Get started by creating your first item",
+  "No results found": "No items found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/items/item-list-table/locales/sv.ts

@@ -0,0 +1,16 @@
+export default {
+  Name: "Namn",
+  Description: "Beskrivning",
+  Unit: "Unit",
+  Price: "Pris",
+  "Open menu": "Öppna menyn",
+  Actions: "Åtgärder",
+  "Copy item ID": "Copy item ID",
+  "View item": "View item",
+  "Your list is empty": "Your item list is empty",
+  "Get started by creating your first entry": "Get started by creating your first item",
+  "No results found": "No items found",
+  "Try adjusting your search criteria": "Try adjusting your search criteria",
+  "Clear search": "Clear search",
+  "Clear all": "Clear all",
+} as const;

package/src/components/items/items.hooks.ts

@@ -1,9 +1,7 @@
-import type { CreateItemRequest, Item } from "@spaceinvoices/js-sdk";
-
+import type { CreateItemRequest, Item, UpdateItemBody } from "@spaceinvoices/js-sdk";
+import { items } from "@spaceinvoices/js-sdk";
 import { useQuery } from "@tanstack/react-query";
-
 import { createResourceHooks } from "@/ui/hooks/create-resource-hooks";
-import { useSDK } from "@/ui/providers/sdk-provider";
 
 // Define a constant for the items cache key
 export const ITEMS_CACHE_KEY = "items";
@@ -15,25 +13,29 @@ const {
   useDeleteResource: useDeleteItem,
   useRestoreResource: useRestoreItem,
   usePermanentDeleteResource: usePermanentDeleteItem,
-} = createResourceHooks<Item, CreateItemRequest>("items", ITEMS_CACHE_KEY, {
-  restoreMethodName: "restoreItem",
-  permanentDeleteMethodName: "permanentDeleteItem",
-});
+} = createResourceHooks<Item, CreateItemRequest, UpdateItemBody>(
+  {
+    create: items.create,
+    update: items.update,
+    delete: items.delete,
+    restore: items.restoreItem,
+    permanentDelete: items.permanentDeleteItem,
+  },
+  ITEMS_CACHE_KEY,
+);
 
-export { useCreateItem, useDeleteItem, useUpdateItem, useRestoreItem, usePermanentDeleteItem };
+export { useCreateItem, useDeleteItem, usePermanentDeleteItem, useRestoreItem, useUpdateItem };
 
 /**
  * Hook to search items by name
  */
 export const useItemSearch = (entityId: string, search: string) => {
-  const { sdk } = useSDK();
-
   return useQuery({
     queryKey: [ITEMS_CACHE_KEY, "search", entityId, search],
     queryFn: async () => {
       if (!search) return { data: [] };
 
-      const response = await sdk.items.list({
+      const response = await items.list({
         entity_id: entityId,
         search,
         limit: 10,
@@ -49,12 +51,10 @@ export const useItemSearch = (entityId: string, search: string) => {
  * Hook to fetch recent items for an entity
  */
 export const useRecentItems = (entityId: string) => {
-  const { sdk } = useSDK();
-
   return useQuery({
     queryKey: [ITEMS_CACHE_KEY, "recent", entityId],
     queryFn: async () => {
-      const response = await sdk.items.list({
+      const response = await items.list({
         entity_id: entityId,
         limit: 5,
         order_by: "-created_at",