radio button color status

src/pages/master/status/component/DetailStatus.jsx

@@ -1,5 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Input, Divider, Typography, Button, ConfigProvider, InputNumber, Switch, Row, Col } from 'antd';
+import {
+    Modal,
+    Input,
+    Divider,
+    Typography,
+    Button,
+    InputNumber,
+    Switch,
+    Row,
+    Col,
+    Radio,
+} from 'antd';
 import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 import { validateRun } from '../../../../Utils/validate';
 import { createStatus, updateStatus } from '../../../../api/master-status';
@@ -7,6 +18,18 @@ import { createStatus, updateStatus } from '../../../../api/master-status';
 const { Text } = Typography;
 const { TextArea } = Input;
 
+// Daftar 8 warna yang tersedia
+const COLOR_OPTIONS = [
+    { label: 'Merah', value: '#EF4444', hex: '#EF4444' },
+    { label: 'Biru', value: '#3B82F6', hex: '#3B82F6' },
+    { label: 'Hijau', value: '#10B981', hex: '#10B981' },
+    { label: 'Kuning', value: '#F59E0B', hex: '#F59E0B' },
+    { label: 'Ungu', value: '#8B5CF6', hex: '#8B5CF6' },
+    { label: 'Pink', value: '#EC4899', hex: '#EC4899' },
+    { label: 'Orange', value: '#F97316', hex: '#F97316' },
+    { label: 'Teal', value: '#14B8A6', hex: '#14B8A6' },
+];
+
 const DetailStatus = (props) => {
     const [confirmLoading, setConfirmLoading] = useState(false);
 
@@ -34,6 +57,10 @@ const DetailStatus = (props) => {
         setFormData({ ...formData, is_active: checked });
     };
 
+    const handleColorChange = (e) => {
+        setFormData({ ...formData, status_color: e.target.value });
+    };
+
     const handleCancel = () => {
         props.setSelectedData(null);
         props.setActionMode('list');
@@ -123,7 +150,14 @@ const DetailStatus = (props) => {
             onCancel={handleCancel}
             footer={
                 !props.readOnly && (
-                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', paddingTop: '15px' }}>
+                    <div
+                        style={{
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            gap: '10px',
+                            paddingTop: '15px',
+                        }}
+                    >
                         <Button onClick={handleCancel}>Batal</Button>
                         <Button type="primary" loading={confirmLoading} onClick={handleSave}>
                             Simpan
@@ -141,7 +175,9 @@ const DetailStatus = (props) => {
                         checked={formData.is_active}
                         onChange={handleStatusToggle}
                     />
-                    <Text style={{ marginLeft: 8 }}>{formData.is_active ? 'Active' : 'Inactive'}</Text>
+                    <Text style={{ marginLeft: 8 }}>
+                        {formData.is_active ? 'Active' : 'Inactive'}
+                    </Text>
                 </div>
             </div>
             <Row gutter={16}>
@@ -176,13 +212,40 @@ const DetailStatus = (props) => {
             <div style={{ marginBottom: 12 }}>
                 <Text strong>Status Color</Text>
                 <Text style={{ color: 'red' }}> *</Text>
-                <Input
-                    name="status_color"
-                    value={formData.status_color}
-                    placeholder="Masukan warna status (e.g., hijau, #00ff00)"
-                    readOnly={props.readOnly}
-                    onChange={handleInputChange}
-                />
+                <div style={{ marginTop: '8px' }}>
+                    <Radio.Group
+                        onChange={handleColorChange}
+                        value={formData.status_color}
+                        disabled={props.readOnly}
+                    >
+                        <Row gutter={[8, 8]}>
+                            {COLOR_OPTIONS.map((color) => (
+                                <Col span={12} key={color.value}>
+                                    <Radio value={color.value} style={{ width: '100%' }}>
+                                        <div
+                                            style={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '8px',
+                                            }}
+                                        >
+                                            <div
+                                                style={{
+                                                    width: '20px',
+                                                    height: '20px',
+                                                    backgroundColor: color.hex,
+                                                    borderRadius: '4px',
+                                                    border: '1px solid #d9d9d9',
+                                                }}
+                                            />
+                                            <span>{color.label}</span>
+                                        </div>
+                                    </Radio>
+                                </Col>
+                            ))}
+                        </Row>
+                    </Radio.Group>
+                </div>
             </div>
             <div style={{ marginBottom: 12 }}>
                 <Text strong>Description</Text>
@@ -199,4 +262,4 @@ const DetailStatus = (props) => {
     );
 };
 
-export default DetailStatus;
+export default DetailStatus;