feat: display error message

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,6 +146,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)' }}>DEFAULT PERCENTAGE</div>
               <Flex gap={12}>
+                {defaultPercentage ? (
+                  <>
                     <div
                       style={{ fontSize: 24, fontWeight: 600 }}
                       className={`${makeColorTextValue(defaultPercentage)}`}
@@ -145,6 +155,19 @@ export default function DefaultValue() {
                     <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,6 +180,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>
               <Flex gap={12}>
+                {currentPercentage ? (
+                  <>
                     <div
                       style={{ fontSize: 24, fontWeight: 600 }}
                       className={`${makeColorTextValue(currentPercentage)}`}
@@ -164,6 +189,19 @@ export default function DefaultValue() {
                     <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')}.`}