feat: setup crud scheduling data

pull/1/head
Firman Ramdhani 2025-07-07 11:46:27 +07:00
parent 1b9c656007
commit 9cd4d7f1a0
3 changed files with 22 additions and 17 deletions

View File

@ -3,6 +3,7 @@ import { Button, Card, Col, Flex, InputNumber, Modal, Row, Form } from 'antd';
import { Fragment, useEffect, useState } from 'react'; import { Fragment, useEffect, useState } from 'react';
import axios from 'axios'; import axios from 'axios';
import { notificationError } from '@pos/base'; import { notificationError } from '@pos/base';
import { makeColorTextValue } from '../helpers';
export default function DefaultValue() { export default function DefaultValue() {
const [loading, setLoading] = useState(false); 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> <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>DEFAULT PERCENTAGE</div>
<Flex gap={12}> <Flex gap={12}>
<div <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> >{`${defaultPercentage >= 0 ? `${defaultPercentage} %` : '-'}`}</div>
<Button type="link" onClick={onOpenModal}> <Button type="link" onClick={onOpenModal}>
Edit Edit
@ -141,7 +143,8 @@ export default function DefaultValue() {
<Flex vertical gap={8} justify="space-between"> <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: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>CURRENT PERCENTAGE</div>
<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> >{`${currentPercentage >= 0 ? `${currentPercentage} %` : '-'}`}</div>
<div style={{ fontSize: 11, fontWeight: 400, color: 'rgba(0,0,0,0.4)', fontStyle: 'italic' }}> <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')}.`} {`Value yang di terapkan hari ini ${dayjs().format('DD-MM-YYYY')}.`}

View File

@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
import { makeColorStatus, STATUS_DATA } from '@pos/base'; import { makeColorStatus, STATUS_DATA } from '@pos/base';
import { DeleteOutlined, EditOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons'; import { DeleteOutlined, EditOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons';
import { makeColorTextValue } from '../helpers';
export default function SchedulingData() { export default function SchedulingData() {
const { modal } = App.useApp(); 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(() => { useEffect(() => {
handleGetData(1); handleGetData(1);
}, []); }, []);
@ -100,8 +91,8 @@ export default function SchedulingData() {
<List.Item key={item.id} style={{ borderBlockEnd: 'none', padding: 5 }}> <List.Item key={item.id} style={{ borderBlockEnd: 'none', padding: 5 }}>
<Card style={{ width: '100%' }}> <Card style={{ width: '100%' }}>
<Flex justify="space-between" style={{ width: '100%' }}> <Flex justify="space-between" style={{ width: '100%' }}>
<Row className="w-full"> <Row className="w-full" gutter={[4, 4]}>
<Col span={12}> <Col xs={18} sm={12} span={12}>
<Flex align="center" className="h-full" gap={4}> <Flex align="center" className="h-full" gap={4}>
<div> <div>
<div className="text-[#00000066]">{item.name}</div> <div className="text-[#00000066]">{item.name}</div>
@ -109,16 +100,16 @@ export default function SchedulingData() {
</div> </div>
</Flex> </Flex>
</Col> </Col>
<Col span={12}> <Col xs={18} sm={12} span={12}>
<Flex align="center" className="h-full" gap={8}> <Flex align="center" className="h-full" gap={8}>
<div <div
className={`text-2xl font-bold ${makeColorText(item.indexing_key)}`} className={`text-2xl font-bold ${makeColorTextValue(item.indexing_key)}`}
>{`${item.indexing_key} %`}</div> >{`${item.indexing_key} %`}</div>
<Tag color={makeColorStatus(item.status)}>{item.status}</Tag> <Tag color={makeColorStatus(item.status)}>{item.status}</Tag>
</Flex> </Flex>
</Col> </Col>
</Row> </Row>
<Flex align="center" gap={12}> <Flex align="center" gap={4}>
<Tooltip title="Edit" trigger={'hover'} placement="bottom"> <Tooltip title="Edit" trigger={'hover'} placement="bottom">
<Button icon={<EditOutlined />} /> <Button icon={<EditOutlined />} />
</Tooltip> </Tooltip>

View File

@ -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]';
}
}