Fix UI User Menu PPID & Kesehatan

src/app/darmasaba/(pages)/kesehatan/program-kesehatan/[id]/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import programKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan';
 import colors from '@/con/colors';
-import { Box, Center, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Center, Group, Image, Loader, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCalendar, IconUser } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
@@ -18,45 +18,75 @@ function Page() {
 
   if (!state.findUnique.data) {
     return (
-      <div>
-        <Skeleton h={500} />
-      </div>
+      <Center mih="60vh">
+        <Stack align="center" gap="sm">
+          <Loader color={colors["blue-button"]} size="lg" />
+          <Text c="dimmed" fz="sm">Memuat data program kesehatan...</Text>
+        </Stack>
+      </Center>
     )
   }
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Paper px={{ base: 'md', md: 100 }} radius={10} bg={colors["white-trans-1"]}>
-        <Stack gap={'xs'}>
-          <Center my={20}>
-            <Image radius={"lg"} src={state.findUnique.data.image?.link} alt="" />
+      <Paper
+        px={{ base: 'md', md: 100 }}
+        py="xl"
+        radius="xl"
+        shadow="md"
+        bg={colors["white-trans-1"]}
+      >
+        <Stack gap="lg">
+          <Center>
+            {state.findUnique.data.image?.link ? (
+              <Image
+                radius="xl"
+                src={state.findUnique.data.image?.link}
+                alt={state.findUnique.data.name}
+                w="100%"
+                maw={800}
+                fit="cover"
+              />
+            ) : (
+              <Skeleton h={300} w="100%" radius="xl" />
+            )}
           </Center>
-          <Box px={'lg'}>
-            <Box>
-              <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                {state.findUnique.data.name}
-              </Text>
-              <Text ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsi }}></Text>
-            </Box>
-            <Group py={20}>
-              <Group gap="xs">
-                <IconCalendar size={18} />
-                <Text size="sm">
-                  {state.findUnique.data.createdAt ? new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID', {
-                    day: 'numeric',
-                    month: 'long',
-                    year: 'numeric',
-                  }) : 'No date available'}
-                </Text>
-              </Group>
-              <Group gap="xs">
-                <IconUser size={18} />
-                <Text size="sm">Admin Desa</Text>
-              </Group>
-            </Group>
+          <Box>
+            <Text pb="sm" c={colors["blue-button"]} fw="bold" fz={{ base: 24, md: 32 }} lh={1.2}>
+              {state.findUnique.data.name}
+            </Text>
+            <Text
+              ta="justify"
+              fz="md"
+              lh={1.6}
+              dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsi }}
+            />
           </Box>
+          <Group gap="xl">
+            <Group gap="xs">
+              <Tooltip label="Tanggal dibuat" withArrow>
+                <IconCalendar size={20} stroke={1.5} />
+              </Tooltip>
+              <Text size="sm" c="dimmed">
+                {state.findUnique.data.createdAt
+                  ? new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID', {
+                      day: 'numeric',
+                      month: 'long',
+                      year: 'numeric',
+                    })
+                  : 'Tanggal tidak tersedia'}
+              </Text>
+            </Group>
+            <Group gap="xs">
+              <Tooltip label="Dibuat oleh" withArrow>
+                <IconUser size={20} stroke={1.5} />
+              </Tooltip>
+              <Text size="sm" c="dimmed">Admin Desa</Text>
+            </Group>
+          </Group>
         </Stack>
       </Paper>
     </Stack>