@spaceinvoices/react-ui 0.4.1 → 0.4.3

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

@@ -1,4 +1,4 @@
-import { Building2, Cpu, MapPin, MoreVertical, Truck } from "lucide-react";
+import { Building2, Cpu, Info, MoreVertical, Trash2 } from "lucide-react";
 import { type FC, type ReactNode, useState } from "react";
 import type { FinaSectionType } from "../fina-settings-form";
 
@@ -7,21 +7,6 @@ type FinaBusinessPremise = {
   entity_id: string;
   premise_id: string;
   type: string;
-  real_estate?: {
-    cadastral_municipality?: string;
-    land_registry_number?: string;
-    building_number?: string;
-    sub_building_number?: string;
-    street?: string;
-    house_number?: string;
-    house_number_additional?: string | null;
-    settlement?: string;
-    city?: string;
-    postal_code?: string;
-  };
-  movable_premise?: {
-    type?: string;
-  };
   is_active: boolean;
   registered_at: Date | string | null;
   closed_at: Date | string | null;
@@ -53,7 +38,7 @@ import {
 import { Input } from "@/ui/components/ui/input";
 import { Label } from "@/ui/components/ui/label";
 import { cn } from "@/ui/lib/utils";
-import { useCloseFinaPremise, useRegisterFinaElectronicDevice } from "../fina-settings.hooks";
+import { useDeleteFinaDevice, useDeleteFinaPremise, useRegisterFinaElectronicDevice } from "../fina-settings.hooks";
 import { RegisterFinaPremiseDialog } from "./register-premise-dialog";
 
 interface PremisesManagementSectionProps {
@@ -76,12 +61,20 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
   const wrap = (section: FinaSectionType, content: ReactNode) =>
     wrapSection ? wrapSection(section, content) : content;
   const [registerDialogOpen, setRegisterDialogOpen] = useState(false);
-  const [registerType, setRegisterType] = useState<"real-estate" | "movable">("real-estate");
   const [addDeviceDialogOpen, setAddDeviceDialogOpen] = useState(false);
   const [selectedPremiseId, setSelectedPremiseId] = useState<string | null>(null);
   const [deviceId, setDeviceId] = useState("");
 
-  const { mutate: closePremise } = useCloseFinaPremise({
+  const { mutate: deletePremise } = useDeleteFinaPremise({
+    onSuccess: () => {
+      onSuccess?.();
+    },
+    onError: (error) => {
+      onError?.(error);
+    },
+  });
+
+  const { mutate: deleteDevice } = useDeleteFinaDevice({
     onSuccess: () => {
       onSuccess?.();
     },
@@ -102,18 +95,22 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
     },
   });
 
-  const handleClosePremise = (premiseId: string) => {
-    if (confirm(t("Are you sure you want to close this premise? This action cannot be undone."))) {
-      closePremise({
+  const handleDeletePremise = (premiseId: string) => {
+    if (confirm(t("Are you sure you want to delete this premise? This will also deactivate all its devices."))) {
+      deletePremise({
         entityId: entity.id,
         premiseId,
       });
     }
   };
 
-  const handleAddPremise = (type: "real-estate" | "movable") => {
-    setRegisterType(type);
-    setRegisterDialogOpen(true);
+  const handleDeleteDevice = (deviceId: string) => {
+    if (confirm(t("Are you sure you want to delete this device?"))) {
+      deleteDevice({
+        entityId: entity.id,
+        deviceId,
+      });
+    }
   };
 
   const handleAddDevice = (premiseId: string) => {
@@ -140,22 +137,24 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
         </div>
         <div>
           <h3 className="font-semibold text-lg">{t("Business Premises")}</h3>
-          <p className="text-muted-foreground text-sm">{t("Register your business premises for FINA")}</p>
+          <p className="text-muted-foreground text-sm">{t("Manage your business premises for FINA")}</p>
         </div>
       </div>
 
       <div className="space-y-6">
-        {/* Add Premise Buttons */}
-        <div className="flex gap-3">
-          <Button onClick={() => handleAddPremise("real-estate")} variant="default" className="flex-1 cursor-pointer">
-            <Building2 className="mr-2 h-4 w-4" />
-            {t("Add Real Estate")}
-          </Button>
-          <Button onClick={() => handleAddPremise("movable")} variant="outline" className="flex-1 cursor-pointer">
-            <Truck className="mr-2 h-4 w-4" />
-            {t("Add Movable")}
-          </Button>
-        </div>
+        {/* Info banner */}
+        <Alert>
+          <Info className="h-4 w-4" />
+          <AlertDescription>
+            {t("Register your premises on ePorezna first, then add the premise ID here.")}
+          </AlertDescription>
+        </Alert>
+
+        {/* Add Premise Button */}
+        <Button onClick={() => setRegisterDialogOpen(true)} variant="default" className="cursor-pointer">
+          <Building2 className="mr-2 h-4 w-4" />
+          {t("Add Premise")}
+        </Button>
 
         {/* Premises List */}
         {premises.length === 0 ? (
@@ -177,10 +176,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                       <div className="flex items-center gap-2">
                         <CardTitle className="text-base">{premise.premise_id}</CardTitle>
                         <Badge variant={premise.is_active ? "default" : "secondary"}>
-                          {premise.is_active ? t("Active") : t("Closed")}
-                        </Badge>
-                        <Badge variant="outline">
-                          {premise.type === "real_estate" ? t("Real Estate") : t("Movable")}
+                          {premise.is_active ? t("Active") : t("Inactive")}
                         </Badge>
                       </div>
                       <CardDescription />
@@ -198,10 +194,11 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                             {t("Add Electronic Device")}
                           </DropdownMenuItem>
                           <DropdownMenuItem
-                            onClick={() => handleClosePremise(premise.id)}
+                            onClick={() => handleDeletePremise(premise.id)}
                             className="cursor-pointer text-destructive"
                           >
-                            {t("Close Premise")}
+                            <Trash2 className="mr-2 h-4 w-4" />
+                            {t("Delete Premise")}
                           </DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>
@@ -210,53 +207,32 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                 </CardHeader>
                 <CardContent>
                   <div className="space-y-3">
-                    {/* Real Estate Info */}
-                    {premise.real_estate && (
-                      <div className="flex items-start gap-2 text-sm">
-                        <MapPin className="mt-0.5 h-4 w-4 text-muted-foreground" />
-                        <div>
-                          <p className="font-medium">
-                            {premise.real_estate.street} {premise.real_estate.house_number}
-                            {premise.real_estate.house_number_additional &&
-                              ` ${premise.real_estate.house_number_additional}`}
-                          </p>
-                          <p className="text-muted-foreground">
-                            {premise.real_estate.postal_code} {premise.real_estate.city}
-                          </p>
-                          {premise.real_estate.cadastral_municipality && (
-                            <p className="text-muted-foreground text-xs">
-                              {t("Cadastral Municipality")}: {premise.real_estate.cadastral_municipality}
-                              {premise.real_estate.land_registry_number &&
-                                ` / ${t("Land Registry Number")}: ${premise.real_estate.land_registry_number}`}
-                              {premise.real_estate.building_number &&
-                                ` / ${t("Building Number")}: ${premise.real_estate.building_number}`}
-                            </p>
-                          )}
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Movable Info */}
-                    {premise.movable_premise && (
-                      <div className="flex items-start gap-2 text-sm">
-                        <Truck className="mt-0.5 h-4 w-4 text-muted-foreground" />
-                        <div>
-                          <p className="font-medium">
-                            {premise.movable_premise.type === "vehicle" && t("Vehicle")}
-                            {premise.movable_premise.type === "market_stall" && t("Market Stall")}
-                            {premise.movable_premise.type === "other" && t("Other")}
-                          </p>
-                        </div>
-                      </div>
-                    )}
-
                     {/* Devices Count or Warning */}
                     {premise.Devices && premise.Devices.length > 0 ? (
-                      <div className="flex items-center gap-2 text-muted-foreground text-sm">
-                        <Badge variant="secondary" className="text-xs">
-                          {premise.Devices.length} {premise.Devices.length === 1 ? t("Device") : t("Devices")}
-                        </Badge>
-                        <span className="text-xs">{premise.Devices.map((d) => d.device_id || "?").join(", ")}</span>
+                      <div className="space-y-1">
+                        <div className="flex items-center gap-2 text-muted-foreground text-sm">
+                          <Badge variant="secondary" className="text-xs">
+                            {premise.Devices.length} {premise.Devices.length === 1 ? t("Device") : t("Devices")}
+                          </Badge>
+                        </div>
+                        <div className="flex flex-wrap gap-2">
+                          {premise.Devices.map((d) => (
+                            <div key={d.id} className="flex items-center gap-1 rounded border px-2 py-1 text-xs">
+                              <Cpu className="h-3 w-3 text-muted-foreground" />
+                              <span>{d.device_id || "?"}</span>
+                              {premise.is_active && (
+                                <button
+                                  type="button"
+                                  onClick={() => handleDeleteDevice(d.id)}
+                                  className="ml-1 cursor-pointer text-muted-foreground hover:text-destructive"
+                                  title={t("Delete Device")}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </button>
+                              )}
+                            </div>
+                          ))}
+                        </div>
                       </div>
                     ) : (
                       <Alert>
@@ -300,7 +276,6 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
           open={registerDialogOpen}
           onOpenChange={setRegisterDialogOpen}
           entity={entity}
-          type={registerType}
           t={t}
           onSuccess={() => {
             setRegisterDialogOpen(false);

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

@@ -1,6 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { FC } from "react";
-import type { Resolver } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Button } from "@/ui/components/ui/button";
@@ -22,41 +21,22 @@ import {
   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 { useRegisterFinaMovablePremise, useRegisterFinaRealEstatePremise } from "../fina-settings.hooks";
-
-// Manual Zod schemas (SDK not regenerated for FINA yet)
-const realEstatePremiseSchema = z.object({
-  premise_id: z.string().min(1, "Premise ID is required").max(20),
-  real_estate: z.object({
-    cadastral_municipality: z.string().min(1, "Cadastral municipality is required"),
-    land_registry_number: z.string().min(1, "Land registry number is required"),
-    building_number: z.string().optional().default(""),
-    sub_building_number: z.string().optional().default(""),
-    street: z.string().optional().default(""),
-    house_number: z.string().optional().default(""),
-    house_number_additional: z.string().optional().default(""),
-    settlement: z.string().optional().default(""),
-    city: z.string().optional().default(""),
-    postal_code: z.string().optional().default(""),
-  }),
-});
-
-const movablePremiseSchema = z.object({
-  premise_id: z.string().min(1, "Premise ID is required").max(20),
-  movable_premise: z.object({
-    type: z.enum(["vehicle", "market_stall", "other"]),
-  }),
+import { useCreateFinaPremise } from "../fina-settings.hooks";
+
+const createPremiseSchema = z.object({
+  premise_id: z
+    .string()
+    .min(1, "Premise ID is required")
+    .max(20)
+    .regex(/^[0-9a-zA-Z]{1,20}$/, "Must be alphanumeric, 1-20 characters"),
 });
 
-type RealEstatePremiseForm = z.infer<typeof realEstatePremiseSchema>;
-type MovablePremiseForm = z.infer<typeof movablePremiseSchema>;
+type CreatePremiseForm = z.infer<typeof createPremiseSchema>;
 
 interface RegisterFinaPremiseDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   entity: any;
-  type: "real-estate" | "movable";
   t: (key: string) => string;
   onSuccess?: () => void;
   onError?: (error: unknown) => void;
@@ -66,329 +46,77 @@ export const RegisterFinaPremiseDialog: FC<RegisterFinaPremiseDialogProps> = ({
   open,
   onOpenChange,
   entity,
-  type,
   t,
   onSuccess,
   onError,
 }) => {
-  const isRealEstate = type === "real-estate";
-
-  const realEstateForm = useForm<RealEstatePremiseForm>({
-    resolver: zodResolver(realEstatePremiseSchema) as Resolver<RealEstatePremiseForm>,
-    defaultValues: {
-      premise_id: "",
-      real_estate: {
-        cadastral_municipality: "",
-        land_registry_number: "",
-        building_number: "",
-        sub_building_number: "",
-        street: "",
-        house_number: "",
-        house_number_additional: "",
-        settlement: "",
-        city: "",
-        postal_code: "",
-      },
-    },
-  });
-
-  const movableForm = useForm<MovablePremiseForm>({
-    resolver: zodResolver(movablePremiseSchema),
+  const form = useForm<CreatePremiseForm>({
+    resolver: zodResolver(createPremiseSchema),
     defaultValues: {
       premise_id: "",
-      movable_premise: {
-        type: "vehicle",
-      },
-    },
-  });
-
-  const { mutate: registerRealEstate, isPending: isRealEstatePending } = useRegisterFinaRealEstatePremise({
-    onSuccess: () => {
-      realEstateForm.reset();
-      onSuccess?.();
     },
-    onError,
   });
 
-  const { mutate: registerMovable, isPending: isMovablePending } = useRegisterFinaMovablePremise({
+  const { mutate: createPremise, isPending } = useCreateFinaPremise({
     onSuccess: () => {
-      movableForm.reset();
+      form.reset();
       onSuccess?.();
     },
     onError,
   });
 
-  const handleRealEstateSubmit = (data: RealEstatePremiseForm) => {
-    registerRealEstate({
+  const handleSubmit = (data: CreatePremiseForm) => {
+    createPremise({
       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">
+      <DialogContent className="max-w-md">
         <DialogHeader>
-          <DialogTitle>{isRealEstate ? t("Register Real Estate Premise") : t("Register Movable Premise")}</DialogTitle>
+          <DialogTitle>{t("Add Business Premise")}</DialogTitle>
           <DialogDescription>
             {t(
-              "Register a new business premise with FINA. After registration, you'll need to add at least one electronic device.",
+              "Enter the premise ID that you registered on ePorezna. After adding, you'll need to register at least one electronic device.",
             )}
           </DialogDescription>
         </DialogHeader>
 
-        {isRealEstate ? (
-          <Form {...realEstateForm}>
-            <form onSubmit={realEstateForm.handleSubmit(handleRealEstateSubmit as any)} className="space-y-4">
-              {/* Premise ID */}
-              <FormField
-                control={realEstateForm.control as any}
-                name="premise_id"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("Premise ID")}</FormLabel>
-                    <FormControl>
-                      <Input placeholder="PP1" {...field} />
-                    </FormControl>
-                    <FormDescription>{t("Unique identifier for this premise (e.g., PP1, OFFICE1)")}</FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Cadastral Municipality */}
-              <FormField
-                control={realEstateForm.control as any}
-                name="real_estate.cadastral_municipality"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("Cadastral Municipality")} *</FormLabel>
-                    <FormControl>
-                      <Input placeholder="12345" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Land Registry Number */}
-              <FormField
-                control={realEstateForm.control as any}
-                name="real_estate.land_registry_number"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("Land Registry Number")} *</FormLabel>
-                    <FormControl>
-                      <Input placeholder="123" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Building Information */}
-              <div className="grid grid-cols-2 gap-4">
-                <FormField
-                  control={realEstateForm.control as any}
-                  name="real_estate.building_number"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t("Building Number")}</FormLabel>
-                      <FormControl>
-                        <Input placeholder="1" {...field} value={field.value || ""} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={realEstateForm.control as any}
-                  name="real_estate.sub_building_number"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t("Sub-Building Number")}</FormLabel>
-                      <FormControl>
-                        <Input placeholder="A" {...field} value={field.value || ""} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
-              {/* Address */}
-              <FormField
-                control={realEstateForm.control as any}
-                name="real_estate.street"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("Street")}</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Ilica" {...field} value={field.value || ""} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <div className="grid grid-cols-2 gap-4">
-                <FormField
-                  control={realEstateForm.control as any}
-                  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 as any}
-                  name="real_estate.house_number_additional"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t("House Number Additional")}</FormLabel>
-                      <FormControl>
-                        <Input placeholder="A" {...field} value={field.value || ""} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
-              <FormField
-                control={realEstateForm.control as any}
-                name="real_estate.settlement"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("Settlement")}</FormLabel>
-                    <FormControl>
-                      <Input placeholder="" {...field} value={field.value || ""} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <div className="grid grid-cols-2 gap-4">
-                <FormField
-                  control={realEstateForm.control as any}
-                  name="real_estate.city"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t("City")}</FormLabel>
-                      <FormControl>
-                        <Input placeholder="Zagreb" {...field} value={field.value || ""} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={realEstateForm.control as any}
-                  name="real_estate.postal_code"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t("Postal Code")}</FormLabel>
-                      <FormControl>
-                        <Input placeholder="10000" {...field} value={field.value || ""} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-
-              <DialogFooter>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => onOpenChange(false)}
-                  disabled={isPending}
-                  className="cursor-pointer"
-                >
-                  {t("Cancel")}
-                </Button>
-                <Button type="submit" disabled={isPending} className="cursor-pointer">
-                  {isPending ? t("Registering...") : t("Register Premise")}
-                </Button>
-              </DialogFooter>
-            </form>
-          </Form>
-        ) : (
-          <Form {...movableForm}>
-            <form onSubmit={movableForm.handleSubmit(handleMovableSubmit)} className="space-y-4">
-              {/* Premise ID */}
-              <FormField
-                control={movableForm.control}
-                name="premise_id"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("Premise ID")}</FormLabel>
-                    <FormControl>
-                      <Input placeholder="PP1" {...field} />
-                    </FormControl>
-                    <FormDescription>{t("Unique identifier for this premise (e.g., PP1, OFFICE1)")}</FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Premise Type */}
-              <FormField
-                control={movableForm.control}
-                name="movable_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="vehicle">{t("Vehicle")}</SelectItem>
-                        <SelectItem value="market_stall">{t("Market Stall")}</SelectItem>
-                        <SelectItem value="other">{t("Other Movable")}</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormDescription>{t("Type of movable business premise")}</FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <DialogFooter>
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => onOpenChange(false)}
-                  disabled={isPending}
-                  className="cursor-pointer"
-                >
-                  {t("Cancel")}
-                </Button>
-                <Button type="submit" disabled={isPending} className="cursor-pointer">
-                  {isPending ? t("Registering...") : t("Register Premise")}
-                </Button>
-              </DialogFooter>
-            </form>
-          </Form>
-        )}
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="premise_id"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t("Premise ID")}</FormLabel>
+                  <FormControl>
+                    <Input placeholder="PP1" {...field} />
+                  </FormControl>
+                  <FormDescription>{t("Unique identifier for this premise (e.g., PP1, OFFICE1)")}</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={isPending}
+                className="cursor-pointer"
+              >
+                {t("Cancel")}
+              </Button>
+              <Button type="submit" disabled={isPending} className="cursor-pointer">
+                {isPending ? t("Adding...") : t("Add Premise")}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );