style : update revisi style

src/module/project/ui/progress_detail_project.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useHookstate } from '@hookstate/core';
-import { ActionIcon, Box, Grid, Progress, Skeleton, Text } from '@mantine/core';
+import { ActionIcon, Box, Grid, Group, Progress, Skeleton, Text } from '@mantine/core';
 import { useParams } from 'next/navigation';
 import React, { useState } from 'react';
 import { HiMiniPresentationChartBar } from 'react-icons/hi2';
@@ -9,6 +9,7 @@ import toast from 'react-hot-toast';
 import { funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
 import { TEMA } from '@/module/_global';
+import { IoIosWarning } from 'react-icons/io';
 
 export default function ProgressDetailProject() {
   const [valProgress, setValProgress] = useState(0)
@@ -17,7 +18,8 @@ export default function ProgressDetailProject() {
   const refresh = useHookstate(globalRefreshProject)
   const [loading, setLoading] = useState(true)
   const tema = useHookstate(TEMA)
-
+  const [reason, setReason] = useState("")
+  
   async function getOneData() {
     try {
       setLoading(true)
@@ -37,6 +39,26 @@ export default function ProgressDetailProject() {
     }
   }
 
+  async function getOneDataCancel() {
+    try {
+      const res = await funGetOneProjectById(param.id, 'data');
+      console.log(res.data)
+      if (res.success) {
+        setReason(res.data.reason);
+      } else {
+        toast.error(res.message);
+      }
+
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
+    }
+  }
+
+  useShallowEffect(() => {
+    getOneDataCancel();
+  }, [param.id])
+
   function onRefresh() {
     if (refresh.get()) {
       getOneData()
@@ -55,46 +77,62 @@ export default function ProgressDetailProject() {
   return (
     <>
       <Box mt={10}>
-        {loading ? 
+        {reason !== null ? 
+          (
+            <Box mb={10}>
+            <Box p={15} bg={"#FFF2CD"} style={{
+              borderRadius: 10,
+              }}>
+              <Group align='center'>
+                <IoIosWarning size={25}/>
+                <Text fw={"bold"}>Kegiatan dibatalkan</Text>
+                </Group>
+                <Text mt={5} truncate="end">{reason}</Text>
+            </Box>
+            </Box>
+        )
+          : null
+      }
+        {loading ?
           <Skeleton width={"100%"} height={100} radius={"md"} />
           :
-        <Box
-          p={20}
-          bg={"#DCEED8"}
-          style={{
-            borderRadius: 10,
-          }}
-        >
-          <Grid gutter={"lg"}>
-            <Grid.Col span={3}>
-              <ActionIcon
-                variant="gradient"
-                size={68}
-                aria-label="Gradient action icon"
-                radius={100}
+          <Box
+            p={20}
+            bg={"#DCEED8"}
+            style={{
+              borderRadius: 10,
+            }}
+          >
+            <Grid gutter={"lg"}>
+              <Grid.Col span={3}>
+                <ActionIcon
+                  variant="gradient"
+                  size={68}
+                  aria-label="Gradient action icon"
+                  radius={100}
                   // gradient={{ from: "#DFDA7C", to: "#F2AF46", deg: 174 }}
                   bg={tema.get().bgFiturHome}
-              >
-                <HiMiniPresentationChartBar size={35} color={tema.get().utama} />
-              </ActionIcon>
-            </Grid.Col>
-            <Grid.Col span={9}>
-              <Box>
-                <Text>Kemajuan Kegiatan {valProgress}%</Text>
-                <Progress
-                  style={{
-                    border: `1px solid ${"#BDBDBD"}`,
-                  }}
-                  w={"100%"}
-                  color={tema.get().bgFiturHome}
-                  radius="md"
-                  size="xl"
-                  value={valProgress}
-                />
-              </Box>
-            </Grid.Col>
-          </Grid>
-        </Box>
+                >
+                  <HiMiniPresentationChartBar size={35} color={tema.get().utama} />
+                </ActionIcon>
+              </Grid.Col>
+              <Grid.Col span={9}>
+                <Box>
+                  <Text>Kemajuan Kegiatan {valProgress}%</Text>
+                  <Progress
+                    style={{
+                      border: `1px solid ${"#BDBDBD"}`,
+                    }}
+                    w={"100%"}
+                    color={tema.get().bgFiturHome}
+                    radius="md"
+                    size="xl"
+                    value={valProgress}
+                  />
+                </Box>
+              </Grid.Col>
+            </Grid>
+          </Box>
         }
       </Box>
     </>