Fix : Avatar

Deskripsi:
- Ubah avatar yang image nya di ambil dari storage wibu server
- Avatar forum
- Avatra job
- Avatar Investasi
- Avatar donasi
## No Issuee

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

@@ -2,7 +2,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,
+} from "@/app_modules/_global/component";
 import {
   AspectRatio,
   Card,
@@ -31,16 +34,8 @@ export default function ComponentDonasi_CardPublish({
 
   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}`);
@@ -88,7 +83,7 @@ export default function ComponentDonasi_CardPublish({
         ) : (
           ""
         )}
-      </Card>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/donasi/detail/detail_main/penggalang_dana/index.tsx

@@ -1,8 +1,16 @@
 "use client";
 
+import { pathAssetImage, RouterImagePreview } from "@/app/lib";
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import {
+  ComponentGlobal_CardStyles,
+  ComponentGlobal_LoaderAvatar,
+} from "@/app_modules/_global/component";
 import ComponentDonasi_CardPublish from "@/app_modules/donasi/component/card_view/card_publish";
 import TampilanRupiahDonasi from "@/app_modules/donasi/component/tampilan_rupiah";
 import {
@@ -11,6 +19,7 @@ import {
 } from "@/app_modules/donasi/model/interface";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import {
+  ActionIcon,
   AspectRatio,
   Box,
   Center,
@@ -23,14 +32,10 @@ import {
   SimpleGrid,
   Stack,
   Text,
-  Title
+  Title,
 } from "@mantine/core";
 import { useViewportSize } from "@mantine/hooks";
-import {
-  IconBrandGmail,
-  IconMoodSmile,
-  IconPhone
-} from "@tabler/icons-react";
+import { IconBrandGmail, IconMoodSmile, IconPhone } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
@@ -39,64 +44,73 @@ export default function PenggalangDanaDonasi({
 }: {
   dataPenggalang: MODEL_DONASI_INFO_PENGGALANG;
 }) {
-  const [value, setValue] = useState(dataPenggalang);
+  const [data, setData] = useState(dataPenggalang);
 
   return (
     <>
       <Stack>
-        <InformasiPenggalang value={value as any} />
-        {value.Donasi.map((e, i) => (
-          <Box key={i}>
-            <ComponentDonasi_CardPublish
-              data={e}
-              path={RouterDonasi.detail_publish}
-            />
-          </Box>
-        ))}
+        <InformasiPenggalang value={data as any} />
+        <Stack spacing={0}>
+          {data.Donasi.map((e, i) => (
+            <Box key={i}>
+              <ComponentDonasi_CardPublish
+                data={e}
+                path={RouterDonasi.detail_publish}
+              />
+            </Box>
+          ))}
+        </Stack>
       </Stack>
     </>
   );
 }
 
 function InformasiPenggalang({ value }: { value: MODEL_USER }) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
   return (
     <>
-      {/* <pre>{JSON.stringify(value, null, 2)}</pre> */}
-      <Box
-        style={{
-          backgroundColor: AccentColor.darkblue,
-          border: `2px solid ${AccentColor.blue}`,
-          padding: "20px",
-          cursor: "pointer",
-          borderRadius: "10px",
-          color: "white",
-          marginBottom: "10px",
-        }}
-      >
-        <Stack
-        
-          spacing={"xl"}
-        >
+      <ComponentGlobal_CardStyles>
+        <Stack spacing={"xl"}>
           <Stack align="center" spacing={0}>
-            <Paper
-              radius={"100%"}
-              h={100}
-              w={100}
-              sx={{ borderStyle: "solid" }}
-            >
-              <Center h={"100%"}>
-                <Image
-                  radius={"100%"}
-                  width={100}
-                  height={100}
-                  alt="Foto"
-                  src={
-                    RouterProfile.api_foto_profile + value?.Profile?.imagesId
-                  }
+            <Box h={100}>
+              <ActionIcon
+                size={100}
+                radius={"100%"}
+                style={{
+                  borderColor: "white",
+                  borderStyle: "solid",
+                  borderWidth: "1px",
+                }}
+                opacity={isLoading ? 0.5 : 1}
+                onClick={() => {
+                  router.push(
+                    RouterImagePreview.main({
+                      id: value.Profile.imageId as any,
+                    }),
+                    { scroll: false }
+                  );
+                  setIsLoading(true);
+                }}
+              >
+                <ComponentGlobal_LoaderAvatar
+                  fileId={value.Profile.imageId as any}
+                  sizeAvatar={100}
                 />
-              </Center>
-            </Paper>
-            <Title order={3}>@{value?.username}</Title>
+
+                {isLoading && (
+                  <Image
+                    pos={"absolute"}
+                    height={50}
+                    width={50}
+                    alt="Photo"
+                    src={pathAssetImage.new_loader}
+                  />
+                )}
+              </ActionIcon>
+            </Box>
+            <Title order={3}>@ {value?.username}</Title>
           </Stack>
           <Stack>
             <Group>
@@ -113,64 +127,7 @@ function InformasiPenggalang({ value }: { value: MODEL_USER }) {
             </Group>
           </Stack>
         </Stack>
-      </Box>
-    </>
-  );
-}
-
-function DataPengganganDana({ donasi }: { donasi: MODEL_DONASI[] }) {
-  const router = useRouter();
-  const { height, width } = useViewportSize();
-  return (
-    <>
-      <Title order={5}>Peggalangan Dana Yang Dilakukan</Title>
-      <SimpleGrid
-        cols={4}
-        spacing="lg"
-        breakpoints={[
-          { maxWidth: "62rem", cols: 3, spacing: "md" },
-          { maxWidth: "48rem", cols: 2, spacing: "sm" },
-          { maxWidth: "36rem", cols: 1, spacing: "sm" },
-        ]}
-      >
-        {donasi.map((e, i) => (
-          <Box
-            key={i}
-            onClick={() => router.push(RouterDonasi.detail_main + `${e.id}`)}
-          >
-            <Stack>
-              <Grid>
-                <Grid.Col span={7}>
-                  <AspectRatio ratio={16 / 9}>
-                    <Paper radius={"md"}>
-                      <Image
-                        alt="Foto"
-                        src={RouterDonasi.api_gambar + `${e.imagesId}`}
-                        radius={"md"}
-                      />
-                    </Paper>
-                  </AspectRatio>
-                </Grid.Col>
-                <Grid.Col span={5}>
-                  <Stack spacing={"xs"}>
-                    <Text fz={"sm"} fw={"bold"} lineClamp={2}>
-                      {e.title}
-                    </Text>
-                    <Progress value={50} color="orange" />
-                    <Stack spacing={0}>
-                      <Text fz={"sm"}>Terkumpul</Text>
-                      <Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
-                        <TampilanRupiahDonasi nominal={+e.target} />
-                      </Text>
-                    </Stack>
-                  </Stack>
-                </Grid.Col>
-              </Grid>
-              {width > 575 ? "" : <Divider />}
-            </Stack>
-          </Box>
-        ))}
-      </SimpleGrid>
+      </ComponentGlobal_CardStyles>
     </>
   );
 }

src/app_modules/donasi/fun/get/get_author_by_id.ts

@@ -17,7 +17,7 @@ export async function Donasi_getAuthorById(authorId: string) {
           id: true,
           name: true,
           email: true,
-          imagesId: true,
+          imageId: true,
         },
       },
       Donasi: {