src/components/Global/CardList.jsx

@@ -12,11 +12,12 @@ const CardList = ({
     showEditModal,
     showDeleteDialog,
     cardColor,
+    fieldColor,
 }) => {
-    const getCardStyle = () => {
-        const color = cardColor ?? '#F3EDEA'; // Orange color
+    const getCardStyle = (color) => {
+        const colorStyle = color ?? '#F3EDEA'; // Orange color
         return {
-            border: `2px solid ${color}`,
+            border: `2px solid ${colorStyle}`,
             borderRadius: '8px',
             textAlign: 'center', // Center text
         };
@@ -47,12 +48,14 @@ const CardList = ({
                                     alignItems: 'center',
                                 }}
                             >
-                                <span style={getTitleStyle(item.color ?? cardColor)}>
+                                <span
+                                    style={getTitleStyle(fieldColor ? item[fieldColor] : cardColor)}
+                                >
                                     {item[header]}
                                 </span>
                             </div>
                         }
-                        style={getCardStyle()}
+                        style={getCardStyle(fieldColor ? item[fieldColor] : cardColor)}
                         actions={[
                             <EyeOutlined
                                 style={{ color: '#1890ff' }}

src/components/Global/TableList.jsx

@@ -17,6 +17,7 @@ const TableList = memo(function TableList({
     showEditModal,
     showDeleteDialog,
     cardColor,
+    fieldColor,
 }) {
     const [gridLoading, setGridLoading] = useState(false);
 
@@ -29,7 +30,7 @@ const TableList = memo(function TableList({
         total_page: 1,
     });
 
-    const [viewMode, setViewMode] = useState('card');
+    const [viewMode, setViewMode] = useState('list');
 
     const { useBreakpoint } = Grid;
 
@@ -98,6 +99,7 @@ const TableList = memo(function TableList({
             {(isMobile && mobile) || viewMode === 'card' ? (
                 <CardList
                     cardColor={cardColor}
+                    fieldColor={fieldColor}
                     data={data}
                     column={columns}
                     header={header}

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

@@ -186,6 +186,7 @@ const ListStatus = memo(function ListStatus(props) {
                     <TableList
                         mobile
                         cardColor={'#42AAFF'}
+                        fieldColor={'status_color'}
                         header={'status_name'}
                         showPreviewModal={showPreviewModal}
                         showEditModal={showEditModal}

src/pages/role/component/ListRole.jsx

@@ -230,6 +230,12 @@ const ListRole = memo(function ListRole(props) {
                     </Col>
                     <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
                         <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'role_name'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
                             getData={getAllRole}
                             queryParams={formDataFilter}
                             columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}

src/pages/user/component/ListUser.jsx

@@ -150,7 +150,11 @@ const columns = (
                         Rejected
                     </Tag>
                 );
-            } else if (record.is_approve === 2 || record.is_approve === '2' || record.is_approve === true) {
+            } else if (
+                record.is_approve === 2 ||
+                record.is_approve === '2' ||
+                record.is_approve === true
+            ) {
                 // Approved
                 return (
                     <Tag color={'green'} key={'status'}>
@@ -174,7 +178,11 @@ const columns = (
         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_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'}>
@@ -450,6 +458,12 @@ const ListUser = memo(function ListUser(props) {
                     </Col>
                     <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
                         <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'user_name'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
                             getData={getAllUser}
                             queryParams={formDataFilter}
                             columns={columns(