@spaceinvoices/react-ui 0.1.1

package/src/components/invoices/view/furs-info-display.tsx

@@ -0,0 +1,213 @@
+import type { FursFiscalizationResponse, Invoice } from "@spaceinvoices/js-sdk";
+import { AlertCircle, Check, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
+import { useState } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@/ui/components/ui/alert";
+import { Badge } from "@/ui/components/ui/badge";
+import { Button } from "@/ui/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import de from "../../entities/furs-settings-form/locales/de";
+import en from "../../entities/furs-settings-form/locales/en";
+import sl from "../../entities/furs-settings-form/locales/sl";
+
+const translations = { de, sl, en } as const;
+
+// Type alias for easier use
+type FursData = FursFiscalizationResponse;
+
+interface FursInfoDisplayProps extends ComponentTranslationProps {
+  invoice: Invoice;
+}
+
+/**
+ * FURS Fiscalization Info Display Component
+ *
+ * Shows FURS fiscalization status, ZOI, EOR, QR code, and other related data
+ */
+export function FursInfoDisplay({ invoice, t: translateFn, namespace, locale }: FursInfoDisplayProps) {
+  const [copiedField, setCopiedField] = useState<string | null>(null);
+
+  const t = createTranslation({
+    t: translateFn,
+    namespace,
+    locale,
+    translations,
+  });
+
+  // Cast furs to the proper type (SDK has it as object, but it's actually FursData)
+  const furs = invoice.furs as FursData | undefined;
+
+  // If no FURS data, don't render anything
+  if (!furs) {
+    return null;
+  }
+
+  const copyToClipboard = async (text: string, fieldName: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedField(fieldName);
+      setTimeout(() => setCopiedField(null), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  const getStatusBadge = () => {
+    switch (furs.status) {
+      case "success":
+        return (
+          <Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100">
+            <CheckCircle2 className="mr-1 h-3 w-3" />
+            {t("Fiscalized")}
+          </Badge>
+        );
+      case "pending":
+        return (
+          <Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100">
+            <Clock className="mr-1 h-3 w-3" />
+            {t("Pending")}
+          </Badge>
+        );
+      case "failed":
+        return (
+          <Badge className="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100">
+            <XCircle className="mr-1 h-3 w-3" />
+            {t("Failed")}
+          </Badge>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          {t("FURS Fiscalization")}
+          {getStatusBadge()}
+        </CardTitle>
+        <CardDescription>{t("Slovenian tax authority fiscalization details")}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Error Message */}
+        {furs.status === "failed" && furs.error && (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>{t("Fiscalization Error")}</AlertTitle>
+            <AlertDescription>{furs.error}</AlertDescription>
+          </Alert>
+        )}
+
+        {/* Cancellation Info */}
+        {furs.cancellation_reason && (
+          <Alert>
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>{t("Cancelled")}</AlertTitle>
+            <AlertDescription>{furs.cancellation_reason}</AlertDescription>
+          </Alert>
+        )}
+
+        {/* FURS Data */}
+        {furs.data && (
+          <div className="space-y-3">
+            {/* ZOI Code */}
+            {furs.data.zoi && (
+              <div className="flex items-center justify-between rounded-lg border p-3">
+                <div className="space-y-1">
+                  <p className="font-medium text-sm">{t("ZOI")}</p>
+                  <p className="font-mono text-muted-foreground text-xs">{furs.data.zoi}</p>
+                </div>
+                <Button variant="ghost" size="sm" onClick={() => copyToClipboard(furs.data!.zoi!, "zoi")}>
+                  {copiedField === "zoi" ? <Check className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
+                </Button>
+              </div>
+            )}
+
+            {/* EOR Code */}
+            {furs.data.eor && (
+              <div className="flex items-center justify-between rounded-lg border p-3">
+                <div className="space-y-1">
+                  <p className="font-medium text-sm">{t("EOR")}</p>
+                  <p className="font-mono text-muted-foreground text-xs">{furs.data.eor}</p>
+                </div>
+                <Button variant="ghost" size="sm" onClick={() => copyToClipboard(furs.data!.eor!, "eor")}>
+                  {copiedField === "eor" ? <Check className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
+                </Button>
+              </div>
+            )}
+
+            {/* Cancelled EOR */}
+            {furs.data.cancelled && furs.data.cancelled_eor && (
+              <div className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-950">
+                <div className="space-y-1">
+                  <p className="font-medium text-red-900 text-sm dark:text-red-100">{t("Cancellation EOR")}</p>
+                  <p className="font-mono text-red-700 text-xs dark:text-red-300">{furs.data.cancelled_eor}</p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => copyToClipboard(furs.data!.cancelled_eor!, "cancelled_eor")}
+                >
+                  {copiedField === "cancelled_eor" ? (
+                    <Check className="h-4 w-4 text-green-600" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            )}
+
+            {/* Business Premise & Device */}
+            <div className="grid grid-cols-2 gap-3">
+              {furs.data.business_premise_name && (
+                <div className="space-y-1">
+                  <p className="font-medium text-sm">{t("Business Premise")}</p>
+                  <p className="text-muted-foreground text-sm">{furs.data.business_premise_name}</p>
+                </div>
+              )}
+              {furs.data.electronic_device_name && (
+                <div className="space-y-1">
+                  <p className="font-medium text-sm">{t("Electronic Device")}</p>
+                  <p className="text-muted-foreground text-sm">{furs.data.electronic_device_name}</p>
+                </div>
+              )}
+            </div>
+
+            {/* Invoice Number & Iteration */}
+            {furs.data.invoice_number && (
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-1">
+                  <p className="font-medium text-sm">{t("Invoice Number")}</p>
+                  <p className="text-muted-foreground text-sm">{furs.data.invoice_number}</p>
+                </div>
+                {furs.data.iteration !== undefined && (
+                  <div className="space-y-1">
+                    <p className="font-medium text-sm">{t("Iteration")}</p>
+                    <p className="text-muted-foreground text-sm">{furs.data.iteration}</p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* QR Code */}
+            {furs.data.qr_code && (
+              <div className="flex flex-col items-center gap-2 rounded-lg border p-4">
+                <p className="font-medium text-sm">{t("QR Code")}</p>
+                <img src={`data:image/png;base64,${furs.data.qr_code}`} alt="FURS QR Code" className="h-48 w-48" />
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Fiscalized Timestamp */}
+        {furs.fiscalized_at && (
+          <div className="pt-2 text-muted-foreground text-sm">
+            {t("Fiscalized at")}: {new Date(furs.fiscalized_at).toLocaleString()}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,155 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { CreateItemRequest, Item } from "@spaceinvoices/js-sdk";
+import { Minus, Plus } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { FormInput } from "@/ui/components/form";
+import { Button } from "@/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/ui/components/ui/dropdown-menu";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/components/ui/form";
+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 type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+
+import { useCreateItem } from "../items.hooks";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+type CreateItemFormProps = {
+  entityId: string;
+  onSuccess?: (item: Item) => void;
+  onError?: (error: Error) => void;
+  renderSubmitButton?: (props: { isSubmitting: boolean; submit: () => void }) => React.ReactNode;
+} & ComponentTranslationProps;
+
+export default function CreateItemForm({
+  entityId,
+  onSuccess,
+  onError,
+  renderSubmitButton,
+  ...i18nProps
+}: CreateItemFormProps) {
+  const t = createTranslation({
+    ...i18nProps,
+    translations,
+  });
+
+  const [isGrossPrice, setIsGrossPrice] = useState(false);
+
+  const form = useForm<CreateItemSchema>({
+    resolver: zodResolver(createItemSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      price: 0,
+    },
+  });
+
+  const setPriceMode = (mode: string) => {
+    setIsGrossPrice(mode === "gross");
+  };
+
+  const { mutate: createItem, isPending } = useCreateItem({
+    entityId,
+    onSuccess: (item, _variables, _context) => {
+      onSuccess?.(item);
+      form.reset(); // Reset form after successful submission
+    },
+    onError: (error, _variables, _context) => {
+      form.setError("root", {
+        type: "submit",
+        message: t("There was an error creating the item"),
+      });
+      onError?.(error);
+    },
+  });
+
+  const onSubmit = async (values: CreateItemSchema) => {
+    // Zod validation ensures required fields (name, price) are present before this is called
+    // The type cast is safe because React Hook Form's DeepPartial doesn't reflect runtime validation
+    const { price, ...rest } = values;
+
+    // Transform price based on is_gross_price flag
+    const payload = isGrossPrice ? { ...rest, gross_price: price } : { ...rest, price };
+
+    createItem(payload as CreateItemRequest);
+  };
+
+  const handleSubmitClick = () => {
+    form.handleSubmit(onSubmit)();
+  };
+
+  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="description"
+          label={t("Description")}
+          placeholder={t("Enter description")}
+        />
+
+        <FormField
+          control={form.control}
+          name="price"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>
+                {isGrossPrice ? t("Gross price") : t("Price")} <span className="text-red-500">*</span>
+              </FormLabel>
+              <div className="flex items-center gap-1">
+                <FormControl className="min-w-0 flex-1">
+                  <Input type="number" {...field} onChange={(e) => field.onChange(Number(e.target.value))} />
+                </FormControl>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button type="button" variant="ghost" size="icon" className="h-9 w-9 shrink-0">
+                            {isGrossPrice ? <Minus className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuRadioGroup value={isGrossPrice ? "gross" : "net"} onValueChange={setPriceMode}>
+                            <DropdownMenuRadioItem value="net">{t("Net price")}</DropdownMenuRadioItem>
+                            <DropdownMenuRadioItem value="gross">{t("Gross price")}</DropdownMenuRadioItem>
+                          </DropdownMenuRadioGroup>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {isGrossPrice ? t("Gross price (tax included)") : t("Net price (before tax)")}
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {renderSubmitButton?.({
+          isSubmitting: isPending || form.formState.isSubmitting,
+          submit: handleSubmitClick,
+        })}
+      </form>
+    </Form>
+  );
+}

package/src/components/items/create-item-form/locales/de.ts

@@ -0,0 +1,14 @@
+export default {
+  Name: "Name",
+  "Enter name": "Namen eingeben",
+  Description: "Beschreibung",
+  "Enter description": "Beschreibung eingeben",
+  Unit: "Einheit",
+  Price: "Preis",
+  "There was an error creating the item": "Beim Erstellen des Artikels ist ein Fehler aufgetreten",
+  // Gross price support
+  "Gross price": "Bruttopreis",
+  "Net price": "Nettopreis",
+  "Gross price (tax included)": "Bruttopreis (inkl. MwSt.)",
+  "Net price (before tax)": "Nettopreis (exkl. MwSt.)",
+};

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

@@ -0,0 +1,9 @@
+export default {
+  Name: "Name",
+  "Enter name": "Enter name",
+  Description: "Description",
+  "Enter description": "Enter description",
+  Unit: "Unit",
+  Price: "Price",
+  "There was an error creating the item": "There was an error creating the item",
+};

package/src/components/items/create-item-form/locales/sl.ts

@@ -0,0 +1,14 @@
+export default {
+  Name: "Naziv",
+  "Enter name": "Vnesite naziv",
+  Description: "Opis",
+  "Enter description": "Vnesite opis",
+  Unit: "Enota",
+  Price: "Cena",
+  "There was an error creating the item": "Prišlo je do napake pri ustvarjanju izdelka",
+  // 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)",
+};

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

@@ -0,0 +1,147 @@
+import type { Item } from "@spaceinvoices/js-sdk";
+
+import { Plus } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { Autocomplete } from "@/ui/common/autocomplete";
+import { useDebounce } from "@/ui/hooks/use-debounce";
+
+import { useItemSearch, useRecentItems } from "./items.hooks";
+
+type ItemComboboxProps = {
+  entityId: string;
+  value?: string;
+  onSelect?: (item: Item | null, customName?: string) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+};
+
+/**
+ * Autocomplete for selecting saved catalog items
+ * Shows recent items, allows search, and supports custom names
+ */
+export function ItemCombobox({
+  entityId,
+  value,
+  onSelect,
+  placeholder = "Search or enter item name...",
+  className,
+  disabled,
+}: ItemComboboxProps) {
+  const [search, setSearch] = useState("");
+  const [displayValue, setDisplayValue] = useState("");
+  const debouncedSearch = useDebounce(search, 300);
+
+  // Fetch recent items (non-blocking, cached)
+  const { data: recentData } = useRecentItems(entityId);
+  const recentItems = recentData?.data || [];
+
+  // Fetch search results
+  const { data: searchData, isLoading } = useItemSearch(entityId, debouncedSearch);
+  const searchResults = searchData?.data || [];
+
+  // Use search results if searching, otherwise show recent items
+  const items = useMemo(() => {
+    if (debouncedSearch) {
+      return searchResults;
+    }
+    return recentItems;
+  }, [debouncedSearch, searchResults, recentItems]);
+
+  // Format price for display
+  const formatPrice = (item: Item) => {
+    const price = item.gross_price ?? item.price;
+    if (price === null || price === undefined) return "";
+    return ` - ${price.toFixed(2)}`;
+  };
+
+  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>
+    ),
+  }));
+
+  // Add "Use custom name" option when there's search text
+  if (debouncedSearch?.trim()) {
+    options.unshift({
+      value: `__custom__:${debouncedSearch}`,
+      label: (
+        <span className="flex items-center gap-2">
+          <Plus className="size-4" />
+          Use "{debouncedSearch}"
+        </span>
+      ),
+    });
+  }
+
+  const handleSearch = (value: string) => {
+    setSearch(value);
+    // Clear displayValue when user starts typing
+    if (displayValue && value !== displayValue) {
+      setDisplayValue("");
+    }
+  };
+
+  const handleValueChange = (selectedValue: string) => {
+    // Handle custom name selection
+    if (selectedValue.startsWith("__custom__:")) {
+      const customName = selectedValue.replace("__custom__:", "");
+      onSelect?.(null, customName);
+      setSearch(customName);
+      setDisplayValue(customName);
+      return;
+    }
+
+    // Find selected item
+    const selectedItem =
+      items.find((i) => i.id === selectedValue) ||
+      recentItems.find((i) => i.id === selectedValue) ||
+      searchResults.find((i) => i.id === selectedValue);
+
+    if (selectedItem) {
+      onSelect?.(selectedItem);
+      setSearch(selectedItem.name);
+      setDisplayValue(selectedItem.name);
+    }
+  };
+
+  const handleBlur = () => {
+    // If nothing was selected but there's text, treat as custom name
+    if (!displayValue && search) {
+      handleValueChange(`__custom__:${search}`);
+    }
+  };
+
+  // Reset when value changes externally
+  useEffect(() => {
+    if (!value) {
+      setSearch("");
+      setDisplayValue("");
+    }
+  }, [value]);
+
+  return (
+    <Autocomplete
+      searchValue={search}
+      onSearch={handleSearch}
+      value={value}
+      onValueChange={handleValueChange}
+      onBlur={handleBlur}
+      options={options}
+      placeholder={placeholder}
+      className={className}
+      disabled={disabled}
+      loading={isLoading}
+      emptyText={debouncedSearch ? "No items found" : "Recent items"}
+      displayValue={displayValue}
+    />
+  );
+}

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

@@ -0,0 +1,33 @@
+import { TableHead, TableHeader, TableRow } from "@/ui/components/ui/table";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+
+import { SortableHeader } from "../../table/sortable-header";
+
+type ItemListHeaderProps = {
+  orderBy?: string;
+  onSort?: (order: string | null) => void;
+} & ComponentTranslationProps;
+
+export default function ItemListHeader({ orderBy, onSort, ...i18nProps }: ItemListHeaderProps) {
+  const t = createTranslation(i18nProps);
+
+  return (
+    <TableHeader>
+      <TableRow>
+        <TableHead>
+          <SortableHeader field="name" currentOrder={orderBy} onSort={onSort}>
+            {t("Name")}
+          </SortableHeader>
+        </TableHead>
+        <TableHead>
+          <SortableHeader field="description" currentOrder={orderBy} onSort={onSort}>
+            {t("Description")}
+          </SortableHeader>
+        </TableHead>
+        <TableHead className="text-right">{t("Price")}</TableHead>
+        <TableHead className="w-[42px] text-right" />
+      </TableRow>
+    </TableHeader>
+  );
+}

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

@@ -0,0 +1,48 @@
+import type { Item } from "@spaceinvoices/js-sdk";
+
+import { MoreHorizontal } from "lucide-react";
+import { Button } from "@/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/ui/components/ui/dropdown-menu";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+
+type ItemListRowActionsProps = {
+  item: Item;
+} & ComponentTranslationProps;
+
+export default function ItemListRowActions({ item, ...i18nProps }: ItemListRowActionsProps) {
+  const t = createTranslation(i18nProps);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 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>
+        <DropdownMenuItem className="cursor-pointer" onClick={() => navigator.clipboard.writeText(item.id)}>
+          {t("Copy item ID")}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => {
+            window.location.href = `/app/items/${item.id}`;
+          }}
+        >
+          {t("View item")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,32 @@
+import type { Item } from "@spaceinvoices/js-sdk";
+import { Package } from "lucide-react";
+import { TableCell, TableRow } from "@/ui/components/ui/table";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { Button } from "../../ui/button";
+import ItemListRowActions from "./item-list-row-actions";
+
+type ItemListRowProps = {
+  item: Item;
+  onRowClick?: (item: Item) => void;
+} & ComponentTranslationProps;
+
+export default function ItemListRow({ item, onRowClick, ...i18nProps }: ItemListRowProps) {
+  const t = createTranslation(i18nProps);
+
+  return (
+    <TableRow>
+      <TableCell className="font-medium">
+        <Button variant="link" className="py-0 underline" onClick={() => onRowClick?.(item)}>
+          <Package className="h-4 w-4 flex-shrink-0" />
+          {item.name}
+        </Button>
+      </TableCell>
+      <TableCell>{item.description}</TableCell>
+      <TableCell className="text-right">{item.price}</TableCell>
+      <TableCell className="text-right">
+        <ItemListRowActions item={item} t={t} />
+      </TableCell>
+    </TableRow>
+  );
+}