From c3b5ec212134e1dbe647c1cfb6a05cb21e9556c0 Mon Sep 17 00:00:00 2001
From: vinix <nzxtvinix@gmail.com>
Date: Fri, 10 Oct 2025 15:44:46 +0700
Subject: [PATCH] feat: refactor role display with dynamic colors and
 capitalize

- Add helper function capitalizeFirstLetter for consistent formatting
- Add helper function getRoleColor to determine tag color by role_level or role_name
- Refactor role_name column render to use dynamic helpers
- Replace 30+ lines of hardcoded conditions with 8 lines of clean code
- Support any role name from database without code changes
- Display role names with first letter capitalized
- Color mapping: Level 1=purple, Level 2=blue, Level 3=cyan, Level 4=green
- Add KeyOutlined icon import for change password feature
---
 src/pages/user/component/ListUser.jsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/pages/user/component/ListUser.jsx b/src/pages/user/component/ListUser.jsx
index ed6dc51..b6b78bd 100644
--- a/src/pages/user/component/ListUser.jsx
+++ b/src/pages/user/component/ListUser.jsx
@@ -8,6 +8,7 @@ import {
     SearchOutlined,
     CheckOutlined,
     CloseOutlined,
+    KeyOutlined,
 } from '@ant-design/icons';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
@@ -49,7 +50,7 @@ const getRoleColor = (role_name, role_level) => {
     return 'default';
 };
 
-const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveDialog) => [
+const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveDialog, showChangePasswordModal) => [
     {
         title: 'ID',
         dataIndex: 'user_id',
@@ -135,7 +136,7 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveD
         title: 'Aksi',
         key: 'aksi',
         align: 'center',
-        width: '15%',
+        width: '18%',
         render: (_, record) => (
             <Space>
                 <Button
@@ -158,6 +159,12 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveD
                     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
@@ -255,6 +262,11 @@ 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) {
@@ -366,7 +378,8 @@ const ListUser = memo(function ListUser(props) {
                                 showPreviewModal,
                                 showEditModal,
                                 showDeleteDialog,
-                                showApproveDialog
+                                showApproveDialog,
+                                showChangePasswordModal
                             )}
                             triger={trigerFilter}
                         />