#fix: bug

- Desk:
- Perbaikan penempatan file
## No issuee

src/app_modules/_global/author_name_on_header.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  Stack,
+  Grid,
+  Avatar,
+  Divider,
+  Text,
+  Group,
+  Loader,
+  Overlay,
+  Center,
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { ComponentGlobal_NotifikasiPeringatan } from "./notif_global/notifikasi_peringatan";
+import moment from "moment";
+import { useState } from "react";
+
+export default function ComponentGlobal_AuthorNameOnHeader({
+  profileId,
+  imagesId,
+  authorName,
+  tglPublish,
+  isPembatas,
+}: {
+  profileId?: string;
+  imagesId?: string;
+  authorName?: string;
+  tglPublish?: Date;
+  isPembatas?: boolean;
+}) {
+  const router = useRouter();
+  const skrng = new Date();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Stack spacing={"xs"}>
+        <Grid>
+          <Grid.Col
+            span={"content"}
+            onClick={() => {
+              if (profileId) {
+                setVisible(true);
+                router.push(RouterProfile.katalog + profileId);
+              } 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={
+                  imagesId
+                    ? RouterProfile.api_foto_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"}>
+                    {authorName ? authorName : "Nama author"}
+                  </Text>
+                </Stack>
+                <Stack justify="center" h={"100%"}>
+                  {tglPublish ? (
+                    <Text c={"white"} fz={"xs"}>
+                      {skrng.toLocaleDateString(["id-ID"], {
+                        dateStyle: "medium",
+                      })}
+                    </Text>
+                  ) : (
+                    ""
+                  )}
+                </Stack>
+              </Group>
+            </Stack>
+          </Grid.Col>
+        </Grid>
+        {isPembatas ? <Divider /> : ""}
+      </Stack>
+    </>
+  );
+}

src/app_modules/_global/color/color_pallet.ts

@@ -0,0 +1,13 @@
+export const MainColor = {
+  black: "#202020",
+  darkblue: "#001D3D",
+  yellow: "#FFC300",
+};
+
+export const AccentColor = {
+  blackgray: "#333533",
+  darkblue: "#002E59",
+  blue: "#00447D",
+  skyblue: "#00BFFF",
+  yellow: "#FFD60A",
+};

src/app_modules/_global/component/box_information.tsx

@@ -0,0 +1,52 @@
+import { Center, Grid, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { AccentColor, MainColor } from "../color/color_pallet";
+
+export default function ComponentGlobal_BoxInformation({
+  informasi,
+ isReport,
+}: {
+  informasi: string;
+  isReport?: boolean;
+}) {
+  return (
+    <>
+      {isReport ? (
+        <Paper
+          bg={"blue.3"}
+          p={10}
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `1px solid ${AccentColor.skyblue}`,
+          }}
+        >
+          <Stack spacing={0}>
+            <Text fz={10} fs={"italic"} c={"orange"} fw={"bold"}>
+              * Report
+            </Text>
+            <Text fz={10} c={"white"}>
+              {informasi}
+            </Text>
+          </Stack>
+        </Paper>
+      ) : (
+        <Paper
+          bg={"blue.3"}
+          p={10}
+          style={{
+            backgroundColor: AccentColor.blue,
+            border: `1px solid ${AccentColor.skyblue}`,
+          }}
+        >
+          <Group>
+            <Text fz={10} c={"red"} fw={"bold"}>
+              *{" "}
+              <Text span inherit c={"white"} fw={"normal"}>
+                {informasi}
+              </Text>
+            </Text>
+          </Group>
+        </Paper>
+      )}
+    </>
+  );
+}

src/app_modules/_global/component/error_input.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Group, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+export default function ComponentGlobal_ErrorInput({
+  max,
+  text,
+  color,
+}: {
+  max?: number;
+  text?: string;
+  color?: string;
+}) {
+  return (
+    <>
+      <Group spacing={"xs"}>
+        <IconAlertTriangle size={15} color={color ? color : "red"} />
+        <Text fz={10} fs={"italic"} color={color ? color : "red"}>
+          {text ? text : ` Maksimal ${max ? max : "-"} karakter !`}
+        </Text>
+      </Group>
+    </>
+  );
+}

src/app_modules/_global/component/input_countdown.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Text } from "@mantine/core";
+import { useState } from "react";
+
+export default function ComponentGlobal_InputCountDown({
+  maxInput,
+  lengthInput,
+}: {
+  maxInput: number;
+  lengthInput: number;
+}) {
+  return (
+    <>
+      <Text fz={"xs"} fs={"italic"} color="gray">
+        {maxInput - lengthInput < 0 ? 0 : maxInput - lengthInput} /{" "}
+        <Text span inherit c={maxInput - lengthInput < 0 ? "red" : ""} style={{transition: "0.5s"}}>
+          {maxInput}
+        </Text>
+      </Text>
+    </>
+  );
+}

src/app_modules/_global/component/is_empty_data.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Center, Text } from "@mantine/core";
+
+export default function ComponentGlobal_IsEmptyData({
+  text,
+  height,
+}: {
+  text?: string;
+  height?: number;
+}) {
+  return (
+    <>
+      <Center
+        h={height ? `${height}vh` : "70vh"}
+        fz={"sm"}
+        fw={"bold"}
+      >
+        <Text c={"gray"}>{text ? text : "Tidak Ada Data"}</Text>
+      </Center>
+    </>
+  );
+}

src/app_modules/_global/component/loader.tsx

@@ -0,0 +1,10 @@
+import { Loader } from "@mantine/core";
+import { MainColor } from "../color/color_pallet";
+
+export default function ComponentGlobal_Loader({ size }: { size?: number }) {
+  return (
+    <>
+      <Loader color={MainColor.yellow} size={size ? size : 20} />
+    </>
+  );
+}

src/app_modules/_global/component/waring_popup.ts

@@ -0,0 +1,18 @@
+import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global/notifikasi_peringatan";
+
+/**
+ * @returns nilai maksimal untuk upload file di semua module
+ */
+export let maksimalUploadFile = 2000000;
+export const ComponentGlobal_WarningMaxUpload = ({
+  text,
+  time,
+}: {
+  text?: string;
+  time?: number;
+}) => {
+  ComponentGlobal_NotifikasiPeringatan(
+    text ? text : "Maaf, Ukuran file terlalu besar, maximum 2mb",
+    time ? time : 3000
+  );
+};

src/app_modules/_global/component_layout_tamplate.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import {
+  Box,
+  Stack
+} from "@mantine/core";
+
+export default function AppComponentGlobal_LayoutTamplate({
+  children,
+  header,
+  footer,
+}: {
+  children: any;
+  header?: any;
+  footer?: any;
+}) {
+  return (
+    <>
+      <Box>
+        {/* Header */}
+        <Box
+          style={{
+            zIndex: 99,
+          }}
+          w={"100%"}
+          // bg={"black"}
+          pos={"sticky"}
+          top={0}
+          h={"7vh"}
+        >
+          {header}
+        </Box>
+
+        {/* Children */}
+        <Box p={"md"} pos={"static"}>
+          <Stack>
+            {children}
+            {footer ? (
+              <Box
+                style={{
+                  height: "10vh",
+                }}
+              ></Box>
+            ) : (
+              ""
+            )}
+          </Stack>
+        </Box>
+
+        {/* Footer */}
+        {footer ? (
+          <Box
+            style={{
+              zIndex: 98,
+            }}
+            w={"100%"}
+            bg={"black"}
+            pos={"fixed"}
+            bottom={0}
+            h={"10vh"}
+          >
+            {footer}
+          </Box>
+        ) : (
+          ""
+        )}
+      </Box>
+    </>
+  );
+}

src/app_modules/_global/header_tamplate.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Header, Group, ActionIcon, Text, Title } from "@mantine/core";
+import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function ComponentGlobal_HeaderTamplate({
+  route,
+  route2,
+  title,
+  icon,
+}: {
+  route?: any;
+  route2?: any;
+  title: string;
+  icon?: any;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRightLoading, setRightLoading] = useState(false);
+
+  return (
+    <>
+      <Header height={50} sx={{ borderStyle: "none" }}>
+        <Group h={50} position="apart" px={"md"}>
+          <ActionIcon
+            loading={isLoading ? true : false}
+            variant="transparent"
+            onClick={() => {
+              setIsLoading(true);
+              if (route === null || route === undefined) {
+                return router.back();
+              } else {
+                return router.push(route);
+              }
+            }}
+          >
+            <IconChevronLeft />
+          </ActionIcon>
+          <Title order={5}>{title}</Title>
+          {(() => {
+            if (route2 === null || route2 === undefined) {
+              return <ActionIcon disabled variant="transparent"></ActionIcon>;
+            } else {
+              return (
+                <ActionIcon
+                  loading={isRightLoading ? true : false}
+                  variant="transparent"
+                  onClick={() => {
+                    setRightLoading(true);
+                    router.push(route2);
+                  }}
+                >
+                  {icon}
+                </ActionIcon>
+              );
+            }
+          })()}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/_global/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/loading_page_v2.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import {
+  Box,
+  Center,
+  Group,
+  LoadingOverlay,
+  Skeleton,
+  Text,
+} from "@mantine/core";
+import { MainColor } from "./color/color_pallet";
+
+export default function ComponentGlobal_V2_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
+        // overlayColor={MainColor.darkblue}
+        overlayOpacity={0.1}
+        loader={customLOader}
+      />
+    </>
+  );
+}

src/app_modules/_global/maintenance_information.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { Box, Group, Text } from "@mantine/core";
+import Marquee from "react-fast-marquee";
+
+export default function ComponentGlobal_MaintenanceInformation() {
+  return (
+    <>
+      <Box w={"100%"}>
+        <Marquee>
+          <Group spacing={"xs"}>
+            {Array(5)
+              .fill(0)
+              .map((e, i) => (
+                <Box key={i}>
+                  <Text px={"md"}>Maintenance ! </Text>
+                </Box>
+              ))}
+          </Group>
+        </Marquee>
+      </Box>
+    </>
+  );
+}

src/app_modules/_global/notif_global/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 ComponentGlobal_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/_global/notif_global/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 ComponentGlobal_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/_global/notif_global/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 ComponentGlobal_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/_global/ui/ui_drawer.tsx

@@ -0,0 +1,104 @@
+import {
+  ActionIcon,
+  Drawer,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { AccentColor } from "../color/color_pallet";
+import ComponentGlobal_Loader from "../component/loader";
+
+interface MODEL_DRAWER {
+  id: string;
+  name: string;
+  icon: string;
+  path: string;
+}
+export default function UIGlobal_Drawer({
+  opened,
+  close,
+  component,
+}: {
+  opened: boolean;
+  close: () => void;
+  component:
+    | {
+        id: string;
+        name: string;
+        icon: string;
+        path: string;
+      }[]
+    | any[];
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [pageId, setPageId] = useState("");
+
+  return (
+    <>
+      <Drawer
+        opened={opened}
+        onClose={() => close()}
+        position={"bottom"}
+        size={"auto"}
+        withCloseButton={false}
+        styles={{
+          content: {
+            padding: 0,
+            position: "absolute",
+            margin: "auto",
+            backgroundColor: "transparent",
+            left: 0,
+            right: 0,
+            width: 500,
+          },
+          body: {
+            backgroundColor: AccentColor.darkblue,
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+            borderRadius: "20px 20px 0px 0px",
+            color: "white",
+            paddingBottom: "5%",
+          },
+        }}
+      >
+        <Stack spacing={"xs"}>
+          <Group position="right">
+            <ActionIcon onClick={close} variant="transparent">
+              <IconX color="white" />
+            </ActionIcon>
+          </Group>
+          <SimpleGrid cols={component.length < 4 ? component.length : 4}>
+            {component.map((e, i) => (
+              <Stack key={i} align="center" spacing={"xs"}>
+                <ActionIcon
+                  variant="transparent"
+                  c="white"
+                  onClick={() => {
+                    setPageId(e?.id);
+                    setIsLoading(true);
+                    router.push(e?.path);
+                  }}
+                >
+                  {isLoading && e?.id === pageId ? (
+                    <ComponentGlobal_Loader />
+                  ) : (
+                    e?.icon
+                  )}
+                </ActionIcon>
+                <Text align="center" color="white">
+                  {e?.name}
+                </Text>
+              </Stack>
+            ))}
+          </SimpleGrid>
+        </Stack>
+      </Drawer>
+    </>
+  );
+}

src/app_modules/_global/ui/ui_header_tamplate.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import {
+  Header,
+  Group,
+  ActionIcon,
+  Text,
+  Title,
+  Box,
+  Loader,
+} from "@mantine/core";
+import { IconArrowLeft, IconChevronLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+import { AccentColor, MainColor } from "../color/color_pallet";
+
+export default function UIGlobal_LayoutHeaderTamplate({
+  title,
+  posotion,
+  // left button
+  hideButtonLeft,
+  iconLeft,
+  routerLeft,
+  customButtonLeft,
+  // right button
+  iconRight,
+  routerRight,
+  customButtonRight,
+}: {
+  title: string;
+  posotion?: any;
+  // left button
+  hideButtonLeft?: boolean;
+  iconLeft?: any;
+  routerLeft?: any;
+  customButtonLeft?: React.ReactNode;
+  // right button
+  iconRight?: any;
+  routerRight?: any;
+  customButtonRight?: React.ReactNode;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRightLoading, setRightLoading] = useState(false);
+
+  return (
+    <>
+      <Header
+        height={"8vh"}
+        sx={{
+          //   borderRadius: "0px 0px 20px 20px",
+          //   borderBottom: `1px solid ${AccentColor.blue}`,
+          borderStyle: "none",
+        }}
+        bg={MainColor.darkblue}
+      >
+        <Group h={"100%"} position={posotion ? posotion : "apart"} px={"md"}>
+          {hideButtonLeft ? (
+            <ActionIcon disabled variant="transparent"></ActionIcon>
+          ) : customButtonLeft ? (
+            customButtonLeft
+          ) : (
+            <ActionIcon
+              c={"white"}
+              variant="transparent"
+              radius={"xl"}
+              onClick={() => {
+                setIsLoading(true);
+                routerLeft === undefined
+                  ? router.back()
+                  : router.push(routerLeft, { scroll: false });
+              }}
+            >
+              {isLoading ? (
+                <Loader color={AccentColor.yellow} size={20} />
+              ) : iconLeft ? (
+                iconLeft
+              ) : (
+                <IconChevronLeft />
+              )}
+            </ActionIcon>
+          )}
+
+          <Title order={5} c={MainColor.yellow}>
+            {title}
+          </Title>
+
+          {customButtonRight ? (
+            customButtonRight
+          ) : iconRight === undefined ? (
+            <ActionIcon disabled variant="transparent"></ActionIcon>
+          ) : routerRight === undefined ? (
+            <Box>{iconRight}</Box>
+          ) : (
+            <ActionIcon
+              c={"white"}
+              variant="transparent"
+              onClick={() => {
+                setRightLoading(true);
+                router.push(routerRight);
+              }}
+            >
+              {isRightLoading ? (
+                <Loader color={AccentColor.yellow} size={20} />
+              ) : (
+                iconRight
+              )}
+            </ActionIcon>
+          )}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/_global/ui/ui_layout_tamplate.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import {
+  BackgroundImage,
+  Box,
+  Container,
+  Footer,
+  rem,
+  ScrollArea,
+} from "@mantine/core";
+import { AccentColor, MainColor } from "../color/color_pallet";
+import React from "react";
+
+export default function UIGlobal_LayoutTamplate({
+  children,
+  header,
+  footer,
+}: {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}) {
+  return (
+    <>
+      <Box
+        w={"100%"}
+        h={"100%"}
+        style={{
+          overflowY: "auto",
+          overflowX: "auto",
+          backgroundColor: MainColor.black,
+          position: "fixed",
+        }}
+      >
+        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue} >
+          <BackgroundImage
+            src={"/aset/global/main_background.png"}
+            h={"100vh"}
+            style={{ position: "relative" }}
+          >
+            <UIHeader header={header} />
+
+            <UIChildren footer={footer}>{children}</UIChildren>
+
+            <UIFooter footer={footer} />
+          </BackgroundImage>
+        </Container>
+      </Box>
+    </>
+  );
+}
+
+function UIHeader({ header }: { header: React.ReactNode }) {
+  return (
+    <>
+      {header ? (
+        <Box
+          h={"8vh"}
+          style={{
+            zIndex: 10,
+          }}
+          w={"100%"}
+          pos={"sticky"}
+          top={0}
+        >
+          {header}
+        </Box>
+      ) : (
+        ""
+      )}
+    </>
+  );
+}
+
+function UIChildren({
+  children,
+  footer,
+}: {
+  children: React.ReactNode;
+  footer: React.ReactNode;
+}) {
+  return (
+    <>
+      <Box style={{ zIndex: 0 }} h={footer ? "82vh" : "92vh"} pos={"static"}>
+        <ScrollArea h={"100%"} px={"md"}>
+          {children}
+        </ScrollArea>
+      </Box>
+    </>
+  );
+}
+
+function UIFooter({ footer }: { footer: React.ReactNode }) {
+  return (
+    <>
+      {footer ? (
+        <Box
+          style={{
+            position: "relative",
+            bottom: 0,
+            height: "10vh",
+            zIndex: 10,
+            borderRadius: "20px 20px 0px 0px",
+            borderTop: `2px solid ${AccentColor.blue}`,
+            borderRight: `1px solid ${AccentColor.blue}`,
+            borderLeft: `1px solid ${AccentColor.blue}`,
+          }}
+          bg={AccentColor.darkblue}
+        >
+          <Box
+            h={"100%"}
+            style={{
+              borderRadius: "20px 20px 0px 0px",
+              width: "100%",
+            }}
+            pos={"absolute"}
+          >
+            {footer}
+          </Box>
+        </Box>
+      ) : (
+        ""
+      )}
+    </>
+  );
+}

src/app_modules/_global/ui/ui_modal.tsx

@@ -0,0 +1,45 @@
+import { Modal, Stack, Title, Group, Button, Box } from "@mantine/core";
+import { MainColor, AccentColor } from "../color/color_pallet";
+
+export default function UIGlobal_Modal({
+  opened,
+  close,
+  title,
+  buttonKiri,
+  buttonKanan,
+}: {
+  opened: any;
+  close: any;
+  title: any;
+  buttonKiri: any;
+  buttonKanan: any;
+}) {
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={() => {
+          close();
+        }}
+        centered
+        withCloseButton={false}
+        styles={{
+          content: {
+            backgroundColor: MainColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+          },
+        }}
+      >
+        <Stack>
+          <Title order={6} color="white" align="center">
+            {title}
+          </Title>
+          <Group position="center">
+            <Box>{buttonKiri}</Box>
+            <Box>{buttonKanan}</Box>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}

src/app_modules/_global/ui/ui_splash.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Loader, Stack, ThemeIcon } from "@mantine/core";
+import UIGlobal_LayoutTamplate from "./ui_layout_tamplate";
+
+export default function UIGlobal_SplashScreen({ icon }: { icon: any }) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate>
+        <Stack h={"90vh"} align="center" justify="center" spacing={"xl"}>
+          <ThemeIcon variant="transparent" size={300} c="white">
+            {icon}
+          </ThemeIcon>
+          <Loader variant="dots" color="white" />
+        </Stack>
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}