# style:

- UI Investasi
- UI Donasi
## No issue

src/app_modules/donasi/component/detail_galang_dana/detail_data_donasi.tsx

@@ -35,11 +35,9 @@ export default function ComponentDonasi_DetailDataGalangDana({
       >
         <Stack>
           <AspectRatio
-            ratio={9 / 16}
+            ratio={1 / 1}
             mx={"sm"}
             mah={300}
-            // bg={"blue"}
-            style={{}}
           >
             <Image
               alt="Foto"

src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx

@@ -42,14 +42,14 @@ export default function ComponentDonasi_CeritaPenggalangMain({
             <Group position="apart">
               <Text>
                 {new Intl.DateTimeFormat("id-ID", { dateStyle: "full" }).format(
-                  donasi.createdAt
+                  donasi?.createdAt
                 )}
               </Text>
               <ActionIcon
                 variant="transparent"
                 onClick={() => {
                   setLoading(true);
-                  router.push(RouterDonasi.cerita_penggalang + `${donasi.id}`);
+                  router.push(RouterDonasi.cerita_penggalang + `${donasi?.id}`);
                 }}
               >
                 {isLoading ? (
@@ -63,7 +63,7 @@ export default function ComponentDonasi_CeritaPenggalangMain({
                 )}
               </ActionIcon>
             </Group>
-            <Text lineClamp={4}>{donasi.CeritaDonasi.cerita}</Text>
+            <Text lineClamp={4}>{donasi?.CeritaDonasi.cerita}</Text>
             {/* <Text c={"blue"}>Baca selengkapnya</Text> */}
           </Stack>
         </Paper>

src/app_modules/donasi/component/detail_main/detail_data_donasi.tsx

@@ -62,23 +62,30 @@ export function ComponentDonasi_DetailDataMain({
         }}
       >
         <Stack>
-          <Center>
+          <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
+            <Image
+              alt="Foto"
+              src={RouterDonasi.api_image + `${donasi?.imageDonasi?.url}`}
+              radius={"sm"}
+            />
+          </AspectRatio>
+          {/* <Center>
             <Image
               maw={200}
               radius={"xs"}
               alt="Foto"
-              src={RouterDonasi.api_gambar + `${donasi.imagesId}`}
+              src={RouterDonasi?.api_gambar + `${donasi?.imagesId}`}
             />
-          </Center>
+          </Center> */}
           {/* <AspectRatio ratio={16 / 9}>
             <Paper radius={"md"}>
             </Paper>
           </AspectRatio> */}
           <Stack spacing={0} mt={"lg"}>
-            <Title order={4}>{donasi.title}</Title>
+            <Title order={4}>{donasi?.title}</Title>
             <ComponentDonasi_TampilanHitungMundur
-              durasi={donasi.DonasiMaster_Durasi.name}
-              publishTime={donasi.publishTime}
+              durasi={donasi?.DonasiMaster_Durasi.name}
+              publishTime={donasi?.publishTime}
             />
           </Stack>
           <Stack spacing={0}>
@@ -86,12 +93,12 @@ export function ComponentDonasi_DetailDataMain({
               <Stack spacing={0}>
                 <Text fz={12}>Dana terkumpul</Text>
                 <Title order={4} c="blue">
-                  <TampilanRupiahDonasi nominal={+donasi.terkumpul} />
+                  <TampilanRupiahDonasi nominal={+donasi?.terkumpul} />
                 </Title>
                 <Group>
                   <Text fz={10}>Dari total</Text>{" "}
                   <TampilanRupiahDonasi
-                    nominal={+donasi.target}
+                    nominal={+donasi?.target}
                     fontSize={10}
                   />
                 </Group>
@@ -104,12 +111,12 @@ export function ComponentDonasi_DetailDataMain({
                     color: MainColor.yellow,
                   }}
                 >
-                  {donasi.DonasiMaster_Ketegori.name}
+                  {donasi?.DonasiMaster_Ketegori.name}
                 </Title>
               </Stack>
             </Group>
           </Stack>
-          <Progress value={+donasi.progres} animate />
+          <Progress value={+donasi?.progres} color="yellow" size={"lg"} />
 
           <Grid>
             <Grid.Col
@@ -145,7 +152,7 @@ export function ComponentDonasi_DetailDataMain({
               span={"auto"}
               onClick={() => {
                 setLoadingKabar(true);
-                router.push(RouterDonasi.kabar + `${donasi.id}`);
+                router.push(RouterDonasi.kabar + `${donasi?.id}`);
               }}
             >
               <Stack spacing={"sm"} align="center">

src/app_modules/donasi/component/detail_main/informasi_penggalang.tsx

@@ -73,14 +73,15 @@ export default function ComponentDonasi_InformasiPenggalangMain({
             <Group>
               <Avatar radius={"xl"} variant="filled" bg={"blue"}>
                 {(() => {
-                  const usr = author.username;
-                  const splt = usr.split("");
+                  // return null
+                  const usr = author?.username;
+                  const splt = usr?.split("");
                   const Up = _.upperCase(splt[0]);
 
                   return Up;
                 })()}
               </Avatar>
-              <Text>{author.username}</Text>
+              <Text>{author?.username}</Text>
             </Group>
             <ComponentGlobal_BoxInformation
               informasi="Semua dana yang terkumpul akan disalurkan ke penggalang dana,

src/app_modules/donasi/component/detail_main/list_kabar.tsx

@@ -6,35 +6,34 @@ import moment from "moment";
 
 import { MODEL_DONASI_KABAR } from "../../model/interface";
 import { useRouter } from "next/navigation";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentDonasi_ListKabar({
   kabar,
-  route
+  route,
 }: {
   kabar: MODEL_DONASI_KABAR;
-  route: string
+  route: string;
 }) {
   const router = useRouter();
   return (
     <>
-      <Paper bg={"gray.1"} p={"md"}>
+      <Paper
+        style={{
+          backgroundColor: AccentColor.blue,
+          border: `2px solid ${AccentColor.darkblue}`,
+          padding: "15px",
+          cursor: "pointer",
+          borderRadius: "10px",
+          color: "white",
+          marginBottom: "5px",
+        }}
+        onClick={() => router.push(route + `${kabar.id}`)}
+      >
         <Stack>
           <Text fz={"xs"}>{moment(kabar.createdAt).format("ll")}</Text>
 
-          <Stack>
-            <Title order={5}>{kabar.title}</Title>
-            <Stack spacing={0}>
-              <Text lineClamp={2}>{kabar.deskripsi}</Text>
-              <Text
-                c={"blue"}
-                onClick={() =>
-                  router.push(route + `${kabar.id}`)
-                }
-              >
-                Buka Kabar
-              </Text>
-            </Stack>
-          </Stack>
+          <Title order={5}>{kabar.title}</Title>
         </Stack>
       </Paper>
     </>

src/app_modules/donasi/component/footer_close_donasi.tsx

@@ -3,18 +3,15 @@
 import { Footer, Center, Button } from "@mantine/core";
 import { useRouter } from "next/navigation";
 
-
 export default function FooterDonasi() {
-    const router = useRouter()
+  const router = useRouter();
   return (
     <>
-      <Footer height={70} px={"md"}>
-        <Center h={"100%"}>
-          <Button w={"100%"} radius={"xl"} onClick={() => router.back()}>
-            Tutup
-          </Button>
-        </Center>
-      </Footer>
+      <Center h={"100%"}>
+        <Button w={"80%"} radius={"xl"} onClick={() => router.back()}>
+          Tutup
+        </Button>
+      </Center>
     </>
   );
 }