color picker

src/pages/user/component/ListUser.jsx

@@ -1,5 +1,5 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input, Modal } from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
@@ -8,6 +8,7 @@ import {
     SearchOutlined,
     CheckOutlined,
     CloseOutlined,
+    ClockCircleOutlined,
 } from '@ant-design/icons';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
@@ -49,13 +50,7 @@ const getRoleColor = (role_name, role_level) => {
     return 'default';
 };
 
-const columns = (
-    showPreviewModal,
-    showEditModal,
-    showDeleteDialog,
-    showApproveDialog,
-    showRejectDialog
-) => [
+const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApprovalModal) => [
     {
         title: 'ID',
         dataIndex: 'user_id',
@@ -116,32 +111,22 @@ const columns = (
         render: (_, record) => {
             // is_approve: 0 = Rejected, 1 = Pending, 2 = Approved
             if (record.is_approve === 1 || record.is_approve === '1') {
-                // Pending - show both Approve and Reject buttons
+                // Pending - show single Pending button
                 return (
-                    <Space size="small" direction="vertical">
-                        <Button
-                            type="primary"
-                            size="small"
-                            icon={<CheckOutlined />}
-                            onClick={() => showApproveDialog(record)}
-                            style={{
-                                backgroundColor: '#52c41a',
-                                borderColor: '#52c41a',
-                                width: '100%',
-                            }}
-                        >
-                            Approve
-                        </Button>
-                        <Button
-                            danger
-                            size="small"
-                            icon={<CloseOutlined />}
-                            onClick={() => showRejectDialog(record)}
-                            style={{ width: '100%' }}
-                        >
-                            Reject
-                        </Button>
-                    </Space>
+                    <Button
+                        type="default"
+                        size="small"
+                        icon={<ClockCircleOutlined />}
+                        onClick={() => showApprovalModal(record)}
+                        style={{
+                            backgroundColor: '#faad14',
+                            borderColor: '#faad14',
+                            color: 'white',
+                            width: '100%',
+                        }}
+                    >
+                        Pending
+                    </Button>
                 );
             } else if (record.is_approve === 0 || record.is_approve === '0') {
                 // Rejected
@@ -233,6 +218,8 @@ const columns = (
 const ListUser = memo(function ListUser(props) {
     const [showFilter, setShowFilter] = useState(false);
     const [trigerFilter, setTrigerFilter] = useState(false);
+    const [approvalModalVisible, setApprovalModalVisible] = useState(false);
+    const [selectedUser, setSelectedUser] = useState(null);
 
     const defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
@@ -285,44 +272,30 @@ const ListUser = memo(function ListUser(props) {
         props.setActionMode('add');
     };
 
-    const showApproveDialog = (param) => {
-        Swal.fire({
-            icon: 'question',
-            title: 'Konfirmasi Approve User',
-            text: 'Apakah anda yakin approve user "' + param.user_fullname + '" ?',
-            showCancelButton: true,
-            cancelButtonColor: '#d33',
-            cancelButtonText: 'Batal',
-            confirmButtonColor: '#23A55A',
-            confirmButtonText: 'Approve',
-            reverseButtons: true,
-        }).then((result) => {
-            if (result.isConfirmed) {
-                handleApprove(param.user_id);
-            } else if (result.dismiss) {
-                props.setSelectedData(null);
-            }
-        });
+    const showApprovalModal = (param) => {
+        setSelectedUser(param);
+        setApprovalModalVisible(true);
     };
 
-    const showRejectDialog = (param) => {
-        Swal.fire({
-            icon: 'warning',
-            title: 'Konfirmasi Reject User',
-            text: 'Apakah anda yakin reject user "' + param.user_fullname + '" ?',
-            showCancelButton: true,
-            cancelButtonColor: '#23A55A',
-            cancelButtonText: 'Batal',
-            confirmButtonColor: '#d33',
-            confirmButtonText: 'Reject',
-            reverseButtons: true,
-        }).then((result) => {
-            if (result.isConfirmed) {
-                handleReject(param.user_id);
-            } else if (result.dismiss) {
-                props.setSelectedData(null);
-            }
-        });
+    const handleModalApprove = () => {
+        if (selectedUser) {
+            handleApprove(selectedUser.user_id);
+            setApprovalModalVisible(false);
+            setSelectedUser(null);
+        }
+    };
+
+    const handleModalReject = () => {
+        if (selectedUser) {
+            handleReject(selectedUser.user_id);
+            setApprovalModalVisible(false);
+            setSelectedUser(null);
+        }
+    };
+
+    const handleModalCancel = () => {
+        setApprovalModalVisible(false);
+        setSelectedUser(null);
     };
 
     const showDeleteDialog = (param) => {
@@ -470,14 +443,46 @@ const ListUser = memo(function ListUser(props) {
                                 showPreviewModal,
                                 showEditModal,
                                 showDeleteDialog,
-                                showApproveDialog,
-                                showRejectDialog
+                                showApprovalModal
                             )}
                             triger={trigerFilter}
                         />
                     </Col>
                 </Row>
             </Card>
+
+            {/* Approval Modal */}
+            <Modal
+                title="Konfirmasi Persetujuan User"
+                open={approvalModalVisible}
+                onCancel={handleModalCancel}
+                footer={[
+                    <Button key="reject" danger onClick={handleModalReject}>
+                        Reject User
+                    </Button>,
+                    <Button
+                        key="approve"
+                        type="primary"
+                        style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}
+                        onClick={handleModalApprove}
+                    >
+                        Approve User
+                    </Button>,
+                ]}
+                width={400}
+            >
+                <div style={{ textAlign: 'center', padding: '20px 0' }}>
+                    <ClockCircleOutlined
+                        style={{ fontSize: '48px', color: '#faad14', marginBottom: '16px' }}
+                    />
+                    <p style={{ fontSize: '16px', margin: '16px 0' }}>
+                        User: <strong>{selectedUser?.user_fullname}</strong>
+                    </p>
+                    <p style={{ color: '#666', margin: '8px 0' }}>
+                        Apakah Anda ingin approve atau reject user ini?
+                    </p>
+                </div>
+            </Modal>
         </React.Fragment>
     );
 });