modify color card by data

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}