Merge pull request #217 from bipproduction/Nico/27Des2024

Nico/27 des2024

src/app/zCoba/test1/page.tsx

@@ -1,54 +0,0 @@
-"use client";
-import {
-  gs_admin_ntf,
-  gs_realtimeData,
-  IRealtimeData,
-} from "@/app/lib/global_state";
-import { Button, Stack } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { useAtom } from "jotai";
-import { WibuRealtime } from "wibu-pkg";
-import { v4 } from "uuid";
-import { useState } from "react";
-const angka = 10;
-export default function Page() {
-  const [dataRealtime, setDataRealtime] = useAtom(gs_realtimeData);
-  const [adminNtf, setAdminNtf] = useAtom(gs_admin_ntf);
-  const [notif, setNotif] = useState(angka);
-  
-  useShallowEffect(() => {
-    if (adminNtf) {
-      setNotif((e) => e + 1);
-    }
-  }, [adminNtf]);
-
-  async function onSend() {
-    const newData: IRealtimeData = {
-      appId: v4(),
-      status: "Publish",
-      userId: "user1",
-      pesan: "apa kabar",
-      title: "coba",
-      kategoriApp: "INVESTASI",
-    };
-
-    WibuRealtime.setData({
-      type: "message",
-      pushNotificationTo: "USER",
-      dataMessage: newData,
-    });
-  }
-
-  return (
-    <Stack p={"md"} align="center" justify="center" h={"80vh"}>
-      {notif}
-      <Button
-        onClick={() => {
-          onSend();
-        }}
-      >
-        Dari test 1
-      </Button>
-    </Stack>
-  );
-}

src/app_modules/_global/color/color_pallet.ts

@@ -1,7 +1,10 @@
 export const MainColor = {
   black: "#202020",
   darkblue: "#001D3D",
-  yellow: "#FFC300",
+  yellow: "#E1B525",
+  white: "#D4D0D0",
+  red: "#C74E4E",
+  orange: "#E58958"
 };
 
 export const AccentColor = {
@@ -10,5 +13,7 @@ export const AccentColor = {
   blue: "#00447D",
   softblue: "#007CBA",
   skyblue: "#00BFFF",
-  yellow: "#FFD60A",
+  yellow: "#E1B525",
 };
+//yellow: "#FFC300"
+//yellow: "#FFD60A"

src/app_modules/_global/component/box_information.tsx

@@ -31,7 +31,7 @@ export default function ComponentGlobal_BoxInformation({
             >
               * Report
             </Text>
-            <Text fz={fonsize ? fonsize : 12} c={"white"}>
+            <Text fz={fonsize ? fonsize : 12} c={MainColor.white}>
               {informasi}
             </Text>
           </Stack>
@@ -39,7 +39,7 @@ export default function ComponentGlobal_BoxInformation({
           <Group>
             <Text fz={fonsize ? fonsize : 12} c={"red"} fw={"bold"}>
               *{" "}
-              <Text span inherit c={"white"} fw={"normal"}>
+              <Text span inherit c={MainColor.white} fw={"normal"}>
                 {informasi}
               </Text>
             </Text>

src/app_modules/_global/component/button_create.tsx

@@ -48,7 +48,7 @@ export default function ComponentGlobal_CreateButton({
         )} */}
 
         {/* GA PAKE LOADING */}
-        <IconPencilPlus color="white" />
+        <IconPencilPlus color={MainColor.white} />
       </ActionIcon>
     </>
   );

src/app_modules/_global/component/comp_avatar_and_username.tsx

@@ -9,6 +9,7 @@ import ComponentGlobal_Loader from "./loader";
 import { funGlobal_CheckProfile } from "../fun/get";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";
+import { MainColor } from "../color";
 
 type IFontSize = "xs" | "sm" | "md" | "lg" | "xl";
 export function ComponentGlobal_AvatarAndUsername({
@@ -60,6 +61,7 @@ export function ComponentGlobal_AvatarAndUsername({
         <Grid.Col span={"auto"} style={{ minHeight: 50 }}>
           <Stack justify="center" h={30}>
             <Text
+              c={MainColor.white}
               fw={"bold"}
               fz={fontSize ? fontSize : "sm"}
               lineClamp={1}

src/app_modules/_global/component/comp_box_upload_image.tsx

@@ -1,5 +1,6 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 import { Box } from "@mantine/core";
+import { MainColor } from "../color";
 
 /**
  * 
@@ -28,6 +29,7 @@ export function ComponentGlobal_BoxUploadImage({
             height: "100%",
             borderStyle: "dashed",
             borderRadius: "5px",
+            borderColor: MainColor.white,
           }}
         >
           {children}

src/app_modules/_global/ui/ui_drawer.tsx

@@ -11,7 +11,7 @@ import {
 import { IconX } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { AccentColor } from "../color/color_pallet";
+import { AccentColor, MainColor } from "../color/color_pallet";
 import ComponentGlobal_Loader from "../component/loader";
 
 interface MODEL_DRAWER {
@@ -72,7 +72,7 @@ export default function UIGlobal_Drawer({
         <Stack spacing={"xs"}>
           <Group position="right">
             <ActionIcon onClick={close} variant="transparent">
-              <IconX color="white" />
+              <IconX color={MainColor.white} />
             </ActionIcon>
           </Group>
           <SimpleGrid cols={component.length < 4 ? component.length : 4}>
@@ -100,7 +100,7 @@ export default function UIGlobal_Drawer({
                   {e?.icon}
 
                 </ActionIcon>
-                <Text fz={"sm"} align="center" color="white">
+                <Text fz={"sm"} align="center" color={MainColor.white}>
                   {e?.name}
                 </Text>
               </Stack>

src/app_modules/_global/ui/ui_header_tamplate.tsx

@@ -67,7 +67,7 @@ export default function UIGlobal_LayoutHeaderTamplate({
             customButtonLeft
           ) : (
             <ActionIcon
-              c={"white"}
+              c={MainColor.white}
               variant="transparent"
               radius={"xl"}
               onClick={() => {

src/app_modules/_global/ui/ui_modal.tsx

@@ -33,7 +33,7 @@ export default function UIGlobal_Modal({
         }}
       >
         <Stack>
-          <Title order={6} color="white" align="center">
+          <Title order={6} color={MainColor.white} align="center">
             {title}
           </Title>
           <Group position="center">

src/app_modules/_global/ui/ui_splash.tsx

@@ -2,16 +2,17 @@
 
 import { Loader, Stack, ThemeIcon } from "@mantine/core";
 import UIGlobal_LayoutDefault from "./ui_layout_default";
+import { MainColor } from "../color";
 
 export default function UIGlobal_SplashScreen({ icon }: { icon: any }) {
   return (
     <>
       <UIGlobal_LayoutDefault>
         <Stack h={"90vh"} align="center" justify="center" spacing={"xl"}>
-          <ThemeIcon variant="transparent" size={300} c="white">
+          <ThemeIcon variant="transparent" size={300} c={MainColor.white}>
             {icon}
           </ThemeIcon>
-          <Loader variant="dots" color="white" />
+          <Loader variant="dots" color={MainColor.white} />
         </Stack>
       </UIGlobal_LayoutDefault>
     </>

src/app_modules/auth/login/view.tsx

@@ -56,18 +56,22 @@ export default function Login({ version }: { version: string }) {
       <UIGlobal_LayoutDefault>
         <Stack align="center" justify="center" h={"100vh"} spacing={100}>
           <Stack align="center" spacing={0}>
-            <Title order={3} c={MainColor.yellow}>
+            <Title order={3} c={MainColor.yellow} >
               WELCOME TO
             </Title>
-            <Title c={MainColor.yellow}>HIPMI APPS</Title>
+            <Title c={MainColor.yellow} >
+              HIPMI APPS
+            </Title>
           </Stack>
 
           <Stack w={300}>
             <Center>
-              <Text c={"white"}>Nomor telepon</Text>
+              <Text c={MainColor.white} >
+                Nomor telepon
+              </Text>
             </Center>
             <PhoneInput
-              inputStyle={{ width: "100%" }}
+              inputStyle={{ width: "100%" }}             
               defaultCountry="id"
               onChange={(val) => {
                 setPhone(val);
@@ -99,7 +103,7 @@ export default function Login({ version }: { version: string }) {
           </Stack>
 
           <Box pos={"fixed"} bottom={10}>
-            <Text fw={"bold"} c={"white"} fs={"italic"} fz={"xs"}>
+            <Text fw={"bold"} c={MainColor.white} fs={"italic"} fz={"xs"}>
               v {version}
             </Text>
           </Box>

src/app_modules/auth/logout/view.tsx

@@ -10,6 +10,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { auth_Logout } from "../fun/fun_logout";
 import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function Component_ButtonLogout({userId}: {userId: string}) {
   const router = useRouter();
@@ -70,9 +71,9 @@ export default function Component_ButtonLogout({userId}: {userId: string}) {
             setOpened(true);
           }}
         >
-          <IconLogout color="red" />
+          <IconLogout color={MainColor.red} />
         </ActionIcon>
-        <Text fw={"bold"} align="center" color="red">
+        <Text fw={"bold"} align="center" color={MainColor.red}>
           Keluar
         </Text>
       </Stack>

src/app_modules/auth/register/view.tsx

@@ -96,10 +96,10 @@ export default function Register() {
               REGISTRASI
             </Title>
 
-            <IconUserCircle size={100} color="white" />
+            <IconUserCircle size={100} color={MainColor.white} />
 
             <Stack spacing={"sm"} w={300}>
-              <Text align="center" c={"white"}>
+              <Text align="center" c={MainColor.white}>
                 Anda akan terdaftar dengan nomor berikut{" "}
                 <Text inherit span fw={"bold"}>
                   +{nomor}

src/app_modules/auth/validasi/skeleton.tsx

@@ -1,9 +1,28 @@
-import { Stack, Skeleton, Group } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Group, Skeleton, Stack } from "@mantine/core";
 
 export default function Validasi_SkeletonView() {
   return (
-    <>
-      <Stack align="center" justify="center" h={"100vh"} spacing={50}>
+    <Stack align="center" justify="center" h={"100vh"} spacing={50}>
+      <CustomSkeleton h={30} w={250} radius={"xl"} />
+      <Stack spacing={"md"} align="center">
+        <Stack mb={15}>
+          <CustomSkeleton h={20} w={250} radius={"xl"} />
+          <CustomSkeleton h={20} w={250} radius={"xl"} />
+        </Stack>
+
+        <Group mb={10}>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <CustomSkeleton key={i} h={50} w={50} radius={"sm"} />
+          ))}
+        </Group>
+        <CustomSkeleton h={20} w={250} radius={"xl"} />
+      </Stack>
+      <CustomSkeleton h={50} w={250} radius={"sm"} />
+    </Stack>
+  );
+}
+{/* <Stack align="center" justify="center" h={"100vh"} spacing={50}>
         <Skeleton h={30} w={250} radius={"xl"} />
         <Stack>
           <Skeleton h={20} w={250} radius={"xl"} />
@@ -19,7 +38,29 @@ export default function Validasi_SkeletonView() {
         <Skeleton h={20} w={250} radius={"xl"} />
 
         <Skeleton h={50} w={250} radius={"sm"} />
-      </Stack>
-    </>
-  );
-}
+      </Stack> */}
+
+// import { Stack, Skeleton, Group } from "@mantine/core";
+
+// export default function Validasi_SkeletonView() {
+//   return (
+//     <Stack align="center" justify="center" h={"100vh"} spacing={50}>
+//       <Skeleton h={30} w={250} radius={"xl"} />
+//       <Stack spacing={"md"} align="center">
+//       <Stack mb={15}>  
+//         <Skeleton h={20} w={250} radius={"xl"} />
+//         <Skeleton h={20} w={250} radius={"xl"} />
+//       </Stack>
+
+//       <Group mb={10}>
+//         {Array.from({ length: 4 }).map((_, i) => (
+//           <Skeleton key={i} h={50} w={50} radius={"sm"} />
+//         ))}
+//       </Group>
+
+//       <Skeleton h={20} w={250} radius={"xl"} />
+//         </Stack>
+//       <Skeleton h={50} w={250} radius={"sm"} />
+//     </Stack>
+//   );
+// }

src/app_modules/auth/validasi/view.tsx

@@ -197,8 +197,8 @@ export default function Validasi() {
 
               <Stack spacing={"md"} align="center">
                 <Stack spacing={0} align="center">
-                  <Text c={"white"}>Masukan 4 digit kode otp</Text>
-                  <Text c={"white"}>
+                  <Text c={MainColor.white}>Masukan 4 digit kode otp</Text>
+                  <Text c={MainColor.white}>
                     Yang dikirim ke{" "}
                     <Text span inherit fw={"bold"}>
                       {" "}
@@ -207,12 +207,14 @@ export default function Validasi() {
                   </Text>
                 </Stack>
                 <Center>
-                  <PinInput
+                    <PinInput
+                      
                     size="xl"
                     type={"number"}
                     ref={focusTrapRef}
                     spacing={"md"}
-                    mt={"md"}
+                      mt={"md"}
+                      styles={{ input: { backgroundColor: MainColor.white } }}
                     onChange={(val) => {
                       setInputOtp(val);
                     }}
@@ -220,7 +222,7 @@ export default function Validasi() {
                 </Center>
 
                 <Stack h={"5vh"} align="center" justify="center">
-                  <Text fs="italic" c={"white"}>
+                  <Text fs="italic" c={MainColor.white}>
                     Tidak menerima kode ?{" "}
                     {counter > 0 ? (
                       <Text fw={"bold"} inherit span>

src/app_modules/components/CustomSkeleton.tsx

@@ -0,0 +1,35 @@
+import { Skeleton, SkeletonProps, createStyles } from '@mantine/core';
+import { AccentColor } from '../_global/color';
+
+interface CustomSkeletonProps extends SkeletonProps {
+    isLoading?: boolean; 
+    className?: string;
+}
+
+const useStyles = createStyles((theme) => ({
+    skeleton: {
+      '&::before': {
+        backgroundColor: "#1F5B9E",
+      },
+      '&::after': {
+        backgroundColor: "#0F3055",
+      },
+    },
+}));
+
+const CustomSkeleton: React.FC<CustomSkeletonProps> = ({
+    isLoading = true,
+    className,
+    ...props
+}) => {
+    const { classes, cx } = useStyles();
+    return (
+        <Skeleton
+            className={cx(classes.skeleton, className)}
+            visible={isLoading}
+            {...props}
+        />
+    );
+};
+
+export default CustomSkeleton;

src/app_modules/crowd/main/view.tsx

@@ -50,7 +50,7 @@ export default function MainCrowd() {
               border: `2px solid ${AccentColor.blue}`,
               borderRadius: "10px",
               backgroundColor: MainColor.darkblue,
-              color: "white",
+              color: MainColor.white,
               // color: "gray",
             }}
             onClick={() => {
@@ -95,7 +95,7 @@ export default function MainCrowd() {
               border: `2px solid ${AccentColor.blue}`,
               borderRadius: "10px",
               backgroundColor: MainColor.darkblue,
-              color: "white",
+              color: MainColor.white,
             }}
             onClick={() => {
               setLoadingDon(true);

src/app_modules/event/component/box_list_status.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import {
   ComponentGlobal_CardLoadingOverlay,
   ComponentGlobal_CardStyles,
@@ -33,17 +33,17 @@ export default function ComponentEvent_BoxListStatus({
       >
         <Stack>
           <Group w={"100%"} position="apart" grow>
-            <Title order={5} lineClamp={1}>
+            <Title color={MainColor.white} order={5} lineClamp={1}>
               {data.title}
             </Title>
-            <Text align="right" fz={"sm"} lineClamp={1}>
+            <Text c={MainColor.white} align="right" fz={"sm"} lineClamp={1}>
               {new Intl.DateTimeFormat("id-ID", {
                 dateStyle: "medium",
               }).format(data.tanggal)}
             </Text>
           </Group>
 
-          <Text fz={"sm"} lineClamp={2}>
+          <Text c={MainColor.white} fz={"sm"} lineClamp={2}>
             {data.deskripsi}
           </Text>
         </Stack>

src/app_modules/event/component/card_view/card_beranda.tsx

@@ -1,4 +1,5 @@
 import { RouterEvent } from "@/app/lib/router_hipmi/router_event";
+import { MainColor } from "@/app_modules/_global/color";
 import {
   ComponentGlobal_AvatarAndUsername,
   ComponentGlobal_CardLoadingOverlay,
@@ -31,7 +32,7 @@ export function ComponentEvent_CardBeranda({ data }: { data: any }) {
             }}
           >
             <Group w={"100%"} position="apart" grow>
-              <Title order={5} lineClamp={1}>
+              <Title c={MainColor.white} order={5} lineClamp={1}>
                 {data.title}
               </Title>
               {/* <Text align="right" fz={"sm"} lineClamp={1}>
@@ -41,7 +42,7 @@ export function ComponentEvent_CardBeranda({ data }: { data: any }) {
               </Text> */}
             </Group>
 
-            <Text fz={"sm"} lineClamp={2}>
+            <Text c={MainColor.white} fz={"sm"} lineClamp={2}>
               {data.deskripsi}
             </Text>
           </Stack>

src/app_modules/event/component/detail/detail_data.tsx

@@ -3,6 +3,7 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
 import { Grid, Stack, Text, Title } from "@mantine/core";
 import { MODEL_EVENT } from "../../model/interface";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentEvent_DetailData({
   data,
@@ -13,42 +14,42 @@ export default function ComponentEvent_DetailData({
     <>
       <ComponentGlobal_CardStyles marginBottom={"16px"}>
         <Stack px={"sm"} spacing={"xl"}>
-          <Title lineClamp={2} align="center" w={"100%"} order={4}>
+          <Title color={MainColor.white} lineClamp={2} align="center" w={"100%"} order={4}>
             {data ? data?.title : null}
           </Title>
           <Grid>
             <Grid.Col span={4}>
-              <Text fw={"bold"}>Lokasi</Text>
+              <Text c={MainColor.white} fw={"bold"}>Lokasi</Text>
             </Grid.Col>
             <Grid.Col span={1}>:</Grid.Col>
             <Grid.Col span={"auto"}>
-              <Text>{data ? data?.lokasi : null}</Text>
+              <Text c={MainColor.white}>{data ? data?.lokasi : null}</Text>
             </Grid.Col>
           </Grid>
           <Grid>
             <Grid.Col span={4}>
-              <Text fw={"bold"}>Tipe Acara</Text>
+              <Text c={MainColor.white} fw={"bold"}>Tipe Acara</Text>
             </Grid.Col>
             <Grid.Col span={1}>:</Grid.Col>
             <Grid.Col span={"auto"}>
-              <Text>{data ? data.EventMaster_TipeAcara?.name : null}</Text>
+              <Text c={MainColor.white}>{data ? data.EventMaster_TipeAcara?.name : null}</Text>
             </Grid.Col>
           </Grid>
           <Stack spacing={"xs"}>
-            <Text fw={"bold"}>Tanggal & Waktu</Text>
+            <Text c={MainColor.white} fw={"bold"}>Tanggal & Waktu</Text>
             <Grid>
               <Grid.Col span={4}>
-                <Text fw={"bold"}>Mulai</Text>
+                <Text c={MainColor.white} fw={"bold"}>Mulai</Text>
               </Grid.Col>
               <Grid.Col span={1}>:</Grid.Col>
               <Grid.Col span={"auto"}>
-                <Text>
+                <Text c={MainColor.white}>
                   {" "}
                   {new Intl.DateTimeFormat("id-ID", {
                     dateStyle: "full",
                   }).format(data?.tanggal)}
                   ,{" "}
-                  <Text span inherit>
+                  <Text span inherit c={MainColor.white}>
                     {new Intl.DateTimeFormat("id-ID", {
                       timeStyle: "short",
                     }).format(data?.tanggal)}
@@ -58,17 +59,17 @@ export default function ComponentEvent_DetailData({
             </Grid>
             <Grid>
               <Grid.Col span={4}>
-                <Text fw={"bold"}>Selesai</Text>
+                <Text c={MainColor.white} fw={"bold"}>Selesai</Text>
               </Grid.Col>
               <Grid.Col span={1}>:</Grid.Col>
               <Grid.Col span={"auto"}>
-                <Text>
+                <Text c={MainColor.white}>
                   {" "}
                   {new Intl.DateTimeFormat("id-ID", {
                     dateStyle: "full",
                   }).format(data?.tanggalSelesai)}
                   ,{" "}
-                  <Text span inherit>
+                  <Text span inherit c={MainColor.white}>
                     {new Intl.DateTimeFormat("id-ID", {
                       timeStyle: "short",
                     }).format(data?.tanggalSelesai)}
@@ -79,8 +80,8 @@ export default function ComponentEvent_DetailData({
           </Stack>
 
           <Stack spacing={2}>
-            <Text fw={"bold"}>Deskripsi</Text>
-            <Text>{data ? data?.deskripsi : null}</Text>
+            <Text c={MainColor.white} fw={"bold"}>Deskripsi</Text>
+            <Text c={MainColor.white}>{data ? data?.deskripsi : null}</Text>
           </Stack>
         </Stack>
       </ComponentGlobal_CardStyles>

src/app_modules/event/component/detail/detail_main.tsx

@@ -12,6 +12,7 @@ import { API_RouteEvent } from "@/app/lib/api_user_router/route_api_event";
 import { Event_ComponentSkeletonDetail } from "../skeleton/comp_skeleton_detail";
 import moment from "moment";
 import "moment/locale/id";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentEvent_DetailMainData({
   eventId,
@@ -44,37 +45,37 @@ export default function ComponentEvent_DetailMainData({
             />
 
             <Stack spacing={"xl"}>
-              <Title align="center" order={4}>
+              <Title color={MainColor.white} align="center" order={4}>
                 {data ? data.title : null}
               </Title>
               <Grid>
                 <Grid.Col span={4}>
-                  <Text fw={"bold"}>Lokasi</Text>
+                  <Text c={MainColor.white} fw={"bold"}>Lokasi</Text>
                 </Grid.Col>
                 <Grid.Col span={1}>:</Grid.Col>
                 <Grid.Col span={"auto"}>
-                  <Text>{data ? data.lokasi : null}</Text>
+                  <Text c={MainColor.white}>{data ? data.lokasi : null}</Text>
                 </Grid.Col>
               </Grid>
               <Grid>
                 <Grid.Col span={4}>
-                  <Text fw={"bold"}>Tipe Acara</Text>
+                  <Text c={MainColor.white} fw={"bold"}>Tipe Acara</Text>
                 </Grid.Col>
                 <Grid.Col span={1}>:</Grid.Col>
                 <Grid.Col span={"auto"}>
-                  <Text>{data ? data.EventMaster_TipeAcara.name : null}</Text>
+                  <Text c={MainColor.white}>{data ? data.EventMaster_TipeAcara.name : null}</Text>
                 </Grid.Col>
               </Grid>
 
               <Stack spacing={"xs"}>
-                <Text fw={"bold"}>Tanggal & Waktu</Text>
+                <Text c={MainColor.white} fw={"bold"}>Tanggal & Waktu</Text>
                 <Grid>
                   <Grid.Col span={4}>
-                    <Text fw={"bold"}>Mulai</Text>
+                    <Text c={MainColor.white} fw={"bold"}>Mulai</Text>
                   </Grid.Col>
                   <Grid.Col span={1}>:</Grid.Col>
                   <Grid.Col span={"auto"}>
-                    <Text>
+                    <Text c={MainColor.white}>
                       {moment(
                         data.tanggal?.toLocaleString("id-ID", {
                           dateStyle: "full",
@@ -85,11 +86,11 @@ export default function ComponentEvent_DetailMainData({
                 </Grid>
                 <Grid>
                   <Grid.Col span={4}>
-                    <Text fw={"bold"}>Selesai</Text>
+                    <Text c={MainColor.white} fw={"bold"}>Selesai</Text>
                   </Grid.Col>
                   <Grid.Col span={1}>:</Grid.Col>
                   <Grid.Col span={"auto"}>
-                    <Text>
+                    <Text c={MainColor.white}>
                       {moment(
                         data.tanggalSelesai?.toLocaleString("id-ID", {
                           dateStyle: "full",
@@ -101,8 +102,8 @@ export default function ComponentEvent_DetailMainData({
               </Stack>
 
               <Stack spacing={2}>
-                <Text fw={"bold"}>Deskripsi</Text>
-                <Text>{data ? data?.deskripsi : null}</Text>
+                <Text c={MainColor.white} fw={"bold"}>Deskripsi</Text>
+                <Text c={MainColor.white}>{data ? data?.deskripsi : null}</Text>
               </Stack>
             </Stack>
           </Stack>

src/app_modules/event/component/detail/list_peserta.tsx

@@ -34,6 +34,7 @@ import { API_RouteEvent } from "@/app/lib/api_user_router/route_api_event";
 import Event_ComponentSkeletonListPeserta from "../skeleton/comp_skeleton_list_peserta";
 import { ScrollOnly } from "next-scroll-loader";
 import { event_newGetListPesertaById } from "../../fun";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentEvent_ListPeserta({
   total,
@@ -74,12 +75,12 @@ export default function ComponentEvent_ListPeserta({
         <ComponentGlobal_CardStyles>
           <Stack spacing={"md"} px={"sm"}>
             <Center>
-              <Title order={5}>Daftar Peserta ({total})</Title>
+              <Title color={MainColor.white} order={5}>Daftar Peserta ({total})</Title>
             </Center>
 
             {_.isEmpty(data) ? (
               <Center>
-                <Text fz={"xs"} fw={"bold"}>
+                <Text c={MainColor.white} fz={"xs"} fw={"bold"}>
                   - Tidak ada peserta -
                 </Text>
               </Center>

src/app_modules/event/component/skeleton/comp_skeleton_beranda.tsx

@@ -1,5 +1,6 @@
 import { AccentColor } from "@/app_modules/_global/color";
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { Grid, Group, Paper, Skeleton, Stack, Text } from "@mantine/core";
 
 export default function Event_ComponentSkeletonBeranda() {
@@ -10,16 +11,16 @@ export default function Event_ComponentSkeletonBeranda() {
           <Stack>
             <Grid align="center">
               <Grid.Col span={"content"}>
-                <Skeleton radius={"100%"} h={50} w={50} />
+                <CustomSkeleton radius={"100%"} h={50} w={50} />
               </Grid.Col>
               <Grid.Col span={"auto"}>
-                <Skeleton h={20} w={"50%"} />
+                <CustomSkeleton h={20} w={"50%"} />
               </Grid.Col>
             </Grid>
 
             <Stack>
-              <Skeleton h={20} w={"100%"} />
-              <Skeleton h={20} w={"100%"} />
+              <CustomSkeleton h={20} w={"100%"} />
+              <CustomSkeleton h={20} w={"100%"} />
             </Stack>
           </Stack>
         </ComponentGlobal_CardStyles>

src/app_modules/event/component/skeleton/comp_skeleton_list_peserta.tsx

@@ -1,5 +1,6 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Stack, Center, Skeleton, Grid } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Center, Grid, Stack } from "@mantine/core";
 
 export default function Event_ComponentSkeletonListPeserta() {
   return (
@@ -7,20 +8,20 @@ export default function Event_ComponentSkeletonListPeserta() {
       <ComponentGlobal_CardStyles>
         <Stack spacing={"lg"}>
           <Center>
-            <Skeleton height={20} width={"50%"} />
+            <CustomSkeleton height={20} width={"50%"} />
           </Center>
 
           <Stack>
             {Array.from(new Array(3)).map((e, i) => (
               <Grid key={i} align="center">
                 <Grid.Col span={"content"}>
-                  <Skeleton radius={"100%"} h={30} w={30} />
+                  <CustomSkeleton radius={"100%"} h={30} w={30} />
                 </Grid.Col>
                 <Grid.Col span={"auto"}>
-                  <Skeleton h={20} w={"50%"} />
+                  <CustomSkeleton h={20} w={"50%"} />
                 </Grid.Col>
                 <Grid.Col span={2}>
-                  <Skeleton h={20} w={"50%"} />
+                  <CustomSkeleton h={20} w={"50%"} />
                 </Grid.Col>
               </Grid>
             ))}

src/app_modules/event/create/create.tsx

@@ -15,6 +15,7 @@ import moment from "moment";
 import { useState } from "react";
 import { Event_ComponentCreateButton } from "../component";
 import ComponentEvent_ErrorMaximalInput from "../component/error_maksimal_input";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function Event_Create({
   listTipeAcara,
@@ -47,8 +48,14 @@ export default function Event_Create({
         <TextInput
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            required: {
+              color: MainColor.red,
+            },
+            input: {
+              backgroundColor: MainColor.white,
+            }
           }}
           label="Judul"
           placeholder="Masukan judul"
@@ -64,8 +71,14 @@ export default function Event_Create({
         <Select
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            required: {
+              color: MainColor.red,
+            },
+            input: {
+              backgroundColor: MainColor.white,
+            }
           }}
           withAsterisk
           label="Tipe Acara"
@@ -85,8 +98,14 @@ export default function Event_Create({
         <TextInput
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            required: {
+              color: MainColor.red,
+            },
+            input: {
+              backgroundColor: MainColor.white,
+            }
           }}
           label="Lokasi"
           placeholder="Masukan lokasi acara"
@@ -104,8 +123,14 @@ export default function Event_Create({
         <DateTimePicker
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            required: {
+              color: MainColor.red,
+            },
+            input: {
+              backgroundColor: MainColor.white,
+            }
           }}
           excludeDate={(date) => {
             return moment(date).diff(Date.now(), "days") < 0;
@@ -144,8 +169,14 @@ export default function Event_Create({
         <DateTimePicker
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            required: {
+              color: MainColor.red,
+            },
+            input: {
+              backgroundColor: MainColor.white,
+            }
           }}
           excludeDate={(date) => {
             return moment(date).diff(Date.now(), "days") < 0;
@@ -187,8 +218,14 @@ export default function Event_Create({
           <Textarea
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              required: {
+                color: MainColor.red,
+              },
+              input: {
+                backgroundColor: MainColor.white,
+              }
             }}
             label="Deskripsi"
             placeholder="Deskripsikan acara yang akan di selenggarakan"

src/app_modules/event/main/layout.tsx

@@ -70,7 +70,7 @@ export default function LayoutEvent_Main({
                 <ActionIcon
                   // disabled={e.path === "" ? true : false}
                   variant="transparent"
-                  c={hotMenu === i ? MainColor.yellow : "white"}
+                  c={hotMenu === i ? MainColor.yellow : MainColor.white}
                   onClick={() =>
                     e.path === ""
                       ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
@@ -80,7 +80,7 @@ export default function LayoutEvent_Main({
                   {e.icon}
                 </ActionIcon>
                 <Text
-                  c={hotMenu === i ? MainColor.yellow : "white"}
+                  c={hotMenu === i ? MainColor.yellow : MainColor.white}
                   fz={"xs"}
                   lineClamp={1}
                 >

src/app_modules/event/main/riwayat/index.tsx

@@ -71,11 +71,11 @@ export default function Event_Riwayat({
                 style={{
                   transition: "0.5s",
                   backgroundColor:
-                    changeStatus === e.id ? MainColor.yellow : "white",
+                    changeStatus === e.id ? MainColor.yellow : MainColor.white,
                   border:
                     changeStatus === e.id
                       ? `1px solid ${AccentColor.yellow}`
-                      : `1px solid white`,
+                      : `1px solid ${MainColor.white}`,
                 }}
               >
                 {e.label}

src/app_modules/event/main/status_page/index.tsx

@@ -61,7 +61,7 @@ export default function Event_StatusPage({
                 style={{
                   transition: "0.5s",
                   backgroundColor:
-                    changeStatus === e.id ? MainColor.yellow : "white",
+                    changeStatus === e.id ? MainColor.yellow : MainColor.white,
                   border:
                     changeStatus === e.id
                       ? `1px solid ${AccentColor.yellow}`

src/app_modules/investasi/_component/main/com_card_beranda_new.tsx

@@ -30,7 +30,7 @@ export function Investasi_ComponentCardBerandaNew({ data }: { data: IDataInvesta
                   </Grid.Col>
                   <Grid.Col span={6}>
                      <Stack>
-                        <Text fw={"bold"} align="center" lineClamp={2}>
+                        <Text c={MainColor.white} fw={"bold"} align="center" lineClamp={2}>
                            {data?.title}
                         </Text>
 
@@ -40,6 +40,7 @@ export function Investasi_ComponentCardBerandaNew({ data }: { data: IDataInvesta
                            color={MainColor.yellow}
                            size="xl"
                            radius="xl"
+                           style={{ backgroundColor: MainColor.white }}
                            styles={{
                               label: { color: MainColor.black },
                            }}
@@ -84,15 +85,15 @@ export function Investasi_ComponentCardBerandaNew({ data }: { data: IDataInvesta
                                     </Group>
                                  ) : (
                                     <Group position="right" spacing={"xs"}>
-                                       <Text truncate>Sisa waktu:</Text>
-                                       <Text truncate>
+                                       <Text c={MainColor.white} truncate>Sisa waktu:</Text>
+                                       <Text c={MainColor.white} truncate>
                                           {Number(data?.pencarianInvestor) -
                                              moment(new Date()).diff(
                                                 new Date(data?.countDown),
                                                 "days"
                                              )}
                                        </Text>
-                                       <Text truncate>Hari</Text>
+                                       <Text c={MainColor.white} truncate>Hari</Text>
                                     </Group>
                                  )}
                               </Box>

src/app_modules/investasi/_component/main/comp_footer_main.tsx

@@ -53,7 +53,7 @@ export function Investasi_ComponentFooterMain() {
             <ActionIcon
               // disabled={e.path === "" ? true : false}
               variant="transparent"
-              c={hotMenu === i ? MainColor.yellow : "white"}
+              c={hotMenu === i ? MainColor.yellow : MainColor.white}
               onClick={() => {
                 router.push(e.route, { scroll: false });
                 setHotMenu(i);
@@ -62,7 +62,7 @@ export function Investasi_ComponentFooterMain() {
               {e.icon}
             </ActionIcon>
             <Text
-              c={hotMenu === i ? MainColor.yellow : "white"}
+              c={hotMenu === i ? MainColor.yellow : MainColor.white}
               fz={"xs"}
               lineClamp={1}
             >

src/app_modules/investasi/_view/main/skeleton_beranda.tsx

@@ -1,5 +1,6 @@
 import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
-import { Box, Grid, Skeleton } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box, Grid } from "@mantine/core";
 
 export default function SkeletonInvestasiBursa() {
    return (
@@ -8,7 +9,7 @@ export default function SkeletonInvestasiBursa() {
             <ComponentGlobal_CardStyles key={index}>
                <Grid>
                   <Grid.Col span={6}>
-                     <Skeleton w={"100%"} height={100} radius="md" />
+                     <CustomSkeleton w={"100%"} height={100} radius="md" />
                   </Grid.Col>
                   <Grid.Col span={6}>
                      <Box>
@@ -16,7 +17,7 @@ export default function SkeletonInvestasiBursa() {
                            <Box key={i} py={5}>
                               <Grid align="center">
                                  <Grid.Col span={12}>
-                                    <Skeleton w={"100%"} h={23} />
+                                    <CustomSkeleton w={"100%"} h={23} />
                                  </Grid.Col>
                               </Grid>
                            </Box>

src/app_modules/katalog/component/drawer_katalog_new.tsx

@@ -3,7 +3,7 @@ import {
   RouterPortofolio,
   RouterProfile,
 } from "@/app/lib/router_hipmi/router_katalog";
-import { AccentColor } from "@/app_modules/_global/color";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import {
   gs_admin_navbar_menu,
   gs_admin_navbar_subMenu,
@@ -48,25 +48,25 @@ export default function DrawerKatalogNew({
     {
       id: "1",
       name: "Edit profile",
-      icon: <IconEdit />,
+      icon: <IconEdit color={MainColor.white} />,
       path: RouterProfile.edit + param.id,
     },
     {
       id: "2",
       name: "Ubah foto profile",
-      icon: <IconPhotoEdit />,
+      icon: <IconPhotoEdit color={MainColor.white} />,
       path: RouterProfile.update_foto_profile + param.id,
     },
     {
       id: "3",
       name: "Ubah latar belakang",
-      icon: <IconPolaroid />,
+      icon: <IconPolaroid color={MainColor.white} />,
       path: RouterProfile.update_foto_background + param.id,
     },
     {
       id: "4",
       name: "Tambah portofolio",
-      icon: <IconPencilPlus />,
+      icon: <IconPencilPlus color={MainColor.white} />,
       path: RouterPortofolio.create + param.id,
     },
   ];
@@ -95,7 +95,7 @@ export default function DrawerKatalogNew({
             borderRight: `1px solid ${AccentColor.blue}`,
             borderLeft: `1px solid ${AccentColor.blue}`,
             borderRadius: "20px 20px 0px 0px",
-            color: "white",
+            color: MainColor.white,
             paddingBottom: "5%",
           },
         }}
@@ -103,7 +103,7 @@ export default function DrawerKatalogNew({
         <Stack spacing={"xs"}>
           <Group position="right">
             <ActionIcon onClick={close} variant="transparent">
-              <IconX color="white" />
+              <IconX color={MainColor.white} />
             </ActionIcon>
           </Group>
           <SimpleGrid cols={4}>
@@ -113,10 +113,10 @@ export default function DrawerKatalogNew({
                   router.push(e.path, { scroll: false });
                 }}
               >
-                <ActionIcon variant="transparent" c="white" >
+                <ActionIcon variant="transparent" c={MainColor.white} >
                   {e.icon}
                 </ActionIcon>
-                <Text align="center" color="white">
+                <Text align="center" color={MainColor.white}>
                   {e.name}
                 </Text>
               </Stack>
@@ -136,7 +136,7 @@ export default function DrawerKatalogNew({
                     });
                   }}
                 >
-                  <IconDashboard />
+                  <IconDashboard color={MainColor.white} />
                 </ActionIcon>
                 <Text align="center" color="white">
                   Dashboard Admin

src/app_modules/katalog/portofolio/component/button_delete_new.tsx

@@ -8,6 +8,7 @@ import { useParams, useRouter } from "next/navigation";
 import { useState } from "react";
 import { apiDeletePortofolio, apiGetOnePortofolioById } from "../lib/api_portofolio";
 import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentPortofolio_ButtonDeleteNew() {
    const param = useParams<{ id: string }>()
@@ -59,7 +60,7 @@ export default function ComponentPortofolio_ButtonDeleteNew() {
          {userLoginId === dataPorto?.authorId ? (
             <Button
                radius={"xl"}
-               bg={"red"}
+               bg={MainColor.red}
                color="red"
                onClick={() => {
                   setModal(true)

src/app_modules/katalog/portofolio/component/button_more_new.tsx

@@ -8,6 +8,7 @@ import { useParams } from "next/navigation";
 import { useState } from "react";
 import { apiGetOnePortofolioById } from "../lib/api_portofolio";
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import { MainColor } from "@/app_modules/_global/color";
 
 export default function ComponentPortofolio_ButtonMoreNew() {
    const param = useParams<{ id: string }>()
@@ -20,31 +21,31 @@ export default function ComponentPortofolio_ButtonMoreNew() {
       {
          id: "1",
          name: "Edit detail ",
-         icon: <IconEdit />,
+         icon: <IconEdit color={MainColor.white} />,
          path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
       },
       {
          id: "2",
          name: "Edit logo ",
-         icon: <IconPhotoEdit />,
+         icon: <IconPhotoEdit color={MainColor.white} />,
          path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
       },
       {
          id: "3",
          name: "Edit sosial media",
-         icon: <IconId />,
+         icon: <IconId color={MainColor.white} />,
          path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
       },
       {
          id: "4",
          name: "Edit data map",
-         icon: <IconMapPin2 />,
+         icon: <IconMapPin2 color={MainColor.white} />,
          path: RouterMap.edit + `${param.id}`,
       },
       {
          id: "5",
          name: "Custom pin map",
-         icon: <IconMapPin />,
+         icon: <IconMapPin color={MainColor.white} />,
          path: RouterMap.custom_pin + `${param.id}`,
       },
    ];
@@ -53,31 +54,31 @@ export default function ComponentPortofolio_ButtonMoreNew() {
       {
          id: "1",
          name: "Edit detail ",
-         icon: <IconEdit />,
+         icon: <IconEdit color={MainColor.white} />,
          path: RouterPortofolio.edit_data_bisnis + `${param.id}`,
       },
       {
          id: "2",
          name: "Edit logo ",
-         icon: <IconPhotoEdit />,
+         icon: <IconPhotoEdit color={MainColor.white} />,
          path: RouterPortofolio.edit_logo_bisnis + `${param.id}`,
       },
       {
          id: "3",
          name: "Edit sosial media",
-         icon: <IconId />,
+         icon: <IconId color={MainColor.white} />,
          path: RouterPortofolio.edit_medsos_bisnis + `${param.id}`,
       },
       {
          id: "4",
          name: "Edit data map",
-         icon: <IconMapPin2 />,
+         icon: <IconMapPin2 color={MainColor.white} />,
          path: RouterMap.create + `${param.id}`,
       },
       {
          id: "5",
          name: "Custom pin map",
-         icon: <IconMapPin />,
+         icon: <IconMapPin color={MainColor.white} />,
          path: RouterMap.custom_pin + `${param.id}`,
       },
    ];
@@ -107,7 +108,7 @@ export default function ComponentPortofolio_ButtonMoreNew() {
       <>
          {userLoginId === authorId ? (
             <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
-               <IconDotsVertical color="white" />
+               <IconDotsVertical color={MainColor.white} />
             </ActionIcon>
          ) : (
             <ActionIcon disabled variant="transparent"></ActionIcon>

src/app_modules/katalog/portofolio/component/card_view_daftar.tsx

@@ -34,7 +34,7 @@ export function ComponentPortofolio_DaftarBoxView({
       >
         <Group position="apart">
           <Stack spacing={0} w={"80%"}>
-            <Text fw={"bold"} lineClamp={1} w={"80%"}>
+            <Text c={MainColor.white} fw={"bold"} lineClamp={1} w={"80%"}>
               {data?.namaBisnis}
             </Text>
             <Text fz={10} c={MainColor.yellow}>
@@ -52,7 +52,7 @@ export function ComponentPortofolio_DaftarBoxView({
 
 
             {/* GA PAKE LOADING */}
-            <IconCaretRight color="white" size={25} />
+            <IconCaretRight color={MainColor.white} size={25} />
           </Stack>
         </Group>
       </Paper>

src/app_modules/katalog/portofolio/create/view.tsx

@@ -67,8 +67,14 @@ export default function CreatePortofolio({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red,
+              }
             }}
             withAsterisk
             label="Nama Bisnis"
@@ -82,10 +88,17 @@ export default function CreatePortofolio({
             }}
           />
           <Select
+            
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red,
+              }
             }}
             withAsterisk
             label="Bidang Bisnis"
@@ -104,8 +117,14 @@ export default function CreatePortofolio({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red,
+              }
             }}
             withAsterisk
             label="Alamat Bisnis"
@@ -121,8 +140,14 @@ export default function CreatePortofolio({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red,
+              }
             }}
             withAsterisk
             label="Nomor Telepon "
@@ -139,8 +164,14 @@ export default function CreatePortofolio({
             <Textarea
               styles={{
                 label: {
-                  color: "white",
+                  color: MainColor.white,
                 },
+                input: {
+                  backgroundColor: MainColor.white
+                },
+                required: {
+                  color: MainColor.red,
+                }
               }}
               maxLength={300}
               autosize
@@ -164,7 +195,7 @@ export default function CreatePortofolio({
         </Stack>
 
         <Stack>
-          <ComponentGlobal_BoxInformation informasi="Upload Logo Bisnis Anda!" />
+          <ComponentGlobal_BoxInformation informasi="Upload Logo Bisnis Anda" />
           <ComponentGlobal_BoxUploadImage>
             {img ? (
               <AspectRatio ratio={1 / 1} mah={265} mx={"auto"}>
@@ -177,8 +208,8 @@ export default function CreatePortofolio({
               </AspectRatio>
             ) : (
               <Stack spacing={5} justify="center" align="center" h={"100%"}>
-                <Title order={3}>Upload Logo Bisnis</Title>
-                <Text fs={"italic"} fz={10} align="center">
+                <Title c={MainColor.white} order={3}>Upload Logo Bisnis</Title>
+                <Text c={MainColor.white} fs={"italic"} fz={10} align="center">
                   Masukan logo bisnis anda untuk ditampilkan dalam portofolio
                 </Text>
               </Stack>
@@ -275,8 +306,11 @@ export default function CreatePortofolio({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              input: {
+                backgroundColor: MainColor.white
+              }
             }}
             label="Facebook"
             maxLength={100}
@@ -291,8 +325,11 @@ export default function CreatePortofolio({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              input: {
+                backgroundColor: MainColor.white
+              }
             }}
             label="Instagram"
             maxLength={100}
@@ -307,8 +344,11 @@ export default function CreatePortofolio({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              input: {
+                backgroundColor: MainColor.white
+              }
             }}
             label="Tiktok"
             maxLength={100}
@@ -323,8 +363,11 @@ export default function CreatePortofolio({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              input: {
+                backgroundColor: MainColor.white
+              }
             }}
             label="Twitter"
             maxLength={100}
@@ -339,8 +382,11 @@ export default function CreatePortofolio({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white,
               },
+              input: {
+                backgroundColor: MainColor.white
+              }
             }}
             label="Youtube"
             maxLength={100}

src/app_modules/katalog/portofolio/edit/data/ui_edit_data.tsx

@@ -37,8 +37,14 @@ export default function Portofolio_EditDataBisnis({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red
+              }
             }}
             withAsterisk
             value={value.namaBisnis}
@@ -62,8 +68,14 @@ export default function Portofolio_EditDataBisnis({
           <Select
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red
+              }
             }}
             withAsterisk
             value={value.MasterBidangBisnis.id}
@@ -85,8 +97,14 @@ export default function Portofolio_EditDataBisnis({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red
+              }
             }}
             withAsterisk
             value={value.alamatKantor}
@@ -110,8 +128,14 @@ export default function Portofolio_EditDataBisnis({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red
+              }
             }}
             withAsterisk
             value={value.tlpn}
@@ -137,8 +161,14 @@ export default function Portofolio_EditDataBisnis({
             <Textarea
               styles={{
                 label: {
-                  color: "white",
+                  color: MainColor.white
                 },
+                input: {
+                  backgroundColor: MainColor.white
+                },
+                required: {
+                  color: MainColor.red
+                }
               }}
               autosize
               minRows={2}

src/app_modules/katalog/portofolio/edit/medsos/ui_edit_medsos.tsx

@@ -34,15 +34,21 @@ export default function Portofolio_EditMedsosBisnis({
           border: `2px solid ${AccentColor.blue}`,
           borderRadius: "10px ",
           padding: "15px",
-          color: "white",
+          color: MainColor.white,
         }}
       >
         <Stack px={"sm"}>
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red
+              }
             }}
             label="Facebook"
             value={medsos.facebook}
@@ -57,8 +63,14 @@ export default function Portofolio_EditMedsosBisnis({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red
+              }
             }}
             label="Instagram"
             value={medsos.instagram}
@@ -73,8 +85,14 @@ export default function Portofolio_EditMedsosBisnis({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red
+              }
             }}
             label="Tiktok"
             value={medsos.tiktok}
@@ -89,8 +107,14 @@ export default function Portofolio_EditMedsosBisnis({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red
+              }
             }}
             label="Twitter"
             value={medsos.twitter}
@@ -105,8 +129,14 @@ export default function Portofolio_EditMedsosBisnis({
           <TextInput
             styles={{
               label: {
-                color: "white",
+                color: MainColor.white
               },
+              input: {
+                backgroundColor: MainColor.white
+              },
+              required: {
+                color: MainColor.red
+              }
             }}
             label="Youtube"
             value={medsos.youtube}

src/app_modules/katalog/portofolio/ui/ui_detail_data_new.tsx

@@ -1,12 +1,12 @@
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
-import { Paper, Stack, Group, Title, SimpleGrid, Box, Grid, Divider, Text } from "@mantine/core";
-import { IconBuildingSkyscraper, IconListDetails, IconPhoneCall, IconMapPin, IconPinned } from "@tabler/icons-react";
-import { useState } from "react";
-import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
-import { useParams } from "next/navigation";
-import { apiGetOnePortofolioById } from "../lib/api_portofolio";
+import { Box, Divider, Grid, Group, Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
+import { IconBuildingSkyscraper, IconListDetails, IconMapPin, IconPhoneCall, IconPinned } from "@tabler/icons-react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { apiGetOnePortofolioById } from "../lib/api_portofolio";
+import { IDetailPortofolioBisnis } from "../lib/type_portofolio";
 import SkeletonDetailBisnis from "./ui_skeleton_detail_bisnis";
 
 export default function Portofolio_UiDetailDataNew() {
@@ -41,7 +41,7 @@ export default function Portofolio_UiDetailDataNew() {
                border: `2px solid ${AccentColor.blue}`,
                borderRadius: "10px ",
                padding: "15px",
-               color: "white",
+               color: MainColor.white,
             }}
          >
             {

src/app_modules/katalog/portofolio/ui/ui_detail_map_new.tsx

@@ -1,16 +1,17 @@
 import { APIs } from "@/app/lib";
-import { AccentColor } from "@/app_modules/_global/color";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { ComponentMap_DetailData, ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
 import { defaultMapZoom } from "@/app_modules/map/lib/default_lat_long";
-import { Paper, Stack, Title, Avatar, Skeleton, Text } from "@mantine/core";
+import { Avatar, Paper, Stack, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import "mapbox-gl/dist/mapbox-gl.css";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import { AttributionControl, Map, Marker, NavigationControl, ScaleControl, } from "react-map-gl";
-import { IDetailPortofolioLokasi } from "../lib/type_portofolio";
 import { apiGetOnePortofolioById } from "../lib/api_portofolio";
-import { useShallowEffect } from "@mantine/hooks";
-import { ComponentMap_DetailData, ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { IDetailPortofolioLokasi } from "../lib/type_portofolio";
 
 export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: string }) {
    const [loading, setLoading] = useState(true)
@@ -46,7 +47,7 @@ export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: stri
                border: `2px solid ${AccentColor.blue}`,
                borderRadius: "10px ",
                padding: "15px",
-               color: "white",
+               color: MainColor.white,
             }}
          >
             <Stack spacing={0}>
@@ -55,7 +56,7 @@ export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: stri
                </Title>
                {
                   loading ?
-                     <Skeleton radius={"md"} w={"100%"} h={100} />
+                     <CustomSkeleton radius={"md"} w={"100%"} h={100} />
                      :
                      dataPorto?.mapId === null || dataPorto?.mapId === undefined ?
                         <ComponentGlobal_IsEmptyData text="Tidak ada data" height={10} /> 

src/app_modules/katalog/portofolio/ui/ui_detail_media_new.tsx

@@ -1,11 +1,12 @@
-import { AccentColor } from "@/app_modules/_global/color";
-import { Paper, Title, Stack, Grid, Text, Skeleton, Box } from "@mantine/core";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box, Grid, Paper, Stack, Text, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconBrandFacebook, IconBrandInstagram, IconBrandTiktok, IconBrandTwitter, IconBrandYoutube } from "@tabler/icons-react";
 import { useParams } from "next/navigation";
 import { useState } from "react";
-import { IDetailPortofolioSosmed } from "../lib/type_portofolio";
 import { apiGetOnePortofolioById } from "../lib/api_portofolio";
-import { useShallowEffect } from "@mantine/hooks";
+import { IDetailPortofolioSosmed } from "../lib/type_portofolio";
 
 export default function Portofolio_UiSosialMediaNew() {
    const [loading, setLoading] = useState(true)
@@ -40,7 +41,7 @@ export default function Portofolio_UiSosialMediaNew() {
                border: `2px solid ${AccentColor.blue}`,
                borderRadius: "10px ",
                padding: "15px",
-               color: "white",
+               color: MainColor.white,
             }}
          >
             <Title order={6}>Media Sosial Bisnis</Title>
@@ -51,10 +52,10 @@ export default function Portofolio_UiSosialMediaNew() {
                         <Box key={index} py={5}>
                            <Grid align="center">
                               <Grid.Col span={1}>
-                                 <Skeleton w={25} h={25} />
+                                 <CustomSkeleton w={25} h={25} />
                               </Grid.Col>
                               <Grid.Col span={11}>
-                                 <Skeleton w={"100%"} h={15} />
+                                 <CustomSkeleton w={"100%"} h={15} />
                               </Grid.Col>
                            </Grid>
                         </Box>

src/app_modules/katalog/portofolio/ui/ui_skeleton_detail_bisnis.tsx

@@ -1,3 +1,4 @@
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { Box, Grid, Group, Skeleton, Stack } from "@mantine/core";
 
 export default function SkeletonDetailBisnis() {
@@ -5,7 +6,15 @@ export default function SkeletonDetailBisnis() {
       <Box>
          <Grid>
             <Grid.Col span={6}>
-               <Skeleton w={"100%"} height={200} radius="md" />
+               <CustomSkeleton w={"60%"} height={15} radius="md" />
+            </Grid.Col>
+            <Grid.Col span={6}>
+               <CustomSkeleton w={"100%"} height={15} radius="md" />
+            </Grid.Col>
+         </Grid>
+         <Grid>
+            <Grid.Col span={6}>
+               <CustomSkeleton w={"100%"} height={200} radius="md" />
             </Grid.Col>
             <Grid.Col span={6}>
                <Box>
@@ -13,10 +22,10 @@ export default function SkeletonDetailBisnis() {
                      <Box key={index} py={5}>
                         <Grid align="center">
                            <Grid.Col span={2}>
-                              <Skeleton w={25} h={25} />
+                              <CustomSkeleton w={25} h={25} />
                            </Grid.Col>
                            <Grid.Col span={10}>
-                              <Skeleton w={"100%"} h={15} />
+                              <CustomSkeleton w={"100%"} h={15} />
                            </Grid.Col>
                         </Grid>
                      </Box>
@@ -25,10 +34,10 @@ export default function SkeletonDetailBisnis() {
             </Grid.Col>
          </Grid>
          <Box mt={"md"}>
-            <Skeleton w={"30%"} h={15} my={10} />
-            <Skeleton w={"95%"} h={15} my={10} />
-            <Skeleton w={"95%"} h={15} my={10} />
-            <Skeleton w={"95%"} h={15} my={10} />
+            <CustomSkeleton w={"30%"} h={15} my={10} />
+            <CustomSkeleton w={"95%"} h={15} my={10} />
+            <CustomSkeleton w={"95%"} h={15} my={10} />
+            <CustomSkeleton w={"95%"} h={15} my={10} />
          </Box>
       </Box>
    </>;

src/app_modules/katalog/profile/_component/comp_load_background.tsx

@@ -7,6 +7,7 @@ import { Center, Image, Skeleton } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { MainColor } from "@/app_modules/_global/color";
 
 export function Profile_ComponentLoadBackgroundImage({
   fileId,
@@ -41,7 +42,7 @@ export function Profile_ComponentLoadBackgroundImage({
   if (!isImage)
     return (
       <>
-        <Center h={200} bg={"white"} style={{ borderRadius: "10px" }}>
+        <Center h={200} bg={MainColor.white} style={{ borderRadius: "10px" }}>
           <Image
             alt="No Image"
             maw={150}
@@ -64,7 +65,7 @@ export function Profile_ComponentLoadBackgroundImage({
             });
           }}
           style={{
-            borderColor: "white",
+            borderColor: MainColor.white,
             borderStyle: "solid",
             borderWidth: "1px",
             borderRadius: "5px",

src/app_modules/katalog/profile/edit/view.tsx

@@ -54,7 +54,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         <TextInput
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
           }}
           withAsterisk
@@ -66,7 +66,7 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         <TextInput
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
           }}
           withAsterisk
@@ -92,8 +92,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         <TextInput
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            input: {
+              backgroundColor: MainColor.white,
+            }
           }}
           withAsterisk
           label="Nama"
@@ -118,8 +121,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         <TextInput
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            input: {
+              backgroundColor: MainColor.white,
+            }
           }}
           withAsterisk
           label="Email"
@@ -146,8 +152,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         <TextInput
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            input: {
+              backgroundColor: MainColor.white,
+            }
           }}
           withAsterisk
           label="Alamat"
@@ -172,8 +181,11 @@ export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
         <Select
           styles={{
             label: {
-              color: "white",
+              color: MainColor.white,
             },
+            input: {
+              backgroundColor: MainColor.white,
+            }
           }}
           withAsterisk
           label="Jenis Kelamin"

src/app_modules/katalog/ui/list_portolio_new.tsx

@@ -7,6 +7,7 @@ import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
 import { IconCaretRight } from "@tabler/icons-react";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 export default function ListPortofolioProfileNew() {
    const router = useRouter();
@@ -42,7 +43,7 @@ export default function ListPortofolioProfileNew() {
                border: `2px solid ${AccentColor.blue}`,
                borderRadius: "10px ",
                padding: "15px",
-               color: "white",
+               color: MainColor.white,
             }}
          >
             <Stack spacing={"sm"}>
@@ -58,8 +59,8 @@ export default function ListPortofolioProfileNew() {
                   {
                      loading ?
                         <>
-                           <Skeleton height={70} radius={"md"} width={"100%"} />
-                           <Skeleton height={70} radius={"md"} width={"100%"} />
+                           <CustomSkeleton height={70} radius={"md"} width={"100%"} />
+                           <CustomSkeleton height={70} radius={"md"} width={"100%"} />
                         </>
                         :
 
@@ -84,7 +85,7 @@ export default function ListPortofolioProfileNew() {
                                        border: `2px solid ${AccentColor.blue}`,
                                        borderRadius: "10px ",
                                        padding: "15px",
-                                       color: "white",
+                                       color: MainColor.white,
                                     }}
                                  >
                                     <Group position="apart">
@@ -97,7 +98,7 @@ export default function ListPortofolioProfileNew() {
                                           </Text>
                                        </Stack>
                                        <Stack>
-                                          <IconCaretRight color="white" size={25} />
+                                          <IconCaretRight color={MainColor.white} size={25} />
                                        </Stack>
                                     </Group>
                                  </Paper>

src/app_modules/katalog/ui/profile_detail.tsx

@@ -1,4 +1,4 @@
-import { AccentColor } from "@/app_modules/_global/color";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { apiGetUserProfile, IUserProfile } from "@/app_modules/user";
 import { Box, Center, Group, Stack, Text, ThemeIcon } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
@@ -14,23 +14,23 @@ export default function ProfileDetail() {
    const [dataProfile, setDataProfile] = useState<IUserProfile>()
    const listInformation = [
       {
-         icon: <IconPhone />,
+         icon: <IconPhone color={MainColor.white} />,
          value: "+" + dataProfile?.nomor,
       },
       {
-         icon: <IconBrandGmail />,
+         icon: <IconBrandGmail color={MainColor.white} />,
          value: dataProfile?.email,
       },
       {
-         icon: <IconHome />,
+         icon: <IconHome color={MainColor.white} />,
          value: dataProfile?.alamat,
       },
       {
          icon:
             dataProfile?.jenisKelamin === "Laki-laki" ? (
-               <IconGenderMale />
+               <IconGenderMale color={MainColor.white} />
             ) : (
-               <IconGenderFemale />
+               <IconGenderFemale color={MainColor.white}/>
             ),
          value: dataProfile?.jenisKelamin,
       },
@@ -64,7 +64,7 @@ export default function ProfileDetail() {
             border: `2px solid ${AccentColor.blue}`,
             borderRadius: "10px ",
             padding: "15px",
-            color: "white",
+            color: MainColor.white
          }}
       >
          {
@@ -96,11 +96,11 @@ export default function ProfileDetail() {
                               }}
                            />
                         </Center>
-                        <Stack align="center" c={"white"} mt={"xs"} spacing={0}>
-                           <Text fw={"bold"} lineClamp={1}>
+                        <Stack align="center" c={MainColor.white} mt={"xs"} spacing={0}>
+                           <Text fw={"bold"} lineClamp={1} c={MainColor.white}>
                               {dataProfile?.name}
                            </Text>
-                           <Text fs={"italic"} fz={"sm"} lineClamp={1}>
+                           <Text fs={"italic"} fz={"sm"} c={MainColor.white} lineClamp={1}>
                               @{dataProfile?.username}
                            </Text>
                         </Stack>
@@ -118,7 +118,7 @@ export default function ProfileDetail() {
                                  {e.icon}
                               </ThemeIcon>
                               <Box w={"85%"}>
-                                 <Text fw={"bold"}>{e?.value}</Text>
+                                 <Text c={MainColor.white} fw={"bold"}>{e?.value}</Text>
                               </Box>
                            </Group>
                         ))}

src/app_modules/katalog/ui/skeleton_profile.tsx

@@ -1,10 +1,11 @@
-import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
 
 export default function SkeletonProfile() {
    return (
       <>
          <Box mb={"lg"}>
-            <Skeleton height={200} radius={"md"} />
+            <CustomSkeleton height={200} radius={"md"} />
             <Box
                sx={{
                   position: "relative",
@@ -14,29 +15,75 @@ export default function SkeletonProfile() {
                }}
             >
                <Center>
-                  <Avatar radius={"50%"} size={100} bg={"gray"} />
+                  <CustomSkeleton circle height={100} width={100}  />
                </Center>
             </Box>
             <Stack align="center" justify="center" spacing={"xs"}>
-               <Skeleton height={15} radius={"md"} width={"50%"} />
-               <Skeleton height={15} radius={"md"} width={"20%"} />
+               <CustomSkeleton height={15} radius={"md"} width={"50%"} />
+               <CustomSkeleton height={15} radius={"md"} width={"50%"}/>
             </Stack>
 
             <Box mt={"lg"}>
-               {[...Array(4)].map((_, index) => (
-                  <Box key={index} py={5}>
-                     <Grid align="center">
-                        <Grid.Col span={1}>
-                           <Skeleton w={25} h={25} />
-                        </Grid.Col>
-                        <Grid.Col span={11}>
-                           <Skeleton w={"100%"} h={15} />
-                        </Grid.Col>
-                     </Grid>
-                  </Box>
-               ))}
+               <Stack spacing={"xs"}>
+                  {[...Array(4)].map((_, index) => (
+                     <Box key={index} py={5}>
+                        <Grid align="center">
+                           <Grid.Col span={1}>
+                              <CustomSkeleton w={25} h={25}/>
+                           </Grid.Col>
+                           <Grid.Col span={11}>
+                              <CustomSkeleton w={"50%"} h={15}/>
+                           </Grid.Col>
+                        </Grid>
+                     </Box>
+                  ))}
+               </Stack>
             </Box>
          </Box>
       </>
-   )
-}
+   );
+}
+// import { Avatar, Box, Center, Grid, Skeleton, Stack } from "@mantine/core";
+
+// export default function SkeletonProfile() {
+//    return (
+//       <>
+//          <Box mb={"lg"}>
+//             <Skeleton height={200} radius={"md"} />
+//             <Box
+//                sx={{
+//                   position: "relative",
+//                   bottom: 60,
+//                   width: "100%",
+//                   marginBottom: -30,
+//                }}
+//             >
+//                <Center>
+//                   <Avatar radius={"50%"} size={100}  />
+//                </Center>
+//             </Box>
+//             <Stack align="center" justify="center" spacing={"xs"}>
+//                <Skeleton height={15} radius={"md"} width={"50%"} />
+//                <Skeleton height={15} radius={"md"} width={"50%"} />
+//             </Stack>
+
+//             <Box mt={"lg"}>
+//                <Stack spacing={"xs"}>
+//                   {[...Array(4)].map((_, index) => (
+//                      <Box key={index} py={5}>
+//                         <Grid align="center">
+//                            <Grid.Col span={1}>
+//                               <Skeleton w={25} h={25} />
+//                            </Grid.Col>
+//                            <Grid.Col span={11}>
+//                               <Skeleton w={"50%"} h={15} />
+//                            </Grid.Col>
+//                         </Grid>
+//                      </Box>
+//                   ))}
+//                </Stack>
+//             </Box>
+//          </Box>
+//       </>
+//    )
+// }

src/app_modules/map/ui/ui_create_pin.tsx

@@ -109,7 +109,13 @@ export function UiMap_CreatePin({
           <TextInput
             disabled={isPin ? false : true}
             style={{ transition: "0.5s" }}
-            styles={{ label: { color: isPin ? "white" : "gray" } }}
+            styles={{ label: { color: isPin ? MainColor.white : "gray" },
+            input: {
+              backgroundColor: MainColor.white
+            },
+            required: {
+              color: MainColor.red,
+            } }}
             label="Nama Pin"
             placeholder="Masukan nama pin map"
             withAsterisk
@@ -132,8 +138,8 @@ export function UiMap_CreatePin({
               </AspectRatio>
             ) : (
               <Stack spacing={5} justify="center" align="center" h={"100%"}>
-                <Title order={3}>Foto Lokasi Bisnis</Title>
-                <Text fs={"italic"} fz={10} align="center">
+                <Title c={MainColor.white} order={3}>Foto Lokasi Bisnis</Title>
+                <Text c={MainColor.white} fs={"italic"} fz={10} align="center">
                   Upload foto lokasi bisnis anda untuk ditampilkan dalam detail
                   map
                 </Text>

src/app_modules/map/ui/ui_edit_map.tsx

@@ -114,8 +114,8 @@ export function UiMap_EditMap({
           }}
         >
           <TextInput
-            style={{ transition: "0.5s" }}
-            styles={{ label: { color: "white" } }}
+            style={{ transition: "0.5s", }}
+            styles={{ label: { color: MainColor.white }, required: { color: MainColor.red }, input: { backgroundColor: MainColor.white } }}
             label="Nama Pin"
             placeholder="Masukan nama pin map"
             value={data.namePin}