From 98e5ed250c9c9b2ebe4d51276c7d63c7fe54ac9c Mon Sep 17 00:00:00 2001
From: Fachba <fachrulsecond@gmail.com>
Date: Wed, 22 Oct 2025 16:11:52 +0700
Subject: [PATCH] modify color card by data

---
 src/components/Global/CardList.jsx             | 13 ++++++++-----
 src/components/Global/TableList.jsx            |  4 +++-
 .../master/status/component/ListStatus.jsx     |  1 +
 src/pages/role/component/ListRole.jsx          |  6 ++++++
 src/pages/user/component/ListUser.jsx          | 18 ++++++++++++++++--
 5 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/Global/CardList.jsx b/src/components/Global/CardList.jsx
index 39b7693..262b8ba 100644
--- a/src/components/Global/CardList.jsx
+++ b/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' }}
diff --git a/src/components/Global/TableList.jsx b/src/components/Global/TableList.jsx
index 3f50c5e..7f495fe 100644
--- a/src/components/Global/TableList.jsx
+++ b/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}
diff --git a/src/pages/master/status/component/ListStatus.jsx b/src/pages/master/status/component/ListStatus.jsx
index 25c773e..864af92 100644
--- a/src/pages/master/status/component/ListStatus.jsx
+++ b/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}
diff --git a/src/pages/role/component/ListRole.jsx b/src/pages/role/component/ListRole.jsx
index 2f9ac2e..03d9631 100644
--- a/src/pages/role/component/ListRole.jsx
+++ b/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)}
diff --git a/src/pages/user/component/ListUser.jsx b/src/pages/user/component/ListUser.jsx
index 3b0a915..b580830 100644
--- a/src/pages/user/component/ListUser.jsx
+++ b/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(