fix setup form

src/features/settings/index.tsx

@@ -4,32 +4,56 @@ import {
   saveMerchant,
   getMerchant,
 } from "../../utils/storage";
+import { useNavigate } from "@tanstack/react-router";
+
 
 export default function SettingsFeature() {
-  const [form, setForm] = useState<string>('');
+  const navigate = useNavigate();
+
+  const [form, setForm] = useState<MerchantForm>({
+    merchantName: "",
+    tower: "",
+    floor: "",
+    unit: "",
+  });
   const [loading, setLoading] = useState<boolean>(false);
-  const merchant = getMerchant();
+
 
   function handleChange(
-    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+    e: React.ChangeEvent<HTMLInputElement>
   ) {
-    const { value } = e.target;
-    setForm(value);
+    const { name, value } = e.target;
+    setForm((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
   }
 
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
+    if (!isFormValid) return;
+
     setLoading(true);
-    saveMerchant(form)
+    saveMerchant(form);
+
     setTimeout(() => {
       setLoading(false);
+      navigate({ to: "/" });
     }, 200);
-    
   }
 
   useEffect(() => {
-    setForm(merchant || 'SAVY');
-  },[merchant]);
+    const merchant = getMerchant();
+    if (merchant) {
+      setForm(merchant);
+    }
+  }, []);
+
+  const isFormValid =
+    form.merchantName?.trim() &&
+    form.tower?.trim() &&
+    form.floor?.trim() &&
+    form.unit?.trim();
 
   return (
     <form onSubmit={handleSubmit} className="p-4">
@@ -40,21 +64,62 @@ export default function SettingsFeature() {
           </label>
           <input
             name="merchantName"
-            value={form}
+            value={form.merchantName}
             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">
+            Tower
+          </label>
+          <input
+            name="tower"
+            value={form.tower}
+            onChange={handleChange}
+            className="p-2 border border-neutral-200 w-full rounded-md"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="mb-1 text-neutral-900 block font-semibold">
+              Floor
+            </label>
+            <input
+              name="floor"
+              value={form.floor}
+              onChange={handleChange}
+              className="p-2 border border-neutral-200 w-full rounded-md"
+            />
+          </div>
+
+          <div>
+            <label className="mb-1 text-neutral-900 block font-semibold">
+              Unit
+            </label>
+            <input
+              name="unit"
+              value={form.unit}
+              onChange={handleChange}
+              className="p-2 border border-neutral-200 w-full rounded-md"
+            />
+          </div>
+        </div>
       </div>
 
       <button
         type="submit"
-        className="w-full bg-orange-500 text-white py-2 rounded-lg mt-8 disabled:bg-neutral-500"
-        disabled={loading}
+        disabled={!isFormValid || loading}
+        className="
+          w-full py-2 rounded-lg mt-8 text-white
+          bg-orange-500
+          disabled:bg-neutral-400
+          disabled:cursor-not-allowed
+        "
       >
-        Save Device
+        {loading ? "Saving..." : "Save Device"}
       </button>
     </form>
   );