From b1573af1b8c5e89ed0a2b3fe1834f99a6b8cba24 Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Sun, 5 Jan 2025 15:53:41 +0800
Subject: [PATCH] Collaboration & Create Porotofolio

---
 src/app_modules/_global/color/color_pallet.ts |   3 +-
 .../component/comp_load_image_landscape.tsx   |   8 +-
 src/app_modules/auth/login/view.tsx           |   9 +-
 .../card_section_jumlah_partisipan.tsx        |   5 +-
 .../colab/component/card_view/crad_grup.tsx   |   8 +-
 .../colab/component/skeleton_view.tsx         | 117 +++++++++---------
 src/app_modules/colab/create/index.tsx        |  40 +++---
 src/app_modules/colab/detail/group/index.tsx  |  17 ++-
 .../colab/detail/proyek/saya/index.tsx        |   7 +-
 src/app_modules/colab/main/layout.tsx         |   4 +-
 src/app_modules/colab/main/proyek/index.tsx   |   6 +-
 .../comp_button_delete_donasi_by_id.tsx       |   4 +-
 .../component/card_view/card_invoice_new.tsx  |   4 +-
 .../detail_main/cerita_penggalang.tsx         |   4 +-
 .../detail_main/cerita_penggalang_new.tsx     |   4 +-
 .../detail_main/informasi_penggalang_new.tsx  |   4 +-
 .../create/create_cerita_penggalang.tsx       |  36 +++++-
 .../donasi/create/create_donasi_new.tsx       |  42 ++++++-
 .../donasi/detail/detail_draft/index.tsx      |  14 ++-
 .../donasi/detail/detail_reject/index.tsx     |  12 +-
 .../donasi/detail/detail_review/index.tsx     |  12 +-
 .../main/galang_dana/ui_galang_dana_new.tsx   |   7 +-
 src/app_modules/donasi/main/layout.tsx        |   4 +-
 .../proses_donasi/proses_transaksi/index.tsx  |  10 +-
 .../detail/portofolio/view_detail_reject.tsx  |   9 +-
 .../_view/edit/skeleton_edit_investasi.tsx    |  13 +-
 .../_view/edit/vew_edit_investasi_new.tsx     |  73 +++++++++--
 .../katalog/portofolio/create/view.tsx        |  88 +++++++------
 .../katalog/profile/create/view.tsx           |  18 ++-
 29 files changed, 368 insertions(+), 214 deletions(-)

diff --git a/src/app_modules/_global/color/color_pallet.ts b/src/app_modules/_global/color/color_pallet.ts
index 5d6ef09a..658e509e 100644
--- a/src/app_modules/_global/color/color_pallet.ts
+++ b/src/app_modules/_global/color/color_pallet.ts
@@ -5,7 +5,8 @@ export const MainColor = {
   white: "#D4D0D0",
   red: "#FF4B4C",
   orange: "#FF7043",
-  green: "#4CAF4F"
+  green: "#4CAF4F",
+  login: "#EDEBEBFF"
 };
 
 export const AccentColor = {
diff --git a/src/app_modules/_global/component/comp_load_image_landscape.tsx b/src/app_modules/_global/component/comp_load_image_landscape.tsx
index b121dc99..d8d1f9bb 100644
--- a/src/app_modules/_global/component/comp_load_image_landscape.tsx
+++ b/src/app_modules/_global/component/comp_load_image_landscape.tsx
@@ -3,10 +3,12 @@
 import { APIs } from "@/app/lib";
 import { pathAssetImage } from "@/app/lib/path_asset_image";
 import { RouterImagePreview } from "@/app/lib";
-import { Center, Image, Skeleton } from "@mantine/core";
+import { Center, Image } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { MainColor } from "../color";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 export function ComponentGlobal_LoadImageLandscape({
   fileId,
@@ -34,12 +36,12 @@ export function ComponentGlobal_LoadImageLandscape({
     }
   }
 
-  if (isImage === null) return <Skeleton h={200} w={"100%"} />;
+  if (isImage === null) return <CustomSkeleton h={200} w={"100%"} />;
 
   if (!isImage)
     return (
       <>
-        <Center h={200} bg={"white"} style={{ borderRadius: "5px" }}>
+        <Center h={200} bg={MainColor.white} style={{ borderRadius: "5px", borderColor: MainColor.white }}>
           <Image
             alt="No Image"
             maw={150}
diff --git a/src/app_modules/auth/login/view.tsx b/src/app_modules/auth/login/view.tsx
index 514366b9..1e32fb9e 100644
--- a/src/app_modules/auth/login/view.tsx
+++ b/src/app_modules/auth/login/view.tsx
@@ -18,6 +18,7 @@ import { useState } from "react";
 import { PhoneInput } from "react-international-phone";
 import "react-international-phone/style.css";
 
+
 export default function Login({ version }: { version: string }) {
   const router = useRouter();
   const [phone, setPhone] = useState("");
@@ -76,7 +77,13 @@ export default function Login({ version }: { version: string }) {
               <Text c={MainColor.white}>Nomor telepon</Text>
             </Center>
             <PhoneInput
-              inputStyle={{ width: "100%" }}
+              
+              countrySelectorStyleProps={{
+                buttonStyle: {
+                  backgroundColor: MainColor.login,
+                }  
+              }}
+              inputStyle={{ width: "100%", backgroundColor: MainColor.login }}
               defaultCountry="id"
               onChange={(val) => {
                 setPhone(val);
diff --git a/src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx b/src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx
index 404e7f04..9c241cc7 100644
--- a/src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx
+++ b/src/app_modules/colab/component/card_view/card_section_jumlah_partisipan.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { MainColor } from "@/app_modules/_global/color";
 import { Card, Center, Divider, Grid, Stack, Text } from "@mantine/core";
 
 export default function ComponentColab_JumlahPartisipan({
@@ -15,12 +16,12 @@ export default function ComponentColab_JumlahPartisipan({
           <Center>
             <Grid>
               <Grid.Col span={"content"}>
-                <Text c={"white"} fz={"xs"} fw={"bold"}>
+                <Text c={MainColor.white} fz={"xs"} fw={"bold"}>
                   {jumlah?.length ? jumlah?.length : 0}
                 </Text>
               </Grid.Col>
               <Grid.Col span={"auto"}>
-                <Text c={"white"} fz={"xs"} fw={"bold"}>
+                <Text c={MainColor.white} fz={"xs"} fw={"bold"}>
                   Partisipan
                 </Text>
               </Grid.Col>
diff --git a/src/app_modules/colab/component/card_view/crad_grup.tsx b/src/app_modules/colab/component/card_view/crad_grup.tsx
index 5b405b30..be945eb3 100644
--- a/src/app_modules/colab/component/card_view/crad_grup.tsx
+++ b/src/app_modules/colab/component/card_view/crad_grup.tsx
@@ -1,5 +1,5 @@
 import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { Paper, Grid, Stack, Center, Loader, Text } from "@mantine/core";
 import { IconChevronRight } from "@tabler/icons-react";
@@ -17,7 +17,7 @@ export function ComponentColab_CardGrup({ data }: { data: any }) {
         style={{
           border: `2px solid ${AccentColor.blue}`,
           backgroundColor: AccentColor.darkblue,
-          color: "white",
+          color: MainColor.white,
           borderRadius: "10px",
           marginBottom: "20px",
           padding: "15px",
@@ -37,7 +37,7 @@ export function ComponentColab_CardGrup({ data }: { data: any }) {
               <Text fw={"bold"} lineClamp={1}>
                 {data?.ProjectCollaboration_RoomChat?.name}
               </Text>
-              <Text fz={"xs"} c={"white"}>
+              <Text fz={"xs"} >
                 {
                   data?.ProjectCollaboration_RoomChat
                     ?.ProjectCollaboration_AnggotaRoomChat.length
@@ -51,7 +51,7 @@ export function ComponentColab_CardGrup({ data }: { data: any }) {
               {data?.ProjectCollaboration_RoomChat?.id === idRoom ? (
                 <ComponentGlobal_Loader />
               ) : (
-                <IconChevronRight color="white" />
+                <IconChevronRight color={MainColor.white} />
               )}
             </Center>
           </Grid.Col>
diff --git a/src/app_modules/colab/component/skeleton_view.tsx b/src/app_modules/colab/component/skeleton_view.tsx
index afa4f998..027a227d 100644
--- a/src/app_modules/colab/component/skeleton_view.tsx
+++ b/src/app_modules/colab/component/skeleton_view.tsx
@@ -1,4 +1,5 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { Center, Grid, Group, Skeleton, Stack } from "@mantine/core";
 
 export {
@@ -16,27 +17,27 @@ function Collaboration_SkeletonCreate() {
     <>
       <Stack px={"xl"} spacing={"md"}>
         <Stack spacing={"xs"}>
-          <Skeleton height={15} width={50} />
-          <Skeleton height={40} />
+          <CustomSkeleton height={15} width={50} />
+          <CustomSkeleton height={40} />
         </Stack>
         <Stack spacing={"xs"}>
-          <Skeleton height={15} width={50} />
-          <Skeleton height={40} />
+          <CustomSkeleton height={15} width={50} />
+          <CustomSkeleton height={40} />
         </Stack>
         <Stack spacing={"xs"}>
-          <Skeleton height={15} width={50} />
-          <Skeleton height={40} />
+          <CustomSkeleton height={15} width={50} />
+          <CustomSkeleton height={40} />
         </Stack>
         <Stack spacing={"xs"}>
-          <Skeleton height={15} width={50} />
-          <Skeleton height={130} />
+          <CustomSkeleton height={15} width={50} />
+          <CustomSkeleton height={130} />
         </Stack>
         <Stack spacing={"xs"}>
-          <Skeleton height={15} width={50} />
-          <Skeleton height={130} />
+          <CustomSkeleton height={15} width={50} />
+          <CustomSkeleton height={130} />
         </Stack>
 
-        <Skeleton mt={50} height={40} radius={"xl"} />
+        <CustomSkeleton mt={50} height={40} radius={"xl"} />
       </Stack>
     </>
   );
@@ -50,45 +51,45 @@ function Collaboration_SkeletonBeranda() {
           <Stack spacing={"xl"}>
             <Grid align="center" gutter={"md"}>
               <Grid.Col span={"content"}>
-                <Skeleton circle height={40} />
+                <CustomSkeleton circle height={40} />
               </Grid.Col>
               <Grid.Col span={3}>
-                <Skeleton height={20} w={150} />
+                <CustomSkeleton height={20} w={150} />
               </Grid.Col>
               {/* <Grid.Col span={3} offset={3}>
-                  <Skeleton height={20} w={150} />
+                  <CustomSkeleton height={20} w={150} />
                 </Grid.Col> */}
             </Grid>
             <Center>
-              <Skeleton height={15} w={200} />
+              <CustomSkeleton height={15} w={200} />
             </Center>
 
             <Grid align="center" gutter={"md"}>
               <Grid.Col span={"content"}>
-                <Skeleton h={15} w={70} />
+                <CustomSkeleton h={15} w={70} />
               </Grid.Col>
               <Grid.Col span={3}>
-                <Skeleton height={15} w={200} />
+                <CustomSkeleton height={15} w={200} />
               </Grid.Col>
             </Grid>
 
             <Grid align="center" gutter={"md"}>
               <Grid.Col span={"content"}>
-                <Skeleton h={15} w={70} />
+                <CustomSkeleton h={15} w={70} />
               </Grid.Col>
               <Grid.Col span={3}>
-                <Skeleton height={15} w={200} />
+                <CustomSkeleton height={15} w={200} />
               </Grid.Col>
             </Grid>
 
             <Stack spacing={"md"}>
-              <Skeleton height={15} w={150} />
-              <Skeleton height={15} w={"100%"} />
-              <Skeleton height={15} w={"100%"} />
+              <CustomSkeleton height={15} w={150} />
+              <CustomSkeleton height={15} w={"100%"} />
+              <CustomSkeleton height={15} w={"100%"} />
             </Stack>
 
             <Center>
-              <Skeleton height={15} w={100} />
+              <CustomSkeleton height={15} w={100} />
             </Center>
           </Stack>
         </ComponentGlobal_CardStyles>
@@ -104,11 +105,11 @@ function Collaboration_SkeletonGrup() {
         <ComponentGlobal_CardStyles marginBottom={"15px"} key={i}>
           <Group position="apart">
             <Stack>
-              <Skeleton h={15} w={100} />
-              <Skeleton h={15} w={50} />
+              <CustomSkeleton h={15} w={100} />
+              <CustomSkeleton h={15} w={50} />
             </Stack>
 
-            <Skeleton circle height={20} />
+            <CustomSkeleton circle height={20} />
           </Group>
         </ComponentGlobal_CardStyles>
       ))}
@@ -123,38 +124,38 @@ function Collaboration_SkeletonDetail() {
         <Stack spacing={"xl"}>
           <Grid align="center" gutter={"md"}>
             <Grid.Col span={"content"}>
-              <Skeleton circle height={40} />
+              <CustomSkeleton circle height={40} />
             </Grid.Col>
             <Grid.Col span={3}>
-              <Skeleton height={20} w={150} />
+              <CustomSkeleton height={20} w={150} />
             </Grid.Col>
           </Grid>
           <Center>
-            <Skeleton height={20} w={200} />
+            <CustomSkeleton height={20} w={200} />
           </Center>
 
           <Grid align="center" gutter={"md"}>
             <Grid.Col span={"content"}>
-              <Skeleton h={20} w={70} />
+              <CustomSkeleton h={20} w={70} />
             </Grid.Col>
             <Grid.Col span={3}>
-              <Skeleton height={20} w={200} />
+              <CustomSkeleton height={20} w={200} />
             </Grid.Col>
           </Grid>
 
           <Grid align="center" gutter={"md"}>
             <Grid.Col span={"content"}>
-              <Skeleton h={20} w={70} />
+              <CustomSkeleton h={20} w={70} />
             </Grid.Col>
             <Grid.Col span={3}>
-              <Skeleton height={20} w={200} />
+              <CustomSkeleton height={20} w={200} />
             </Grid.Col>
           </Grid>
 
-          <Skeleton height={20} w={100} />
-          <Skeleton height={20} w={"100%"} />
-          <Skeleton height={20} w={100} />
-          <Skeleton height={20} w={"100%"} />
+          <CustomSkeleton height={20} w={100} />
+          <CustomSkeleton height={20} w={"100%"} />
+          <CustomSkeleton height={20} w={100} />
+          <CustomSkeleton height={20} w={"100%"} />
         </Stack>
       </ComponentGlobal_CardStyles>
     </>
@@ -168,16 +169,16 @@ function Collaboration_SkeletonListPrtisipanIsUser() {
         <ComponentGlobal_CardStyles marginBottom={"0"}>
           <Stack>
             <Center>
-              <Skeleton h={20} w={100} />
+              <CustomSkeleton h={20} w={100} />
             </Center>
 
             {Array.from(new Array(2)).map((e, i) => (
               <Grid align="center" gutter={"md"} key={i}>
                 <Grid.Col span={"content"}>
-                  <Skeleton circle height={40} />
+                  <CustomSkeleton circle height={40} />
                 </Grid.Col>
                 <Grid.Col span={3}>
-                  <Skeleton height={20} w={150} />
+                  <CustomSkeleton height={20} w={150} />
                 </Grid.Col>
               </Grid>
             ))}
@@ -193,21 +194,21 @@ function Collaboration_SkeletonListPartisipan() {
     <>
       <Stack>
         <Center>
-          <Skeleton h={40} w={150} radius={"xl"} />
+          <CustomSkeleton h={40} w={150} radius={"xl"} />
         </Center>
         <ComponentGlobal_CardStyles marginBottom={"0"}>
           <Stack>
             <Center>
-              <Skeleton h={20} w={100} />
+              <CustomSkeleton h={20} w={100} />
             </Center>
 
             {Array.from(new Array(2)).map((e, i) => (
               <Grid align="center" gutter={"md"} key={i}>
                 <Grid.Col span={"content"}>
-                  <Skeleton circle height={40} />
+                  <CustomSkeleton circle height={40} />
                 </Grid.Col>
                 <Grid.Col span={3}>
-                  <Skeleton height={20} w={150} />
+                  <CustomSkeleton height={20} w={150} />
                 </Grid.Col>
               </Grid>
             ))}
@@ -225,47 +226,47 @@ function Collaboration_SkeletonDetailInfoGroup() {
         <ComponentGlobal_CardStyles marginBottom={"0"}>
           <Stack spacing={"xl"}>
             <Center>
-              <Skeleton height={20} w={200} />
+              <CustomSkeleton height={20} w={200} />
             </Center>
 
             <Grid align="center" gutter={"md"}>
               <Grid.Col span={"content"}>
-                <Skeleton h={20} w={70} />
+                <CustomSkeleton h={20} w={70} />
               </Grid.Col>
               <Grid.Col span={3}>
-                <Skeleton height={20} w={200} />
+                <CustomSkeleton height={20} w={200} />
               </Grid.Col>
             </Grid>
 
             <Grid align="center" gutter={"md"}>
               <Grid.Col span={"content"}>
-                <Skeleton h={20} w={70} />
+                <CustomSkeleton h={20} w={70} />
               </Grid.Col>
               <Grid.Col span={3}>
-                <Skeleton height={20} w={200} />
+                <CustomSkeleton height={20} w={200} />
               </Grid.Col>
             </Grid>
 
-            <Skeleton height={20} w={100} />
-            <Skeleton height={20} w={"100%"} />
-            <Skeleton height={20} w={"100%"} />
-            <Skeleton height={20} w={100} />
-            <Skeleton height={20} w={"100%"} />
-            <Skeleton height={20} w={"100%"} />
+            <CustomSkeleton height={20} w={100} />
+            <CustomSkeleton height={20} w={"100%"} />
+            <CustomSkeleton height={20} w={"100%"} />
+            <CustomSkeleton height={20} w={100} />
+            <CustomSkeleton height={20} w={"100%"} />
+            <CustomSkeleton height={20} w={"100%"} />
           </Stack>
         </ComponentGlobal_CardStyles>
 
         <ComponentGlobal_CardStyles marginBottom={"0"}>
           <Stack>
-            <Skeleton h={20} w={100} />
+            <CustomSkeleton h={20} w={100} />
 
             {Array.from(new Array(2)).map((e, i) => (
               <Grid align="center" gutter={"md"} key={i}>
                 <Grid.Col span={"content"}>
-                  <Skeleton circle height={40} />
+                  <CustomSkeleton circle height={40} />
                 </Grid.Col>
                 <Grid.Col span={3}>
-                  <Skeleton height={20} w={150} />
+                  <CustomSkeleton height={20} w={150} />
                 </Grid.Col>
               </Grid>
             ))}
diff --git a/src/app_modules/colab/create/index.tsx b/src/app_modules/colab/create/index.tsx
index 8123fca1..14d10432 100644
--- a/src/app_modules/colab/create/index.tsx
+++ b/src/app_modules/colab/create/index.tsx
@@ -51,7 +51,7 @@ export default function Colab_Create() {
     }
   }
 
-  
+
   if (listIndustri == null) {
     return (
       <>
@@ -66,9 +66,9 @@ export default function Colab_Create() {
         <TextInput
           maxLength={100}
           styles={{
-            label: {
-              color: "white",
-            },
+            label: { color: MainColor.white },
+            input: { backgroundColor: MainColor.white },
+            required: { color: MainColor.red },
           }}
           label="Judul"
           withAsterisk
@@ -83,9 +83,9 @@ export default function Colab_Create() {
 
         <TextInput
           styles={{
-            label: {
-              color: "white",
-            },
+            label: { color: MainColor.white },
+            input: { backgroundColor: MainColor.white },
+            required: { color: MainColor.red },
           }}
           maxLength={100}
           label="Lokasi"
@@ -101,9 +101,10 @@ export default function Colab_Create() {
 
         <Select
           styles={{
-            label: {
-              color: "white",
-            },
+            label: { color: MainColor.white },
+            input: { backgroundColor: MainColor.white },
+            required: { color: MainColor.red },
+            dropdown: { backgroundColor: MainColor.white },
           }}
           placeholder="Pilih kategori industri"
           label="Pilih Industri"
@@ -123,9 +124,9 @@ export default function Colab_Create() {
         <Stack spacing={5}>
           <Textarea
             styles={{
-              label: {
-                color: "white",
-              },
+              label: { color: MainColor.white },
+              input: { backgroundColor: MainColor.white },
+              required: { color: MainColor.red },
             }}
             maxLength={500}
             label="Tujuan Proyek"
@@ -148,9 +149,8 @@ export default function Colab_Create() {
         <Stack spacing={5}>
           <Textarea
             styles={{
-              label: {
-                color: "white",
-              },
+              label: { color: MainColor.white },
+              input: { backgroundColor: MainColor.white },
             }}
             maxLength={500}
             label="Keuntungan "
@@ -210,10 +210,10 @@ function ButtonAction({ value }: { value: any }) {
       <Button
         disabled={
           !value.title ||
-          !value.lokasi ||
-          !value.purpose ||
-          !value.benefit ||
-          value.projectCollaborationMaster_IndustriId === 0
+            !value.lokasi ||
+            !value.purpose ||
+            !value.benefit ||
+            value.projectCollaborationMaster_IndustriId === 0
             ? true
             : false
         }
diff --git a/src/app_modules/colab/detail/group/index.tsx b/src/app_modules/colab/detail/group/index.tsx
index 6517f2e9..ea10d6b7 100644
--- a/src/app_modules/colab/detail/group/index.tsx
+++ b/src/app_modules/colab/detail/group/index.tsx
@@ -229,13 +229,13 @@ export default function Colab_GroupChatView({
                     {loadingBack ? (
                       <ComponentGlobal_Loader />
                     ) : (
-                      <IconChevronLeft color="white" />
+                      <IconChevronLeft color={MainColor.white} />
                     )}
                   </ActionIcon>
                 </Grid.Col>
                 <Grid.Col span={8}>
                   <Center>
-                    <Title c={"white"} order={5} lineClamp={1}>
+                    <Title color={MainColor.white} order={5} lineClamp={1}>
                       {selectRoom?.name}
                     </Title>
                   </Center>
@@ -255,7 +255,7 @@ export default function Colab_GroupChatView({
                       {loadingInfo ? (
                         <ComponentGlobal_Loader />
                       ) : (
-                        <IconInfoSquareRounded color="white" />
+                        <IconInfoSquareRounded color={MainColor.white} />
                       )}
                     </ActionIcon>
                   </Group>
@@ -380,10 +380,11 @@ export default function Colab_GroupChatView({
           >
             KIzRIM PESAN
           </Button> */}
-            <Stack justify="center" h={"100%"} px={"sm"}>
+            <Stack  justify="center" h={"100%"} px={"sm"}>
               <Grid align="center">
                 <Grid.Col span={"auto"}>
                   <Textarea
+                  styles={{ input: { backgroundColor: MainColor.white} }}
                     minRows={1}
                     radius={"md"}
                     placeholder="Ketik pesan anda..."
@@ -395,8 +396,12 @@ export default function Colab_GroupChatView({
                   <ActionIcon
                     disabled={msg === "" ? true : false}
                     variant="filled"
-                    bg={AccentColor.softblue}
-                    color={"cyan"}
+                    styles={{
+                      root: {
+                        backgroundColor: MainColor.white,
+                      },
+                    }}
+                    color={MainColor.darkblue}
                     radius={"xl"}
                     size={"xl"}
                     onClick={() => {
diff --git a/src/app_modules/colab/detail/proyek/saya/index.tsx b/src/app_modules/colab/detail/proyek/saya/index.tsx
index 3d62eb5f..98d715c1 100644
--- a/src/app_modules/colab/detail/proyek/saya/index.tsx
+++ b/src/app_modules/colab/detail/proyek/saya/index.tsx
@@ -127,7 +127,7 @@ function CheckBoxPartisipan() {
             <Stack spacing={5}>
               <Text c={"red"} fz={10}>
                 *
-                <Text px={"xs"} span inherit c={"white"}>
+                <Text px={"xs"} span inherit c={MainColor.white}>
                   Pilih user yang akan menjadi tim proyek anda
                 </Text>
               </Text>
@@ -274,12 +274,13 @@ function ButtonAction({ value }: { value: string[] }) {
       >
         <Stack>
           <Group position="apart">
-            <Title order={6}>Nama Grup Diskusi</Title>
+            <Title c={MainColor.white} order={6}>Nama Grup Diskusi</Title>
             <ActionIcon onClick={close} variant="transparent">
-              <IconX color="white" />
+              <IconX color={MainColor.white} />
             </ActionIcon>
           </Group>
           <TextInput
+            styles={{ input: { backgroundColor: MainColor.white } }}
             placeholder="Masukan nama grup diskusi .."
             radius={"xl"}
             onChange={(val) => {
diff --git a/src/app_modules/colab/main/layout.tsx b/src/app_modules/colab/main/layout.tsx
index 03b3cd7b..8a896438 100644
--- a/src/app_modules/colab/main/layout.tsx
+++ b/src/app_modules/colab/main/layout.tsx
@@ -60,7 +60,7 @@ export default function LayoutColab_Main({
                 <ActionIcon
                   // disabled={e.path === "" ? true : false}
                   variant="transparent"
-                  c={hotMenu === e.id ? MainColor.yellow : "white"}
+                  c={hotMenu === e.id ? MainColor.yellow : MainColor.white}
                   onClick={() => {
                     router.replace(e.path, { scroll: false });
                     setHotMenu(e.id);
@@ -69,7 +69,7 @@ export default function LayoutColab_Main({
                   {e.icon}
                 </ActionIcon>
                 <Text
-                  c={hotMenu === e.id ? MainColor.yellow : "white"}
+                  c={hotMenu === e.id ? MainColor.yellow : MainColor.white}
                   fz={"xs"}
                   lineClamp={1}
                 >
diff --git a/src/app_modules/colab/main/proyek/index.tsx b/src/app_modules/colab/main/proyek/index.tsx
index 47395395..0e139a06 100644
--- a/src/app_modules/colab/main/proyek/index.tsx
+++ b/src/app_modules/colab/main/proyek/index.tsx
@@ -52,15 +52,15 @@ export default function Colab_Proyek() {
               key={e.id}
               value={e.value}
               fw={"bold"}
-              c={"black"}
               style={{
                 transition: "0.5s",
+                color: activeTab === e.value ? MainColor.darkblue : MainColor.black,
                 backgroundColor:
-                  activeTab === e.value ? MainColor.yellow : "white",
+                  activeTab === e.value ? MainColor.yellow : MainColor.white,
                 border:
                   activeTab === e.value
                     ? `1px solid ${AccentColor.yellow}`
-                    : `1px solid white`,
+                    : `1px solid ${MainColor.white}`,
               }}
             >
               <Stack align="center" justify="center" spacing={0}>
diff --git a/src/app_modules/donasi/component/button/comp_button_delete_donasi_by_id.tsx b/src/app_modules/donasi/component/button/comp_button_delete_donasi_by_id.tsx
index 6ec7bb58..62005ea4 100644
--- a/src/app_modules/donasi/component/button/comp_button_delete_donasi_by_id.tsx
+++ b/src/app_modules/donasi/component/button/comp_button_delete_donasi_by_id.tsx
@@ -13,6 +13,7 @@ import {
 import { useAtom } from "jotai";
 import { gs_donasi_tabs_posting } from "../../global_state";
 import { useRouter } from "next/navigation";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 
 export function Donasi_ComponentButtonDeleteDonasiById({
   donasiId,
@@ -60,7 +61,8 @@ export function Donasi_ComponentButtonDeleteDonasiById({
     <>
       <Button
         radius={"xl"}
-        color="red"
+        style={{ backgroundColor: MainColor.red }}
+        c={AccentColor.white}
         onClick={() => {
           setOpenModal(true);
         }}
diff --git a/src/app_modules/donasi/component/card_view/card_invoice_new.tsx b/src/app_modules/donasi/component/card_view/card_invoice_new.tsx
index c5712648..6a06502c 100644
--- a/src/app_modules/donasi/component/card_view/card_invoice_new.tsx
+++ b/src/app_modules/donasi/component/card_view/card_invoice_new.tsx
@@ -1,5 +1,5 @@
 import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import { ComponentGlobal_LoadImageCustom } from "@/app_modules/_global/component";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { Badge, Card, Grid, Group, Progress, Stack, Text } from "@mantine/core";
@@ -36,7 +36,7 @@ export function ComponentDonasi_CardInvoiceNew({ data, }: { data: IDataAllDonasi
                padding: "15px",
                cursor: "pointer",
                borderRadius: "10px",
-               color: "white",
+               color: MainColor.white,
                marginBottom: "15px",
             }}
             onClick={() => onCekInvoice()}
diff --git a/src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx b/src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx
index 9aeadcc9..3fb76c99 100644
--- a/src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx
+++ b/src/app_modules/donasi/component/detail_main/cerita_penggalang.tsx
@@ -25,7 +25,7 @@ export default function ComponentDonasi_CeritaPenggalangMain({
       <Stack
         spacing={"xs"}
         style={{
-          color: "white",
+          color: MainColor.white,
         }}
       >
         <Title order={4}>Cerita Penggalang Dana</Title>
@@ -35,7 +35,7 @@ export default function ComponentDonasi_CeritaPenggalangMain({
             backgroundColor: AccentColor.darkblue,
             border: `2px solid ${AccentColor.blue}`,
             borderRadius: "10px",
-            color: "white",
+            color: MainColor.white,
           }}
         >
           <Stack>
diff --git a/src/app_modules/donasi/component/detail_main/cerita_penggalang_new.tsx b/src/app_modules/donasi/component/detail_main/cerita_penggalang_new.tsx
index d0b52bd4..0d620aea 100644
--- a/src/app_modules/donasi/component/detail_main/cerita_penggalang_new.tsx
+++ b/src/app_modules/donasi/component/detail_main/cerita_penggalang_new.tsx
@@ -43,7 +43,7 @@ export default function ComponentDonasi_CeritaPenggalangMainNew() {
          <Stack
             spacing={"xs"}
             style={{
-               color: "white",
+               color: MainColor.white,
             }}
          >
             <Title order={4}>Cerita Penggalang Dana</Title>
@@ -53,7 +53,7 @@ export default function ComponentDonasi_CeritaPenggalangMainNew() {
                   backgroundColor: AccentColor.darkblue,
                   border: `2px solid ${AccentColor.blue}`,
                   borderRadius: "10px",
-                  color: "white",
+                  color: MainColor.white,
                }}
             >
                {
diff --git a/src/app_modules/donasi/component/detail_main/informasi_penggalang_new.tsx b/src/app_modules/donasi/component/detail_main/informasi_penggalang_new.tsx
index 19d8af63..49fc9de8 100644
--- a/src/app_modules/donasi/component/detail_main/informasi_penggalang_new.tsx
+++ b/src/app_modules/donasi/component/detail_main/informasi_penggalang_new.tsx
@@ -41,7 +41,7 @@ export default function ComponentDonasi_InformasiPenggalangMainNew() {
          <Stack
             spacing={"xs"}
             style={{
-               color: "white",
+               color: MainColor.white,
             }}
          >
             <Title order={4}>Informasi Penggalang Dana</Title>
@@ -51,7 +51,7 @@ export default function ComponentDonasi_InformasiPenggalangMainNew() {
                   backgroundColor: AccentColor.darkblue,
                   border: `2px solid ${AccentColor.blue}`,
                   borderRadius: "10px",
-                  color: "white",
+                  color: MainColor.white,
                }}
             >
                {
diff --git a/src/app_modules/donasi/create/create_cerita_penggalang.tsx b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
index ae5defbd..d8bf22e6 100644
--- a/src/app_modules/donasi/create/create_cerita_penggalang.tsx
+++ b/src/app_modules/donasi/create/create_cerita_penggalang.tsx
@@ -142,7 +142,13 @@ export default function CreateCeritaPenggalangDonasi({
             <Textarea
               styles={{
                 label: {
-                  color: "white",
+                  color: MainColor.white,
+                },
+                input: {
+                  backgroundColor: MainColor.white
+                },
+                required: {
+                  color: MainColor.red
                 },
               }}
               autosize
@@ -169,7 +175,13 @@ export default function CreateCeritaPenggalangDonasi({
             <Textarea
               styles={{
                 label: {
-                  color: "white",
+                  color: MainColor.white,
+                },
+                input: {
+                  backgroundColor: MainColor.white
+                },
+                required: {
+                  color: MainColor.red
                 },
               }}
               autosize
@@ -205,8 +217,8 @@ export default function CreateCeritaPenggalangDonasi({
                 </AspectRatio>
               ) : (
                 <Stack justify="center" align="center" h={"100%"}>
-                  <IconUpload color="white" />
-                  <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
+                  <IconUpload color={MainColor.white} />
+                  <Text fz={10} fs={"italic"} c={MainColor.white} fw={"bold"}>
                     Upload Gambar
                   </Text>
                 </Stack>
@@ -251,7 +263,13 @@ export default function CreateCeritaPenggalangDonasi({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
+              },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red
               },
             }}
             withAsterisk
@@ -268,7 +286,13 @@ export default function CreateCeritaPenggalangDonasi({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
+              },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red
               },
             }}
             withAsterisk
diff --git a/src/app_modules/donasi/create/create_donasi_new.tsx b/src/app_modules/donasi/create/create_donasi_new.tsx
index 85389da1..6558957e 100644
--- a/src/app_modules/donasi/create/create_donasi_new.tsx
+++ b/src/app_modules/donasi/create/create_donasi_new.tsx
@@ -105,8 +105,17 @@ export default function CreateDonasiNew() {
             <Select
                styles={{
                   label: {
-                     color: "white",
+                     color: MainColor.white,
                   },
+                  input: {
+                     backgroundColor: MainColor.white
+                  },
+                  required: {
+                     color: MainColor.red
+                  },
+                  dropdown: {
+                     backgroundColor: MainColor.white
+                  }
                }}
                label="Kategori"
                placeholder={loadingMaster ? "Loading..." : "Pilih kategori penggalangan dana"}
@@ -127,8 +136,14 @@ export default function CreateDonasiNew() {
                <TextInput
                   styles={{
                      label: {
-                        color: "white",
+                        color: MainColor.white,
                      },
+                     input: {
+                        backgroundColor: MainColor.white
+                     },
+                     required: {
+                        color: MainColor.red
+                     }
                   }}
                   withAsterisk
                   label="Judul Donasi"
@@ -141,8 +156,14 @@ export default function CreateDonasiNew() {
                <TextInput
                   styles={{
                      label: {
-                        color: "white",
+                        color: MainColor.white,
                      },
+                     input: {
+                        backgroundColor: MainColor.white
+                     },
+                     required: {
+                        color: MainColor.red
+                     }
                   }}
                   icon={<Text fw={"bold"}>Rp.</Text>}
                   min={0}
@@ -175,8 +196,17 @@ export default function CreateDonasiNew() {
                <Select
                   styles={{
                      label: {
-                        color: "white",
+                        color: MainColor.white
                      },
+                     input: {
+                        backgroundColor: MainColor.white
+                     },
+                     required: {
+                        color: MainColor.red
+                     },
+                     dropdown: {
+                        backgroundColor: MainColor.white
+                     }
                   }}
                   label="Durasi"
                   placeholder={loadingMaster ? "Loading..." : "Jangka waktu penggalangan dana"}
@@ -202,8 +232,8 @@ export default function CreateDonasiNew() {
                      </AspectRatio>
                   ) : (
                      <Stack justify="center" align="center" h={"100%"}>
-                        <IconUpload color="white" />
-                        <Text fz={10} fs={"italic"} c={"white"} fw={"bold"}>
+                        <IconUpload color={MainColor.white} />
+                        <Text fz={10} fs={"italic"} c={MainColor.white} fw={"bold"}>
                            Upload Gambar
                         </Text>
                      </Stack>
diff --git a/src/app_modules/donasi/detail/detail_draft/index.tsx b/src/app_modules/donasi/detail/detail_draft/index.tsx
index 88ce529c..7b9f9466 100644
--- a/src/app_modules/donasi/detail/detail_draft/index.tsx
+++ b/src/app_modules/donasi/detail/detail_draft/index.tsx
@@ -16,6 +16,7 @@ import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
 import { MODEL_DONASI } from "../../model/interface";
 import { IRealtimeData } from "@/app/lib/global_state";
 import { WibuRealtime } from "wibu-pkg";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 
 export default function DetailDraftDonasi({
   dataDonasi,
@@ -92,8 +93,10 @@ function ButtonAjukanPenggalangan({
     <>
       <Button
         radius={"xl"}
-        bg={"orange"}
-        color="orange"
+        style={{
+          backgroundColor: AccentColor.yellow
+        }}
+        c={MainColor.darkblue}
         onClick={() => setOpenModal(true)}
       >
         Ajukan Kembali
@@ -104,20 +107,19 @@ function ButtonAjukanPenggalangan({
         opened={openModal}
         close={() => setOpenModal(false)}
         buttonKiri={
-          <Button style={{ color: "black"}} radius={"xl"} onClick={() => setOpenModal(false)}>
+          <Button c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal(false)}>
             Batal
           </Button>
         }
         buttonKanan={
           <Button
             style={{
-              color: "black"
+              backgroundColor: AccentColor.yellow
             }}
             loaderPosition="center"
             loading={isLoading}
             radius={"xl"}
-            bg={"orange"}
-            color="orange"
+            c={MainColor.darkblue}
             onClick={() => onChangeStatus()}
           >
             Ajukan
diff --git a/src/app_modules/donasi/detail/detail_reject/index.tsx b/src/app_modules/donasi/detail/detail_reject/index.tsx
index 88df30d8..3c8dd1da 100644
--- a/src/app_modules/donasi/detail/detail_reject/index.tsx
+++ b/src/app_modules/donasi/detail/detail_reject/index.tsx
@@ -17,6 +17,7 @@ import ComponentDonasi_CeritaPenggalangMain from "../../component/detail_main/ce
 import { Donasi_funDeleteDonasiById } from "../../fun/delete/fin_delete_donasi_by_id";
 import { Donasi_funGantiStatus } from "../../fun/update/fun_ganti_status";
 import { MODEL_DONASI } from "../../model/interface";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 
 export default function DetailRejectDonasi({
   dataReject,
@@ -104,16 +105,16 @@ function ButtonAction({
       <Group grow>
         <Button
           radius={"xl"}
-          bg={"orange"}
-          color="orange"
+          style={{ backgroundColor: AccentColor.yellow}}
+          c={MainColor.darkblue}
           onClick={() => setOpenModalEdit(true)}
         >
           Edit Kembali
         </Button>
         <Button
           radius={"xl"}
-          bg={"red"}
-          color="red"
+          style={{ backgroundColor: MainColor.red }}
+          c={AccentColor.white}
           onClick={() => setOpenModalDelete(true)}
         >
           Hapus Donasi
@@ -134,8 +135,9 @@ function ButtonAction({
           <Button
             loaderPosition="center"
             loading={isLoadingEdit}
+            style={{ backgroundColor: AccentColor.yellow }}
             radius={"xl"}
-            color="orange"
+            c={MainColor.darkblue}
             onClick={() => onChangeStatus()}
           >
             Edit
diff --git a/src/app_modules/donasi/detail/detail_review/index.tsx b/src/app_modules/donasi/detail/detail_review/index.tsx
index 255e5507..f44269a4 100644
--- a/src/app_modules/donasi/detail/detail_review/index.tsx
+++ b/src/app_modules/donasi/detail/detail_review/index.tsx
@@ -16,6 +16,7 @@ import { MODEL_DONASI } from "../../model/interface";
 import { donasi_checkStatus } from "../../fun";
 import { WibuRealtime } from "wibu-pkg";
 import { IRealtimeData } from "@/app/lib/global_state";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 
 export default function DetailReviewDonasi({
   dataDonasi,
@@ -95,10 +96,11 @@ function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
         mt={"lg"}
         style={{
           transition: "0.5s",
+          backgroundColor: MainColor.orange
         }}
         radius={"xl"}
-        bg={"orange"}
-        color="orange"
+        
+        c={MainColor.darkblue}
         onClick={() => setOpenModal(true)}
       >
         Batalkan Review
@@ -109,17 +111,17 @@ function ButtonBatalReview({ donasi }: { donasi: MODEL_DONASI }) {
         opened={openModal}
         close={() => setOpenModal(false)}
         buttonKiri={
-          <Button style={{ color: "black" }} radius={"xl"} onClick={() => setOpenModal(false)}>
+          <Button c={AccentColor.white} radius={"xl"} onClick={() => setOpenModal(false)}>
             Batal
           </Button>
         }
         buttonKanan={
           <Button
-          style={{ color: "black" }}
+          style={{ backgroundColor: AccentColor.yellow }}
             loaderPosition="center"
             loading={isLoading ? true : false}
             radius={"xl"}
-            color="orange"
+            c={MainColor.darkblue}
             onClick={() => {
               onChangeStatus();
             }}
diff --git a/src/app_modules/donasi/main/galang_dana/ui_galang_dana_new.tsx b/src/app_modules/donasi/main/galang_dana/ui_galang_dana_new.tsx
index 1aa553df..8e5db874 100644
--- a/src/app_modules/donasi/main/galang_dana/ui_galang_dana_new.tsx
+++ b/src/app_modules/donasi/main/galang_dana/ui_galang_dana_new.tsx
@@ -57,15 +57,16 @@ export default function GalangDanaDonasiNew() {
                 key={e.id}
                 value={e.id}
                 fw={"bold"}
-                c={"black"}
                 style={{
                   transition: "0.5s",
+                  color:
+                    param.id === e.id ? MainColor.darkblue : MainColor.black,
                   backgroundColor:
-                    param.id === e.id ? MainColor.yellow : "white",
+                    param.id === e.id ? MainColor.yellow : MainColor.white,
                   border:
                     param.id === e.id
                       ? `1px solid ${AccentColor.yellow}`
-                      : `1px solid white`,
+                      : `1px solid ${MainColor.white}`,
                 }}
               >
                 {e.name}
diff --git a/src/app_modules/donasi/main/layout.tsx b/src/app_modules/donasi/main/layout.tsx
index f8c9cfb2..b292c04b 100644
--- a/src/app_modules/donasi/main/layout.tsx
+++ b/src/app_modules/donasi/main/layout.tsx
@@ -62,7 +62,7 @@ export default function LayoutDonasi({
                 <ActionIcon
                   // disabled={e.path === "" ? true : false}
                   variant="transparent"
-                  c={active === i ? MainColor.yellow : "white"}
+                  c={active === i ? MainColor.yellow : MainColor.white}
                   onClick={() =>
                     e.path === ""
                       ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
@@ -72,7 +72,7 @@ export default function LayoutDonasi({
                   {e.icon}
                 </ActionIcon>
                 <Text
-                  c={active === i ? MainColor.yellow : "white"}
+                  c={active === i ? MainColor.yellow : MainColor.white}
                   fz={"xs"}
                   lineClamp={1}
                 >
diff --git a/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx b/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
index 9da8b5be..bea0c513 100644
--- a/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
+++ b/src/app_modules/donasi/proses_donasi/proses_transaksi/index.tsx
@@ -88,7 +88,7 @@ export default function Donasi_ProsesTransaksi({
               padding: "15px",
               cursor: "pointer",
               borderRadius: "10px",
-              color: "white",
+              color: MainColor.white,
             }}
           >
             <Stack spacing={"md"}>
@@ -99,7 +99,7 @@ export default function Donasi_ProsesTransaksi({
                   padding: "15px",
                   cursor: "pointer",
                   borderRadius: "10px",
-                  color: "white",
+                  color: MainColor.white,
                 }}
               >
                 <Stack align="center" justify="center">
@@ -121,7 +121,7 @@ export default function Donasi_ProsesTransaksi({
               padding: "15px",
               cursor: "pointer",
               borderRadius: "10px",
-              color: "white",
+              color: MainColor.white,
             }}
           >
             <Paper
@@ -131,7 +131,7 @@ export default function Donasi_ProsesTransaksi({
                 padding: "15px",
                 cursor: "pointer",
                 borderRadius: "10px",
-                color: "white",
+                color: MainColor.white,
               }}
             >
               <Group position="center">
@@ -152,7 +152,7 @@ export default function Donasi_ProsesTransaksi({
                   target="_blank"
                   href={`https://wa.me/+${nomorAdmin.nomor}?text=Hallo Admin , Saya ada kendala dalam proses transfer donasi!`}
                 >
-                  <IconBrandWhatsapp size={40} color={Warna.hijau_cerah} />
+                  <IconBrandWhatsapp size={40} color={MainColor.green} />
                 </Link>
               </Group>
             </Paper>
diff --git a/src/app_modules/investasi/_view/detail/portofolio/view_detail_reject.tsx b/src/app_modules/investasi/_view/detail/portofolio/view_detail_reject.tsx
index 17f9f89a..8bf2df0c 100644
--- a/src/app_modules/investasi/_view/detail/portofolio/view_detail_reject.tsx
+++ b/src/app_modules/investasi/_view/detail/portofolio/view_detail_reject.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { NEW_RouterInvestasi } from "@/app/lib/router_hipmi/router_investasi";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
@@ -119,9 +120,9 @@ export default function Investasi_ViewDetailReject({
           {/* Tombol Ajukan */}
           <Button
             radius={"xl"}
-            bg={"orange.7"}
-            color="yellow"
+            style={{ backgroundColor: AccentColor.yellow }}
             onClick={() => onAjukan()}
+            c={MainColor.darkblue}
           >
             Edit Kembali
           </Button>
@@ -129,8 +130,8 @@ export default function Investasi_ViewDetailReject({
           {/* Tombol Hapus */}
           <Button
             radius={"xl"}
-            bg={"red.7"}
-            color="red"
+            style={{ backgroundColor: MainColor.red }}
+            c={AccentColor.white}
             onClick={() => setOpenModal(true)}
           >
             Hapus
diff --git a/src/app_modules/investasi/_view/edit/skeleton_edit_investasi.tsx b/src/app_modules/investasi/_view/edit/skeleton_edit_investasi.tsx
index 20a43688..d0ea1348 100644
--- a/src/app_modules/investasi/_view/edit/skeleton_edit_investasi.tsx
+++ b/src/app_modules/investasi/_view/edit/skeleton_edit_investasi.tsx
@@ -1,20 +1,21 @@
-import { Box, Skeleton, Stack } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box, Stack } from "@mantine/core";
 
 export default function SkeletonEditInvestasi() {
    return (
       <>
          <Box>
             <Stack align="center" mb={40}>
-               <Skeleton height={40} width={"100%"} />
-               <Skeleton height={300} width={"100%"} my={"xs"} />
-               <Skeleton height={40} width={"40%"} radius={"lg"} />
+               <CustomSkeleton height={40} width={"100%"} />
+               <CustomSkeleton height={300} width={"100%"} my={"xs"} />
+               <CustomSkeleton height={40} width={"40%"} radius={"lg"} />
             </Stack>
 
             <Stack align="center">
                {[...Array(5)].map((_, index) => (
-                  <Skeleton key={index} height={40} width={"100%"} my={"xs"} />
+                  <CustomSkeleton key={index} height={40} width={"100%"} my={"xs"} />
                ))}
-               <Skeleton height={40} width={"100%"} radius={"lg"} mt={30} />
+               <CustomSkeleton height={40} width={"100%"} radius={"lg"} mt={30} />
             </Stack>
          </Box>
 
diff --git a/src/app_modules/investasi/_view/edit/vew_edit_investasi_new.tsx b/src/app_modules/investasi/_view/edit/vew_edit_investasi_new.tsx
index c7cdbf0b..54f11867 100644
--- a/src/app_modules/investasi/_view/edit/vew_edit_investasi_new.tsx
+++ b/src/app_modules/investasi/_view/edit/vew_edit_investasi_new.tsx
@@ -158,8 +158,14 @@ export function Investasi_ViewEditInvestasiNew() {
                      <TextInput
                         styles={{
                            label: {
-                              color: "white",
+                              color: MainColor.white,
                            },
+                           input: {
+                              backgroundColor: MainColor.white
+                           },
+                           required: {
+                              color: MainColor.red
+                           }
                         }}
                         withAsterisk
                         label="Judul Investasi"
@@ -177,8 +183,14 @@ export function Investasi_ViewEditInvestasiNew() {
                      <TextInput
                         styles={{
                            label: {
-                              color: "white",
+                              color: MainColor.white,
                            },
+                           input: {
+                              backgroundColor: MainColor.white
+                           },
+                           required: {
+                              color: MainColor.red
+                           }
                         }}
                         icon={<Text fw={"bold"}>Rp.</Text>}
                         min={0}
@@ -213,8 +225,14 @@ export function Investasi_ViewEditInvestasiNew() {
                      <TextInput
                         styles={{
                            label: {
-                              color: "white",
+                              color: MainColor.white,
                            },
+                           input: {
+                              backgroundColor: MainColor.white
+                           },
+                           required: {
+                              color: MainColor.red
+                           }
                         }}
                         icon={<Text fw={"bold"}>Rp.</Text>}
                         min={0}
@@ -258,20 +276,28 @@ export function Investasi_ViewEditInvestasiNew() {
                         readOnly
                         styles={{
                            label: {
-                              color: "white",
+                              color: MainColor.white,
                            },
-
                            input: {
-                              backgroundColor: "whitesmoke",
+                              backgroundColor: MainColor.white
                            },
+                           required: {
+                              color: MainColor.red
+                           }
                         }}
                      />
 
                      <TextInput
                         styles={{
                            label: {
-                              color: "white",
+                              color: MainColor.white,
                            },
+                           input: {
+                              backgroundColor: MainColor.white
+                           },
+                           required: {
+                              color: MainColor.red
+                           }
                         }}
                         rightSection={
                            <Text fw={"bold"} c={"gray"}>
@@ -294,8 +320,17 @@ export function Investasi_ViewEditInvestasiNew() {
                      <Select
                         styles={{
                            label: {
-                              color: "white",
+                              color: MainColor.white,
                            },
+                           input: {
+                              backgroundColor: MainColor.white
+                           },
+                           required: {
+                              color: MainColor.red
+                           },
+                           dropdown: {
+                              backgroundColor: MainColor.white,
+                           }
                         }}
                         withAsterisk
                         label="Pencarian Investor"
@@ -316,8 +351,17 @@ export function Investasi_ViewEditInvestasiNew() {
                      <Select
                         styles={{
                            label: {
-                              color: "white",
+                              color: MainColor.white,
                            },
+                           input: {
+                              backgroundColor: MainColor.white
+                           },
+                           required: {
+                              color: MainColor.red
+                           },
+                           dropdown: {
+                              backgroundColor: MainColor.white,
+                           }
                         }}
                         withAsterisk
                         label="Periode Deviden"
@@ -335,8 +379,17 @@ export function Investasi_ViewEditInvestasiNew() {
                      <Select
                         styles={{
                            label: {
-                              color: "white",
+                              color: MainColor.white,
                            },
+                           input: {
+                              backgroundColor: MainColor.white
+                           },
+                           required: {
+                              color: MainColor.red
+                           },
+                           dropdown: {
+                              backgroundColor: MainColor.white,
+                           }
                         }}
                         withAsterisk
                         label="Pembagian Deviden"
diff --git a/src/app_modules/katalog/portofolio/create/view.tsx b/src/app_modules/katalog/portofolio/create/view.tsx
index 1bfcaf71..bacf50dc 100644
--- a/src/app_modules/katalog/portofolio/create/view.tsx
+++ b/src/app_modules/katalog/portofolio/create/view.tsx
@@ -71,12 +71,12 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              // input: {
-              //   backgroundColor: MainColor.white,
-              // },
-              // required: {
-              //   color: MainColor.red,
-              // },
+              input: {
+                backgroundColor: MainColor.white,
+              },
+              required: {
+                color: MainColor.red,
+              },
             }}
             withAsterisk
             label="Nama Bisnis"
@@ -94,12 +94,15 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              // input: {
-              //   backgroundColor: MainColor.white,
-              // },
-              // required: {
-              //   color: MainColor.red,
-              // },
+              input: {
+                backgroundColor: MainColor.white,
+              },
+              required: {
+                color: MainColor.red,
+              },
+              dropdown: {
+                backgroundColor: MainColor.white
+              }
             }}
             withAsterisk
             label="Bidang Bisnis"
@@ -121,12 +124,12 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              // input: {
-              //   backgroundColor: MainColor.white,
-              // },
-              // required: {
-              //   color: MainColor.red,
-              // },
+              input: {
+                backgroundColor: MainColor.white,
+              },
+              required: {
+                color: MainColor.red,
+              },
             }}
             withAsterisk
             label="Alamat Bisnis"
@@ -150,7 +153,12 @@ export default function CreatePortofolio({
 
             <PhoneInput
               placeholder="Nomor telepon"
-              inputStyle={{ width: "100%" }}
+              countrySelectorStyleProps={{
+                buttonStyle: {
+                  backgroundColor: MainColor.login,
+                }  
+              }}
+              inputStyle={{ width: "100%", backgroundColor: MainColor.login }}
               defaultCountry="id"
               onChange={(val) => {
                 const valPhone = val.substring(1);
@@ -192,12 +200,12 @@ export default function CreatePortofolio({
                 label: {
                   color: MainColor.white,
                 },
-                // input: {
-                //   backgroundColor: MainColor.white,
-                // },
-                // required: {
-                //   color: MainColor.red,
-                // },
+                input: {
+                  backgroundColor: MainColor.white,
+                },
+                required: {
+                  color: MainColor.red,
+                },
               }}
               maxLength={300}
               autosize
@@ -336,9 +344,9 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              // input: {
-              //   backgroundColor: MainColor.white,
-              // },
+              input: {
+                backgroundColor: MainColor.white,
+              },
             }}
             label="Facebook"
             maxLength={100}
@@ -355,9 +363,9 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              // input: {
-              //   backgroundColor: MainColor.white,
-              // },
+              input: {
+                backgroundColor: MainColor.white,
+              },
             }}
             label="Instagram"
             maxLength={100}
@@ -374,9 +382,9 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              // input: {
-              //   backgroundColor: MainColor.white,
-              // },
+              input: {
+                backgroundColor: MainColor.white,
+              },
             }}
             label="Tiktok"
             maxLength={100}
@@ -393,9 +401,9 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              // input: {
-              //   backgroundColor: MainColor.white,
-              // },
+              input: {
+                backgroundColor: MainColor.white,
+              },
             }}
             label="Twitter"
             maxLength={100}
@@ -412,9 +420,9 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              // input: {
-              //   backgroundColor: MainColor.white,
-              // },
+              input: {
+                backgroundColor: MainColor.white,
+              },
             }}
             label="Youtube"
             maxLength={100}
diff --git a/src/app_modules/katalog/profile/create/view.tsx b/src/app_modules/katalog/profile/create/view.tsx
index 90d51ab2..77feb0b2 100644
--- a/src/app_modules/katalog/profile/create/view.tsx
+++ b/src/app_modules/katalog/profile/create/view.tsx
@@ -8,6 +8,7 @@ import { gmailRegex } from "../../component/regular_expressions";
 import { Profile_ComponentCreateNewProfile } from "../_component";
 import Profile_ViewUploadBackground from "./view_upload_background";
 import Profile_ViewUploadFoto from "./view_upload_foto";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function CreateProfile() {
   const [imgPP, setImgPP] = useState<any | null>();
@@ -42,7 +43,9 @@ export default function CreateProfile() {
         <Stack mb={"lg"}>
           <TextInput
             styles={{
-              label: { color: "white" },
+              label: { color: MainColor.white },
+              input: { backgroundColor: MainColor.white },
+              required: { color: MainColor.red },
             }}
             withAsterisk
             label={"Nama"}
@@ -57,7 +60,9 @@ export default function CreateProfile() {
           />
           <TextInput
             styles={{
-              label: { color: "white" },
+              label: { color: MainColor.white },
+              input: { backgroundColor: MainColor.white },
+              required: { color: MainColor.red },
             }}
             withAsterisk
             icon={<IconAt size={15} />}
@@ -80,7 +85,9 @@ export default function CreateProfile() {
           />
           <TextInput
             styles={{
-              label: { color: "white" },
+              label: { color: MainColor.white },
+              input: { backgroundColor: MainColor.white },
+              required: { color: MainColor.red },
             }}
             withAsterisk
             label="Alamat"
@@ -96,7 +103,10 @@ export default function CreateProfile() {
 
           <Select
             styles={{
-              label: { color: "white" },
+              label: { color: MainColor.white },
+              input: { backgroundColor: MainColor.white },
+              required: { color: MainColor.red },
+              dropdown: { backgroundColor: MainColor.white }
             }}
             withAsterisk
             label="Jenis Kelamin"