fix: Upload image

Deskripsi:
- Upload image job di arahkan ke storage server
## No Issue

src/app_modules/_global/component/box_information.tsx

@@ -3,10 +3,12 @@ import { AccentColor, MainColor } from "../color/color_pallet";
 
 export default function ComponentGlobal_BoxInformation({
   informasi,
- isReport,
+  isReport,
+  fonsize,
 }: {
   informasi: string;
   isReport?: boolean;
+  fonsize?: number | string;
 }) {
   return (
     <>
@@ -20,10 +22,15 @@ export default function ComponentGlobal_BoxInformation({
           }}
         >
           <Stack spacing={0}>
-            <Text fz={12} fs={"italic"} c={"orange"} fw={"bold"}>
+            <Text
+              fz={fonsize ? fonsize : 12}
+              fs={"italic"}
+              c={"orange"}
+              fw={"bold"}
+            >
               * Report
             </Text>
-            <Text fz={12} c={"white"}>
+            <Text fz={fonsize ? fonsize : 12} c={"white"}>
               {informasi}
             </Text>
           </Stack>
@@ -38,7 +45,7 @@ export default function ComponentGlobal_BoxInformation({
           }}
         >
           <Group>
-            <Text fz={12} c={"red"} fw={"bold"}>
+            <Text fz={fonsize ? fonsize : 12} c={"red"} fw={"bold"}>
               *{" "}
               <Text span inherit c={"white"} fw={"normal"}>
                 {informasi}

src/app_modules/_global/component/comp_card_box_and_background.tsx

@@ -0,0 +1,43 @@
+import { AccentColor } from "@/app_modules/_global/color";
+import { Card } from "@mantine/core";
+import React from "react";
+
+export function ComponentGlobal_CardStyles({
+  children,
+  backgroundColor,
+  border,
+  marginBottom,
+  height,
+  color,
+  onClickHandler,
+}: {
+  children: React.ReactNode;
+  backgroundColor?: string;
+  border?: string;
+  marginBottom?: string | number;
+  height?: string | number;
+  color?: string;
+  onClickHandler?: React.MouseEventHandler<HTMLDivElement>;
+}) {
+  return (
+    <>
+      <Card
+        style={{
+          backgroundColor: backgroundColor
+            ? backgroundColor
+            : AccentColor.darkblue,
+          border: `2px solid ${border ? border : AccentColor.blue}`,
+          paddingInline: "15px",
+          paddingBlock: "15px",
+          borderRadius: "10px",
+          color: color ? color : "white",
+          height: height ? height : "auto",
+          marginBottom: marginBottom ? marginBottom : "0x",
+        }}
+        onClick={onClickHandler}
+      >
+        {children}
+      </Card>
+    </>
+  );
+}

src/app_modules/_global/component/index.ts

@@ -1,9 +1,15 @@
+import ComponentGlobal_BoxInformation from "./box_information";
 import ComponentGlobal_AvatarAndAuthorName from "./comp_author_name_and_avatar";
+import { ComponentGlobal_CardStyles } from "./comp_card_box_and_background";
 import ComponentGlobal_CardLoadingOverlay from "./comp_loading_card";
 import ComponentGlobal_TampilanAngkaRatusan from "./comp_tampilan_angka_ratusan";
 import ComponentGlobal_TampilanRupiah from "./comp_tampilan_rupiah";
+import ComponentGlobal_InputCountDown from "./input_countdown";
 
 export { ComponentGlobal_TampilanRupiah };
 export { ComponentGlobal_TampilanAngkaRatusan };
 export { ComponentGlobal_AvatarAndAuthorName };
 export { ComponentGlobal_CardLoadingOverlay };
+export { ComponentGlobal_BoxInformation };
+export { ComponentGlobal_InputCountDown };
+export { ComponentGlobal_CardStyles };

src/app_modules/_global/component/loader.tsx

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