feat: create page log scheduling data

src/apps/admin/index.tsx

@@ -4,6 +4,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 
 const ReportModule = lazy(() => import('./pages/report'));
 const SettingModule = lazy(() => import('./pages/setting'));
+const LogSettingModule = lazy(() => import('./pages/log-setting'));
 
 export default function AppModule() {
   return (
@@ -11,6 +12,7 @@ export default function AppModule() {
       <Routes>
         <Route path="/report" element={<ReportModule />} />
         <Route path="/setting" element={<SettingModule />} />
+        <Route path="/log-setting" element={<LogSettingModule />} />
         <Route path="/" element={<Navigate to="/app/report" />} />
         <Route path="*" element={<Navigate to={'/404'} replace={true} />} />
       </Routes>

src/apps/admin/layout/index.tsx

@@ -7,7 +7,7 @@ import axios from 'axios';
 import Logo from '../../../base/presentation/assets/images/we-logo.png';
 import { useRecoilValue } from 'recoil';
 import LocalDataConfiguration from './components/local-data-configuration';
-import { FileTextOutlined, LogoutOutlined, SettingOutlined } from '@ant-design/icons';
+import { FileProtectOutlined, FileTextOutlined, LogoutOutlined, SettingOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 
 interface AdminLayoutProps {
@@ -49,10 +49,13 @@ export default function AdminLayout(props: AdminLayoutProps) {
   }
 
   function gotoSetting() {
-    // onOpenModalConfig();
     navigate('/app/setting');
   }
 
+  function gotoLogSetting() {
+    navigate('/app/log-setting');
+  }
+
   return (
     <Layout>
       <Header
@@ -99,6 +102,16 @@ export default function AdminLayout(props: AdminLayoutProps) {
                   },
                   {
                     key: '3',
+                    label: 'Log Setting',
+                    icon: <FileProtectOutlined />,
+                    onClick: () => gotoLogSetting(),
+                  },
+                  {
+                    type: 'divider',
+                    key: 'divider_3',
+                  },
+                  {
+                    key: '4',
                     label: 'Logout',
                     icon: <LogoutOutlined />,
                     onClick: () => {
@@ -115,7 +128,7 @@ export default function AdminLayout(props: AdminLayoutProps) {
                 ]
                   .map((item) => {
                     const isAllowSetting = checkAllowAccessSetting();
-                    if (!isAllowSetting && ['1', '2', 'divider_1', 'divider_2'].includes(item.key)) {
+                    if (!isAllowSetting && ['1', '2', '3', 'divider_1', 'divider_2', 'divider_3'].includes(item.key)) {
                       return undefined;
                     }
                     return item;

src/apps/admin/pages/components/index-log.tsx

@@ -0,0 +1,108 @@
+import { Form, Flex, List, Pagination, DatePicker, Button } from 'antd';
+import { Fragment, useEffect, useState } from 'react';
+import { HistoryOutlined } from '@ant-design/icons';
+
+import dayjs from 'dayjs';
+import axios from 'axios';
+
+export default function IndexLog() {
+  const [formFilter] = Form.useForm();
+  const [data, setData] = useState<any[]>([]);
+  const [meta, setMeta] = useState<any>();
+  const [loading, setLoading] = useState(false);
+  const [filterData, setFilterData] = useState<any>();
+
+  const handleGetData = async (page: number, filter: any) => {
+    setLoading(true);
+    await axios
+      .get('v1/data-scheduling-log', {
+        params: { page: page, limit: 10, ...(filter ?? {}) },
+      })
+      .then((resp: any) => {
+        const data = resp?.data?.data ?? [];
+        const meta = resp?.data?.meta;
+        setMeta(meta);
+        setData(data);
+        setFilterData(filter);
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    handleGetData(1, {});
+  }, []);
+
+  const handleFilter = async () => {
+    const { filter_date } = await formFilter.validateFields();
+    // const schedule_date_from = filter_date[0] ? dayjs(filter_date[0]).format('YYYY-MM-DD') : undefined;
+    // const schedule_date_to = filter_date[1] ? dayjs(filter_date[1]).format('YYYY-MM-DD') : undefined;
+
+    // await handleGetData(1, { schedule_date_from, schedule_date_to });
+
+    const log_created_from = filter_date[0] ? dayjs(filter_date[0]).startOf('days').valueOf() : undefined;
+    const log_created_to = filter_date[1] ? dayjs(filter_date[1]).endOf('days').valueOf() : undefined;
+
+    await handleGetData(1, { log_created_from, log_created_to });
+  };
+
+  const handleResetFilter = async () => {
+    await formFilter.resetFields();
+    await handleGetData(1, {});
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: 20 }}></div>
+      <Form form={formFilter}>
+        <Flex gap={8}>
+          <Form.Item name="filter_date">
+            <DatePicker.RangePicker size="large" />
+          </Form.Item>
+          <Button size="large" disabled={loading} type="primary" onClick={handleFilter}>
+            Filter
+          </Button>
+          <Button size="large" disabled={loading} onClick={handleResetFilter}>
+            Reset
+          </Button>
+        </Flex>
+      </Form>
+      <List
+        bordered
+        style={{ maxHeight: '80vh', overflow: 'auto' }}
+        dataSource={data}
+        loading={loading}
+        renderItem={(item) => (
+          <List.Item key={item.id} style={{ padding: 10 }}>
+            <Flex vertical gap={8}>
+              <Flex gap={8} align="center">
+                <HistoryOutlined />
+                <div className="font-bold text-md">
+                  {dayjs(Number(item.log_created_at)).format('DD-MM-YYYY, HH:mm:ss')}
+                </div>
+              </Flex>
+              <div dangerouslySetInnerHTML={{ __html: item.description }}></div>
+            </Flex>
+          </List.Item>
+        )}
+      />
+      <div style={{ marginBottom: 10 }}></div>
+      {data?.length > 0 && (
+        <Fragment>
+          <Flex justify="end" className="mt-2">
+            <Pagination
+              current={meta?.currentPage}
+              total={meta?.totalItems}
+              pageSize={10}
+              onChange={async (page) => {
+                await handleGetData(page, filterData);
+              }}
+            />
+          </Flex>
+        </Fragment>
+      )}
+    </div>
+  );
+}

src/apps/admin/pages/log-setting.tsx

@@ -0,0 +1,32 @@
+import { ACCESS_SETTING, UserDataState } from '@pos/base';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import IndexLog from './components/index-log';
+
+export default function LogSetting() {
+  const user = useRecoilValue(UserDataState);
+  const navigate = useNavigate();
+
+  function checkAllowAccessSetting() {
+    const username = user?.username;
+    const accessSetting = ACCESS_SETTING ?? '';
+
+    const allowList = accessSetting.split('|');
+    if (allowList.includes(username)) return true;
+    return false;
+  }
+
+  useEffect(() => {
+    if (!checkAllowAccessSetting()) {
+      navigate('/app');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div>
+      <IndexLog />
+    </div>
+  );
+}