From 0ca2169a12e1e48b06f7436b32223d36b84e6f2b Mon Sep 17 00:00:00 2001
From: Fachba <fachrulsecond@gmail.com>
Date: Sun, 26 Apr 2026 13:40:10 +0700
Subject: [PATCH] Refactor DetailDevice component: update form fields to
 include 'listen_channel_reminder' and 'reminder_at', replace 'scheduler_date'
 with 'reminder_at', and improve layout for input fields.

---
 .../master/device/component/DetailDevice.jsx  | 141 ++++++++++++------
 1 file changed, 93 insertions(+), 48 deletions(-)

diff --git a/src/pages/master/device/component/DetailDevice.jsx b/src/pages/master/device/component/DetailDevice.jsx
index 1015e74..8ba0c7b 100644
--- a/src/pages/master/device/component/DetailDevice.jsx
+++ b/src/pages/master/device/component/DetailDevice.jsx
@@ -1,5 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Divider, Typography, Switch, Button, ConfigProvider, Select, DatePicker } from 'antd';
+import {
+    Modal,
+    Input,
+    Divider,
+    Typography,
+    Switch,
+    Button,
+    ConfigProvider,
+    Select,
+    DatePicker,
+} from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { createDevice, updateDevice } from '../../../../api/master-device';
 import { getAllBrands } from '../../../../api/master-brand';
@@ -14,8 +24,6 @@ const DetailDevice = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
     const [brands, setBrands] = useState([]);
     const [loadingBrands, setLoadingBrands] = useState(false);
-    const dateNow = dayjs();
-    const [schedulerDate, setSchedulerDate] = useState(dateNow);
 
     const defaultData = {
         device_id: '',
@@ -27,7 +35,7 @@ const DetailDevice = (props) => {
         device_location: '',
         device_description: '',
         ip_address: '',
-        scheduler_date: '',
+        reminder_at: null,
         listen_channel: '',
     };
 
@@ -46,7 +54,6 @@ const DetailDevice = (props) => {
             { field: 'device_name', label: 'Device Name', required: true },
             { field: 'ip_address', label: 'Ip Address', required: true, ip: true },
             { field: 'brand_id', label: 'Brand Device', required: true },
-            { field: 'scheduler_date', label: 'Tanggaln(Scheduler)', required: true },
         ];
 
         if (
@@ -73,35 +80,36 @@ const DetailDevice = (props) => {
                 ip_address: formData.ip_address,
                 brand_id: formData.brand_id,
                 listen_channel: formData.listen_channel,
-                scheduler_date: toApiDateFormatter(formData.scheduler_date)
+                listen_channel_reminder: formData.listen_channel_reminder,
+                reminder_at: formData.reminder_at,
             };
 
             console.log(payload);
 
-            // const response = formData.device_id
-            //     ? await updateDevice(formData.device_id, payload)
-            //     : await createDevice(payload);
+            const response = formData.device_id
+                ? await updateDevice(formData.device_id, payload)
+                : await createDevice(payload);
 
-            // // Check if response is successful
-            // if (response && (response.statusCode === 200 || response.statusCode === 201)) {
-            //     const deviceName = response.data?.device_name || formData.device_name;
+            // Check if response is successful
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                const deviceName = response.data?.device_name || formData.device_name;
 
-            //     NotifOk({
-            //         icon: 'success',
-            //         title: 'Berhasil',
-            //         message: `Data Device "${deviceName}" berhasil ${
-            //             formData.device_id ? 'diubah' : 'ditambahkan'
-            //         }.`,
-            //     });
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Device "${deviceName}" berhasil ${
+                        formData.device_id ? 'diubah' : 'ditambahkan'
+                    }.`,
+                });
 
-            //     props.setActionMode('list');
-            // } else {
-            //     NotifAlert({
-            //         icon: 'error',
-            //         title: 'Gagal',
-            //         message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
-            //     });
-            // }
+                props.setActionMode('list');
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
+                });
+            }
         } catch (error) {
             console.error('Save Device Error:', error);
             NotifAlert({
@@ -185,8 +193,8 @@ const DetailDevice = (props) => {
                 props.actionMode === 'add'
                     ? 'Tambah'
                     : props.actionMode === 'preview'
-                    ? 'Preview'
-                    : 'Edit'
+                      ? 'Preview'
+                      : 'Edit'
             } Device`}
             open={props.showModal}
             // open={true}
@@ -234,7 +242,7 @@ const DetailDevice = (props) => {
                 </React.Fragment>,
             ]}
         >
-            <Divider/>
+            <Divider />
             {formData && (
                 <div>
                     <div style={{ marginBottom: 12 }}>
@@ -347,26 +355,63 @@ const DetailDevice = (props) => {
                             readOnly={props.readOnly}
                         />
                     </div>
-                    <div style={{ marginBottom: 12 }}>
-                        <Text strong>Listen Channel</Text>
-                        <Input
-                            name="listen_channel"
-                            value={formData.listen_channel}
-                            onChange={handleInputChange}
-                            placeholder="Enter Listen Channel"
-                            readOnly={props.readOnly}
-                        />
+                    <div style={{ marginBottom: 12 }}></div>
+                    <div style={{ marginBottom: 12 }}></div>
+                    <div style={{ display: 'flex', gap: 16 }}>
+                        <div style={{ flex: 1 }}>
+                            {' '}
+                            <Text strong>Channel Error</Text>
+                            <Input
+                                name="listen_channel"
+                                value={formData.listen_channel}
+                                onChange={handleInputChange}
+                                placeholder="Enter Listen Channel"
+                                readOnly={props.readOnly}
+                            />
+                        </div>
+                        <div style={{ flex: 1 }}>
+                            <Text strong>Channel Reminder</Text>
+                            <Input
+                                name="listen_channel_reminder"
+                                value={formData.listen_channel_reminder}
+                                onChange={handleInputChange}
+                                placeholder="Enter Listen Channel Reminder"
+                                readOnly={props.readOnly}
+                            />
+                        </div>
                     </div>
                     <div style={{ marginBottom: 12 }}>
-                        <Text strong>Scheduler Date</Text>
-                        <DatePicker
-                            value={formData.scheduler_date ? dayjs(formData.scheduler_date, 'DD-MM-YYYY') : ''}
-                            onChange={(date, dateString) =>
-                                handleDateChange("scheduler_date", dateString)
-                            }
-                            format="DD-MM-YYYY"
-                            style={{ width: '100%', marginTop: '4px' }}
-                        />
+                        <Text strong>Reminder At</Text>
+                        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                            <DatePicker
+                                value={
+                                    formData.reminder_at
+                                        ? dayjs(formData.reminder_at) // ✅ langsung parse ISO
+                                        : null
+                                }
+                                onChange={(date) =>
+                                    handleDateChange(
+                                        'reminder_at',
+                                        date ? date.toISOString() : null
+                                    )
+                                }
+                                format="DD-MM-YYYY HH:mm"
+                                showTime={{ format: 'HH:mm' }}
+                                style={{ flex: 1 }}
+                            />
+
+                            <Button
+                                danger
+                                onClick={() =>
+                                    setFormData((prev) => ({
+                                        ...prev,
+                                        reminder_at: null,
+                                    }))
+                                }
+                            >
+                                Clear
+                            </Button>
+                        </div>
                     </div>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Device Description</Text>