From 53a3e03c86cd232ff05c4b58d930b3f02604081f Mon Sep 17 00:00:00 2001
From: dikapratana <dikapratana11@gmail.com>
Date: Mon, 26 Jan 2026 14:41:33 +0700
Subject: [PATCH] add command api on submit device

---
 src/features/device/add/index.tsx      | 49 ++++++++++++++++++--------
 src/features/home/sections/devices.tsx |  6 +++-
 2 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/features/device/add/index.tsx b/src/features/device/add/index.tsx
index a98f801..f130d12 100644
--- a/src/features/device/add/index.tsx
+++ b/src/features/device/add/index.tsx
@@ -1,19 +1,16 @@
 import { useState } from "react";
-import {
-  getDevices,
-  saveDevices,
-  getMerchant,
-} from "../../../utils/storage";
+import { getDevices, saveDevices, getMerchant } from "../../../utils/storage";
 import { useNavigate } from "@tanstack/react-router";
-
-
+import { useDeviceCommand } from "../../home/hooks/mutations";
 
 export default function AddDeviceFeature() {
-  const [form, setForm] = useState<DeviceData | null >(null);
+  const [form, setForm] = useState<DeviceData | null>(null);
   const navigate = useNavigate();
 
   const merchant = getMerchant();
 
+  const { isPending, mutate } = useDeviceCommand();
+
   const isMerchantValid =
     merchant?.merchantName &&
     merchant?.tower &&
@@ -27,7 +24,7 @@ export default function AddDeviceFeature() {
     form?.deviceLabel?.trim();
 
   function handleChange(
-    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
   ) {
     const { name, value } = e.target;
     setForm((prev) => ({ ...prev, [name]: value }));
@@ -36,9 +33,9 @@ export default function AddDeviceFeature() {
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (!isMerchantValid || !isFormValid) return;
-    
+
     const devices = getDevices();
-    
+
     const deviceToSave: DeviceData = {
       ...form,
       id: new Date().getTime().toString(),
@@ -47,10 +44,32 @@ export default function AddDeviceFeature() {
       unitNumber: merchant.unit,
       deviceLabel: form?.deviceLabel,
     };
-    
+
     saveDevices([...devices, deviceToSave]);
-    setForm(null);
-    navigate({ to: "/" });
+
+    mutate(
+      {
+        merchantName: merchant.merchantName,
+        towerNumber: merchant.tower,
+        floorName: merchant.floor,
+        unitNumber: merchant.unit,
+        commandType: "C",
+        deviceName: form?.deviceName,
+        deviceType: form?.deviceType,
+        payload: { action: "On" },
+        roomName: form?.roomName,
+      },
+      {
+        onSuccess: () => {
+          setForm(null);
+          navigate({ to: "/" });
+        },
+        onError: () => {
+          setForm(null);
+          navigate({ to: "/" });
+        },
+      },
+    );
   }
 
   return (
@@ -125,7 +144,7 @@ export default function AddDeviceFeature() {
 
       <button
         type="submit"
-        disabled={!isMerchantValid || !isFormValid}
+        disabled={!isMerchantValid || !isFormValid || isPending}
         className="
           w-full py-2 rounded-lg mt-8 text-white cursor-pointer
           bg-orange-500
diff --git a/src/features/home/sections/devices.tsx b/src/features/home/sections/devices.tsx
index 8946081..da53eab 100644
--- a/src/features/home/sections/devices.tsx
+++ b/src/features/home/sections/devices.tsx
@@ -3,6 +3,7 @@ import {
   ChefHat,
   DoorClosed,
   Fan,
+  ImageOff,
   Lightbulb,
   Minus,
   Plus,
@@ -158,7 +159,7 @@ export default function Devices() {
                   <div
                     className={`h-12 w-12 rounded-full flex justify-center items-center ${item.status ? "bg-orange-500 text-white" : "bg-gray-200 text-gray-700"}`}
                   >
-                    {icons[item.deviceName as keyof typeof icons]?.icon}
+                    {icons[item.deviceName as keyof typeof icons]?.icon  ?? <ImageOff size={24} />}
                   </div>
                   {!["FT1"].includes(item.deviceName ?? "") && (
                     <Switch
@@ -189,6 +190,9 @@ export default function Devices() {
                   {icons[item.deviceName as keyof typeof icons]?.label ??
                     item.deviceName}
                 </p>
+                <p className="text-xs font-medium text-gray-700 mb-2">
+                  Kode: {item.deviceType}/{item.deviceName}
+                </p>
                 <p className="text-xs font-medium text-gray-700 mb-2">
                   Status: {item?.payload?.toString()}
                 </p>