feat(SPG-1173): setup setting scheduling on realtime report
Firman Ramdhani
parent
4a08abe0b5
commit
e737a89a24
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -89,7 +89,7 @@ export default function AdminLayout(props: AdminLayoutProps) {
|
|||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Settings',
|
||||
label: 'Setting',
|
||||
icon: <SettingOutlined />,
|
||||
onClick: () => gotoSetting(),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue