Fix Tampilan User & Admin Menu Inovasi & Lingkungan

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

@@ -0,0 +1,116 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import programPenghijauanState from '@/app/admin/(dashboard)/_state/lingkungan/program-penghijauan';
+import { Box, Button, Paper, Skeleton, Stack, Text, ThemeIcon } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import {
+  IconArrowLeft, IconChartLine, IconChristmasTreeFilled, IconClipboard,
+  IconHomeEco, IconLeaf, IconRecycle, IconScale,
+  IconShieldFilled, IconTent, IconTrash,
+  IconTrendingUp, IconTrophy, IconTruck
+} from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+
+function Page() {
+  const stateProgramPenghijauan = useProxy(programPenghijauanState);
+  const router = useRouter();
+  const params = useParams();
+
+  const iconMap: Record<string, React.FC<any>> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+    truck: IconTruck,
+    scale: IconScale,
+    clipboard: IconClipboard,
+    trash: IconTrash,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
+  };
+
+  useShallowEffect(() => {
+    stateProgramPenghijauan.findUnique.load(params?.id as string);
+  }, [params?.id]);
+
+  if (!stateProgramPenghijauan.findUnique.data) {
+    return (
+      <Stack py="xl" align="center">
+        <Skeleton height={300} radius="lg" w="100%" />
+        <Text c="dimmed" fz="sm">Sedang memuat detail program...</Text>
+      </Stack>
+    );
+  }
+
+  const data = stateProgramPenghijauan.findUnique.data;
+  const IconComponent = data?.icon ? iconMap[data.icon] : null;
+
+  return (
+    <Box py="md" px={{  base: 'md', md: 100  }}>
+      <Button
+        variant="light"
+        color="blue"
+        onClick={() => router.back()}
+        leftSection={<IconArrowLeft size={20} />}
+        mb="lg"
+        radius="xl"
+      >
+        Kembali ke daftar
+      </Button>
+
+      <Paper
+        w={{ base: '100%', md: '75%' }}
+        mx="auto"
+        p="xl"
+        radius="xl"
+        shadow="md"
+        withBorder
+      >
+        <Stack gap="md" align="center" ta="center">
+          {IconComponent && (
+            <ThemeIcon
+              size={72}
+              radius="xl"
+              variant="light"
+              color="blue"
+              mb="sm"
+              style={{ boxShadow: '0 0 15px rgba(0, 123, 255, 0.3)' }}
+            >
+              <IconComponent size={40} />
+            </ThemeIcon>
+          )}
+
+          <Text fz="xl" fw={700} c="blue">
+            {data?.name || 'Nama program tidak tersedia'}
+          </Text>
+
+          <Text fz="lg" fw={600}>
+            {data?.judul || 'Judul belum tersedia'}
+          </Text>
+
+          <Box w="100%" mt="sm">
+            {data?.deskripsi ? (
+              <Text
+                fz="md"
+                lh={1.7}
+                ta="justify"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+            ) : (
+              <Text c="dimmed" fz="sm" ta="center">
+                Tidak ada deskripsi yang tersedia untuk program ini.
+              </Text>
+            )}
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/lingkungan/program-penghijauan/page.tsx

@@ -8,11 +8,13 @@ import { IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconHo
 import React, { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useTransitionRouter } from 'next-view-transitions';
 
 function Page() {
   const state = useProxy(programPenghijauanState);
   const [search, setSearch] = useState("");
   const [debouncedSearch] = useDebouncedValue(search, 500);
+  const router = useTransitionRouter()
   const { data, load, page, totalPages, loading } = state.findMany;
 
   useShallowEffect(() => {
@@ -96,6 +98,7 @@ function Page() {
                 el.style.transform = 'translateY(0)';
                 el.style.boxShadow = '0 4px 10px rgba(0,0,0,0.1)';
               }}
+              onClick={() => router.push(`/darmasaba/lingkungan/program-penghijauan/${v.id}`)}
             >
               <Stack align="center" gap="sm">
                 <Center>