# feat

## Deskripsi:
- Edit map
- Sinkronisasi dengan data portofolio
### No Issue

.gitignore

@@ -28,8 +28,6 @@ yarn-error.log*
 # local env files
 .env*.local
 
-
-
 # vercel
 .vercel
 

prisma/schema.prisma

@@ -114,6 +114,7 @@ model Images {
   Donasi_Invoice         Donasi_Invoice[]
   Portofolio             Portofolio[]
   Job                    Job[]
+  BusinessMaps           BusinessMaps[]
 }
 
 model ImagesBackground {
@@ -143,6 +144,7 @@ model Portofolio {
   Logo                   Images?                 @relation(fields: [logoId], references: [id])
   logoId                 String?
   Portofolio_MediaSosial Portofolio_MediaSosial?
+  BusinessMaps           BusinessMaps?
 }
 
 model Portofolio_MediaSosial {
@@ -873,13 +875,17 @@ model Notifikasi {
 }
 
 model BusinessMaps {
-  id        String   @id @default(cuid())
-  isActive  Boolean  @default(true)
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  namePin   String
-  latitude  Float
-  longitude Float
-  Author    User?    @relation(fields: [authorId], references: [id])
-  authorId  String?
+  id           String      @id @default(cuid())
+  isActive     Boolean     @default(true)
+  createdAt    DateTime    @default(now())
+  updatedAt    DateTime    @updatedAt
+  namePin      String
+  latitude     Float
+  longitude    Float
+  Author       User?       @relation(fields: [authorId], references: [id])
+  authorId     String?
+  Portofolio   Portofolio? @relation(fields: [portofolioId], references: [id])
+  portofolioId String?     @unique
+  Images       Images?     @relation(fields: [imagesId], references: [id])
+  imagesId     String?
 }

src/app/api/auth/validasi/route.ts

@@ -10,11 +10,9 @@ import yaml from "yaml";
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
 export async function POST(req: Request) {
-
   if (req.method === "POST") {
     const body = await req.json();
 
-
     const data = await prisma.user.findUnique({
       where: {
         nomor: body.nomor,
@@ -27,7 +25,7 @@ export async function POST(req: Request) {
       },
     });
 
-    myConsole(data)
+    myConsole(data);
 
     if (!data) return NextResponse.json({ status: 404 });
 
@@ -38,7 +36,7 @@ export async function POST(req: Request) {
           username: data.username,
         }),
         {
-          password: (await config.server.password),
+          password: await config.server.password,
         }
       );
 
@@ -48,7 +46,7 @@ export async function POST(req: Request) {
         maxAge: 60 * 60 * 24 * 7,
       });
 
-      revalidatePath("/dev/home")
+      revalidatePath("/dev/home");
 
       return NextResponse.json({ status: 200, data });
     }

src/app/api/map/[id]/route.ts

@@ -0,0 +1,32 @@
+import prisma from "@/app/lib/prisma";
+import fs from "fs";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  const get = await prisma.images.findUnique({
+    where: {
+      id: params.id,
+    },
+    select: {
+      url: true,
+    },
+  });
+
+  if (!fs.existsSync(`./public/map/${get?.url}`)) {
+    const notFile = fs.readFileSync("./public/aset/global/no_img.png");
+    return new NextResponse(notFile, {
+      headers: {
+        "Content-Type": "image/png",
+      },
+    });
+  }
+  const file = fs.readFileSync(`./public/map/${get?.url}`);
+  return new NextResponse(file, {
+    headers: {
+      "Content-Type": "image/png",
+    },
+  });
+}

src/app/dev/map/create/[id]/page.tsx

@@ -0,0 +1,10 @@
+import { Map_CreateNewPin } from "@/app_modules/map/view";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  let portofolioId = params.id;
+  return (
+    <>
+      <Map_CreateNewPin  portofolioId={portofolioId}/>
+    </>
+  );
+}

src/app/dev/map/create/page.tsx

@@ -1,9 +0,0 @@
-import { Map_CreateNewPin } from "@/app_modules/map/view";
-
-export default async function Page() {
-  return (
-    <>
-      <Map_CreateNewPin />
-    </>
-  );
-}

src/app/dev/map/edit/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { map_funGetOneByPortofolioId } from "@/app_modules/map/fun/get/fun_get_one_by_portofolio_id";
+import { Map_EditPin } from "@/app_modules/map/view";
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const portofolioId = params.id;
+  const dataMap = await map_funGetOneByPortofolioId({portofolioId: portofolioId})
+
+  return (
+    <>
+      <Map_EditPin portofolioId={portofolioId} dataMap={dataMap} />
+    </>
+  );
+}

src/app/dev/portofolio/main/[id]/page.tsx

@@ -1,17 +1,20 @@
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
 import { ViewPortofolio } from "@/app_modules/katalog/portofolio";
 import { portofolio_getOneById } from "@/app_modules/katalog/portofolio/fun/get/get_one_portofolio";
 
+const mapboxToken = process.env.MAPBOX_TOKEN!;
 export default async function Page({ params }: { params: { id: string } }) {
   const getPorto = await portofolio_getOneById(params.id);
   const userLoginId = await user_getOneUserId();
 
   return (
     <>
-      {/* {JSON.stringify(getPorto)} */}
+      {/* <pre style={{ color: "white" }}>{JSON.stringify(getPorto, null, 2)}</pre> */}
       <ViewPortofolio
         dataPorto={getPorto as any}
         userLoginId={userLoginId as any}
+        mapboxToken={mapboxToken}
       />
     </>
   );

src/app/lib/router_hipmi/router_map.ts

@@ -1,5 +1,10 @@
 export const RouterMap = {
+  // api
+  api_foto: "/api/map/",
+
+  // main
   splash: "/dev/map/splash",
   main_view: "/dev/map/main",
-  create: "/dev/map/create",
+  create: "/dev/map/create/",
+  edit: "/dev/map/edit/",
 };

src/app_modules/_global/ui/ui_drawer.tsx

@@ -91,7 +91,7 @@ export default function UIGlobal_Drawer({
                     e?.icon
                   )}
                 </ActionIcon>
-                <Text align="center" color="white">
+                <Text fz={"sm"} align="center" color="white">
                   {e?.name}
                 </Text>
               </Stack>

src/app_modules/auth/fun/fun_edit_aktivasi_kode_otp_by_id.ts

@@ -2,15 +2,12 @@
 
 import prisma from "@/app/lib/prisma";
 
-export async function auth_funEditAktivasiKodeOtpById(otpId: string) {
+export async function auth_funDeleteAktivasiKodeOtpById(otpId: string) {
   // console.log(otpId);
-  const updt = await prisma.kodeOtp.update({
+  const updt = await prisma.kodeOtp.delete({
     where: {
       id: otpId,
     },
-    data: {
-      isActive: false,
-    },
   });
 
   if (!updt) return { status: 400, message: "Gagal Update Aktivasi Kode OTP" };

src/app_modules/auth/fun/fun_login.ts

@@ -9,7 +9,10 @@ export async function auth_funLogin(nomor: string) {
 
   try {
     const res = await fetch(
-      `https://wa.wibudev.com/code?nom=${nomor}&text=HIPMI - Masukan kode OTP sesuai dengan nomor yang anda daftarkan, kode ini bersifat rahasia & jangan di bagikan pada siapapun termasuk anggota ataupun pengurus HIPMI lainnya. Kode OTP anda: ${codeOtp}`
+      `https://wa.wibudev.com/code?nom=${nomor}&text=HIPMI - Kode ini bersifat RAHASIA dan JANGAN DI BAGIKAN KEPADA SIAPAPUN, termasuk anggota ataupun pengurus HIPMI lainnya. 
+      \n 
+      >> Kode OTP anda: ${codeOtp}.
+      `
     );
 
     const sendWa = await res.json();
@@ -31,6 +34,7 @@ export async function auth_funLogin(nomor: string) {
       kodeOtpId: createOtpId.id,
     };
   } catch (error) {
+    console.log(error);
     return { status: 500, message: "Server Error !!!" };
   }
 }

src/app_modules/auth/fun/fun_logout.ts

@@ -14,13 +14,12 @@ export async function auth_Logout(kodeId: string) {
   const c = cookies().get("ssn");
   if (c?.value !== "") return { status: 400, message: "Gagal Logout" };
 
-  const del = await prisma.kodeOtp.delete({
-    where: {
-      id: kodeId,
-    },
-  });
-
-  if (!del) return { status: 400, message: "Gagal Hapus Kode OTP Id"};
+  // const del = await prisma.kodeOtp.delete({
+  //   where: {
+  //     id: kodeId,
+  //   },
+  // });
+  // if (!del) return { status: 400, message: "Gagal Hapus Kode OTP Id"};
   // revalidatePath("/dev/katalog")
   return { status: 200, message: "Logout Berhasil" };
 }

src/app_modules/auth/fun/get_kode_otp_by_id.ts

@@ -9,5 +9,5 @@ export async function auth_getKodeOtpById(otpId: string) {
     },
   });
 
-  return data
+  return data;
 }

src/app_modules/auth/login/view.tsx

@@ -1,35 +1,29 @@
 "use client";
 
-import {
-  BackgroundImage,
-  Box,
-  Button,
-  Center,
-  Flex,
-  Grid,
-  Group,
-  Image,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
-import { useFocusTrap } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { useAtom } from "jotai";
-import { gs_kodeId } from "../state/state";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { auth_funLogin } from "@/app_modules/auth/fun/fun_login";
 import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { PhoneInput } from "react-international-phone";
-import "react-international-phone/style.css";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { auth_funLogin } from "@/app_modules/auth/fun/fun_login";
+import {
+  BackgroundImage,
+  Button,
+  Center,
+  Stack,
+  Text,
+  Title
+} from "@mantine/core";
+import { useFocusTrap } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { PhoneInput } from "react-international-phone";
+import "react-international-phone/style.css";
+import { gs_kodeId } from "../state/state";
 
 export default function Login() {
   const router = useRouter();

src/app_modules/auth/logout/view.tsx

@@ -1,26 +1,21 @@
 "use client";
 
+import { Warna } from "@/app/lib/warna";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
 import {
   ActionIcon,
   Button,
-  Group,
-  Modal,
   Stack,
-  Text,
-  Title,
+  Text
 } from "@mantine/core";
-import { useRouter } from "next/navigation";
-import { useAtom } from "jotai";
-import { gs_kodeId, gs_nomor, gs_otp } from "../state/state";
 import { IconLogout } from "@tabler/icons-react";
-import { Warna } from "@/app/lib/warna";
-import { useDisclosure } from "@mantine/hooks";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { auth_Logout } from "../fun/fun_logout";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
-import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
+import { auth_Logout } from "../fun/fun_logout";
+import { gs_kodeId } from "../state/state";
 
 export default function Component_Logout() {
   const router = useRouter();

src/app_modules/auth/register/view.tsx

@@ -1,42 +1,31 @@
 "use client";
 
-import { Warna } from "@/app/lib/warna";
-import {
-  Flex,
-  Title,
-  TextInput,
-  Button,
-  Text,
-  Center,
-  PinInput,
-  Stack,
-  BackgroundImage,
-} from "@mantine/core";
-import {
-  IconCircleLetterH,
-  IconCloudLockOpen,
-  IconUserCircle,
-} from "@tabler/icons-react";
-import { gs_nomor } from "../state/state";
-import { useAtom } from "jotai";
-import { useState } from "react";
-import { myConsole } from "@/app/fun/my_console";
-import toast from "react-simple-toasts";
-import { ApiHipmi } from "@/app/lib/api";
-import { useRouter } from "next/navigation";
-import _ from "lodash";
-import { useFocusTrap } from "@mantine/hooks";
-import { Auth_funRegister } from "../fun/fun_register";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
-import { IconPencilCheck } from "@tabler/icons-react";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import { auth_funEditAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
-import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
 import {
   AccentColor,
   MainColor,
 } from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import {
+  BackgroundImage,
+  Button,
+  Center,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { useFocusTrap } from "@mantine/hooks";
+import {
+  IconUserCircle
+} from "@tabler/icons-react";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { auth_funDeleteAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
+import { Auth_funRegister } from "../fun/fun_register";
 
 export default function Register({ dataOtp }: { dataOtp: any }) {
   const router = useRouter();
@@ -60,21 +49,20 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
     if (body.username.length < 5) return null;
     if (_.values(body.username).includes(" ")) return null;
 
-    await Auth_funRegister(body).then(async (res) => {
-      if (res.status === 200) {
-        await auth_funEditAktivasiKodeOtpById(dataOtp.id).then((val) => {
-          if (val.status === 200) {
-            ComponentGlobal_NotifikasiBerhasil(res.message);
-            setLoading(true);
-            router.push(RouterHome.main_home, { scroll: false });
-          } else {
-            ComponentGlobal_NotifikasiPeringatan(val.message);
-          }
-        });
-      } else {
-        ComponentGlobal_NotifikasiPeringatan(res.message);
-      }
-    });
+    const res = await Auth_funRegister(body)
+    if (res.status === 200) {
+      await auth_funDeleteAktivasiKodeOtpById(dataOtp.id).then((val) => {
+        if (val.status === 200) {
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          setLoading(true);
+          router.push(RouterHome.main_home, { scroll: false });
+        } else {
+          ComponentGlobal_NotifikasiPeringatan(val.message);
+        }
+      });
+    } else {
+      ComponentGlobal_NotifikasiPeringatan(res.message);
+    }
   }
 
   return (

src/app_modules/auth/validasi/view.tsx

@@ -24,7 +24,7 @@ import { useFocusTrap } from "@mantine/hooks";
 import { IconChevronLeft } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { auth_funEditAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
+import { auth_funDeleteAktivasiKodeOtpById } from "../fun/fun_edit_aktivasi_kode_otp_by_id";
 import { auth_funValidasi } from "../fun/fun_validasi";
 
 export default function Validasi({ dataOtp }: { dataOtp: any }) {
@@ -41,26 +41,26 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
     if (code != inputCode)
       return ComponentGlobal_NotifikasiPeringatan("Kode Salah");
 
-    await auth_funValidasi(nomor).then(async (res) => {
-      if (res.status === 200) {
-        await auth_funEditAktivasiKodeOtpById(dataOtp.id).then((val) => {
-          if (val.status === 200) {
-            if (res.role === "1") {
-              ComponentGlobal_NotifikasiBerhasil(res.message);
-              setLoading(true);
-              router.push(RouterHome.main_home, { scroll: false });
-            } else {
-              router.push(RouterAdminDashboard.splash_admin);
-            }
-          } else {
-            ComponentGlobal_NotifikasiPeringatan(val.message);
-          }
-        });
+    const res = await auth_funValidasi(nomor);
+    if (res.status === 200) {
+     
+      const resAktivasi = await auth_funDeleteAktivasiKodeOtpById(dataOtp.id);
+      if (resAktivasi.status === 200) {
+        if (res.role === "1") {
+          ComponentGlobal_NotifikasiBerhasil(res.message);
+          setLoading(true);
+          router.push(RouterHome.main_home, { scroll: false });
+        } else {
+          router.push(RouterAdminDashboard.splash_admin);
+        }
       } else {
-        ComponentGlobal_NotifikasiBerhasil(res.message);
-        router.push(RouterAuth.register + dataOtp.id);
+        ComponentGlobal_NotifikasiPeringatan(resAktivasi.message);
       }
-    });
+
+    } else {
+      ComponentGlobal_NotifikasiBerhasil(res.message);
+      router.push(RouterAuth.register + dataOtp.id, { scroll: false });
+    }
   }
 
   return (

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import UIGlobal_Drawer from "@/app_modules/_global/ui/ui_drawer";
 import { ActionIcon } from "@mantine/core";
 import {
@@ -8,6 +9,7 @@ import {
   IconDotsVertical,
   IconEdit,
   IconId,
+  IconMapPinMinus,
   IconPhotoEdit,
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -26,22 +28,28 @@ export function ComponentPortofolio_ButtonMore({
   const listPage = [
     {
       id: "1",
-      name: "Update detail bisnis",
+      name: "Edit detail ",
       icon: <IconEdit />,
       path: RouterPortofolio.edit_data_bisnis + `${portoId}`,
     },
     {
       id: "2",
-      name: "Update logo ",
+      name: "Edit logo ",
       icon: <IconPhotoEdit />,
       path: RouterPortofolio.edit_logo_bisnis + `${portoId}`,
     },
     {
       id: "3",
-      name: "Update sosial media",
+      name: "Edit sosial media",
       icon: <IconId />,
       path: RouterPortofolio.edit_medsos_bisnis + `${portoId}`,
     },
+    {
+      id: "4",
+      name: "Edit pin map",
+      icon: <IconMapPinMinus />,
+      path: RouterMap.edit + `${portoId}`,
+    },
   ];
 
   return (

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

@@ -1,6 +1,6 @@
 import { Group, Paper, Stack, Text } from "@mantine/core";
 import { MODEL_PORTOFOLIO } from "../model/interface";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import { AccentColor, MainColor } from "@/app_modules/_global/color/color_pallet";
 import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 import { IconCaretRight } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -33,9 +33,15 @@ export function ComponentPortofolio_DaftarBoxView({
         }}
       >
         <Group position="apart">
-          <Text fw={"bold"} lineClamp={1} w={"80%"}>
-            {data?.namaBisnis}
-          </Text>
+          <Stack spacing={0} w={"80%"}>
+            <Text fw={"bold"} lineClamp={1} w={"80%"}>
+              {data?.namaBisnis}
+            </Text>
+            <Text fz={10} c={MainColor.yellow}>
+              #{data?.id_Portofolio}
+            </Text>
+          </Stack>
+
           <Stack>
             {isLoading ? (
               <ComponentGlobal_Loader />

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

@@ -0,0 +1,108 @@
+"use client";
+
+import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import {
+  Box,
+  Button,
+  Grid,
+  Group,
+  Image,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import {
+  IconBuildingSkyscraper,
+  IconListDetails,
+  IconPhoneCall,
+  IconMapPin,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { MODEL_MAP } from "@/app_modules/map/lib/interface";
+import { map_funGetOneById } from "@/app_modules/map/fun/get/fun_get_one_by_id";
+
+export function ComponentPortofolio_DetailDataMap({ mapId }: { mapId: any }) {
+  const router = useRouter();
+  const [data, setData] = useState<MODEL_MAP>();
+
+  useShallowEffect(() => {
+    onLoadData(mapId);
+  }, [mapId]);
+
+  async function onLoadData(mapId: string) {
+    const res: any = await map_funGetOneById({ mapId: mapId });
+    setData(res);
+  }
+
+  return (
+    <>
+      <Stack mt={"lg"} spacing={"xl"}>
+        <ComponentGlobal_AuthorNameOnHeader
+          authorName={data?.Author?.username}
+          imagesId={data?.Author?.Profile?.imagesId}
+          profileId={data?.Author?.Profile?.id}
+        />
+
+        <SimpleGrid
+          cols={2}
+          spacing={"lg"}
+          breakpoints={[
+            { maxWidth: 980, cols: 2, spacing: "md" },
+            { maxWidth: 755, cols: 1, spacing: "sm" },
+            { maxWidth: 600, cols: 1, spacing: "sm" },
+          ]}
+        >
+          <Image
+            radius={"sm"}
+            mah={300}
+            maw={200}
+            alt="Foto"
+            src={RouterMap.api_foto + data?.imagesId}
+          />
+          <Box>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconBuildingSkyscraper />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>{data?.Portofolio.namaBisnis}</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconListDetails />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>{data?.Portofolio.MasterBidangBisnis.name}</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconPhoneCall />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>+{data?.Portofolio.tlpn}</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconMapPin />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>{data?.Portofolio.alamatKantor}</Text>
+              </Grid.Col>
+            </Grid>
+          </Box>
+        </SimpleGrid>
+
+        {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+      </Stack>
+    </>
+  );
+}

src/app_modules/katalog/portofolio/component/index.ts

@@ -0,0 +1 @@
+export { ComponentPortofolio_DetailDataMap } from "./detail_data_drawer_map";

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

@@ -1 +0,0 @@
-// create

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

@@ -3,13 +3,17 @@
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
 
-export default function CreatePortofolioLayout({ children, profileId }: { children: any, profileId: any }) {
+export default function CreatePortofolioLayout({
+  children,
+  profileId,
+}: {
+  children: any;
+  profileId: any;
+}) {
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={
-          <UIGlobal_LayoutHeaderTamplate title="Buat Portofolio"/>
-        }
+        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Portofolio" />}
       >
         {children}
       </UIGlobal_LayoutTamplate>

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

@@ -1,9 +1,12 @@
 "use client";
 
-import { Warna } from "@/app/lib/warna";
-import ComponentGlobal_ErrorInput from "@/app_modules/_global/component/error_input";
+import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
 import {
@@ -12,6 +15,7 @@ import {
 } from "@/app_modules/model_global/portofolio";
 import {
   AspectRatio,
+  Box,
   Button,
   Center,
   FileButton,
@@ -19,21 +23,17 @@ import {
   Paper,
   Select,
   Stack,
+  Text,
   TextInput,
   Textarea,
+  Title,
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import _ from "lodash";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import ComponentKatalog_NotedBox from "../../component/noted_box";
 import funCreatePortofolio from "../fun/fun_create_portofolio";
-import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
-import {
-  AccentColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
 
 export default function CreatePortofolio({
   bidangBisnis,
@@ -84,7 +84,7 @@ export default function CreatePortofolio({
             onChange={(val) => {
               setValue({
                 ...value,
-                namaBisnis: val.target.value,
+                namaBisnis: _.startCase(val.target.value),
               });
             }}
           />
@@ -115,8 +115,8 @@ export default function CreatePortofolio({
               },
             }}
             withAsterisk
-            label="Alamat Kantor"
-            placeholder="Alamat kantor"
+            label="Alamat Bisnis"
+            placeholder="Alamat bisnis"
             maxLength={100}
             onChange={(val) => {
               setValue({
@@ -132,8 +132,8 @@ export default function CreatePortofolio({
               },
             }}
             withAsterisk
-            label="Nomor Telepon Kantor"
-            placeholder="Nomor telepon kantor"
+            label="Nomor Telepon "
+            placeholder="Nomor telepon "
             type="number"
             onChange={(val) => {
               setValue({
@@ -149,7 +149,7 @@ export default function CreatePortofolio({
                   color: "white",
                 },
               }}
-              maxLength={150}
+              maxLength={300}
               autosize
               minRows={2}
               maxRows={5}
@@ -164,7 +164,7 @@ export default function CreatePortofolio({
               }}
             />
             <ComponentGlobal_InputCountDown
-              maxInput={150}
+              maxInput={300}
               lengthInput={value.deskripsi.length}
             />
           </Stack>
@@ -172,12 +172,62 @@ export default function CreatePortofolio({
 
         <Stack>
           <ComponentGlobal_BoxInformation informasi="Upload Logo Bisnis Anda!" />
-          <AspectRatio ratio={16 / 9}>
+          {/* <AspectRatio ratio={16 / 9}>
             <Paper radius={"md"} withBorder>
               <Image alt="Foto" src={img ? img : "/aset/no-img.png"} />
             </Paper>
           </AspectRatio>
-          {isFile ? <ComponentGlobal_ErrorInput text="Upload gambar" /> : ""}
+
+          
+
+          {isFile ? <ComponentGlobal_ErrorInput text="Upload gambar" /> : ""} */}
+
+          {img ? (
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.blue}`,
+                  backgroundColor: AccentColor.darkblue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
+                <Image
+                radius={"sm"}
+                  alt="Foto"
+                  src={img ? img : "/aset/no-img.png"}
+                  maw={200}
+                />
+              </Paper>
+            </AspectRatio>
+          ) : (
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.blue}`,
+                  backgroundColor: AccentColor.darkblue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
+                <Box
+                  h={250}
+                  w={200}
+                  style={{
+                    color: "white",
+                  }}
+                >
+                  <Stack spacing={5} justify="center" align="center" h={"100%"}>
+                    <Title order={3}>Upload Logo Bisnis</Title>
+                    <Text fs={"italic"} fz={10} align="center">
+                      Masukan logo bisnis anda untuk ditampilkan dalam
+                      portofolio
+                    </Text>
+                  </Stack>
+                </Box>
+              </Paper>
+            </AspectRatio>
+          )}
 
           <Center>
             <FileButton
@@ -219,7 +269,7 @@ export default function CreatePortofolio({
         </Stack>
 
         <Stack>
-          <ComponentKatalog_NotedBox informasi="Isi hanya pada sosial media yang anda miliki" />
+          <ComponentGlobal_BoxInformation informasi="Isi hanya pada sosial media yang anda miliki" />
           <TextInput
             styles={{
               label: {
@@ -303,6 +353,7 @@ export default function CreatePortofolio({
         </Stack>
 
         <Button
+          disabled={_.values(value).includes("") || file === null}
           mt={"md"}
           radius={50}
           loading={loading ? true : false}
@@ -321,11 +372,8 @@ export default function CreatePortofolio({
           bg={MainColor.yellow}
           color="yellow"
           c={"black"}
-          style={{
-            border: `2px solid ${AccentColor.yellow}`,
-          }}
         >
-          Simpan
+          Selanjutnya
         </Button>
       </Stack>
 
@@ -361,15 +409,17 @@ async function onSubmit(
   const gambar = new FormData();
   gambar.append("file", file as any);
 
-  await funCreatePortofolio(profileId, porto as any, gambar, dataMedsos).then(
-    (res) => {
-      if (res.status === 201) {
-        setLoading(true);
-        ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
-        router.back();
-      } else {
-        ComponentGlobal_NotifikasiGagal("Gagal disimpan");
-      }
-    }
+  const res = await funCreatePortofolio(
+    profileId,
+    porto as any,
+    gambar,
+    dataMedsos
   );
+  if (res.status === 201) {
+    setLoading(true);
+    // ComponentGlobal_NotifikasiBerhasil("Berhasil disimpan");
+    router.replace(RouterMap.create + res.id , {scroll: false});
+  } else {
+    ComponentGlobal_NotifikasiGagal("Gagal disimpan");
+  }
 }

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

@@ -147,7 +147,7 @@ export default function Portofolio_EditDataBisnis({
               value={value.deskripsi}
               label="Deskripsi"
               placeholder="Deskripsi singkat mengenai usaha"
-              maxLength={150}
+              maxLength={300}
               error={
                 value.deskripsi === "" ? (
                   <ComponentGlobal_ErrorInput text="Masukan deskripsi" />
@@ -163,7 +163,7 @@ export default function Portofolio_EditDataBisnis({
               }}
             />
             <ComponentGlobal_InputCountDown
-              maxInput={150}
+              maxInput={300}
               lengthInput={value.deskripsi.length}
             />
           </Stack>

src/app_modules/katalog/portofolio/fun/fun_create_portofolio.ts

@@ -34,7 +34,7 @@ export default async function funCreatePortofolio(
   const upload_Folder = Buffer.from(await gambar.arrayBuffer());
   fs.writeFileSync(`./public/portofolio/logo/${upload.url}`, upload_Folder);
 
-  const createProto = await prisma.portofolio.create({
+  const createPortofolio = await prisma.portofolio.create({
     data: {
       profileId: profileId,
       id_Portofolio: "Porto" + Date.now().toString(),
@@ -47,11 +47,11 @@ export default async function funCreatePortofolio(
     },
   });
 
-  if (!createProto) return { status: 400, message: "Gagal membuat portofolio" };
+  if (!createPortofolio) return { status: 400, message: "Gagal membuat portofolio" };
 
   const createMedsos = await prisma.portofolio_MediaSosial.create({
     data: {
-      portofolioId: createProto.id,
+      portofolioId: createPortofolio.id,
       facebook: medsos.facebook,
       instagram: medsos.instagram,
       tiktok: medsos.tiktok,
@@ -65,6 +65,7 @@ export default async function funCreatePortofolio(
 
   revalidatePath(`/dev/katalog`);
   return {
+    id: createPortofolio.id,
     status: 201,
     message: "Berhasil menambahakan portofolio",
   };

src/app_modules/katalog/portofolio/fun/get/get_list_portofolio.ts

@@ -14,6 +14,7 @@ export async function funGetListPortofolio(profileId: any) {
     },
     select: {
       id: true,
+      id_Portofolio: true,
       namaBisnis: true,
       profileId: true,
     },

src/app_modules/katalog/portofolio/fun/get/get_one_portofolio.ts

@@ -10,6 +10,7 @@ export async function portofolio_getOneById(portoId: string) {
     },
     select: {
       id: true,
+      id_Portofolio: true,
       namaBisnis: true,
       alamatKantor: true,
       deskripsi: true,
@@ -37,6 +38,11 @@ export async function portofolio_getOneById(portoId: string) {
           },
         },
       },
+      BusinessMaps: {
+        include: {
+          Author: true,
+        },
+      },
     },
   });
 

src/app_modules/katalog/portofolio/model/interface.ts

@@ -1,6 +1,7 @@
 import { MODEL_USER } from "@/app_modules/home/model/interface";
 import { MODEL_IMAGES } from "@/app_modules/model_global/interface";
 import { MODEL_PROFILE } from "../../profile/model/interface";
+import { MODEL_MAP } from "@/app_modules/map/lib/interface";
 
 export interface MODEL_PORTOFOLIO {
   id: string;
@@ -14,8 +15,10 @@ export interface MODEL_PORTOFOLIO {
   profileId: string;
   Logo: MODEL_IMAGES;
   logoId: string;
-  Portofolio_MediaSosial: MODEL_PORTOFOLIO_MEDSOS
-  Profile: MODEL_PROFILE
+  Portofolio_MediaSosial: MODEL_PORTOFOLIO_MEDSOS;
+  Profile: MODEL_PROFILE;
+  BusinessMaps: MODEL_MAP;
+  id_Portofolio: string
 }
 
 export interface MODEL_PORTOFOLIO_BIDANG_BISNIS {

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

@@ -1,4 +1,16 @@
-import { Paper, Title, Stack, Grid, Text } from "@mantine/core";
+import {
+  Paper,
+  Title,
+  Stack,
+  Grid,
+  Text,
+  SimpleGrid,
+  Box,
+  AspectRatio,
+  Image,
+  Group,
+  Divider,
+} from "@mantine/core";
 import {
   IconBuildingSkyscraper,
   IconPhoneCall,
@@ -7,7 +19,11 @@ import {
   IconPinned,
 } from "@tabler/icons-react";
 import { MODEL_PORTOFOLIO } from "../model/interface";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
 
 export function Portofolio_UiDetailData({
   dataPorto,
@@ -26,48 +42,86 @@ export function Portofolio_UiDetailData({
           color: "white",
         }}
       >
-        <Title order={6}>Data Bisnis</Title>
-        <Stack p={"sm"}>
-          <Grid>
-            <Grid.Col span={2}>
-              <IconBuildingSkyscraper />
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Text>{dataPorto?.namaBisnis}</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>
-          <Grid>
-            <Grid.Col span={2}>
-              <IconListDetails />
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Text>{dataPorto?.MasterBidangBisnis.name}</Text>
-            </Grid.Col>
-          </Grid>
-          <Grid>
-            <Grid.Col span={2}>
+        <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>
+                <AspectRatio ratio={1 / 1} mah={200}>
+                  <Paper>
+                    <Image
+                      width={200}
+                      alt="Foto"
+                      src={
+                        RouterPortofolio.api_logo_porto + `${dataPorto?.logoId}`
+                      }
+                    />
+                  </Paper>
+                </AspectRatio>
+              </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?.MasterBidangBisnis.name}</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>
+
+          <Divider color={AccentColor.softblue} />
+
+          <Stack spacing={5}>
+            <Group spacing={"xs"}>
               <IconPinned />
-            </Grid.Col>
-            <Grid.Col span={"auto"}>
-              <Text>{dataPorto?.deskripsi}</Text>
-            </Grid.Col>
-          </Grid>
+              <Text fz={"sm"} fw={"bold"}>
+                Tentang Kami
+              </Text>
+            </Group>
+            <Text px={"sm"}>{dataPorto?.deskripsi}</Text>
+          </Stack>
         </Stack>
       </Paper>
     </>

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

@@ -0,0 +1,137 @@
+"use client";
+
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  defaultLatLong,
+  defaultMapZoom,
+} from "@/app_modules/map/lib/default_lat_long";
+import { MODEL_MAP } from "@/app_modules/map/lib/interface";
+import { Group, Image, Paper, Stack, Text, Title } from "@mantine/core";
+import {
+  AttributionControl,
+  Map,
+  Marker,
+  NavigationControl,
+  ScaleControl,
+} from "react-map-gl";
+import "mapbox-gl/dist/mapbox-gl.css";
+import { useState } from "react";
+import { ComponentMap_DrawerDetailData } from "@/app_modules/map/_component";
+import { ComponentMap_DetailData } from "@/app_modules/map/_component/detail_data";
+import { ComponentPortofolio_DetailDataMap } from "../component";
+
+export function Portofolio_UiMap({
+  mapboxToken,
+  data,
+}: {
+  mapboxToken: string;
+  data: MODEL_MAP;
+}) {
+  return (
+    <Paper
+      p={"sm"}
+      style={{
+        backgroundColor: AccentColor.darkblue,
+        border: `2px solid ${AccentColor.blue}`,
+        borderRadius: "10px ",
+        padding: "15px",
+        color: "white",
+      }}
+    >
+      <Stack spacing={0}>
+        <Title mb={"lg"} order={6}>
+          Lokasi Bisnis
+        </Title>
+
+        <MapView data={data} mapboxToken={mapboxToken} />
+      </Stack>
+    </Paper>
+  );
+}
+
+function MapView({
+  mapboxToken,
+  data,
+}: {
+  mapboxToken: string;
+  data: MODEL_MAP;
+}) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+
+  return (
+    <>
+      <Map
+        mapboxAccessToken={mapboxToken}
+        mapStyle={"mapbox://styles/mapbox/streets-v11"}
+        initialViewState={{
+          latitude: data.latitude,
+          longitude: data.longitude,
+          zoom: defaultMapZoom,
+        }}
+        style={{
+          cursor: "pointer",
+          width: "100%",
+          height: "50vh",
+          borderRadius: "5px",
+        }}
+        attributionControl={false}
+        
+      >
+        <Marker
+          style={{
+            color: "red",
+            width: 40,
+            cursor: "pointer",
+          }}
+          latitude={data.latitude}
+          longitude={data.longitude}
+          anchor="bottom"
+          offset={[0, 0]}
+          scale={1}
+          onClick={() => {
+            setOpenDrawer(true);
+          }}
+          pitchAlignment="auto"
+        >
+          <Stack spacing={0} align="center">
+            <Image
+              w={"100%"}
+              alt="image"
+              src="https://cdn-icons-png.flaticon.com/512/5860/5860579.png"
+            />
+
+            <Text
+              fz={"xs"}
+              bg={"dark"}
+              c={"white"}
+              align="center"
+              style={{
+                borderRadius: "5px",
+                padding: "5px",
+                width: 50,
+              }}
+              lineClamp={2}
+            >
+              {data.namePin}
+            </Text>
+          </Stack>
+        </Marker>
+
+        <NavigationControl />
+        <ScaleControl position="top-left" />
+        <AttributionControl
+          style={{ color: "black" }}
+          customAttribution="Map design by PT. Bali Interaktif Perkasa"
+        />
+      </Map>
+
+      <ComponentMap_DrawerDetailData
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        mapId={data.id}
+        component={<ComponentPortofolio_DetailDataMap mapId={data.id} />}
+      />
+    </>
+  );
+}
+// ComponentPortofolio_DetailDataMap;

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

@@ -8,20 +8,23 @@ import { MODEL_PORTOFOLIO } from "../model/interface";
 import { Portofolio_UiDetailData } from "./ui_detail_data";
 import { Portofolio_UiDetailLogo } from "./ui_detail_logo";
 import { Portofolio_UiSosialMedia } from "./ui_detail_media";
+import { Portofolio_UiMap } from "./ui_detail_map";
 
 export default function Portofolio_UiDetail({
   dataPorto,
   userLoginId,
+  mapboxToken,
 }: {
   dataPorto: MODEL_PORTOFOLIO;
   userLoginId: string;
+  mapboxToken: string
 }) {
-
   return (
     <>
       <Stack mb={"lg"}>
         <Portofolio_UiDetailData dataPorto={dataPorto} />
-        <Portofolio_UiDetailLogo dataPorto={dataPorto} />
+        <Portofolio_UiMap mapboxToken={mapboxToken} data={dataPorto.BusinessMaps} />
+        {/* <Portofolio_UiDetailLogo dataPorto={dataPorto} /> */}
         <Portofolio_UiSosialMedia dataPorto={dataPorto} />
 
         <ComponentPortofolio_ButtonDelete

src/app_modules/katalog/ui/ui_list_portofolio.tsx

@@ -55,7 +55,9 @@ export function Portofolio_UiListView({
               <ActionIcon
                 variant="transparent"
                 onClick={() => {
-                  router.push(RouterPortofolio.create + `${profile.id}`);
+                  router.push(RouterPortofolio.create + `${profile.id}`, {
+                    scroll: false,
+                  });
                   setLoading(true);
                 }}
               >
@@ -102,9 +104,14 @@ export function Portofolio_UiListView({
                     }}
                   >
                     <Group position="apart">
-                      <Text fw={"bold"} lineClamp={1} w={"80%"}>
-                        {e?.namaBisnis}
-                      </Text>
+                      <Stack spacing={0} w={"80%"}>
+                        <Text fw={"bold"} lineClamp={1}>
+                          {e?.namaBisnis}
+                        </Text>
+                        <Text fz={10} c={MainColor.yellow}>
+                          #{e.id_Portofolio}
+                        </Text>
+                      </Stack>
                       <Stack>
                         {idPorto === e?.id && loadingPorto ? (
                           <ComponentGlobal_Loader />

src/app_modules/map/_component/detail_data.tsx

@@ -1,14 +1,34 @@
 "use client";
 
-import { Skeleton, Stack, Text, Title } from "@mantine/core";
-import { Suspense, useState } from "react";
-import { MODEL_MAP } from "../lib/interface";
-import { useShallowEffect } from "@mantine/hooks";
-import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/_global/author_name_on_header";
+import {
+  Box,
+  Button,
+  Grid,
+  Group,
+  Image,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
+import { MODEL_MAP } from "../lib/interface";
+import {
+  IconBuildingSkyscraper,
+  IconListDetails,
+  IconPhoneCall,
+  IconMapPin,
+} from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
 
-export function ComponentMap_DetailData({ mapId }: { mapId: string }) {
+export function ComponentMap_DetailData({ mapId }: { mapId: any }) {
+  const router = useRouter();
   const [data, setData] = useState<MODEL_MAP>();
 
   useShallowEffect(() => {
@@ -22,31 +42,94 @@ export function ComponentMap_DetailData({ mapId }: { mapId: string }) {
 
   return (
     <>
-      <Stack>
-        <Stack spacing={0}>
-          <Text>
-            latitude:{"  "}
-            <Text fw={"bold"} span inherit>
-              {data?.latitude}
-            </Text>
-          </Text>
-          <Text>
-            longitude:{"  "}
-            <Text fw={"bold"} span inherit>
-              {data?.longitude}
-            </Text>
-          </Text>
-        </Stack>
-
-        <Title order={4}>{data?.namePin}</Title>
-        {/* <Text>{data?.Author?.username}</Text> */}
-
+      <Stack mt={"lg"} spacing={"xl"}>
         <ComponentGlobal_AuthorNameOnHeader
           authorName={data?.Author?.username}
           imagesId={data?.Author?.Profile?.imagesId}
           profileId={data?.Author?.Profile?.id}
         />
 
+        <SimpleGrid
+          cols={2}
+          spacing={"lg"}
+          breakpoints={[
+            { maxWidth: 980, cols: 2, spacing: "md" },
+            { maxWidth: 755, cols: 1, spacing: "sm" },
+            { maxWidth: 600, cols: 1, spacing: "sm" },
+          ]}
+        >
+          <Image
+            radius={"sm"}
+            mah={300}
+            maw={200}
+            alt="Foto"
+            src={RouterMap.api_foto + data?.imagesId}
+          />
+          <Box>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconBuildingSkyscraper />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>{data?.Portofolio.namaBisnis}</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconListDetails />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>{data?.Portofolio.MasterBidangBisnis.name}</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconPhoneCall />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>+{data?.Portofolio.tlpn}</Text>
+              </Grid.Col>
+            </Grid>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconMapPin />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text>{data?.Portofolio.alamatKantor}</Text>
+              </Grid.Col>
+            </Grid>
+          </Box>
+        </SimpleGrid>
+
+        <SimpleGrid
+          cols={2}
+          spacing={"lg"}
+          breakpoints={[
+            { maxWidth: 980, cols: 2, spacing: "md" },
+            { maxWidth: 755, cols: 1, spacing: "sm" },
+            { maxWidth: 600, cols: 1, spacing: "sm" },
+          ]}
+        >
+          <Box />
+
+          <Group position="center">
+            <Button
+              radius={"xl"}
+              onClick={() => {
+                router.push(
+                  RouterPortofolio.main_detail + data?.Portofolio.id,
+                  { scroll: false }
+                );
+              }}
+              bg={MainColor.yellow}
+              color="yellow"
+              c={"black"}
+            >
+              Detail
+            </Button>
+          </Group>
+        </SimpleGrid>
+
         {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
       </Stack>
     </>

src/app_modules/map/_component/drawer.tsx

@@ -9,13 +9,12 @@ import {
   Stack,
   Title,
 } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import { IconX } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import { Suspense, useState } from "react";
+import React, { useState } from "react";
+import { map_funGetOneById } from "../fun/get/fun_get_one_by_id";
 import { MODEL_MAP } from "../lib/interface";
-import { useShallowEffect } from "@mantine/hooks";
-import { ComponentMap_DetailData } from "./detail_data";
-import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
 
 interface MODEL_DRAWER {
   id: string;
@@ -27,15 +26,27 @@ export function ComponentMap_DrawerDetailData({
   opened,
   close,
   mapId,
+  component,
 }: {
   opened: boolean;
   close: () => void;
   mapId: string;
+  component: React.ReactNode;
 }) {
   const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
   const [data, setData] = useState<MODEL_MAP>();
 
+  useShallowEffect(() => {
+    onLoadData(mapId);
+  }, [mapId]);
+
+  async function onLoadData(mapId: string) {
+    const res: any = await map_funGetOneById({ mapId: mapId });
+    if (res !== null) {
+      setData(res);
+    }
+  }
+
   return (
     <>
       <Drawer
@@ -67,14 +78,18 @@ export function ComponentMap_DrawerDetailData({
       >
         <Stack spacing={"xs"}>
           <Group position="apart">
-            <Title order={5}>Detail Map</Title>
+            <Title order={5}>
+              {data?.namePin ? (
+                data?.namePin
+              ) : (
+                <Skeleton radius={"xl"} w={100} />
+              )}
+            </Title>
             <ActionIcon onClick={close} variant="transparent">
               <IconX color="white" />
             </ActionIcon>
           </Group>
-          <Suspense fallback={<ComponentGlobal_Loader />}>
-            <ComponentMap_DetailData mapId={mapId} />
-          </Suspense>
+          {component}
         </Stack>
       </Drawer>
     </>

src/app_modules/map/_component/header.tsx

@@ -25,11 +25,11 @@ export function ComponentMap_Header() {
     <>
       <UIGlobal_LayoutHeaderTamplate
         title="Business Maps"
-        customButtonRight={
-          <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
-            <IconDotsVertical color="white" />
-          </ActionIcon>
-        }
+        // customButtonRight={
+        //   <ActionIcon variant="transparent" onClick={() => setOpenDrawer(true)}>
+        //     <IconDotsVertical color="white" />
+        //   </ActionIcon>
+        // }
       />
 
       <UIGlobal_Drawer

src/app_modules/map/fun/create/fun_create_pin.ts

@@ -3,23 +3,47 @@
 import prisma from "@/app/lib/prisma";
 import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+import _ from "lodash";
 import { revalidatePath } from "next/cache";
+import { v4 } from "uuid";
+import fs from "fs";
 
 export async function map_funCreatePin({ data }: { data: any }) {
   const authorId = await user_getOneUserId();
-  // console.log(data);
+
+  const gambar: any = data.gambar.get("file");
+  const fileName = gambar.name;
+  const fileExtension = _.lowerCase(gambar.name.split(".").pop());
+  const fRandomName = v4(fileName) + "." + fileExtension;
+
+  const uploadImage = await prisma.images.create({
+    data: {
+      url: fRandomName,
+      label: "MAP_PHOTO",
+    },
+    select: {
+      id: true,
+      url: true,
+    },
+  });
+
+  if (!uploadImage) return { status: 400, message: "Gagal upload foto lokasi" };
+  const upload_Folder = Buffer.from(await gambar.arrayBuffer());
+  fs.writeFileSync(`./public/map/${uploadImage.url}`, upload_Folder);
 
   const create = await prisma.businessMaps.create({
     data: {
       latitude: data.lat,
       longitude: data.long,
       namePin: data.namePin,
+      portofolioId: data?.portofolioId,
       authorId: authorId,
+      imagesId: uploadImage.id,
     },
   });
 
   if (!create) return { status: 400, message: "Gagal menambahkan" };
 
-  revalidatePath(RouterMap.main_view)
+  revalidatePath(RouterMap.main_view);
   return { status: 200, message: "Berhasil menambahkan" };
 }

src/app_modules/map/fun/edit/fun_edit_map.ts

@@ -0,0 +1,71 @@
+"use server";
+
+import _, { update } from "lodash";
+import { MODEL_MAP } from "../../lib/interface";
+import { v4 } from "uuid";
+import prisma from "@/app/lib/prisma";
+import fs from "fs";
+import { revalidatePath } from "next/cache";
+import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
+
+export async function map_funEditMap({
+  data,
+  file,
+}: {
+  data: MODEL_MAP;
+  file: FormData;
+}) {
+  // console.log(data, file);
+
+  const gambar: any = file.get("file");
+  if (gambar !== "null") {
+    const fileName = gambar.name;
+    const fileExtension = _.lowerCase(gambar.name.split(".").pop());
+    const fRandomName = v4(fileName) + "." + fileExtension;
+
+    const uploadImage = await prisma.images.create({
+      data: {
+        url: fRandomName,
+        label: "MAP_PHOTO",
+      },
+      select: {
+        id: true,
+        url: true,
+      },
+    });
+
+    if (!uploadImage)
+      return { status: 400, message: "Gagal upload foto lokasi" };
+    const upload_Folder = Buffer.from(await gambar.arrayBuffer());
+    fs.writeFileSync(`./public/map/${uploadImage.url}`, upload_Folder);
+
+    const updt = await prisma.businessMaps.update({
+      where: {
+        id: data.id,
+      },
+      data: {
+        latitude: data.latitude,
+        longitude: data.longitude,
+        namePin: data.namePin,
+        imagesId: uploadImage.id,
+      },
+    });
+
+    if (!updt) return { status: 400, message: "Gagal update data" };
+  }
+
+  const updt = await prisma.businessMaps.update({
+    where: {
+      id: data.id,
+    },
+    data: {
+      latitude: data.latitude,
+      longitude: data.longitude,
+      namePin: data.namePin,
+    },
+  });
+  if (!updt) return { status: 400, message: "Gagal update data" };
+
+  revalidatePath(RouterPortofolio.main_detail);
+  return { status: 200, message: "Berhasil update" };
+}

src/app_modules/map/fun/get/fun_get_one_by_id.ts

@@ -9,8 +9,15 @@ export async function map_funGetOneById({ mapId }: { mapId: string }) {
     },
     select: {
       Author: {
-        include: {
-          Profile: true,
+        select: {
+          id: true,
+          username: true,
+          Profile: {
+            select: {
+              id: true,
+              imagesId: true,
+            },
+          },
         },
       },
       id: true,
@@ -21,6 +28,21 @@ export async function map_funGetOneById({ mapId }: { mapId: string }) {
       latitude: true,
       longitude: true,
       authorId: true,
+      imagesId: true,
+      Portofolio: {
+        select: {
+          id: true,
+          alamatKantor: true,
+          tlpn: true,
+          deskripsi: true,
+          namaBisnis: true,
+          MasterBidangBisnis: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      },
     },
   });
 

src/app_modules/map/fun/get/fun_get_one_by_portofolio_id.ts

@@ -0,0 +1,24 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function map_funGetOneByPortofolioId({
+  portofolioId,
+}: {
+  portofolioId: string;
+}) {
+  const res = await prisma.businessMaps.findFirst({
+    where: {
+      portofolioId: portofolioId,
+    },
+    select: {
+      id: true,
+      namePin: true,
+      latitude: true,
+      longitude: true,
+      imagesId: true,
+    },
+  });
+
+  return res;
+}

src/app_modules/map/lib/default_lat_long.ts

@@ -1,2 +1,3 @@
 export const defaultLatLong = [-8.723606930462012, 115.17496509980654];
-export const defaultMapZoom = 14;
+export const defaultMapZoom = 12
+

src/app_modules/map/lib/interface.ts

@@ -1,4 +1,5 @@
 import { MODEL_USER } from "@/app_modules/home/model/interface";
+import { MODEL_PORTOFOLIO } from "@/app_modules/katalog/portofolio/model/interface";
 
 export interface MODEL_MAP {
   id: string;
@@ -9,5 +10,8 @@ export interface MODEL_MAP {
   latitude: number;
   longitude: number;
   authorId: string;
-  Author: MODEL_USER
+  Author: MODEL_USER;
+  portofolioId: string;
+  Portofolio: MODEL_PORTOFOLIO
+  imagesId: string
 }

src/app_modules/map/ui/index.ts

@@ -1,3 +1,4 @@
 export { UiMap_MapBoxView } from "./ui_map";
 export { UiMap_SplashView } from "./ui_splash";
-export { UiMap_CreatePin } from "./ui_create_pin"
+export { UiMap_CreatePin } from "./ui_create_pin"
+export { UiMap_EditPin } from "./ui_edit_pin"

src/app_modules/map/ui/ui_create_pin.tsx

@@ -7,28 +7,52 @@ import {
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import {
+  ActionIcon,
+  Affix,
+  AspectRatio,
+  Box,
   Button,
+  Center,
+  FileButton,
   Group,
   Image,
   Paper,
   Stack,
-  TextInput
+  Text,
+  TextInput,
+  Title,
 } from "@mantine/core";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import Map, { Marker } from "react-map-gl";
+import Map, {
+  AttributionControl,
+  Marker,
+  NavigationControl,
+  ScaleControl,
+} from "react-map-gl";
 import { map_funCreatePin } from "../fun/create/fun_create_pin";
 import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import { IconCamera, IconX } from "@tabler/icons-react";
 
-export function UiMap_CreatePin({ mapboxToken }: { mapboxToken: string }) {
+export function UiMap_CreatePin({
+  mapboxToken,
+  portofolioId,
+}: {
+  mapboxToken: string;
+  portofolioId: string;
+}) {
   const [[lat, long], setLatLong] = useState([0, 0]);
   const [isPin, setIsPin] = useState(false);
   const [namePin, setNamePin] = useState("");
+  const [file, setFile] = useState<File | any>(null);
+  const [img, setImg] = useState<any | null>(null);
 
   return (
     <>
-      <Stack style={{ borderRadius: "10px" }}>
+      <Stack>
         <Map
           mapboxAccessToken={mapboxToken}
           mapStyle={"mapbox://styles/mapbox/streets-v11"}
@@ -47,6 +71,7 @@ export function UiMap_CreatePin({ mapboxToken }: { mapboxToken: string }) {
             setLatLong([a.lngLat.lat, a.lngLat.lng]);
             setIsPin(true);
           }}
+          attributionControl={false}
         >
           <Marker
             style={{
@@ -67,6 +92,9 @@ export function UiMap_CreatePin({ mapboxToken }: { mapboxToken: string }) {
               />
             </Stack>
           </Marker>
+          <NavigationControl />
+          <ScaleControl position="top-left" />
+          <AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
         </Map>
 
         <Paper
@@ -78,25 +106,113 @@ export function UiMap_CreatePin({ mapboxToken }: { mapboxToken: string }) {
             color: "white",
           }}
         >
-          <Stack>
-            <TextInput
-              disabled={isPin ? false : true}
-              style={{ transition: "0.5s" }}
-              styles={{ label: { color: isPin ? "white" : "gray" } }}
-              label="Nama Pin"
-              placeholder="Masukan nama pin map"
-              withAsterisk
-              onChange={(val) => {
-                setNamePin(_.startCase(val.currentTarget.value));
-              }}
-            />
-            <ButtonSavePin
-              namePin={namePin}
-              lat={lat as any}
-              long={long as any}
-            />
-          </Stack>
+          <TextInput
+            disabled={isPin ? false : true}
+            style={{ transition: "0.5s" }}
+            styles={{ label: { color: isPin ? "white" : "gray" } }}
+            label="Nama Pin"
+            placeholder="Masukan nama pin map"
+            withAsterisk
+            onChange={(val) => {
+              setNamePin(_.startCase(val.currentTarget.value));
+            }}
+          />
         </Paper>
+
+        <Stack>
+          {img ? (
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.blue}`,
+                  backgroundColor: AccentColor.darkblue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
+                <Image
+                  radius={"sm"}
+                  alt="Foto"
+                  src={img ? img : "/aset/no-img.png"}
+                  maw={200}
+                />
+              </Paper>
+            </AspectRatio>
+          ) : (
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.blue}`,
+                  backgroundColor: AccentColor.darkblue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
+                <Box
+                  h={250}
+                  w={200}
+                  style={{
+                    color: "white",
+                  }}
+                >
+                  <Stack spacing={5} justify="center" align="center" h={"100%"}>
+                    <Title order={3}>Foto Lokasi Bisnis</Title>
+                    <Text fs={"italic"} fz={10} align="center">
+                      Upload foto lokasi bisnis anda untuk ditampilkan dalam
+                      detail map
+                    </Text>
+                  </Stack>
+                </Box>
+              </Paper>
+            </AspectRatio>
+          )}
+
+          <Center>
+            <FileButton
+              onChange={async (files: any | null) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+                  if (files.size > 2000000) {
+                    ComponentGlobal_NotifikasiPeringatan(
+                      "Maaf, Ukuran file terlalu besar, maximum 2mb",
+                      3000
+                    );
+                  } else {
+                    setImg(buffer);
+                    setFile(files);
+                  }
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+              accept="image/png,image/jpeg"
+            >
+              {(props) => (
+                <Button
+                  disabled={isPin ? false : true}
+                  {...props}
+                  radius={"xl"}
+                  leftIcon={<IconCamera />}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
+                >
+                  Upload
+                </Button>
+              )}
+            </FileButton>
+          </Center>
+        </Stack>
+
+        <ButtonSavePin
+          namePin={namePin}
+          lat={lat as any}
+          long={long as any}
+          portofolioId={portofolioId}
+          file={file}
+        />
       </Stack>
     </>
   );
@@ -106,14 +222,23 @@ function ButtonSavePin({
   namePin,
   lat,
   long,
+  portofolioId,
+  file,
 }: {
   namePin: string;
   lat: string;
   long: string;
+  portofolioId: string;
+  file: FormData;
 }) {
   const router = useRouter();
   async function onSavePin() {
-    const res = await map_funCreatePin({ data: { namePin, lat, long } });
+    const gambar = new FormData();
+    gambar.append("file", file as any);
+
+    const res = await map_funCreatePin({
+      data: { namePin, lat, long, portofolioId, gambar },
+    });
     res.status === 200
       ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
       : ComponentGlobal_NotifikasiGagal(res.message);
@@ -121,19 +246,18 @@ function ButtonSavePin({
 
   return (
     <>
-      <Group position="right">
-        <Button
-          style={{ transition: "0.5s" }}
-          disabled={namePin === "" ? true : false}
-          radius={"xl"}
-          bg={MainColor.yellow}
-          color="yellow"
-          c={"black"}
-          onClick={() => onSavePin()}
-        >
-          Simpan
-        </Button>
-      </Group>
+      <Button
+        mt={"xl"}
+        style={{ transition: "0.5s" }}
+        disabled={namePin === "" || file === null ? true : false}
+        radius={"xl"}
+        bg={MainColor.yellow}
+        color="yellow"
+        c={"black"}
+        onClick={() => onSavePin()}
+      >
+        Simpan
+      </Button>
     </>
   );
 }

src/app_modules/map/ui/ui_edit_pin.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
+import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global/notifikasi_peringatan";
+import {
+  AspectRatio,
+  Box,
+  Button,
+  Center,
+  FileButton,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { IconCamera } from "@tabler/icons-react";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import Map, {
+  AttributionControl,
+  Marker,
+  NavigationControl,
+  ScaleControl,
+} from "react-map-gl";
+import { map_funCreatePin } from "../fun/create/fun_create_pin";
+import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
+import { MODEL_MAP } from "../lib/interface";
+import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import { map_funEditMap } from "../fun/edit/fun_edit_map";
+
+export function UiMap_EditPin({
+  mapboxToken,
+  dataMap,
+}: {
+  mapboxToken: string;
+  dataMap: MODEL_MAP;
+}) {
+  const [data, setData] = useState(dataMap);
+  const [file, setFile] = useState<File | any>(null);
+  const [img, setImg] = useState<any | null>(null);
+
+
+  return (
+    <>
+      <Stack>
+        <Map
+          mapboxAccessToken={mapboxToken}
+          mapStyle={"mapbox://styles/mapbox/streets-v11"}
+          initialViewState={{
+            latitude: data.latitude,
+            longitude: data.longitude,
+            zoom: defaultMapZoom,
+          }}
+          style={{
+            cursor: "pointer",
+            width: "100%",
+            height: "60vh",
+            borderRadius: "10px",
+          }}
+          onClick={(a) => {
+            setData({
+              ...data,
+              latitude: a.lngLat.lat,
+              longitude: a.lngLat.lng,
+            });
+          }}
+          attributionControl={false}
+        >
+          <Marker
+            style={{
+              color: "red",
+              width: 40,
+              // height: 40,
+              cursor: "pointer",
+            }}
+            latitude={data.latitude}
+            longitude={data.longitude}
+            anchor="bottom"
+          >
+            <Stack spacing={0}>
+              <Image
+                w={"100%"}
+                alt="image"
+                src="https://cdn-icons-png.flaticon.com/512/5860/5860579.png"
+              />
+            </Stack>
+          </Marker>
+          <NavigationControl />
+          <ScaleControl position="top-left" />
+          <AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
+        </Map>
+
+        <Paper
+          style={{
+            padding: "15px",
+            backgroundColor: AccentColor.darkblue,
+            border: `2px solid ${AccentColor.blue}`,
+            borderRadius: "10px",
+            color: "white",
+          }}
+        >
+          <TextInput
+            style={{ transition: "0.5s" }}
+            styles={{ label: { color: "white" } }}
+            label="Nama Pin"
+            placeholder="Masukan nama pin map"
+            value={data.namePin}
+            withAsterisk
+            onChange={(val) => {
+              setData({
+                ...data,
+                namePin: val.currentTarget.value,
+              });
+            }}
+          />
+        </Paper>
+
+        <Stack>
+          {img ? (
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.blue}`,
+                  backgroundColor: AccentColor.darkblue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
+                <Image
+                  radius={"sm"}
+                  alt="Foto"
+                  src={img ? img : "/aset/no-img.png"}
+                  maw={250}
+                />
+              </Paper>
+            </AspectRatio>
+          ) : (
+            <AspectRatio ratio={1 / 1} mah={300}>
+              <Paper
+                style={{
+                  border: `2px solid ${AccentColor.blue}`,
+                  backgroundColor: AccentColor.darkblue,
+                  padding: "10px",
+                  borderRadius: "10px",
+                }}
+              >
+                <Image
+                  radius={"sm"}
+                  alt="Foto"
+                  src={RouterMap.api_foto + data.imagesId}
+                  maw={250}
+                />
+              </Paper>
+            </AspectRatio>
+          )}
+
+          <Center>
+            <FileButton
+              onChange={async (files: any | null) => {
+                try {
+                  const buffer = URL.createObjectURL(
+                    new Blob([new Uint8Array(await files.arrayBuffer())])
+                  );
+                  if (files.size > 2000000) {
+                    ComponentGlobal_NotifikasiPeringatan(
+                      "Maaf, Ukuran file terlalu besar, maximum 2mb",
+                      3000
+                    );
+                  } else {
+                    setImg(buffer);
+                    setFile(files);
+                  }
+                } catch (error) {
+                  console.log(error);
+                }
+              }}
+              accept="image/png,image/jpeg"
+            >
+              {(props) => (
+                <Button
+                  {...props}
+                  radius={"xl"}
+                  leftIcon={<IconCamera />}
+                  bg={MainColor.yellow}
+                  color="yellow"
+                  c={"black"}
+                >
+                  Upload
+                </Button>
+              )}
+            </FileButton>
+          </Center>
+        </Stack>
+
+        <ButtonSavePin data={data as any} file={file} />
+      </Stack>
+    </>
+  );
+}
+
+function ButtonSavePin({ data, file }: { data: MODEL_MAP; file: FormData }) {
+  const router = useRouter();
+  async function onSavePin() {
+    const gambar = new FormData();
+    gambar.append("file", file as any);
+
+    const res = await map_funEditMap({
+      data: data,
+      file: gambar
+
+    });
+    res.status === 200
+      ? (ComponentGlobal_NotifikasiBerhasil(res.message), router.back())
+      : ComponentGlobal_NotifikasiGagal(res.message);
+  }
+
+  return (
+    <>
+      <Button
+        mt={"xl"}
+        style={{ transition: "0.5s" }}
+        disabled={data.namePin === "" ? true : false}
+        radius={"xl"}
+        bg={MainColor.yellow}
+        color="yellow"
+        c={"black"}
+        onClick={() => onSavePin()}
+      >
+        Simpan
+      </Button>
+    </>
+  );
+}

src/app_modules/map/ui/ui_map.tsx

@@ -1,21 +1,20 @@
 "use client";
 
-import "mapbox-gl/dist/mapbox-gl.css";
-import { Image, Stack, Text, Tooltip } from "@mantine/core";
+import { Image, Stack, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { useRef, useState } from "react";
+import "mapbox-gl/dist/mapbox-gl.css";
+import { useState } from "react";
 import Map, {
   AttributionControl,
-  GeolocateControl,
   Marker,
   NavigationControl,
-  Popup,
-  ScaleControl,
+  ScaleControl
 } from "react-map-gl";
+import { ComponentMap_DrawerDetailData } from "../_component";
+import { ComponentMap_DetailData } from "../_component/detail_data";
+import { map_funGetAllMap } from "../fun/get/fun_get_all_map";
 import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
 import { MODEL_MAP } from "../lib/interface";
-import { ComponentMap_DrawerDetailData } from "../_component";
-import { map_funGetAllMap } from "../fun/get/fun_get_all_map";
 
 export function UiMap_MapBoxView({
   mapboxToken,
@@ -90,7 +89,7 @@ export function UiMap_MapBoxView({
                     style={{
                       borderRadius: "5px",
                       padding: "5px",
-                      width: "auto",
+                      width: 50,
                     }}
                     lineClamp={2}
                   >
@@ -111,6 +110,7 @@ export function UiMap_MapBoxView({
         opened={openDrawer}
         close={() => setOpenDrawer(false)}
         mapId={mapId}
+        component={<ComponentMap_DetailData mapId={mapId} />}
       />
     </>
   );

src/app_modules/map/view/create.tsx

@@ -4,16 +4,25 @@ import { UiMap_CreatePin } from "../ui/ui_create_pin";
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
 
 const mapboxToken = process.env.MAPBOX_TOKEN!;
-export async function Map_CreateNewPin() {
+export async function Map_CreateNewPin({
+  portofolioId,
+}: {
+  portofolioId: string;
+}) {
   if (!mapboxToken)
     return <ComponentGlobal_IsEmptyData text="Mapbox token not found" />;
 
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Tambah Pin" />}
+        header={
+          <UIGlobal_LayoutHeaderTamplate title="Tambah Pin" hideButtonLeft />
+        }
       >
-        <UiMap_CreatePin mapboxToken={mapboxToken} />
+        <UiMap_CreatePin
+          mapboxToken={mapboxToken}
+          portofolioId={portofolioId}
+        />
       </UIGlobal_LayoutTamplate>
     </>
   );

src/app_modules/map/view/edit.tsx

@@ -0,0 +1,27 @@
+import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
+import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { UiMap_CreatePin } from "../ui/ui_create_pin";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import { UiMap_EditPin } from "../ui";
+
+const mapboxToken = process.env.MAPBOX_TOKEN!;
+export async function Map_EditPin({
+  portofolioId,
+  dataMap,
+}: {
+  portofolioId: string;
+  dataMap: any
+}) {
+  if (!mapboxToken)
+    return <ComponentGlobal_IsEmptyData text="Mapbox token not found" />;
+
+  return (
+    <>
+      <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Pin" />}
+      >
+        <UiMap_EditPin mapboxToken={mapboxToken} dataMap={dataMap} />
+      </UIGlobal_LayoutTamplate>
+    </>
+  );
+}

src/app_modules/map/view/index.ts

@@ -1,3 +1,4 @@
 export { Map_View } from "./main_view";
 export { Map_Splash } from "./splash";
 export { Map_CreateNewPin } from "./create";
+export { Map_EditPin } from "./edit";