pending reject handle

src/pages/user/component/ListUser.jsx

@@ -8,11 +8,10 @@ import {
     SearchOutlined,
     CheckOutlined,
     CloseOutlined,
-    KeyOutlined,
 } from '@ant-design/icons';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
-import { deleteUser, getAllUser, approveUser } from '../../../api/user';
+import { deleteUser, getAllUser, approveUser, rejectUser } from '../../../api/user';
 import TableList from '../../../components/Global/TableList';
 import Swal from 'sweetalert2';
 
@@ -55,7 +54,7 @@ const columns = (
     showEditModal,
     showDeleteDialog,
     showApproveDialog,
-    showChangePasswordModal
+    showRejectDialog
 ) => [
     {
         title: 'ID',
@@ -112,28 +111,62 @@ const columns = (
         title: 'Status Approval',
         dataIndex: 'is_approve',
         key: 'is_approve',
-        width: '10%',
+        width: '15%',
         align: 'center',
-        render: (_, { is_approve, is_active }) => {
-            // Status approval
-            if (is_approve === false || is_approve === 0) {
+        render: (_, record) => {
+            // is_approve: 0 = Rejected, 1 = Pending, 2 = Approved
+            if (record.is_approve === 1) {
+                // Pending - show both Approve and Reject buttons
                 return (
-                    <Tag color={'orange'} key={'status'}>
-                        Pending Approval
-                    </Tag>
-                );
-            }
-            // Jika sudah approve, cek active/inactive
-            if (is_active === true || is_active === 1) {
-                return (
-                    <Tag color={'green'} key={'status'}>
-                        Active
+                    <Space size="small">
+                        <Button
+                            danger
+                            size="small"
+                            icon={<CloseOutlined />}
+                            onClick={() => showRejectDialog(record)}
+                        >
+                            Reject
+                        </Button>
+                        <Button
+                            type="primary"
+                            size="small"
+                            icon={<CheckOutlined />}
+                            onClick={() => showApproveDialog(record)}
+                            style={{
+                                backgroundColor: '#52c41a',
+                                borderColor: '#52c41a',
+                            }}
+                        >
+                            Approve
+                        </Button>
+                    </Space>
+                );
+            } else if (record.is_approve === 0) {
+                // Rejected
+                return (
+                    <Tag color={'red'} key={'status'}>
+                        Rejected
+                    </Tag>
+                );
+            } else if (record.is_approve === 2) {
+                // Approved - check active/inactive status
+                if (record.is_active === true || record.is_active === 1) {
+                    return (
+                        <Tag color={'green'} key={'status'}>
+                            Active
+                        </Tag>
+                    );
+                }
+                return (
+                    <Tag color={'default'} key={'status'}>
+                        Inactive
                     </Tag>
                 );
             }
+            // Default fallback
             return (
-                <Tag color={'default'} key={'status'}>
-                    Inactive
+                <Tag color={'orange'} key={'status'}>
+                    Pending
                 </Tag>
             );
         },
@@ -142,7 +175,7 @@ const columns = (
         title: 'Aksi',
         key: 'aksi',
         align: 'center',
-        width: '18%',
+        width: '12%',
         render: (_, record) => (
             <Space>
                 <Button
@@ -151,26 +184,12 @@ const columns = (
                     icon={<EyeOutlined style={{ color: '#1890ff' }} />}
                     onClick={() => showPreviewModal(record)}
                 />
-                {(record.is_approve === false || record.is_approve === 0) && (
-                    <Button
-                        type="text"
-                        style={{ borderColor: '#52c41a' }}
-                        icon={<CheckOutlined style={{ color: '#52c41a' }} />}
-                        onClick={() => showApproveDialog(record)}
-                    />
-                )}
                 <Button
                     type="text"
                     style={{ borderColor: '#faad14' }}
                     icon={<EditOutlined style={{ color: '#faad14' }} />}
                     onClick={() => showEditModal(record)}
                 />
-                <Button
-                    type="text"
-                    style={{ borderColor: '#722ed1' }}
-                    icon={<KeyOutlined style={{ color: '#722ed1' }} />}
-                    onClick={() => showChangePasswordModal(record)}
-                />
                 <Button
                     type="text"
                     danger
@@ -258,6 +277,26 @@ const ListUser = memo(function ListUser(props) {
         });
     };
 
+    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 showDeleteDialog = (param) => {
         NotifConfirmDialog({
             icon: 'question',
@@ -268,11 +307,6 @@ const ListUser = memo(function ListUser(props) {
         });
     };
 
-    const showChangePasswordModal = (param) => {
-        props.setSelectedUserForPassword(param);
-        props.setShowChangePasswordModal(true);
-    };
-
     const handleApprove = async (user_id) => {
         const response = await approveUser(user_id);
         if (response.statusCode == 200) {
@@ -384,8 +418,7 @@ const ListUser = memo(function ListUser(props) {
                                 showPreviewModal,
                                 showEditModal,
                                 showDeleteDialog,
-                                showApproveDialog,
-                                showChangePasswordModal
+                                showApproveDialog
                             )}
                             triger={trigerFilter}
                         />