@spaceinvoices/react-ui 0.4.11 → 0.4.31

package/src/components/entities/furs-settings-form/sections/furs-internal-act-download-card.tsx

@@ -0,0 +1,111 @@
+import { Download, FileText, Loader2 } from "lucide-react";
+import type { FC } from "react";
+import { Alert, AlertDescription } from "@/ui/components/ui/alert";
+import { Button } from "@/ui/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import { useFursInternalActDownloads } from "../furs-settings.hooks";
+
+interface FursInternalActDownloadCardProps {
+  entityId: string;
+  certificateValid: boolean;
+  hasPremises: boolean;
+  hasPremiseWithDevice: boolean;
+  t: (key: string) => string;
+}
+
+function getDisabledReason({
+  certificateValid,
+  hasPremises,
+  hasPremiseWithDevice,
+  t,
+}: Omit<FursInternalActDownloadCardProps, "entityId">) {
+  if (!certificateValid) {
+    return t("Upload a valid certificate to download the internal act");
+  }
+
+  if (!hasPremises) {
+    return t("Register at least one active business premise to download the internal act");
+  }
+
+  if (!hasPremiseWithDevice) {
+    return t("Register at least one electronic device to download the internal act");
+  }
+
+  return null;
+}
+
+export const FursInternalActDownloadCard: FC<FursInternalActDownloadCardProps> = ({
+  entityId,
+  certificateValid,
+  hasPremises,
+  hasPremiseWithDevice,
+  t,
+}) => {
+  const { downloadFursInternalActPdf, downloadFursInternalActDocx, isDownloadingPdf, isDownloadingDocx } =
+    useFursInternalActDownloads(t);
+
+  const disabledReason = getDisabledReason({
+    certificateValid,
+    hasPremises,
+    hasPremiseWithDevice,
+    t,
+  });
+  const canDownload = disabledReason === null;
+  const isDownloading = isDownloadingPdf || isDownloadingDocx;
+
+  return (
+    <Card data-testid="furs-internal-act-download-card" className="border-dashed bg-muted/20 p-4">
+      <CardHeader className="p-0">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
+            <FileText className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <CardTitle>{t("Internal Act")}</CardTitle>
+            <CardDescription>
+              {t(
+                "Download the internal act in printable PDF or editable DOCX form before enabling FURS fiscalization.",
+              )}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4 p-0">
+        <p className="text-muted-foreground text-sm">
+          {t("The internal act contains your current business premises, devices, and invoice numbering setup.")}
+        </p>
+
+        {disabledReason && (
+          <Alert>
+            <AlertDescription>{disabledReason}</AlertDescription>
+          </Alert>
+        )}
+
+        <div className="flex flex-col gap-3 sm:flex-row">
+          <Button
+            type="button"
+            variant="outline"
+            disabled={!canDownload || isDownloading}
+            onClick={() => downloadFursInternalActPdf(entityId)}
+            data-testid="furs-internal-act-download-pdf"
+          >
+            {isDownloadingPdf ? <Loader2 className="h-4 w-4 animate-spin" /> : <Download className="h-4 w-4" />}
+            {isDownloadingPdf ? t("Preparing PDF...") : t("Download PDF")}
+          </Button>
+
+          <Button
+            type="button"
+            variant="outline"
+            disabled={!canDownload || isDownloading}
+            onClick={() => downloadFursInternalActDocx(entityId)}
+            data-testid="furs-internal-act-download-docx"
+          >
+            {isDownloadingDocx ? <Loader2 className="h-4 w-4 animate-spin" /> : <Download className="h-4 w-4" />}
+            {isDownloadingDocx ? t("Preparing DOCX...") : t("Download DOCX")}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

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

@@ -5,6 +5,7 @@ import type { UseFormReturn } from "react-hook-form";
 import { useUpdateEntity } from "@/ui/components/entities/entities.hooks";
 import { Alert, AlertDescription } from "@/ui/components/ui/alert";
 import { Button } from "@/ui/components/ui/button";
+import { Checkbox } from "@/ui/components/ui/checkbox";
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/ui/components/ui/form";
 import { Input } from "@/ui/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/ui/components/ui/radio-group";
@@ -263,6 +264,32 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
       </div>
 
       <div className="space-y-4">
+        <FormField
+          control={form.control}
+          name="default_skip_fiscalization"
+          render={({ field }) => (
+            <FormItem className="rounded-lg border p-4">
+              <div className="flex items-start gap-3">
+                <FormControl>
+                  <Checkbox
+                    checked={field.value === true}
+                    onCheckedChange={(checked) => field.onChange(checked === true)}
+                  />
+                </FormControl>
+                <div className="space-y-1">
+                  <FormLabel className="font-medium text-sm">{t("Skip Fiscalization by Default")}</FormLabel>
+                  <FormDescription className="text-xs">
+                    {t(
+                      "New invoices and advance invoices start with fiscalization turned off when payment type allows it. Non-bank-transfer payments still force fiscalization back on.",
+                    )}
+                  </FormDescription>
+                </div>
+              </div>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         <FormField
           control={form.control}
           name="numbering_strategy"

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

@@ -3,8 +3,7 @@ import { Building2, Cpu, MapPin, MoreVertical, Truck } from "lucide-react";
 import { type FC, type ReactNode, useState } from "react";
 import type { SectionType } from "../furs-settings-form";
 
-// Extended premise type - SDK type is incomplete, so we extend it locally
-// TODO: Update SDK types when backend OpenAPI spec is fixed
+// Local UI view model extends the SDK type with the response fields this section reads.
 type ExtendedFursBusinessPremise = {
   id: string;
   entity_id: string;
@@ -13,11 +12,11 @@ type ExtendedFursBusinessPremise = {
   real_estate?: {
     cadastral_number?: string; // String in DB, not number
     building_number?: string; // String in DB, not number
-    building_section?: string; // Renamed from building_section_number
+    building_section?: string; // Stored as string in DB/API
     street?: string;
     house_number?: string;
     house_number_additional?: string | null;
-    community?: string; // Added - required by FURS
+    community?: string;
     city?: string;
     postal_code?: string;
   };
@@ -84,6 +83,12 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
   const [selectedPremiseId, setSelectedPremiseId] = useState<string | null>(null);
   const [deviceName, setDeviceName] = useState("");
 
+  const getSuggestedDeviceName = (premiseId: string) => {
+    const premise = premises.find((item) => item.id === premiseId);
+    const nextIndex = (premise?.Devices?.length || 0) + 1;
+    return `E${nextIndex}`;
+  };
+
   const { mutate: closePremise } = useClosePremise({
     onSuccess: () => {
       onSuccess?.();
@@ -121,7 +126,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
 
   const handleAddDevice = (premiseId: string) => {
     setSelectedPremiseId(premiseId);
-    setDeviceName("");
+    setDeviceName(getSuggestedDeviceName(premiseId));
     setAddDeviceDialogOpen(true);
   };
 
@@ -283,16 +288,18 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                           <span className="text-sm">
                             ⚠️ {t("No devices registered. Add at least one device to fiscalize invoices.")}
                           </span>
-                          <Button
-                            size="sm"
-                            variant="outline"
-                            onClick={() => handleAddDevice(premise.id)}
-                            className="cursor-pointer"
-                            data-testid={`furs-add-device-${premise.business_premise_name}`}
-                          >
-                            <Cpu className="mr-2 h-4 w-4" />
-                            {t("Add Electronic Device")}
-                          </Button>
+                          {premise.is_active ? (
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => handleAddDevice(premise.id)}
+                              className="cursor-pointer"
+                              data-testid={`furs-add-device-${premise.business_premise_name}`}
+                            >
+                              <Cpu className="mr-2 h-4 w-4" />
+                              {t("Add Electronic Device")}
+                            </Button>
+                          ) : null}
                         </AlertDescription>
                       </Alert>
                     )}
@@ -322,7 +329,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
           entity={entity}
           type={registerType}
           t={t}
-          existingPremiseNames={premises.map((p) => p.business_premise_name)}
+          premises={premises}
           onSuccess={() => {
             setRegisterDialogOpen(false);
             onSuccess?.();

package/src/components/entities/furs-settings-form/sections/register-premise-dialog.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Entity } from "@spaceinvoices/js-sdk";
-import type { FC } from "react";
+import { type FC, useCallback, useEffect } from "react";
 import type { Resolver } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type { z } from "zod";
@@ -35,13 +35,48 @@ const movablePremiseSchema = registerFursMovablePremiseSchema;
 type RealEstatePremiseForm = z.infer<typeof realEstatePremiseSchema>;
 type MovablePremiseForm = z.infer<typeof movablePremiseSchema>;
 
+type ExistingPremiseSummary = {
+  business_premise_name: string;
+  type?: string;
+};
+
+function getNextSuggestedName(prefix: string, count: number) {
+  return `${prefix}${count + 1}`;
+}
+
+function parseEntityAddress(address?: string | null) {
+  const value = address?.trim();
+  if (!value) {
+    return {
+      street: "",
+      house_number: "",
+      house_number_additional: "",
+    };
+  }
+
+  const match = value.match(/^(.*?)(?:\s+(\d+)([A-Za-z]*))$/);
+  if (!match) {
+    return {
+      street: value,
+      house_number: "",
+      house_number_additional: "",
+    };
+  }
+
+  return {
+    street: match[1]?.trim() || value,
+    house_number: match[2] || "",
+    house_number_additional: match[3] || "",
+  };
+}
+
 interface RegisterPremiseDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   entity: Entity;
   type: "real-estate" | "movable";
   t: (key: string) => string;
-  existingPremiseNames?: string[];
+  premises?: ExistingPremiseSummary[];
   onSuccess?: () => void;
   onError?: (error: unknown) => void;
 }
@@ -52,42 +87,67 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
   entity,
   type,
   t,
-  existingPremiseNames = [],
+  premises = [],
   onSuccess,
   onError,
 }) => {
   const isRealEstate = type === "real-estate";
+  const existingPremiseNames = premises.map((premise) => premise.business_premise_name);
+  const hasRealEstatePremise = premises.some((premise) => premise.type === "real_estate");
 
-  // Real Estate Form
-  const realEstateForm = useForm<RealEstatePremiseForm>({
-    resolver: zodResolver(realEstatePremiseSchema) as Resolver<RealEstatePremiseForm>,
-    defaultValues: {
-      business_premise_name: "",
+  const buildRealEstateDefaults = useCallback((): RealEstatePremiseForm => {
+    const shouldPrefillEntityAddress = !hasRealEstatePremise;
+    const parsedAddress = shouldPrefillEntityAddress ? parseEntityAddress(entity.address) : parseEntityAddress();
+
+    return {
+      business_premise_name: getNextSuggestedName("P", premises.length),
       real_estate: {
         cadastral_number: "",
-        building_number: "0",
-        building_section: "0",
-        community: "",
-        city: "",
-        street: "",
-        house_number: "",
-        house_number_additional: "",
-        postal_code: "",
+        building_number: "",
+        building_section: "",
+        community: shouldPrefillEntityAddress ? entity.city || "" : "",
+        city: shouldPrefillEntityAddress ? entity.city || "" : "",
+        street: parsedAddress.street,
+        house_number: parsedAddress.house_number,
+        house_number_additional: parsedAddress.house_number_additional,
+        postal_code: shouldPrefillEntityAddress ? entity.post_code || "" : "",
       },
-    },
+    };
+  }, [entity.address, entity.city, entity.post_code, hasRealEstatePremise, premises.length]);
+
+  const buildMovableDefaults = useCallback(
+    (): MovablePremiseForm => ({
+      business_premise_name: getNextSuggestedName("P", premises.length),
+      movable_premise: {
+        premise_type: "A",
+      },
+    }),
+    [premises.length],
+  );
+
+  // Real Estate Form
+  const realEstateForm = useForm<RealEstatePremiseForm>({
+    resolver: zodResolver(realEstatePremiseSchema) as Resolver<RealEstatePremiseForm>,
+    defaultValues: buildRealEstateDefaults(),
   });
 
   // Movable Form
   const movableForm = useForm<MovablePremiseForm>({
     resolver: zodResolver(movablePremiseSchema) as Resolver<MovablePremiseForm>,
-    defaultValues: {
-      business_premise_name: "",
-      movable_premise: {
-        premise_type: "A",
-      },
-    },
+    defaultValues: buildMovableDefaults(),
   });
 
+  useEffect(() => {
+    if (!open) return;
+
+    if (isRealEstate) {
+      realEstateForm.reset(buildRealEstateDefaults());
+      return;
+    }
+
+    movableForm.reset(buildMovableDefaults());
+  }, [buildMovableDefaults, buildRealEstateDefaults, isRealEstate, open, realEstateForm, movableForm]);
+
   const handleMutationError = (error: unknown, form: typeof realEstateForm | typeof movableForm) => {
     const err = error as { status?: number; data?: { message?: string } };
     if (err?.status === 409 && err?.data?.message) {
@@ -99,7 +159,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
 
   const { mutate: registerRealEstate, isPending: isRealEstatePending } = useRegisterRealEstatePremise({
     onSuccess: () => {
-      realEstateForm.reset();
+      realEstateForm.reset(buildRealEstateDefaults());
       onSuccess?.();
     },
     onError: (error) => handleMutationError(error, realEstateForm),
@@ -107,7 +167,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
 
   const { mutate: registerMovable, isPending: isMovablePending } = useRegisterMovablePremise({
     onSuccess: () => {
-      movableForm.reset();
+      movableForm.reset(buildMovableDefaults());
       onSuccess?.();
     },
     onError: (error) => handleMutationError(error, movableForm),
@@ -170,9 +230,9 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                 name="business_premise_name"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t("Premise Name")}</FormLabel>
+                    <FormLabel>{t("Premise Name")} *</FormLabel>
                     <FormControl>
-                      <Input placeholder="P1" {...field} />
+                      <Input placeholder="P1" {...field} data-testid="furs-real-estate-premise-name" />
                     </FormControl>
                     <FormDescription>{t("Unique identifier for this premise (e.g., P1, P2)")}</FormDescription>
                     <FormMessage />
@@ -221,7 +281,6 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                           data-testid="furs-real-estate-building-number"
                         />
                       </FormControl>
-                      <FormDescription className="text-xs">{t("Numeric, use 0 if not applicable")}</FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
@@ -242,7 +301,6 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                           data-testid="furs-real-estate-building-section"
                         />
                       </FormControl>
-                      <FormDescription className="text-xs">{t("Numeric, use 0 if not applicable")}</FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
@@ -369,7 +427,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                 name="business_premise_name"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t("Premise Name")}</FormLabel>
+                    <FormLabel>{t("Premise Name")} *</FormLabel>
                     <FormControl>
                       <Input placeholder="P1" {...field} data-testid="furs-movable-premise-name" />
                     </FormControl>
@@ -385,7 +443,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                 name="movable_premise.premise_type"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t("Premise Type")}</FormLabel>
+                    <FormLabel>{t("Premise Type")} *</FormLabel>
                     <Select onValueChange={field.onChange} value={field.value}>
                       <FormControl>
                         <SelectTrigger>

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

@@ -1,5 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Entity } from "@spaceinvoices/js-sdk";
+import { files, upload } from "@spaceinvoices/js-sdk";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -16,7 +17,6 @@ import { Input } from "@/ui/components/ui/input";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 import { useFormFooterRegistration } from "@/ui/providers/form-footer-context";
-import { useSDK } from "@/ui/providers/sdk-provider";
 import { useUpdateEntity } from "../entities.hooks";
 import { ImageUploadWithCrop } from "../entity-settings-form/image-upload-with-crop";
 import de from "../entity-settings-form/locales/de";
@@ -39,7 +39,6 @@ type BrandingSettingsSchema = z.infer<typeof brandingSettingsSchema>;
 
 export type BrandingSettingsFormProps = {
   entity: Entity;
-  cloudinaryCloudName?: string;
   onSuccess?: (data: Entity) => void;
   onError?: (error: unknown) => void;
   onUploadSuccess?: () => void;
@@ -47,23 +46,20 @@ export type BrandingSettingsFormProps = {
 
 export function BrandingSettingsForm({
   entity,
-  cloudinaryCloudName,
   t: translateProp,
   namespace,
   locale,
+  translationLocale,
   onSuccess,
   onError,
   onUploadSuccess,
 }: BrandingSettingsFormProps) {
-  const t = createTranslation({ t: translateProp, namespace, locale, translations });
-  const { sdk } = useSDK();
+  const t = createTranslation({ t: translateProp, namespace, locale, translationLocale, translations });
 
   const currentSettings = (entity.settings as any) || {};
 
   const [isUploading, setIsUploading] = useState(false);
   const [isUploadingSignature, setIsUploadingSignature] = useState(false);
-  const [logoTimestamp, setLogoTimestamp] = useState(Date.now());
-  const [signatureTimestamp, setSignatureTimestamp] = useState(Date.now());
   const [uploadedLogoUrl, setUploadedLogoUrl] = useState<string | null>(null);
   const [uploadedSignatureUrl, setUploadedSignatureUrl] = useState<string | null>(null);
   const [fetchedLogoUrl, setFetchedLogoUrl] = useState<string | null>(null);
@@ -82,9 +78,9 @@ export function BrandingSettingsForm({
   useEffect(() => {
     async function fetchFileUrls() {
       try {
-        const files = await sdk.files.list({ entity_id: entity.id });
-        const logoFile = files.data.find((f) => f.category === "logo");
-        const signatureFile = files.data.find((f) => f.category === "signature");
+        const entityFiles = await files.list({ entity_id: entity.id });
+        const logoFile = entityFiles.data.find((f) => f.category === "logo");
+        const signatureFile = entityFiles.data.find((f) => f.category === "signature");
 
         if (logoFile) {
           setFetchedLogoUrl(logoFile.secureUrl);
@@ -99,26 +95,13 @@ export function BrandingSettingsForm({
       }
     }
     fetchFileUrls();
-  }, [entity.id, sdk.files, form]);
+  }, [entity.id, form]);
 
   const hasLogo = form.watch("has_logo");
   const hasSignature = form.watch("has_signature");
 
-  const entityTimestamp = entity.updated_at ? new Date(entity.updated_at).getTime() : logoTimestamp;
-  const logoUrl =
-    hasLogo && cloudinaryCloudName
-      ? uploadedLogoUrl ||
-        fetchedLogoUrl ||
-        `https://res.cloudinary.com/${cloudinaryCloudName}/image/upload/leka/entities/${entity.id}/logos/logo_${entity.id}.png?v=${entityTimestamp}`
-      : undefined;
-
-  const signatureEntityTimestamp = entity.updated_at ? new Date(entity.updated_at).getTime() : signatureTimestamp;
-  const signatureUrl =
-    hasSignature && cloudinaryCloudName
-      ? uploadedSignatureUrl ||
-        fetchedSignatureUrl ||
-        `https://res.cloudinary.com/${cloudinaryCloudName}/image/upload/leka/entities/${entity.id}/signatures/signature_${entity.id}.png?v=${signatureEntityTimestamp}`
-      : undefined;
+  const logoUrl = hasLogo ? uploadedLogoUrl || fetchedLogoUrl || undefined : undefined;
+  const signatureUrl = hasSignature ? uploadedSignatureUrl || fetchedSignatureUrl || undefined : undefined;
 
   const { mutate: updateEntity, isPending } = useUpdateEntity({
     entityId: entity.id,
@@ -140,10 +123,9 @@ export function BrandingSettingsForm({
     setIsUploading(true);
     try {
       // SDK expects { file: Blob } as first arg, SDKMethodOptions as last
-      const result = await sdk.upload.uploadImage({ file }, { entity_id: entity.id });
+      const result = await upload.uploadImage({ file }, { entity_id: entity.id });
       form.setValue("has_logo", true);
       setUploadedLogoUrl(result.secureUrl);
-      setLogoTimestamp(Date.now());
       onUploadSuccess?.();
       return result;
     } catch (error) {
@@ -159,10 +141,9 @@ export function BrandingSettingsForm({
     setIsUploadingSignature(true);
     try {
       // SDK expects { file, category } as first arg, SDKMethodOptions as last
-      const result = await sdk.files.uploadFile({ file, category: "signature" }, { entity_id: entity.id });
+      const result = await files.uploadFile({ file, category: "signature" }, { entity_id: entity.id });
       form.setValue("has_signature", true);
       setUploadedSignatureUrl(result.secureUrl);
-      setSignatureTimestamp(Date.now());
       onUploadSuccess?.();
       return { secureUrl: result.secureUrl };
     } catch (error) {

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

@@ -57,10 +57,11 @@ export function CompanySettingsForm({
   t: translateProp,
   namespace,
   locale,
+  translationLocale,
   onSuccess,
   onError,
 }: CompanySettingsFormProps) {
-  const t = createTranslation({ t: translateProp, namespace, locale, translations });
+  const t = createTranslation({ t: translateProp, namespace, locale, translationLocale, translations });
 
   const currentSettings = (entity.settings as any) || {};