@spaceinvoices/react-ui 0.1.1 → 0.3.0

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

@@ -0,0 +1,196 @@
+import type { Invoice } from "@spaceinvoices/js-sdk";
+import { AlertCircle, Check, CheckCircle2, Clock, Copy, ExternalLink, 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/fina-settings-form/locales/de";
+import en from "../../entities/fina-settings-form/locales/en";
+import sl from "../../entities/fina-settings-form/locales/sl";
+
+const translations = { de, sl, en } as const;
+
+type FinaData = {
+  status?: "success" | "pending" | "failed";
+  error?: string;
+  fiscalized_at?: string;
+  data?: {
+    zki?: string;
+    jir?: string;
+    premise_id?: string;
+    device_id?: string;
+    invoice_number?: string;
+    qr_code_url?: string;
+  };
+};
+
+interface FinaInfoDisplayProps extends ComponentTranslationProps {
+  invoice: Invoice;
+}
+
+export function FinaInfoDisplay({ invoice, t: translateFn, namespace, locale }: FinaInfoDisplayProps) {
+  const [copiedField, setCopiedField] = useState<string | null>(null);
+
+  const t = createTranslation({
+    t: translateFn,
+    namespace,
+    locale,
+    translations,
+  });
+
+  const fina = (invoice as any).fina as FinaData | undefined;
+
+  if (!fina) {
+    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 (fina.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("FINA Fiscalization")}
+          {getStatusBadge()}
+        </CardTitle>
+        <CardDescription>{t("Croatian tax authority fiscalization details")}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Error Message */}
+        {fina.status === "failed" && fina.error && (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>{t("Fiscalization Error")}</AlertTitle>
+            <AlertDescription>{fina.error}</AlertDescription>
+          </Alert>
+        )}
+
+        {/* FINA Data */}
+        {fina.data && (
+          <div className="space-y-3">
+            {/* ZKI Code */}
+            {fina.data.zki && (
+              <div className="flex items-center justify-between rounded-lg border p-3">
+                <div className="space-y-1">
+                  <p className="font-medium text-sm">{t("ZKI")}</p>
+                  <p className="font-mono text-muted-foreground text-xs">{fina.data.zki}</p>
+                </div>
+                <Button variant="ghost" size="sm" onClick={() => copyToClipboard(fina.data!.zki!, "zki")}>
+                  {copiedField === "zki" ? <Check className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
+                </Button>
+              </div>
+            )}
+
+            {/* JIR Code */}
+            {fina.data.jir && (
+              <div className="flex items-center justify-between rounded-lg border p-3">
+                <div className="space-y-1">
+                  <p className="font-medium text-sm">{t("JIR")}</p>
+                  <p className="font-mono text-muted-foreground text-xs">{fina.data.jir}</p>
+                </div>
+                <Button variant="ghost" size="sm" onClick={() => copyToClipboard(fina.data!.jir!, "jir")}>
+                  {copiedField === "jir" ? <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">
+              {fina.data.premise_id && (
+                <div className="space-y-1">
+                  <p className="font-medium text-sm">{t("Business Premise")}</p>
+                  <p className="text-muted-foreground text-sm">{fina.data.premise_id}</p>
+                </div>
+              )}
+              {fina.data.device_id && (
+                <div className="space-y-1">
+                  <p className="font-medium text-sm">{t("Electronic Device")}</p>
+                  <p className="text-muted-foreground text-sm">{fina.data.device_id}</p>
+                </div>
+              )}
+            </div>
+
+            {/* Invoice Number */}
+            {fina.data.invoice_number && (
+              <div className="space-y-1">
+                <p className="font-medium text-sm">{t("Invoice Number")}</p>
+                <p className="text-muted-foreground text-sm">{fina.data.invoice_number}</p>
+              </div>
+            )}
+
+            {/* QR Code URL */}
+            {fina.data.qr_code_url && (
+              <div className="flex items-center justify-between rounded-lg border p-3">
+                <div className="space-y-1">
+                  <p className="font-medium text-sm">{t("QR Code")}</p>
+                  <a
+                    href={fina.data.qr_code_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1 text-primary text-xs hover:underline"
+                  >
+                    {t("QR Code")}
+                    <ExternalLink className="h-3 w-3" />
+                  </a>
+                </div>
+                <Button variant="ghost" size="sm" onClick={() => copyToClipboard(fina.data!.qr_code_url!, "qr_url")}>
+                  {copiedField === "qr_url" ? (
+                    <Check className="h-4 w-4 text-green-600" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Fiscalized Timestamp */}
+        {fina.fiscalized_at && (
+          <div className="pt-2 text-muted-foreground text-sm">
+            {t("Fiscalized at")}: {new Date(fina.fiscalized_at).toLocaleString()}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -22,11 +22,25 @@ import { createTranslation } from "@/ui/lib/translation";
 
 import { useCreateItem } from "../items.hooks";
 import de from "./locales/de";
+import es from "./locales/es";
+import fr from "./locales/fr";
+import hr from "./locales/hr";
+import it from "./locales/it";
+import nl from "./locales/nl";
+import pl from "./locales/pl";
+import pt from "./locales/pt";
 import sl from "./locales/sl";
 
 const translations = {
   sl,
   de,
+  it,
+  fr,
+  es,
+  pt,
+  nl,
+  pl,
+  hr,
 } as const;
 
 type CreateItemFormProps = {

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

@@ -6,4 +6,9 @@ export default {
   Unit: "Unit",
   Price: "Price",
   "There was an error creating the item": "There was an error creating the item",
+  // Gross price support
+  "Gross price": "Gross price",
+  "Net price": "Net price",
+  "Gross price (tax included)": "Gross price (tax included)",
+  "Net price (before tax)": "Net price (before tax)",
 };

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

@@ -0,0 +1,14 @@
+export default {
+  Name: "Nombre",
+  "Enter name": "Introducir nombre",
+  Description: "Descripción",
+  "Enter description": "Introducir descripción",
+  Unit: "Unidad",
+  Price: "Precio",
+  "There was an error creating the item": "Se produjo un error al crear el artículo",
+  // Gross price support
+  "Gross price": "Precio bruto",
+  "Net price": "Precio neto",
+  "Gross price (tax included)": "Precio bruto (IVA incluido)",
+  "Net price (before tax)": "Precio neto (sin IVA)",
+};

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

@@ -0,0 +1,14 @@
+export default {
+  Name: "Nom",
+  "Enter name": "Saisir le nom",
+  Description: "Description",
+  "Enter description": "Saisir la description",
+  Unit: "Unité",
+  Price: "Prix",
+  "There was an error creating the item": "Une erreur est survenue lors de la création de l'article",
+  // Gross price support
+  "Gross price": "Prix brut",
+  "Net price": "Prix net",
+  "Gross price (tax included)": "Prix brut (TTC)",
+  "Net price (before tax)": "Prix net (HT)",
+};

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

@@ -0,0 +1,14 @@
+export default {
+  Name: "Naziv",
+  "Enter name": "Unesite naziv",
+  Description: "Opis",
+  "Enter description": "Unesite opis",
+  Unit: "Jedinica",
+  Price: "Cijena",
+  "There was an error creating the item": "Došlo je do greške pri izradi artikla",
+  // Gross price support
+  "Gross price": "Bruto cijena",
+  "Net price": "Neto cijena",
+  "Gross price (tax included)": "Bruto cijena (s porezom)",
+  "Net price (before tax)": "Neto cijena (bez poreza)",
+};

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

@@ -0,0 +1,14 @@
+export default {
+  Name: "Nome",
+  "Enter name": "Inserisci nome",
+  Description: "Descrizione",
+  "Enter description": "Inserisci descrizione",
+  Unit: "Unità",
+  Price: "Prezzo",
+  "There was an error creating the item": "Si è verificato un errore durante la creazione dell'articolo",
+  // Gross price support
+  "Gross price": "Prezzo lordo",
+  "Net price": "Prezzo netto",
+  "Gross price (tax included)": "Prezzo lordo (IVA inclusa)",
+  "Net price (before tax)": "Prezzo netto (IVA esclusa)",
+};

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

@@ -0,0 +1,14 @@
+export default {
+  Name: "Naam",
+  "Enter name": "Naam invoeren",
+  Description: "Beschrijving",
+  "Enter description": "Beschrijving invoeren",
+  Unit: "Eenheid",
+  Price: "Prijs",
+  "There was an error creating the item": "Er is een fout opgetreden bij het aanmaken van het artikel",
+  // Gross price support
+  "Gross price": "Brutoprijs",
+  "Net price": "Nettoprijs",
+  "Gross price (tax included)": "Brutoprijs (incl. BTW)",
+  "Net price (before tax)": "Nettoprijs (excl. BTW)",
+};

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

@@ -0,0 +1,14 @@
+export default {
+  Name: "Nazwa",
+  "Enter name": "Wprowadź nazwę",
+  Description: "Opis",
+  "Enter description": "Wprowadź opis",
+  Unit: "Jednostka",
+  Price: "Cena",
+  "There was an error creating the item": "Wystąpił błąd podczas tworzenia pozycji",
+  // Gross price support
+  "Gross price": "Cena brutto",
+  "Net price": "Cena netto",
+  "Gross price (tax included)": "Cena brutto (z VAT)",
+  "Net price (before tax)": "Cena netto (bez VAT)",
+};

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

@@ -0,0 +1,14 @@
+export default {
+  Name: "Nome",
+  "Enter name": "Introduzir nome",
+  Description: "Descrição",
+  "Enter description": "Introduzir descrição",
+  Unit: "Unidade",
+  Price: "Preço",
+  "There was an error creating the item": "Ocorreu um erro ao criar o artigo",
+  // Gross price support
+  "Gross price": "Preço bruto",
+  "Net price": "Preço líquido",
+  "Gross price (tax included)": "Preço bruto (com IVA)",
+  "Net price (before tax)": "Preço líquido (sem IVA)",
+};

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

@@ -0,0 +1,170 @@
+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 { useUpdateItem } from "../items.hooks";
+import de from "./locales/de";
+import es from "./locales/es";
+import fr from "./locales/fr";
+import hr from "./locales/hr";
+import it from "./locales/it";
+import nl from "./locales/nl";
+import pl from "./locales/pl";
+import pt from "./locales/pt";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+  it,
+  fr,
+  es,
+  pt,
+  nl,
+  pl,
+  hr,
+} as const;
+
+type EditItemFormProps = {
+  entityId: string;
+  item: Item;
+  onSuccess?: (item: Item) => void;
+  onError?: (error: Error) => void;
+  renderSubmitButton?: (props: { isSubmitting: boolean; submit: () => void }) => React.ReactNode;
+} & ComponentTranslationProps;
+
+export default function EditItemForm({
+  entityId,
+  item,
+  onSuccess,
+  onError,
+  renderSubmitButton,
+  ...i18nProps
+}: EditItemFormProps) {
+  const t = createTranslation({
+    ...i18nProps,
+    translations,
+  });
+
+  const [isGrossPrice, setIsGrossPrice] = useState(item.gross_price != null);
+
+  const form = useForm<CreateItemSchema>({
+    resolver: zodResolver(createItemSchema),
+    defaultValues: {
+      name: item.name ?? "",
+      description: item.description ?? "",
+      price: isGrossPrice ? (item.gross_price ?? 0) : item.price,
+    },
+  });
+
+  const setPriceMode = (mode: string) => {
+    setIsGrossPrice(mode === "gross");
+  };
+
+  const { mutate: updateItem, isPending } = useUpdateItem({
+    entityId,
+    onSuccess: (updatedItem, _variables, _context) => {
+      onSuccess?.(updatedItem);
+    },
+    onError: (error, _variables, _context) => {
+      form.setError("root", {
+        type: "submit",
+        message: t("There was an error updating the item"),
+      });
+      onError?.(error);
+    },
+  });
+
+  const onSubmit = async (values: CreateItemSchema) => {
+    const { price, ...rest } = values;
+
+    const payload = isGrossPrice ? { ...rest, gross_price: price } : { ...rest, price };
+
+    updateItem({
+      id: item.id,
+      data: 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/edit-item-form/locales/de.ts

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

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

@@ -0,0 +1,12 @@
+export default {
+  Name: "Nombre",
+  "Enter name": "Introducir nombre",
+  Description: "Descripción",
+  "Enter description": "Introducir descripción",
+  Price: "Precio",
+  "There was an error updating the item": "Se produjo un error al actualizar el artículo",
+  "Gross price": "Precio bruto",
+  "Net price": "Precio neto",
+  "Gross price (tax included)": "Precio bruto (IVA incluido)",
+  "Net price (before tax)": "Precio neto (sin IVA)",
+};

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

@@ -0,0 +1,12 @@
+export default {
+  Name: "Nom",
+  "Enter name": "Saisir le nom",
+  Description: "Description",
+  "Enter description": "Saisir la description",
+  Price: "Prix",
+  "There was an error updating the item": "Une erreur est survenue lors de la mise à jour de l'article",
+  "Gross price": "Prix brut",
+  "Net price": "Prix net",
+  "Gross price (tax included)": "Prix brut (TTC)",
+  "Net price (before tax)": "Prix net (HT)",
+};

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

@@ -0,0 +1,12 @@
+export default {
+  Name: "Naziv",
+  "Enter name": "Unesite naziv",
+  Description: "Opis",
+  "Enter description": "Unesite opis",
+  Price: "Cijena",
+  "There was an error updating the item": "Došlo je do greške pri ažuriranju artikla",
+  "Gross price": "Bruto cijena",
+  "Net price": "Neto cijena",
+  "Gross price (tax included)": "Bruto cijena (s porezom)",
+  "Net price (before tax)": "Neto cijena (bez poreza)",
+};

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

@@ -0,0 +1,12 @@
+export default {
+  Name: "Nome",
+  "Enter name": "Inserisci nome",
+  Description: "Descrizione",
+  "Enter description": "Inserisci descrizione",
+  Price: "Prezzo",
+  "There was an error updating the item": "Si è verificato un errore durante l'aggiornamento dell'articolo",
+  "Gross price": "Prezzo lordo",
+  "Net price": "Prezzo netto",
+  "Gross price (tax included)": "Prezzo lordo (IVA inclusa)",
+  "Net price (before tax)": "Prezzo netto (IVA esclusa)",
+};

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

@@ -0,0 +1,12 @@
+export default {
+  Name: "Naam",
+  "Enter name": "Naam invoeren",
+  Description: "Beschrijving",
+  "Enter description": "Beschrijving invoeren",
+  Price: "Prijs",
+  "There was an error updating the item": "Er is een fout opgetreden bij het bijwerken van het artikel",
+  "Gross price": "Brutoprijs",
+  "Net price": "Nettoprijs",
+  "Gross price (tax included)": "Brutoprijs (incl. BTW)",
+  "Net price (before tax)": "Nettoprijs (excl. BTW)",
+};

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

@@ -0,0 +1,12 @@
+export default {
+  Name: "Nazwa",
+  "Enter name": "Wprowadź nazwę",
+  Description: "Opis",
+  "Enter description": "Wprowadź opis",
+  Price: "Cena",
+  "There was an error updating the item": "Wystąpił błąd podczas aktualizacji pozycji",
+  "Gross price": "Cena brutto",
+  "Net price": "Cena netto",
+  "Gross price (tax included)": "Cena brutto (z VAT)",
+  "Net price (before tax)": "Cena netto (bez VAT)",
+};

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

@@ -0,0 +1,12 @@
+export default {
+  Name: "Nome",
+  "Enter name": "Introduzir nome",
+  Description: "Descrição",
+  "Enter description": "Introduzir descrição",
+  Price: "Preço",
+  "There was an error updating the item": "Ocorreu um erro ao atualizar o artigo",
+  "Gross price": "Preço bruto",
+  "Net price": "Preço líquido",
+  "Gross price (tax included)": "Preço bruto (com IVA)",
+  "Net price (before tax)": "Preço líquido (sem IVA)",
+};

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

@@ -0,0 +1,12 @@
+export default {
+  Name: "Naziv",
+  "Enter name": "Vnesite naziv",
+  Description: "Opis",
+  "Enter description": "Vnesite opis",
+  Price: "Cena",
+  "There was an error updating the item": "Prišlo je do napake pri posodabljanju izdelka",
+  "Gross price": "Bruto cena",
+  "Net price": "Neto cena",
+  "Gross price (tax included)": "Bruto cena (z davkom)",
+  "Net price (before tax)": "Neto cena (brez davka)",
+};