feat(SPG-1173): setup setting scheduling on realtime report

src/apps/admin/layout/components/default-value.tsx

@@ -0,0 +1,155 @@
+import dayjs from 'dayjs';
+import { Button, Card, Col, Flex, InputNumber, Modal, Row, Form } from 'antd';
+import { Fragment, useEffect, useState } from 'react';
+import axios from 'axios';
+import { notificationError } from '@pos/base';
+
+export default function DefaultValue() {
+  const [loading, setLoading] = useState(false);
+  const [loadingSave, setLoadingSave] = useState(false);
+  const [defaultPercentage, setDefaultPercentage] = useState<number>(100);
+  const [currentPercentage, setCurrentPercentage] = useState<number>(100);
+
+  const [form] = Form.useForm();
+  const [openModal, setOpenModal] = useState(false);
+
+  const onCloseModal = async () => {
+    await form.resetFields();
+    setOpenModal(false);
+  };
+
+  const onOpenModal = async () => {
+    await form.setFieldsValue({ default_value: defaultPercentage });
+    setOpenModal(true);
+  };
+
+  const handleSaveData = async () => {
+    try {
+      const payload = await form.validateFields();
+      setLoadingSave(true);
+      await axios
+        .post('v1/data-scheduling-default', payload)
+        .then(async (resp) => {
+          const value = resp.data?.data?.default_value;
+          await form.setFieldsValue({ default_value: value });
+          setDefaultPercentage(value);
+          setLoadingSave(false);
+          onCloseModal();
+        })
+        .catch((err) => {
+          const message = err.message;
+          if (message) notificationError(message);
+          setLoadingSave(false);
+        });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleGetData = async () => {
+    setLoading(true);
+    await Promise.all([
+      axios
+        .get('v1/data-scheduling-default')
+        .then((resp) => {
+          const value = resp.data?.data?.default_value;
+          form.setFieldsValue({ default_value: value });
+          setDefaultPercentage(value);
+        })
+        .catch((err) => {
+          const message = err.message;
+          if (message) notificationError(message);
+        }),
+      axios
+        .get('v1/data-scheduling-active', { params: { date: dayjs().format('YYYY-MM-DD') } })
+        .then((resp) => {
+          const value = resp.data?.data?.value;
+          form.setFieldsValue({ value: value });
+          setCurrentPercentage(value);
+        })
+        .catch((err) => {
+          const message = err.message;
+          if (message) notificationError(message);
+        }),
+    ]);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    handleGetData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Fragment>
+      <Modal
+        open={openModal}
+        onCancel={onCloseModal}
+        onOk={handleSaveData}
+        okButtonProps={{ loading: loadingSave }}
+        cancelButtonProps={{ disabled: loadingSave }}
+        okText="Save"
+        title={<div className="text-lg font-bold">DEFAULT PERCENTAGE</div>}
+      >
+        <Form form={form}>
+          <Flex justify="center">
+            <Flex align="baseline">
+              <Form.Item
+                name={'default_value'}
+                rules={[
+                  { required: true, message: 'Value harus diisi!' },
+                  { type: 'number', max: 100, message: 'Value maksimal 100%!' },
+                  {
+                    validator(_, value) {
+                      if (value <= 0) return Promise.reject(new Error('Value harus lebih dari 0!'));
+                      return Promise.resolve();
+                    },
+                  },
+                ]}
+              >
+                <InputNumber style={{ fontSize: 45, width: 120, fontWeight: 'bold' }} />
+              </Form.Item>
+              <div className="text-[50px] font-extrabold ml-4">{`%`}</div>
+            </Flex>
+          </Flex>
+          <div style={{ fontSize: 11, fontWeight: 400, color: 'rgba(0,0,0,0.4)', fontStyle: 'italic' }}>
+            {`*Value akan diterapkan otomatis jika tidak ada pengaturan khusus pada tanggal tersebut.`}
+          </div>
+        </Form>
+      </Modal>
+      <Row gutter={[8, 8]}>
+        <Col xl={4} span={12}>
+          <Card loading={loading} styles={{ body: { padding: '6px 12px 6px 12px' } }}>
+            <Flex vertical gap={8} justify="space-between">
+              <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>DEFAULT PERCENTAGE</div>
+              <Flex gap={12}>
+                <div
+                  style={{ fontSize: 24, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}
+                >{`${defaultPercentage >= 0 ? `${defaultPercentage} %` : '-'}`}</div>
+                <Button type="link" onClick={onOpenModal}>
+                  Edit
+                </Button>
+              </Flex>
+              <div style={{ fontSize: 11, fontWeight: 400, color: 'rgba(0,0,0,0.4)', fontStyle: 'italic' }}>
+                {`Value otomatis jika tak ada setelan khusus.`}
+              </div>
+            </Flex>
+          </Card>
+        </Col>
+        <Col xl={4} span={12}>
+          <Card loading={loading} styles={{ body: { padding: '6px 12px 6px 12px' } }}>
+            <Flex vertical gap={8} justify="space-between">
+              <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>CURRENT PERCENTAGE</div>
+              <div
+                style={{ fontSize: 24, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}
+              >{`${currentPercentage >= 0 ? `${currentPercentage} %` : '-'}`}</div>
+              <div style={{ fontSize: 11, fontWeight: 400, color: 'rgba(0,0,0,0.4)', fontStyle: 'italic' }}>
+                {`Value yang di terapkan hari ini ${dayjs().format('DD-MM-YYYY')}.`}
+              </div>
+            </Flex>
+          </Card>
+        </Col>
+      </Row>
+    </Fragment>
+  );
+}

src/apps/admin/layout/index.tsx

@@ -89,7 +89,7 @@ export default function AdminLayout(props: AdminLayoutProps) {
                   },
                   {
                     key: '2',
-                    label: 'Settings',
+                    label: 'Setting',
                     icon: <SettingOutlined />,
                     onClick: () => gotoSetting(),
                   },

src/apps/admin/pages/setting.tsx

@@ -2,6 +2,7 @@ import { ACCESS_SETTING, UserDataState } from '@pos/base';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
+import DefaultValue from '../layout/components/default-value';
 
 export default function SettingModule() {
   const user = useRecoilValue(UserDataState);
@@ -22,5 +23,9 @@ export default function SettingModule() {
     }
   }, []);
 
-  return <div>Setting</div>;
+  return (
+    <div>
+      <DefaultValue />
+    </div>
+  );
 }