From 9fc1c7cb406c075d423e8da5f758531465262e96 Mon Sep 17 00:00:00 2001
From: Iqbal Rizqi Kurniawan <iqbalrzq20@gmail.com>
Date: Tue, 14 Oct 2025 19:06:23 +0700
Subject: [PATCH] feat: implement card view for device listing with actions for
 preview, edit, and delete

---
 .../master/device/component/CardDevice.jsx    | 84 +++++++++++++++++++
 .../master/device/component/ListDevice.jsx    | 75 ++++++++++-------
 2 files changed, 131 insertions(+), 28 deletions(-)
 create mode 100644 src/pages/master/device/component/CardDevice.jsx

diff --git a/src/pages/master/device/component/CardDevice.jsx b/src/pages/master/device/component/CardDevice.jsx
new file mode 100644
index 0000000..eb2ad74
--- /dev/null
+++ b/src/pages/master/device/component/CardDevice.jsx
@@ -0,0 +1,84 @@
+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 CardDevice = ({ data, showPreviewModal, showEditModal, showDeleteDialog }) => {
+    const getCardStyle = () => {
+        const color = '#FF8C42'; // Orange color
+        return {
+            border: `2px solid ${color}`,
+            borderRadius: '8px',
+            textAlign: 'center' // Center text
+        };
+    };
+
+    const getTitleStyle = () => {
+        const backgroundColor = '#FF8C42'; // Orange color
+        return {
+            backgroundColor,
+            color: '#fff',
+            padding: '2px 8px',
+            borderRadius: '4px',
+            display: 'inline-block',
+        };
+    };
+
+    return (
+        <Row gutter={[16, 16]} style={{ marginTop: '16px', justifyContent: 'center' }}>
+            {data.map((item) => (
+                <Col xs={24} sm={12} md={8} lg={6} key={item.device_id}>
+                    <Card
+                        title={
+                            <span style={getTitleStyle()}>
+                                {item.device_name}
+                            </span>
+                        }
+                        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>,
+                        ]}
+                    >
+                        <p>
+                            <Text strong>Code:</Text> {item.device_code}
+                        </p>
+                        <p>
+                            <Text strong>Location:</Text> {item.device_location}
+                        </p>
+                        <p>
+                            <Text strong>IP Address:</Text> {item.ip_address}
+                        </p>
+                        <p>
+                            <Text strong>Status:</Text>{' '}
+                            <Tag color={item.device_status ? 'green' : 'red'}>
+                                {item.device_status ? 'Running' : 'Offline'}
+                            </Tag>
+                        </p>
+                    </Card>
+                </Col>
+            ))}
+        </Row>
+    );
+};
+
+export default CardDevice;
diff --git a/src/pages/master/device/component/ListDevice.jsx b/src/pages/master/device/component/ListDevice.jsx
index 9861c89..b1bafa8 100644
--- a/src/pages/master/device/component/ListDevice.jsx
+++ b/src/pages/master/device/component/ListDevice.jsx
@@ -7,27 +7,23 @@ import {
     Row,
     Col,
     Card,
-    Divider,
-    Form,
     Input,
-    Dropdown,
+    Segmented,
 } from 'antd';
 import {
     PlusOutlined,
-    FilterOutlined,
     EditOutlined,
     DeleteOutlined,
     EyeOutlined,
     SearchOutlined,
-    FilePdfOutlined,
-    FileExcelOutlined,
-    EllipsisOutlined,
+    AppstoreOutlined,
+    TableOutlined,
 } from '@ant-design/icons';
 import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
-import { deleteApd, getAllApd } from '../../../../api/master-apd';
 import { deleteDevice, getAllDevice } from '../../../../api/master-device';
 import TableList from '../../../../components/Global/TableList';
+import CardDevice from './CardDevice';
 import { getFilterData } from '../../../../components/Global/DataFilter';
 import ExcelJS from 'exceljs';
 import { saveAs } from 'file-saver';
@@ -119,6 +115,8 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
 const ListDevice = memo(function ListDevice(props) {
     const [showFilter, setShowFilter] = useState(false);
     const [trigerFilter, setTrigerFilter] = useState(false);
+    const [viewMode, setViewMode] = useState('card');
+    const [deviceData, setDeviceData] = useState([]);
 
     const defaultFilter = { criteria: '' };
     const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
@@ -126,10 +124,19 @@ const ListDevice = memo(function ListDevice(props) {
 
     const navigate = useNavigate();
 
+    const fetchData = async () => {
+        try {
+            const response = await getAllDevice(formDataFilter);
+            setDeviceData(response.data.data);
+        } catch (error) {
+            console.error("Failed to fetch device data:", error);
+        }
+    };
+
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
-            if (props.actionMode == 'list') {
+            if (props.actionMode === 'list') {
                 setFormDataFilter(defaultFilter);
                 doFilter();
             }
@@ -138,6 +145,10 @@ const ListDevice = memo(function ListDevice(props) {
         }
     }, [props.actionMode]);
 
+    useEffect(() => {
+        fetchData();
+    }, [trigerFilter]);
+
     const toggleFilter = () => {
         setFormDataFilter(defaultFilter);
         setShowFilter((prev) => !prev);
@@ -186,8 +197,7 @@ const ListDevice = memo(function ListDevice(props) {
     const handleDelete = async (device_id) => {
         const response = await deleteDevice(device_id);
 
-        // Backend returns: { statusCode: 200, message: "Device deleted successfully", rows: null, data: true }
-        if (response.statusCode == 200 && response.data === true) {
+        if (response.statusCode === 200 && response.data === true) {
             NotifAlert({
                 icon: 'success',
                 title: 'Berhasil',
@@ -213,7 +223,6 @@ const ListDevice = memo(function ListDevice(props) {
         const workbook = new ExcelJS.Workbook();
         const sheet = workbook.addWorksheet('Data APD');
         let rowCursor = 1;
-        // Kop Logo PIE
         if (logoPiEnergi) {
             const response = await fetch(logoPiEnergi);
             const blob = await response.blob();
@@ -224,24 +233,21 @@ const ListDevice = memo(function ListDevice(props) {
                 extension: 'png',
             });
 
-            // Tempatkan gambar di pojok atas
             sheet.addImage(imageId, {
                 tl: { col: 0.2, row: 0.8 },
                 ext: { width: 163, height: 80 },
             });
 
-            sheet.getRow(5).height = 15; // biar ada jarak ke tabel
+            sheet.getRow(5).height = 15;
             rowCursor = 3;
         }
 
-        // Tambah Judul
         const titleCell = sheet.getCell(`C${rowCursor}`);
         titleCell.value = 'Data APD';
         titleCell.font = { size: 20, bold: true, color: { argb: 'FF00AEEF' } };
         titleCell.alignment = { vertical: 'middle', horizontal: 'center' };
         sheet.mergeCells(`C${rowCursor}:F${rowCursor}`);
 
-        // Header tabel
         const headers = [
             'ID APD',
             'Nama APD',
@@ -256,12 +262,11 @@ const ListDevice = memo(function ListDevice(props) {
         headerRow.font = { bold: true, size: 12 };
         headerRow.eachCell((cell) => {
             cell.alignment = {
-                horizontal: 'center', // rata tengah kiri-kanan
-                vertical: 'middle', // rata tengah atas-bawah
+                horizontal: 'center',
+                vertical: 'middle',
             };
         });
 
-        // Tambahkan data
         data.forEach((item) => {
             sheet.addRow([
                 item.id_apd,
@@ -274,7 +279,6 @@ const ListDevice = memo(function ListDevice(props) {
             ]);
         });
 
-        // Auto width
         sheet.columns.forEach((col) => {
             let maxLength = 10;
             col.eachCell({ includeEmpty: true }, (cell) => {
@@ -284,7 +288,6 @@ const ListDevice = memo(function ListDevice(props) {
             col.width = maxLength + 2;
         });
 
-        // Export
         const buffer = await workbook.xlsx.writeBuffer();
         saveAs(new Blob([buffer]), 'Data_APD.xlsx');
     };
@@ -302,7 +305,6 @@ const ListDevice = memo(function ListDevice(props) {
                                     onChange={(e) => {
                                         const value = e.target.value;
                                         setSearchValue(value);
-                                        // Auto search when clearing by backspace/delete
                                         if (value === '') {
                                             setFormDataFilter({ criteria: '' });
                                             setTrigerFilter((prev) => !prev);
@@ -329,6 +331,14 @@ const ListDevice = memo(function ListDevice(props) {
                             </Col>
                             <Col>
                                 <Space wrap size="small">
+                                    <Segmented
+                                        options={[
+                                            { value: 'card', icon: <AppstoreOutlined /> },
+                                            { value: 'table', icon: <TableOutlined /> },
+                                        ]}
+                                        value={viewMode}
+                                        onChange={setViewMode}
+                                    />
                                     <ConfigProvider
                                         theme={{
                                             token: { colorBgContainer: '#E9F6EF' },
@@ -356,12 +366,21 @@ const ListDevice = memo(function ListDevice(props) {
                         </Row>
                     </Col>
                     <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
-                        <TableList
-                            getData={getAllDevice}
-                            queryParams={formDataFilter}
-                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
-                            triger={trigerFilter}
-                        />
+                        {viewMode === 'card' ? (
+                            <CardDevice
+                                data={deviceData}
+                                showPreviewModal={showPreviewModal}
+                                showEditModal={showEditModal}
+                                showDeleteDialog={showDeleteDialog}
+                            />
+                        ) : (
+                            <TableList
+                                getData={getAllDevice}
+                                queryParams={formDataFilter}
+                                columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                                triger={trigerFilter}
+                            />
+                        )}
                     </Col>
                 </Row>
             </Card>