# style:

- UI Investasi
- UI Donasi
## No issue

src/app_modules/investasi/upload_dokumen/layout.tsx

@@ -2,6 +2,8 @@
 
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { AppShell } from "@mantine/core";
 import React from "react";
 
@@ -12,9 +14,11 @@ export default function LayoutUploadDokumenInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentGlobal_HeaderTamplate title="Upload Dokumen" />}>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Upload Dokumen" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/upload_dokumen/view.tsx

@@ -2,24 +2,29 @@
 
 import { Warna } from "@/app/lib/warna";
 import {
-  Group,
-  FileButton,
-  Button,
-  Box,
-  Paper,
   AspectRatio,
-  Image,
-  Stack,
+  Box,
+  Button,
   Center,
+  FileButton,
+  Group,
+  Image,
+  Paper,
+  Stack,
   TextInput,
 } from "@mantine/core";
+import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-simple-toasts";
-import funUploadProspektusInvestasi from "../fun/fun_upload_prospek";
-import funLoadDataInvestasi from "../fun/fun_load_data";
-import _ from "lodash";
 import funUploadDokumenInvestasi from "../fun/fun_upload_dokumen";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 
 export default function UploadDokumenInvestasi({
   idInves,
@@ -36,8 +41,8 @@ export default function UploadDokumenInvestasi({
       idInves: idInves,
       title: title,
     };
-    if (_.values(body).includes("")) return toast("Lengkapi nama dokumen");
-    if (!pdf) return toast("File Kosong");
+    if (_.values(body).includes("")) return ComponentGlobal_NotifikasiPeringatan("Lengkapi nama dokumen");
+    if (!pdf) return ComponentGlobal_NotifikasiPeringatan("File Kosong");
 
     const fd = new FormData();
     fd.append("file", pdf as any);
@@ -45,10 +50,10 @@ export default function UploadDokumenInvestasi({
     await funUploadDokumenInvestasi(fd, body).then((res) => {
       // console.log(res);
       if (res.status === 201) {
-        toast("Berhasil upload");
+        ComponentGlobal_NotifikasiBerhasil("Berhasil upload");
         router.back();
       } else {
-        toast(res.message);
+        ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
   }
@@ -70,9 +75,10 @@ export default function UploadDokumenInvestasi({
             {(props) => (
               <Button
                 {...props}
-                bg={Warna.hijau_muda}
-                color="green"
                 radius={50}
+                bg={MainColor.yellow}
+                color="yellow"
+                c={"black"}
               >
                 Upload File
               </Button>
@@ -82,13 +88,34 @@ export default function UploadDokumenInvestasi({
 
         <Box my={"lg"}>
           {!file ? (
-            <Paper radius={20}>
+            <Paper
+              radius={20}
+              style={{
+                border: `2px solid gray`,
+                backgroundColor: "gray",
+                padding: "10px",
+                borderRadius: "10px",
+              }}
+            >
               <AspectRatio ratio={2 / 4} mah={300} maw={200} mx={"auto"}>
-                <Image alt="" src={"/aset/no-file.png"} />
+                <Image
+                  color="gray"
+                  alt=""
+                  opacity={0.1}
+                  src={"/aset/pdf-icon.png"}
+                />
               </AspectRatio>
             </Paper>
           ) : (
-            <Paper radius={20}>
+            <Paper
+              radius={20}
+              style={{
+                border: `2px solid ${AccentColor.softblue}`,
+                backgroundColor: AccentColor.blue,
+                padding: "10px",
+                borderRadius: "10px",
+              }}
+            >
               <AspectRatio ratio={2 / 4} mah={300} maw={200} mx={"auto"}>
                 <Image alt="" src={"/aset/pdf-icon.png"} />
               </AspectRatio>
@@ -96,22 +123,29 @@ export default function UploadDokumenInvestasi({
           )}
         </Box>
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Nama dokumen"
+          placeholder="Masukan nama dokumen"
           withAsterisk
           onChange={(val) => {
             setTitle(val.target.value);
           }}
         />
-        <Center>
+        <Stack>
           <Button
-            w={300}
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
             radius={50}
-            bg={Warna.biru}
             onClick={() => onUpload()}
           >
             Simpan
           </Button>
-        </Center>
+        </Stack>
       </Stack>
     </>
   );