fix: File view

Deksripsi:
- Tampilan file view pdf
- Optimalisasi admin
## No Isuue

src/app_modules/_global/component/comp_author_name_and_avatar.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  Avatar,
+  Center,
+  Divider,
+  Grid,
+  Group,
+  Loader,
+  Overlay,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import React, { useState } from "react";
+import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global/notifikasi_peringatan";
+
+export default function ComponentGlobal_AvatarAndAuthorName({
+  dataUser,
+  isPembatas,
+  componentRight,
+}: {
+  dataUser: MODEL_USER;
+  isPembatas?: boolean;
+  componentRight?: React.ReactNode;
+}) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (dataUser?.Profile?.id) {
+                setVisible(true);
+                router.push(RouterProfile.katalog + dataUser?.Profile?.id);
+              } else {
+                ComponentGlobal_NotifikasiPeringatan("Id tidak ditemukan");
+              }
+            }}
+          >
+            {visible ? (
+              <Avatar
+                size={30}
+                sx={{
+                  borderStyle: "solid",
+                  borderWidth: "1px",
+                  borderColor: "white",
+                }}
+                radius={"xl"}
+                bg={"gray.1"}
+              >
+                <Overlay opacity={0.1}>
+                  <Center h={"100%"}>
+                    <Loader color="gray" size={20} />
+                  </Center>
+                </Overlay>
+              </Avatar>
+            ) : (
+              <Avatar
+                size={30}
+                sx={{
+                  borderStyle: "solid",
+                  borderWidth: "1px",
+                  borderColor: "white",
+                }}
+                radius={"xl"}
+                bg={"gray.1"}
+                src={
+                  dataUser?.Profile?.imagesId
+                    ? RouterProfile.api_foto_profile +
+                      dataUser?.Profile?.imagesId
+                    : "/aset/global/avatar.png"
+                }
+              />
+            )}
+          </Grid.Col>
+          <Grid.Col span={"auto"}>
+            <Stack justify="center" h={"100%"} c={"white"}>
+              <Group position="apart">
+                <Stack justify="center" h={"100%"}>
+                  <Text lineClamp={1} fz={"sm"} fw={"bold"}>
+                    {dataUser?.username ? dataUser?.username : "Nama author"}
+                  </Text>
+                </Stack>
+                {componentRight ? componentRight : null}
+              </Group>
+            </Stack>
+          </Grid.Col>
+        </Grid>
+        {isPembatas ? <Divider /> : ""}
+      </Stack>
+    </>
+  );
+}

src/app_modules/_global/component/comp_loading_card.tsx

@@ -0,0 +1,23 @@
+import { Overlay, Center, Loader } from "@mantine/core";
+
+export default function ComponentGlobal_CardLoadingOverlay({
+  size,
+  variant,
+}: {
+  size?: number;
+  variant?: any;
+}) {
+  return (
+    <>
+      <Overlay h={"100%"} opacity={0.1}>
+        <Center h={"100%"}>
+          <Loader
+            variant={variant ? variant : "dots"}
+            size={size ? size : 20}
+            color="white"
+          />
+        </Center>
+      </Overlay>
+    </>
+  );
+}

src/app_modules/_global/component/comp_tampilan_angka_ratusan.tsx

@@ -0,0 +1,55 @@
+import { Group, Text } from "@mantine/core";
+
+export default function ComponentGlobal_TampilanAngkaRatusan({
+  nominal,
+  color,
+  fontSize,
+  fontWeight,
+  textBefore,
+  textAfter,
+}: {
+  nominal: number;
+  color?: string;
+  fontSize?: number | string;
+  fontWeight?: string | number;
+  textBefore?: string;
+  textAfter?: string;
+}) {
+  return (
+    <>
+      <Group spacing={"xs"}>
+        {textBefore ? (
+          <Text
+            fw={fontWeight ? fontWeight : "bold"}
+            fz={fontSize ? fontSize : "md"}
+          >
+            {textBefore}
+          </Text>
+        ) : (
+          ""
+        )}
+        <Text
+          fw={fontWeight ? fontWeight : "bold"}
+          fz={fontSize ? fontSize : "md"}
+          style={{
+            color: color ? color : "white",
+          }}
+        >
+          {new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
+            nominal
+          )}
+        </Text>
+        {textAfter ? (
+          <Text
+            fw={fontWeight ? fontWeight : "bold"}
+            fz={fontSize ? fontSize : "md"}
+          >
+            {textAfter}
+          </Text>
+        ) : (
+          ""
+        )}
+      </Group>
+    </>
+  );
+}

src/app_modules/_global/component/comp_tampilan_rupiah.tsx

@@ -5,17 +5,20 @@ export default function ComponentGlobal_TampilanRupiah({
   nominal,
   color,
   fontSize,
+  fontWeight,
 }: {
   nominal: number;
   color?: string;
-  fontSize?: number;
+  fontSize?: number | string;
+  fontWeight?: string | number;
 }) {
   return (
     <>
       <Text
+        fw={fontWeight ? fontWeight : "bold"}
         fz={fontSize ? fontSize : "md"}
         style={{
-          color: color ? color : "black",
+          color: color ? color : "white",
         }}
       >
         Rp.{" "}

src/app_modules/_global/component/index.ts

@@ -1,3 +1,9 @@
+import ComponentGlobal_AvatarAndAuthorName from "./comp_author_name_and_avatar";
+import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
+import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
 import ComponentGlobal_TampilanRupiah from "./comp_tampilan_rupiah";
 
 export { ComponentGlobal_TampilanRupiah };
+export { ComponentGlobal_TampilanAngkaRatusan };
+export { ComponentGlobal_AvatarAndAuthorName };
+export { ComponentGlobal_CardLoadingOverlay };