fix setup form

src/features/device/add/index.tsx

@@ -2,27 +2,30 @@ import { useState } from "react";
 import {
   getDevices,
   saveDevices,
-  isDuplicateDevice,
+  getMerchant,
 } from "../../../utils/storage";
 import { useNavigate } from "@tanstack/react-router";
 
-const initialState: DeviceData = {
-  towerNumber: "",
-  floorName: "",
-  unitNumber: "",
-  roomName: "",
-  deviceName: "",
-  deviceType: "",
-  code: "",
-  payload: "",
-  active: true,
-  status: false,
-};
+
 
 export default function AddDeviceFeature() {
-  const [form, setForm] = useState<DeviceData>(initialState);
+  const [form, setForm] = useState<DeviceData | null >(null);
   const navigate = useNavigate();
 
+  const merchant = getMerchant();
+
+  const isMerchantValid =
+    merchant?.merchantName &&
+    merchant?.tower &&
+    merchant?.floor &&
+    merchant?.unit;
+
+  const isFormValid =
+    form?.roomName?.trim() &&
+    form?.deviceName?.trim() &&
+    form?.deviceType?.trim() &&
+    form?.deviceLabel?.trim();
+
   function handleChange(
     e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
   ) {
@@ -32,116 +35,104 @@ export default function AddDeviceFeature() {
 
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
-
+    if (!isMerchantValid || !isFormValid) return;
+    
     const devices = getDevices();
-
+    
     const deviceToSave: DeviceData = {
       ...form,
-      deviceLabel: form.deviceLabel || `${form.roomName} ${form.deviceName}`,
+      towerNumber: merchant.tower,
+      floorName: merchant.floor,
+      unitNumber: merchant.unit,
+      deviceLabel: form?.deviceLabel,
     };
-
-    if (isDuplicateDevice(devices, deviceToSave)) {
-      return;
-    }
-
+    
     saveDevices([...devices, deviceToSave]);
-    setForm(initialState);
-    navigate({ to: '/' });
+    setForm(null);
+    navigate({ to: "/" });
   }
 
   return (
     <form onSubmit={handleSubmit} className="p-4">
       <h2 className="text-lg font-semibold mb-4">Add Device</h2>
+
+      {!isMerchantValid && (
+        <p className="text-sm text-red-500 mb-4">
+          Lengkapi data merchant (tower, floor, unit) terlebih dahulu
+        </p>
+      )}
+
       <div className="flex flex-col gap-4">
-        <div>
-          <label className="mb-1 text-neutral-900 block font-semibold">
-            Tower
-          </label>
-          <input
-            name="towerNumber"
-            value={form.towerNumber}
-            onChange={handleChange}
-            className="p-2 border border-neutral-200 w-full rounded-md"
-            required
-          />
-        </div>
-        <div>
-          <label className="mb-1 text-neutral-900 block font-semibold">
-            Floor
-          </label>
-          <input
-            name="floorName"
-            value={form.floorName}
-            onChange={handleChange}
-            className="p-2 border border-neutral-200 w-full rounded-md"
-            required
-          />
-        </div>
+        {/* ROOM */}
         <div>
           <label className="mb-1 text-neutral-900 block font-semibold">
             Room
           </label>
           <input
             name="roomName"
-            value={form.roomName}
-            onChange={handleChange}
-            className="p-2 border border-neutral-200 w-full rounded-md"
-            required
-          />
-        </div>
-        <div>
-          <label className="mb-1 text-neutral-900 block font-semibold">
-            Unit
-          </label>
-          <input
-            name="unitNumber"
-            value={form.unitNumber}
+            placeholder="Room Name"
+            value={form?.roomName}
             onChange={handleChange}
             className="p-2 border border-neutral-200 w-full rounded-md"
             required
           />
         </div>
+
+        {/* DEVICE NAME */}
         <div>
           <label className="mb-1 text-neutral-900 block font-semibold">
             Device Name
           </label>
           <input
             name="deviceName"
-            value={form.deviceName}
+            placeholder="Device Name"
+            value={form?.deviceName}
             onChange={handleChange}
             className="p-2 border border-neutral-200 w-full rounded-md"
             required
           />
         </div>
+
+        {/* DEVICE TYPE */}
         <div>
           <label className="mb-1 text-neutral-900 block font-semibold">
             Device Type
           </label>
           <input
             name="deviceType"
-            value={form.deviceType}
+            placeholder="Device Type"
+            value={form?.deviceType}
             onChange={handleChange}
             className="p-2 border border-neutral-200 w-full rounded-md"
-            required 
+            required
           />
         </div>
+
+        {/* DEVICE LABEL */}
         <div>
           <label className="mb-1 text-neutral-900 block font-semibold">
             Device Label
           </label>
           <input
             name="deviceLabel"
-            value={form.deviceLabel}
+            value={form?.deviceLabel}
             onChange={handleChange}
             className="p-2 border border-neutral-200 w-full rounded-md"
-            required 
+            placeholder={`${form?.roomName || "Room"} ${form?.deviceName || "Device"}`}
+            required
           />
         </div>
       </div>
 
       <button
         type="submit"
-        className="w-full bg-orange-500 text-white py-2 rounded-lg mt-8"
+        disabled={!isMerchantValid || !isFormValid}
+        className="
+          w-full py-2 rounded-lg mt-8 text-white cursor-pointer
+          bg-orange-500
+          disabled:bg-neutral-400
+          disabled:cursor-not-allowed
+        "
       >
         Save Device
       </button>