refactor: streamline brand device management components and add error master view

src/pages/master/brandDevice/IndexBrandDevice.jsx

@@ -1,96 +1,45 @@
 
 import React, { memo, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
-import { Form, Modal, Typography } from 'antd';
 import ListBrandDevice from './component/ListBrandDevice';
 import DetailBrandDevice from './component/DetailBrandDevice';
-
+import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
-import { NotifConfirmDialog, NotifAlert } from '../../../components/Global/ToastNotif';
+import { Typography } from 'antd';
 
 const { Text } = Typography;
 
-// Mock Data
-const initialData = [
-    {
-        key: '1',
-        brandCode: 'HTC-01',
-        brandName: 'Brand A',
-        brandType: 'Type X',
-        deviceName: 'Device 1',
-        description: 'Description for Brand A',
-    },
-    {
-        key: '2',
-        brandCode: 'HTC-02',
-        brandName: 'Brand B',
-        brandType: 'Type Y',
-        deviceName: 'Device 2',
-        description: 'Description for Brand B',
-    },
-    {
-        key: '3',
-        brandCode: 'HTC-03',
-        brandName: 'Brand C',
-        brandType: 'Type Z',
-        deviceName: 'Device 3',
-        description: 'Description for Brand C',
-    },
-    // Add more data for pagination testing
-    ...Array.from({ length: 20 }, (_, i) => ({
-        key: `${i + 4}`,
-        brandCode: `HTC-${String(i + 4).padStart(2, '0')}`,
-        brandName: `Brand ${String.fromCharCode(68 + i)}`,
-        brandType: `Type ${String.fromCharCode(88 + i)}`,
-        deviceName: `Device ${i + 4}`,
-        description: `Description for Brand ${String.fromCharCode(68 + i)}`,
-    })),
-];
-
 const IndexBrandDevice = memo(function IndexBrandDevice() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
-    const [form] = Form.useForm();
 
-    const [data, setData] = useState(initialData);
+    const [activeTab, setActiveTab] = useState('brandDevice');
     const [actionMode, setActionMode] = useState('list');
-    const [editingKey, setEditingKey] = useState('');
+    const [selectedData, setSelectedData] = useState(null);
-    const [isModalVisible, setIsModalVisible] = useState(false);
     const [readOnly, setReadOnly] = useState(false);
+    const [showModal, setShowmodal] = useState(false);
 
-    // Mock API function
+    const setMode = (param) => {
-    const getAllBrandDevice = async (params) => {
+        setActionMode(param);
-        const { page = 1, limit = 10, search = '' } = Object.fromEntries(params.entries());
+        switch (param) {
+            case 'add':
+                setReadOnly(false);
+                setShowmodal(true);
+                break;
 
-        let filteredData = data;
+            case 'edit':
-        if (search) {
+                setReadOnly(false);
-            filteredData = data.filter(item => 
+                setShowmodal(true);
-                item.brandName.toLowerCase().includes(search.toLowerCase()) ||
+                break;
-                item.brandType.toLowerCase().includes(search.toLowerCase()) ||
+
-                item.deviceName.toLowerCase().includes(search.toLowerCase())
+            case 'preview':
-            );
+                setReadOnly(true);
+                setShowmodal(true);
+                break;
+
+            default:
+                setShowmodal(false);
+                break;
         }
-
-        const start = (page - 1) * limit;
-        const end = start + limit;
-        const paginatedData = filteredData.slice(start, end);
-
-        return new Promise(resolve => {
-            setTimeout(() => {
-                resolve({
-                    status: 200,
-                    data: {
-                        data: paginatedData,
-                        total: filteredData.length,
-                        paging: {
-                            page: parseInt(page),
-                            limit: parseInt(limit),
-                            total: filteredData.length,
-                        },
-                    },
-                });
-            }, 500);
-        });
     };
 
     useEffect(() => {
@@ -103,96 +52,26 @@ const IndexBrandDevice = memo(function IndexBrandDevice() {
         } else {
             navigate('/signin');
         }
-    }, [navigate, setBreadcrumbItems]);
+    }, []);
-
-    useEffect(() => {
-        if (actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') {
-            setIsModalVisible(true);
-            setReadOnly(actionMode === 'preview');
-        } else {
-            setIsModalVisible(false);
-        }
-    }, [actionMode]);
-
-    const handleCancel = () => {
-        setActionMode('list');
-        setEditingKey('');
-        form.resetFields();
-    };
-
-    const handleOk = () => {
-        if (readOnly) {
-            handleCancel();
-            return;
-        }
-        form.validateFields()
-            .then((values) => {
-                let newData = [...data];
-                if (editingKey) {
-                    // Editing existing data
-                    const index = newData.findIndex((item) => editingKey === item.key);
-                    if (index > -1) {
-                        const item = newData[index];
-                        newData.splice(index, 1, { ...item, ...values });
-                    }
-                } else {
-                    // Adding new data
-                    const newKey = (Math.max(...data.map(item => parseInt(item.key))) + 1).toString();
-                    newData = [{ key: newKey, ...values }, ...newData];
-                }
-                setData(newData);
-                handleCancel();
-            })
-            .catch((info) => {
-                console.log('Validate Failed:', info);
-            });
-    };
-
-    const handleEdit = (record) => {
-        form.setFieldsValue(record);
-        setEditingKey(record.key);
-        setActionMode('edit');
-    };
-
-    const handlePreview = (record) => {
-        form.setFieldsValue(record);
-        setEditingKey(record.key);
-        setActionMode('preview');
-    };
-
-    const handleDelete = (record) => {
-        NotifConfirmDialog({
-            icon: 'question',
-            title: 'Konfirmasi',
-            message: `Apakah anda yakin ingin menghapus brand "${record.brandName}"?`,
-            onConfirm: () => {
-                const newData = data.filter((item) => item.key !== record.key);
-                setData(newData);
-                NotifAlert({
-                    icon: 'success',
-                    title: 'Berhasil',
-                    message: `Brand "${record.brandName}" berhasil dihapus.`,
-                });
-            },
-        });
-    };
 
     return (
         <React.Fragment>
             <ListBrandDevice
-                setActionMode={setActionMode}
+                actionMode={actionMode}
-                handleEdit={handleEdit}
+                setActionMode={setMode}
-                handleDelete={handleDelete}
+                selectedData={selectedData}
-                handlePreview={handlePreview}
+                setSelectedData={setSelectedData}
-                getAllBrandDevice={getAllBrandDevice}
+                readOnly={readOnly}
+                activeTab={activeTab}
+                setActiveTab={setActiveTab}
             />
             <DetailBrandDevice
-                visible={isModalVisible}
+                setActionMode={setMode}
-                onCancel={handleCancel}
+                selectedData={selectedData}
-                onOk={handleOk}
+                setSelectedData={setSelectedData}
-                form={form}
-                editingKey={editingKey}
                 readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
             />
         </React.Fragment>
     );

src/pages/master/brandDevice/component/DetailBrandDevice.jsx

@@ -1,18 +1,174 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
-import { Modal, Form, Input, ConfigProvider, Button, Typography } from 'antd';
+import { Modal, Input, Typography, Button, ConfigProvider, Select } from 'antd';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
 
 const { Text } = Typography;
 
-const DetailBrandDevice = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
+const DetailBrandDevice = (props) => {
-    const modalTitle = readOnly ? 'Preview Brand' : (editingKey ? 'Edit Brand' : 'Tambah Brand');
+    const [confirmLoading, setConfirmLoading] = useState(false);
+
+    const defaultData = {
+        brand_id: '',
+        brandName: '',
+        brandType: '',
+        manufacturer: '',
+        model: '',
+        status: 'Active',
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        // Validasi required fields
+        if (!FormData.brandName) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Brand Name Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        if (!FormData.brandType) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Type Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        if (!FormData.manufacturer) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Manufacturer Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        if (!FormData.model) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Model Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        if (!FormData.status) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Status Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        const payload = {
+            brandName: FormData.brandName,
+            brandType: FormData.brandType,
+            manufacturer: FormData.manufacturer,
+            model: FormData.model,
+            status: FormData.status,
+        };
+
+        try {
+            // Simulate API call
+            await new Promise((resolve) => setTimeout(resolve, 500));
+
+            const response = {
+                statusCode: FormData.brand_id ? 200 : 201,
+                data: {
+                    brandName: FormData.brandName,
+                },
+            };
+
+            console.log('Save Brand Device Response:', response);
+
+            // Check if response is successful
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Brand Device "${
+                        response.data?.brandName || FormData.brandName
+                    }" berhasil ${FormData.brand_id ? 'diubah' : 'ditambahkan'}.`,
+                });
+
+                props.setActionMode('list');
+            } else {
+                NotifAlert({
+                    icon: 'error',
+                    title: 'Gagal',
+                    message: response?.message || 'Terjadi kesalahan saat menyimpan data.',
+                });
+            }
+        } catch (error) {
+            console.error('Save Brand Device Error:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
+            });
+        }
+
+        setConfirmLoading(false);
+    };
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({
+            ...FormData,
+            [name]: value,
+        });
+    };
+
+    const handleSelectChange = (name, value) => {
+        setFormData({
+            ...FormData,
+            [name]: value,
+        });
+    };
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            if (props.selectedData != null) {
+                setFormData(props.selectedData);
+            } else {
+                setFormData(defaultData);
+            }
+        } else {
+            // navigate('/signin'); // Uncomment if useNavigate is imported
+        }
+    }, [props.showModal]);
 
     return (
         <Modal
-            title={modalTitle}
+            title={`${
-            visible={visible}
+                props.actionMode === 'add'
-            onCancel={onCancel}
+                    ? 'Tambah'
+                    : props.actionMode === 'preview'
+                    ? 'Preview'
+                    : 'Edit'
+            } Brand Device`}
+            open={props.showModal}
+            onCancel={handleCancel}
             footer={[
-                <React.Fragment key="modal-footer">
+                <>
                     <ConfigProvider
                         theme={{
                             token: { colorBgContainer: '#E9F6EF' },
@@ -27,7 +183,7 @@ const DetailBrandDevice = ({ visible, onCancel, onOk, form, editingKey, readOnly
                             },
                         }}
                     >
-                        <Button onClick={onCancel}>Batal</Button>
+                        <Button onClick={handleCancel}>Batal</Button>
                     </ConfigProvider>
                     <ConfigProvider
                         theme={{
@@ -45,71 +201,87 @@ const DetailBrandDevice = ({ visible, onCancel, onOk, form, editingKey, readOnly
                             },
                         }}
                     >
-                        {!readOnly && (
+                        {!props.readOnly && (
-                            <Button onClick={onOk}>
+                            <Button loading={confirmLoading} onClick={handleSave}>
                                 Simpan
                             </Button>
                         )}
                     </ConfigProvider>
-                </React.Fragment>,
+                </>,
             ]}
-            destroyOnClose
         >
-            <Form form={form} layout="vertical" name="form_in_modal">
+            {FormData && (
-                <div style={{ marginBottom: 12 }}>
+                <div>
-                    <Text strong>Kode Brand</Text>
+                    <div hidden>
-                    <Text style={{ color: 'red' }}> *</Text>
+                        <Text strong>Brand ID</Text>
-                    <Form.Item
+                        <Input
-                        name="brandCode"
+                            name="brand_id"
-                        rules={[{ required: true, message: 'Please input the brand code!' }]}
+                            value={FormData.brand_id}
-                        style={{ marginBottom: 0 }}
+                            onChange={handleInputChange}
-                    >
+                            disabled
-                        <Input readOnly={readOnly} placeholder="Enter Brand Code" />
+                        />
-                    </Form.Item>
                     </div>
                     <div style={{ marginBottom: 12 }}>
                         <Text strong>Brand Name</Text>
                         <Text style={{ color: 'red' }}> *</Text>
-                    <Form.Item
+                        <Input
                             name="brandName"
-                        rules={[{ required: true, message: 'Please input the brand name!' }]}
+                            value={FormData.brandName}
-                        style={{ marginBottom: 0 }}
+                            onChange={handleInputChange}
-                    >
+                            placeholder="Enter Brand Name"
-                        <Input readOnly={readOnly} placeholder="Enter Brand Name" />
+                            readOnly={props.readOnly}
-                    </Form.Item>
+                        />
                     </div>
                     <div style={{ marginBottom: 12 }}>
-                    <Text strong>Brand Type</Text>
+                        <Text strong>Type</Text>
                         <Text style={{ color: 'red' }}> *</Text>
-                    <Form.Item
+                        <Input
                             name="brandType"
-                        rules={[{ required: true, message: 'Please input the brand type!' }]}
+                            value={FormData.brandType}
-                        style={{ marginBottom: 0 }}
+                            onChange={handleInputChange}
-                    >
+                            placeholder="Enter Type (e.g., PLC)"
-                        <Input readOnly={readOnly} placeholder="Enter Brand Type" />
+                            readOnly={props.readOnly}
-                    </Form.Item>
+                        />
                     </div>
                     <div style={{ marginBottom: 12 }}>
-                    <Text strong>Device Name</Text>
+                        <Text strong>Manufacturer</Text>
                         <Text style={{ color: 'red' }}> *</Text>
-                    <Form.Item
+                        <Input
-                        name="deviceName"
+                            name="manufacturer"
-                        rules={[{ required: true, message: 'Please input the device name!' }]}
+                            value={FormData.manufacturer}
-                        style={{ marginBottom: 0 }}
+                            onChange={handleInputChange}
-                    >
+                            placeholder="Enter Manufacturer"
-                        <Input readOnly={readOnly} placeholder="Enter Device Name" />
+                            readOnly={props.readOnly}
-                    </Form.Item>
+                        />
                     </div>
                     <div style={{ marginBottom: 12 }}>
-                    <Text strong>Description</Text>
+                        <Text strong>Model</Text>
-                    <Form.Item
+                        <Text style={{ color: 'red' }}> *</Text>
-                        name="description"
+                        <Input
-                        style={{ marginBottom: 0 }}
+                            name="model"
-                    >
+                            value={FormData.model}
-                        <Input.TextArea readOnly={readOnly} placeholder="Enter Description (Optional)" rows={4} />
+                            onChange={handleInputChange}
-                    </Form.Item>
+                            placeholder="Enter Model"
+                            readOnly={props.readOnly}
+                        />
                     </div>
-            </Form>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Status</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Select
+                            value={FormData.status}
+                            onChange={(value) => handleSelectChange('status', value)}
+                            disabled={props.readOnly}
+                            style={{ width: '100%' }}
+                            placeholder="Select Status"
+                            options={[
+                                { value: 'Active', label: 'Active' },
+                                { value: 'Inactive', label: 'Inactive' },
+                            ]}
+                        />
+                    </div>
+                </div>
+            )}
         </Modal>
     );
 };

src/pages/master/brandDevice/component/ListBrandDevice.jsx

@@ -1,57 +1,221 @@
-import React, { useState } from 'react';
+import React, { memo, useState, useEffect } from 'react';
-import { Button, Col, Row, Space, Input, ConfigProvider, Card } from 'antd';
+import { Button, Col, Row, Space, Input, ConfigProvider, Card, Tag, Tabs } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, EyeOutlined } from '@ant-design/icons';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    SearchOutlined,
+    EyeOutlined,
+} from '@ant-design/icons';
+import { NotifAlert, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
 import TableList from '../../../../components/Global/TableList';
+import ListErrorMaster from './ListErrorMaster';
 
-const ListBrandDevice = ({ 
+// Dummy data
-    setActionMode, 
+const initialBrandDeviceData = [
-    handleEdit, 
-    handleDelete,
-    handlePreview,
-    getAllBrandDevice // Mock API function
-}) => {
-    const [searchValue, setSearchValue] = useState('');
-    const [formDataFilter, setFormDataFilter] = useState({ search: '' });
-    const [trigerFilter, setTrigerFilter] = useState(false);
-
-    const columns = [
     {
-            title: 'Kode Brand',
+        brand_id: 1,
-            dataIndex: 'brandCode',
+        brandName: 'Siemens S7-1200',
-            key: 'brandCode',
+        brandType: 'PLC',
+        manufacturer: 'Siemens',
+        model: 'S7-1200',
+        status: 'Active',
     },
     {
-            title: 'Brand Name',
+        brand_id: 2,
+        brandName: 'Allen Bradley CompactLogix',
+        brandType: 'PLC',
+        manufacturer: 'Rockwell Automation',
+        model: 'CompactLogix 5370',
+        status: 'Active',
+    },
+    {
+        brand_id: 3,
+        brandName: 'Schneider Modicon M580',
+        brandType: 'PLC',
+        manufacturer: 'Schneider Electric',
+        model: 'M580',
+        status: 'Active',
+    },
+    {
+        brand_id: 4,
+        brandName: 'Mitsubishi FX5U',
+        brandType: 'PLC',
+        manufacturer: 'Mitsubishi',
+        model: 'FX5U',
+        status: 'Inactive',
+    },
+];
+
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+    {
+        title: 'No',
+        key: 'no',
+        width: '5%',
+        align: 'center',
+        render: (_, __, index) => index + 1,
+    },
+    {
+        title: 'Brand Device ',
         dataIndex: 'brandName',
         key: 'brandName',
+        width: '20%',
     },
     {
-            title: 'Brand Type',
+        title: 'Type',
         dataIndex: 'brandType',
         key: 'brandType',
+        width: '15%',
     },
     {
-            title: 'Device Name',
+        title: 'Manufacturer',
-            dataIndex: 'deviceName',
+        dataIndex: 'manufacturer',
-            key: 'deviceName',
+        key: 'manufacturer',
+        width: '20%',
     },
     {
-            title: 'Description',
+        title: 'model',
-            dataIndex: 'description',
+        dataIndex: 'model',
-            key: 'description',
+        key: 'model',
+        width: '15%',
     },
     {
-            title: 'Aksi',
+        title: 'status',
+        dataIndex: 'status',
+        key: 'status',
+        width: '10%',
+        align: 'center',
+        render: (_, { status }) => (
+            <>
+                {status === 'Active' ? (
+                    <Tag color={'green'} key={'status'}>
+                        Active
+                    </Tag>
+                ) : (
+                    <Tag color={'red'} key={'status'}>
+                        Inactive
+                    </Tag>
+                )}
+            </>
+        ),
+    },
+    {
+        title: 'Action',
         key: 'action',
+        align: 'center',
+        width: '15%',
         render: (_, record) => (
-                <Space size="middle">
+            <Space>
-                    <Button type="text" style={{ borderColor: '#1890ff' }} icon={<EyeOutlined style={{ color: '#1890ff' }} />} onClick={() => handlePreview(record)} />
+                <Button
-                    <Button type="text" style={{ borderColor: '#faad14' }} icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
+                    icon={<EyeOutlined />}
-                    <Button type="text" danger style={{ borderColor: 'red' }} icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
+                    onClick={() => showPreviewModal(record)}
+                    style={{
+                        color: '#1890ff',
+                        borderColor: '#1890ff',
+                    }}
+                />
+                <Button
+                    icon={<EditOutlined />}
+                    onClick={() => showEditModal(record)}
+                    style={{
+                        color: '#faad14',
+                        borderColor: '#faad14',
+                    }}
+                />
+                <Button
+                    danger
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                    style={{
+                        borderColor: '#ff4d4f',
+                    }}
+                />
             </Space>
         ),
     },
-    ];
+];
+
+const ListBrandDevice = memo(function ListBrandDevice(props) {
+    const [showFilter, setShowFilter] = useState(false);
+    const [trigerFilter, setTrigerFilter] = useState(false);
+    const [brandDeviceData, setBrandDeviceData] = useState(initialBrandDeviceData);
+
+    const defaultFilter = { search: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+
+    const navigate = useNavigate();
+
+    // Dummy data function to simulate API call - now uses state
+    const getAllBrandDevice = async (params) => {
+        // Simulate API delay
+        await new Promise((resolve) => setTimeout(resolve, 300));
+
+        // Extract URLSearchParams - TableList sends URLSearchParams object
+        const searchParam = params.get('search') || '';
+        const page = parseInt(params.get('page')) || 1;
+        const limit = parseInt(params.get('limit')) || 10;
+
+        console.log('getAllBrandDevice called with:', { searchParam, page, limit });
+
+        // Filter by search
+        let filteredBrandDevices = brandDeviceData;
+        if (searchParam) {
+            const searchLower = searchParam.toLowerCase();
+            filteredBrandDevices = brandDeviceData.filter(
+                (brand) =>
+                    brand.brandName.toLowerCase().includes(searchLower) ||
+                    brand.brandType.toLowerCase().includes(searchLower) ||
+                    brand.manufacturer.toLowerCase().includes(searchLower) ||
+                    brand.model.toLowerCase().includes(searchLower)
+            );
+        }
+
+        // Pagination logic
+        const totalData = filteredBrandDevices.length;
+        const totalPages = Math.ceil(totalData / limit);
+        const startIndex = (page - 1) * limit;
+        const endIndex = startIndex + limit;
+        const paginatedData = filteredBrandDevices.slice(startIndex, endIndex);
+
+        // Return structure that matches TableList expectation
+        return {
+            status: 200,
+            statusCode: 200,
+            data: {
+                data: paginatedData,
+                total: totalData,
+                paging: {
+                    page: page,
+                    limit: limit,
+                    total: totalData,
+                    page_total: totalPages,
+                },
+            },
+        };
+    };
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (token) {
+            if (props.actionMode == 'list') {
+                setFormDataFilter(defaultFilter);
+                doFilter();
+            }
+        } else {
+            navigate('/signin');
+        }
+    }, [props.actionMode, brandDeviceData]);
+
+    const toggleFilter = () => {
+        setFormDataFilter(defaultFilter);
+        setShowFilter((prev) => !prev);
+    };
+
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
 
     const handleSearch = () => {
         setFormDataFilter({ search: searchValue });
@@ -64,18 +228,97 @@ const ListBrandDevice = ({
         setTrigerFilter((prev) => !prev);
     };
 
+    const showPreviewModal = (param) => {
+        props.setSelectedData(param);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('edit');
+    };
+
+    const showAddModal = (param = null) => {
+        props.setSelectedData(param);
+        props.setActionMode('add');
+    };
+
+    const showDeleteDialog = (param) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: 'Apakah anda yakin hapus data "' + param.brandName + '" ?',
+            onConfirm: () => handleDelete(param.brand_id),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const handleDelete = async (brand_id) => {
+        // Find brand name before deleting
+        const brandToDelete = brandDeviceData.find((brand) => brand.brand_id === brand_id);
+
+        // Simulate delete API call
+        await new Promise((resolve) => setTimeout(resolve, 300));
+
+        // Remove from state
+        const updatedBrands = brandDeviceData.filter((brand) => brand.brand_id !== brand_id);
+        setBrandDeviceData(updatedBrands);
+
+        NotifAlert({
+            icon: 'success',
+            title: 'Berhasil',
+            message: `Data Brand Device "${brandToDelete?.brandName || ''}" berhasil dihapus.`,
+        });
+    };
+
+    const tabItems = [
+        {
+            key: 'brandDevice',
+            label: 'Brand Device',
+        },
+        {
+            key: 'errorMaster',
+            label: 'Error Master',
+        },
+    ];
+
     return (
+        <React.Fragment>
             <Card>
+                <ConfigProvider
+                    theme={{
+                        components: {
+                            Tabs: {
+                                inkBarColor: '#FF8C42',
+                                itemActiveColor: '#FF8C42',
+                                itemHoverColor: '#FF8C42',
+                                itemSelectedColor: '#FF8C42',
+                            },
+                        },
+                    }}
+                >
+                    <Tabs
+                        activeKey={props.activeTab}
+                        onChange={props.setActiveTab}
+                        items={tabItems}
+                        style={{ marginBottom: '16px' }}
+                    />
+                </ConfigProvider>
+                {props.activeTab === 'brandDevice' && (
+                    <Row>
+                        <Col xs={24}>
                             <Row justify="space-between" align="middle" gutter={[8, 8]}>
                                 <Col xs={24} sm={24} md={12} lg={12}>
                                     <Input.Search
-                        placeholder="Search by brand name, type, or device name..."
+                                        placeholder="Search brand device..."
                                         value={searchValue}
                                         onChange={(e) => {
                                             const value = e.target.value;
                                             setSearchValue(value);
+                                            // Auto search when clearing by backspace/delete
                                             if (value === '') {
-                                handleSearchClear();
+                                                setFormDataFilter({ search: '' });
+                                                setTrigerFilter((prev) => !prev);
                                             }
                                         }}
                                         onSearch={handleSearch}
@@ -98,6 +341,7 @@ const ListBrandDevice = ({
                                     />
                                 </Col>
                                 <Col>
+                                    <Space wrap size="small">
                                         <ConfigProvider
                                             theme={{
                                                 token: { colorBgContainer: '#E9F6EF' },
@@ -114,24 +358,37 @@ const ListBrandDevice = ({
                                         >
                                             <Button
                                                 icon={<PlusOutlined />}
-                            onClick={() => setActionMode('add')}
+                                                onClick={() => showAddModal()}
                                                 size="large"
                                             >
-                            Tambah Data
+                                                Tambah Brand Device
                                             </Button>
                                         </ConfigProvider>
+                                    </Space>
                                 </Col>
                             </Row>
+                        </Col>
                         <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
                             <TableList
                                 getData={getAllBrandDevice}
                                 queryParams={formDataFilter}
-                    columns={columns}
+                                columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
                                 triger={trigerFilter}
                             />
                         </Col>
+                    </Row>
+                )}
+                {props.activeTab === 'errorMaster' && (
+                    <ListErrorMaster
+                        actionMode={props.actionMode}
+                        setActionMode={props.setActionMode}
+                        selectedData={props.selectedData}
+                        setSelectedData={props.setSelectedData}
+                    />
+                )}
             </Card>
+        </React.Fragment>
     );
-};
+});
 
 export default ListBrandDevice;

src/pages/master/brandDevice/component/ListErrorMaster.jsx

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import { Row, Col } from 'antd';
+
+const ListErrorMaster = memo(function ListErrorMaster(props) {
+    return (
+        <React.Fragment>
+            <Row>
+                <Col xs={24}>
+                    <div
+                        style={{
+                            textAlign: 'center',
+                            padding: '100px 20px',
+                            backgroundColor: '#f5f5f5',
+                            borderRadius: '8px',
+                        }}
+                    >
+                        <h2
+                            style={{
+                                fontSize: '24px',
+                                color: '#595959',
+                                marginBottom: '16px',
+                            }}
+                        >
+                            Error Master
+                        </h2>
+                    </div>
+                </Col>
+            </Row>
+        </React.Fragment>
+    );
+});
+
+export default ListErrorMaster;