feat: add shift management functionality with CRUD operations and UI components

src/App.jsx

@@ -15,6 +15,10 @@ import IndexTag from './pages/master/tag/IndexTag';
 import IndexBrandDevice from './pages/master/brandDevice/IndexBrandDevice';
 import IndexPlantSection from './pages/master/plantSection/IndexPlantSection';
 import IndexStatus from './pages/master/status/IndexStatus';
+import IndexShift from './pages/master/shift/IndexShift';
+
+// Jadwal Shift
+import IndexJadwalShift from './pages/jadwalShift/IndexJadwalShift';
 
 // History
 import IndexTrending from './pages/history/trending/IndexTrending';
@@ -53,10 +57,14 @@ const App = () => {
                     <Route path="tag" element={<IndexTag />} />
                     <Route path="brand-device" element={<IndexBrandDevice />} />
                     <Route path="plant-section" element={<IndexPlantSection />} />
-
+                    <Route path="shift" element={<IndexShift />} />
                     <Route path="status" element={<IndexStatus />} />
                 </Route>
 
+                <Route path="/jadwal-shift" element={<ProtectedRoute />}>
+                    <Route index element={<IndexJadwalShift />} />
+                </Route>
+
                 <Route path="/history" element={<ProtectedRoute />}>
                     <Route path="trending" element={<IndexTrending />} />
                     <Route path="report" element={<IndexReport />} />

src/api/jadwal-shift.jsx

@@ -0,0 +1,67 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllJadwalShift = async (queryParams) => {
+    try {
+        const response = await SendRequest({
+            method: 'get',
+            prefix: `jadwal-shift?${queryParams.toString()}`,
+        });
+        return response;
+    } catch (error) {
+        console.error('getAllJadwalShift error:', error);
+        return {
+            status: 500,
+            data: {
+                data: [],
+                paging: {
+                    page: 1,
+                    limit: 10,
+                    total: 0,
+                    page_total: 0
+                },
+                total: 0
+            },
+            error: error.message
+        };
+    }
+};
+
+const createJadwalShift = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `jadwal-shift`,
+        data: queryParams,
+    });
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const updateJadwalShift = async (id, queryParams) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `jadwal-shift/${id}`,
+        data: queryParams,
+    });
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const deleteJadwalShift = async (id) => {
+    const response = await SendRequest({
+        method: 'delete',
+        prefix: `jadwal-shift/${id}`,
+    });
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+export { getAllJadwalShift, createJadwalShift, updateJadwalShift, deleteJadwalShift };

src/api/master-shift.jsx

@@ -0,0 +1,75 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllShift = async (queryParams) => {
+    try {
+        const response = await SendRequest({
+            method: 'get',
+            prefix: `shift?${queryParams.toString()}`,
+        });
+        return response;
+    } catch (error) {
+        console.error('getAllShift error:', error);
+        return {
+            status: 500,
+            data: {
+                data: [],
+                paging: {
+                    page: 1,
+                    limit: 10,
+                    total: 0,
+                    page_total: 0
+                },
+                total: 0
+            },
+            error: error.message
+        };
+    }
+};
+
+const getShiftById = async (id) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `shift/${id}`,
+    });
+    return response.data;
+};
+
+const createShift = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `shift`,
+        data: queryParams,
+    });
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const updateShift = async (id, queryParams) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `shift/${id}`,
+        data: queryParams,
+    });
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const deleteShift = async (id) => {
+    const response = await SendRequest({
+        method: 'delete',
+        prefix: `shift/${id}`,
+    });
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+export { getAllShift, getShiftById, createShift, updateShift, deleteShift };

src/layout/LayoutMenu.jsx

@@ -70,6 +70,11 @@ const allItems = [
                 icon: <SafetyOutlined style={{ fontSize: '19px' }} />,
                 label: <Link to="/master/status">Status</Link>,
             },
+            {
+                key: 'master-shift',
+                icon: <ClockCircleOutlined style={{ fontSize: '19px' }} />,
+                label: <Link to="/master/shift">Shift</Link>,
+            },
         ],
     },
     {

src/pages/jadwalShift/IndexJadwalShift.jsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import ListJadwalShift from './component/ListJadwalShift';
+import DetailJadwalShift from './component/DetailJadwalShift';
+
+const IndexJadwalShift = () => {
+    const [actionMode, setActionMode] = useState('list');
+    const [selectedData, setSelectedData] = useState(null);
+
+    return (
+        <>
+            {actionMode === 'list' && (
+                <ListJadwalShift
+                    setActionMode={setActionMode}
+                    setSelectedData={setSelectedData}
+                />
+            )}
+            {(actionMode === 'add' || actionMode === 'edit') && (
+                <DetailJadwalShift
+                    actionMode={actionMode}
+                    selectedData={selectedData}
+                    setActionMode={setActionMode}
+                />
+            )}
+        </>
+    );
+};
+
+export default IndexJadwalShift;

src/pages/jadwalShift/component/DetailJadwalShift.jsx

@@ -0,0 +1,210 @@
+import { useEffect, useState } from 'react';
+import { Modal, Select, Divider, Typography, Button, ConfigProvider } from 'antd';
+import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
+import { createJadwalShift, updateJadwalShift } from '../../../api/jadwal-shift';
+import { getAllShift } from '../../../api/master-shift';
+import { getAllUser } from '../../../api/user';
+
+const { Text } = Typography;
+const { Option } = Select;
+
+const DetailJadwalShift = (props) => {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const [shifts, setShifts] = useState([]);
+    const [users, setUsers] = useState([]);
+
+    const defaultData = {
+        id: '',
+        id_shift: null,
+        id_user: null,
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const fetchShifts = async () => {
+        const response = await getAllShift(new URLSearchParams());
+        setShifts(response.data.data);
+    };
+
+    const fetchUsers = async () => {
+        const response = await getAllUser(new URLSearchParams("limit=1000")); // Fetch all users
+        setUsers(response.data.data);
+    };
+
+    useEffect(() => {
+        fetchShifts();
+        fetchUsers();
+    }, []);
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        if (!FormData.id_shift) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom Shift Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        if (!FormData.id_user) {
+            NotifOk({
+                icon: 'warning',
+                title: 'Peringatan',
+                message: 'Kolom User Tidak Boleh Kosong',
+            });
+            setConfirmLoading(false);
+            return;
+        }
+
+        const payload = {
+            id_shift: FormData.id_shift,
+            id_user: FormData.id_user,
+        };
+
+        try {
+            const response = FormData.id
+                ? await updateJadwalShift(FormData.id, payload)
+                : await createJadwalShift(payload);
+
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Jadwal Shift berhasil ${FormData.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 Jadwal Shift Error:', error);
+            NotifAlert({
+                icon: 'error',
+                title: 'Error',
+                message: error.message || 'Terjadi kesalahan pada server. Coba lagi nanti.',
+            });
+        }
+
+        setConfirmLoading(false);
+    };
+
+    const handleSelectChange = (name, value) => {
+        setFormData({
+            ...FormData,
+            [name]: value,
+        });
+    };
+
+    useEffect(() => {
+        if (props.selectedData) {
+            setFormData(props.selectedData);
+        } else {
+            setFormData(defaultData);
+        }
+    }, [props.actionMode, props.selectedData]);
+
+    return (
+        <Modal
+            title={`${
+                props.actionMode === 'add'
+                    ? 'Tambah'
+                    : 'Edit'
+            } Jadwal Shift`}
+            open={props.actionMode !== 'list'}
+            onCancel={handleCancel}
+            footer={[
+                <>
+                    <ConfigProvider
+                        theme={{
+                            token: { colorBgContainer: '#E9F6EF' },
+                            components: {
+                                Button: {
+                                    defaultBg: 'white',
+                                    defaultColor: '#23A55A',
+                                    defaultBorderColor: '#23A55A',
+                                    defaultHoverColor: '#23A55A',
+                                    defaultHoverBorderColor: '#23A55A',
+                                },
+                            },
+                        }}
+                    >
+                        <Button onClick={handleCancel}>Batal</Button>
+                    </ConfigProvider>
+                    <ConfigProvider
+                        theme={{
+                            token: {
+                                colorBgContainer: '#209652',
+                            },
+                            components: {
+                                Button: {
+                                    defaultBg: '#23a55a',
+                                    defaultColor: '#FFFFFF',
+                                    defaultBorderColor: '#23a55a',
+                                    defaultHoverColor: '#FFFFFF',
+                                    defaultHoverBorderColor: '#23a55a',
+                                },
+                            },
+                        }}
+                    >
+                        <Button loading={confirmLoading} onClick={handleSave}>
+                            Simpan
+                        </Button>
+                    </ConfigProvider>
+                </>,
+            ]}
+        >
+            {FormData && (
+                <div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Shift</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Select
+                            style={{ width: '100%' }}
+                            placeholder="Pilih Shift"
+                            onChange={(value) => handleSelectChange('id_shift', value)}
+                            value={FormData.id_shift}
+                        >
+                            {shifts.map(shift => (
+                                <Option key={shift.id} value={shift.id}>{shift.nama_shift} ({shift.jam_shift})</Option>
+                            ))}
+                        </Select>
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>User</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Select
+                            style={{ width: '100%' }}
+                            placeholder="Pilih User"
+                            onChange={(value) => handleSelectChange('id_user', value)}
+                            value={FormData.id_user}
+                            showSearch
+                            optionFilterProp="children"
+                            filterOption={(input, option) =>
+                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                            }
+                        >
+                            {users.map(user => (
+                                <Option key={user.id} value={user.id}>{user.username} ({user.nama_employee})</Option>
+                            ))}
+                        </Select>
+                    </div>
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default DetailJadwalShift;

src/pages/jadwalShift/component/ListJadwalShift.jsx

@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react';
+import { Button, Table, Space, Popconfirm } from 'antd';
+import { getAllJadwalShift, deleteJadwalShift } from '../../../api/jadwal-shift';
+import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
+
+const ListJadwalShift = (props) => {
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    const fetchData = async () => {
+        setLoading(true);
+        try {
+            const response = await getAllJadwalShift(new URLSearchParams());
+            if (response.data && response.data.data) {
+                setData(response.data.data);
+            } else {
+                setData([]);
+            }
+        } catch (error) {
+            console.error("Failed to fetch shift schedule data:", error);
+            setData([]); // Set data to empty array on error
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleAdd = () => {
+        props.setSelectedData(null);
+        props.setActionMode('add');
+    };
+
+    const handleEdit = (record) => {
+        props.setSelectedData(record);
+        props.setActionMode('edit');
+    };
+
+    const handleDelete = async (id) => {
+        try {
+            const response = await deleteJadwalShift(id);
+            if (response.statusCode === 200) {
+                NotifOk({ icon: 'success', title: 'Berhasil', message: 'Data jadwal shift berhasil dihapus' });
+                fetchData();
+            } else {
+                NotifAlert({ icon: 'error', title: 'Gagal', message: response.message });
+            }
+        } catch (error) {
+            NotifAlert({ icon: 'error', title: 'Error', message: error.message });
+        }
+    };
+
+    useEffect(() => {
+        if(props.actionMode === 'list') {
+            fetchData();
+        }
+    }, [props.actionMode]);
+
+    const columns = [
+        {
+            title: 'Nama Shift',
+            dataIndex: 'nama_shift',
+            key: 'nama_shift',
+        },
+        {
+            title: 'Jam Shift',
+            dataIndex: 'jam_shift',
+            key: 'jam_shift',
+        },
+        {
+            title: 'Username',
+            dataIndex: 'username',
+            key: 'username',
+        },
+        {
+            title: 'Nama Employee',
+            dataIndex: 'nama_employee',
+            key: 'nama_employee',
+        },
+        {
+            title: 'WhatsApp',
+            dataIndex: 'whatsapp',
+            key: 'whatsapp',
+        },
+        {
+            title: 'Aksi',
+            key: 'action',
+            render: (text, record) => (
+                <Space size="middle">
+                    <Button type="primary" onClick={() => handleEdit(record)}>Edit</Button>
+                    <Popconfirm
+                        title="Hapus data jadwal shift?"
+                        description="Apakah anda yakin untuk menghapus data jadwal shift ini?"
+                        onConfirm={() => handleDelete(record.id)}
+                        okText="Yes"
+                        cancelText="No"
+                    >
+                        <Button danger>Delete</Button>
+                    </Popconfirm>
+                </Space>
+            ),
+        },
+    ];
+
+    return (
+        <div>
+            <Button type="primary" onClick={handleAdd} style={{ marginBottom: 16 }}>
+                Tambah Jadwal Shift
+            </Button>
+            <Table
+                columns={columns}
+                dataSource={data}
+                loading={loading}
+                rowKey="id"
+            />
+        </div>
+    );
+};
+
+export default ListJadwalShift;

src/pages/master/shift/IndexShift.jsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import ListShift from './component/ListShift';
+import DetailShift from './component/DetailShift';
+
+const IndexShift = () => {
+    const [actionMode, setActionMode] = useState('list');
+    const [selectedData, setSelectedData] = useState(null);
+
+    return (
+        <>
+            {actionMode === 'list' && (
+                <ListShift
+                    setActionMode={setActionMode}
+                    setSelectedData={setSelectedData}
+                />
+            )}
+            {(actionMode === 'add' || actionMode === 'edit' || actionMode === 'preview') && (
+                <DetailShift
+                    actionMode={actionMode}
+                    selectedData={selectedData}
+                    setActionMode={setActionMode}
+                    setSelectedData={setSelectedData}
+                />
+            )}
+        </>
+    );
+};
+
+export default IndexShift;

src/pages/master/shift/component/DetailShift.jsx

@@ -0,0 +1,142 @@
+import { useEffect, useState } from 'react';
+import { Modal, Input, Typography, Switch, Button, ConfigProvider, Divider } from 'antd';
+import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';
+import { createShift, updateShift } from '../../../../api/master-shift';
+
+const { Text } = Typography;
+
+const DetailShift = (props) => {
+    const [confirmLoading, setConfirmLoading] = useState(false);
+    const readOnly = props.actionMode === 'preview';
+
+    const defaultData = {
+        id: '',
+        nama_shift: '',
+        jam_shift: '',
+        status: true, // default to active
+    };
+
+    const [FormData, setFormData] = useState(defaultData);
+
+    const handleCancel = () => {
+        props.setSelectedData(null);
+        props.setActionMode('list');
+    };
+
+    const handleSave = async () => {
+        setConfirmLoading(true);
+
+        if (!FormData.nama_shift) {
+            NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Kolom Nama Shift Tidak Boleh Kosong' });
+            setConfirmLoading(false);
+            return;
+        }
+
+        if (!FormData.jam_shift) {
+            NotifOk({ icon: 'warning', title: 'Peringatan', message: 'Kolom Jam Shift Tidak Boleh Kosong' });
+            setConfirmLoading(false);
+            return;
+        }
+
+        const payload = {
+            nama_shift: FormData.nama_shift,
+            jam_shift: FormData.jam_shift,
+            status: FormData.status,
+        };
+
+        try {
+            const response = FormData.id
+                ? await updateShift(FormData.id, payload)
+                : await createShift(payload);
+
+            if (response && (response.statusCode === 200 || response.statusCode === 201)) {
+                NotifOk({
+                    icon: 'success',
+                    title: 'Berhasil',
+                    message: `Data Shift "${FormData.nama_shift}" berhasil ${FormData.id ? 'diubah' : 'ditambahkan'}.`,
+                });
+                props.setActionMode('list');
+            } else {
+                NotifAlert({ icon: 'error', title: 'Gagal', message: response?.message || 'Terjadi kesalahan saat menyimpan data.' });
+            }
+        } catch (error) {
+            NotifAlert({ icon: 'error', title: 'Error', message: error.message || 'Terjadi kesalahan pada server.' });
+        }
+
+        setConfirmLoading(false);
+    };
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({ ...FormData, [name]: value });
+    };
+
+    const handleStatusToggle = (checked) => {
+        setFormData({ ...FormData, status: checked });
+    };
+
+    useEffect(() => {
+        if (props.selectedData) {
+            setFormData(props.selectedData);
+        } else {
+            setFormData(defaultData);
+        }
+    }, [props.actionMode, props.selectedData]);
+
+    return (
+        <Modal
+            title={`${props.actionMode === 'add' ? 'Tambah' : props.actionMode === 'preview' ? 'Preview' : 'Edit'} Shift`}
+            open={props.actionMode !== 'list'}
+            onCancel={handleCancel}
+            footer={[
+                <Button key="back" onClick={handleCancel}>Batal</Button>,
+                !readOnly && (
+                    <Button key="submit" type="primary" loading={confirmLoading} onClick={handleSave}>
+                        Simpan
+                    </Button>
+                ),
+            ]}
+        >
+            {FormData && (
+                <div>
+                    <div>
+                        <Text strong>Status</Text>
+                        <div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
+                            <Switch
+                                disabled={readOnly}
+                                checked={FormData.status}
+                                onChange={handleStatusToggle}
+                            />
+                            <Text style={{ marginLeft: '8px' }}>{FormData.status ? 'Active' : 'Inactive'}</Text>
+                        </div>
+                    </div>
+                    <Divider />
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Nama Shift</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="nama_shift"
+                            value={FormData.nama_shift}
+                            onChange={handleInputChange}
+                            placeholder="Masukkan Nama Shift"
+                            readOnly={readOnly}
+                        />
+                    </div>
+                    <div style={{ marginBottom: 12 }}>
+                        <Text strong>Jam Shift</Text>
+                        <Text style={{ color: 'red' }}> *</Text>
+                        <Input
+                            name="jam_shift"
+                            value={FormData.jam_shift}
+                            onChange={handleInputChange}
+                            placeholder="Contoh: 08:00 - 17:00"
+                            readOnly={readOnly}
+                        />
+                    </div>
+                </div>
+            )}
+        </Modal>
+    );
+};
+
+export default DetailShift;

src/pages/master/shift/component/ListShift.jsx

@@ -0,0 +1,181 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Button, Col, Row, Input, ConfigProvider, Card, Tag } from 'antd';
+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 { getAllShift, deleteShift } from '../../../../api/master-shift';
+
+const ListShift = (props) => {
+    const [trigerFilter, setTrigerFilter] = useState(false);
+    const defaultFilter = { search: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
+    const [searchValue, setSearchValue] = useState('');
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            navigate('/signin');
+        }
+    }, [navigate]);
+
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearch = (value) => {
+        setFormDataFilter({ search: value });
+        doFilter();
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter(defaultFilter);
+        doFilter();
+    };
+
+    const showPreviewModal = (record) => {
+        props.setSelectedData(record);
+        props.setActionMode('preview');
+    };
+
+    const showEditModal = (record) => {
+        props.setSelectedData(record);
+        props.setActionMode('edit');
+    };
+
+    const showAddModal = () => {
+        props.setSelectedData(null);
+        props.setActionMode('add');
+    };
+
+    const showDeleteDialog = (record) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: `Apakah anda yakin ingin menghapus data shift "${record.nama_shift}"?`,
+            onConfirm: () => handleDelete(record.id),
+        });
+    };
+
+    const handleDelete = async (id) => {
+        try {
+            const response = await deleteShift(id);
+            if (response.statusCode === 200) {
+                NotifAlert({ icon: 'success', title: 'Berhasil', message: 'Data shift berhasil dihapus' });
+                doFilter();
+            } else {
+                NotifAlert({ icon: 'error', title: 'Gagal', message: response.message });
+            }
+        } catch (error) {
+            NotifAlert({ icon: 'error', title: 'Error', message: error.message });
+        }
+    };
+
+    const columns = [
+        {
+            title: 'No',
+            key: 'no',
+            width: '5%',
+            align: 'center',
+            render: (_, __, index) => index + 1,
+        },
+        {
+            title: 'Nama Shift',
+            dataIndex: 'nama_shift',
+            key: 'nama_shift',
+        },
+        {
+            title: 'Jam Shift',
+            dataIndex: 'jam_shift',
+            key: 'jam_shift',
+        },
+        {
+            title: 'Status',
+            dataIndex: 'status',
+            key: 'status',
+            align: 'center',
+            render: (status) => (
+                <Tag color={status ? 'green' : 'red'}>
+                    {status ? 'Active' : 'Inactive'}
+                </Tag>
+            ),
+        },
+        {
+            title: 'Aksi',
+            key: 'action',
+            align: 'center',
+            width: '15%',
+            render: (_, record) => (
+                <ConfigProvider theme={{ token: { colorBgContainer: 'transparent' } }}>
+                    <Button icon={<EyeOutlined />} onClick={() => showPreviewModal(record)} />
+                    <Button icon={<EditOutlined />} onClick={() => showEditModal(record)} />
+                    <Button icon={<DeleteOutlined />} onClick={() => showDeleteDialog(record)} danger />
+                </ConfigProvider>
+            ),
+        },
+    ];
+
+    return (
+        <Card>
+            <Row justify="space-between" align="middle" gutter={[16, 16]}>
+                <Col xs={24} sm={12} md={10} lg={8}>
+                    <Input.Search
+                        placeholder="Cari nama shift..."
+                        value={searchValue}
+                        onChange={(e) => setSearchValue(e.target.value)}
+                        onSearch={handleSearch}
+                        allowClear={{
+                            clearIcon: <span onClick={handleSearchClear}>x</span>,
+                        }}
+                        enterButton={<Button type="primary" icon={<SearchOutlined />} style={{ backgroundColor: '#23A55A', borderColor: '#23A55A' }}>Cari</Button>}
+                        size="large"
+                    />
+                </Col>
+                <Col>
+                    <ConfigProvider
+                        theme={{
+                            token: { colorBgContainer: '#E9F6EF' },
+                            components: {
+                                Button: {
+                                    defaultBg: 'white',
+                                    defaultColor: '#23A55A',
+                                    defaultBorderColor: '#23A55A',
+                                    defaultHoverColor: '#23A55A',
+                                    defaultHoverBorderColor: '#23A55A',
+                                },
+                            },
+                        }}
+                    >
+                        <Button
+                            icon={<PlusOutlined />}
+                            onClick={showAddModal}
+                            size="large"
+                        >
+                            Tambah Shift
+                        </Button>
+                    </ConfigProvider>
+                </Col>
+            </Row>
+            <Row style={{ marginTop: 16 }}>
+                <Col span={24}>
+                    <TableList
+                        getData={getAllShift}
+                        queryParams={formDataFilter}
+                        columns={columns}
+                        triger={trigerFilter}
+                    />
+                </Col>
+            </Row>
+        </Card>
+    );
+};
+
+export default memo(ListShift);