feat: setup crud scheduling data
parent
1b9c656007
commit
9cd4d7f1a0
|
@ -3,6 +3,7 @@ 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';
|
||||
import { makeColorTextValue } from '../helpers';
|
||||
|
||||
export default function DefaultValue() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
@ -124,7 +125,8 @@ export default function DefaultValue() {
|
|||
<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)' }}
|
||||
style={{ fontSize: 24, fontWeight: 600 }}
|
||||
className={`${makeColorTextValue(defaultPercentage)}`}
|
||||
>{`${defaultPercentage >= 0 ? `${defaultPercentage} %` : '-'}`}</div>
|
||||
<Button type="link" onClick={onOpenModal}>
|
||||
Edit
|
||||
|
@ -141,7 +143,8 @@ export default function DefaultValue() {
|
|||
<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)' }}
|
||||
style={{ fontSize: 24, fontWeight: 600 }}
|
||||
className={`${makeColorTextValue(currentPercentage)}`}
|
||||
>{`${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')}.`}
|
||||
|
|
|
@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
|
|||
import { makeColorStatus, STATUS_DATA } from '@pos/base';
|
||||
|
||||
import { DeleteOutlined, EditOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons';
|
||||
import { makeColorTextValue } from '../helpers';
|
||||
|
||||
export default function SchedulingData() {
|
||||
const { modal } = App.useApp();
|
||||
|
@ -73,16 +74,6 @@ export default function SchedulingData() {
|
|||
});
|
||||
};
|
||||
|
||||
function makeColorText(value: number) {
|
||||
if (value <= 30) {
|
||||
return 'text-red-500';
|
||||
} else if (value > 30 && value <= 80) {
|
||||
return 'text-yellow-500';
|
||||
} else if (value > 80 && value <= 100) {
|
||||
return 'text-green-500';
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleGetData(1);
|
||||
}, []);
|
||||
|
@ -100,8 +91,8 @@ export default function SchedulingData() {
|
|||
<List.Item key={item.id} style={{ borderBlockEnd: 'none', padding: 5 }}>
|
||||
<Card style={{ width: '100%' }}>
|
||||
<Flex justify="space-between" style={{ width: '100%' }}>
|
||||
<Row className="w-full">
|
||||
<Col span={12}>
|
||||
<Row className="w-full" gutter={[4, 4]}>
|
||||
<Col xs={18} sm={12} span={12}>
|
||||
<Flex align="center" className="h-full" gap={4}>
|
||||
<div>
|
||||
<div className="text-[#00000066]">{item.name}</div>
|
||||
|
@ -109,16 +100,16 @@ export default function SchedulingData() {
|
|||
</div>
|
||||
</Flex>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Col xs={18} sm={12} span={12}>
|
||||
<Flex align="center" className="h-full" gap={8}>
|
||||
<div
|
||||
className={`text-2xl font-bold ${makeColorText(item.indexing_key)}`}
|
||||
className={`text-2xl font-bold ${makeColorTextValue(item.indexing_key)}`}
|
||||
>{`${item.indexing_key} %`}</div>
|
||||
<Tag color={makeColorStatus(item.status)}>{item.status}</Tag>
|
||||
</Flex>
|
||||
</Col>
|
||||
</Row>
|
||||
<Flex align="center" gap={12}>
|
||||
<Flex align="center" gap={4}>
|
||||
<Tooltip title="Edit" trigger={'hover'} placement="bottom">
|
||||
<Button icon={<EditOutlined />} />
|
||||
</Tooltip>
|
||||
|
|
|
@ -0,0 +1,11 @@
|
|||
export function makeColorTextValue(value: number) {
|
||||
if (value <= 30) {
|
||||
return 'text-red-500';
|
||||
} else if (value > 30 && value <= 80) {
|
||||
return 'text-yellow-500';
|
||||
} else if (value > 80 && value <= 100) {
|
||||
return 'text-green-500';
|
||||
} else {
|
||||
return 'text-[#00000066]';
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue