Fix Tampilan User & Admin Menu Inovasi & Lingkungan

src/app/darmasaba/(pages)/inovasi/program-kreatif-desa/[id]/page.tsx

@@ -0,0 +1,95 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, Skeleton } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import programKreatifState from '@/app/admin/(dashboard)/_state/inovasi/program-kreatif';
+
+import { IconMapper, IconKey } from '@/app/admin/(dashboard)/_com/iconMap';
+
+function Page() {
+  const stateProgramKreatif = useProxy(programKreatifState);
+  const router = useRouter();
+  const params = useParams();
+
+  useShallowEffect(() => {
+    stateProgramKreatif.findUnique.load(params?.id as string);
+  }, [params?.id]);
+
+  if (!stateProgramKreatif.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
+  }
+
+  const data = stateProgramKreatif.findUnique.data;
+
+  return (
+    <Box px={{ base: 'md', md: 100 }} py="md">
+      {/* Tombol Kembali */}
+      <Box mb="md">
+        <Text
+          c={colors['blue-button']}
+          fw="bold"
+          style={{ cursor: 'pointer' }}
+          onClick={() => router.back()}
+        >
+          &larr; Kembali
+        </Text>
+      </Box>
+
+      {/* Konten Utama */}
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        mx="auto"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            {data?.name || 'Program Kreatif Desa'}
+          </Text>
+
+          {/* Ikon */}
+          {data?.icon && (
+            <Box>
+              <IconMapper
+                name={data.icon as IconKey}
+                size={40}
+                color={colors['blue-button']}
+              />
+            </Box>
+          )}
+
+          {/* Deskripsi Singkat */}
+          <Box>
+            <Text fz="lg" fw="bold">
+              Deskripsi Singkat
+            </Text>
+            <Text fz="md" c="dimmed">{data?.slug || '-'}</Text>
+          </Box>
+
+          {/* Deskripsi Detail */}
+          <Box>
+            <Text fz="lg" fw="bold">
+              Deskripsi
+            </Text>
+            <Text
+              fz="md"
+              c="dimmed"
+              dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }}
+            />
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Page;