Fix: Upload image

- Upload image berita ke server wibu
- Tampilan detail image di ambil dari server wibu
## No issue

src/app_modules/donasi/component/card_view/card_publish.tsx

@@ -1,21 +1,11 @@
 "use client";
 
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_CardLoadingOverlay,
   ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageCustom,
 } from "@/app_modules/_global/component";
-import {
-  AspectRatio,
-  Card,
-  Grid,
-  Image,
-  Paper,
-  Progress,
-  Stack,
-  Text,
-} from "@mantine/core";
+import { Grid, Progress, Stack, Text } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
@@ -43,18 +33,13 @@ export default function ComponentDonasi_CardPublish({
       >
         <Stack>
           <Grid>
-            <Grid.Col span={7}>
-              <AspectRatio ratio={16 / 9}>
-                <Paper radius={"md"}>
-                  <Image
-                    alt="Foto"
-                    src={RouterDonasi.api_gambar + `${data.imagesId}`}
-                    radius={"xs"}
-                  />
-                </Paper>
-              </AspectRatio>
+            <Grid.Col span={6}>
+              <ComponentGlobal_LoadImageCustom
+                fileId={data.imageId}
+                height={150}
+              />
             </Grid.Col>
-            <Grid.Col span={5}>
+            <Grid.Col span={6}>
               <Stack spacing={"xs"}>
                 <Stack spacing={0}>
                   <Text fz={"sm"} fw={"bold"} lineClamp={2}>

src/app_modules/donasi/component/card_view/card_status.tsx

@@ -1,6 +1,10 @@
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { ComponentGlobal_CardLoadingOverlay } from "@/app_modules/_global/component";
+import {
+  ComponentGlobal_CardLoadingOverlay,
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageCustom,
+} from "@/app_modules/_global/component";
 import {
   AspectRatio,
   Card,
@@ -23,39 +27,24 @@ export function ComponentDonasi_CardStatus({
 }) {
   const router = useRouter();
   const [visible, setVisible] = useState(false);
-  const [donasiId, setDonasiId] = useState("");
 
   return (
     <>
-      <Card
-        style={{
-          padding: "15px",
-          backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
-          border: `2px solid ${AccentColor.blue}`,
-          color: "white",
-          marginBottom: "15px",
-        }}
-        onClick={() => {
+      <ComponentGlobal_CardStyles
+        onClickHandler={() => {
           setVisible(true);
-          setDonasiId(data.id);
           router.push(path + `${data.id}`);
         }}
       >
         <Stack>
           <Grid>
-            <Grid.Col span={7}>
-              <AspectRatio ratio={16 / 9}>
-                <Paper radius={"sm"} bg={"gray.1"}>
-                  <Image
-                    alt="Foto"
-                    src={RouterDonasi.api_gambar + `${data.imagesId}`}
-                    radius={"md"}
-                  />
-                </Paper>
-              </AspectRatio>
+            <Grid.Col span={6}>
+              <ComponentGlobal_LoadImageCustom
+                fileId={data.imageId}
+                height={100}
+              />
             </Grid.Col>
-            <Grid.Col span={5}>
+            <Grid.Col span={6}>
               <Stack spacing={"xs"}>
                 <Text fz={"sm"} fw={"bold"} lineClamp={2}>
                   {data.title}
@@ -74,12 +63,24 @@ export function ComponentDonasi_CardStatus({
           </Grid>
           {/* {width > 575 ? "" : <Divider />} */}
         </Stack>
-        {visible && donasiId !== "" ? (
-          <ComponentGlobal_CardLoadingOverlay />
-        ) : (
-          ""
-        )}
-      </Card>
+        {visible && <ComponentGlobal_CardLoadingOverlay />}
+      </ComponentGlobal_CardStyles>
+      {/* <Card
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
+        onClick={() => {
+          setVisible(true);
+          router.push(path + `${data.id}`);
+        }}
+      >
+        
+      </Card> */}
     </>
   );
 }

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

@@ -1,19 +1,16 @@
 "use client";
 
+import {
+  MainColor
+} from "@/app_modules/_global/color/color_pallet";
+import {
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageLandscape,
+} from "@/app_modules/_global/component";
+import { Group, Stack, Text, Title } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { MODEL_DONASI } from "../../model/interface";
-import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import {
-  Stack,
-  AspectRatio,
-  Paper,
-  Title,
-  Group,
-  Image,
-  Text,
-} from "@mantine/core";
 import TampilanRupiahDonasi from "../tampilan_rupiah";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function ComponentDonasi_DetailDataGalangDana({
   donasi,
@@ -23,28 +20,9 @@ export default function ComponentDonasi_DetailDataGalangDana({
   const router = useRouter();
   return (
     <>
-      <Stack
-        style={{
-          paddingInline: "15px",
-          paddingBottom: "15px",
-          backgroundColor: AccentColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-          borderRadius: "10px",
-          color: "white",
-        }}
-      >
+      <ComponentGlobal_CardStyles>
         <Stack>
-          <AspectRatio
-            ratio={1 / 1}
-            mx={"sm"}
-            mah={300}
-          >
-            <Image
-              alt="Foto"
-              src={RouterDonasi.api_image + `${donasi.imageDonasi.url}`}
-              radius={"sm"}
-            />
-          </AspectRatio>
+          <ComponentGlobal_LoadImageLandscape fileId={donasi.imageId} />
           <Stack spacing={0}>
             <Title order={4}>{donasi.title}</Title>
             <Text fz={10}>Durasi: {donasi.DonasiMaster_Durasi.name} hari</Text>
@@ -53,24 +31,30 @@ export default function ComponentDonasi_DetailDataGalangDana({
             <Group position="apart">
               <Stack spacing={0}>
                 <Text fz={12}>Dana dibutuhkan</Text>
-                <Title order={4} style={{
-                  color: MainColor.yellow
-                }}>
+                <Title
+                  order={4}
+                  style={{
+                    color: MainColor.yellow,
+                  }}
+                >
                   <TampilanRupiahDonasi nominal={+donasi.target} />
                 </Title>
               </Stack>
               <Stack spacing={0}>
                 <Text fz={12}>Kategori</Text>
-                <Title order={4} style={{
-                  color: MainColor.yellow
-                }}>
+                <Title
+                  order={4}
+                  style={{
+                    color: MainColor.yellow,
+                  }}
+                >
                   {donasi.DonasiMaster_Ketegori.name}
                 </Title>
               </Stack>
             </Group>
           </Stack>
         </Stack>
-      </Stack>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

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

@@ -30,6 +30,10 @@ import { MODEL_DONASI } from "../../model/interface";
 import { NotifPeringatan } from "../notifikasi/notif_peringatan";
 import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
 import TampilanRupiahDonasi from "../tampilan_rupiah";
+import {
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoadImageLandscape,
+} from "@/app_modules/_global/component";
 
 export function ComponentDonasi_DetailDataMain({
   donasi,
@@ -47,23 +51,9 @@ export function ComponentDonasi_DetailDataMain({
 
   return (
     <>
-      <Stack
-        style={{
-          padding: "15px",
-          border: `2px solid ${AccentColor.blue}`,
-          backgroundColor: AccentColor.darkblue,
-          borderRadius: "10px",
-          color: "white",
-        }}
-      >
+      <ComponentGlobal_CardStyles>
         <Stack>
-          <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
-            <Image
-              alt="Foto"
-              src={RouterDonasi.api_image + `${donasi?.imageDonasi?.url}`}
-              radius={"sm"}
-            />
-          </AspectRatio>
+          <ComponentGlobal_LoadImageLandscape fileId={donasi.imageId} />
 
           <Stack spacing={0} mt={"lg"}>
             <Title order={4}>{donasi?.title}</Title>
@@ -179,7 +169,7 @@ export function ComponentDonasi_DetailDataMain({
             </Grid.Col>
           </Grid>
         </Stack>
-      </Stack>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }