From d330907e01f3dac679d44270995f629a894e4691 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Wed, 9 Jul 2025 10:50:52 +0700
Subject: [PATCH] feat: display error message

---
 .../admin/pages/components/default-value.tsx  | 70 ++++++++++++++-----
 1 file changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/apps/admin/pages/components/default-value.tsx b/src/apps/admin/pages/components/default-value.tsx
index 6e6dcaf..14cca69 100644
--- a/src/apps/admin/pages/components/default-value.tsx
+++ b/src/apps/admin/pages/components/default-value.tsx
@@ -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')}.`}