# feat

## Deskripsi: - Edit map - Sinkronisasi dengan data portofolio ### No Issue
2024-08-15 17:46:13 +08:00
parent 059cbe6b0f
commit 34031355fe
59 changed files with 1410 additions and 342 deletions
--- a/src/app_modules/katalog/portofolio/component/button_more.tsx
+++ b/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 (
--- a/src/app_modules/katalog/portofolio/component/card_view_daftar.tsx
+++ b/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 />
--- a/src/app_modules/katalog/portofolio/component/detail_data_drawer_map.tsx
+++ b/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>
+    </>
+  );
+}
--- a/src/app_modules/katalog/portofolio/component/index.ts
+++ b/src/app_modules/katalog/portofolio/component/index.ts
@@ -0,0 +1 @@
+export { ComponentPortofolio_DetailDataMap } from "./detail_data_drawer_map";
--- a/src/app_modules/katalog/portofolio/create/create_intro.tsx
+++ b/src/app_modules/katalog/portofolio/create/create_intro.tsx
@@ -1 +0,0 @@
-// create
--- a/src/app_modules/katalog/portofolio/create/layout.tsx
+++ b/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>
--- a/src/app_modules/katalog/portofolio/create/view.tsx
+++ b/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");
+  }
 }
--- a/src/app_modules/katalog/portofolio/edit/data/ui_edit_data.tsx
+++ b/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>
--- a/src/app_modules/katalog/portofolio/fun/fun_create_portofolio.ts
+++ b/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",
  };
--- a/src/app_modules/katalog/portofolio/fun/get/get_list_portofolio.ts
+++ b/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,
    },
--- a/src/app_modules/katalog/portofolio/fun/get/get_one_portofolio.ts
+++ b/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,
+        },
+      },
    },
  });

--- a/src/app_modules/katalog/portofolio/model/interface.ts
+++ b/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 {
--- a/src/app_modules/katalog/portofolio/ui/ui_detail_data.tsx
+++ b/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>
    </>
--- a/src/app_modules/katalog/portofolio/ui/ui_detail_map.tsx
+++ b/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;
--- a/src/app_modules/katalog/portofolio/ui/ui_detail_portofolio.tsx
+++ b/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
--- a/src/app_modules/katalog/ui/ui_list_portofolio.tsx
+++ b/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 />
				`@@ -0,0 +1 @@`
				`export { ComponentPortofolio_DetailDataMap } from "./detail_data_drawer_map";`