Add skeleton color validasi and katalog

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/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/auth/login/view.tsx

@@ -56,15 +56,19 @@ 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={MainColor.white}>Nomor telepon</Text>
+              <Text c={MainColor.white} >
+                Nomor telepon
+              </Text>
             </Center>
             <PhoneInput
               inputStyle={{ width: "100%" }}             

src/app_modules/auth/validasi/skeleton.tsx

@@ -1,24 +1,24 @@
-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}>
-      <Skeleton h={30} w={250} radius={"xl"} />
+      <CustomSkeleton h={30} w={250} radius={"xl"} />
       <Stack spacing={"md"} align="center">
-      <Stack mb={15}>  
+        <Stack mb={15}>
-        <Skeleton h={20} w={250} radius={"xl"} />
+          <CustomSkeleton h={20} w={250} radius={"xl"} />
-        <Skeleton h={20} w={250} radius={"xl"} />
+          <CustomSkeleton 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"} />
+
+        <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>
   );
 }
@@ -39,3 +39,28 @@ export default function Validasi_SkeletonView() {
 
         <Skeleton h={50} w={250} radius={"sm"} />
       </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/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/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%"} />
+              <CustomSkeleton h={20} w={"100%"} />
-              <Skeleton h={20} w={"100%"} />
+              <CustomSkeleton h={20} w={"100%"} />
             </Stack>
           </Stack>
         </ComponentGlobal_CardStyles>

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/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 { Box, Divider, Grid, Group, Paper, SimpleGrid, Stack, Text, Title } 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 { 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 { IDetailPortofolioLokasi } from "../lib/type_portofolio";
-import { ComponentMap_DetailData, ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
-import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 
 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 { AccentColor, MainColor } from "@/app_modules/_global/color";
-import { Paper, Title, Stack, Grid, Text, Skeleton, Box } from "@mantine/core";
+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} />
+            <CustomSkeleton w={"30%"} h={15} my={10} />
-            <Skeleton w={"95%"} h={15} my={10} />
+            <CustomSkeleton w={"95%"} h={15} my={10} />
-            <Skeleton w={"95%"} h={15} my={10} />
+            <CustomSkeleton w={"95%"} h={15} my={10} />
-            <Skeleton w={"95%"} h={15} my={10} />
+            <CustomSkeleton w={"95%"} h={15} my={10} />
          </Box>
       </Box>
    </>;

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();
@@ -58,8 +59,8 @@ export default function ListPortofolioProfileNew() {
                   {
                      loading ?
                         <>
-                           <Skeleton height={70} radius={"md"} width={"100%"} />
+                           <CustomSkeleton height={70} radius={"md"} width={"100%"} />
-                           <Skeleton height={70} radius={"md"} width={"100%"} />
+                           <CustomSkeleton height={70} radius={"md"} width={"100%"} />
                         </>
                         :
 

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,12 +15,12 @@ export default function SkeletonProfile() {
                }}
             >
                <Center>
-                  <Avatar radius={"50%"} size={100}  />
+                  <CustomSkeleton circle height={100} width={100}  />
                </Center>
             </Box>
             <Stack align="center" justify="center" spacing={"xs"}>
-               <Skeleton height={15} radius={"md"} width={"50%"} />
+               <CustomSkeleton height={15} radius={"md"} width={"50%"} />
-               <Skeleton height={15} radius={"md"} width={"50%"} />
+               <CustomSkeleton height={15} radius={"md"} width={"50%"}/>
             </Stack>
 
             <Box mt={"lg"}>
@@ -28,10 +29,10 @@ export default function SkeletonProfile() {
                      <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={"50%"} h={15} />
+                              <CustomSkeleton w={"50%"} h={15}/>
                            </Grid.Col>
                         </Grid>
                      </Box>
@@ -40,5 +41,49 @@ export default function SkeletonProfile() {
             </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_edit_map.tsx

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