Test foto server

src/app_modules/admin/map/component/drawer.tsx

@@ -1,37 +0,0 @@
-"use client";
-
-import { Drawer, Group, Text } from "@mantine/core";
-import { ComponentAdmin_UIDrawerNotifikasi } from "../../notifikasi/ui_drawer_notifikasi";
-import { MODEL_MAP } from "@/app_modules/map/lib/interface";
-
-export function ComponentAdminMap_Drawer({
-  opened,
-  onClose,
-  data,
-}: {
-  opened: boolean;
-  onClose: () => void;
-  data: MODEL_MAP | any;
-}) {
-  return (
-    <>
-      <Drawer
-        title={
-          <Group position="apart">
-            <Text fw={"bold"} fz={"lg"}>
-              Detail Map
-            </Text>
-          </Group>
-        }
-        opened={opened}
-        onClose={onClose}
-        position="right"
-        size={"xs"}
-        transitionProps={{transition: "fade", duration: 500}}
-      >
-        <Text>Detail Map</Text>
-        <Text>{data}</Text>
-      </Drawer>
-    </>
-  );
-}

src/app_modules/admin/map/component/drawer_detail_map.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import {
+  AspectRatio,
+  Box,
+  Drawer,
+  Grid,
+  Group,
+  Image,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { ComponentAdmin_UIDrawerNotifikasi } from "../../notifikasi/ui_drawer_notifikasi";
+import { MODEL_MAP } from "@/app_modules/map/lib/interface";
+import { useShallowEffect } from "@mantine/hooks";
+import { adminMap_funGetOneById } from "../fun/fun_get_one_by_id";
+import { useState } from "react";
+import { RouterMap } from "@/app/lib/router_hipmi/router_map";
+import {
+  IconBuildingSkyscraper,
+  IconListDetails,
+  IconPhoneCall,
+  IconMapPin,
+  IconPinned,
+} from "@tabler/icons-react";
+
+export function ComponentAdminMap_Drawer({
+  opened,
+  onClose,
+  mapId,
+}: {
+  opened: boolean;
+  onClose: () => void;
+  mapId: string;
+}) {
+  const [data, setData] = useState<MODEL_MAP>();
+
+  useShallowEffect(() => {
+    onLoadMap(mapId);
+  }, [mapId]);
+
+  async function onLoadMap(mapId: string) {
+    const res = await adminMap_funGetOneById({ mapId: mapId });
+    setData(res as any);
+  }
+
+  return (
+    <>
+      <Drawer
+        title={
+          <Group position="apart">
+            <Text fw={"bold"} fz={"lg"}>
+              {data?.namePin}
+            </Text>
+          </Group>
+        }
+        opened={opened}
+        onClose={onClose}
+        position="right"
+        size={"sm"}
+      >
+        <Stack>
+          <AspectRatio ratio={1 / 1} mah={300}>
+            <Image
+              radius={"md"}
+              width={300}
+              alt="Foto"
+              src={RouterMap.api_foto + data?.imagesId}
+            />
+          </AspectRatio>
+
+          <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>
+            <Grid>
+              <Grid.Col span={2}>
+                <IconPinned />
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Text >{data?.Portofolio.deskripsi}</Text>
+              </Grid.Col>
+            </Grid>
+          </Box>
+        </Stack>
+        {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+      </Drawer>
+    </>
+  );
+}

src/app_modules/admin/map/component/index.ts

@@ -1,3 +1,3 @@
-import { ComponentAdminMap_Drawer } from "./drawer";
+import { ComponentAdminMap_Drawer } from "./drawer_detail_map";
 
 export { ComponentAdminMap_Drawer };

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

@@ -0,0 +1,25 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+
+export async function adminMap_funGetOneById({ mapId }: { mapId: string }) {
+  const data = await prisma.businessMaps.findFirst({
+    where: {
+      id: mapId,
+    },
+    include: {
+      Author: true,
+      Images: true,
+      Portofolio: {
+        include: {
+          MasterBidangBisnis: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      },
+    },
+  });
+  return data;
+}

src/app_modules/admin/map/ui/ui_map_view.tsx

@@ -110,7 +110,7 @@ export function UiAdminMap_MapBoxView({
       <ComponentAdminMap_Drawer
       opened={openDrawer}
       onClose={() => setOpenDrawer(false)}
-      data={mapId as any}
+      mapId={mapId as any}
       />
     </>
   );

src/app_modules/admin/map/view/view.tsx

@@ -6,6 +6,7 @@ import { UiAdminMap_MapBoxView } from "../ui";
 const mapboxToken = process.env.MAPBOX_TOKEN!;
 export async function AdminMap_View() {
   const dataMap = await adminMap_funGetAllMaps();
+
   return (
     <>
       <ComponentAdminGlobal_HeaderTamplate name="Maps" />