src/api/user.jsx

@@ -169,6 +169,22 @@ const rejectUser = async (user_id) => {
     };
 };
 
+const toggleActiveUser = async (user_id, is_active) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `user/${user_id}`,
+        params: {
+            is_active: is_active
+        },
+    });
+    // Return full response with statusCode
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
 const changePassword = async (user_id, new_password) => {
     const response = await SendRequest({
         method: 'put',
@@ -188,4 +204,4 @@ const changePassword = async (user_id, new_password) => {
     };
 };
 
-export { getAllUser, getUserById, createUser, updateUser, deleteUser, approveUser, rejectUser, changePassword };
+export { getAllUser, getUserById, createUser, updateUser, deleteUser, approveUser, rejectUser, toggleActiveUser, changePassword };

src/pages/user/component/DetailUser.jsx

@@ -219,6 +219,8 @@ const DetailUser = (props) => {
             if (FormData.user_email !== originalEmail) {
                 payload.user_email = FormData.user_email;
             }
+            // Add is_active for update mode
+            payload.is_active = FormData.is_active;
         } else {
             // For create mode: always send email
             payload.user_email = FormData.user_email;
@@ -233,11 +235,11 @@ const DetailUser = (props) => {
         if (!FormData.user_id) {
             payload.user_name = FormData.user_name; // Username only for create
             payload.user_password = FormData.password; // Backend expects 'user_password'
-            // Don't send confirmPassword, is_sa, is_active for create
+            // Don't send confirmPassword, is_sa for create
         }
         // For update mode:
         // - Don't send 'user_name' (username is immutable)
-        // - Don't send 'is_active' (backend validation schema doesn't allow it)
+        // - is_active is now sent for update mode
         // - Only send email if it has changed
 
         try {

src/pages/user/component/ListUser.jsx

@@ -115,18 +115,10 @@ const columns = (
         align: 'center',
         render: (_, record) => {
             // is_approve: 0 = Rejected, 1 = Pending, 2 = Approved
-            if (record.is_approve === 1) {
+            if (record.is_approve === 1 || record.is_approve === '1') {
                 // Pending - show both Approve and Reject buttons
                 return (
-                    <Space size="small">
-                        <Button
-                            danger
-                            size="small"
-                            icon={<CloseOutlined />}
-                            onClick={() => showRejectDialog(record)}
-                        >
-                            Reject
-                        </Button>
+                    <Space size="small" direction="vertical">
                         <Button
                             type="primary"
                             size="small"
@@ -135,35 +127,38 @@ const columns = (
                             style={{
                                 backgroundColor: '#52c41a',
                                 borderColor: '#52c41a',
+                                width: '100%',
                             }}
                         >
                             Approve
                         </Button>
+                        <Button
+                            danger
+                            size="small"
+                            icon={<CloseOutlined />}
+                            onClick={() => showRejectDialog(record)}
+                            style={{ width: '100%' }}
+                        >
+                            Reject
+                        </Button>
                     </Space>
                 );
-            } else if (record.is_approve === 0) {
+            } else if (record.is_approve === 0 || 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>
-                    );
-                }
+            } else if (record.is_approve === 2 || record.is_approve === '2' || record.is_approve === true) {
+                // Approved
                 return (
-                    <Tag color={'default'} key={'status'}>
-                        Inactive
+                    <Tag color={'green'} key={'status'}>
+                        Approved
                     </Tag>
                 );
             }
-            // Default fallback
+            // Default fallback (for false/null which means pending in old system)
             return (
                 <Tag color={'orange'} key={'status'}>
                     Pending
@@ -171,6 +166,31 @@ const columns = (
             );
         },
     },
+    {
+        title: 'Status Active',
+        dataIndex: 'is_active',
+        key: 'is_active',
+        width: '10%',
+        align: 'center',
+        render: (_, record) => {
+            // Only show active status if user is approved
+            if (record.is_approve === 2 || record.is_approve === '2' || record.is_approve === true) {
+                if (record.is_active === true || record.is_active === 1) {
+                    return (
+                        <Tag color={'green'} key={'active'}>
+                            Active
+                        </Tag>
+                    );
+                }
+                return (
+                    <Tag color={'default'} key={'inactive'}>
+                        Inactive
+                    </Tag>
+                );
+            }
+            return <span>-</span>;
+        },
+    },
     {
         title: 'Aksi',
         key: 'aksi',
@@ -325,6 +345,24 @@ const ListUser = memo(function ListUser(props) {
         }
     };
 
+    const handleReject = async (user_id) => {
+        const response = await rejectUser(user_id);
+        if (response.statusCode == 200) {
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'User berhasil direject.',
+            });
+            doFilter();
+        } else {
+            NotifOk({
+                icon: 'error',
+                title: 'Gagal',
+                message: 'Gagal Reject User',
+            });
+        }
+    };
+
     const handleDelete = async (user_id, user_fullname) => {
         const response = await deleteUser(user_id);
 
@@ -418,7 +456,8 @@ const ListUser = memo(function ListUser(props) {
                                 showPreviewModal,
                                 showEditModal,
                                 showDeleteDialog,
-                                showApproveDialog
+                                showApproveDialog,
+                                showRejectDialog
                             )}
                             triger={trigerFilter}
                         />