update: refactor action buttons in ListDevice component for improved functionality and layout

src/pages/master/device/component/ListDevice.jsx

@@ -33,7 +33,7 @@ import ExcelJS from 'exceljs';
 import { saveAs } from 'file-saver';
 import logoPiEnergi from '../../../../assets/images/logo/pi-energi.png';
 
-const columns = (items, handleClickMenu) => [
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
     {
         title: 'ID',
         dataIndex: 'device_id',
@@ -89,18 +89,26 @@ const columns = (items, handleClickMenu) => [
         title: 'Aksi',
         key: 'aksi',
         align: 'center',
-        width: '5%',
+        width: '15%',
         render: (_, record) => (
-            <Dropdown
-                menu={{
-                    items,
-                    onClick: ({ key }) => handleClickMenu(key, record),
-                }}
-                trigger={['click']}
-                placement="bottomRight"
-            >
-                <Button shape="default" icon={<EllipsisOutlined />} />
-            </Dropdown>
+            <Space>
+                <Button
+                    type="text"
+                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
+                    onClick={() => showPreviewModal(record)}
+                />
+                <Button
+                    type="text"
+                    icon={<EditOutlined style={{ color: '#faad14' }} />}
+                    onClick={() => showEditModal(record)}
+                />
+                <Button
+                    type="text"
+                    danger
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                />
+            </Space>
         ),
     },
 ];
@@ -277,44 +285,6 @@ const ListDevice = memo(function ListDevice(props) {
         saveAs(new Blob([buffer]), 'Data_APD.xlsx');
     };
 
-    const handleClickMenu = (key, record) => {
-        switch (key) {
-            case 'preview':
-                showPreviewModal(record);
-                break;
-
-            case 'edit':
-                showEditModal(record);
-                break;
-
-            case 'delete':
-                showDeleteDialog(record);
-                break;
-
-            default:
-                break;
-        }
-    };
-
-    const menu = [
-        {
-            key: 'preview',
-            label: <span style={{ fontSize: '17px' }}>Preview</span>,
-            icon: <EyeOutlined style={{ fontSize: '17px', marginTop: '5px' }} />,
-        },
-        {
-            key: 'edit',
-            label: <span style={{ fontSize: '17px' }}>Edit</span>,
-            icon: <EditOutlined style={{ fontSize: '17px' }} />,
-        },
-        {
-            key: 'delete',
-            label: <span style={{ fontSize: '17px' }}>Delete</span>,
-            icon: <DeleteOutlined style={{ fontSize: '17px' }} />,
-            danger: true,
-        },
-    ];
-
     return (
         <React.Fragment>
             <Card>
@@ -385,7 +355,7 @@ const ListDevice = memo(function ListDevice(props) {
                         <TableList
                             getData={getAllDevice}
                             queryParams={formDataFilter}
-                            columns={columns(menu, handleClickMenu)}
+                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
                             triger={trigerFilter}
                         />
                     </Col>