fix map layout

src/app_modules/map/ui/ui_map_new.tsx

@@ -11,6 +11,7 @@ import { ComponentMap_DetailData, ComponentMap_DrawerDetailData } from "../_comp
 import { apiGetAllMap } from "../lib/api_map";
 import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
 import { IDataMap } from "../lib/type_map";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 
 export function UiMap_MapBoxViewNew({ mapboxToken, }: { mapboxToken: string }) {
    const [mapId, setMapId] = useState("");
@@ -44,9 +45,7 @@ export function UiMap_MapBoxViewNew({ mapboxToken, }: { mapboxToken: string }) {
          <Stack style={{ borderRadius: "10px" }}>
             {
                loading ?
-                  <Stack align="center" spacing="sm">
-                     <Loader color="gray" variant="dots" />
-                  </Stack>
+                  <CustomSkeleton height={"80vh"}/>
                   :
                   <Map
                      mapboxAccessToken={mapboxToken}
@@ -59,7 +58,7 @@ export function UiMap_MapBoxViewNew({ mapboxToken, }: { mapboxToken: string }) {
                      style={{
                         cursor: "pointer",
                         width: "auto",
-                        height: "90vh",
+                        height: "80vh",
                         borderRadius: "5px",
                      }}
                      attributionControl={false}

src/app_modules/map/view/create.tsx

@@ -1,13 +1,13 @@
 import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, { UI_NewChildren, UI_NewHeader } from "@/app_modules/_global/ui/V2_layout_tamplate";
 import { UiMap_CreatePin } from "../ui/ui_create_pin";
 
 const mapboxToken = process.env.MAPBOX_TOKEN!;
 export async function Map_CreateNewPin() {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={
           <UIGlobal_LayoutHeaderTamplate title="Tambah Pin" hideButtonLeft />
         }
@@ -17,7 +17,20 @@ export async function Map_CreateNewPin() {
         ) : (
           <UiMap_CreatePin mapboxToken={mapboxToken} />
         )}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Tambah Pin" hideButtonLeft />
+        </UI_NewHeader>
+        <UI_NewChildren>
+          {!mapboxToken ? (
+            <ComponentGlobal_IsEmptyData text="Mapbox token not found" />
+          ) : (
+            <UiMap_CreatePin mapboxToken={mapboxToken} />
+          )}
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

src/app_modules/map/view/custom_pin.tsx

@@ -1,16 +1,28 @@
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import { UiMap_CustomPin } from "../ui";
 
 const mapboxToken = process.env.MAPBOX_TOKEN!;
 export async function Map_CustomPin({ dataMap }: { dataMap: any }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Custom Pin" />}
       >
         <UiMap_CustomPin mapboxToken={mapboxToken} dataMap={dataMap} />
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Custom Pin" />
+        </UI_NewHeader>
+        <UI_NewChildren>
+          <UiMap_CustomPin mapboxToken={mapboxToken} dataMap={dataMap} />
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

src/app_modules/map/view/edit.tsx

@@ -3,6 +3,8 @@ 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";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, { UI_NewHeader, UI_NewChildren } from "@/app_modules/_global/ui/V2_layout_tamplate";
 
 const mapboxToken = process.env.MAPBOX_TOKEN!;
 export async function Map_EditPin({
@@ -17,11 +19,20 @@ export async function Map_EditPin({
 
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Edit Pin" />}
       >
         <UiMap_EditPin mapboxToken={mapboxToken} dataMap={dataMap} />
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Edit Pin" />
+        </UI_NewHeader>
+        <UI_NewChildren>
+          <UiMap_EditPin mapboxToken={mapboxToken} dataMap={dataMap} />
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }

src/app_modules/map/view/main_view_new.tsx

@@ -1,13 +1,25 @@
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import { ComponentMap_Header } from "../_component";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import { UiMap_MapBoxViewNew } from "../ui/ui_map_new";
 
 export async function Map_ViewNew({ mapboxToken }: { mapboxToken: string }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate header={<ComponentMap_Header />}>
+      {/* <UIGlobal_LayoutTamplate header={<ComponentMap_Header />}>
         <UiMap_MapBoxViewNew mapboxToken={mapboxToken} />
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Business Maps" />
+        </UI_NewHeader>
+        <UI_NewChildren>
+          <UiMap_MapBoxViewNew mapboxToken={mapboxToken} />
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }