# style:

- UI Investasi
- UI Donasi
## No issue

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