Fix UI Admin Menu Landing Page & PPID

src/app/admin/(dashboard)/ppid/struktur-ppid/struktur-organisasi/page.tsx

@@ -2,8 +2,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import colors from '@/con/colors';
-import { Box, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Center, Image, Loader, Paper, Stack, Text, Tooltip } from '@mantine/core';
+import { IconUsers } from '@tabler/icons-react';
 import { OrganizationChart } from 'primereact/organizationchart';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -11,46 +11,50 @@ import stateStrukturPPID from '../../../_state/ppid/struktur_ppid/struktur_PPID'
 
 function StrukturOrganisasiPPID() {
   return (
-    <Box >
+    <Box py="md">
       <ListStrukturOrganisasiPPID />
     </Box>
   );
 }
 
 function ListStrukturOrganisasiPPID() {
-  const stateOrganisasi = useProxy(stateStrukturPPID.pegawai)
+  const stateOrganisasi = useProxy(stateStrukturPPID.pegawai);
 
   useEffect(() => {
-    stateOrganisasi.findMany.load()
-  }, [])
+    stateOrganisasi.findMany.load();
+  }, []);
+
+  if (stateOrganisasi.findMany.loading) {
+    return (
+      <Center py={40}>
+        <Loader size="lg" />
+      </Center>
+    );
+  }
 
   if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) {
     return (
-      <Stack py={10}>
-        <Skeleton h={500} />
+      <Stack align="center" py={60} gap="sm">
+        <IconUsers size={60} stroke={1.5} color="var(--mantine-color-gray-6)" />
+        <Text fw={500} c="dimmed">Belum ada struktur organisasi yang ditambahkan</Text>
       </Stack>
     );
   }
 
-  // Step 1: Group pegawai berdasarkan posisiId
   const posisiMap = new Map<string, any>();
-
   for (const pegawai of stateOrganisasi.findMany.data) {
     const posisiId = pegawai.posisi.id;
     if (!posisiMap.has(posisiId)) {
       posisiMap.set(posisiId, {
         ...pegawai.posisi,
         pegawaiList: [],
-        children: []
+        children: [],
       });
     }
     posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
   }
-  
 
-  // Step 2: Buat struktur pohon berdasarkan parentId
   let root: any[] = [];
-
   posisiMap.forEach((posisi) => {
     if (posisi.parentId) {
       const parent = posisiMap.get(posisi.parentId);
@@ -62,56 +66,64 @@ function ListStrukturOrganisasiPPID() {
     }
   });
 
-  // Step 3: Ubah struktur ke format OrganizationChart
   function toOrgChartFormat(node: any): any {
     return {
       expanded: true,
       type: 'person',
       styleClass: 'p-person',
       data: {
-        name: node.pegawaiList?.[0]?.namaLengkap || 'Tidak ada pegawai',
+        name: node.pegawaiList?.[0]?.namaLengkap || 'Belum ada pegawai',
         status: node.nama,
-        image: node.pegawaiList?.[0]?.image?.link || '/img/default.png'
+        image: node.pegawaiList?.[0]?.image?.link || '/img/default.png',
       },
-      children: node.children.map(toOrgChartFormat)
+      children: node.children.map(toOrgChartFormat),
     };
   }
-  
 
   const chartData = root.map(toOrgChartFormat);
 
   return (
     <Box py={10}>
-      <Paper bg={colors.grey} p="md" style={{overflowX: 'auto'}}>
+      <Paper
+        p="md"
+        radius="lg"
+        shadow="md"
+        withBorder
+        style={{
+          overflowX: 'auto',
+          background: 'linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%)',
+        }}
+      >
         <OrganizationChart value={chartData} nodeTemplate={nodeTemplate} />
       </Paper>
     </Box>
   );
 }
 
-
 function nodeTemplate(node: any) {
   const imageSrc = node?.data?.image || '/img/default.png';
   const name = node?.data?.name || 'Tanpa Nama';
   const status = node?.data?.status || 'Tidak ada deskripsi';
 
   return (
-    <Stack align="center" gap={4}>
-      <Image
-        src={imageSrc}
-        alt={name}
-        radius="xl"
-        w={120}
-        h={120}
-        fit="cover"
-      />
-      <Text fw={600} ta="center">{name}</Text>
-      <Text size="sm" c="dimmed" ta="center">{status}</Text>
+    <Stack align="center" gap={6} p="sm" style={{ minWidth: 160 }}>
+      <Tooltip label={name} position="top" withArrow>
+        <Image
+          src={imageSrc}
+          alt={name}
+          radius="xl"
+          w={100}
+          h={100}
+          fit="cover"
+          style={{
+            border: '1px solid #D3D1D1FF',
+          }}
+        />
+      </Tooltip>
+      <Text fw={600} ta="center" size="sm">{name}</Text>
+      <Text size="xs" c="dimmed" ta="center">{status}</Text>
     </Stack>
   );
 }
 
-
-
-
 export default StrukturOrganisasiPPID;