Merge pull request #122 from bipproduction/admin/map/image

Admin/map/image

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hipmi",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "private": true,
   "prisma": {
     "seed": "npx tsx prisma/seed.ts"

public/file/index.ts

@@ -1 +0,0 @@
-// Image for file

public/investasi/index.ts

@@ -1 +0,0 @@
-// Image for investasi

public/portofolio/logo/test.md

@@ -1 +0,0 @@
-# Test

src/app/dev/admin/preview-image/[id]/page.tsx

@@ -1,12 +1,11 @@
-import { Admin_UiImagePreview } from "@/app_modules/admin/_admin_global";
+import { Admin_ComponentPreviewImageAdmin } from "@/app_modules/admin/_admin_global/comp_preview_image_admin";
-import React from "react";
 
 async function Page({ params }: { params: { id: string } }) {
   const fileId = params.id;
 
   return (
     <>
-      <Admin_UiImagePreview fileId={fileId} />
+      <Admin_ComponentPreviewImageAdmin fileId={fileId} />
     </>
   );
 }

src/app/dev/job/detail/draft/[id]/page.tsx

@@ -8,7 +8,7 @@ export default async function Page({params}: {params: {id: string}}) {
 
   return (
     <>
-      <Job_DetailDraft dataJob={dataJob as any} />
+      <Job_DetailDraft dataJob={dataJob as any} jobId={jobId} />
     </>
   );
 }

src/app/dev/layout.tsx

@@ -1,6 +1,3 @@
-import { funCheckToken } from "@/app_modules/_global/fun/get";
-import { redirect } from "next/navigation";
-import { RouterAuth } from "../lib/router_hipmi/router_auth";
 import { CheckCookies_UiLayout } from "@/app_modules/check_cookies";
 
 export default async function Layout({

src/app/globals.css

@@ -1,5 +0,0 @@
-.lebar-full {
-  width: 100%;
-  /* padding: 30px; */
-  background-color: aqua;
-}

src/app_modules/admin/_admin_global/_component/comp_admin_load_image.tsx

@@ -56,7 +56,6 @@ export function Admin_ComponentLoadImageLandscape({
         <Image
           onClick={() => {
             setLoading(true);
-
             router.push(RouterAdminGlobal.preview_image({ id: fileId }), {
               scroll: false,
             });

src/app_modules/admin/_admin_global/_component/comp_admin_skeleton_navbar.tsx

@@ -0,0 +1,61 @@
+import {
+  Divider,
+  Grid,
+  Group,
+  Navbar,
+  ScrollArea,
+  Skeleton,
+  Stack,
+} from "@mantine/core";
+
+export function Admin_ComponentSkeletonNavbar() {
+  return (
+    <>
+      <Navbar.Section h={"6vh"}>
+        <Stack spacing={"lg"}>
+          <Grid>
+            <Grid.Col span={7}>
+              <Skeleton height={30} radius="xl" />
+            </Grid.Col>
+
+            <Grid.Col span={5}>
+              <Stack h={"100%"} justify="center">
+                <Group position="right" spacing={5}>
+                  <Skeleton circle height={30} />
+                  <Skeleton circle height={30} />
+                </Group>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+          <Divider />
+        </Stack>
+      </Navbar.Section>
+
+      <Navbar.Section h={"88vh"} grow component={ScrollArea} py={"sm"}>
+        <Stack spacing={"lg"}>
+          {Array.from(new Array(20)).map((e, i) => (
+            <Grid key={i}>
+              <Grid.Col span={"content"}>
+                <Stack h={"100%"} justify="center">
+                  <Group position="right" spacing={5}>
+                    <Skeleton circle height={30} />
+                  </Group>
+                </Stack>
+              </Grid.Col>
+              <Grid.Col span={"auto"}>
+                <Skeleton height={30} radius="xl" />
+              </Grid.Col>
+            </Grid>
+          ))}
+        </Stack>
+      </Navbar.Section>
+
+      <Navbar.Section h={"6vh"}>
+        <Stack spacing={"lg"}>
+          <Divider />
+          <Skeleton height={20} radius="xl" />
+        </Stack>
+      </Navbar.Section>
+    </>
+  );
+}

src/app_modules/admin/_admin_global/comp_preview_image_admin.tsx

@@ -1,16 +1,17 @@
 "use client";
 
+import { Box, Center, Image, ScrollArea, Skeleton, Stack, Text } from "@mantine/core";
+import AdminGlobal_ComponentBackButton from "./back_button";
 import { APIs, pathAssetImage } from "@/app/lib";
-import { Box, Center, Image, ScrollArea, Skeleton, Stack } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
-import AdminGlobal_ComponentBackButton from "../back_button";
 
-export function Admin_UiImagePreview({ fileId }: { fileId: string }) {
+export function Admin_ComponentPreviewImageAdmin({
-  const router = useRouter();
+  fileId,
+}: {
+  fileId: string;
+}) {
   const [isImage, setIsImage] = useState<boolean | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
 
   const url = APIs.GET({ fileId: fileId });
 
@@ -29,14 +30,16 @@ export function Admin_UiImagePreview({ fileId }: { fileId: string }) {
       console.log(error);
     }
   }
+
   return (
     <>
       <Stack>
         <AdminGlobal_ComponentBackButton />
-
         <Box style={{ zIndex: 0 }} h={"90vh"} pos={"static"} px={"lg"}>
           {isImage === null ? (
-            <Skeleton height={200} radius={"sm"} />
+            <Center>
+              <Skeleton height={300} w={200} radius={"sm"} />
+            </Center>
           ) : isImage ? (
             <ScrollArea h={"100%"}>
               <Center>

src/app_modules/admin/_admin_global/index.ts

@@ -1,5 +1,5 @@
 import { Admin_ComponentLoadImageLandscape } from "./_component/comp_admin_load_image";
-import { Admin_UiImagePreview } from "./_ui/ui_admin_image_preview";
+import { Admin_ComponentSkeletonNavbar } from "./_component/comp_admin_skeleton_navbar";
+
+export { Admin_ComponentLoadImageLandscape, Admin_ComponentSkeletonNavbar };
 
-export { Admin_ComponentLoadImageLandscape };
-export { Admin_UiImagePreview };

src/app_modules/admin/donasi/detail/publish/detail_publish.tsx

@@ -249,7 +249,9 @@ function TampilanDetailDonasi({
                   <Grid.Col span={"auto"}>
                     <Stack spacing={0}>
                       <Text fz={"xs"}>Bank Tujuan</Text>
-                      <Title order={6}>{donasi?.namaBank}</Title>
+                      <Title order={6} c={"blue"}>
+                        {donasi?.namaBank}
+                      </Title>
                     </Stack>
                   </Grid.Col>
                 </Grid>
@@ -257,17 +259,32 @@ function TampilanDetailDonasi({
                   <Grid.Col span={"auto"}>
                     <Stack spacing={0}>
                       <Text fz={"xs"}>Akumulasi Pencairan</Text>
-                      <Title order={6}>{donasi?.akumulasiPencairan} Kali</Title>
+                      <Title order={6} c={"blue"}>
+                        {donasi?.akumulasiPencairan} Kali
+                      </Title>
                     </Stack>
                   </Grid.Col>
                   <Grid.Col span={"auto"}>
                     <Stack spacing={0}>
                       <Text fz={"xs"}>Nomor Rekening</Text>
-                      <Title order={6}>{donasi?.rekening}</Title>
+                      <Title order={6} c={"blue"}>
+                        {donasi?.rekening}
+                      </Title>
                     </Stack>
                   </Grid.Col>
                 </Grid>
 
+                <Stack align="center" spacing={0}>
+                  <Text fz={"xs"}>Sisa Dana</Text>
+                  <ComponentGlobal_TampilanRupiah
+                    nominal={
+                      toNumber(donasi.terkumpul) -
+                      toNumber(donasi.totalPencairan)
+                    }
+                    color="darkblue"
+                  />
+                </Stack>
+
                 <Button
                   loaderPosition="center"
                   loading={isLoadingPencairanDana}

src/app_modules/admin/job/child/publish/index.tsx

@@ -21,6 +21,7 @@ import { IconPhotoCheck, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import adminJob_getListPublish from "../../fun/get/get_list_publish";
+import { RouterAdminGlobal } from "@/app/lib";
 
 export default function AdminJob_TablePublish({
   dataPublish,
@@ -45,6 +46,7 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
   const [activePage, setActivePage] = useState(1);
   const [isSearch, setSearch] = useState("");
   const [isLoadingShowImage, setLoadingShowImage] = useState(false);
+  const [dataId, setDataId] = useState("");
 
   async function onSearch(s: string) {
     setSearch(s);
@@ -100,13 +102,14 @@ function TableStatus({ dataPublish }: { dataPublish: any }) {
           {e.imageId ? (
             <Button
               loaderPosition="center"
-              loading={isLoadingShowImage}
+              loading={isLoadingShowImage && e.id === dataId}
               color="green"
               radius={"xl"}
               leftIcon={<IconPhotoCheck />}
               onClick={() => {
                 setLoadingShowImage(true);
-                router.push(RouterAdminJob.detail_poster + e?.imageId);
+                setDataId(e.id);
+                router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
               }}
             >
               Lihat

src/app_modules/admin/job/child/reject/index.tsx

@@ -1,11 +1,14 @@
 "use client";
 
 import { RouterAdminJob } from "@/app/lib/router_admin/router_admin_job";
-import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
 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 { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
+import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
 import { MODEL_JOB } from "@/app_modules/job/model/interface";
+import mqtt_client from "@/util/mqtt_client";
 import {
   Button,
   Center,
@@ -19,17 +22,13 @@ import {
   Table,
   Text,
   TextInput,
-  Textarea,
+  Textarea
-  Title,
 } from "@mantine/core";
 import { IconBan, IconPhotoCheck, IconSearch } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { AdminJob_funEditCatatanById } from "../../fun/edit/fun_edit_catatan_by_id";
 import adminJob_getListReject from "../../fun/get/get_list_reject";
-import { AdminJob_getListTableByStatusId } from "../../fun/get/get_list_table_by_status_id";
-import mqtt_client from "@/util/mqtt_client";
-import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
 
 export default function AdminJob_TableReject({
   dataReject,
@@ -55,6 +54,7 @@ function TableStatus({ listReject }: { listReject: any }) {
 
   const [reject, setReject] = useState(false);
   const [jobId, setJobId] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
   const [catatan, setCatatan] = useState("");
 
   async function onSearch(s: string) {
@@ -99,10 +99,14 @@ function TableStatus({ listReject }: { listReject: any }) {
         <Center w={150}>
           {e.imageId ? (
             <Button
+              loading={isLoading && e?.imageId === jobId}
+              loaderPosition="center"
               color="green"
               radius={"xl"}
               leftIcon={<IconPhotoCheck />}
               onClick={() => {
+                setJobId(e?.imageId);
+                setIsLoading(true);
                 router.push(RouterAdminJob.detail_poster + e?.imageId);
               }}
             >
@@ -224,24 +228,20 @@ function TableStatus({ listReject }: { listReject: any }) {
       </Modal>
 
       <Stack spacing={"xs"} h={"100%"}>
-        <Group
+        <ComponentAdminGlobal_TitlePage
-          position="apart"
+          name="Reject"
-          bg={"red.4"}
+          color="red.4"
-          p={"xs"}
+          component={
-          style={{ borderRadius: "6px" }}
+            <TextInput
-        >
+              icon={<IconSearch size={20} />}
-          <Title order={4} c={"white"}>
+              radius={"xl"}
-            Reject
+              placeholder="Masukan judul"
-          </Title>
+              onChange={(val) => {
-          <TextInput
+                onSearch(val.currentTarget.value);
-            icon={<IconSearch size={20} />}
+              }}
-            radius={"xl"}
+            />
-            placeholder="Masukan judul"
+          }
-            onChange={(val) => {
+        />
-              onSearch(val.currentTarget.value);
-            }}
-          />
-        </Group>
 
         <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>

src/app_modules/admin/job/child/review/index.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { RouterAdminJob } from "@/app/lib/router_admin/router_admin_job";
+import { RouterAdminGlobal } from "@/app/lib";
-import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
+import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
-import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
+import { ComponentAdminGlobal_TitlePage } from "@/app_modules/admin/_admin_global/_component";
+import ComponentAdminGlobal_HeaderTamplate from "@/app_modules/admin/_admin_global/header_tamplate";
+import adminNotifikasi_funCreateToUser from "@/app_modules/admin/notifikasi/fun/create/fun_create_notif_user";
 import { MODEL_JOB } from "@/app_modules/job/model/interface";
 import mqtt_client from "@/util/mqtt_client";
 import {
@@ -21,14 +23,12 @@ import {
   Text,
   TextInput,
   Textarea,
-  Title,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import {
   IconBan,
-  IconEyeCheck,
   IconEyeShare,
-  IconHandFinger,
+  IconPhotoCheck,
   IconSearch,
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
@@ -36,8 +36,6 @@ import { useState } from "react";
 import { AdminJob_funEditCatatanById } from "../../fun/edit/fun_edit_catatan_by_id";
 import { AdminJob_funEditStatusPublishById } from "../../fun/edit/fun_edit_status_publish_by_id";
 import adminJob_getListReview from "../../fun/get/get_list_review";
-import { IconPhotoCheck } from "@tabler/icons-react";
-import ComponentGlobal_InputCountDown from "@/app_modules/_global/component/input_countdown";
 
 export default function AdminJob_TableReview({
   dataReview,
@@ -63,6 +61,7 @@ function TableStatus({ listReview }: { listReview: any }) {
 
   const [reject, setReject] = useState(false);
   const [jobId, setJobId] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
   const [catatan, setCatatan] = useState("");
 
   useShallowEffect(() => {
@@ -125,11 +124,15 @@ function TableStatus({ listReview }: { listReview: any }) {
         <Center w={200}>
           {e.imageId ? (
             <Button
+              loaderPosition="center"
+              loading={isLoading && jobId == e?.id}
               color="green"
               radius={"xl"}
               leftIcon={<IconPhotoCheck />}
               onClick={() => {
-                router.push(RouterAdminJob.detail_poster + e?.imageId);
+                setJobId(e?.id);
+                setIsLoading(true);
+                router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
               }}
             >
               Lihat
@@ -253,24 +256,20 @@ function TableStatus({ listReview }: { listReview: any }) {
       </Modal>
 
       <Stack spacing={"xs"} h={"100%"}>
-        <Group
+        <ComponentAdminGlobal_TitlePage
-          position="apart"
+          name="Review"
-          bg={"orange.4"}
+          color="orange.4"
-          p={"xs"}
+          component={
-          style={{ borderRadius: "6px" }}
+            <TextInput
-        >
+              icon={<IconSearch size={20} />}
-          <Title order={4} c={"white"}>
+              radius={"xl"}
-            Review
+              placeholder="Masukan judul"
-          </Title>
+              onChange={(val) => {
-          <TextInput
+                onSearch(val.currentTarget.value);
-            icon={<IconSearch size={20} />}
+              }}
-            radius={"xl"}
+            />
-            placeholder="Masukan judul"
+          }
-            onChange={(val) => {
+        />
-              onSearch(val.currentTarget.value);
-            }}
-          />
-        </Group>
 
         <Paper p={"md"} withBorder shadow="lg" h={"80vh"}>
           <ScrollArea w={"100%"} h={"90%"}>

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

@@ -1,16 +1,7 @@
-import { APIs } from "@/app/lib";
+"use client";
+
 import { MODEL_MAP } from "@/app_modules/map/lib/interface";
-import {
+import { Box, Button, Center, Grid, Stack, Text } from "@mantine/core";
-  AspectRatio,
-  Box,
-  Button,
-  Center,
-  Grid,
-  Image,
-  Stack,
-  Text,
-} from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
 import {
   IconBuildingSkyscraper,
   IconListDetails,
@@ -18,40 +9,17 @@ import {
   IconPhoneCall,
   IconPinned,
 } from "@tabler/icons-react";
-import { useState } from "react";
+import { Admin_ComponentLoadImageLandscape } from "../../_admin_global";
-import { adminMap_funGetOneById } from "../fun/fun_get_one_by_id";
 
 export function ComponentAdminMap_DetailDataDrawer({
-  mapId,
+  data,
 }: {
-  mapId: string;
+  data: MODEL_MAP;
 }) {
-  const [data, setData] = useState<MODEL_MAP>();
-
-  useShallowEffect(() => {
-    onLoadMap(mapId);
-  }, [mapId]);
-
-  async function onLoadMap(mapId: string) {
-    try {
-      const res = await adminMap_funGetOneById({ mapId: mapId });
-      setData(res as any);
-    } catch (error) {
-      console.log(error);
-    }
-  }
-
   return (
     <>
       <Stack>
-        <AspectRatio ratio={1 / 1} mah={300}>
+        <Admin_ComponentLoadImageLandscape fileId={data?.imageId as any} />
-          <Image
-            radius={"md"}
-            width={300}
-            alt="Photo"
-            src={APIs.GET({ fileId: data?.imageId as string })}
-          />
-        </AspectRatio>
 
         <Box>
           <Grid>
@@ -95,7 +63,6 @@ export function ComponentAdminMap_DetailDataDrawer({
             </Grid.Col>
           </Grid>
         </Box>
-
         {data ? (
           <Center>
             <Button

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

@@ -1,30 +1,13 @@
 "use client";
 
-import { RouterMap } from "@/app/lib/router_hipmi/router_map";
 import { MODEL_MAP } from "@/app_modules/map/lib/interface";
-import {
+import { Drawer, Group, Text } from "@mantine/core";
-  AspectRatio,
-  Box,
-  Drawer,
-  Grid,
-  Group,
-  Image,
-  Stack,
-  Text,
-} from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import {
+import _ from "lodash";
-  IconBuildingSkyscraper,
-  IconListDetails,
-  IconMapPin,
-  IconPhoneCall,
-  IconPinned,
-} from "@tabler/icons-react";
 import { useState } from "react";
 import { adminMap_funGetOneById } from "../fun/fun_get_one_by_id";
-import _ from "lodash";
-import { ComponentAdminMap_SkeletonDrawer } from "./comp_skeleton_drawer";
 import { ComponentAdminMap_DetailDataDrawer } from "./comp_detail_data_drawer";
+import { ComponentAdminMap_SkeletonDrawer } from "./comp_skeleton_drawer";
 
 export function ComponentAdminMap_Drawer({
   opened,
@@ -68,7 +51,7 @@ export function ComponentAdminMap_Drawer({
         {_.isEmpty(data) ? (
           <ComponentAdminMap_SkeletonDrawer />
         ) : (
-          <ComponentAdminMap_DetailDataDrawer mapId={mapId} />
+          <ComponentAdminMap_DetailDataDrawer data={data} />
         )}
 
         {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}

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

@@ -1,25 +1,23 @@
 "use client";
 
-import { MODEL_MAP } from "@/app_modules/map/lib/interface";
+import { APIs } from "@/app/lib";
-import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
+import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { useState } from "react";
 import {
   defaultLatLong,
   defaultMapZoom,
 } from "@/app_modules/map/lib/default_lat_long";
-import { Avatar, Image, Paper, Stack, Text } from "@mantine/core";
+import { MODEL_MAP } from "@/app_modules/map/lib/interface";
+import { Avatar, Stack } from "@mantine/core";
 import "mapbox-gl/dist/mapbox-gl.css";
+import { useState } from "react";
 import Map, {
   AttributionControl,
   Marker,
   NavigationControl,
   ScaleControl,
 } from "react-map-gl";
+import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
 import { ComponentAdminMap_Drawer } from "../component";
-import { AccentColor } from "@/app_modules/_global/color/color_pallet";
-import { RouterPortofolio } from "@/app/lib/router_hipmi/router_katalog";
-import { RouterMap } from "@/app/lib/router_hipmi/router_map";
-import { APIs } from "@/app/lib";
 
 export function UiAdminMap_MapBoxView({
   mapboxToken,

src/app_modules/admin/new_layout.tsx

@@ -40,6 +40,7 @@ import {
 } from "./_admin_global/new_global_state";
 import { newListAdminPage } from "./new_list_page";
 import { ComponentAdmin_UIDrawerNotifikasi } from "./notifikasi/ui_drawer_notifikasi";
+import { Admin_ComponentSkeletonNavbar } from "./_admin_global";
 
 export function Admin_NewLayout({
   children,
@@ -60,80 +61,83 @@ export function Admin_NewLayout({
   return (
     <>
       <AppShell
-        h={"100vh"}
         padding="md"
         navbarOffsetBreakpoint={1024}
         navbar={
           <Navbar
-            width={{ lg: 250, md: 200, base: 250 }}
+            height={"100vh"}
+            width={{ base: 250 }}
             hiddenBreakpoint={1024}
             hidden={!opened}
             p="xs"
             bg={AccentColor.darkblue}
           >
-            {/* Header */}
+            {!matches ? (
-            <Navbar.Section style={{ color: "white" }}>
+              <Admin_ComponentSkeletonNavbar />
-              <Stack spacing={"lg"}>
+            ) : (
-                <Grid>
+              <>
-                  <Grid.Col span={7}>
+                <Navbar.Section style={{ color: "white" }}>
-                    <Title order={3} lineClamp={1}>
+                  <Stack spacing={"lg"}>
-                      {userRoleId == "2" ? "Admin" : "Developer"}
+                    <Grid>
-                    </Title>
+                      <Grid.Col span={7}>
-                  </Grid.Col>
+                        <Title order={3} lineClamp={1}>
+                          {userRoleId == "2" ? "Admin" : "Developer"}
+                        </Title>
+                      </Grid.Col>
 
-                  <Grid.Col span={5}>
+                      <Grid.Col span={5}>
-                    <Stack h={"100%"} justify="center">
+                        <Stack h={"100%"} justify="center">
-                      <Group position="right" spacing={5}>
+                          <Group position="right" spacing={5}>
-                        <ButtonUserCircle dataUser={dataUser} />
+                            <ButtonUserCircle dataUser={dataUser} />
 
-                        <ActionIcon
+                            <ActionIcon
-                          variant="transparent"
+                              variant="transparent"
-                          onClick={() => setDrawerNotifikasi(true)}
+                              onClick={() => setDrawerNotifikasi(true)}
-                        >
+                            >
-                          <IconBell color="white" />
+                              <IconBell color="white" />
-                        </ActionIcon>
+                            </ActionIcon>
-                      </Group>
+                          </Group>
-                    </Stack>
+                        </Stack>
-                  </Grid.Col>
+                      </Grid.Col>
-                </Grid>
+                    </Grid>
-                <Divider color="white" />
+                    <Divider color="white" />
-              </Stack>
+                  </Stack>
-            </Navbar.Section>
+                </Navbar.Section>
 
-            {/* Main */}
+                <Navbar.Section
-            <Navbar.Section
+                  grow
-              grow
+                  component={ScrollArea}
-              component={ScrollArea}
+                  style={{ color: "white", transition: "0.5s" }}
-              style={{ color: "white", transition: "0.5s" }}
+                >
-            >
+                  <Stack style={{ color: "white" }}>
-              <Stack style={{ color: "white" }}>
+                    <NavbarAdmin userRoleId={userRoleId} />
-                <NavbarAdmin userRoleId={userRoleId} />
+                  </Stack>
-              </Stack>
+                </Navbar.Section>
-            </Navbar.Section>
 
-            {/* Footer */}
+                <Navbar.Section>
-            <Navbar.Section>
+                  <Stack>
-              <Stack>
+                    <Divider />
-                <Divider />
+                    <Group position="center">
-                <Group position="center">
+                      <Text fs={"italic"} c={"white"} fz={"xs"}>
-                  <Text fs={"italic"} c={"white"} fz={"xs"}>
+                        V 1.0.0
-                    V 1.0.0
+                      </Text>
-                  </Text>
+                    </Group>
-                </Group>
+                  </Stack>
-              </Stack>
+                </Navbar.Section>
-            </Navbar.Section>
+              </>
+            )}
           </Navbar>
         }
       >
-        {matches ? (
+        {!matches ? (
-          children
-        ) : (
           <Stack align="center" justify="center" h={"100%"}>
             <Title>Sorry !</Title>
             <Title order={4} align="center">
               View Only Available For Desktop
             </Title>
           </Stack>
+        ) : (
+          children
         )}
       </AppShell>
 

src/app_modules/auth/splash/view.tsx

@@ -2,16 +2,7 @@
 
 import { RouterAuth } from "@/app/lib/router_hipmi/router_auth";
 import { RouterHome } from "@/app/lib/router_hipmi/router_home";
-import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { Avatar, BackgroundImage, Center, Image, Stack } from "@mantine/core";
-import UIGlobal_SplashScreen from "@/app_modules/_global/ui/ui_splash";
-import {
-  Avatar,
-  BackgroundImage,
-  Center,
-  Image,
-  Paper,
-  Stack,
-} from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 

src/app_modules/check_cookies/layout_cek_cookies.tsx

@@ -23,5 +23,5 @@ export function CheckCookies_UiLayout({
     }
   }
 
-  return <>{children}</>;
+  return children;
 }

src/app_modules/job/component/button/comp_button_update_data.tsx

@@ -1,22 +1,22 @@
-import { MainColor, AccentColor } from "@/app_modules/_global/color";
+import { DIRECTORY_ID } from "@/app/lib";
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import {
+  funGlobal_DeleteFileById,
+  funGlobal_UploadToStorage,
+} from "@/app_modules/_global/fun";
 import {
   ComponentGlobal_NotifikasiBerhasil,
   ComponentGlobal_NotifikasiGagal,
   ComponentGlobal_NotifikasiPeringatan,
 } from "@/app_modules/_global/notif_global";
-import { Modal, Stack, Title, Group, Button } from "@mantine/core";
+import { Button, Group, Modal, Stack, Title } from "@mantine/core";
-import { useDisclosure, useWindowScroll } from "@mantine/hooks";
+import { useDisclosure } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { job_EditById } from "../../fun/edit/fun_edit_by_id";
-import { gs_job_hot_menu, gs_job_status } from "../../global_state";
+import { gs_job_hot_menu } from "../../global_state";
 import { MODEL_JOB } from "../../model/interface";
-import {
-  funGlobal_DeleteFileById,
-  funGlobal_UploadToStorage,
-} from "@/app_modules/_global/fun";
-import { DIRECTORY_ID } from "@/app/lib";
 
 export function Job_ComponentButtonUpdateData({
   value,
@@ -30,7 +30,6 @@ export function Job_ComponentButtonUpdateData({
 
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
   const [opened, { open, close }] = useDisclosure(false);
-  const [scroll, scrollTo] = useWindowScroll();
 
   async function onUpdate() {
     if (file === null) {
@@ -46,13 +45,15 @@ export function Job_ComponentButtonUpdateData({
       });
 
       if (!uploadFile.success)
-         return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
+        return ComponentGlobal_NotifikasiPeringatan("Gagal upload gambar");
 
-      const delFile = await funGlobal_DeleteFileById({
+      if (value.imageId !== null) {
-        fileId: value.imageId,
+        const delFile = await funGlobal_DeleteFileById({
-      });
+          fileId: value.imageId,
-      if (!delFile.success)
+        });
-        ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar lama");
+        if (!delFile.success)
+          ComponentGlobal_NotifikasiPeringatan("Gagal hapus gambar lama");
+      }
 
       const updateWithFile = await job_EditById({
         data: value,
@@ -126,7 +127,6 @@ export function Job_ComponentButtonUpdateData({
         radius={"xl"}
         onClick={() => {
           open();
-          scrollTo({ y: 0 });
         }}
       >
         Update

src/app_modules/job/component/detail/detail_data.tsx

@@ -4,15 +4,7 @@ import {
   ComponentGlobal_CardStyles,
   ComponentGlobal_LoadImage,
 } from "@/app_modules/_global/component";
-import {
+import { Box, Center, Skeleton, Stack, Text } from "@mantine/core";
-  Card,
-  Center,
-  Image,
-  Skeleton,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
 import { MODEL_JOB } from "../../model/interface";
 
 export default function ComponentJob_DetailData({
@@ -49,9 +41,20 @@ export default function ComponentJob_DetailData({
       ) : (
         <ComponentGlobal_CardStyles>
           <Stack spacing={"xl"}>
-            <Title order={3} align="center">
+            <Stack align="center">
-              Data Not Found
+              <Skeleton h={250} w={200} radius="md" />
-            </Title>
+              <Skeleton h={10} w={200} />
+            </Stack>
+
+            {Array.from(new Array(2)).map((e, i) => (
+              <Stack key={i}>
+                <Skeleton h={10} w={100} />
+
+                {Array.from({ length: 3 }).map((_, ii) => (
+                  <Skeleton h={10} key={ii} />
+                ))}
+              </Stack>
+            ))}
           </Stack>
         </ComponentGlobal_CardStyles>
       )}

src/app_modules/job/detail/draft/view.tsx

@@ -3,13 +3,12 @@
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_global/notifikasi_berhasil";
 import { Button, Group, Stack } from "@mantine/core";
-
 import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
 import UIGlobal_Modal from "@/app_modules/_global/ui/ui_modal";
 import notifikasiToAdmin_funCreate from "@/app_modules/notifikasi/fun/create/create_notif_to_admin";
 import mqtt_client from "@/util/mqtt_client";
-import { useDisclosure } from "@mantine/hooks";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import ComponentJob_DetailData from "../../component/detail/detail_data";
@@ -18,23 +17,43 @@ import { Job_funEditStatusByStatusId } from "../../fun/edit/fun_edit_status_by_s
 import { MODEL_JOB } from "../../model/interface";
 import { funGlobal_DeleteFileById } from "@/app_modules/_global/fun";
 import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { job_getOneById } from "../../fun/get/get_one_by_id";
 
-export default function Job_DetailDraft({ dataJob }: { dataJob: MODEL_JOB }) {
+export default function Job_DetailDraft({
-  const [data, setData] = useState(dataJob);
+  dataJob,
+  jobId,
+}: {
+  dataJob: MODEL_JOB;
+  jobId: string;
+}) {
+  const [data, setData] = useState<MODEL_JOB | null>(dataJob);
+
+  useShallowEffect(() => {
+    onLoadData({
+      loadData(val) {
+        setData(val);
+      },
+    });
+  }, [setData]);
+
+  async function onLoadData({ loadData }: { loadData: (val: any) => void }) {
+    const dataJob = await job_getOneById(jobId);
+    loadData(dataJob as any);
+  }
 
   return (
     <>
       <Stack>
-        {data.catatan ? (
+        {data?.catatan ? (
           <ComponentGlobal_BoxInformation
-            informasi={data.catatan}
+            informasi={data?.catatan}
             isReport={true}
           />
         ) : (
           ""
         )}
-        <ComponentJob_DetailData data={data} />
+        <ComponentJob_DetailData data={data as any} />
-        <ButtonAction jobId={data.id} imageId={data.imageId} />
+        <ButtonAction jobId={data?.id as any} imageId={data?.imageId as any} />
       </Stack>
     </>
   );

src/app_modules/job/edit/view.tsx

@@ -40,7 +40,7 @@ const ReactQuill = dynamic(
 );
 
 export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
-  const [value, setValue] = useState(dataJob);
+  const [data, setData] = useState(dataJob);
   const [file, setFile] = useState<File | null>(null);
   const [img, setImg] = useState<any | null>();
 
@@ -62,8 +62,8 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
                   src={img}
                 />
               </AspectRatio>
-            ) : value.imageId ? (
+            ) : data.imageId ? (
-              <ComponentGlobal_LoadImage fileId={value.imageId} />
+              <ComponentGlobal_LoadImage fileId={data.imageId} />
             ) : (
               <Stack justify="center" align="center" h={"100%"}>
                 <IconUpload color="white" />
@@ -118,11 +118,11 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
               withAsterisk
               label="Judul"
               placeholder="Masukan judul lowongan kerja"
-              value={value.title}
+              value={data.title}
               maxLength={100}
               onChange={(val) => {
-                setValue({
+                setData({
-                  ...value,
+                  ...data,
                   title: val.currentTarget.value,
                 });
               }}
@@ -151,17 +151,17 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
                     ],
                   }}
                   theme="snow"
-                  value={value.content}
+                  value={data.content}
                   onChange={(val) => {
-                    setValue({
+                    setData({
-                      ...value,
+                      ...data,
                       content: val,
                     });
                   }}
                 />
                 <ComponentGlobal_InputCountDown
                   maxInput={500}
-                  lengthInput={value.content.length}
+                  lengthInput={data.content.length}
                 />
               </Stack>
             </Stack>
@@ -188,24 +188,24 @@ export default function Job_Edit({ dataJob }: { dataJob: MODEL_JOB }) {
                     ],
                   }}
                   theme="snow"
-                  value={value.deskripsi}
+                  value={data.deskripsi}
                   onChange={(val) => {
-                    setValue({
+                    setData({
-                      ...value,
+                      ...data,
                       deskripsi: val,
                     });
                   }}
                 />
                 <ComponentGlobal_InputCountDown
                   maxInput={500}
-                  lengthInput={value.deskripsi.length}
+                  lengthInput={data.deskripsi.length}
                 />
               </Stack>
             </Stack>
           </Stack>
         </ComponentGlobal_CardStyles>
 
-        <Job_ComponentButtonUpdate value={value as any} file={file as any} />
+        <Job_ComponentButtonUpdate value={data as any} file={file as any} />
       </Stack>
     </>
   );

src/app_modules/job/fun/edit/fun_edit_by_id.ts

@@ -1,7 +1,6 @@
 "use server";
 
 import prisma from "@/app/lib/prisma";
-import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { revalidatePath } from "next/cache";
 import { MODEL_JOB } from "../../model/interface";