Merge branch 'lavoce' of https://gitea.idetama.id/yogiedigital/cod-fe into lavoce

src/App.css

@@ -0,0 +1,6 @@
+/* Global Card Styling */
+.ant-card {
+    border-radius: 12px !important;
+    box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.07) !important;
+    margin-bottom: 24px !important;
+}

src/api/user.jsx

@@ -0,0 +1,103 @@
+import { SendRequest } from '../components/Global/ApiRequest';
+
+const getAllUser = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `user?${queryParams.toString()}`,
+    });
+
+    // Parse query params to get page and limit
+    const params = Object.fromEntries(queryParams);
+    const currentPage = parseInt(params.page) || 1;
+    const currentLimit = parseInt(params.limit) || 10;
+
+    // Backend returns all data, so we need to do client-side pagination
+    const allData = response.data || [];
+    const totalData = allData.length;
+
+    // Calculate start and end index for current page
+    const startIndex = (currentPage - 1) * currentLimit;
+    const endIndex = startIndex + currentLimit;
+
+    // Slice data for current page
+    const paginatedData = allData.slice(startIndex, endIndex);
+
+    // Transform response to match TableList expected structure
+    return {
+        status: response.statusCode || 200,
+        data: {
+            data: paginatedData,
+            paging: {
+                page: currentPage,
+                limit: currentLimit,
+                total: totalData,
+                page_total: Math.ceil(totalData / currentLimit)
+            },
+            total: totalData
+        }
+    };
+};
+
+const getUserById = async (id) => {
+    const response = await SendRequest({
+        method: 'get',
+        prefix: `user/${id}`,
+    });
+    return response.data;
+};
+
+const createUser = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'post',
+        prefix: `user`,
+        params: queryParams,
+    });
+    // Return full response with statusCode
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const updateUser = async (user_id, queryParams) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `user/${user_id}`,
+        params: queryParams,
+    });
+    // Return full response with statusCode
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const deleteUser = async (queryParams) => {
+    const response = await SendRequest({
+        method: 'delete',
+        prefix: `user/${queryParams}`,
+    });
+    // Return full response with statusCode
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+const approveUser = async (user_id) => {
+    const response = await SendRequest({
+        method: 'put',
+        prefix: `user/${user_id}/approve`,
+    });
+    // Return full response with statusCode
+    return {
+        statusCode: response.statusCode || 200,
+        data: response.data,
+        message: response.message
+    };
+};
+
+export { getAllUser, getUserById, createUser, updateUser, deleteUser, approveUser };

src/index.css

@@ -18,4 +18,38 @@
 html body {
   margin: 0;
   height: 100vh;
+}
+
+/* Custom Orange Sidebar Menu Styles */
+.custom-orange-menu.ant-menu-dark .ant-menu-item-selected {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+  color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item-selected::after {
+  border-right-color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item:hover,
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title:hover {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title {
+  color: white !important;
+}
+
+.custom-orange-menu.ant-menu-dark.ant-menu-inline .ant-menu-sub {
+  background: rgba(0, 0, 0, 0.2) !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item,
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-title {
+  color: rgba(255, 255, 255, 0.9) !important;
+}
+
+.custom-orange-menu.ant-menu-dark .ant-menu-item-active,
+.custom-orange-menu.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title {
+  color: white !important;
 }

src/layout/LayoutMenu.jsx

@@ -180,12 +180,18 @@ const LayoutMenu = () => {
 
     return (
         <Menu
-            theme="dark"
             mode="inline"
             items={items}
             defaultSelectedKeys={['home']}
             openKeys={stateOpenKeys}
             onOpenChange={onOpenChange}
+            style={{
+                background: 'transparent',
+                color: 'white',
+                border: 'none',
+            }}
+            theme="dark"
+            className="custom-orange-menu"
         />
     );
 };

src/layout/LayoutSidebar.jsx

@@ -6,7 +6,8 @@ import LayoutMenu from './LayoutMenu';
 const { Sider } = Layout;
 const LayoutSidebar = () => {
     return (
-        <Sider width={300}
+        <Sider
+            width={300}
             breakpoint="lg"
             collapsedWidth="0"
             onBreakpoint={(broken) => {
@@ -15,6 +16,9 @@ const LayoutSidebar = () => {
             onCollapse={(collapsed, type) => {
                 // console.log(collapsed, type);
             }}
+            style={{
+                background: 'linear-gradient(180deg, #FF8C42 0%, #FF6B35 100%)',
+            }}
         >
             <LayoutLogo />
             <LayoutMenu />

src/layout/MainLayout.jsx

@@ -4,30 +4,30 @@ import LayoutFooter from './LayoutFooter';
 import LayoutHeader from './LayoutHeader';
 import LayoutSidebar from './LayoutSidebar';
 
-
 const { Content } = Layout;
 
 const MainLayout = ({ children }) => {
-  const {
+    const {
-    token: { colorBgContainer, borderRadiusLG },
+        token: { colorBgContainer, borderRadiusLG },
-  } = theme.useToken();
+    } = theme.useToken();
 
-  return (
+    return (
-    <Layout style={{ height: '100vh' }}>
+        <Layout style={{ height: '100vh' }}>
-      <LayoutSidebar />
+            <LayoutSidebar />
-      <Layout
+            <Layout
-      style={{
+                style={{
-        overflow: 'auto',
+                    overflow: 'auto',
-
+                }}
-      }}>
+            >
-        <LayoutHeader />
+                <LayoutHeader />
-        <Content
+                <Content
-          style={{
+                    style={{
-            margin: '24px 16px 0',
+                        margin: '0 25px',
-            flex: '1 0 auto',
+                        flex: '1 0 auto',
-          }}
+                        padding: '8px 8px',
-        >
+                    }}
-          {/* <div
+                >
+                    {/* <div
             style={{
               padding: 24,
               minHeight: '100%',
@@ -35,12 +35,12 @@ const MainLayout = ({ children }) => {
               borderRadius: borderRadiusLG,
             }}
           > */}
-            {children}
+                    {children}
-          {/* </div> */}
+                    {/* </div> */}
-        </Content>
+                </Content>
-        {/* <LayoutFooter /> */}
+                {/* <LayoutFooter /> */}
-      </Layout>
+            </Layout>
-    </Layout>
+        </Layout>
-  );
+    );
 };
-export default MainLayout;
+export default MainLayout;

src/main.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import './App.css'
 import { BreadcrumbProvider } from './layout/LayoutBreadcrumb.jsx';
 
 ReactDOM.createRoot(document.getElementById('root')).render(

src/pages/auth/SignIn.jsx

@@ -3,7 +3,7 @@ import { Flex, Input, Form, Button, Card, Space, Image } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { NotifAlert, NotifOk } from '../../components/Global/ToastNotif';
 import { SendRequest } from '../../components/Global/ApiRequest';
-import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
+import bg_cod from 'assets/bg_cod.jpg';
 import logo from 'assets/freepik/LOGOPIU.png';
 
 const SignIn = () => {
@@ -93,7 +93,7 @@ const SignIn = () => {
             justify="center"
             style={{
                 height: '100vh',
-                backgroundImage: `url(${sypiu_ggcp})`,
+                backgroundImage: `url(${bg_cod})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center',
             }}

src/pages/auth/Signup.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Flex, Input, Form, Button, Card, Space, Image, Row, Col } from 'antd';
 import { useNavigate } from 'react-router-dom';
-import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
+import bg_cod from 'assets/bg_cod.jpg';
 import logo from 'assets/freepik/LOGOPIU.png';
 import { register } from '../../api/auth';
 import { NotifOk, NotifAlert } from '../../components/Global/ToastNotif';
@@ -96,7 +96,7 @@ const SignUp = () => {
             justify="center"
             style={{
                 minHeight: '100vh',
-                backgroundImage: `url(${sypiu_ggcp})`,
+                backgroundImage: `url(${bg_cod})`,
                 backgroundSize: 'cover',
                 backgroundPosition: 'center',
                 padding: '20px',

src/pages/user/IndexUser.jsx

@@ -1,5 +1,6 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import ListUser from './component/ListUser';
 import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
 import { Typography } from 'antd';
 
@@ -9,11 +10,44 @@ const IndexUser = memo(function IndexUser() {
     const navigate = useNavigate();
     const { setBreadcrumbItems } = useBreadcrumb();
 
+    const [actionMode, setActionMode] = useState('list');
+    const [selectedData, setSelectedData] = useState(null);
+    const [readOnly, setReadOnly] = useState(false);
+    const [showModal, setShowmodal] = useState(false);
+
+    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;
+        }
+        setActionMode(param);
+    };
+
     useEffect(() => {
         const token = localStorage.getItem('token');
         if (token) {
             setBreadcrumbItems([
-                { title: <Text strong style={{ fontSize: '14px' }}>• User</Text> }
+                {
+                    title: (
+                        <Text strong style={{ fontSize: '14px' }}>
+                            • User
+                        </Text>
+                    ),
+                },
             ]);
         } else {
             navigate('/signin');
@@ -21,9 +55,15 @@ const IndexUser = memo(function IndexUser() {
     }, []);
 
     return (
-        <div>
+        <React.Fragment>
-            <h1>User Page</h1>
+            <ListUser
-        </div>
+                actionMode={actionMode}
+                setActionMode={setMode}
+                selectedData={selectedData}
+                setSelectedData={setSelectedData}
+                readOnly={readOnly}
+            />
+        </React.Fragment>
     );
 });
 

src/pages/user/component/ListUser.jsx

@@ -0,0 +1,349 @@
+import React, { memo, useState, useEffect } from 'react';
+import { Space, Tag, ConfigProvider, Button, Row, Col, Card, Input } from 'antd';
+import {
+    PlusOutlined,
+    EditOutlined,
+    DeleteOutlined,
+    EyeOutlined,
+    SearchOutlined,
+    CheckOutlined,
+    CloseOutlined,
+} from '@ant-design/icons';
+import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
+import { useNavigate } from 'react-router-dom';
+import { deleteUser, getAllUser } from '../../../api/user';
+import TableList from '../../../components/Global/TableList';
+
+const columns = (showPreviewModal, showEditModal, showDeleteDialog, showApproveDialog) => [
+    {
+        title: 'ID',
+        dataIndex: 'user_id',
+        key: 'user_id',
+        width: '5%',
+        hidden: 'true',
+    },
+    {
+        title: 'Username',
+        dataIndex: 'username',
+        key: 'username',
+        width: '12%',
+    },
+    {
+        title: 'Nama Lengkap',
+        dataIndex: 'fullname',
+        key: 'fullname',
+        width: '15%',
+    },
+    {
+        title: 'Nomor WA',
+        dataIndex: 'whatsapp_number',
+        key: 'whatsapp_number',
+        width: '12%',
+    },
+    {
+        title: 'Level',
+        dataIndex: 'level',
+        key: 'level',
+        width: '8%',
+        align: 'center',
+    },
+    {
+        title: 'Nama Role',
+        dataIndex: 'role_name',
+        key: 'role_name',
+        width: '12%',
+        render: (_, { role_name }) => (
+            <>
+                {role_name === 'administrator' && (
+                    <Tag color={'purple'} key={'role'}>
+                        Administrator
+                    </Tag>
+                )}
+                {role_name === 'operator' && (
+                    <Tag color={'blue'} key={'role'}>
+                        Operator
+                    </Tag>
+                )}
+                {role_name === 'engineer' && (
+                    <Tag color={'cyan'} key={'role'}>
+                        Engineer
+                    </Tag>
+                )}
+                {role_name === 'guest' && (
+                    <Tag color={'default'} key={'role'}>
+                        Guest
+                    </Tag>
+                )}
+            </>
+        ),
+    },
+    {
+        title: 'Status',
+        dataIndex: 'status',
+        key: 'status',
+        width: '10%',
+        align: 'center',
+        render: (_, { status }) => (
+            <>
+                {status === 'active' && (
+                    <Tag color={'green'} key={'status'}>
+                        Active
+                    </Tag>
+                )}
+                {status === 'pending' && (
+                    <Tag color={'orange'} key={'status'}>
+                        Pending
+                    </Tag>
+                )}
+                {status === 'inactive' && (
+                    <Tag color={'default'} key={'status'}>
+                        Inactive
+                    </Tag>
+                )}
+                {status === 'rejected' && (
+                    <Tag color={'red'} key={'status'}>
+                        Rejected
+                    </Tag>
+                )}
+            </>
+        ),
+    },
+    {
+        title: 'Aksi',
+        key: 'aksi',
+        align: 'center',
+        width: '15%',
+        render: (_, record) => (
+            <Space>
+                <Button
+                    type="text"
+                    style={{ borderColor: '#1890ff' }}
+                    icon={<EyeOutlined style={{ color: '#1890ff' }} />}
+                    onClick={() => showPreviewModal(record)}
+                />
+                {record.status === 'pending' && (
+                    <Button
+                        type="text"
+                        style={{ borderColor: '#52c41a' }}
+                        icon={<CheckOutlined style={{ color: '#52c41a' }} />}
+                        onClick={() => showApproveDialog(record)}
+                    />
+                )}
+                <Button
+                    type="text"
+                    style={{ borderColor: '#faad14' }}
+                    icon={<EditOutlined style={{ color: '#faad14' }} />}
+                    onClick={() => showEditModal(record)}
+                />
+                <Button
+                    type="text"
+                    danger
+                    style={{ borderColor: 'red' }}
+                    icon={<DeleteOutlined />}
+                    onClick={() => showDeleteDialog(record)}
+                />
+            </Space>
+        ),
+    },
+];
+
+const ListUser = memo(function ListUser(props) {
+    const [showFilter, setShowFilter] = useState(false);
+    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) {
+        if (props.actionMode == 'list') {
+            setFormDataFilter(defaultFilter);
+            doFilter();
+        }
+        } else {
+            navigate('/signin');
+        }
+    }, [props.actionMode]);
+
+    const toggleFilter = () => {
+        setFormDataFilter(defaultFilter);
+        setShowFilter((prev) => !prev);
+    };
+
+    const doFilter = () => {
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearch = () => {
+        setFormDataFilter({ search: searchValue });
+        setTrigerFilter((prev) => !prev);
+    };
+
+    const handleSearchClear = () => {
+        setSearchValue('');
+        setFormDataFilter({ search: '' });
+        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 showApproveDialog = (param) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi Approve User',
+            message: 'Apakah anda yakin approve user "' + param.fullname + '" ?',
+            onConfirm: () => handleApprove(param.user_id),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const showDeleteDialog = (param) => {
+        NotifConfirmDialog({
+            icon: 'question',
+            title: 'Konfirmasi',
+            message: 'Apakah anda yakin hapus user "' + param.fullname + '" ?',
+            onConfirm: () => handleDelete(param.user_id),
+            onCancel: () => props.setSelectedData(null),
+        });
+    };
+
+    const handleApprove = async (user_id) => {
+        // TODO: Implement approve user API call
+        NotifAlert({
+            icon: 'info',
+            title: 'Info',
+            message: 'Approve user akan diimplementasikan dengan API',
+        });
+        // const response = await approveUser(user_id);
+        // if (response.statusCode == 200) {
+        //     NotifAlert({
+        //         icon: 'success',
+        //         title: 'Berhasil',
+        //         message: 'User berhasil diapprove.',
+        //     });
+        //     doFilter();
+        // }
+    };
+
+    const handleDelete = async (user_id) => {
+        const response = await deleteUser(user_id);
+
+        if (response.statusCode == 200) {
+            NotifAlert({
+                icon: 'success',
+                title: 'Berhasil',
+                message: 'User "' + response.data.fullname + '" berhasil dihapus.',
+            });
+            doFilter();
+        } else {
+            NotifOk({
+                icon: 'error',
+                title: 'Gagal',
+                message: 'Gagal Menghapus User',
+            });
+        }
+    };
+
+    return (
+        <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="Search user by username, nama, or role..."
+                                    value={searchValue}
+                                    onChange={(e) => {
+                                        const value = e.target.value;
+                                        setSearchValue(value);
+                                        // Auto search when clearing by backspace/delete
+                                        if (value === '') {
+                                            setFormDataFilter({ search: '' });
+                                            setTrigerFilter((prev) => !prev);
+                                        }
+                                    }}
+                                    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={{
+                                            token: { colorBgContainer: '#E9F6EF' },
+                                            components: {
+                                                Button: {
+                                                    defaultBg: 'white',
+                                                    defaultColor: '#23A55A',
+                                                    defaultBorderColor: '#23A55A',
+                                                    defaultHoverColor: '#23A55A',
+                                                    defaultHoverBorderColor: '#23A55A',
+                                                },
+                                            },
+                                        }}
+                                    >
+                                        <Button
+                                            icon={<PlusOutlined />}
+                                            onClick={() => showAddModal()}
+                                            size="large"
+                                        >
+                                            Tambah User
+                                        </Button>
+                                    </ConfigProvider>
+                                </Space>
+                            </Col>
+                        </Row>
+                    </Col>
+                    <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
+                        <TableList
+                            getData={getAllUser}
+                            queryParams={formDataFilter}
+                            columns={columns(
+                                showPreviewModal,
+                                showEditModal,
+                                showDeleteDialog,
+                                showApproveDialog
+                            )}
+                            triger={trigerFilter}
+                        />
+                    </Col>
+                </Row>
+            </Card>
+        </React.Fragment>
+    );
+});
+
+export default ListUser;