Revisi Tampilan Admin

# fix :
- Tampilan Donasi
# feat :
- Penambahan App Information
## No Issuee

src/app_modules/admin/component_global/admin_notifikasi/notifikasi_berhasil.tsx

@@ -0,0 +1,40 @@
+import { Center, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import {
+  IconAlertTriangle,
+  IconChecklist,
+  IconCircleCheck,
+} from "@tabler/icons-react";
+
+/**
+ *
+ * @param text | masukan text untuk peringatan
+ * @type string
+ * @param durasi | durasi autoClose
+ * @type number
+ * @returns notifikasi berhasil warna hijau
+ */
+export async function ComponentGlobalAdmin_NotifikasiBerhasil(
+  text: string,
+  durasi?: number
+) {
+  return notifications.show({
+    message: (
+      <Center>
+        <Text fw={"bold"}>{text}</Text>
+      </Center>
+    ),
+    color: "green",
+    radius: "md",
+    autoClose: durasi ? durasi : 2000,
+    icon: <IconCircleCheck color="white" />,
+    withCloseButton: false,
+
+    styles: (theme) => ({
+      description: { color: theme.white },
+      root: {
+        backgroundColor: theme.colors.green[7],
+      },
+    }),
+  });
+}

src/app_modules/admin/component_global/admin_notifikasi/notifikasi_gagal.tsx

@@ -0,0 +1,31 @@
+import { Center, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+/**
+ * 
+ * @param text | masukan text untuk peringatan
+ * @type string
+ * @returns notifikasi peringatan
+ */
+export async function ComponentGlobalAdmin_NotifikasiGagal(text: string) {
+  return notifications.show({
+    message: (
+      <Center>
+        <Text fw={"bold"}>{text}</Text>
+      </Center>
+    ),
+    color: "red",
+    radius: "md",
+    autoClose: 2000,
+    icon: <IconAlertTriangle color="white" />,
+    withCloseButton: false,
+
+    styles: (theme) => ({
+      description: { color: theme.white },
+      root: {
+        backgroundColor: theme.colors.red[7],
+      },
+    }),
+  });
+}

src/app_modules/admin/component_global/admin_notifikasi/notifikasi_peringatan.tsx

@@ -0,0 +1,49 @@
+import { ActionIcon, Avatar, Center, Text } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+/**
+ *
+ * @param text | masukan text untuk peringatan
+ * @type string
+ * @returns notifikasi peringatan
+ */
+export async function ComponentGlobalAdmin_NotifikasiPeringatan(
+  text: string,
+  durasi?: number
+) {
+  return notifications.show({
+    message: (
+      <Center>
+        <Text fw={"bold"}>{text}</Text>
+      </Center>
+    ),
+    color: "yellow.1",
+    radius: "md",
+    autoClose: durasi ? durasi : 2000,
+    style: {
+      borderWidth: "0.5px",
+      borderStyle: "solid",
+      borderColor: "red"
+
+
+    },
+
+    icon: (
+      <ActionIcon variant="transparent" radius={"xl"} p={3}>
+        <IconAlertTriangle
+          color="red"
+          style={{ backgroundColor: "transparent" }}
+        />
+      </ActionIcon>
+    ),
+    withCloseButton: false,
+
+    styles: (theme) => ({
+      description: { color: theme.white },
+      root: {
+        backgroundColor: theme.colors.orange[5],
+      },
+    }),
+  });
+}

src/app_modules/admin/component_global/back_button.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Group, Button, Loader } from "@mantine/core";
+import { IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentGlobalAdmin_BackButton({path}:{path?:string}) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Group>
+        <Button
+          // loaderPosition="center"
+          // loading={isLoading ? true : false}
+          c={"gray"}
+          leftIcon={
+            isLoading ? <Loader size={"xs"} color={"gray"} /> : <IconChevronLeft />
+          }
+          variant="white"
+          onClick={() => {
+            setLoading(true);
+            // setTimeout(() => , 3000);
+            if(path==null){
+              router.back();
+            }else{
+              router.push(path)
+            }
+            
+          }}
+        >
+          Kembali
+        </Button>
+      </Group>
+    </>
+  );
+}

src/app_modules/admin/component_global/header_tamplate.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { Box, Title, Divider, Stack } from "@mantine/core";
+
+export default function ComponentAdminGlobal_HeaderTamplate({name}: {name: string}) {
+  return (
+    <>
+      <Stack spacing={5} >
+        <Title>{name ?  name : null}</Title>
+        <Divider/>
+      </Stack>
+    </>
+  );
+}

src/app_modules/admin/component_global/loading_admin_page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import {
+  Box,
+  Center,
+  Group,
+  LoadingOverlay,
+  Skeleton,
+  Text,
+} from "@mantine/core";
+
+export default function ComponentAdminGlobal_LoadingPage() {
+  const listhHuruf = [
+    {
+      huruf: "H",
+    },
+    {
+      huruf: "I",
+    },
+    {
+      huruf: "P",
+    },
+    {
+      huruf: "M",
+    },
+    {
+      huruf: "I",
+    },
+  ];
+  const customLOader = (
+    <Center h={"100vh"}>
+      <Group>
+        {listhHuruf.map((e, i) => (
+          <Center key={i} h={"100%"}>
+            <Skeleton height={50} circle radius={"100%"} />
+            <Text sx={{ position: "absolute" }} c={"gray.4"} fw={"bold"}>
+              {e.huruf}
+            </Text>
+          </Center>
+        ))}
+      </Group>
+    </Center>
+  );
+
+  return (
+    <>
+      <LoadingOverlay visible overlayBlur={1} loader={customLOader} />
+    </>
+  );
+}

src/app_modules/admin/component_global/logout.tsx

@@ -0,0 +1,96 @@
+"use client";
+import { myConsole } from "@/app/fun/my_console";
+import { ApiHipmi } from "@/app/lib/api";
+import {
+  ActionIcon,
+  Button,
+  Group,
+  Loader,
+  Modal,
+  Stack,
+  Title,
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useAtom } from "jotai";
+import { IconLogout } from "@tabler/icons-react";
+import { Warna } from "@/app/lib/warna";
+import { useDisclosure } from "@mantine/hooks";
+import { gs_kodeId, gs_nomor, gs_otp } from "@/app_modules/auth/state/state";
+import { auth_Logout } from "@/app_modules/auth/fun/fun_logout";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
+import { useState } from "react";
+
+export default function Admin_Logout() {
+  const router = useRouter();
+  const [opened, { toggle }] = useDisclosure(false);
+  const [loading, setLoading] = useState(false);
+
+  const [kodeId, setKodeId] = useAtom(gs_kodeId);
+  const [loadingLogout, setLoadingLogout] = useState(false);
+
+  async function onClickLogout() {
+    await auth_Logout(kodeId).then((res) => {
+      if (res.status === 200) {
+        setLoadingLogout(true);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        setKodeId("");
+      } else {
+        ComponentGlobal_NotifikasiPeringatan(res.message);
+      }
+    });
+  }
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={toggle}
+        centered
+        withCloseButton={false}
+        closeOnClickOutside={false}
+      >
+        <Stack>
+          <Title order={6}>Anda yakin ingin keluar ?</Title>
+          <Group align="center" position="center">
+            <Button
+              onClick={() => {
+                toggle();
+                setLoading(false);
+              }}
+              radius={50}
+            >
+              Batal
+            </Button>
+            <Button
+              loaderPosition="center"
+              loading={loadingLogout ? true : false}
+              radius={50}
+              bg={Warna.merah}
+              color="red"
+              onClick={() => onClickLogout()}
+            >
+              Keluar
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+      <ActionIcon variant="transparent">
+        {loading ? (
+          <Loader color="gray" />
+        ) : (
+          <IconLogout
+            color={Warna.merah}
+            onClick={() => {
+              toggle();
+              setLoading(true);
+            }}
+          />
+        )}
+      </ActionIcon>
+      {/* <Button radius={"xl"} color={"red"} onClick={toggle}>
+        Logout
+      </Button> */}
+    </>
+  );
+}

src/app_modules/admin/component_global/tampilan_rupiah.tsx

@@ -0,0 +1,20 @@
+import { Text } from "@mantine/core";
+
+export default function ComponentAdminGlobal_TampilanRupiahDonasi({
+  nominal,
+  fontSize,
+}: {
+  nominal: number;
+  fontSize?: number;
+}) {
+  return (
+    <>
+      <Text fz={fontSize ? fontSize : "md"}>
+        Rp.{" "}
+        {new Intl.NumberFormat("id-ID", { maximumFractionDigits: 10 }).format(
+          nominal
+        )}
+      </Text>
+    </>
+  );
+}