template card or table in component table list

src/components/Global/CardList.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Card, Button, Row, Col, Typography, Space, Tag } from 'antd';
+import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
+
+const { Text } = Typography;
+
+const CardList = ({
+    data,
+    column,
+    header,
+    showPreviewModal,
+    showEditModal,
+    showDeleteDialog,
+    cardColor,
+}) => {
+    const getCardStyle = () => {
+        const color = cardColor ?? '#F3EDEA'; // Orange color
+        return {
+            border: `2px solid ${color}`,
+            borderRadius: '8px',
+            textAlign: 'center', // Center text
+        };
+    };
+
+    const getTitleStyle = (color) => {
+        const backgroundColor = color ?? '#FCF2ED';
+        return {
+            backgroundColor,
+            color: '#fff',
+            padding: '2px 8px',
+            borderRadius: '4px',
+            display: 'inline-block', // ganti inline-block → block
+            width: 'fit-content', // biar lebarnya tetap menyesuaikan teks
+        };
+    };
+
+    return (
+        <Row gutter={[16, 16]} style={{ marginTop: '16px', justifyContent: 'left' }}>
+            {data.map((item) => (
+                <Col xs={24} sm={24} md={12} lg={8} key={item.device_id}>
+                    <Card
+                        title={
+                            <div
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'space-between', // kiri & kanan
+                                    alignItems: 'center',
+                                }}
+                            >
+                                <span style={getTitleStyle(item.color ?? cardColor)}>
+                                    {item[header]}
+                                </span>
+                            </div>
+                        }
+                        style={getCardStyle()}
+                        actions={[
+                            <Space
+                                size="middle"
+                                style={{ display: 'flex', justifyContent: 'center' }}
+                            >
+                                <Button
+                                    type="text"
+                                    style={{ color: '#1890ff' }}
+                                    icon={<EyeOutlined />}
+                                    onClick={() => showPreviewModal(item)}
+                                />
+                                <Button
+                                    type="text"
+                                    style={{ color: '#faad14' }}
+                                    icon={<EditOutlined />}
+                                    onClick={() => showEditModal(item)}
+                                />
+                                <Button
+                                    type="text"
+                                    danger
+                                    icon={<DeleteOutlined />}
+                                    onClick={() => showDeleteDialog(item)}
+                                />
+                            </Space>,
+                        ]}
+                    >
+                        <div style={{ textAlign: 'left' }}>
+                            {column.map((itemCard) => (
+                                <>
+                                    {!itemCard.hidden && !itemCard.render && (
+                                        <p>
+                                            <Text strong>{itemCard.title}:</Text>{' '}
+                                            {item[itemCard.key]}
+                                        </p>
+                                    )}
+                                    {itemCard.render && itemCard.render}
+                                </>
+                            ))}
+                        </div>
+                    </Card>
+                </Col>
+            ))}
+        </Row>
+    );
+};
+
+export default CardList;