@spaceinvoices/react-ui 0.1.1

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

@@ -0,0 +1,420 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Entity } from "@spaceinvoices/js-sdk";
+import type { FC } from "react";
+import { useForm } from "react-hook-form";
+import type { z } from "zod";
+import { Button } from "@/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/ui/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/ui/components/ui/form";
+import { Input } from "@/ui/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/components/ui/select";
+import { registerFursMovablePremiseSchema, registerFursRealEstatePremiseSchema } from "@/ui/generated/schemas";
+import { useRegisterMovablePremise, useRegisterRealEstatePremise } from "../furs-settings.hooks";
+
+// Use auto-generated schemas from OpenAPI spec
+// These are automatically kept in sync with the API
+const realEstatePremiseSchema = registerFursRealEstatePremiseSchema;
+const movablePremiseSchema = registerFursMovablePremiseSchema;
+
+type RealEstatePremiseForm = z.infer<typeof realEstatePremiseSchema>;
+type MovablePremiseForm = z.infer<typeof movablePremiseSchema>;
+
+interface RegisterPremiseDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  entity: Entity;
+  type: "real-estate" | "movable";
+  t: (key: string) => string;
+  onSuccess?: () => void;
+  onError?: (error: unknown) => void;
+}
+
+export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
+  open,
+  onOpenChange,
+  entity,
+  type,
+  t,
+  onSuccess,
+  onError,
+}) => {
+  const isRealEstate = type === "real-estate";
+
+  // Real Estate Form
+  const realEstateForm = useForm<RealEstatePremiseForm>({
+    resolver: zodResolver(realEstatePremiseSchema),
+    defaultValues: {
+      business_premise_name: "",
+      real_estate: {
+        cadastral_number: "",
+        building_number: "",
+        building_section: "",
+        community: "",
+        city: "",
+        street: "",
+        house_number: "",
+        house_number_additional: "",
+        postal_code: "",
+      },
+      numbering_strategy: "C",
+    },
+  });
+
+  // Movable Form
+  const movableForm = useForm<MovablePremiseForm>({
+    resolver: zodResolver(movablePremiseSchema),
+    defaultValues: {
+      business_premise_name: "",
+      movable_premise: {
+        premise_type: "A",
+      },
+      numbering_strategy: "C",
+    },
+  });
+
+  const { mutate: registerRealEstate, isPending: isRealEstatePending } = useRegisterRealEstatePremise({
+    onSuccess: () => {
+      realEstateForm.reset();
+      onSuccess?.();
+    },
+    onError,
+  });
+
+  const { mutate: registerMovable, isPending: isMovablePending } = useRegisterMovablePremise({
+    onSuccess: () => {
+      movableForm.reset();
+      onSuccess?.();
+    },
+    onError,
+  });
+
+  const handleRealEstateSubmit = (data: RealEstatePremiseForm) => {
+    registerRealEstate({
+      entityId: entity.id,
+      data,
+    });
+  };
+
+  const handleMovableSubmit = (data: MovablePremiseForm) => {
+    registerMovable({
+      entityId: entity.id,
+      data,
+    });
+  };
+
+  const isPending = isRealEstatePending || isMovablePending;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{isRealEstate ? t("Register Real Estate Premise") : t("Register Movable Premise")}</DialogTitle>
+          <DialogDescription>
+            {t(
+              "Register a new business premise with FURS. After registration, you'll need to manually add at least one electronic device for this premise.",
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        {isRealEstate ? (
+          <Form {...realEstateForm}>
+            <form onSubmit={realEstateForm.handleSubmit(handleRealEstateSubmit)} className="space-y-4">
+              {/* Premise Name */}
+              <FormField
+                control={realEstateForm.control}
+                name="business_premise_name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Premise Name")}</FormLabel>
+                    <FormControl>
+                      <Input placeholder="P1" {...field} />
+                    </FormControl>
+                    <FormDescription>{t("Unique identifier for this premise (e.g., P1, P2)")}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Property Information */}
+              <FormField
+                control={realEstateForm.control}
+                name="real_estate.cadastral_number"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Cadastral Number")} *</FormLabel>
+                    <FormControl>
+                      <Input type="text" inputMode="numeric" pattern="[0-9]*" placeholder="123" {...field} />
+                    </FormControl>
+                    <FormDescription>{t("Required by FURS (must be numeric)")}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Building Information */}
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={realEstateForm.control}
+                  name="real_estate.building_number"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("Building Number")}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="text"
+                          inputMode="numeric"
+                          pattern="[0-9]*"
+                          placeholder="456"
+                          {...field}
+                          value={field.value || ""}
+                        />
+                      </FormControl>
+                      <FormDescription className="text-xs">{t("Must be numeric (optional)")}</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={realEstateForm.control}
+                  name="real_estate.building_section"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("Building Section")}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="text"
+                          inputMode="numeric"
+                          pattern="[0-9]*"
+                          placeholder="1"
+                          {...field}
+                          value={field.value || ""}
+                        />
+                      </FormControl>
+                      <FormDescription className="text-xs">{t("Must be numeric (optional)")}</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              {/* Community */}
+              <FormField
+                control={realEstateForm.control}
+                name="real_estate.community"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Community")} *</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Ljubljana" {...field} />
+                    </FormControl>
+                    <FormDescription>{t("Slovenian administrative community (občina) name")}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Address */}
+              <FormField
+                control={realEstateForm.control}
+                name="real_estate.street"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Street")}</FormLabel>
+                    <FormControl>
+                      <Input placeholder="Dunajska cesta" {...field} value={field.value || ""} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={realEstateForm.control}
+                  name="real_estate.house_number"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("House Number")}</FormLabel>
+                      <FormControl>
+                        <Input placeholder="22" {...field} value={field.value || ""} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={realEstateForm.control}
+                  name="real_estate.house_number_additional"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("Additional")}</FormLabel>
+                      <FormControl>
+                        <Input placeholder="A" {...field} value={field.value || ""} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={realEstateForm.control}
+                  name="real_estate.city"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("City")}</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Ljubljana" {...field} value={field.value || ""} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={realEstateForm.control}
+                  name="real_estate.postal_code"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t("Postal Code")}</FormLabel>
+                      <FormControl>
+                        <Input placeholder="1000" {...field} value={field.value || ""} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+
+              {/* Numbering Strategy */}
+              <FormField
+                control={realEstateForm.control}
+                name="numbering_strategy"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Numbering Strategy")}</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select strategy" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="B">{t("Strategy B (Device-level)")}</SelectItem>
+                        <SelectItem value="C">{t("Strategy C (Centralized)")}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormDescription>{t("Choose how invoice numbers are generated")}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
+                  {t("Cancel")}
+                </Button>
+                <Button type="submit" disabled={isPending}>
+                  {isPending ? t("Registering...") : t("Register Premise")}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        ) : (
+          <Form {...movableForm}>
+            <form onSubmit={movableForm.handleSubmit(handleMovableSubmit)} className="space-y-4">
+              {/* Premise Name */}
+              <FormField
+                control={movableForm.control}
+                name="business_premise_name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Premise Name")}</FormLabel>
+                    <FormControl>
+                      <Input placeholder="P1" {...field} />
+                    </FormControl>
+                    <FormDescription>{t("Unique identifier for this premise (e.g., P1, P2)")}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Premise Type */}
+              <FormField
+                control={movableForm.control}
+                name="movable_premise.premise_type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Premise Type")}</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select type" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="A">{t("A - Vehicle")}</SelectItem>
+                        <SelectItem value="B">{t("B - Object at Market/Fair")}</SelectItem>
+                        <SelectItem value="C">{t("C - Other Movable")}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormDescription>{t("Type of movable business premise")}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Numbering Strategy */}
+              <FormField
+                control={movableForm.control}
+                name="numbering_strategy"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("Numbering Strategy")}</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select strategy" />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="B">{t("Strategy B (Device-level)")}</SelectItem>
+                        <SelectItem value="C">{t("Strategy C (Centralized)")}</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormDescription>{t("Choose how invoice numbers are generated")}</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <DialogFooter>
+                <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
+                  {t("Cancel")}
+                </Button>
+                <Button type="submit" disabled={isPending}>
+                  {isPending ? t("Registering...") : t("Register Premise")}
+                </Button>
+              </DialogFooter>
+            </form>
+          </Form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/components/entities/keys.ts

@@ -0,0 +1,2 @@
+export const ACTIVE_ENTITY_COOKIE = "l.ent" as const;
+export const ACTIVE_ENVIRONMENT_COOKIE = "l.env" as const;

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

@@ -0,0 +1,274 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Entity } from "@spaceinvoices/js-sdk";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/ui/components/ui/form";
+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";
+import sl from "../entity-settings-form/locales/sl";
+
+const translations = { sl, de } as const;
+
+const brandingSettingsSchema = z.object({
+  primary_color: z
+    .union([z.string(), z.null()])
+    .refine((val) => !val || /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(val), {
+      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(),
+});
+
+type BrandingSettingsSchema = z.infer<typeof brandingSettingsSchema>;
+
+export type BrandingSettingsFormProps = {
+  entity: Entity;
+  cloudinaryCloudName?: string;
+  onSuccess?: (data: Entity) => void;
+  onError?: (error: unknown) => void;
+  onUploadSuccess?: () => void;
+} & ComponentTranslationProps;
+
+export function BrandingSettingsForm({
+  entity,
+  cloudinaryCloudName,
+  t: translateProp,
+  namespace,
+  locale,
+  onSuccess,
+  onError,
+  onUploadSuccess,
+}: BrandingSettingsFormProps) {
+  const t = createTranslation({ t: translateProp, namespace, locale, translations });
+  const { sdk } = useSDK();
+
+  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);
+  const [fetchedSignatureUrl, setFetchedSignatureUrl] = useState<string | null>(null);
+
+  const form = useForm<BrandingSettingsSchema>({
+    resolver: zodResolver(brandingSettingsSchema),
+    defaultValues: {
+      primary_color: currentSettings.primary_color || null,
+      has_logo: currentSettings.has_logo || null,
+      has_signature: currentSettings.has_signature || null,
+    },
+  });
+
+  // Fetch logo and signature URLs
+  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");
+
+        if (logoFile) {
+          setFetchedLogoUrl(logoFile.secureUrl);
+          if (!form.getValues("has_logo")) form.setValue("has_logo", true);
+        }
+        if (signatureFile) {
+          setFetchedSignatureUrl(signatureFile.secureUrl);
+          if (!form.getValues("has_signature")) form.setValue("has_signature", true);
+        }
+      } catch (error) {
+        console.error("Failed to fetch file URLs:", error);
+      }
+    }
+    fetchFileUrls();
+  }, [entity.id, sdk.files, 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 { mutate: updateEntity, isPending } = useUpdateEntity({
+    entityId: entity.id,
+    onSuccess: (data) => {
+      form.reset(form.getValues());
+      onSuccess?.(data);
+    },
+    onError,
+  });
+
+  useFormFooterRegistration({
+    formId: "branding-settings-form",
+    isPending,
+    isDirty: form.formState.isDirty,
+    label: t("Save Settings"),
+  });
+
+  const handleImageUpload = async (file: File): Promise<{ secureUrl: string }> => {
+    setIsUploading(true);
+    try {
+      // SDK expects { file: Blob } as first arg, SDKMethodOptions as last
+      const result = await sdk.upload.uploadImage({ file }, { entity_id: entity.id });
+      form.setValue("has_logo", true);
+      setUploadedLogoUrl(result.secureUrl);
+      setLogoTimestamp(Date.now());
+      onUploadSuccess?.();
+      return result;
+    } catch (error) {
+      console.error("Upload failed:", error);
+      onError?.(error);
+      throw error;
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleSignatureUpload = async (file: File): Promise<{ secureUrl: string }> => {
+    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 });
+      form.setValue("has_signature", true);
+      setUploadedSignatureUrl(result.secureUrl);
+      setSignatureTimestamp(Date.now());
+      onUploadSuccess?.();
+      return { secureUrl: result.secureUrl };
+    } catch (error) {
+      console.error("Signature upload failed:", error);
+      onError?.(error);
+      throw error;
+    } finally {
+      setIsUploadingSignature(false);
+    }
+  };
+
+  const onSubmit = (values: BrandingSettingsSchema) => {
+    updateEntity({
+      id: entity.id,
+      data: {
+        settings: {
+          ...currentSettings,
+          primary_color: values.primary_color || undefined,
+          has_logo: values.has_logo || undefined,
+          has_signature: values.has_signature || undefined,
+        },
+      },
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <form id="branding-settings-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="primary_color"
+          render={({ field }) => (
+            <FormItem className="max-w-xs">
+              <FormLabel className="font-medium text-base">{t("Primary Color")}</FormLabel>
+              <FormControl>
+                <div className="flex items-center gap-3">
+                  <div className="relative">
+                    <Input
+                      type="color"
+                      {...field}
+                      value={field.value || "#5c6ac4"}
+                      className="h-12 w-16 cursor-pointer rounded-md border-2 p-1.5 shadow-sm transition-all hover:border-primary/50 hover:shadow-md"
+                    />
+                  </div>
+                  <Input
+                    type="text"
+                    value={field.value || ""}
+                    onChange={(e) => field.onChange(e.target.value)}
+                    placeholder="#5c6ac4"
+                    className="w-32 font-mono text-sm"
+                  />
+                </div>
+              </FormControl>
+              <FormDescription className="text-xs">{t("Color used in invoices and documents")}</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className="grid gap-6 border-t pt-6 lg:grid-cols-2">
+          <FormField
+            control={form.control}
+            name="has_logo"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="font-medium text-base">{t("Logo")}</FormLabel>
+                <FormControl>
+                  <ImageUploadWithCrop
+                    value={logoUrl || ""}
+                    onChange={(url) => field.onChange(!!url)}
+                    onUpload={handleImageUpload}
+                    translate={t}
+                    isUploading={isUploading}
+                  />
+                </FormControl>
+                <FormDescription className="text-xs">{t("Upload your company logo for invoices")}</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="has_signature"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="font-medium text-base">{t("Signature")}</FormLabel>
+                <FormControl>
+                  <ImageUploadWithCrop
+                    value={signatureUrl || ""}
+                    onChange={(url) => field.onChange(!!url)}
+                    onUpload={handleSignatureUpload}
+                    translate={t}
+                    isUploading={isUploadingSignature}
+                    imageType="signature"
+                  />
+                </FormControl>
+                <FormDescription className="text-xs">
+                  {t("Upload a signature image for PDFs (optional)")}
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+      </form>
+    </Form>
+  );
+}