diff --git a/src/pages/jadwalShift/IndexJadwalShift.jsx b/src/pages/jadwalShift/IndexJadwalShift.jsx
index 0a9f7ea..95895a2 100644
--- a/src/pages/jadwalShift/IndexJadwalShift.jsx
+++ b/src/pages/jadwalShift/IndexJadwalShift.jsx
@@ -1,62 +1,74 @@
-import { useState, useEffect } from 'react';
+import React, { memo, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import ListJadwalShift from './component/ListJadwalShift';
 import DetailJadwalShift from './component/DetailJadwalShift';
-import { getAllJadwalShift, deleteJadwalShift } from '../../api/jadwal-shift';
+import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
+import { Typography } from 'antd';
+
+const { Text } = Typography;
+
+const IndexJadwalShift = memo(function IndexJadwalShift() {
+    const navigate = useNavigate();
+    const { setBreadcrumbItems } = useBreadcrumb();
 
-const IndexJadwalShift = () => {
     const [actionMode, setActionMode] = useState('list');
     const [selectedData, setSelectedData] = useState(null);
-    const [jadwalShiftData, setJadwalShiftData] = useState([]);
-    const [loading, setLoading] = useState(false);
+    const [readOnly, setReadOnly] = useState(false);
+    const [showModal, setShowModal] = useState(false);
 
-    const fetchData = async () => {
-        setLoading(true);
-        try {
-            const response = await getAllJadwalShift(new URLSearchParams());
-            if (response.data) {
-                setJadwalShiftData(response.data.data);
-            }
-        } catch (error) {
-            console.error("Error fetching jadwal shift data:", error);
+    const setMode = (param) => {
+        setShowModal(true);
+        switch (param) {
+            case 'add':
+                setReadOnly(false);
+                break;
+
+            case 'edit':
+                setReadOnly(false);
+                break;
+
+            case 'preview':
+                setReadOnly(true);
+                break;
+
+            default:
+                setShowModal(false);
+                break;
         }
-        setLoading(false);
+        setActionMode(param);
     };
 
     useEffect(() => {
-        fetchData();
+        const token = localStorage.getItem('token');
+        if (token) {
+            setBreadcrumbItems([
+                { title: <Text strong style={{ fontSize: '14px' }}>• Jadwal</Text> },
+                { title: <Text strong style={{ fontSize: '14px' }}>Jadwal Shift</Text> }
+            ]);
+        } else {
+            navigate('/signin');
+        }
     }, []);
 
-    const handleDelete = async (id) => {
-        try {
-            await deleteJadwalShift(id);
-            fetchData();
-        } catch (error) {
-            console.error("Error deleting jadwal shift:", error);
-        }
-    };
-
     return (
-        <>
-            {actionMode === 'list' && (
-                <ListJadwalShift
-                    setActionMode={setActionMode}
-                    setSelectedData={setSelectedData}
-                    jadwalShiftData={jadwalShiftData}
-                    loading={loading}
-                    onDelete={handleDelete}
-                />
-            )}
-            {(actionMode === 'add' || actionMode === 'edit') && (
-                <DetailJadwalShift
-                    actionMode={actionMode}
-                    selectedData={selectedData}
-                    setActionMode={setActionMode}
-                    setSelectedData={setSelectedData}
-                    fetchData={fetchData}
-                />
-            )}
-        </>
+        <React.Fragment>
+            <ListJadwalShift
+                actionMode={actionMode}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+            />
+            <DetailJadwalShift
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+                showModal={showModal}
+                actionMode={actionMode}
+            />
+        </React.Fragment>
     );
-};
+});
 
-export default IndexJadwalShift;
+export default IndexJadwalShift;
\ No newline at end of file
diff --git a/src/pages/jadwalShift/component/DetailJadwalShift.jsx b/src/pages/jadwalShift/component/DetailJadwalShift.jsx
index 697e6c5..4f77120 100644
--- a/src/pages/jadwalShift/component/DetailJadwalShift.jsx
+++ b/src/pages/jadwalShift/component/DetailJadwalShift.jsx
@@ -1,51 +1,32 @@
-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';
+import React, { useEffect, useState } from 'react';
+import {
+    Modal,
+    Input,
+    Typography,
+    Button,
+    ConfigProvider,
+    Row,
+    Col
+} from 'antd';
+import { NotifOk } from '../../../components/Global/ToastNotif';
 
 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,
+        nama_shift: '',
+        jam_masuk: '',
+        jam_pulang: '',
+        username: '',
+        nama_employee: '',
+        whatsapp: ''
     };
 
     const [FormData, setFormData] = useState(defaultData);
 
-    const fetchShifts = async () => {
-        try {
-            const response = await getAllShift(new URLSearchParams());
-            setShifts(response?.data?.data || []);
-        } catch (error) {
-            console.error("Failed to fetch shifts:", error);
-            setShifts([]);
-        }
-    };
-
-    const fetchUsers = async () => {
-        try {
-            const response = await getAllUser(new URLSearchParams("limit=1000")); // Fetch all users
-            setUsers(response?.data?.data || []);
-        } catch (error) {
-            console.error("Failed to fetch users:", error);
-            setUsers([]);
-        }
-    };
-
-    useEffect(() => {
-        fetchShifts();
-        fetchUsers();
-    }, []);
-
     const handleCancel = () => {
         props.setSelectedData(null);
         props.setActionMode('list');
@@ -53,70 +34,16 @@ const DetailJadwalShift = (props) => {
 
     const handleSave = async () => {
         setConfirmLoading(true);
-
-        if (!FormData.id_shift) {
-            NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom Shift Tidak Boleh Kosong',
-            });
+        // This is a dummy save function for slicing purposes
+        setTimeout(() => {
             setConfirmLoading(false);
-            return;
-        }
-
-        if (!FormData.id_user) {
             NotifOk({
-                icon: 'warning',
-                title: 'Peringatan',
-                message: 'Kolom User Tidak Boleh Kosong',
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'Data dummy berhasil disimpan.',
             });
-            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');
-                props.fetchData();
-            } 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,
-        });
+            props.setActionMode('list');
+        }, 1000);
     };
 
     useEffect(() => {
@@ -125,93 +52,119 @@ const DetailJadwalShift = (props) => {
         } else {
             setFormData(defaultData);
         }
-    }, [props.actionMode, props.selectedData]);
+    }, [props.showModal, props.selectedData]);
+
+    // Dummy handler for slicing
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData({ ...FormData, [name]: value });
+    };
 
     return (
         <Modal
-            title={`${
+            title={`${ 
                 props.actionMode === 'add'
                     ? 'Tambah'
+                    : props.actionMode === 'preview'
+                    ? 'Preview'
                     : 'Edit'
             } Jadwal Shift`}
-            open={props.actionMode !== 'list'}
+            open={props.showModal}
             onCancel={handleCancel}
+            width={800}
             footer={[
-                <>
+                <React.Fragment key="modal-footer">
                     <ConfigProvider
                         theme={{
-                            token: { colorBgContainer: '#E9F6EF' },
                             components: {
                                 Button: {
                                     defaultBg: 'white',
                                     defaultColor: '#23A55A',
                                     defaultBorderColor: '#23A55A',
-                                    defaultHoverColor: '#23A55A',
-                                    defaultHoverBorderColor: '#23A55A',
                                 },
                             },
                         }}
                     >
-                        <Button onClick={handleCancel}>Batal</Button>
+                        <Button onClick={handleCancel}>{props.readOnly ? 'Tutup' : '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>
+                        {!props.readOnly && (
+                            <Button loading={confirmLoading} onClick={handleSave}>
+                                Simpan
+                            </Button>
+                        )}
                     </ConfigProvider>
-                </>,
+                </React.Fragment>,
             ]}
         >
             {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>
+                    <Row gutter={[16, 16]}>
+                        <Col span={12}>
+                            <Text strong>Nama Karyawan</Text>
+                            <Input
+                                name="nama_employee"
+                                value={FormData.nama_employee}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                        <Col span={12}>
+                            <Text strong>Username</Text>
+                            <Input
+                                name="username"
+                                value={FormData.username}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                        <Col span={12}>
+                            <Text strong>Nama Shift</Text>
+                            <Input
+                                name="nama_shift"
+                                value={FormData.nama_shift}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                        <Col span={12}>
+                            <Text strong>Whatsapp</Text>
+                            <Input
+                                name="whatsapp"
+                                value={FormData.whatsapp}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                        <Col span={12}>
+                            <Text strong>Jam Masuk</Text>
+                            <Input
+                                name="jam_masuk"
+                                value={FormData.jam_masuk}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                        <Col span={12}>
+                            <Text strong>Jam Pulang</Text>
+                            <Input
+                                name="jam_pulang"
+                                value={FormData.jam_pulang}
+                                onChange={handleInputChange}
+                                readOnly={props.readOnly}
+                            />
+                        </Col>
+                    </Row>
                 </div>
             )}
         </Modal>
diff --git a/src/pages/jadwalShift/component/ListJadwalShift.jsx b/src/pages/jadwalShift/component/ListJadwalShift.jsx
index 3bfdacd..23f5dae 100644
--- a/src/pages/jadwalShift/component/ListJadwalShift.jsx
+++ b/src/pages/jadwalShift/component/ListJadwalShift.jsx
@@ -1,186 +1,282 @@
 import React, { memo, useState, useEffect } from 'react';
-import { Button, Col, Row, Input, ConfigProvider, Card, Table, Space } from 'antd';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
 import {
     PlusOutlined,
     EditOutlined,
     DeleteOutlined,
-    SearchOutlined,
     EyeOutlined,
+    SearchOutlined,
 } from '@ant-design/icons';
-import { NotifConfirmDialog } from '../../../components/Global/ToastNotif';
+import { NotifAlert, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
 import { useNavigate } from 'react-router-dom';
+import TableList from '../../../components/Global/TableList';
 
-const ListJadwalShift = (props) => {
+// --- DUMMY DATA (Initial State) --- //
+const initialDummyData = [
+    {
+        id: 1,
+        nama_shift: 'Shift Pagi',
+        jam_masuk: '07:00',
+        jam_pulang: '15:00',
+        username: 'd.sanjaya',
+        nama_employee: 'Dede Sanjaya',
+        whatsapp: '081234567890'
+    },
+    {
+        id: 2,
+        nama_shift: 'Shift Siang',
+        jam_masuk: '15:00',
+        jam_pulang: '23:00',
+        username: 'a.wijaya',
+        nama_employee: 'Andi Wijaya',
+        whatsapp: '081234567891'
+    },
+    {
+        id: 3,
+        nama_shift: 'Shift Malam',
+        jam_masuk: '23:00',
+        jam_pulang: '07:00',
+        username: 'b.cahya',
+        nama_employee: 'Budi Cahya',
+        whatsapp: '081234567892'
+    },
+];
+
+const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
+    {
+        title: 'Nama Karyawan',
+        dataIndex: 'nama_employee',
+        key: 'nama_employee',
+    },
+    {
+        title: 'Username',
+        dataIndex: 'username',
+        key: 'username',
+    },
+    {
+        title: 'Nama Shift',
+        dataIndex: 'nama_shift',
+        key: 'nama_shift',
+    },
+    {
+        title: 'Jam Masuk',
+        dataIndex: 'jam_masuk',
+        key: 'jam_masuk',
+    },
+    {
+        title: 'Jam Pulang',
+        dataIndex: 'jam_pulang',
+        key: 'jam_pulang',
+    },
+    {
+        title: 'Whatsapp',
+        dataIndex: 'whatsapp',
+        key: 'whatsapp',
+    },
+    {
+        title: 'Aksi',
+        key: 'aksi',
+        align: 'center',
+        render: (_, record) => (
+            <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>
+        ),
+    },
+];
+
+const ListJadwalShift = memo(function ListJadwalShift(props) {
+    const [dataSource, setDataSource] = useState(initialDummyData);
+    const [trigerFilter, setTrigerFilter] = useState(false);
+    const defaultFilter = { criteria: '' };
+    const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
     const [searchValue, setSearchValue] = useState('');
     const navigate = useNavigate();
 
+    // --- DUMMY API --- //
+    const getDummyData = (queryParams) => {
+        return new Promise((resolve) => {
+            const { criteria } = queryParams;
+            let data = dataSource;
+            if (criteria) {
+                data = dataSource.filter(item => 
+                    item.nama_employee.toLowerCase().includes(criteria.toLowerCase()) ||
+                    item.username.toLowerCase().includes(criteria.toLowerCase())
+                );
+            }
+            setTimeout(() => {
+                resolve({
+                    status: 200,
+                    data: {
+                        data: data,
+                        paging: {
+                            page: 1,
+                            limit: 10,
+                            total: data.length,
+                            page_total: 1
+                        }
+                    }
+                });
+            }, 100);
+        });
+    };
+
     useEffect(() => {
         const token = localStorage.getItem('token');
-        if (!token) {
+        if (token) {
+            if (props.actionMode === 'list') {
+                setFormDataFilter(defaultFilter);
+                doFilter();
+            }
+        } else {
             navigate('/signin');
         }
-    }, [navigate]);
+    }, [props.actionMode, dataSource]); // Added dataSource to dependency array
 
-    const handleSearch = (value) => {
-        console.log('Search value:', value);
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearch = () => {
+        setFormDataFilter({ criteria: searchValue });
+        setTrigerFilter((prev) => !prev);
     };
 
     const handleSearchClear = () => {
         setSearchValue('');
+        setFormDataFilter({ criteria: '' });
+        setTrigerFilter((prev) => !prev);
     };
 
-    const showPreviewModal = (record) => {
-        props.setSelectedData(record);
+    const showPreviewModal = (param) => {
+        props.setSelectedData(param);
         props.setActionMode('preview');
     };
 
-    const showEditModal = (record) => {
-        props.setSelectedData(record);
+    const showEditModal = (param = null) => {
+        props.setSelectedData(param);
         props.setActionMode('edit');
     };
 
-    const showAddModal = () => {
-        props.setSelectedData(null);
+    const showAddModal = (param = null) => {
+        props.setSelectedData(param);
         props.setActionMode('add');
     };
 
-    const showDeleteDialog = (record) => {
+    const showDeleteDialog = (param) => {
         NotifConfirmDialog({
             icon: 'question',
-            title: 'Konfirmasi',
-            message: `Apakah anda yakin ingin menghapus data jadwal shift untuk "${record.nama_employee}"?`,
-            onConfirm: () => props.onDelete(record.id),
+            title: 'Konfirmasi Hapus',
+            message: `Jadwal shift untuk "${param.nama_employee}" akan dihapus?`,
+            onConfirm: () => handleDelete(param.id),
+            onCancel: () => props.setSelectedData(null),
         });
     };
 
-    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: 'Username',
-            dataIndex: 'username',
-            key: 'username',
-        },
-        {
-            title: 'Nama Employee',
-            dataIndex: 'nama_employee',
-            key: 'nama_employee',
-        },
-        {
-            title: 'WhatsApp',
-            dataIndex: 'whatsapp',
-            key: 'whatsapp',
-        },
-        {
-            title: 'Aksi',
-            key: 'action',
-            align: 'center',
-            width: '15%',
-            render: (_, record) => (
-                <Space>
-                    <Button
-                        icon={<EyeOutlined />}
-                        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 filteredData = props.jadwalShiftData.filter(item =>
-        item.nama_employee.toLowerCase().includes(searchValue.toLowerCase()) ||
-        item.username.toLowerCase().includes(searchValue.toLowerCase()) ||
-        item.nama_shift.toLowerCase().includes(searchValue.toLowerCase())
-    );
+    const handleDelete = (id) => {
+        setDataSource(prevData => prevData.filter(item => item.id !== id));
+        NotifAlert({
+            icon: 'success',
+            title: 'Berhasil',
+            message: 'Data Jadwal Shift berhasil dihapus.',
+        });
+        doFilter(); // Trigger a re-fetch from the new state
+    };
 
     return (
-        <Card>
-            <Row justify="space-between" align="middle" gutter={[16, 16]}>
-                <Col xs={24} sm={12} md={10} lg={8}>
-                    <Input.Search
-                        placeholder="Cari jadwal 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 Jadwal Shift
-                        </Button>
-                    </ConfigProvider>
-                </Col>
-            </Row>
-            <Row style={{ marginTop: 16 }}>
-                <Col span={24}>
-                    <Table
-                        columns={columns}
-                        dataSource={filteredData}
-                        loading={props.loading}
-                        rowKey="id"
-                    />
-                </Col>
-            </Row>
-        </Card>
+        <React.Fragment>
+            <Card>
+                <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="Cari berdasarkan nama atau username..."
+                                    value={searchValue}
+                                    onChange={(e) => {
+                                        const value = e.target.value;
+                                        setSearchValue(value);
+                                        if (value === '') {
+                                            handleSearchClear();
+                                        }
+                                    }}
+                                    onSearch={handleSearch}
+                                    allowClear={{
+                                        clearIcon: <span onClick={handleSearchClear}>✕</span>,
+                                    }}
+                                    enterButton={
+                                        <Button
+                                            type="primary"
+                                            icon={<SearchOutlined />}
+                                            style={{
+                                                backgroundColor: '#23A55A',
+                                                borderColor: '#23A55A',
+                                            }}
+                                        >
+                                            Search
+                                        </Button>
+                                    }
+                                    size="large"
+                                />
+                            </Col>
+                            <Col>
+                                <Space wrap size="small">
+                                    <ConfigProvider
+                                        theme={{
+                                            components: {
+                                                Button: {
+                                                    defaultBg: 'white',
+                                                    defaultColor: '#23A55A',
+                                                    defaultBorderColor: '#23A55A',
+                                                },
+                                            },
+                                        }}
+                                    >
+                                        <Button
+                                            icon={<PlusOutlined />}
+                                            onClick={() => showAddModal()}
+                                            size="large"
+                                        >
+                                            Tambah Data
+                                        </Button>
+                                    </ConfigProvider>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} style={{ marginTop: '16px' }}>
+                        <TableList
+                            mobile
+                            cardColor={'#42AAFF'}
+                            header={'nama_employee'}
+                            showPreviewModal={showPreviewModal}
+                            showEditModal={showEditModal}
+                            showDeleteDialog={showDeleteDialog}
+                            getData={getDummyData}
+                            queryParams={formDataFilter}
+                            columns={columns(showPreviewModal, showEditModal, showDeleteDialog)}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
     );
-};
+});
 
-export default ListJadwalShift;
+export default ListJadwalShift;
\ No newline at end of file