handle remove devices on change setuo

src/features/device/add/index.tsx

@@ -54,8 +54,6 @@ export default function AddDeviceFeature() {
 
   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
@@ -134,7 +132,7 @@ export default function AddDeviceFeature() {
           disabled:cursor-not-allowed
         "
       >
-        Save Device
+        Add Device
       </button>
     </form>
   );

src/features/home/sections/devices.tsx

@@ -62,17 +62,20 @@ export default function Devices() {
   return (
     <>
       <div className="py-4 px-6">
+        { merchant && (
+
         <h1 className="text-base text-neutral-900 font-bold mb-4">
-          Your Devices
+          Devices Located at{' '}{merchant?.tower}/{merchant?.floor}/{merchant?.unit}
         </h1>
-        <div className="flex items-center gap-3 flex-wrap justify-start">
+        ) }
+        <div className="flex items-center gap-3 flex-wrap justify-end">
           <button
             onClick={() =>
               navigate({
                 to: "/device/add",
               })
             }
-            className="shrink-0 w-12 h-12 rounded-full flex items-center justify-center transition-all bg-orange-500 text-white"
+            className="shrink-0 w-12 h-12 rounded-full flex items-center justify-center transition-all bg-orange-500 text-white cursor-pointer"
           >
             <Plus size={24} />
           </button>
@@ -149,6 +152,9 @@ export default function Devices() {
                   {item?.deviceLabel}
                 </h1>
                 <p className="text-xs font-medium text-gray-700 mb-2">
+                  Room: {item?.roomName}
+                </p>
+                <p className="text-xs font-medium text-gray-700">
                   Device:{" "}
                   {icons[item.deviceName as keyof typeof icons]?.label ??
                     item.deviceName}
@@ -156,10 +162,6 @@ export default function Devices() {
                 <p className="text-xs font-medium text-gray-700 mb-2">
                   Status: {item?.payload?.toString()}
                 </p>
-                <p className="text-xs text-gray-500">
-                  {item?.towerNumber}/{item?.floorName}/{item?.unitNumber}/
-                  {item?.roomName}
-                </p>
 
                 {item?.deviceName === "AC" && (
                   <>

src/features/settings/index.tsx

@@ -1,12 +1,8 @@
 /* eslint-disable react-hooks/set-state-in-effect */
 import { useEffect, useState } from "react";
-import {
+import { saveMerchant, getMerchant, clearDevice } from "../../utils/storage";
-  saveMerchant,
-  getMerchant,
-} from "../../utils/storage";
 import { useNavigate } from "@tanstack/react-router";
 
-
 export default function SettingsFeature() {
   const navigate = useNavigate();
 
@@ -18,10 +14,16 @@ export default function SettingsFeature() {
   });
   const [loading, setLoading] = useState<boolean>(false);
 
+function isObjectValueDifferent(
+  a: MerchantForm,
+  b: MerchantForm
+): boolean {
+  return (Object.keys(a) as (keyof MerchantForm)[]).some(
+    (key) => a[key] !== b[key]
+  );
+}
 
-  function handleChange(
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    e: React.ChangeEvent<HTMLInputElement>
-  ) {
     const { name, value } = e.target;
     setForm((prev) => ({
       ...prev,
@@ -29,19 +31,28 @@ export default function SettingsFeature() {
     }));
   }
 
-  function handleSubmit(e: React.FormEvent) {
+function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
+  e.preventDefault();
-    if (!isFormValid) return;
 
-    setLoading(true);
+  const merchant = getMerchant();
-    saveMerchant(form);
+  if (!merchant || !form) return;
+  if (!isFormValid) return;
 
-    setTimeout(() => {
+  const isDifferent = isObjectValueDifferent(merchant, form);
-      setLoading(false);
+
-      navigate({ to: "/" });
+  if (isDifferent) {
-    }, 200);
+    clearDevice(); // reset device kalau merchant berubah
   }
 
+  setLoading(true);
+  saveMerchant(form);
+
+  setTimeout(() => {
+    setLoading(false);
+    navigate({ to: "/" });
+  }, 200);
+}
+
   useEffect(() => {
     const merchant = getMerchant();
     if (merchant) {
@@ -113,13 +124,13 @@ export default function SettingsFeature() {
         type="submit"
         disabled={!isFormValid || loading}
         className="
-          w-full py-2 rounded-lg mt-8 text-white
+          w-full py-2 rounded-lg mt-8 text-white cursor-pointer
           bg-orange-500
           disabled:bg-neutral-400
           disabled:cursor-not-allowed
         "
       >
-        {loading ? "Saving..." : "Save Device"}
+        {loading ? "Saving..." : "Save"}
       </button>
     </form>
   );

src/pages/device/add.tsx

@@ -5,7 +5,7 @@ export default function AddDevicePage() {
   return (
     <NavigationLayout
       isBack
-      title="Tambah Device"
+      title="Add Device"
       mainClassName="pt-2"
       className="from-white to-white"
     >

src/utils/storage.ts

@@ -13,6 +13,10 @@ export function saveDevices(devices: DeviceData[]) {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(devices));
 }
 
+export function clearDevice() {
+  localStorage.removeItem(STORAGE_KEY);
+}
+
 export function isDuplicateDevice(
   devices: DeviceData[],
   newDevice: DeviceData