Fix Tampilan User & Admin Menu Inovasi & Lingkungan

2025-09-22 17:15:11 +08:00
parent 0fc47c28ff
commit b5c044df6e
40 changed files with 3114 additions and 1667 deletions
--- a/src/app/darmasaba/(pages)/inovasi/kolaborasi-inovasi/page.tsx
+++ b/src/app/darmasaba/(pages)/inovasi/kolaborasi-inovasi/page.tsx
@@ -1,67 +1,76 @@
 'use client'
 import kolaborasiInovasiState from '@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi';
+import mitraKolaborasi from '@/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi';
 import colors from '@/con/colors';
-import { Box, Center, Grid, GridCol, Group, Image, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import {
+  Box,
+  Center,
+  Grid,
+  GridCol,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  Select,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  TextInput
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
+
 function Page() {
-  const state = useProxy(kolaborasiInovasiState)
+  const kolabState = useProxy(kolaborasiInovasiState)
+  const mitraState = useProxy(mitraKolaborasi)
+
  const [search, setSearch] = useState('');
  const [selectedYear, setSelectedYear] = useState<string | null>(null);

-  // Get unique years from the data
+  // Get unique years from kolaborasiInovasi data
  const years = Array.from(
    new Set(
-      state.findMany.data?.map(item => 
+      kolabState.findMany.data?.map(item => 
        new Date(item.createdAt).getFullYear().toString()
      ) || []
    )
  )
-  .sort((a, b) => b.localeCompare(a)) // Sort descending (newest first)
-  .map(year => ({
-    value: year,
-    label: year,
-  }));
+  .sort((a, b) => b.localeCompare(a))
+  .map(year => ({ value: year, label: year }));

-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = state.findMany
+  const { data, page, totalPages, loading, load } = kolabState.findMany;

  useShallowEffect(() => {
-    load(page, 10, search, selectedYear || '')
-  }, [page, search, selectedYear])
+    mitraState.findMany.load(page, 10);
+    load(page, 10, search, selectedYear || '');
+  }, [page, search, selectedYear]);
+
+  const mitraData = mitraState.findMany.data || [];
+  const mitraLoading = mitraState.findMany.loading;

-  if (loading || !data) {
-    return (
-      <Stack py={10}>
-        <Skeleton height={650} />
-      </Stack>
-    );
-  }

  return (
    <>
-      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
        <Box px={{ base: 'md', md: 100 }}>
          <BackButton />
        </Box>
+
+        {/* Header Kolaborasi Inovasi */}
        <Box px={{ base: 'md', md: 100 }} >
          <Grid align='center'>
            <GridCol span={{ base: 12, md: 9 }}>
-              <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
                Kolaborasi Inovasi
              </Text>
            </GridCol>
            <GridCol span={{ base: 12, md: 3 }}>
              <TextInput
-                radius={"lg"}
+                radius="lg"
                placeholder='Cari Kolaborasi Inovasi'
                value={search}
                onChange={(e) => setSearch(e.target.value)}
@@ -71,40 +80,43 @@ function Page() {
            </GridCol>
          </Grid>
        </Box>
+
+        {/* Filter Tahun */}
        <Box px={{ base: "md", md: 100 }}>
-          <Stack gap={'lg'} justify='center'>
-            <Group justify='flex-end'>
+          <Stack gap="lg" justify="center">
+            <Group justify="flex-end">
              <Select
                value={selectedYear}
                onChange={setSelectedYear}
-                label={<Text fw={"bold"} fz={"sm"}>Tahun</Text>}
+                label={<Text fw="bold" fz="sm">Tahun</Text>}
                placeholder='Semua Tahun'
                clearable
-                data={[
-                  { value: '', label: 'Semua Tahun' },
-                  ...years
-                ]}
+                data={[{ value: '', label: 'Semua Tahun' }, ...years]}
              />
            </Group>
-            <SimpleGrid cols={{ base: 1, md: 2 }} spacing={'lg'}>
-              {data.map((v, k) => {
-                return (
-                  <Paper p={'xl'} key={k}>
-                    <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
-                    <Box pr={'lg'} pb={20}>
-                      {v.slug}
-                    </Box>
-                    <Box pr={'lg'}>
-                      {v.kolaborator}
-                    </Box>
+
+            {/* List Kolaborasi Inovasi */}
+            {loading || !data ? (
+              <Stack py={10}>
+                <Skeleton height={650} />
+              </Stack>
+            ) : (
+              <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
+                {data.map((v, k) => (
+                  <Paper p="xl" key={k}>
+                    <Text fz="h3" fw="bold" c={colors['blue-button']}>{v.name}</Text>
+                    <Box pr="lg" pb={20}>{v.slug}</Box>
+                    <Box pr="lg">{v.kolaborator}</Box>
                  </Paper>
-                );
-              })}
-            </SimpleGrid>
+                ))}
+              </SimpleGrid>
+            )}
+
+            {/* Pagination */}
            <Center>
              <Pagination
                value={page}
-                onChange={(newPage) => load(newPage)} // ini penting!
+                onChange={(newPage) => load(newPage)}
                total={totalPages}
                mt="md"
                mb="md"
@@ -113,17 +125,44 @@ function Page() {
          </Stack>
        </Box>
      </Stack>
+
+      {/* Mitra Kolaborasi Section */}
      <Box py={40} px={{ base: "md", md: 100 }} bg={colors['white-trans-1']}>
-        <Stack gap={'lg'} justify='center'>
-          <Box px={{ base: 'md', md: 100 }} >
-            <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        <Stack gap="lg" justify="center">
+          <Box px={{ base: 'md', md: 100 }}>
+            <Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
              Mitra Kolaborasi
            </Text>
-            <Text ta={'center'} fz={'h4'}>Kami berkolaborasi dengan berbagai mitra dari berbagai sektor untuk mewujudkan visi Smart Village Darmasaba.</Text>
+            <Text ta="center" fz="h4">
+              Kami berkolaborasi dengan berbagai mitra dari berbagai sektor untuk mewujudkan visi Smart Village Darmasaba.
+            </Text>
          </Box>
-          <Center>
-            <Image src={'/api/img/logoukm-kolaborasiinvoasi.png'} alt='' w={{ base: 500, md: 650 }} loading="lazy"/>
-          </Center>
+
+          {mitraLoading ? (
+            <Center py={20}><Skeleton height={100} width="80%" /></Center>
+          ) : (
+            <SimpleGrid cols={{ base: 2, md: 4 }} spacing="xl">
+              {mitraData.map((m) => (
+                <Paper key={m.id} p="md" shadow="sm" radius="md">
+                  <Center mb="sm">
+                    {m.image?.link ? (
+                      <Image
+                        src={`${process.env.NEXT_PUBLIC_BASE_URL || ''}${m.image.link}`}
+                        alt={m.name}
+                        w={150}
+                        h={100}
+                        fit="cover"
+                        radius="md"
+                      />
+                    ) : (
+                      <Box w={100} h={100} bg={colors['blue-button']} style={{ borderRadius: '50%' }} />
+                    )}
+                  </Center>
+                  <Text ta="center" fw="bold">{m.name}</Text>
+                </Paper>
+              ))}
+            </SimpleGrid>
+          )}
        </Stack>
      </Box>
    </>
--- a/src/app/darmasaba/(pages)/inovasi/program-kreatif-desa/[id]/page.tsx
+++ b/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;
--- a/src/app/darmasaba/(pages)/inovasi/program-kreatif-desa/page.tsx
+++ b/src/app/darmasaba/(pages)/inovasi/program-kreatif-desa/page.tsx
@@ -1,51 +1,91 @@
+'use client'
+import programKreatifState from '@/app/admin/(dashboard)/_state/inovasi/program-kreatif';
 import colors from '@/con/colors';
-import { Stack, Box, Text, SimpleGrid, Paper, Center, Button } from '@mantine/core';
-import React from 'react';
+import { Box, Button, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { useTransitionRouter } from 'next-view-transitions';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { IconBuildingCircus, IconChartLine, IconLeaf, IconRecycle, IconTrophy } from '@tabler/icons-react';
+import { IconSearch } from '@tabler/icons-react';
+import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';

-const data = [
-  {
-    id: 1,
-    icon: <IconLeaf size={50} color={colors['blue-button']} />,
-    judul: 'Ekowisata dan Desa Hijau',
-    deskripsi: 'Inisiatif ramah lingkungan untuk desa berkelanjutan'
-  },
-  {
-    id: 2,
-    icon: <IconTrophy size={50} color={colors['blue-button']} />,
-    judul: 'Kompetisi dan Festival Desa',
-    deskripsi: 'Ajang kompetisi inovasi dan festival tahunan desa'
-  },
-  {
-    id: 3,
-    icon: <IconBuildingCircus size={50} color={colors['blue-button']} />,
-    judul: 'Wisata Kreatif dan Budaya',
-    deskripsi: 'Promosi destinasi wisata berbasis budaya dan alam'
-  },
-  {
-    id: 4,
-    icon: <IconChartLine size={50} color={colors['blue-button']} />,
-    judul: 'Ekonomi Kreatif',
-    deskripsi: 'Mendukung pelaku UMKM dengan platform digital untuk mempromosikan produk lokal ke pasar global'
-  },
-  {
-    id: 5,
-    icon: <IconRecycle size={50} color={colors['blue-button']} />,
-    judul: 'Smart Waste Management',
-    deskripsi: 'Inisiatif pengelolaan sampah berbasis teknologi untuk menciptakan lingkungan yang bersih dan berkelanjutan.'
-  },
-]
+// const data = [
+//   {
+//     id: 1,
+//     icon: <IconLeaf size={50} color={colors['blue-button']} />,
+//     judul: 'Ekowisata dan Desa Hijau',
+//     deskripsi: 'Inisiatif ramah lingkungan untuk desa berkelanjutan'
+//   },
+//   {
+//     id: 2,
+//     icon: <IconTrophy size={50} color={colors['blue-button']} />,
+//     judul: 'Kompetisi dan Festival Desa',
+//     deskripsi: 'Ajang kompetisi inovasi dan festival tahunan desa'
+//   },
+//   {
+//     id: 3,
+//     icon: <IconBuildingCircus size={50} color={colors['blue-button']} />,
+//     judul: 'Wisata Kreatif dan Budaya',
+//     deskripsi: 'Promosi destinasi wisata berbasis budaya dan alam'
+//   },
+//   {
+//     id: 4,
+//     icon: <IconChartLine size={50} color={colors['blue-button']} />,
+//     judul: 'Ekonomi Kreatif',
+//     deskripsi: 'Mendukung pelaku UMKM dengan platform digital untuk mempromosikan produk lokal ke pasar global'
+//   },
+//   {
+//     id: 5,
+//     icon: <IconRecycle size={50} color={colors['blue-button']} />,
+//     judul: 'Smart Waste Management',
+//     deskripsi: 'Inisiatif pengelolaan sampah berbasis teknologi untuk menciptakan lingkungan yang bersih dan berkelanjutan.'
+//   },
+// ]
 function Page() {
+  const listState = useProxy(programKreatifState);
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 500);
+  const router = useTransitionRouter()
+  const {
+    data,
+    loading,
+    page,
+    totalPages,
+    load
+  } = listState.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, debouncedSearch);
+  }, [debouncedSearch])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={650} radius="md" />
+      </Stack>
+    )
+  }
+
  return (
    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
      <Box px={{ base: 'md', md: 100 }}>
        <BackButton />
      </Box>
      <Box px={{ base: 'md', md: 100 }} >
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Program Kreatif Desa
-        </Text>
+        <Group justify="space-between" mb="md" align='center'>
+          <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Program Kreatif Desa
+          </Text>
+          <TextInput
+            placeholder="Cari program kreatif..."
+            leftSection={<IconSearch size={20} />}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+          />
+        </Group>
      </Box>
      <Box px={{ base: "md", md: 100 }}>
        <Stack gap={'lg'} justify='center'>
@@ -55,17 +95,25 @@ function Page() {
              md: 3
            }}
          >
-            {data.map((v, k) => {
+            {filteredData.map((v, k) => {
              return (
                <Stack key={k} >
                  <Paper p={'xl'} >
                    <Center pb={20}>
-                      {v.icon}
+                      {v.icon ? (
+                        <IconMapper
+                          name={v.icon as IconKey}
+                          size={32}
+                          color={colors['blue-button']}
+                        />
+                      ) : (
+                        <Text fz="sm" c="dimmed">Tidak ada ikon</Text>
+                      )}
                    </Center>
-                    <Text ta={'center'} fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
-                    <Text py={10} ta={'center'} fz={'lg'} c={'black'}>{v.deskripsi}</Text>
+                    <Text ta={'center'} fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
+                    <Text py={10} ta={'center'} fz={'lg'} c={'black'}>{v.slug}</Text>
                    <Center>
-                      <Button bg={colors['blue-button']}>Selengkapnya</Button>
+                      <Button onClick={() => router.push(`/darmasaba/inovasi/program-kreatif-desa/${v.id}`)} bg={colors['blue-button']}>Selengkapnya</Button>
                    </Center>
                  </Paper>
                </Stack>
@@ -73,6 +121,20 @@ function Page() {
            })}
          </SimpleGrid>
        </Stack>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+            color="blue"
+            radius="md"
+          />
+        </Center>
      </Box>
    </Stack>
  );
--- a/src/app/darmasaba/(pages)/lingkungan/program-penghijauan/[id]/page.tsx
+++ b/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;
--- a/src/app/darmasaba/(pages)/lingkungan/program-penghijauan/page.tsx
+++ b/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>