# style:

- UI Investasi
- UI Donasi
## No issue

src/app_modules/investasi/berita/layout.tsx

@@ -1,20 +1,21 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { AppShell } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
 
 export default function LayoutBeritaInvestasi({
-    children,
-  }: {
-    children: React.ReactNode;
-  }) {
-    return (
-      <>
-        <AppComponentGlobal_LayoutTamplate header={<ComponentGlobal_HeaderTamplate title="Berita" />}>
-          {children}
-        </AppComponentGlobal_LayoutTamplate>
-      </>
-    );
-  }
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Berita" />}
+      >
+        {children}
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/investasi/component/detail/card_status.tsx

@@ -0,0 +1,61 @@
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { Paper, Grid, Stack, AspectRatio, Text, Image } from "@mantine/core";
+import _ from "lodash";
+
+import { MODEL_Investasi } from "../../model/model_investasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { useRouter } from "next/navigation";
+
+export function ComponentInvestasi_CardStatus({
+  data,
+  path,
+}: {
+  data: MODEL_Investasi;
+  path: string;
+}) {
+  const router = useRouter();
+  return (
+    <>
+      <Paper
+        onClick={() => router.push(path + `${data.id}`)}
+        style={{
+          padding: "15px",
+          backgroundColor: AccentColor.darkblue,
+          borderRadius: "10px",
+          border: `2px solid ${AccentColor.blue}`,
+          color: "white",
+          marginBottom: "15px",
+        }}
+      >
+        <Grid>
+          <Grid.Col span={8}>
+            <Text fw={"bold"} lineClamp={1}>
+              {" "}
+              {_.startCase(data.title)}
+            </Text>
+            <Stack spacing={0}>
+              <Text fz={10}>Target Dana:</Text>
+              <Text>
+                Rp.{" "}
+                {new Intl.NumberFormat("id-ID", {
+                  maximumSignificantDigits: 10,
+                }).format(+data.targetDana)}
+              </Text>
+            </Stack>
+          </Grid.Col>
+
+          <Grid.Col span={4}>
+            <AspectRatio ratio={16 / 9}>
+              <Paper radius={"md"}>
+                <Image
+                  alt=""
+                  src={RouterInvestasi.api_gambar + `${data.imagesId}`}
+                />
+              </Paper>
+            </AspectRatio>
+          </Grid.Col>
+        </Grid>
+      </Paper>
+    </>
+  );
+}

src/app_modules/investasi/component/detail/detai_data_non_publish.tsx

@@ -0,0 +1,159 @@
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  Stack,
+  Box,
+  AspectRatio,
+  Center,
+  Title,
+  Grid,
+  Paper,
+  Flex,
+  ActionIcon,
+  Image,
+  Text,
+  SimpleGrid,
+} from "@mantine/core";
+import _ from "lodash";
+import { MODEL_Investasi } from "../../model/model_investasi";
+import { IconBookDownload, IconFileDescription } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export function ComponentInvestasi_DetailDataNonPublish({
+  data,
+}: {
+  data: MODEL_Investasi;
+}) {
+  const router = useRouter();
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: RouterInvestasi.detail_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: RouterInvestasi.detail_dokumen,
+    },
+  ];
+
+  return (
+    <>
+      <Stack
+        style={{
+          paddingInline: "15px",
+          paddingBlock: "15px",
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px",
+          color: "white",
+        }}
+      >
+        <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
+          <Image
+            alt=""
+            src={RouterInvestasi.api_gambar + `${data.imagesId}`}
+            radius={"sm"}
+            height={300}
+            width={"100%"}
+          />
+        </AspectRatio>
+
+        {/* Title dan Persentase */}
+        <Center>
+          <Title order={4} align="center">
+            {_.startCase(data.title)}
+          </Title>
+        </Center>
+
+        {/* Rincian Data */}
+        <Grid p={"md"}>
+          <Grid.Col span={6}>
+            <Stack>
+              <Box>
+                <Text>Dana Dibutuhkan</Text>
+                <Text>
+                  Rp.{" "}
+                  {new Intl.NumberFormat("id-ID", {
+                    maximumSignificantDigits: 20,
+                  }).format(+data.targetDana)}
+                </Text>
+              </Box>
+              <Box>
+                <Text>Harga Per Lembar</Text>
+                <Text>
+                  Rp.{" "}
+                  {new Intl.NumberFormat("id-ID", {
+                    maximumSignificantDigits: 10,
+                  }).format(+data.hargaLembar)}
+                </Text>
+              </Box>
+              <Box>
+                <Text>Jadwal Pembagian</Text>
+                <Text>{data.MasterPembagianDeviden.name} Bulan </Text>
+              </Box>
+              <Box>
+                <Text>Pencarian Investor</Text>
+                <Text>{data.MasterPencarianInvestor.name} Hari </Text>
+              </Box>
+            </Stack>
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Stack>
+              <Box>
+                <Text>ROI</Text>
+                <Text>{data.roi} %</Text>
+              </Box>
+              <Box>
+                <Text>Total Lembar</Text>
+                <Text>
+                  {new Intl.NumberFormat("id-ID", {
+                    maximumSignificantDigits: 10,
+                  }).format(+data.totalLembar)}{" "}
+                  lembar
+                </Text>
+              </Box>
+              <Box>
+                <Text>Pembagian Deviden</Text>
+                <Text>{data.MasterPeriodeDeviden.name}</Text>
+              </Box>
+            </Stack>
+          </Grid.Col>
+        </Grid>
+
+        {/* List Box */}
+        <SimpleGrid cols={2}>
+          {listBox.map((e) => (
+            <Center key={e.id}>
+              <Paper
+                w={100}
+                style={{
+                  padding: "15px",
+                  backgroundColor: AccentColor.blue,
+                  border: `2px solid ${AccentColor.softblue}`,
+                  borderRadius: "10px",
+                  color: "white",
+                }}
+                onClick={() => router.push(e.route + `${data.id}`)}
+              >
+                <Stack spacing={0} align="center">
+                  <Text fz={12}>{e.name}</Text>
+                  <ActionIcon
+                    variant="transparent"
+                    size={60}
+                    style={{ color: "white" }}
+                  >
+                    {e.icon}
+                  </ActionIcon>
+                </Stack>
+              </Paper>
+            </Center>
+          ))}
+        </SimpleGrid>
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/create/layout.tsx

@@ -1,10 +1,7 @@
 "use client";
 
-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";
 
 export default function InvestasiCreateLayout({
@@ -15,7 +12,7 @@ export default function InvestasiCreateLayout({
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Investasi Baru" />}
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Investasi" />}
       >
         {children}
       </UIGlobal_LayoutTamplate>

src/app_modules/investasi/create/view.tsx

@@ -21,11 +21,9 @@ import {
   Select,
   Stack,
   Text,
-  TextInput
+  TextInput,
 } from "@mantine/core";
-import {
-  IconUpload
-} from "@tabler/icons-react";
+import { IconUpload } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
@@ -33,6 +31,12 @@ import { useState } from "react";
 import toast from "react-simple-toasts";
 import { funCreateInvestasi } from "../fun/fun_create_investasi";
 import { gs_StatusPortoInvestasi, gs_investasiFooter } from "../g_state";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 
 export default function InvestasiCreate({
   id,
@@ -96,9 +100,10 @@ export default function InvestasiCreate({
         setChangeColor(1);
         setActiveTab("Review");
         setLoading(true);
-        router.push(RouterInvestasi.dialog_create);
+        ComponentGlobal_NotifikasiBerhasil(res.message)
+        router.push(RouterInvestasi.portofolio);
       } else {
-        toast(res.message);
+        ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
   }
@@ -124,15 +129,35 @@ export default function InvestasiCreate({
       <Box>
         {/* Inputan Create */}
         <Stack spacing={"sm"} px={"md"}>
-          <AspectRatio ratio={16 / 9}>
-            <Paper radius={"md"} withBorder>
-              {img ? (
-                <Image alt="" src={img} />
-              ) : (
-                <Image alt="" src={"/aset/no-img.png"} />
-              )}
-            </Paper>
-          </AspectRatio>
+          {img ? (
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.softblue}`,
+                  backgroundColor: AccentColor.blue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
+                <Image
+                  alt="Foto"
+                  src={img ? img : "/aset/no-img.png"}
+                  maw={200}
+                />
+              </Paper>
+            </AspectRatio>
+          ) : (
+            <Center>
+              <Paper h={300} w={200} withBorder shadow="lg" bg={"gray.1"}>
+                <Stack justify="center" align="center" h={"100%"}>
+                  <IconUpload color="gray" />
+                  <Text fz={10} fs={"italic"} c={"gray"} fw={"bold"}>
+                    Upload Gambar
+                  </Text>
+                </Stack>
+              </Paper>
+            </Center>
+          )}
 
           {/* Upload Foto */}
           <Group position="center" mb={"md"}>
@@ -142,7 +167,7 @@ export default function InvestasiCreate({
                   const buffer = URL.createObjectURL(
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
-                  console.log(files.size);
+                  // console.log(files.size);
 
                   if (files.size > maksimalUploadFile) {
                     ComponentGlobal_WarningMaxUpload({});
@@ -160,25 +185,44 @@ export default function InvestasiCreate({
                 <Button
                   {...props}
                   leftIcon={<IconUpload size={12} />}
-                  compact
                   radius={50}
-                  bg={Warna.hijau_muda}
-                  // onClick={() => router.push("/dev/investasi/upload")}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                 >
                   Upload Gambar
                 </Button>
               )}
             </FileButton>
           </Group>
+
           {/* Upload File */}
           <Group position="center">
             {!pdf ? (
-              <Paper w={"100%"} bg={"gray.3"} p={"sm"}>
-                <Text opacity={"0.3"}>Upload File Prospektus</Text>
+              <Paper
+                w={"100%"}
+                style={{
+                  border: `2px solid gray`,
+                  backgroundColor: "gray.1",
+                  padding: "10px",
+                  borderRadius: "10px",
+                  color: "gray"
+                }}
+              >
+                <Text>Upload File Prospektus</Text>
               </Paper>
             ) : (
-              <Paper w={"100%"} bg={"gray.6"} p={"sm"}>
-                <Text truncate>{pdf.name}</Text>
+              <Paper
+                w={"100%"}
+                style={{
+                  border: `2px solid ${AccentColor.softblue}`,
+                  backgroundColor: AccentColor.blue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                  color: "white",
+                }}
+              >
+                <Text lineClamp={1}>{pdf.name}</Text>
               </Paper>
             )}
             {/* {JSON.stringify(filePdf)} */}
@@ -205,9 +249,10 @@ export default function InvestasiCreate({
                 <Button
                   leftIcon={<IconUpload size={12} />}
                   {...props}
-                  compact
                   radius={"xl"}
-                  bg={Warna.hijau_muda}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
                 >
                   Upload File
                 </Button>
@@ -215,6 +260,11 @@ export default function InvestasiCreate({
             </FileButton>
           </Group>
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Judul Investasi"
             placeholder="Judul investasi"
@@ -227,32 +277,12 @@ export default function InvestasiCreate({
             }}
           />
 
-          {/* <NumberInput
-            withAsterisk
-            type="number"
-            label="Dana Dibutuhkan"
-            placeholder="Masukan nominal dana"
-            onChange={(val: any) => {
-              setValue({
-                ...value,
-                targetDana: val,
-              });
-            }}
-          />
-          <NumberInput
-            label="Harga Per Lembar"
-            type="number"
-            placeholder="Masukan nominal harga"
-            onChange={(val) => {
-              setValue({
-                ...value,
-                hargaLembar: +val,
-              });
-              onTotalLembar({ target: value.targetDana, harga: +val });
-            }}
-          /> */}
-
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             icon={<Text fw={"bold"}>Rp.</Text>}
             min={0}
             withAsterisk
@@ -280,6 +310,11 @@ export default function InvestasiCreate({
           />
 
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             icon={<Text fw={"bold"}>Rp.</Text>}
             min={0}
             withAsterisk
@@ -317,7 +352,7 @@ export default function InvestasiCreate({
             }}
           />
 
-          <Stack spacing={3}>
+          <Stack spacing={3} style={{ color: "white" }}>
             <Text fz={"sm"} fw={500}>
               Total Lembar
             </Text>
@@ -325,12 +360,17 @@ export default function InvestasiCreate({
               <Text>{totalLembar}</Text>
               <Divider />
             </Stack>
-            <Text c={"gray"} fz={10} fs={"italic"}>
+            <Text fz={10} fs={"italic"}>
               *Total lembar dihitung dari, Target Dana : Harga Perlembar
             </Text>
           </Stack>
 
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             rightSection={
               <Text fw={"bold"} c={"gray"}>
                 %
@@ -349,6 +389,11 @@ export default function InvestasiCreate({
           />
 
           <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Pencarian Investor"
             placeholder="Pilih batas waktu"
@@ -364,6 +409,11 @@ export default function InvestasiCreate({
             }}
           />
           <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Periode Deviden"
             placeholder="Pilih batas waktu"
@@ -376,6 +426,11 @@ export default function InvestasiCreate({
             }}
           />
           <Select
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             label="Pembagian Deviden"
             placeholder="Pilih batas waktu"
@@ -390,10 +445,9 @@ export default function InvestasiCreate({
               });
             }}
           />
-        </Stack>
 
-        <Center my={"lg"}>
           <Button
+            my={"xl"}
             style={{
               transition: "0.5s",
             }}
@@ -412,14 +466,15 @@ export default function InvestasiCreate({
                 ? true
                 : false
             }
-            w={300}
             radius={50}
-            bg={Warna.biru}
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
             onClick={() => onSubmit()}
           >
             Simpan
           </Button>
-        </Center>
+        </Stack>
       </Box>
     </>
   );

src/app_modules/investasi/create_berita/layout.tsx

@@ -1,14 +1,10 @@
 "use client";
 
-import { Warna } from "@/app/lib/warna";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { AppShell, Button, Center, Footer } from "@mantine/core";
-import { IconPencilPlus } from "@tabler/icons-react";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { useRouter } from "next/navigation";
 
 import React from "react";
-import toast from "react-simple-toasts";
 
 export default function LayoutCreateBeritaInvestasi({
   children,
@@ -20,16 +16,11 @@ export default function LayoutCreateBeritaInvestasi({
   const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentGlobal_HeaderTamplate title="Buat Berita" />}
-        // footer={
-        //   <Footer height={70} sx={{ borderStyle: "none" }}>
-
-        //   </Footer>
-        // }
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Buat Berita" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/create_berita/view.tsx

@@ -19,8 +19,16 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-simple-toasts";
 import funCreateBeritaInvestasi from "../fun/fun_create_berita";
+import { 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 CreateBeritaInvestasi({idInves}: {idInves: string}) {
+export default function CreateBeritaInvestasi({
+  idInves,
+}: {
+  idInves: string;
+}) {
   const router = useRouter();
   const [fl, setFl] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>();
@@ -28,22 +36,22 @@ export default function CreateBeritaInvestasi({idInves}: {idInves: string}) {
   const [value, setValue] = useState({
     title: "",
     deskripsi: "",
-    investasiId: idInves
+    investasiId: idInves,
   });
 
   async function onCreate() {
     const body = value;
 
     if (_.values(body).includes("")) return toast("Lengkapi data");
-    if (!fl) return toast("File Kosong");
+    if (!fl) return ComponentGlobal_NotifikasiPeringatan("File Kosong");
 
     const fd = new FormData();
     fd.append("file", fl);
 
     await funCreateBeritaInvestasi(fd, body as any).then((res) => {
       res.status === 201
-        ? (toast(res.message), router.back())
-        : toast(res.message);
+        ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
+        : ComponentGlobal_NotifikasiGagal(res.message);
     });
 
     // router.back();
@@ -52,12 +60,18 @@ export default function CreateBeritaInvestasi({idInves}: {idInves: string}) {
 
   return (
     <>
-      <Stack>
-        <AspectRatio ratio={16 / 9}>
+      <Stack px={"xl"}>
+        <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
           {img ? (
-            <Image alt="" src={img} />
+            <Image alt="" src={img} radius={"sm"} height={300} width={"100%"} />
           ) : (
-            <Image alt="" src={"/aset/no-img.png"} />
+            <Image
+              alt=""
+              src={"/aset/no-img.png"}
+              radius={"sm"}
+              height={300}
+              width={"100%"}
+            />
           )}
         </AspectRatio>
         <Group position="center" mt={"md"}>
@@ -73,19 +87,25 @@ export default function CreateBeritaInvestasi({idInves}: {idInves: string}) {
           >
             {(props) => (
               <Button
-                compact
+                leftIcon={<IconCamera />}
                 {...props}
-                w={100}
                 radius={50}
-                bg={Warna.hijau_muda}
-                // onClick={() => router.push("/dev/investasi/upload")}
+                bg={MainColor.yellow}
+                color="yellow"
+                c={"black"}
               >
-                <IconCamera />
+                Upload
               </Button>
             )}
           </FileButton>
         </Group>
         <TextInput
+          withAsterisk
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Judul berita"
           onChange={(val) => {
             setValue({
@@ -96,6 +116,12 @@ export default function CreateBeritaInvestasi({idInves}: {idInves: string}) {
         />
 
         <Textarea
+          withAsterisk
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Deskripsi"
           autosize
           minRows={2}
@@ -107,19 +133,19 @@ export default function CreateBeritaInvestasi({idInves}: {idInves: string}) {
             });
           }}
         />
-      </Stack>
-      <Center mt={100}>
         <Button
-          w={300}
           radius={50}
-          bg={Warna.biru}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
           onClick={() => {
             onCreate();
           }}
         >
           Simpan
         </Button>
-      </Center>
+      </Stack>
+    
     </>
   );
 }

src/app_modules/investasi/detail/view.tsx

@@ -89,7 +89,7 @@ export default function DetailInvestasi({
 
   return (
     <>
-      <Box
+      <Stack
         style={{
           padding: "15px",
           backgroundColor: AccentColor.darkblue,
@@ -161,18 +161,19 @@ export default function DetailInvestasi({
           )}
         </Group>
 
-        <Paper withBorder mb={"md"} p={"xs"}>
-          <AspectRatio ratio={1 / 1}>
-            <Image
-              alt=""
-              src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
-            />
-          </AspectRatio>
-        </Paper>
+        <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
+          <Image
+            alt=""
+            src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
+            radius={"sm"}
+            height={300}
+            width={"100%"}
+          />
+        </AspectRatio>
 
         {/* Title dan Progress */}
         <Box mb={"md"}>
-          <Title order={4} mb={"xs"}>
+          <Title order={3} mb={"xs"} align="center">
             {investasi.title}
           </Title>
           <Progress
@@ -328,7 +329,7 @@ export default function DetailInvestasi({
             )}
           </Box>
         )}
-      </Box>
+      </Stack>
     </>
   );
 }

src/app_modules/investasi/detail_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 LayoutDetailDokumenInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentGlobal_HeaderTamplate title="Dokumen" />}>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Dokumen" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/detail_dokumen/view.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { MODEL_Investasi } from "../model/model_investasi";
 import { useState } from "react";
 import _ from "lodash";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 
 export default function DetailDokumenInvestasi({
   dataInvestasi,
@@ -44,9 +45,7 @@ export default function DetailDokumenInvestasi({
       </Link>
        ))
       ) : (
-        <Center>
-          <Title order={6}>Tidak Ada File</Title>
-        </Center>
+       <ComponentGlobal_IsEmptyData/>
       )}
     </>
   );

src/app_modules/investasi/detail_portofolio/draft/index.tsx

@@ -32,6 +32,8 @@ import { MODEL_Investasi } from "../../model/model_investasi";
 import { useState } from "react";
 import _ from "lodash";
 import funGantiStatusInvestasi from "../../fun/fun_ganti_status";
+import { ComponentInvestasi_DetailDataNonPublish } from "../../component/detail/detai_data_non_publish";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailDraftInvestasi({
   dataInvestasi,
@@ -40,7 +42,7 @@ export default function DetailDraftInvestasi({
 }) {
   const router = useRouter();
   const [activeTab, setActiveTab] = useAtom(gs_StatusPortoInvestasi);
-  const [investasi, setInvestasi] = useState<MODEL_Investasi>(dataInvestasi);
+  // const [investasi, setInvestasi] = useState<MODEL_Investasi>(dataInvestasi);
 
   const listBox = [
     {
@@ -64,7 +66,7 @@ export default function DetailDraftInvestasi({
   ];
 
   async function onsubmit() {
-    await funGantiStatusInvestasi(investasi.id, "2")
+    await funGantiStatusInvestasi(dataInvestasi.id, "2")
       .then((res) => res)
       .then((val) => {
         if (val.status === 200) {
@@ -79,7 +81,7 @@ export default function DetailDraftInvestasi({
 
   return (
     <>
-      <Paper withBorder mb={"md"}>
+      {/* <Paper withBorder mb={"md"}>
         <AspectRatio ratio={16 / 9}>
           <Image
             alt=""
@@ -88,14 +90,13 @@ export default function DetailDraftInvestasi({
         </AspectRatio>
       </Paper>
 
-      {/* Title dan Persentase */}
       <Center>
         <Title order={4} mb={"xs"}>
           {_.capitalize(investasi.title)}
         </Title>
       </Center>
 
-      {/* Rincian Data */}
+     
       <Grid p={"md"} mb={"md"}>
         <Grid.Col span={6}>
           <Stack>
@@ -139,19 +140,22 @@ export default function DetailDraftInvestasi({
             </Box>
           </Stack>
         </Grid.Col>
-      </Grid>
+      </Grid> */}
 
-      <Center>
-        <Button
-          w={300}
-          radius={50}
-          bg={"yellow.7"}
-          color="yellow"
-          onClick={() => onsubmit()}
-        >
-          Ajukan Review
-        </Button>
-      </Center>
+      <Stack mb={"lg"}>
+        <ComponentInvestasi_DetailDataNonPublish data={dataInvestasi} />
+        <Stack>
+          <Button
+            radius={50}
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
+            onClick={() => onsubmit()}
+          >
+            Ajukan Review
+          </Button>
+        </Stack>
+      </Stack>
     </>
   );
 }

src/app_modules/investasi/detail_portofolio/draft/layout.tsx

@@ -1,31 +1,71 @@
 "use client";
 
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { AppShell } from "@mantine/core";
-import { IconEdit } from "@tabler/icons-react";
-import React from "react";
+import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { ActionIcon, AppShell } from "@mantine/core";
+import { IconDotsVertical, IconEdit, IconFilePencil } from "@tabler/icons-react";
+import React, { useState } from "react";
 
 export default function LayoutDetailDraftInvestasi({
   children,
-  id
+  id,
 }: {
   children: React.ReactNode;
-  id: string
+  id: string;
 }) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const listPage = [
+    {
+      id: "1",
+      name: "Edit Investasi",
+      icon: <IconEdit />,
+      path: RouterInvestasi.edit_intro + id,
+    },
+    {
+      id: "2",
+      name: "Edit Prospektus",
+      icon: <IconFilePencil />,
+      path: RouterInvestasi.upload_prospektus + id,
+    },
+    {
+      id: "3",
+      name: "Edit Dokumen",
+      icon: <IconFilePencil />,
+      path: RouterInvestasi.edit_dokumen + id,
+    },
+  ];
+
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Detail Draft"
-            icon={<IconEdit />}
-            route2={`/dev/investasi/edit/${id}`}
+            // icon={<IconEdit />}
+            // route2={`/dev/investasi/edit/${id}`}
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => setOpenDrawer(true)}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={listPage}
+      />
     </>
   );
 }

src/app_modules/investasi/detail_portofolio/publish/index.tsx

@@ -33,6 +33,7 @@ import { MODEL_Investasi } from "../../model/model_investasi";
 import { useState } from "react";
 import moment from "moment";
 import _ from "lodash";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
 
 export default function DetailPublishInvestasi({
   dataInvestasi,
@@ -64,16 +65,38 @@ export default function DetailPublishInvestasi({
   ];
 
   return (
-    <>
+    <Stack
+      style={{
+        paddingInline: "15px",
+        paddingBlock: "15px",
+        backgroundColor: AccentColor.darkblue,
+        border: `2px solid ${AccentColor.blue}`,
+        borderRadius: "10px",
+        color: "white",
+        marginBottom: "15px",
+      }}
+    >
       {Number(investasi.MasterPencarianInvestor.name) -
         moment(new Date()).diff(new Date(investasi.countDown), "days") <=
       0 ? (
-        <Group position="center" mb={"sm"}>
+        <Group
+          position="center"
+          mb={"sm"}
+          style={{
+            color: "white",
+          }}
+        >
           <IconCircleCheck color="green" />
           <Text c={"green"}>Selesai</Text>
         </Group>
       ) : (
-        <Group mb={"sm"} position="center">
+        <Group
+          mb={"sm"}
+          position="center"
+          style={{
+            color: "white",
+          }}
+        >
           <Text>
             Sisa waktu :{" "}
             {Number(investasi.MasterPencarianInvestor.name) -
@@ -86,14 +109,15 @@ export default function DetailPublishInvestasi({
         </Group>
       )}
 
-      <Paper withBorder mb={"md"}>
-        <AspectRatio ratio={16 / 9}>
-          <Image
-            alt=""
-            src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
-          />
-        </AspectRatio>
-      </Paper>
+      <AspectRatio ratio={1 / 1} mx={"sm"} mah={300}>
+        <Image
+          alt=""
+          src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
+          radius={"sm"}
+          height={300}
+          width={"100%"}
+        />
+      </AspectRatio>
 
       {/* Title dan Persentase */}
       <Box mb={"md"}>
@@ -202,6 +226,6 @@ export default function DetailPublishInvestasi({
           </Grid.Col>
         ))}
       </Grid>
-    </>
+    </Stack>
   );
 }

src/app_modules/investasi/detail_portofolio/publish/layout.tsx

@@ -2,19 +2,21 @@
 
 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"
 
 export default function LayoutDetailPublishInvestasi({children}: {children: React.ReactNode}){
     return<>
 
-    <AppComponentGlobal_LayoutTamplate
+    <UIGlobal_LayoutTamplate
     header={
-        <ComponentGlobal_HeaderTamplate title="Detail Publish"/>
+        <UIGlobal_LayoutHeaderTamplate title="Detail Publish"/>
     }
     >
         {children}
-    </AppComponentGlobal_LayoutTamplate>
+    </UIGlobal_LayoutTamplate>
     
     </>
 }

src/app_modules/investasi/detail_portofolio/reject/index.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import { Button, Group, Stack } from "@mantine/core";
+import { IconBookDownload, IconFileDescription } from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { ComponentInvestasi_DetailDataNonPublish } from "../../component/detail/detai_data_non_publish";
+import funDeleteInvestasi from "../../fun/fun_delete_investasi";
+import funGantiStatusInvestasi from "../../fun/fun_ganti_status";
+import { gs_StatusPortoInvestasi } from "../../g_state";
+import { MODEL_Investasi } from "../../model/model_investasi";
+
+export default function DetailRejectInvestasi({
+  dataInvestasi,
+}: {
+  dataInvestasi: MODEL_Investasi;
+}) {
+  const router = useRouter();
+  const [investasi, setInvestasi] = useState(dataInvestasi);
+  const [activeTab, setActiveTab] = useAtom(gs_StatusPortoInvestasi);
+  const [openModal, setOpenModal] = useState(false);
+
+  const listBox = [
+    {
+      id: 1,
+      name: "Prospektus",
+      icon: <IconBookDownload size={70} />,
+      route: RouterInvestasi.edit_prospektus,
+    },
+    {
+      id: 2,
+      name: "Dokumen",
+      icon: <IconFileDescription size={70} />,
+      route: RouterInvestasi.edit_dokumen,
+    },
+    // {
+    //   id: 3,
+    //   name: "Berita",
+    //   icon: <IconSpeakerphone size={70} />,
+    //   route: RouterInvestasi.edit_berita,
+    // },
+  ];
+
+  async function onAjukan() {
+    await funGantiStatusInvestasi(investasi.id, "1").then((res) => {
+      if (res.status === 200) {
+        ComponentGlobal_NotifikasiBerhasil("Project Diajukan Kembali");
+        setActiveTab("Draft");
+        router.push(RouterInvestasi.portofolio);
+      } else {
+        ComponentGlobal_NotifikasiGagal("Gagal Pengajuan");
+      }
+    });
+  }
+
+  async function onDelete() {
+    await funDeleteInvestasi(investasi.id).then((res) => {
+      if (res.status === 200) {
+        ComponentGlobal_NotifikasiBerhasil(res.message);
+        setOpenModal(false);
+        router.push(RouterInvestasi.portofolio);
+      } else {
+        ComponentGlobal_NotifikasiGagal(res.message);
+      }
+    });
+    // setActiveTab("Reject");
+  }
+
+  return (
+    <>
+      {/* Pop up */}
+
+      <UIGlobal_Modal
+        title={"Anda Yakin Menghapus Data?"}
+        opened={openModal}
+        close={() => setOpenModal(false)}
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal(false)}>
+            Batal
+          </Button>
+        }
+        buttonKanan={
+          <Button bg={"red"} radius={"xl"} onClick={() => onDelete()}>
+            Hapus
+          </Button>
+        }
+      />
+
+      <Stack>
+        {/* Alasan */}
+        <ComponentGlobal_BoxInformation
+          informasi={investasi.catatan}
+          isReport
+        />
+
+        <ComponentInvestasi_DetailDataNonPublish data={investasi} />
+
+        <Group position="apart" grow>
+          {/* Tombol Ajukan */}
+          <Button
+            mb={"xl"}
+            radius={50}
+            bg={"orange.7"}
+            color="yellow"
+            onClick={() => onAjukan()}
+          >
+            Edit Kembali
+          </Button>
+
+          {/* Tombol Hapus */}
+          <Button
+            mb={"xl"}
+            radius={50}
+            bg={"red.7"}
+            color="yellow"
+            onClick={() => setOpenModal(true)}
+          >
+            Hapus
+          </Button>
+        </Group>
+      </Stack>
+    </>
+  );
+}

src/app_modules/investasi/detail_portofolio/reject/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 { IconEdit } from "@tabler/icons-react";
 import React from "react";
@@ -15,9 +17,9 @@ export default function LayoutDetailRejecttInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Detail Reject"
             // icon={<IconEdit />}
             // route2={`/dev/investasi/edit/${idInves}`}
@@ -25,7 +27,7 @@ export default function LayoutDetailRejecttInvestasi({
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/detail_portofolio/reject/page.tsx

@@ -1,246 +0,0 @@
-"use client";
-
-import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-import { Warna } from "@/app/lib/warna";
-import {
-  ActionIcon,
-  AspectRatio,
-  Avatar,
-  Box,
-  Button,
-  Center,
-  Divider,
-  Flex,
-  Grid,
-  Group,
-  Image,
-  Modal,
-  Paper,
-  Slider,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
-import {
-  IconArrowBackUpDouble,
-  IconBookDownload,
-  IconFileDescription,
-  IconSpeakerphone,
-  IconTrash,
-} from "@tabler/icons-react";
-import { useAtom } from "jotai";
-import { useRouter } from "next/navigation";
-import { gs_StatusPortoInvestasi } from "../../g_state";
-import toast from "react-simple-toasts";
-import { MODEL_Investasi } from "../../model/model_investasi";
-import { useState } from "react";
-import funGantiStatusInvestasi from "../../fun/fun_ganti_status";
-import funDeleteInvestasi from "../../fun/fun_delete_investasi";
-import { useDisclosure } from "@mantine/hooks";
-
-export default function DetailRejectInvestasi({
-  dataInvestasi,
-}: {
-  dataInvestasi: MODEL_Investasi;
-}) {
-  const router = useRouter();
-  const [investasi, setInvestasi] = useState(dataInvestasi);
-  const [activeTab, setActiveTab] = useAtom(gs_StatusPortoInvestasi);
-  const [opened, { toggle }] = useDisclosure(false);
-
-  const listBox = [
-    {
-      id: 1,
-      name: "Prospektus",
-      icon: <IconBookDownload size={70} />,
-      route: RouterInvestasi.edit_prospektus,
-    },
-    {
-      id: 2,
-      name: "Dokumen",
-      icon: <IconFileDescription size={70} />,
-      route: RouterInvestasi.edit_dokumen,
-    },
-    // {
-    //   id: 3,
-    //   name: "Berita",
-    //   icon: <IconSpeakerphone size={70} />,
-    //   route: RouterInvestasi.edit_berita,
-    // },
-  ];
-
-  async function onAjukan() {
-    await funGantiStatusInvestasi(investasi.id, "1").then((res) => {
-      if (res.status === 200) {
-        toast("Project Diajukan Kembali");
-        setActiveTab("Draft");
-        router.push(RouterInvestasi.portofolio);
-      } else {
-        toast("Gagal Pengajuan");
-      }
-    });
-  }
-
-  async function onBatal() {
-    await funDeleteInvestasi(investasi.id).then((res) => {
-      if (res.status === 200) {
-        toast(res.message);
-        toggle();
-        router.push(RouterInvestasi.portofolio);
-      } else {
-        toast(res.message);
-      }
-    });
-    // setActiveTab("Reject");
-  }
-
-  return (
-    <>
-     {/* Pop up */}
-      <Modal
-        opened={opened}
-        onClose={toggle}
-        centered
-        title="Yakin menghapus data"
-      >
-        <Group position="center">
-          <Button onClick={toggle}>Batal</Button>
-          <Button bg={Warna.merah} onClick={() => onBatal()}>
-            Hapus
-          </Button>
-        </Group>
-      </Modal>
-
-      {/* Alasan */}
-      <Box mb={"xl"}>
-        <Title order={6}>Alasan :</Title>
-        <Box>
-          <Paper>
-            <Text>{investasi.catatan}</Text>
-          </Paper>
-        </Box>
-      </Box>
-
-      {/* Tombol Ajukan */}
-      <Grid>
-        <Grid.Col span={6}>
-          <Center>
-            <Button
-            leftIcon={<IconArrowBackUpDouble/>}
-              mb={"xl"}
-              radius={50}
-              bg={"orange.7"}
-              color="yellow"
-              compact
-              onClick={() => onAjukan()}
-            >
-              Masuk ke Draft
-            </Button>
-          </Center>
-        </Grid.Col>
-
-        {/* Tombol Hapus  */}
-        <Grid.Col span={6}>
-          <Center>
-            {" "}
-            <Button
-            leftIcon={<IconTrash size={12}/>}
-              compact
-              mb={"xl"}
-              radius={50}
-              bg={"red.7"}
-              color="yellow"
-              onClick={() => toggle()}
-            >
-              Hapus Project
-            </Button>
-          </Center>
-        </Grid.Col>
-      </Grid>
-
-      <Paper withBorder mb={"md"}>
-        <AspectRatio ratio={16 / 9}>
-          <Image
-            alt=""
-            src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
-          />
-        </AspectRatio>
-      </Paper>
-
-      {/* Title dan Persentase */}
-      <Box mb={"md"}>
-        <Title order={4} mb={"xs"}>
-          {investasi.title}
-        </Title>
-      </Box>
-
-      {/* Rincian Data */}
-      <Grid p={"md"} mb={"md"}>
-        <Grid.Col span={6}>
-          <Stack>
-            <Box>
-              <Text>Dana Dibutuhkan</Text>
-              <Text>Rp. {new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 10,
-                  }).format(+investasi.targetDana)}</Text>
-            </Box>
-            <Box>
-              <Text>Harga Per Lembar</Text>
-              <Text>Rp. {new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 10,
-                  }).format(+investasi.hargaLembar)}</Text>
-            </Box>
-            <Box>
-              <Text>Jadwal Pembagian</Text>
-              <Text>{investasi.MasterPembagianDeviden.name} Bulan </Text>
-            </Box>
-            <Box>
-              <Text>Pencarian Investor</Text>
-              <Text>{investasi.MasterPencarianInvestor.name} Hari </Text>
-            </Box>
-          </Stack>
-        </Grid.Col>
-        <Grid.Col span={6}>
-          <Stack>
-            <Box>
-              <Text>ROI</Text>
-              <Text>{investasi.roi} %</Text>
-            </Box>
-            <Box>
-              <Text>Total Lembar</Text>
-              <Text>{new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 10,
-                  }).format(+investasi.totalLembar)} lembar</Text>
-            </Box>
-            <Box>
-              <Text>Pembagian Deviden</Text>
-              <Text>{investasi.MasterPeriodeDeviden.name}</Text>
-            </Box>
-          </Stack>
-        </Grid.Col>
-      </Grid>
-
-      {/* List Box */}
-      <Grid mb={"md"}>
-        {listBox.map((e) => (
-          <Grid.Col
-            span={"auto"}
-            key={e.id}
-            onClick={() => router.push(e.route + `${investasi.id}`)}
-          >
-           <Center>
-           <Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
-              <Flex direction={"column"} align={"center"} justify={"center"}>
-                <Text fz={12}>{e.name}</Text>
-                <ActionIcon variant="transparent" size={60}>
-                  {e.icon}
-                </ActionIcon>
-              </Flex>
-            </Paper>
-           </Center>
-          </Grid.Col>
-        ))}
-      </Grid>
-    </>
-  );
-}

src/app_modules/investasi/detail_portofolio/review/index.tsx

@@ -34,6 +34,8 @@ import { useState } from "react";
 import _ from "lodash";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentInvestasi_DetailDataNonPublish } from "../../component/detail/detai_data_non_publish";
 
 export default function DetailReviewInvestasi({
   dataInvestasi,
@@ -44,7 +46,7 @@ export default function DetailReviewInvestasi({
   const [isLoading, setLoading] = useState(false);
 
   const [activeTab, setActiveTab] = useAtom(gs_StatusPortoInvestasi);
-  const [investasi, setInvestasi] = useState<MODEL_Investasi>(dataInvestasi);
+  const [data, setData] = useState<MODEL_Investasi>(dataInvestasi);
 
   const listBox = [
     {
@@ -68,131 +70,37 @@ export default function DetailReviewInvestasi({
   ];
 
   async function onsubmit() {
-    await funGantiStatusInvestasi(investasi.id, "1")
-      .then((val) => {
-        if (val.status === 200) {
-          ComponentGlobal_NotifikasiBerhasil("Review Dibatalkan");
-          router.push(RouterInvestasi.portofolio);
-          setActiveTab("Draft");
-        } else {
-          ComponentGlobal_NotifikasiPeringatan("Error");
-        }
-      });
+    await funGantiStatusInvestasi(data.id, "1").then((val) => {
+      if (val.status === 200) {
+        ComponentGlobal_NotifikasiBerhasil("Review Dibatalkan");
+        router.push(RouterInvestasi.portofolio);
+        setActiveTab("Draft");
+      } else {
+        ComponentGlobal_NotifikasiPeringatan("Error");
+      }
+    });
   }
 
   return (
     <>
-      <Stack>
-        <Paper withBorder>
-          <AspectRatio ratio={16 / 9}>
-            <Image
-              alt=""
-              src={RouterInvestasi.api_gambar + `${investasi.imagesId}`}
-            />
-          </AspectRatio>
-        </Paper>
-
-        {/* Title dan Persentase */}
-        <Center>
-          <Title order={4}>{_.capitalize(investasi.title)}</Title>
-        </Center>
-
-        {/* Rincian Data */}
-        <Grid p={"md"}>
-          <Grid.Col span={6}>
-            <Stack>
-              <Box>
-                <Text>Dana Dibutuhkan</Text>
-                <Text>
-                  Rp.{" "}
-                  {new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 20,
-                  }).format(+investasi.targetDana)}
-                </Text>
-              </Box>
-              <Box>
-                <Text>Harga Per Lembar</Text>
-                <Text>
-                  Rp.{" "}
-                  {new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 10,
-                  }).format(+investasi.hargaLembar)}
-                </Text>
-              </Box>
-              <Box>
-                <Text>Jadwal Pembagian</Text>
-                <Text>{investasi.MasterPembagianDeviden.name} Bulan </Text>
-              </Box>
-              <Box>
-                <Text>Pencarian Investor</Text>
-                <Text>{investasi.MasterPencarianInvestor.name} Hari </Text>
-              </Box>
-            </Stack>
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <Stack>
-              <Box>
-                <Text>ROI</Text>
-                <Text>{investasi.roi} %</Text>
-              </Box>
-              <Box>
-                <Text>Total Lembar</Text>
-                <Text>
-                  {new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 10,
-                  }).format(+investasi.totalLembar)}{" "}
-                  lembar
-                </Text>
-              </Box>
-              <Box>
-                <Text>Pembagian Deviden</Text>
-                <Text>{investasi.MasterPeriodeDeviden.name}</Text>
-              </Box>
-            </Stack>
-          </Grid.Col>
-        </Grid>
-
-        {/* List Box */}
-        <Grid>
-          {listBox.map((e) => (
-            <Grid.Col
-              span={"auto"}
-              key={e.id}
-              onClick={() => router.push(e.route + `${investasi.id}`)}
-            >
-              <Center>
-                <Paper h={100} w={100} bg={"gray.4"} withBorder py={"xs"}>
-                  <Flex
-                    direction={"column"}
-                    align={"center"}
-                    justify={"center"}
-                  >
-                    <Text fz={12}>{e.name}</Text>
-                    <ActionIcon variant="transparent" size={60}>
-                      {e.icon}
-                    </ActionIcon>
-                  </Flex>
-                </Paper>
-              </Center>
-            </Grid.Col>
-          ))}
-        </Grid>
-
+      <Stack spacing={"xl"} mb={"lg"}>
+        <ComponentInvestasi_DetailDataNonPublish data={data} />
         {/* Tombol Ajukan */}
-        <Button
-          style={{
-            transition: "0.5s",
-          }}
-          loaderPosition="center"
-          loading={isLoading ? true : false}
-          my={"xl"}
-          radius={50}
-          bg={"orange"}
-          color="yellow"
-          onClick={() => onsubmit()}
-        >
-          Batalkan Review
-        </Button>
+        <Stack>
+          <Button
+            style={{
+              transition: "0.5s",
+            }}
+            loaderPosition="center"
+            loading={isLoading ? true : false}
+            radius={50}
+            bg={"orange"}
+            color="yellow"
+            onClick={() => onsubmit()}
+          >
+            Batalkan Review
+          </Button>
+        </Stack>
       </Stack>
     </>
   );

src/app_modules/investasi/detail_portofolio/review/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,11 +14,11 @@ export default function LayoutDetailReviewInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentGlobal_HeaderTamplate title="Detail Review" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Review" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/detail_prospektus/layout.tsx

@@ -1,12 +1,8 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
-import { IconArrowLeft } from "@tabler/icons-react";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import { useRouter } from "next/navigation";
-import router from "next/router";
-import { title } from "process";
 import React from "react";
 
 export default function LayoutDetailProspektus({
@@ -17,11 +13,11 @@ export default function LayoutDetailProspektus({
   const router = useRouter();
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentGlobal_HeaderTamplate title="Prospektus" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Prospektus" />}
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/detail_prospektus/view.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { Paper, Grid, Center, Text, Title } from "@mantine/core";
+import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { Center, Group, Paper, Text, Title } from "@mantine/core";
 import { IconChevronRight } from "@tabler/icons-react";
 import Link from "next/link";
-import {
-  MODEL_Investasi,
-  Model_Prospektus_Investasi,
-} from "../model/model_investasi";
 import { useState } from "react";
-import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import {
+  MODEL_Investasi
+} from "../model/model_investasi";
 
 export default function DetailPropektus({
   dataInvestasi,
@@ -21,21 +21,28 @@ export default function DetailPropektus({
     <>
       {prospek.ProspektusInvestasi !== null ? (
         <Link
-          href={RouterInvestasi.api_file_prospektus + `${prospek.ProspektusInvestasi.id}`}
+          href={
+            RouterInvestasi.api_file_prospektus +
+            `${prospek.ProspektusInvestasi.id}`
+          }
           target="_blank"
           style={{ textDecorationLine: "none" }}
         >
-          <Paper w={"100%"} bg={"gray"} mb={"md"}>
-            <Grid align="center" justify="center" px={"sm"}>
-              <Grid.Col span={10}>
-                <Text>Prospektus_{prospek.title}</Text>
-              </Grid.Col>
-              <Grid.Col span={2}>
-                <Center>
-                  <IconChevronRight />
-                </Center>
-              </Grid.Col>
-            </Grid>
+          <Paper
+            style={{
+              padding:"15px",
+              backgroundColor: AccentColor.darkblue,
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px",
+              color: "white",
+            }}
+          >
+            <Group position="apart">
+              <Text w={"80%"} lineClamp={1}>Prospektus_{prospek.title}</Text>
+              <Center>
+                <IconChevronRight />
+              </Center>
+            </Group>
           </Paper>
         </Link>
       ) : (

src/app_modules/investasi/edit_dokumen/layout.tsx

@@ -3,6 +3,8 @@
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 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 { IconEdit } from "@tabler/icons-react";
 import React from "react";
@@ -16,17 +18,17 @@ export default function LayoutEditDokumenInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Edit Dokumen"
-            icon={<IconEdit />}
-            route2={RouterInvestasi.upload_dokumen + `${idInves}`}
+            iconRight={<IconEdit />}
+            routerRight={RouterInvestasi.upload_dokumen + `${idInves}`}
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/edit_dokumen/view.tsx

@@ -1,31 +1,25 @@
 "use client";
 
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import {
-  Paper,
-  Grid,
-  Center,
-  Title,
-  Divider,
-  Button,
-  Text,
   ActionIcon,
   Group,
-  Modal,
+  Paper,
+  Text
 } from "@mantine/core";
 import {
-  IconChevronRight,
   IconTrash,
-  IconWorldShare,
+  IconWorldShare
 } from "@tabler/icons-react";
+import _ from "lodash";
 import Link from "next/link";
 import { useState } from "react";
-import { MODEL_Investasi } from "../model/model_investasi";
-import _ from "lodash";
 import funDeleteDokumenInvestasi from "../fun/fun_delete_dokumen";
-import toast from "react-simple-toasts";
 import funLoadDataInvestasi from "../fun/fun_load_data";
-import { useDisclosure } from "@mantine/hooks";
-import { Warna } from "@/app/lib/warna";
+import { MODEL_Investasi } from "../model/model_investasi";
 
 export default function EditDokumenInvestasi({
   dataInvestasi,
@@ -37,12 +31,12 @@ export default function EditDokumenInvestasi({
   async function onDelete(id: string) {
     await funDeleteDokumenInvestasi(id).then(async (res) => {
       if (res.status === 200) {
-        toast(res.message);
+        ComponentGlobal_NotifikasiBerhasil(res.message);
 
         const load = await funLoadDataInvestasi(dokumen.id);
         setDokumen(load as any);
       } else {
-        toast(res.message);
+        ComponentGlobal_NotifikasiGagal(res.message);
       }
     });
   }
@@ -51,45 +45,42 @@ export default function EditDokumenInvestasi({
     <>
       {!_.isEmpty(dokumen.DokumenInvestasi) ? (
         dokumen.DokumenInvestasi.map((e) => (
-          <Paper key={e.id} w={"100%"} h={50} bg={"gray"} mb={"md"}>
-            <Grid
-              align="center"
-              justify="center"
-              h={50}
-              px={"sm"}
-              onClick={() => ""}
-            >
-              <Grid.Col span={8}>
-                <Text>{e.title}</Text>
-              </Grid.Col>
-
-              <Grid.Col span={4}>
-                <Group position="center">
-                  <Link href={`/file/${e.url}`} target="_blank">
-                    <ActionIcon variant="transparent">
-                      <IconWorldShare color="green" />
-                    </ActionIcon>
-                  </Link>
-                  <ActionIcon
-                    variant="transparent"
-                    onClick={() => {
-                      onDelete(e.id);
-                    }}
-                  >
-                    <IconTrash color="red" />
+          <Paper
+            key={e.id}
+            style={{
+              padding: "15px",
+              backgroundColor: AccentColor.darkblue,
+              border: `2px solid ${AccentColor.blue}`,
+              borderRadius: "10px",
+              color: "white",
+              marginBottom: "15px",
+            }}
+          >
+            <Group position="apart">
+              <Text lineClamp={1}>{e.title}</Text>
+              <Group position="center">
+                <Link href={`/file/${e.url}`} target="_blank">
+                  <ActionIcon variant="transparent">
+                    <IconWorldShare color="green" />
                   </ActionIcon>
-                </Group>
-              </Grid.Col>
-            </Grid>
+                </Link>
+                <ActionIcon
+                  variant="transparent"
+                  onClick={() => {
+                    onDelete(e.id);
+                  }}
+                >
+                  <IconTrash color="red" />
+                </ActionIcon>
+              </Group>
+            </Group>
           </Paper>
         ))
       ) : (
-        <Center>
-          <Title order={5}>Tidak ada file</Title>
-        </Center>
+        <ComponentGlobal_IsEmptyData />
       )}
 
-      <Divider mt={"lg"} />
+      {/* <Divider mt={"lg"} /> */}
     </>
   );
 }

src/app_modules/investasi/edit_intro/layout.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { AppShell, Stack, Text } from "@mantine/core";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Stack } from "@mantine/core";
 import React from "react";
 
 export default function LayoutEditIntroInvestasi({
@@ -12,11 +12,11 @@ export default function LayoutEditIntroInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentGlobal_HeaderTamplate title="Edit Intro" />}
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Intro" />}
       >
         <Stack>{children}</Stack>
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/edit_intro/view.tsx

@@ -15,7 +15,7 @@ import {
   Select,
   Stack,
   Text,
-  TextInput
+  TextInput,
 } from "@mantine/core";
 import { IconUpload } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -33,6 +33,13 @@ import { useState } from "react";
 import toast from "react-simple-toasts";
 import funEditInvestasi from "../fun/fun_edit_investasi";
 import { MODEL_Investasi } from "../model/model_investasi";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+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 EditIntroInvestasi({
   dataInvestasi,
@@ -70,32 +77,67 @@ export default function EditIntroInvestasi({
 
     await funEditInvestasi(fd, body).then(async (res) => {
       res.status === 200
-        ? (toast(res.message), router.back())
-        : toast(res.message);
+        ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
+        : ComponentGlobal_NotifikasiGagal(res.message);
     });
   }
 
   return (
     <>
-      <Modal
+      <UIGlobal_Modal
+        title={"Anda yakin ingin menyimpan perubahan ini?"}
         opened={opened}
-        onClose={close}
-        centered
-        title="Simpan perubahan data ?"
-        withCloseButton={false}
-      >
-        <Group position="center">
-          <Button onClick={close} bg={"red"} color="red">
+        close={close}
+        buttonKiri={
+          <Button radius={"xl"} onClick={close} bg={"red"} color="red">
             Batal
           </Button>
-          <Button onClick={onUpdate} bg={Warna.hijau_muda} color="green">
+        }
+        buttonKanan={
+          <Button
+            radius={"xl"}
+            onClick={onUpdate}
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
+          >
             Simpan
           </Button>
-        </Group>
-      </Modal>
+        }
+      />
 
       <Stack spacing={"xs"} px={"md"}>
-        <AspectRatio ratio={16 / 9}>
+        {img ? (
+          <Center>
+            <Paper h={300} w={200} withBorder shadow="lg" bg={"gray.1"}>
+              <Stack justify="center" align="center" h={"100%"}>
+                <IconUpload color="gray" />
+                <Text fz={10} fs={"italic"} c={"gray"} fw={"bold"}>
+                  Upload Gambar
+                </Text>
+              </Stack>
+            </Paper>
+          </Center>
+        ) : (
+          <AspectRatio ratio={1 / 1} mah={300}>
+            <Paper
+              style={{
+                border: `2px solid ${AccentColor.softblue}`,
+                backgroundColor: AccentColor.blue,
+                padding: "10px",
+                borderRadius: "10px",
+              }}
+            >
+              <Image
+                alt="Foto"
+                src={RouterInvestasi.api_gambar + `${edit_inves.imagesId}`}
+                maw={200}
+              />
+            </Paper>
+          </AspectRatio>
+        )}
+
+        {/* <AspectRatio ratio={16 / 9}>
           <Paper withBorder radius={"md"}>
             {img ? (
               <Image alt="" src={img} />
@@ -106,7 +148,8 @@ export default function EditIntroInvestasi({
               />
             )}
           </Paper>
-        </AspectRatio>
+        </AspectRatio> */}
+
         <Group position="center" mb={"md"}>
           <FileButton
             onChange={async (files: any) => {
@@ -132,9 +175,9 @@ export default function EditIntroInvestasi({
                 {...props}
                 radius={50}
                 leftIcon={<IconUpload size={12} />}
-                compact
-                bg={Warna.hijau_muda}
-                color="green"
+                bg={MainColor.yellow}
+                color="yellow"
+                c={"black"}
               >
                 Upload Gambar
               </Button>
@@ -143,6 +186,11 @@ export default function EditIntroInvestasi({
         </Group>
 
         <TextInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Judul Proyek"
           placeholder={"Masukan Judul"}
           value={edit_inves.title}
@@ -163,6 +211,11 @@ export default function EditIntroInvestasi({
         />
 
         <NumberInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Dana Dibutuhan"
           type="number"
           value={+edit_inves.targetDana}
@@ -175,6 +228,11 @@ export default function EditIntroInvestasi({
         />
 
         <NumberInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Harga Per Lember"
           type="number"
           value={+edit_inves.hargaLembar}
@@ -188,7 +246,12 @@ export default function EditIntroInvestasi({
         />
 
         {/* Total Lembar */}
-        <Stack spacing={3}>
+        <Stack
+          spacing={3}
+          style={{
+            color: "white",
+          }}
+        >
           <Text fz={"sm"} fw={500}>
             Total Lembar
           </Text>
@@ -196,12 +259,17 @@ export default function EditIntroInvestasi({
             <Text>{totalLembar}</Text>
             <Divider />
           </Stack>
-          <Text c={"blue"} fz={10}>
+          <Text fz={10}>
             *Total lembar dihitung dari, Target Dana : Harga Perlembar
           </Text>
         </Stack>
 
         <NumberInput
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Rasio Keuntungan / ROI"
           type="number"
           value={+edit_inves.roi}
@@ -215,6 +283,11 @@ export default function EditIntroInvestasi({
 
         {/* Select Start */}
         <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Pencarian Investor"
           data={listPencarian.map((e) => ({
             value: e.id,
@@ -231,6 +304,11 @@ export default function EditIntroInvestasi({
           }}
         />
         <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Periode Deviden"
           data={listPeriode.map((e) => ({
             value: e.id,
@@ -247,6 +325,11 @@ export default function EditIntroInvestasi({
           }}
         />
         <Select
+          styles={{
+            label: {
+              color: "white",
+            },
+          }}
           label="Pembagian Deviden"
           data={listPembagian.map((e) => ({
             value: e.id,
@@ -263,21 +346,19 @@ export default function EditIntroInvestasi({
           }}
         />
         {/* Select End */}
-
-        <Center my={"lg"}>
-          <Button
-            w={200}
-            radius={50}
-            bg={Warna.hijau_muda}
-            color="green"
-            onClick={() => {
-              scrollTo({ y: 0 });
-              open();
-            }}
-          >
-            Update
-          </Button>
-        </Center>
+        <Button
+          my={"xl"}
+          radius={50}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
+          onClick={() => {
+            scrollTo({ y: 0 });
+            open();
+          }}
+        >
+          Update
+        </Button>
       </Stack>
     </>
   );

src/app_modules/investasi/edit_propektus/layout.tsx

@@ -1,13 +1,9 @@
 "use client";
 
-import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/_global/header_tamplate";
-import { AppShell } from "@mantine/core";
-import { IconEdit } from "@tabler/icons-react";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 import React from "react";
-import getOneInvestasiById from "../fun/get_one_investasi_by_id";
 import { MODEL_Investasi } from "../model/model_investasi";
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
 
 export default function LayoutEditProspektusInvestasi({
   children,
@@ -18,17 +14,17 @@ export default function LayoutEditProspektusInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="Edit Prospektus"
-            icon={<IconEdit />}
-            route2={RouterInvestasi.upload_prospektus + `${dataInvestasi.id}`}
+            // icon={<IconEdit />}
+            // route2={RouterInvestasi.upload_prospektus + `${dataInvestasi.id}`}
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/fun/get_one_investasi_by_id.ts

@@ -6,6 +6,8 @@ export default async function getOneInvestasiById(id: string) {
   const data = await prisma.investasi.findUnique({
     where: {
       id: id,
+      
+
     },
     select: {
       id: true,

src/app_modules/investasi/g_state/index.ts

@@ -14,4 +14,7 @@ export const gs_TransferValue = atomWithStorage("gs_TransferValue", {
   nomorRekening: "",
 });
 
-export const gs_midtrans_snap= atomWithStorage("gs_midtrans_snapssssssssss", false)
+export const gs_midtrans_snap = atomWithStorage(
+  "gs_midtrans_snapssssssssss",
+  false
+);

src/app_modules/investasi/index.ts

@@ -47,13 +47,13 @@ import LayoutCreateBeritaInvestasi from "./create_berita/layout";
 import ListEditBeritaInvestasi from "./list_edit_berita/view";
 import LayoutListEditBeritaInvestasi from "./list_edit_berita/layout";
 import InvestasiSahamTerbeli from "./saham_saya/saham_saya";
-import DetailDraftInvestasi from "./detail_portofolio/draft/page";
+import DetailDraftInvestasi from "./detail_portofolio/draft";
 import LayoutDetailDraftInvestasi from "./detail_portofolio/draft/layout";
 import DetailReviewInvestasi from "./detail_portofolio/review";
 import LayoutDetailReviewInvestasi from "./detail_portofolio/review/layout";
-import DetailPublishInvestasi from "./detail_portofolio/publish/page";
+import DetailPublishInvestasi from "./detail_portofolio/publish";
 import LayoutDetailPublishInvestasi from "./detail_portofolio/publish/layout";
-import DetailRejectInvestasi from "./detail_portofolio/reject/page";
+import DetailRejectInvestasi from "./detail_portofolio/reject";
 import LayoutDetailRejectInvestasi from "./detail_portofolio/reject/layout";
 import TransaksiInvestasi from "./transaksi/view";
 import LayoutTransaksiInvestasi from "./transaksi/layout";

src/app_modules/investasi/list_edit_berita/layout.tsx

@@ -7,6 +7,8 @@ import { IconPencilPlus } from "@tabler/icons-react";
 import React from "react";
 import getOneInvestasiById from "../fun/get_one_investasi_by_id";
 import AppComponentGlobal_LayoutTamplate from "@/app_modules/_global/component_layout_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 
 export default function LayoutListEditBeritaInvestasi({
   children,
@@ -17,17 +19,17 @@ export default function LayoutListEditBeritaInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate
+      <UIGlobal_LayoutTamplate
         header={
-          <ComponentGlobal_HeaderTamplate
+          <UIGlobal_LayoutHeaderTamplate
             title="List Berita"
-            icon={<IconPencilPlus />}
-            route2={RouterInvestasi.create_berita + `${idInves}`}
+            iconRight={<IconPencilPlus />}
+            routerRight={RouterInvestasi.create_berita + `${idInves}`}
           />
         }
       >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/list_edit_berita/view.tsx

@@ -28,6 +28,7 @@ import getOneInvestasiById from "../fun/get_one_investasi_by_id";
 import funLoadDataInvestasi from "../fun/fun_load_data";
 import funDeleteBeritaInvestasi from "../fun/fun_delete_berita";
 import { useShallowEffect } from "@mantine/hooks";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 
 export default function ListEditBeritaInvestasi({
   dataInvestasi,
@@ -40,87 +41,80 @@ export default function ListEditBeritaInvestasi({
   async function onDelete(idBerita: string) {
     await funDeleteBeritaInvestasi(idBerita).then(async (res) => {
       if (res.status === 200) {
-        const load = await funLoadDataInvestasi(investasi.id)
+        const load = await funLoadDataInvestasi(investasi.id);
         toast(res.message);
-        return setInvestasi(load as any)
+        return setInvestasi(load as any);
       } else {
         toast(res.message);
       }
     });
   }
 
-  if (!investasi) return <>data kosong</>;
   return (
     <>
-      <Box>
-        {_.isEmpty(investasi.BeritaInvestasi) ? (
-          <Box>
-            <Center>
-              <Title order={6}>Berita Kosong</Title>
-            </Center>
-          </Box>
-        ) : (
-          ""
-        )}
-      </Box>
-      {investasi.BeritaInvestasi.map((v, k) => (
-        <Paper key={k} w={"100%"} bg={"gray"} p={"sm"} mb={"md"}>
-          <Stack spacing={"xs"}>
-            <Group position="apart">
-              <Box>
-                <Title order={6}>{v.title}</Title>
-                <Text fz={10}>{moment(v.createdAt).local().format("lll")}</Text>
-              </Box>
-              <Menu position="left">
-                <Menu.Target>
-                  <ActionIcon variant="transparent">
-                    <IconDots color="black" />
-                  </ActionIcon>
-                </Menu.Target>
-                <Menu.Dropdown>
-                  <Menu.Item
-                    onClick={() =>
-                      router.push(RouterInvestasi.edit_berita + `${v.id}`)
-                    }
+      {_.isEmpty(investasi.BeritaInvestasi) ? (
+        <ComponentGlobal_IsEmptyData />
+      ) : (
+        investasi.BeritaInvestasi.map((v, k) => (
+          <Paper key={k} w={"100%"} bg={"gray"} p={"sm"} mb={"md"}>
+            <Stack spacing={"xs"}>
+              <Group position="apart">
+                <Box>
+                  <Title order={6}>{v.title}</Title>
+                  <Text fz={10}>
+                    {moment(v.createdAt).local().format("lll")}
+                  </Text>
+                </Box>
+                <Menu position="left">
+                  <Menu.Target>
+                    <ActionIcon variant="transparent">
+                      <IconDots color="black" />
+                    </ActionIcon>
+                  </Menu.Target>
+                  <Menu.Dropdown>
+                    <Menu.Item
+                      onClick={() =>
+                        router.push(RouterInvestasi.edit_berita + `${v.id}`)
+                      }
+                    >
+                      Edit
+                    </Menu.Item>
+                    <Menu.Item
+                      onClick={() => {
+                        onDelete(v.id);
+                      }}
+                    >
+                      Hapus
+                    </Menu.Item>
+                  </Menu.Dropdown>
+                </Menu>
+              </Group>
+              <Grid pt={5}>
+                <Grid.Col span={8}>
+                  <Spoiler
+                    fz={"xs"}
+                    maxHeight={55}
+                    showLabel="Selengkapnya"
+                    hideLabel="Sembunyikan"
                   >
-                    Edit
-                  </Menu.Item>
-                  <Menu.Item
-                    onClick={() => {
-                      onDelete(v.id);
-                    }}
-                  >
-                    Hapus
-                  </Menu.Item>
-                </Menu.Dropdown>
-              </Menu>
-            </Group>
-            <Grid pt={5}>
-              <Grid.Col span={8}>
-                <Spoiler
-                  fz={"xs"}
-                  maxHeight={55}
-                  showLabel="Selengkapnya"
-                  hideLabel="Sembunyikan"
-                >
-                  {v.deskripsi}
-                </Spoiler>
-              </Grid.Col>
-              <Grid.Col span={4}>
-                <AspectRatio ratio={16 / 9} h={50} w={100}>
-                  <Paper radius={10}>
-                    <Image
-                      alt=""
-                      src={RouterInvestasi.api_gambar + `${v.imagesId}`}
-                    />
-                  </Paper>
-                </AspectRatio>
-              </Grid.Col>
-            </Grid>
-          </Stack>
-        </Paper>
-      ))}
-      <Divider my={"lg"} />
+                    {v.deskripsi}
+                  </Spoiler>
+                </Grid.Col>
+                <Grid.Col span={4}>
+                  <AspectRatio ratio={16 / 9} h={50} w={100}>
+                    <Paper radius={10}>
+                      <Image
+                        alt=""
+                        src={RouterInvestasi.api_gambar + `${v.imagesId}`}
+                      />
+                    </Paper>
+                  </AspectRatio>
+                </Grid.Col>
+              </Grid>
+            </Stack>
+          </Paper>
+        ))
+      )}
     </>
   );
 }

src/app_modules/investasi/portofolio/draft.tsx

@@ -22,6 +22,7 @@ import _ from "lodash";
 import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { ComponentInvestasi_CardStatus } from "../component/detail/card_status";
 
 export default function Draft({ data }: { data: MODEL_Investasi[] }) {
   const router = useRouter();
@@ -38,44 +39,14 @@ export default function Draft({ data }: { data: MODEL_Investasi[] }) {
     <>
       {/* <pre> {JSON.stringify(data,null, 2)}</pre> */}
       {data.map((e) => (
-        <Paper
-          key={e.id}
-          onClick={() => router.push(RouterInvestasi.detail_draft + `${e.id}`)}
-          style={{
-            padding: "15px",
-            backgroundColor: AccentColor.darkblue,
-            borderRadius: "10px",
-            border: `2px solid ${AccentColor.blue}`,
-            color: "white",
-            marginBottom: "15px",
-          }}
-        >
-          <Grid>
-            <Grid.Col span={8}>
-              <Text fw={"bold"}> {_.capitalize(e.title)}</Text>
-              <Stack spacing={0}>
-                <Text fz={10}>Target Dana:</Text>
-                <Text>
-                  Rp.{" "}
-                  {new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 10,
-                  }).format(+e.targetDana)}
-                </Text>
-              </Stack>
-            </Grid.Col>
+         <Box key={e.id}>
+          <ComponentInvestasi_CardStatus
+            data={e}
+            path={RouterInvestasi.detail_draft}
+          />
+        </Box>
 
-            <Grid.Col span={4}>
-              <AspectRatio ratio={16 / 9}>
-                <Paper radius={"md"}>
-                  <Image
-                    alt=""
-                    src={RouterInvestasi.api_gambar + `${e.imagesId}`}
-                  />
-                </Paper>
-              </AspectRatio>
-            </Grid.Col>
-          </Grid>
-        </Paper>
+       
       ))}
     </>
   );

src/app_modules/investasi/portofolio/publish.tsx

@@ -24,12 +24,7 @@ export default function Publish({ data }: { data: MODEL_Investasi[] }) {
   const router = useRouter();
   const [sisaWaktu, setSisaWaktu] = useState();
 
-  if (_.isEmpty(data))
-    return (
-      <>
-        <ComponentGlobal_IsEmptyData />
-      </>
-    );
+  if (_.isEmpty(data)) return <ComponentGlobal_IsEmptyData />;
 
   return (
     <>

src/app_modules/investasi/portofolio/reject.tsx

@@ -1,28 +1,19 @@
 import { RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
 import {
-  Card,
-  CardSection,
   AspectRatio,
   Box,
-  Title,
-  Divider,
-  Group,
-  Badge,
-  Image,
-  Text,
-  Center,
   Grid,
-  Stack,
+  Image,
   Paper,
+  Stack,
+  Text,
 } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import {
-  MODEL_Investasi,
-  MODEL_Status_investasi,
-} from "../model/model_investasi";
-import { useState } from "react";
 import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
+import { MODEL_Investasi } from "../model/model_investasi";
+import { ComponentInvestasi_CardStatus } from "../component/detail/card_status";
 
 export default function Reject({ data }: { data: MODEL_Investasi[] }) {
   const [investasi, setInvestasi] = useState(data);
@@ -37,40 +28,13 @@ export default function Reject({ data }: { data: MODEL_Investasi[] }) {
 
   return (
     <>
-
       {investasi.map((e) => (
-        <Paper
-          key={e.id}
-          withBorder
-          mb={"md"}
-          p={"xs"}
-          onClick={() => router.push(RouterInvestasi.detail_reject + `${e.id}`)}
-        >
-          <Grid>
-            <Grid.Col span={8}>
-              <Text fw={"bold"}> {_.capitalize(e.title)}</Text>
-              <Stack spacing={0}>
-                <Text fz={10}>Target Dana:</Text>
-              <Text>
-                Rp. {new Intl.NumberFormat("id-ID", {
-                  maximumSignificantDigits: 10,
-                }).format(+e.targetDana)}
-              </Text>
-              </Stack>
-            </Grid.Col>
-
-            <Grid.Col span={4}>
-              <AspectRatio ratio={16 / 9}>
-                <Paper radius={"md"}>
-                  <Image
-                    alt=""
-                    src={RouterInvestasi.api_gambar + `${e.imagesId}`}
-                  />
-                </Paper>
-              </AspectRatio>
-            </Grid.Col>
-          </Grid>
-        </Paper>
+        <Box key={e.id}>
+          <ComponentInvestasi_CardStatus
+            data={e}
+            path={RouterInvestasi.detail_reject}
+          />
+        </Box>
       ))}
     </>
   );

src/app_modules/investasi/portofolio/review.tsx

@@ -22,6 +22,7 @@ import {
 } from "../model/model_investasi";
 import _ from "lodash";
 import ComponentInvestasi_IsEmptyData from "../component/is_empty_data";
+import { ComponentInvestasi_CardStatus } from "../component/detail/card_status";
 
 export default function Review({ data }: { data: MODEL_Investasi[] }) {
   const router = useRouter();
@@ -35,40 +36,12 @@ export default function Review({ data }: { data: MODEL_Investasi[] }) {
   return (
     <>
       {data.map((e) => (
-        <Paper
-          // sx={{ borderStyle: "solid", borderColor: "orange", borderWidth: "1px" }}
-          key={e.id}
-          mb={"md"}
-          p={"xs"}
-          withBorder
-          onClick={() => router.push(RouterInvestasi.detail_review + `${e.id}`)}
-        >
-          <Grid>
-            <Grid.Col span={8}>
-              <Text fw={"bold"}> {_.capitalize(e.title)}</Text>
-              <Stack spacing={0}>
-                <Text fz={10}>Target Dana:</Text>
-                <Text>
-                  Rp.{" "}
-                  {new Intl.NumberFormat("id-ID", {
-                    maximumSignificantDigits: 10,
-                  }).format(+e.targetDana)}
-                </Text>
-              </Stack>
-            </Grid.Col>
-
-            <Grid.Col span={4}>
-              <AspectRatio ratio={16 / 9}>
-                <Paper radius={"md"}>
-                  <Image
-                    alt=""
-                    src={RouterInvestasi.api_gambar + `${e.imagesId}`}
-                  />
-                </Paper>
-              </AspectRatio>
-            </Grid.Col>
-          </Grid>
-        </Paper>
+        <Box key={e.id}>
+          <ComponentInvestasi_CardStatus
+            data={e}
+            path={RouterInvestasi.detail_review}
+          />
+        </Box>
       ))}
     </>
   );

src/app_modules/investasi/portofolio/view.tsx

@@ -1,23 +1,21 @@
 "use client";
 
-import {
-  Stack,
-  Tabs
-} from "@mantine/core";
+import { Stack, Tabs } from "@mantine/core";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import { useAtom } from "jotai";
 import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 import { gs_StatusPortoInvestasi } from "../g_state";
-import {
-  MODEL_Status_investasi
-} from "../model/model_investasi";
+import { MODEL_Status_investasi } from "../model/model_investasi";
 import Draft from "./draft";
 import Publish from "./publish";
 import Reject from "./reject";
 import Review from "./review";
-import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 
 export default function PortofolioInvestasi({
   listStatusInvestasi,
@@ -79,16 +77,16 @@ export default function PortofolioInvestasi({
             ))}
           </Tabs.List>
 
-          <Tabs.Panel key={"1"} value="Draft">
+          <Tabs.Panel value="Draft">
             <Draft data={dataDraft as any} />
           </Tabs.Panel>
-          <Tabs.Panel key={"2"} value="Review">
+          <Tabs.Panel value="Review">
             <Review data={dataReview as any} />
           </Tabs.Panel>
-          <Tabs.Panel key={"3"} value="Publish">
+          <Tabs.Panel value="Publish">
             <Publish data={dataPublish as any} />
           </Tabs.Panel>
-          <Tabs.Panel key={"4"} value="Reject">
+          <Tabs.Panel value="Reject">
             <Reject data={dataReject as any} />
           </Tabs.Panel>
         </Stack>

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>
     </>
   );

src/app_modules/investasi/upload_prospektus/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 LayoutUploadProspektusInvestasi({
 }) {
   return (
     <>
-      <AppComponentGlobal_LayoutTamplate header={<ComponentGlobal_HeaderTamplate title="Upload Prospektus" />}>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Upload Prospektus" />}
+      >
         {children}
-      </AppComponentGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate>
     </>
   );
 }

src/app_modules/investasi/upload_prospektus/view.tsx

@@ -17,6 +17,10 @@ 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 {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 
 export default function UploadProspektusInvestasi({
   idInves,
@@ -37,7 +41,6 @@ export default function UploadProspektusInvestasi({
       if (res.status === 201) {
         toast("Berhasil upload");
         router.back();
-       
       } else {
         toast(res.message);
       }
@@ -46,7 +49,7 @@ export default function UploadProspektusInvestasi({
 
   return (
     <>
-      <Stack>
+      <Stack px={"md"}>
         <Group position="center" px={"md"}>
           <FileButton
             onChange={async (file: any) => {
@@ -62,8 +65,9 @@ export default function UploadProspektusInvestasi({
             {(props) => (
               <Button
                 {...props}
-                bg={Warna.hijau_muda}
-                color="green"
+                bg={MainColor.yellow}
+                color="yellow"
+                c={"black"}
                 radius={50}
               >
                 Upload File
@@ -74,29 +78,51 @@ export default function UploadProspektusInvestasi({
 
         <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>
             </Paper>
           )}
         </Box>
-        <Center>
+        <Stack>
           <Button
-            w={300}
             radius={50}
-            bg={Warna.biru}
+            bg={MainColor.yellow}
+            color="yellow"
+            c={"black"}
             onClick={() => onUpload()}
           >
             Simpan
           </Button>
-        </Center>
+        </Stack>
       </Stack>
     </>
   );