From 23db97469515cc0c11b1b7ad700b1e78336f4324 Mon Sep 17 00:00:00 2001
From: Rafiafrzl <mrafiafrizal0@gmail.com>
Date: Wed, 15 Oct 2025 22:19:16 +0700
Subject: [PATCH] feat: add alarm toggle functionality in DetailTag component

---
 src/pages/master/tag/component/DetailTag.jsx | 86 ++++++++++++++++----
 1 file changed, 70 insertions(+), 16 deletions(-)

diff --git a/src/pages/master/tag/component/DetailTag.jsx b/src/pages/master/tag/component/DetailTag.jsx
index 0df8612..d7accc7 100644
--- a/src/pages/master/tag/component/DetailTag.jsx
+++ b/src/pages/master/tag/component/DetailTag.jsx
@@ -23,6 +23,7 @@ const DetailTag = (props) => {
         unit: '',
         device_name: '', // Read-only, auto-display dari device yang dipilih
         is_active: true,
+        alarm: false,
         device_id: null, // akan set ketika user select device dari dropdown
         sub_section_id: null,
     };
@@ -144,6 +145,7 @@ const DetailTag = (props) => {
             data_type: FormData.data_type,
             unit: FormData.unit,
             is_active: FormData.is_active,
+            alarm: FormData.alarm,
             device_id: parseInt(FormData.device_id),
         };
 
@@ -221,6 +223,13 @@ const DetailTag = (props) => {
         });
     };
 
+    const handleAlarmToggle = (isChecked) => {
+        setFormData({
+            ...FormData,
+            alarm: isChecked,
+        });
+    };
+
     const loadDevices = async () => {
         setLoadingDevices(true);
         try {
@@ -276,6 +285,7 @@ const DetailTag = (props) => {
                     unit: props.selectedData.unit || '',
                     device_name: props.selectedData.device_name || '',
                     is_active: props.selectedData.is_active ?? true,
+                    alarm: props.selectedData.alarm ?? false,
                     device_id: props.selectedData.device_id || null,
                     sub_section_id: props.selectedData.sub_section_id || null,
                 };
@@ -365,31 +375,75 @@ const DetailTag = (props) => {
                             />
                         </div>
                     )}
-                    {/* Status dipindah ke atas Tag Name */}
+                    {/* Status dan Alarm dalam satu baris */}
                     <div style={{ marginBottom: 12 }}>
-                        <div>
-                            <Text strong>Status</Text>
-                        </div>
                         <div
                             style={{
                                 display: 'flex',
-                                alignItems: 'center',
-                                marginTop: '8px',
+                                justifyContent: 'space-between',
+                                gap: '16px',
                             }}
                         >
-                            <div style={{ marginRight: '8px' }}>
-                                <Switch
-                                    disabled={props.readOnly}
+                            {/* Status Toggle */}
+                            <div style={{ flex: 1 }}>
+                                <div>
+                                    <Text strong>Status</Text>
+                                </div>
+                                <div
                                     style={{
-                                        backgroundColor:
-                                            FormData.is_active === true ? '#23A55A' : '#bfbfbf',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        marginTop: '8px',
                                     }}
-                                    checked={FormData.is_active === true}
-                                    onChange={handleStatusToggle}
-                                />
+                                >
+                                    <div style={{ marginRight: '8px' }}>
+                                        <Switch
+                                            disabled={props.readOnly}
+                                            style={{
+                                                backgroundColor:
+                                                    FormData.is_active === true
+                                                        ? '#23A55A'
+                                                        : '#bfbfbf',
+                                            }}
+                                            checked={FormData.is_active === true}
+                                            onChange={handleStatusToggle}
+                                        />
+                                    </div>
+                                    <div>
+                                        <Text>
+                                            {FormData.is_active === true ? 'Active' : 'Inactive'}
+                                        </Text>
+                                    </div>
+                                </div>
                             </div>
-                            <div>
-                                <Text>{FormData.is_active === true ? 'Active' : 'Inactive'}</Text>
+                            {/* Alarm Toggle */}
+                            <div style={{ flex: 1 }}>
+                                <div>
+                                    <Text strong>Alarm</Text>
+                                    <Text style={{ color: 'red' }}> *</Text>
+                                </div>
+                                <div
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        marginTop: '8px',
+                                    }}
+                                >
+                                    <div style={{ marginRight: '8px' }}>
+                                        <Switch
+                                            disabled={props.readOnly}
+                                            style={{
+                                                backgroundColor:
+                                                    FormData.alarm === true ? '#23A55A' : '#bfbfbf',
+                                            }}
+                                            checked={FormData.alarm === true}
+                                            onChange={handleAlarmToggle}
+                                        />
+                                    </div>
+                                    <div>
+                                        <Text>{FormData.alarm === true ? 'Yes' : 'No'}</Text>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>