fix admin:

- API map

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

@@ -9,6 +9,7 @@ export async function adminMap_funGetAllMaps() {
     },
     where: {
       isActive: true,
+      
     },
     include: {
       Portofolio: true,

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

@@ -1,13 +1,16 @@
 "use client";
 
-import { APIs } from "@/lib";
 import { AccentColor } from "@/app_modules/_global/color/color_pallet";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { apiGetAllMap } from "@/app_modules/map/lib/api_map";
 import {
   defaultLatLong,
   defaultMapZoom,
 } from "@/app_modules/map/lib/default_lat_long";
-import { MODEL_MAP } from "@/app_modules/map/lib/interface";
+import { IDataMap } from "@/app_modules/map/lib/type_map";
+import { APIs } from "@/lib";
 import { Avatar, Stack } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
 import "mapbox-gl/dist/mapbox-gl.css";
 import { useState } from "react";
 import Map, {
@@ -21,14 +24,31 @@ import { ComponentAdminMap_Drawer } from "../component";
 
 export function UiAdminMap_MapBoxView({
   mapboxToken,
-  dataMap,
 }: {
   mapboxToken: string;
-  dataMap: MODEL_MAP[];
 }) {
   const [mapId, setMapId] = useState("");
   const [openDrawer, setOpenDrawer] = useState(false);
-  const [data, setData] = useState(dataMap);
+  const [data, setData] = useState<IDataMap[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useShallowEffect(() => {
+    onLoadData();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      setLoading(true);
+      const response = await apiGetAllMap();
+      if (response) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }
 
   if (!mapboxToken)
     return <ComponentAdminGlobal_IsEmptyData text="Mapbox token not found" />;
@@ -42,65 +62,69 @@ export function UiAdminMap_MapBoxView({
           backgroundColor: "gray",
         }}
       >
-        <Map
+        {loading ? (
-          mapboxAccessToken={mapboxToken}
+          <CustomSkeleton height={500} />
-          mapStyle={"mapbox://styles/mapbox/streets-v11"}
+        ) : (
-          initialViewState={{
+          <Map
-            latitude: defaultLatLong[0],
+            mapboxAccessToken={mapboxToken}
-            longitude: defaultLatLong[1],
+            mapStyle={"mapbox://styles/mapbox/streets-v11"}
-            zoom: defaultMapZoom,
+            initialViewState={{
-          }}
+              latitude: defaultLatLong[0],
-          style={{
+              longitude: defaultLatLong[1],
-            cursor: "pointer",
+              zoom: defaultMapZoom,
-            width: "auto",
+            }}
-            height: "82vh",
+            style={{
-            borderRadius: "5px",
+              cursor: "pointer",
-          }}
+              width: "auto",
-          attributionControl={false}
+              height: "82vh",
-        >
+              borderRadius: "5px",
-          {data.map((e, i) => (
+            }}
-            <Stack key={i}>
+            attributionControl={false}
-              <Marker
+          >
-                style={{
+            {data.map((e, i) => (
-                  width: 40,
+              <Stack key={i}>
-                  cursor: "pointer",
+                <Marker
-                }}
+                  style={{
-                latitude={e.latitude}
+                    width: 40,
-                longitude={e.longitude}
+                    cursor: "pointer",
-                anchor="bottom"
-                offset={[0, 0]}
-                scale={1}
-              >
-                <Stack
-                  spacing={0}
-                  align="center"
-                  onClick={() => {
-                    setMapId(e.id);
-                    setOpenDrawer(true);
                   }}
+                  latitude={e.latitude as any}
+                  longitude={e.longitude as any}
+                  anchor="bottom"
+                  offset={[0, 0]}
+                  scale={1}
                 >
-                  <Avatar
+                  <Stack
-                    alt="Logo"
+                    spacing={0}
-                    style={{
+                    align="center"
-                      border: `2px solid ${AccentColor.softblue}`,
+                    onClick={() => {
-                      borderRadius: "100%",
+                      setMapId(e.id);
-                      backgroundColor: "white",
+                      setOpenDrawer(true);
                     }}
-                    src={
+                  >
-                      e.pinId === null
+                    <Avatar
-                        ? APIs.GET({ fileId: e.Portofolio.logoId, size: "300" })
+                      alt="Logo"
-                        : APIs.GET({ fileId: e.pinId, size: "300" })
+                      style={{
-                    }
+                        border: `2px solid ${AccentColor.softblue}`,
-                  />
+                        borderRadius: "100%",
-                </Stack>
+                        backgroundColor: "white",
-              </Marker>
+                      }}
-            </Stack>
+                      src={
-          ))}
+                        e.pinId === null
+                          ? APIs.GET({ fileId: e.logoId, size: "300" })
+                          : APIs.GET({ fileId: e.pinId, size: "300" })
+                      }
+                    />
+                  </Stack>
+                </Marker>
+              </Stack>
+            ))}
 
-          <NavigationControl />
+            <NavigationControl />
-          <ScaleControl position="top-left" />
+            <ScaleControl position="top-left" />
-          <AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
+            <AttributionControl customAttribution="Map design by PT. Bali Interaktif Perkasa" />
-        </Map>
+          </Map>
+        )}
       </Stack>
 
       <ComponentAdminMap_Drawer

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

@@ -1,17 +1,14 @@
 import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { adminMap_funGetAllMaps } from "../fun/fun_get_all_maps";
 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" />
       <UiAdminMap_MapBoxView
         mapboxToken={mapboxToken}
-        dataMap={dataMap as any}
       />
     </>
   );