@spaceinvoices/react-ui 0.4.0 → 0.4.2

package/src/components/credit-notes/list/locales/pt.ts

@@ -38,4 +38,7 @@ export default {
   "No results found": "Nenhuma nota de credito encontrada",
   "Try adjusting your search criteria": "Tente ajustar os seus criterios de pesquisa",
   "Clear search": "Limpar pesquisa",
+  selected: "selecionados",
+  "Export PDFs": "Exportar PDFs",
+  "Deselect all": "Desselecionar tudo",
 } as const;

package/src/components/credit-notes/list/locales/sl.ts

@@ -38,4 +38,7 @@ export default {
   "No results found": "Ni najdenih dobropisov",
   "Try adjusting your search criteria": "Poskusite prilagoditi iskalne kriterije",
   "Clear search": "Počisti iskanje",
+  selected: "izbranih",
+  "Export PDFs": "Izvozi PDF-je",
+  "Deselect all": "Počisti izbiro",
 } as const;

package/src/components/customers/create-customer-form/create-customer-form.tsx

@@ -1,7 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { CompanyRegistryResult, CreateCustomerRequest, Customer } from "@spaceinvoices/js-sdk";
 import { useForm } from "react-hook-form";
-import type z from "zod";
 import { CompanyRegistryAutocomplete } from "@/ui/components/company-registry";
 import { FormInput } from "@/ui/components/form";
 import { Form } from "@/ui/components/ui/form";

package/src/components/documents/create/document-details-section.tsx

@@ -39,6 +39,25 @@ type FursInlineProps = {
   isSkipped?: boolean;
 };
 
+type FinaPremise = {
+  id: string;
+  premise_id: string;
+};
+
+type FinaDevice = {
+  id: string;
+  device_id: string;
+};
+
+type FinaInlineProps = {
+  premises: FinaPremise[];
+  devices: FinaDevice[];
+  selectedPremise?: string;
+  selectedDevice?: string;
+  onPremiseChange: (value: string | undefined) => void;
+  onDeviceChange: (value: string | undefined) => void;
+};
+
 type ServiceDateProps = {
   dateType: "single" | "range";
   onDateTypeChange: (type: "single" | "range") => void;
@@ -50,6 +69,7 @@ type DocumentDetailsSectionProps = {
   t: (key: string) => string;
   children?: React.ReactNode; // For document-specific additions (e.g., mark as paid for invoices)
   fursInline?: FursInlineProps; // FURS premise/device inline with number
+  finaInline?: FinaInlineProps; // FINA premise/device inline with number
   serviceDate?: ServiceDateProps; // Service date section (invoice only)
 };
 
@@ -59,6 +79,7 @@ export function DocumentDetailsSection({
   t,
   children,
   fursInline,
+  finaInline,
   serviceDate,
 }: DocumentDetailsSectionProps) {
   // Determine the date field name based on document type
@@ -67,8 +88,9 @@ export function DocumentDetailsSection({
   const dateFieldLabel =
     documentType === "invoice" || documentType === "advance_invoice" ? t("Due Date") : t("Valid Until");
 
-  // Check if FURS inline should show premise/device selects
+  // Check if FURS/FINA inline should show premise/device selects
   const showFursSelects = fursInline && !fursInline.isSkipped;
+  const showFinaSelects = !!finaInline;
 
   return (
     <div className="flex-1 space-y-4">
@@ -125,6 +147,50 @@ export function DocumentDetailsSection({
                   </TooltipContent>
                 </Tooltip>
               </div>
+            ) : showFinaSelects ? (
+              <div className="flex gap-2">
+                <Select
+                  value={finaInline.selectedPremise || ""}
+                  onValueChange={(v) => finaInline.onPremiseChange(v ?? undefined)}
+                >
+                  <SelectTrigger className="w-24">
+                    <SelectValue placeholder={t("Premise")} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {finaInline.premises.map((premise) => (
+                      <SelectItem key={premise.id} value={premise.premise_id}>
+                        {premise.premise_id}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Select
+                  value={finaInline.selectedDevice || ""}
+                  onValueChange={(v) => finaInline.onDeviceChange(v ?? undefined)}
+                  disabled={!finaInline.selectedPremise || finaInline.devices.length === 0}
+                >
+                  <SelectTrigger className="w-24">
+                    <SelectValue placeholder={t("Device")} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {finaInline.devices.map((device) => (
+                      <SelectItem key={device.id} value={device.device_id}>
+                        {device.device_id}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <FormControl>
+                      <Input {...field} disabled className="flex-1" />
+                    </FormControl>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t("Number format can be changed in settings")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
             ) : (
               <Tooltip>
                 <TooltipTrigger asChild>

package/src/components/documents/create/mark-as-paid-section.tsx

@@ -29,6 +29,8 @@ type MarkAsPaidSectionProps = {
   onPaymentTypesChange: (values: string[]) => void;
   /** Translation function */
   t: (key: string) => string;
+  /** Always show payment type selector (e.g. for FINA fiscalization) */
+  alwaysShowPaymentType?: boolean;
 };
 
 export function MarkAsPaidSection({
@@ -37,9 +39,12 @@ export function MarkAsPaidSection({
   paymentTypes,
   onPaymentTypesChange,
   t,
+  alwaysShowPaymentType,
 }: MarkAsPaidSectionProps) {
+  const showPaymentTypes = checked || alwaysShowPaymentType;
+
   return (
-    <div className={cn("flex flex-col gap-4 rounded-md border p-4", checked && "gap-3")}>
+    <div className={cn("flex flex-col gap-4 rounded-md border p-4", showPaymentTypes && "gap-3")}>
       <div className="flex flex-row items-center space-x-3 space-y-0">
         <Checkbox checked={checked} onCheckedChange={(v) => onCheckedChange(v === true)} />
         <div className="flex items-center gap-1 leading-none">
@@ -61,9 +66,13 @@ export function MarkAsPaidSection({
         </div>
       </div>
 
-      {checked && (
+      {showPaymentTypes && (
         <div className="flex flex-col gap-2">
+          {alwaysShowPaymentType && !checked && (
+            <Label className="text-muted-foreground text-xs">{t("Payment Type")}</Label>
+          )}
           {paymentTypes.map((type, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: payment types list uses index key
             <div key={index} className="flex items-center gap-2">
               <Select
                 value={type}

package/src/components/documents/view/document-actions-bar.tsx

@@ -1,5 +1,6 @@
 import type { AdvanceInvoice, CreditNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
 import {
+  Ban,
   Check,
   CheckCircle,
   ChevronDown,
@@ -11,6 +12,7 @@ import {
   Mail,
   Pencil,
   Plus,
+  RefreshCw,
   Share2,
   Trash2,
 } from "lucide-react";
@@ -88,6 +90,14 @@ interface DocumentActionsBarProps extends ComponentTranslationProps {
   onDeleteDraft?: () => void;
   /** Whether draft deletion is in progress */
   isDeletingDraft?: boolean;
+  /** Called when user wants to create a recurring schedule from this document */
+  onCreateRecurring?: () => void;
+  /** Custom label for recurring button (e.g. "Edit Recurring" when one already exists) */
+  recurringLabel?: string;
+  /** Called when user wants to void the document */
+  onVoid?: () => void;
+  /** Whether voiding is in progress */
+  isVoiding?: boolean;
 }
 
 function getApiLocale(uiLanguage: string): string {
@@ -128,6 +138,10 @@ export function DocumentActionsBar({
   isFinalizing,
   onDeleteDraft,
   isDeletingDraft,
+  onCreateRecurring,
+  recurringLabel,
+  onVoid,
+  isVoiding,
   ...i18nProps
 }: DocumentActionsBarProps) {
   const t = createTranslation({ translations, locale: currentLocale, ...i18nProps });
@@ -298,6 +312,14 @@ export function DocumentActionsBar({
         </Button>
       ) : null}
 
+      {/* Recurring */}
+      {onCreateRecurring && (
+        <Button variant="outline" size="sm" onClick={onCreateRecurring} className="cursor-pointer">
+          <RefreshCw className="mr-2 h-4 w-4" />
+          {recurringLabel || t("Recurring")}
+        </Button>
+      )}
+
       {/* Duplicate/Convert */}
       {onDuplicate && (
         <DropdownMenu>
@@ -318,6 +340,14 @@ export function DocumentActionsBar({
         </DropdownMenu>
       )}
 
+      {/* Void */}
+      {!isDraft && onVoid && (
+        <Button variant="destructive" size="sm" onClick={onVoid} disabled={isVoiding} className="cursor-pointer">
+          {isVoiding ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Ban className="mr-2 h-4 w-4" />}
+          {isVoiding ? t("Voiding...") : t("Void")}
+        </Button>
+      )}
+
       {/* Draft Actions */}
       {isDraft && onFinalize && (
         <Button variant="default" size="sm" onClick={onFinalize} disabled={isFinalizing} className="cursor-pointer">

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

@@ -14,6 +14,7 @@ export default {
   "Unshare failed": "Freigabe aufheben fehlgeschlagen",
   "Download failed": "Download fehlgeschlagen",
   "e-SLOG download failed": "e-SLOG Download fehlgeschlagen",
+  Recurring: "Wiederkehrend",
   Duplicate: "Duplizieren",
   "Duplicate invoice": "Rechnung duplizieren",
   "Duplicate estimate": "Angebot duplizieren",
@@ -83,6 +84,10 @@ export default {
   "Delete draft failed": "Entwurf löschen fehlgeschlagen",
   Draft: "Entwurf",
 
+  // Void
+  Void: "Stornieren",
+  "Voiding...": "Stornierung...",
+
   // Activity list
   Activity: "Aktivität",
   "No activity": "Keine Aktivität",

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

@@ -13,6 +13,7 @@ export default {
   "Unshare failed": "Error al dejar de compartir",
   "Download failed": "Error en la descarga",
   "e-SLOG download failed": "Error en la descarga e-SLOG",
+  Recurring: "Recurrente",
   Duplicate: "Duplicar",
   "Duplicate invoice": "Duplicar factura",
   "Duplicate estimate": "Duplicar presupuesto",
@@ -81,6 +82,10 @@ export default {
   "Delete draft failed": "Error al eliminar el borrador",
   Draft: "Borrador",
 
+  // Void
+  Void: "Anular",
+  "Voiding...": "Anulando...",
+
   // Activity list
   Activity: "Actividad",
   "No activity": "Sin actividad",

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

@@ -13,6 +13,7 @@ export default {
   "Unshare failed": "Échec de l'annulation du partage",
   "Download failed": "Échec du téléchargement",
   "e-SLOG download failed": "Échec du téléchargement e-SLOG",
+  Recurring: "Récurrent",
   Duplicate: "Dupliquer",
   "Duplicate invoice": "Dupliquer la facture",
   "Duplicate estimate": "Dupliquer le devis",
@@ -81,6 +82,10 @@ export default {
   "Delete draft failed": "Échec de la suppression du brouillon",
   Draft: "Brouillon",
 
+  // Void
+  Void: "Annuler",
+  "Voiding...": "Annulation...",
+
   // Activity list
   Activity: "Activité",
   "No activity": "Aucune activité",

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

@@ -13,6 +13,7 @@ export default {
   "Unshare failed": "Uklanjanje dijeljenja nije uspjelo",
   "Download failed": "Preuzimanje nije uspjelo",
   "e-SLOG download failed": "Preuzimanje e-SLOG nije uspjelo",
+  Recurring: "Ponavljajuće",
   Duplicate: "Dupliciraj",
   "Duplicate invoice": "Dupliciraj račun",
   "Duplicate estimate": "Dupliciraj ponudu",
@@ -81,6 +82,10 @@ export default {
   "Delete draft failed": "Brisanje nacrta nije uspjelo",
   Draft: "Nacrt",
 
+  // Void
+  Void: "Storniraj",
+  "Voiding...": "Storniranje...",
+
   // Activity list
   Activity: "Aktivnost",
   "No activity": "Nema aktivnosti",

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

@@ -13,6 +13,7 @@ export default {
   "Unshare failed": "Rimozione condivisione fallita",
   "Download failed": "Download fallito",
   "e-SLOG download failed": "Download e-SLOG fallito",
+  Recurring: "Ricorrente",
   Duplicate: "Duplica",
   "Duplicate invoice": "Duplica fattura",
   "Duplicate estimate": "Duplica preventivo",
@@ -81,6 +82,10 @@ export default {
   "Delete draft failed": "Eliminazione bozza fallita",
   Draft: "Bozza",
 
+  // Void
+  Void: "Annulla",
+  "Voiding...": "Annullamento...",
+
   // Activity list
   Activity: "Attività",
   "No activity": "Nessuna attività",

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

@@ -13,6 +13,7 @@ export default {
   "Unshare failed": "Opheffen van delen mislukt",
   "Download failed": "Download mislukt",
   "e-SLOG download failed": "e-SLOG download mislukt",
+  Recurring: "Terugkerend",
   Duplicate: "Dupliceren",
   "Duplicate invoice": "Factuur dupliceren",
   "Duplicate estimate": "Offerte dupliceren",
@@ -82,6 +83,10 @@ export default {
   "Delete draft failed": "Verwijderen van concept mislukt",
   Draft: "Concept",
 
+  // Void
+  Void: "Nietig verklaren",
+  "Voiding...": "Nietig verklaren...",
+
   // Activity list
   Activity: "Activiteit",
   "No activity": "Geen activiteit",

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

@@ -13,6 +13,7 @@ export default {
   "Unshare failed": "Cofnięcie udostępnienia nie powiodło się",
   "Download failed": "Pobieranie nie powiodło się",
   "e-SLOG download failed": "Pobieranie e-SLOG nie powiodło się",
+  Recurring: "Cykliczna",
   Duplicate: "Duplikuj",
   "Duplicate invoice": "Duplikuj fakturę",
   "Duplicate estimate": "Duplikuj kosztorys",
@@ -81,6 +82,10 @@ export default {
   "Delete draft failed": "Usunięcie szkicu nie powiodło się",
   Draft: "Szkic",
 
+  // Void
+  Void: "Anuluj",
+  "Voiding...": "Anulowanie...",
+
   // Activity list
   Activity: "Aktywność",
   "No activity": "Brak aktywności",

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

@@ -13,6 +13,7 @@ export default {
   "Unshare failed": "Falha ao remover partilha",
   "Download failed": "Falha no download",
   "e-SLOG download failed": "Falha no download e-SLOG",
+  Recurring: "Recorrente",
   Duplicate: "Duplicar",
   "Duplicate invoice": "Duplicar fatura",
   "Duplicate estimate": "Duplicar orçamento",
@@ -81,6 +82,10 @@ export default {
   "Delete draft failed": "Falha ao eliminar rascunho",
   Draft: "Rascunho",
 
+  // Void
+  Void: "Anular",
+  "Voiding...": "Anulando...",
+
   // Activity list
   Activity: "Atividade",
   "No activity": "Sem atividade",

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

@@ -13,6 +13,7 @@ export default {
   "Unshare failed": "Odstranitev deljenja ni uspela",
   "Download failed": "Prenos ni uspel",
   "e-SLOG download failed": "Prenos e-SLOG ni uspel",
+  Recurring: "Ponavljajoče",
   Duplicate: "Podvoji",
   "Duplicate invoice": "Podvoji račun",
   "Duplicate estimate": "Podvoji predračun",
@@ -82,6 +83,10 @@ export default {
   "Delete draft failed": "Brisanje osnutka ni uspelo",
   Draft: "Osnutek",
 
+  // Void
+  Void: "Storniraj",
+  "Voiding...": "Storniranje...",
+
   // Activity list
   Activity: "Aktivnost",
   "No activity": "Ni aktivnosti",

package/src/components/entities/create-entity-form.tsx

@@ -47,7 +47,7 @@ export function CreateEntityForm({
       country: "",
       tax_number: "",
       company_number: "",
-      environment,
+      environment: environment as "live" | "sandbox" | undefined,
       ...extraDefaults,
       // defaultName takes priority over extraDefaults.name if provided
       ...(defaultName ? { name: defaultName } : {}),

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

@@ -74,7 +74,6 @@ const entitySettingsFormSchema = patchEntitySchema
   .omit({
     settings: true, // Remove nested settings - we'll flatten them
     metadata: true, // Not used in this form
-    environment: true, // Not editable here
   })
   .extend({
     // Flattened settings fields for easier form handling
@@ -85,8 +84,8 @@ const entitySettingsFormSchema = patchEntitySchema
         message: "Must be a valid hex color (e.g., #5c6ac4)",
       })
       .optional(),
-    has_logo: z.union([z.boolean(), z.null()]).optional(),
-    has_signature: z.union([z.boolean(), z.null()]).optional(),
+    has_logo: z.boolean().nullable().optional(),
+    has_signature: z.boolean().nullable().optional(),
     email: z
       .union([z.string(), z.null()])
       .refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {

package/src/components/entities/entity-settings-form/locales/es.ts

@@ -1,5 +1,7 @@
 export default {
   // Company settings
+  "Tax ID 2": "Tax ID 2",
+  "Secondary tax identification number (optional)": "Secondary tax identification number (optional)",
   "Company Information": "Información de la empresa",
   "Basic information about your company": "Información básica sobre su empresa",
   // Branding settings

package/src/components/entities/entity-settings-form/locales/fr.ts

@@ -1,5 +1,7 @@
 export default {
   // Company settings
+  "Tax ID 2": "Tax ID 2",
+  "Secondary tax identification number (optional)": "Secondary tax identification number (optional)",
   "Company Information": "Informations sur l'entreprise",
   "Basic information about your company": "Informations de base sur votre entreprise",
   // Branding settings

package/src/components/entities/entity-settings-form/locales/hr.ts

@@ -1,5 +1,7 @@
 export default {
   // Company settings
+  "Tax ID 2": "Tax ID 2",
+  "Secondary tax identification number (optional)": "Secondary tax identification number (optional)",
   "Company Information": "Podaci o tvrtki",
   "Basic information about your company": "Osnovni podaci o vašoj tvrtki",
   // Branding settings

package/src/components/entities/entity-settings-form/locales/it.ts

@@ -1,5 +1,7 @@
 export default {
   // Company settings
+  "Tax ID 2": "Tax ID 2",
+  "Secondary tax identification number (optional)": "Secondary tax identification number (optional)",
   "Company Information": "Informazioni aziendali",
   "Basic information about your company": "Informazioni di base sulla tua azienda",
   // Branding settings

package/src/components/entities/entity-settings-form/locales/nl.ts

@@ -1,5 +1,7 @@
 export default {
   // Company settings
+  "Tax ID 2": "Tax ID 2",
+  "Secondary tax identification number (optional)": "Secondary tax identification number (optional)",
   "Company Information": "Bedrijfsinformatie",
   "Basic information about your company": "Basisinformatie over uw bedrijf",
   // Branding settings

package/src/components/entities/entity-settings-form/locales/pl.ts

@@ -1,5 +1,7 @@
 export default {
   // Company settings
+  "Tax ID 2": "Tax ID 2",
+  "Secondary tax identification number (optional)": "Secondary tax identification number (optional)",
   "Company Information": "Informacje o firmie",
   "Basic information about your company": "Podstawowe informacje o Twojej firmie",
   // Branding settings

package/src/components/entities/entity-settings-form/locales/pt.ts

@@ -1,5 +1,7 @@
 export default {
   // Company settings
+  "Tax ID 2": "Tax ID 2",
+  "Secondary tax identification number (optional)": "Secondary tax identification number (optional)",
   "Company Information": "Informações da empresa",
   "Basic information about your company": "Informações básicas sobre a sua empresa",
   // Branding settings

package/src/components/entities/fina-settings-form/fina-operator-required-dialog.tsx

@@ -0,0 +1,109 @@
+import { type FC, useState } from "react";
+import { Button } from "@/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/ui/components/ui/dialog";
+import { Input } from "@/ui/components/ui/input";
+import { useUpdateUserFinaSettings } from "./fina-settings.hooks";
+
+interface FinaOperatorRequiredDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  entityId: string;
+  onSaved: () => void;
+  t: (key: string) => string;
+}
+
+export const FinaOperatorRequiredDialog: FC<FinaOperatorRequiredDialogProps> = ({
+  open,
+  onOpenChange,
+  entityId,
+  onSaved,
+  t,
+}) => {
+  const [operatorOib, setOperatorOib] = useState("");
+  const [operatorLabel, setOperatorLabel] = useState("");
+
+  const { mutate: updateUserSettings, isPending } = useUpdateUserFinaSettings({
+    onSuccess: () => {
+      setOperatorOib("");
+      setOperatorLabel("");
+      onSaved();
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!operatorOib || !operatorLabel) return;
+    updateUserSettings({
+      entityId,
+      data: {
+        operator_oib: operatorOib,
+        operator_label: operatorLabel,
+      },
+    });
+  };
+
+  const oibError = operatorOib !== "" && !/^\d{11}$/.test(operatorOib);
+  const isValid = /^\d{11}$/.test(operatorOib) && operatorLabel.trim() !== "";
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("FINA Operator Settings Required")}</DialogTitle>
+          <DialogDescription>
+            {t(
+              "Your FINA operator information is needed to fiscalize this document. Please enter your operator details.",
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="fina-dialog-operator-oib" className="font-medium text-sm">
+              {t("Operator OIB")}
+            </label>
+            <Input
+              id="fina-dialog-operator-oib"
+              placeholder="12345678901"
+              value={operatorOib}
+              onChange={(e) => setOperatorOib(e.target.value.replace(/[^0-9]/g, ""))}
+              className={`mt-2 h-10${oibError ? "border-destructive" : ""}`}
+              maxLength={11}
+            />
+            {oibError && <p className="mt-1 text-destructive text-xs">{t("OIB must be exactly 11 digits")}</p>}
+          </div>
+
+          <div>
+            <label htmlFor="fina-dialog-operator-label" className="font-medium text-sm">
+              {t("Operator Label")}
+            </label>
+            <Input
+              id="fina-dialog-operator-label"
+              placeholder={t("e.g. Cashier 1")}
+              value={operatorLabel}
+              onChange={(e) => setOperatorLabel(e.target.value)}
+              className="mt-2 h-10"
+            />
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
+              {t("Cancel")}
+            </Button>
+            <Button type="submit" disabled={isPending || !isValid}>
+              {isPending ? t("Saving...") : t("Save & Retry")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};