From 215accbcaa989e43f43dfc5f400d5411013f4ef3 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Fri, 3 Jan 2025 14:22:10 +0800
Subject: [PATCH 1/3] fix: user Deskripsi: - penambahan modal untuk memberi
 redirect ke whatsapp

---
 src/app/zCoba/skeleton/page.tsx               |  22 +-
 .../button/comp_button_selanjutnya.tsx        |  15 +-
 .../katalog/portofolio/create/view.tsx        | 126 +++++---
 .../portofolio/ui/ui_detail_data_new.tsx      | 281 ++++++++++-------
 src/app_modules/katalog/ui/profile_detail.tsx | 290 +++++++++++-------
 .../map/_component/detail_data.tsx            |  45 ++-
 6 files changed, 494 insertions(+), 285 deletions(-)

diff --git a/src/app/zCoba/skeleton/page.tsx b/src/app/zCoba/skeleton/page.tsx
index f16ec3cf..a5b62d10 100644
--- a/src/app/zCoba/skeleton/page.tsx
+++ b/src/app/zCoba/skeleton/page.tsx
@@ -5,7 +5,8 @@ import {
   UIGlobal_LayoutHeaderTamplate,
   UIGlobal_LayoutTamplate,
 } from "@/app_modules/_global/ui";
-import { Grid, Skeleton, Stack } from "@mantine/core";
+import { Button, Grid, Skeleton, Stack } from "@mantine/core";
+import Link from "next/link";
 
 export default function Voting_ComponentSkeletonViewPuh() {
   return (
@@ -13,6 +14,25 @@ export default function Voting_ComponentSkeletonViewPuh() {
       <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Skeleton Maker" />}
       >
+        <Button
+         
+        >
+          <Link
+            color="white"
+            style={{
+              color: "white",
+              textDecoration: "none",
+            }}
+            target="_blank"
+            href={
+              "https://wa.me/+6281339158911?text=Hallo , Apa boleh saya minta informasi tentang DariBaliMice?"
+            }
+          >
+            {" "}
+            Kirim
+          </Link>
+        </Button>
+
         <Stack>
           <ComponentGlobal_CardStyles marginBottom={"0"}>
             <Stack>
diff --git a/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx b/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
index 6af70436..823c1f29 100644
--- a/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
+++ b/src/app_modules/katalog/portofolio/component/button/comp_button_selanjutnya.tsx
@@ -22,7 +22,7 @@ export function Portofolio_ComponentButtonSelanjutnya({
   profileId: string;
   dataPortofolio: MODEL_PORTOFOLIO_OLD;
   dataMedsos: any;
-  imageId: string
+  imageId: string;
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
@@ -36,11 +36,18 @@ export function Portofolio_ComponentButtonSelanjutnya({
       deskripsi: dataPortofolio.deskripsi,
     };
 
+    if (_.values(porto).includes("")) {
+      ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
+      return;
+    }
+
+    if (dataPortofolio.tlpn.length < 10) {
+      ComponentGlobal_NotifikasiPeringatan("Nomor telepon minimal 10 angka");
+      return;
+    }
+
     try {
       setLoading(true);
-      if (_.values(porto).includes("")) {
-        return ComponentGlobal_NotifikasiPeringatan("Lengkapi Data");
-      }
       const res = await funCreatePortofolio({
         profileId: profileId,
         data: dataPortofolio as any,
diff --git a/src/app_modules/katalog/portofolio/create/view.tsx b/src/app_modules/katalog/portofolio/create/view.tsx
index b8fd5489..1bfcaf71 100644
--- a/src/app_modules/katalog/portofolio/create/view.tsx
+++ b/src/app_modules/katalog/portofolio/create/view.tsx
@@ -30,6 +30,8 @@ import {
   funGlobal_UploadToStorage,
 } from "@/app_modules/_global/fun";
 import { DIRECTORY_ID } from "@/app/lib";
+import { PhoneInput } from "react-international-phone";
+import "react-international-phone/style.css";
 
 export default function CreatePortofolio({
   bidangBisnis,
@@ -69,12 +71,12 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              input: {
-                backgroundColor: MainColor.white
-              },
-              required: {
-                color: MainColor.red,
-              }
+              // input: {
+              //   backgroundColor: MainColor.white,
+              // },
+              // required: {
+              //   color: MainColor.red,
+              // },
             }}
             withAsterisk
             label="Nama Bisnis"
@@ -88,17 +90,16 @@ export default function CreatePortofolio({
             }}
           />
           <Select
-            
             styles={{
               label: {
                 color: MainColor.white,
               },
-              input: {
-                backgroundColor: MainColor.white
-              },
-              required: {
-                color: MainColor.red,
-              }
+              // input: {
+              //   backgroundColor: MainColor.white,
+              // },
+              // required: {
+              //   color: MainColor.red,
+              // },
             }}
             withAsterisk
             label="Bidang Bisnis"
@@ -114,17 +115,18 @@ export default function CreatePortofolio({
               });
             }}
           />
+
           <TextInput
             styles={{
               label: {
                 color: MainColor.white,
               },
-              input: {
-                backgroundColor: MainColor.white
-              },
-              required: {
-                color: MainColor.red,
-              }
+              // input: {
+              //   backgroundColor: MainColor.white,
+              // },
+              // required: {
+              //   color: MainColor.red,
+              // },
             }}
             withAsterisk
             label="Alamat Bisnis"
@@ -137,17 +139,40 @@ export default function CreatePortofolio({
               });
             }}
           />
-          <TextInput
+
+          <Stack spacing={5}>
+            <Text c={MainColor.white} fz={"sm"}>
+              Nomor Telepon{" "}
+              <Text c={"red"} span inherit>
+                *
+              </Text>
+            </Text>
+
+            <PhoneInput
+              placeholder="Nomor telepon"
+              inputStyle={{ width: "100%" }}
+              defaultCountry="id"
+              onChange={(val) => {
+                const valPhone = val.substring(1);
+                setDataPortofolio({
+                  ...dataPortofolio,
+                  tlpn: valPhone,
+                });
+              }}
+            />
+          </Stack>
+
+          {/* <TextInput
             styles={{
               label: {
                 color: MainColor.white,
               },
-              input: {
-                backgroundColor: MainColor.white
-              },
-              required: {
-                color: MainColor.red,
-              }
+              // input: {
+              //   backgroundColor: MainColor.white,
+              // },
+              // required: {
+              //   color: MainColor.red,
+              // },
             }}
             withAsterisk
             label="Nomor Telepon "
@@ -159,19 +184,20 @@ export default function CreatePortofolio({
                 tlpn: val.target.value,
               });
             }}
-          />
+          /> */}
+
           <Stack spacing={5}>
             <Textarea
               styles={{
                 label: {
                   color: MainColor.white,
                 },
-                input: {
-                  backgroundColor: MainColor.white
-                },
-                required: {
-                  color: MainColor.red,
-                }
+                // input: {
+                //   backgroundColor: MainColor.white,
+                // },
+                // required: {
+                //   color: MainColor.red,
+                // },
               }}
               maxLength={300}
               autosize
@@ -208,7 +234,9 @@ export default function CreatePortofolio({
               </AspectRatio>
             ) : (
               <Stack spacing={5} justify="center" align="center" h={"100%"}>
-                <Title c={MainColor.white} order={3}>Upload Logo Bisnis</Title>
+                <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>
@@ -308,9 +336,9 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              input: {
-                backgroundColor: MainColor.white
-              }
+              // input: {
+              //   backgroundColor: MainColor.white,
+              // },
             }}
             label="Facebook"
             maxLength={100}
@@ -327,9 +355,9 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              input: {
-                backgroundColor: MainColor.white
-              }
+              // input: {
+              //   backgroundColor: MainColor.white,
+              // },
             }}
             label="Instagram"
             maxLength={100}
@@ -346,9 +374,9 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              input: {
-                backgroundColor: MainColor.white
-              }
+              // input: {
+              //   backgroundColor: MainColor.white,
+              // },
             }}
             label="Tiktok"
             maxLength={100}
@@ -365,9 +393,9 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              input: {
-                backgroundColor: MainColor.white
-              }
+              // input: {
+              //   backgroundColor: MainColor.white,
+              // },
             }}
             label="Twitter"
             maxLength={100}
@@ -384,9 +412,9 @@ export default function CreatePortofolio({
               label: {
                 color: MainColor.white,
               },
-              input: {
-                backgroundColor: MainColor.white
-              }
+              // input: {
+              //   backgroundColor: MainColor.white,
+              // },
             }}
             label="Youtube"
             maxLength={100}
diff --git a/src/app_modules/katalog/portofolio/ui/ui_detail_data_new.tsx b/src/app_modules/katalog/portofolio/ui/ui_detail_data_new.tsx
index 1c2436a3..e0b99504 100644
--- a/src/app_modules/katalog/portofolio/ui/ui_detail_data_new.tsx
+++ b/src/app_modules/katalog/portofolio/ui/ui_detail_data_new.tsx
@@ -1,131 +1,186 @@
 import { AccentColor, MainColor } from "@/app_modules/_global/color";
 import { ComponentGlobal_LoadImage } from "@/app_modules/_global/component";
-import { Box, Divider, Grid, Group, Paper, SimpleGrid, Stack, Text, Title } from "@mantine/core";
+import {
+  Box,
+  Button,
+  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 {
+  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";
+import { UIGlobal_Modal } from "@/app_modules/_global/ui";
+import Link from "next/link";
 
 export default function Portofolio_UiDetailDataNew() {
-   const [loading, setLoading] = useState(true)
-   const param = useParams<{ id: string }>()
-   const [dataPorto, setDataPorto] = useState<IDetailPortofolioBisnis>();
+  const [loading, setLoading] = useState(true);
+  const param = useParams<{ id: string }>();
+  const [dataPorto, setDataPorto] = useState<IDetailPortofolioBisnis>();
+  const [openModal, setOpenModal] = useState(false);
 
-   async function funGetPortofolio() {
-      try {
-         setLoading(true)
-         const response = await apiGetOnePortofolioById(param.id, "bisnis");
-         if (response.success) {
-            setDataPorto(response.data);
-         }
-      } catch (error) {
-         console.error(error);
-      } finally {
-         setLoading(false)
+  async function funGetPortofolio() {
+    try {
+      setLoading(true);
+      const response = await apiGetOnePortofolioById(param.id, "bisnis");
+      if (response.success) {
+        setDataPorto(response.data);
       }
-   }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }
 
-   useShallowEffect(() => {
-      funGetPortofolio()
-   }, []);
+  useShallowEffect(() => {
+    funGetPortofolio();
+  }, []);
 
-   return (
-      <>
-         <Paper
-            p={"sm"}
-            style={{
-               backgroundColor: AccentColor.darkblue,
-               border: `2px solid ${AccentColor.blue}`,
-               borderRadius: "10px ",
-               padding: "15px",
-               color: MainColor.white,
-            }}
-         >
-            {
-               loading ?
-                  <SkeletonDetailBisnis />
-                  :
-                  <Stack>
-                     <Group position="apart">
-                        <Title order={6}>Data Bisnis</Title>
-                        <Text color={MainColor.yellow} fw={"bold"}>
-                           id: {"  "}
-                           <Text span inherit>
-                              #{dataPorto?.id_Portofolio}
-                           </Text>
-                        </Text>
-                     </Group>
-                     <Stack>
-                        <SimpleGrid
-                           cols={2}
-                           spacing={"md"}
-                           breakpoints={[
-                              { maxWidth: "62rem", cols: 2, spacing: "md" },
-                              { maxWidth: "48rem", cols: 1, spacing: "sm" },
-                              { maxWidth: "36rem", cols: 1, spacing: "sm" },
-                           ]}
-                        >
-                           <Box>
-                              <Paper>
-                                 <ComponentGlobal_LoadImage fileId={String(dataPorto?.logoId)} />
-                              </Paper>
-                           </Box>
+  return (
+    <>
+      <Paper
+        p={"sm"}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px ",
+          padding: "15px",
+          color: MainColor.white,
+        }}
+      >
+        {loading ? (
+          <SkeletonDetailBisnis />
+        ) : (
+          <Stack>
+            <Group position="apart">
+              <Title order={6}>Data Bisnis</Title>
+              <Text color={MainColor.yellow} fw={"bold"}>
+                id: {"  "}
+                <Text span inherit>
+                  #{dataPorto?.id_Portofolio}
+                </Text>
+              </Text>
+            </Group>
+            <Stack>
+              <SimpleGrid
+                cols={2}
+                spacing={"md"}
+                breakpoints={[
+                  { maxWidth: "62rem", cols: 2, spacing: "md" },
+                  { maxWidth: "48rem", cols: 1, spacing: "sm" },
+                  { maxWidth: "36rem", cols: 1, spacing: "sm" },
+                ]}
+              >
+                <Box>
+                  <Paper>
+                    <ComponentGlobal_LoadImage
+                      fileId={String(dataPorto?.logoId)}
+                    />
+                  </Paper>
+                </Box>
 
-                           <Box>
-                              <Grid>
-                                 <Grid.Col span={2}>
-                                    <IconBuildingSkyscraper />
-                                 </Grid.Col>
-                                 <Grid.Col span={"auto"}>
-                                    <Text>{dataPorto?.namaBisnis}</Text>
-                                 </Grid.Col>
-                              </Grid>
-                              <Grid>
-                                 <Grid.Col span={2}>
-                                    <IconListDetails />
-                                 </Grid.Col>
-                                 <Grid.Col span={"auto"}>
-                                    <Text>{dataPorto?.bidangBisnis}</Text>
-                                 </Grid.Col>
-                              </Grid>
-                              <Grid>
-                                 <Grid.Col span={2}>
-                                    <IconPhoneCall />
-                                 </Grid.Col>
-                                 <Grid.Col span={"auto"}>
-                                    <Text>{dataPorto?.tlpn}</Text>
-                                 </Grid.Col>
-                              </Grid>
-                              <Grid>
-                                 <Grid.Col span={2}>
-                                    <IconMapPin />
-                                 </Grid.Col>
-                                 <Grid.Col span={"auto"}>
-                                    <Text>{dataPorto?.alamatKantor}</Text>
-                                 </Grid.Col>
-                              </Grid>
-                           </Box>
-                        </SimpleGrid>
-                     </Stack>
+                <Box>
+                  <Grid>
+                    <Grid.Col span={2}>
+                      <IconBuildingSkyscraper />
+                    </Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Text>{dataPorto?.namaBisnis}</Text>
+                    </Grid.Col>
+                  </Grid>
+                  <Grid>
+                    <Grid.Col span={2}>
+                      <IconListDetails />
+                    </Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Text>{dataPorto?.bidangBisnis}</Text>
+                    </Grid.Col>
+                  </Grid>
+                  <Grid>
+                    <Grid.Col span={2}>
+                      <IconPhoneCall />
+                    </Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Text
+                        onClick={() => {
+                          setOpenModal(true);
+                        }}
+                      >
+                        + {dataPorto?.tlpn}
+                      </Text>
+                    </Grid.Col>
+                  </Grid>
+                  <Grid>
+                    <Grid.Col span={2}>
+                      <IconMapPin />
+                    </Grid.Col>
+                    <Grid.Col span={"auto"}>
+                      <Text>{dataPorto?.alamatKantor}</Text>
+                    </Grid.Col>
+                  </Grid>
+                </Box>
+              </SimpleGrid>
+            </Stack>
 
-                     <Divider color={AccentColor.softblue} />
+            <Divider color={AccentColor.softblue} />
 
-                     <Stack spacing={5}>
-                        <Group spacing={"xs"}>
-                           <IconPinned />
-                           <Text fz={"sm"} fw={"bold"}>
-                              Tentang Kami
-                           </Text>
-                        </Group>
-                        <Text px={"sm"}>{dataPorto?.deskripsi}</Text>
-                     </Stack>
-                  </Stack>
-            }
+            <Stack spacing={5}>
+              <Group spacing={"xs"}>
+                <IconPinned />
+                <Text fz={"sm"} fw={"bold"}>
+                  Tentang Kami
+                </Text>
+              </Group>
+              <Text px={"sm"}>{dataPorto?.deskripsi}</Text>
+            </Stack>
+          </Stack>
+        )}
+      </Paper>
 
-         </Paper>
-      </>
-   )
-}
\ No newline at end of file
+      <UIGlobal_Modal
+        title={
+          "Anda akan dialihkan ke WhatsApp untuk melanjutkan percakapan. Tekan 'Lanjutkan' untuk melanjutkan."
+        }
+        opened={openModal}
+        close={() => {
+          setOpenModal(false);
+        }}
+        buttonKanan={
+          <Button radius={"xl"} color="yellow" c={MainColor.darkblue}>
+            <Link
+              style={{
+                color: "white",
+                textDecoration: "none",
+              }}
+              target="_blank"
+              href={`https://wa.me/+${dataPorto?.tlpn}?text=Hallo  , saya tertarik dengan bisnis anda. Apa boleh saya minta informasi tentang bisnis ${dataPorto?.namaBisnis}.`}
+            >
+              Lanjutkan
+            </Link>
+          </Button>
+        }
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal(false)}>
+            Batal
+          </Button>
+        }
+      />
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/ui/profile_detail.tsx b/src/app_modules/katalog/ui/profile_detail.tsx
index 2387d93e..2b46b08d 100644
--- a/src/app_modules/katalog/ui/profile_detail.tsx
+++ b/src/app_modules/katalog/ui/profile_detail.tsx
@@ -1,131 +1,193 @@
 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 {
+  Box,
+  Button,
+  Center,
+  Group,
+  Stack,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { IconBrandGmail, IconGenderFemale, IconGenderMale, IconHome, IconPhone } from "@tabler/icons-react";
+import {
+  IconBrandGmail,
+  IconGenderFemale,
+  IconGenderMale,
+  IconHome,
+  IconPhone,
+} from "@tabler/icons-react";
 import { useParams } from "next/navigation";
 import { useState } from "react";
-import { Profile_ComponentAvatarProfile, Profile_ComponentLoadBackgroundImage } from "../profile/_component";
+import {
+  Profile_ComponentAvatarProfile,
+  Profile_ComponentLoadBackgroundImage,
+} from "../profile/_component";
 import SkeletonProfile from "./skeleton_profile";
+import { UIGlobal_Modal } from "@/app_modules/_global/ui";
+import Link from "next/link";
 
 export default function ProfileDetail() {
-   const param = useParams<{ id: string }>()
-   const [loading, setLoading] = useState(true)
-   const [dataProfile, setDataProfile] = useState<IUserProfile>()
-   const listInformation = [
-      {
-         icon: <IconPhone color={MainColor.white} />,
-         value: "+" + dataProfile?.nomor,
-      },
-      {
-         icon: <IconBrandGmail color={MainColor.white} />,
-         value: dataProfile?.email,
-      },
-      {
-         icon: <IconHome color={MainColor.white} />,
-         value: dataProfile?.alamat,
-      },
-      {
-         icon:
-            dataProfile?.jenisKelamin === "Laki-laki" ? (
-               <IconGenderMale color={MainColor.white} />
-            ) : (
-               <IconGenderFemale color={MainColor.white}/>
-            ),
-         value: dataProfile?.jenisKelamin,
-      },
-   ];
+  const param = useParams<{ id: string }>();
+  const [loading, setLoading] = useState(true);
+  const [dataProfile, setDataProfile] = useState<IUserProfile>();
+  const [openModal, setOpenModal] = useState(false);
 
+  const listInformation = [
+    {
+      icon: <IconPhone color={MainColor.white} />,
+      value: (
+        <Text span inherit onClick={() => setOpenModal(true)}>
+          {"+" + dataProfile?.nomor}
+        </Text>
+      ),
+    },
+    {
+      icon: <IconBrandGmail color={MainColor.white} />,
+      value: dataProfile?.email,
+    },
+    {
+      icon: <IconHome color={MainColor.white} />,
+      value: dataProfile?.alamat,
+    },
+    {
+      icon:
+        dataProfile?.jenisKelamin === "Laki-laki" ? (
+          <IconGenderMale color={MainColor.white} />
+        ) : (
+          <IconGenderFemale color={MainColor.white} />
+        ),
+      value: dataProfile?.jenisKelamin,
+    },
+  ];
 
-   async function getProfile() {
-      try {
-         setLoading(true)
-         const response = await apiGetUserProfile(`?profile=${param.id}`)
-         if (response.success) {
-            setDataProfile(response.data);
-         }
-      } catch (error) {
-         console.error(error);
-      } finally {
-         setLoading(false)
+  async function getProfile() {
+    try {
+      setLoading(true);
+      const response = await apiGetUserProfile(`?profile=${param.id}`);
+      if (response.success) {
+        setDataProfile(response.data);
       }
-   }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }
 
+  useShallowEffect(() => {
+    getProfile();
+  }, []);
 
-   useShallowEffect(() => {
-      getProfile()
-   }, []);
-
-   return <>
+  return (
+    <>
       <Stack
-         spacing={0}
-         style={{
-            backgroundColor: AccentColor.darkblue,
-            border: `2px solid ${AccentColor.blue}`,
-            borderRadius: "10px ",
-            padding: "15px",
-            color: MainColor.white
-         }}
+        spacing={0}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px ",
+          padding: "15px",
+          color: MainColor.white,
+        }}
       >
-         {
-            loading ?
-               <SkeletonProfile /> :
-               <>
-                  <Box>
-                     <Profile_ComponentLoadBackgroundImage
-                        fileId={dataProfile?.imageBackgroundId as any}
-                        size={500}
-                     />
+        {loading ? (
+          <SkeletonProfile />
+        ) : (
+          <>
+            <Box>
+              <Profile_ComponentLoadBackgroundImage
+                fileId={dataProfile?.imageBackgroundId as any}
+                size={500}
+              />
 
-                     <Box
-                        sx={{
-                           position: "relative",
-                           bottom: 60,
-                           margin: "auto",
-                           width: "100%",
-                           marginBottom: -30,
-                        }}
-                     >
-                        <Center>
-                           <Profile_ComponentAvatarProfile
-                              fileId={dataProfile?.imageId as any}
-                              style={{
-                                 borderStyle: "solid",
-                                 borderColor: AccentColor.darkblue,
-                                 borderWidth: "2px",
-                              }}
-                           />
-                        </Center>
-                        <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"} c={MainColor.white} lineClamp={1}>
-                              @{dataProfile?.username}
-                           </Text>
-                        </Stack>
-                     </Box>
-                  </Box>
-                  <Box>
-                     <Stack spacing={"xs"}>
-                        {listInformation.map((e, i) => (
-                           <Group key={i} align="flex-start">
-                              <ThemeIcon
-                                 style={{
-                                    backgroundColor: "transparent",
-                                 }}
-                              >
-                                 {e.icon}
-                              </ThemeIcon>
-                              <Box w={"85%"}>
-                                 <Text c={MainColor.white} fw={"bold"}>{e?.value}</Text>
-                              </Box>
-                           </Group>
-                        ))}
-                     </Stack>
-                  </Box>
-               </>
-         }
+              <Box
+                sx={{
+                  position: "relative",
+                  bottom: 60,
+                  margin: "auto",
+                  width: "100%",
+                  marginBottom: -30,
+                }}
+              >
+                <Center>
+                  <Profile_ComponentAvatarProfile
+                    fileId={dataProfile?.imageId as any}
+                    style={{
+                      borderStyle: "solid",
+                      borderColor: AccentColor.darkblue,
+                      borderWidth: "2px",
+                    }}
+                  />
+                </Center>
+                <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"}
+                    c={MainColor.white}
+                    lineClamp={1}
+                  >
+                    @{dataProfile?.username}
+                  </Text>
+                </Stack>
+              </Box>
+            </Box>
+            <Box>
+              <Stack spacing={"xs"}>
+                {listInformation.map((e, i) => (
+                  <Group key={i} align="flex-start">
+                    <ThemeIcon
+                      style={{
+                        backgroundColor: "transparent",
+                      }}
+                    >
+                      {e.icon}
+                    </ThemeIcon>
+                    <Box w={"85%"}>
+                      <Text c={MainColor.white} fw={"bold"}>
+                        {e?.value}
+                      </Text>
+                    </Box>
+                  </Group>
+                ))}
+              </Stack>
+            </Box>
+          </>
+        )}
       </Stack>
-   </>;
-}
\ No newline at end of file
+
+      <UIGlobal_Modal
+        title={
+          "Anda akan dialihkan ke WhatsApp untuk melanjutkan percakapan. Tekan 'Lanjutkan' untuk melanjutkan."
+        }
+        opened={openModal}
+        close={() => {
+          setOpenModal(false);
+        }}
+        buttonKanan={
+          <Button radius={"xl"} color="yellow" c={MainColor.darkblue}>
+            <Link
+              color="white"
+              style={{
+                color: "white",
+                textDecoration: "none",
+              }}
+              target="_blank"
+              href={`https://wa.me/+${dataProfile?.nomor}?text=Hallo  , saya tertarik dengan profile anda sebagai rekan HIPMI. Apakah saya bisa melanjutkan percakapan?`}
+            >
+              Lanjutkan
+            </Link>
+          </Button>
+        }
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal(false)}>
+            Batal
+          </Button>
+        }
+      />
+    </>
+  );
+}
diff --git a/src/app_modules/map/_component/detail_data.tsx b/src/app_modules/map/_component/detail_data.tsx
index 91686323..1a17f47f 100644
--- a/src/app_modules/map/_component/detail_data.tsx
+++ b/src/app_modules/map/_component/detail_data.tsx
@@ -18,6 +18,8 @@ import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
 import { MODEL_MAP } from "../lib/interface";
 import { ComponentMap_LoadImageMap } from "./comp_load_image_map";
 import { ComponentMap_SkeletonDrawerDetailData } from "./skeleton_detail_data";
+import { UIGlobal_Modal } from "@/app_modules/_global/ui";
+import Link from "next/link";
 
 export function ComponentMap_DetailData({
   mapId,
@@ -30,6 +32,7 @@ export function ComponentMap_DetailData({
   const [data, setData] = useState<MODEL_MAP>();
   const [dataUser, setDataUser] = useState<MODEL_USER>();
   const [isLoading, setIsLoading] = useState(false);
+  const [openModal, setOpenModal] = useState(false);
 
   useShallowEffect(() => {
     onLoadData(setData, setDataUser);
@@ -46,9 +49,7 @@ export function ComponentMap_DetailData({
   return (
     <>
       <Stack mt={"lg"} spacing={"xl"} px={"md"}>
-        <ComponentGlobal_AvatarAndUsername
-          profile={dataUser?.Profile as any}
-        />
+        <ComponentGlobal_AvatarAndUsername profile={dataUser?.Profile as any} />
 
         <ComponentMap_LoadImageMap fileId={data.imageId} />
 
@@ -74,7 +75,13 @@ export function ComponentMap_DetailData({
               <IconPhoneCall />
             </Grid.Col>
             <Grid.Col span={"auto"}>
-              <Text>{data?.Portofolio.tlpn}</Text>
+              <Text
+                onClick={() => {
+                  setOpenModal(true);
+                }}
+              >
+                + {data?.Portofolio.tlpn}
+              </Text>
             </Grid.Col>
           </Grid>
           <Grid>
@@ -127,6 +134,36 @@ export function ComponentMap_DetailData({
           </Button>
         </Group>
       </Stack>
+
+      <UIGlobal_Modal
+        title={
+          "Anda akan dialihkan ke WhatsApp untuk melanjutkan percakapan. Tekan 'Lanjutkan' untuk melanjutkan."
+        }
+        opened={openModal}
+        close={() => {
+          setOpenModal(false);
+        }}
+        buttonKanan={
+          <Button radius={"xl"} color="yellow" c={MainColor.darkblue}>
+            <Link
+              color="white"
+              style={{
+                color: "white",
+                textDecoration: "none",
+              }}
+              target="_blank"
+              href={`https://wa.me/+${data?.Portofolio.tlpn}?text=Hallo  , saya tertarik dengan bisnis anda. Apa boleh saya minta informasi tentang bisnis ${data?.Portofolio.namaBisnis} ?`}
+            >
+              Lanjutkan
+            </Link>
+          </Button>
+        }
+        buttonKiri={
+          <Button radius={"xl"} onClick={() => setOpenModal(false)}>
+            Batal
+          </Button>
+        }
+      />
     </>
   );
 }

From d4c4bee2f2f6523829c58f1973fde76eed184fa0 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Fri, 3 Jan 2025 14:22:47 +0800
Subject: [PATCH 2/3] chore(release): 1.2.38

---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd2aaac3..36aad57d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [1.2.38](https://github.com/bipproduction/hipmi/compare/v1.2.37...v1.2.38) (2025-01-03)
+
+
+### Bug Fixes
+
+* user ([215accb](https://github.com/bipproduction/hipmi/commit/215accbcaa989e43f43dfc5f400d5411013f4ef3))
+
 ## [1.2.37](https://github.com/bipproduction/hipmi/compare/v1.2.36...v1.2.37) (2025-01-02)
 
 ## [1.2.36](https://github.com/bipproduction/hipmi/compare/v1.2.35...v1.2.36) (2024-12-30)
diff --git a/package.json b/package.json
index ff74e64c..d0cba3cf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hipmi",
-  "version": "1.2.37",
+  "version": "1.2.38",
   "private": true,
   "prisma": {
     "seed": "npx tsx prisma/seed.ts --yes"

From c3a05fd6b2d55869c5e7dbcba832f12494b74eff Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Sat, 4 Jan 2025 11:48:22 +0800
Subject: [PATCH 3/3] Fix admin Deskripsi: - Ganti status developer jadi super
 admin

---
 src/app/(user)/waiting-room/page.tsx          |   9 +-
 src/app/api/user/activation/route.ts          |  53 ++++++++
 src/app/api/user/{ => get}/route.ts           |   0
 src/app/api/{validasi => validation}/route.ts |  11 +-
 src/app_modules/_global/lib/api_user.ts       |   9 ++
 src/app_modules/admin/developer/index.tsx     |   4 +-
 src/app_modules/admin/new_list_page.tsx       |   6 +-
 .../admin/user-access/view/index.tsx          |  90 +++++++++-----
 src/app_modules/waiting_room/view.tsx         | 116 ++++++++----------
 9 files changed, 189 insertions(+), 109 deletions(-)
 create mode 100644 src/app/api/user/activation/route.ts
 rename src/app/api/user/{ => get}/route.ts (100%)
 rename src/app/api/{validasi => validation}/route.ts (78%)
 create mode 100644 src/app_modules/_global/lib/api_user.ts

diff --git a/src/app/(user)/waiting-room/page.tsx b/src/app/(user)/waiting-room/page.tsx
index abb6e4d0..8d19813d 100644
--- a/src/app/(user)/waiting-room/page.tsx
+++ b/src/app/(user)/waiting-room/page.tsx
@@ -1,19 +1,12 @@
 import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
-import { funGlobal_checkActivationUseById } from "@/app_modules/_global/fun/get/fun_check_activation_use_by_id";
 import WaitingRoom_View from "@/app_modules/waiting_room/view";
 
 export default async function Page() {
   const userLoginId = await funGetUserIdByToken();
-  const activationUser = await funGlobal_checkActivationUseById({
-    userId: userLoginId as string,
-  });
 
   return (
     <>
-      <WaitingRoom_View
-        activationUser={activationUser as boolean}
-        userLoginId={userLoginId as string}
-      />
+      <WaitingRoom_View userLoginId={userLoginId as string} />
     </>
   );
 }
diff --git a/src/app/api/user/activation/route.ts b/src/app/api/user/activation/route.ts
new file mode 100644
index 00000000..965e1805
--- /dev/null
+++ b/src/app/api/user/activation/route.ts
@@ -0,0 +1,53 @@
+import { prisma } from "@/app/lib";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import backendLogger from "@/util/backendLogger";
+import { NextResponse } from "next/server";
+
+export const dynamic = "force-dynamic";
+
+export async function GET(request: Request) {
+  try {
+    let fixData
+    const userLoginId = await funGetUserIdByToken();
+
+    if (userLoginId == null) {
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Gagal mendapatkan data, user id tidak ada",
+        },
+        { status: 500 }
+      );
+    }
+
+    const activationUser = await prisma.user.findFirst({
+      where: {
+        id: userLoginId,
+      },
+      select: {
+        active: true,
+      },
+    });
+
+    fixData = activationUser?.active
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Berhasil mendapatkan data",
+        data: fixData,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    backendLogger.error("Error get activation user: ", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Gagal mendapatkan data",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/user/route.ts b/src/app/api/user/get/route.ts
similarity index 100%
rename from src/app/api/user/route.ts
rename to src/app/api/user/get/route.ts
diff --git a/src/app/api/validasi/route.ts b/src/app/api/validation/route.ts
similarity index 78%
rename from src/app/api/validasi/route.ts
rename to src/app/api/validation/route.ts
index 4562aa95..6b420a9e 100644
--- a/src/app/api/validasi/route.ts
+++ b/src/app/api/validation/route.ts
@@ -1,9 +1,16 @@
+
 import { NextResponse } from "next/server";
 
+
 export async function GET(req: Request) {
   const auth = req.headers.get("Authorization");
   const token = auth?.split(" ")[1];
-  if (!token) return NextResponse.json({ success: false }, { status: 401 });
-  return NextResponse.json({ success: true });
 
+  console.log("validasi atas", token);
+
+  if (!token) return NextResponse.json({ success: false }, { status: 401 });
+
+  console.log("validasi bawah", token);
+
+  return NextResponse.json({ success: true });
 }
diff --git a/src/app_modules/_global/lib/api_user.ts b/src/app_modules/_global/lib/api_user.ts
new file mode 100644
index 00000000..7c868120
--- /dev/null
+++ b/src/app_modules/_global/lib/api_user.ts
@@ -0,0 +1,9 @@
+export const apiGetCookiesUser = async () => {
+  const response = await fetch(`/api/user/get`);
+  return await response.json().catch(() => null);
+};
+
+export const apiGetACtivationUser = async () => {
+  const response = await fetch(`/api/user/activation`);
+  return await response.json().catch(() => null);
+};
\ No newline at end of file
diff --git a/src/app_modules/admin/developer/index.tsx b/src/app_modules/admin/developer/index.tsx
index eb0bf165..a04161b1 100644
--- a/src/app_modules/admin/developer/index.tsx
+++ b/src/app_modules/admin/developer/index.tsx
@@ -44,7 +44,7 @@ export default function AdminDeveloper({
   return (
     <>
       <Stack>
-        <ComponentAdminGlobal_HeaderTamplate name="Developer" />
+        <ComponentAdminGlobal_HeaderTamplate name="Super Admin" />
         <SimpleGrid cols={2} spacing={50}>
           {/* <TableAdmin
             dataAdmin={dataAdmin}
@@ -148,7 +148,7 @@ function NewTableUser({
           p={"xs"}
           style={{ borderRadius: "6px" }}
         >
-          <Title order={4}>Table User NEW</Title>
+          <Title order={4}>Table User</Title>
           <TextInput
             icon={<IconSearch size={20} />}
             radius={"xl"}
diff --git a/src/app_modules/admin/new_list_page.tsx b/src/app_modules/admin/new_list_page.tsx
index b9ab8119..ae940513 100644
--- a/src/app_modules/admin/new_list_page.tsx
+++ b/src/app_modules/admin/new_list_page.tsx
@@ -297,10 +297,10 @@ export const newListAdminPage = [
     child: [],
   },
 
-  // Developer
+  // Developer | Super Admin
   {
-    id: "Developer",
-    name: "Developer",
+    id: "Super Admin",
+    name: "Super Admin",
     path: RouterAdminDeveloper.main,
     icon: <IconDashboard />,
     child: [],
diff --git a/src/app_modules/admin/user-access/view/index.tsx b/src/app_modules/admin/user-access/view/index.tsx
index 06c97ad4..6180b6b5 100644
--- a/src/app_modules/admin/user-access/view/index.tsx
+++ b/src/app_modules/admin/user-access/view/index.tsx
@@ -1,6 +1,9 @@
 "use client";
 
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { MODEL_USER } from "@/app_modules/home/model/interface";
+import { clientLogger } from "@/util/clientLogger";
 import {
   Button,
   Center,
@@ -14,48 +17,67 @@ import {
   Title,
 } from "@mantine/core";
 import { IconSearch } from "@tabler/icons-react";
-import adminUserAccess_funEditAccess from "../fun/edit/fun_edit_access";
 import { useState } from "react";
+import adminUserAccess_funEditAccess from "../fun/edit/fun_edit_access";
 import adminUserAccess_getListUser from "../fun/get/get_list_all_user";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 
 export default function AdminUserAccess_View({ listUser }: { listUser: any }) {
   const [data, setData] = useState<MODEL_USER[]>(listUser.data);
   const [isActivePage, setActivePage] = useState(1);
   const [isNPage, setNPage] = useState(listUser.nPage);
   const [isSearch, setSearch] = useState("");
+  const [isLoadingAccess, setIsLoadingAccess] = useState(false);
+  const [isLoadingDelete, setIsLoadingDelete] = useState(false);
+  const [userId, setUserId] = useState("");
 
   async function onAccess(id: string) {
-    await adminUserAccess_funEditAccess(id, true).then(async (res) => {
-      if (res.status === 200) {
-        const value = await adminUserAccess_getListUser({
-          page: 1,
-          search: isSearch,
-        });
-        setData(value.data as any);
-        setNPage(value.nPage);
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
-    });
+    try {
+      setUserId(id);
+      setIsLoadingAccess(true);
+      await adminUserAccess_funEditAccess(id, true).then(async (res) => {
+        if (res.status === 200) {
+          const value = await adminUserAccess_getListUser({
+            page: 1,
+            search: isSearch,
+          });
+          setData(value.data as any);
+          setNPage(value.nPage);
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+        } else {
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
+      });
+    } catch (error) {
+      clientLogger.error("Error grand access", error);
+    } finally {
+      setIsLoadingAccess(false);
+      setUserId("");
+    }
   }
 
-  async function onDelAccess(id: string) {
-    await adminUserAccess_funEditAccess(id, false).then(async (res) => {
-      if (res.status === 200) {
-        const value = await adminUserAccess_getListUser({
-          page: 1,
-          search: isSearch,
-        });
-        setData(value.data as any);
-        setNPage(value.nPage);
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-      } else {
-        ComponentGlobal_NotifikasiGagal(res.message);
-      }
-    });
+  async function onDelete(id: string) {
+    try {
+      setUserId(id);
+      setIsLoadingDelete(true);
+      await adminUserAccess_funEditAccess(id, false).then(async (res) => {
+        if (res.status === 200) {
+          const value = await adminUserAccess_getListUser({
+            page: 1,
+            search: isSearch,
+          });
+          setData(value.data as any);
+          setNPage(value.nPage);
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+        } else {
+          ComponentGlobal_NotifikasiGagal(res.message);
+        }
+      });
+    } catch (error) {
+      clientLogger.error("Error delete access", error);
+    } finally {
+      setIsLoadingDelete(false);
+      setUserId("");
+    }
   }
 
   async function onSearch(s: any) {
@@ -91,22 +113,26 @@ export default function AdminUserAccess_View({ listUser }: { listUser: any }) {
         {e.active === false ? (
           <Center>
             <Button
+              loaderPosition="center"
+              loading={isLoadingAccess && userId === e.id}
               radius={"xl"}
               color="Green"
               onClick={() => {
                 onAccess(e.id);
               }}
             >
-              Give Access
+              Grand Access
             </Button>
           </Center>
         ) : (
           <Center>
             <Button
+              loaderPosition="center"
+              loading={isLoadingDelete && userId === e.id}
               radius={"xl"}
               color="red"
               onClick={() => {
-                onDelAccess(e.id);
+                onDelete(e.id);
               }}
             >
               Delete Access
diff --git a/src/app_modules/waiting_room/view.tsx b/src/app_modules/waiting_room/view.tsx
index 942cc0c4..26de1573 100644
--- a/src/app_modules/waiting_room/view.tsx
+++ b/src/app_modules/waiting_room/view.tsx
@@ -14,13 +14,15 @@ import {
 import { useShallowEffect } from "@mantine/hooks";
 import { redirect, useRouter } from "next/navigation";
 import { useState } from "react";
+import { ComponentGlobal_CardStyles } from "../_global/component";
+import { apiGetACtivationUser } from "../_global/lib/api_user";
+import { clientLogger } from "@/util/clientLogger";
+import _ from "lodash";
 
 export default function WaitingRoom_View({
-  activationUser,
   userLoginId,
 }: {
-  activationUser: boolean;
-  userLoginId: string;
+  userLoginId?: string;
 }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
@@ -37,71 +39,61 @@ export default function WaitingRoom_View({
     }
   }
 
-  useShallowEffect(() => {
-    if (activationUser == true) {
-      return redirect("/");
-    }
-  }, [activationUser]);
+  const [data, setData] = useState<boolean | null>(null);
 
-  const listhHuruf = [
-    {
-      huruf: "H",
-    },
-    {
-      huruf: "I",
-    },
-    {
-      huruf: "P",
-    },
-    {
-      huruf: "M",
-    },
-    {
-      huruf: "I",
-    },
-  ];
-  const customLOader = (
-    <Center>
-      <Group>
-        {listhHuruf.map((e, i) => (
-          <Center key={i} h={"100%"}>
-            <Skeleton height={50} circle radius={"100%"} />
-            <Text sx={{ position: "absolute" }} c={"gray.5"} fw={"bold"}>
-              {e.huruf}
-            </Text>
-          </Center>
-        ))}
-      </Group>
-    </Center>
-  );
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetACtivationUser();
+      if (respone) {
+        console.log(respone.data);
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get cookies user", error);
+    }
+  }
 
   return (
     <>
       <UIGlobal_LayoutDefault>
-        <Center h={"100vh"}>
-          <Stack align="center" spacing={50}>
-            {/* {customLOader} */}
+        <Stack justify="cneter" h={"90vh"} mt={"xl"}>
+          <ComponentGlobal_CardStyles>
+            {_.isNull(data) ? (
+              <Stack>
+                {Array.from(new Array(4)).map((e, i) => (
+                  <Skeleton key={i} h={20} w={"100%"} />
+                ))}
+              </Stack>
+            ) : (
+              <Stack align="center">
+                <Stack align="center" spacing={5} fs={"italic"}>
+                  <Text fw={"bold"} c={"white"} align="center">
+                    Permohonan akses Anda sedang dalam proses verifikasi oleh
+                    admin.
+                  </Text>
+                  <Text fw={"bold"} c={"white"} align="center">
+                    Harap tunggu, Anda akan menerima pemberitahuan melalui
+                    Whatsapp setelah disetujui.
+                  </Text>
+                </Stack>
 
-            <Stack align="center" spacing={5}>
-              <Title order={3} c={"white"}>
-                Anda telah berhasil mendaftar,
-              </Title>
-              <Title order={3} c={"white"}>
-                Mohon menunggu konfirmansi Admin !
-              </Title>
-            </Stack>
-
-            <Button
-              color="red"
-              loaderPosition="center"
-              loading={loading}
-              radius={"xl"}
-              onClick={() => onClickLogout()}
-            >
-              Keluar
-            </Button>
-          </Stack>
-        </Center>
+                {/* <Button
+                color="red"
+                loaderPosition="center"
+                loading={loading}
+                radius={"xl"}
+                onClick={() => onClickLogout()}
+              >
+                Keluar
+              </Button> */}
+              </Stack>
+            )}
+          </ComponentGlobal_CardStyles>
+        </Stack>
       </UIGlobal_LayoutDefault>
     </>
   );