feat: display error message

main 1.0.0-alpha.5
Firman Ramdhani 2025-07-09 10:50:52 +07:00
parent 638126e06f
commit d330907e01
1 changed files with 54 additions and 16 deletions

View File

@ -10,8 +10,10 @@ export default function DefaultValue() {
const [loadingActive, setLoadingActive] = useState(false);
const [loadingSave, setLoadingSave] = useState(false);
const [defaultPercentage, setDefaultPercentage] = useState<number>(100);
const [currentPercentage, setCurrentPercentage] = useState<number>(100);
const [defaultPercentage, setDefaultPercentage] = useState<number>();
const [currentPercentage, setCurrentPercentage] = useState<number>();
const [errorDefaultPercentage, setErrorDefaultPercentage] = useState<string>();
const [errorCurrentPercentage, setErrorCurrentPercentage] = useState<string>();
const [form] = Form.useForm();
const [openModal, setOpenModal] = useState(false);
@ -58,9 +60,12 @@ export default function DefaultValue() {
const value = resp.data?.data?.value;
form.setFieldsValue({ value: value });
setCurrentPercentage(value);
setErrorCurrentPercentage(null as any);
})
.catch((err) => {
const message = err.message;
setCurrentPercentage(null as any);
setErrorCurrentPercentage(message);
if (message) notificationError(message);
})
.finally(() => {
@ -76,9 +81,12 @@ export default function DefaultValue() {
const value = resp.data?.data?.default_value;
form.setFieldsValue({ default_value: value });
setDefaultPercentage(value);
setErrorDefaultPercentage(null as any);
})
.catch((err) => {
const message = err.message;
setDefaultPercentage(null as any);
setErrorDefaultPercentage(message);
if (message) notificationError(message);
})
.finally(() => {
@ -138,13 +146,28 @@ export default function DefaultValue() {
<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 }}
className={`${makeColorTextValue(defaultPercentage)}`}
>{`${defaultPercentage >= 0 ? `${defaultPercentage} %` : '-'}`}</div>
<Button type="link" onClick={onOpenModal}>
Edit
</Button>
{defaultPercentage ? (
<>
<div
style={{ fontSize: 24, fontWeight: 600 }}
className={`${makeColorTextValue(defaultPercentage)}`}
>{`${defaultPercentage >= 0 ? `${defaultPercentage} %` : '-'}`}</div>
<Button type="link" onClick={onOpenModal}>
Edit
</Button>
</>
) : (
<div>
{errorDefaultPercentage ? (
<div className="text-red-500 bg-red-100 p-3" style={{ borderRadius: 6 }}>
<div className="italic font-semibold">{`Error:`}</div>
<div className="italic">{errorDefaultPercentage}</div>
</div>
) : (
<div>{`-`}</div>
)}
</div>
)}
</Flex>
<div style={{ fontSize: 11, fontWeight: 400, color: 'rgba(0,0,0,0.4)', fontStyle: 'italic' }}>
{`Value otomatis jika tak ada setelan khusus.`}
@ -157,13 +180,28 @@ 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>
<Flex gap={12}>
<div
style={{ fontSize: 24, fontWeight: 600 }}
className={`${makeColorTextValue(currentPercentage)}`}
>{`${currentPercentage >= 0 ? `${currentPercentage} %` : '-'}`}</div>
<Button type="link" onClick={handleGetDataActive}>
Reload
</Button>
{currentPercentage ? (
<>
<div
style={{ fontSize: 24, fontWeight: 600 }}
className={`${makeColorTextValue(currentPercentage)}`}
>{`${currentPercentage >= 0 ? `${currentPercentage} %` : '-'}`}</div>
<Button type="link" onClick={handleGetDataActive}>
Reload
</Button>
</>
) : (
<div>
{errorCurrentPercentage ? (
<div className="text-red-500 bg-red-100 p-3" style={{ borderRadius: 6 }}>
<div className="italic font-semibold">{`Error:`}</div>
<div className="italic">{errorCurrentPercentage}</div>
</div>
) : (
<div>{`-`}</div>
)}
</div>
)}
</Flex>
<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')}.`}