Fix Ui Admin & User to Mobile && QC Menu Landing Page, PPID, Desa

2025-09-24 14:50:53 +08:00
parent b5c044df6e
commit 3e4a7a1c0a
47 changed files with 1778 additions and 502 deletions
--- a/src/app/darmasaba/(pages)/desa/berita/_lib/layoutTabs.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/_lib/layoutTabs.tsx
@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Container, Grid, GridCol, ScrollArea, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
+import { Box, Group, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -23,95 +23,52 @@ function LayoutTabsBerita({
  const pathname = usePathname();
  const searchParams = useSearchParams();

-  // Get active tab from URL path
  const activeTab = pathname.split('/').pop() || 'semua';
-
-  // Get initial search value from URL
  const initialSearch = searchParams.get('search') || '';
  const [searchValue, setSearchValue] = useState(initialSearch);
  const [searchTimeout, setSearchTimeout] = useState<number | null>(null);

-  // Update active tab state when pathname changes
  const [activeTabState, setActiveTabState] = useState(activeTab);
  useEffect(() => {
    setActiveTabState(activeTab);
  }, [activeTab]);

-  // Clean up timeouts on unmount
  useEffect(() => {
    return () => {
-      if (searchTimeout !== null) {
-        clearTimeout(searchTimeout);
-      }
+      if (searchTimeout !== null) clearTimeout(searchTimeout);
    };
  }, [searchTimeout]);

-  // Handle search input change with debounce
  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    setSearchValue(value);

-    // Clear previous timeout
-    if (searchTimeout !== null) {
-      clearTimeout(searchTimeout);
-    }
+    if (searchTimeout !== null) clearTimeout(searchTimeout);

-    // Set new timeout
    const newTimeout = window.setTimeout(() => {
      const params = new URLSearchParams(searchParams.toString());

-      if (value) {
-        params.set('search', value);
-      } else {
-        params.delete('search');
-      }
+      if (value) params.set('search', value);
+      else params.delete('search');

-      // Only update URL if the search value has actually changed
      if (params.toString() !== searchParams.toString()) {
        router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
      }
-    }, 500); // 500ms debounce delay
+    }, 500);

    setSearchTimeout(newTimeout);
  };
-  const tabs = [
-    {
-      label: "Semua",
-      value: "semua",
-      href: "/darmasaba/desa/berita/semua"
-    },
-    {
-      label: "Budaya",
-      value: "budaya",
-      href: "/darmasaba/desa/berita/budaya"
-    },
-    {
-      label: "Pemerintahan",
-      value: "pemerintahan",
-      href: "/darmasaba/desa/berita/pemerintahan"
-    },
-    {
-      label: "Ekonomi",
-      value: "ekonomi",
-      href: "/darmasaba/desa/berita/ekonomi"
-    },
-    {
-      label: "Pembangunan",
-      value: "pembangunan",
-      href: "/darmasaba/desa/berita/pembangunan"
-    },
-    {
-      label: "Sosial",
-      value: "sosial",
-      href: "/darmasaba/desa/berita/sosial"
-    },
-    {
-      label: "Teknologi",
-      value: "teknologi",
-      href: "/darmasaba/desa/berita/teknologi"
-    },

+  const tabs = [
+    { label: "Semua", value: "semua", href: "/darmasaba/desa/berita/semua" },
+    { label: "Budaya", value: "budaya", href: "/darmasaba/desa/berita/budaya" },
+    { label: "Pemerintahan", value: "pemerintahan", href: "/darmasaba/desa/berita/pemerintahan" },
+    { label: "Ekonomi", value: "ekonomi", href: "/darmasaba/desa/berita/ekonomi" },
+    { label: "Pembangunan", value: "pembangunan", href: "/darmasaba/desa/berita/pembangunan" },
+    { label: "Sosial", value: "sosial", href: "/darmasaba/desa/berita/sosial" },
+    { label: "Teknologi", value: "teknologi", href: "/darmasaba/desa/berita/teknologi" },
  ];
+
  const handleTabChange = (value: string | null) => {
    if (!value) return;
    const tab = tabs.find(t => t.value === value);
@@ -127,16 +84,29 @@ function LayoutTabsBerita({
      <Box px={{ base: "md", md: 100 }}>
        <BackButton />
      </Box>
-      <Container size="lg" px="md">
-        <Stack align="center" gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
-            Portal Berita Darmasaba
-          </Text>
-          <Text ta="center" px="md">
-            Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
-          </Text>
-        </Stack>
-      </Container>
+
+      <Box px={{ base: 'md', md: 100 }}>
+        <Group justify='space-between' align="center">
+          <Stack gap="0">
+            <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
+              Portal Berita Darmasaba
+            </Text>
+            <Text>
+              Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
+            </Text>
+          </Stack>
+          <Box>
+            <TextInput
+              radius="lg"
+              placeholder={placeholder}
+              leftSection={searchIcon}
+              w="100%"
+              value={searchValue}
+              onChange={handleSearchChange}
+            />
+          </Box>
+        </Group>
+      </Box>

      <Tabs
        color={colors['blue-button']}
@@ -145,33 +115,25 @@ function LayoutTabsBerita({
        onChange={handleTabChange}
      >
        <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
-          <Grid>
-            <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
-              <ScrollArea type="auto" offsetScrollbars>
-                <TabsList>
-                  {tabs.map((tab, index) => (
-                    <TabsTab
-                      key={index}
-                      value={tab.value}
-                      onClick={() => router.push(tab.href)}
-                    >
-                      {tab.label}
-                    </TabsTab>
-                  ))}
-                </TabsList>
-              </ScrollArea>
-            </GridCol>
-            <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
-              <TextInput
-                radius="lg"
-                placeholder={placeholder}
-                leftSection={searchIcon}
-                w="100%"
-                value={searchValue}
-                onChange={handleSearchChange}
-              />
-            </GridCol>
-          </Grid>
+          {/* SCROLLABLE TABS */}
+          <Box style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
+            <TabsList style={{ display: 'flex', flexWrap: 'nowrap', gap: '0.5rem' }}>
+              {tabs.map((tab, index) => (
+                <TabsTab
+                  key={index}
+                  value={tab.value}
+                  onClick={() => router.push(tab.href)}
+                  style={{
+                    flex: '0 0 auto', // Prevent shrinking
+                    minWidth: 100, // optional: makes them touch-friendly
+                    textAlign: 'center'
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              ))}
+            </TabsList>
+          </Box>
        </Box>

        {children}
@@ -180,4 +142,4 @@ function LayoutTabsBerita({
  );
 }

-export default LayoutTabsBerita;
+export default LayoutTabsBerita;
--- a/src/app/darmasaba/(pages)/desa/galery/_lib/layoutTabs.tsx
+++ b/src/app/darmasaba/(pages)/desa/galery/_lib/layoutTabs.tsx
@@ -1,12 +1,12 @@
 'use client';

-import { useEffect, useState } from 'react';
-import { usePathname, useRouter } from 'next/navigation';
-import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsTab, Text } from '@mantine/core';
-import BackButton from '../../layanan/_com/BackButto';
-import dynamic from 'next/dynamic';
-import type { SearchBarProps } from './searchBar';
 import colors from '@/con/colors';
+import { Box, Container, Stack, Tabs, TabsList, TabsTab, Text } from '@mantine/core';
+import dynamic from 'next/dynamic';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import BackButton from '../../layanan/_com/BackButto';
+import type { SearchBarProps } from './searchBar';

 // Define tabs outside the component to ensure consistency between server and client
 const TABS = [
@@ -35,7 +35,7 @@ function LayoutTabsGalery({ children }: HeaderSearchProps) {
  const router = useRouter();
  const pathname = usePathname();
  const [isClient, setIsClient] = useState(false);
-  
+
  // Set default active tab to empty string to prevent hydration mismatch
  const [activeTab, setActiveTab] = useState('');

@@ -47,7 +47,7 @@ function LayoutTabsGalery({ children }: HeaderSearchProps) {
  // Update active tab based on current route - only on client side
  useEffect(() => {
    if (!isClient) return;
-    
+
    const currentTab = TABS.find(tab => pathname.includes(tab.value));
    if (currentTab) {
      setActiveTab(currentTab.value);
@@ -75,42 +75,38 @@ function LayoutTabsGalery({ children }: HeaderSearchProps) {
      <Box px={{ base: "md", md: 100 }}>
        <BackButton />
      </Box>
-      <Container size="lg" px="md">
+      <Box px={{ base: "md", md: 100 }}>
        <Stack align="center" gap="0">
          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
            Galeri Kegiatan Desa Darmasaba
          </Text>
        </Stack>
-      </Container>
+        <Box>
+          <SearchBar />
+        </Box>
+      </Box>

-      <Tabs 
+      <Tabs
        value={isClient ? activeTab : undefined}
        defaultValue={TABS[0].value}
        onChange={handleTabChange}
-        color={colors['blue-button']} 
+        color={colors['blue-button']}
        variant="pills"
        keepMounted={false}
      >
        <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
-          <Grid>
-            <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
-              <TabsList>
-                {TABS.map((tab) => (
-                  <TabsTab 
-                    key={tab.value} 
-                    value={tab.value}
-                    component="button"
-                    type="button"
-                  >
-                    {tab.label}
-                  </TabsTab>
-                ))}
-              </TabsList>
-            </GridCol>
-            <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
-              <SearchBar />
-            </GridCol>
-          </Grid>
+          <TabsList>
+            {TABS.map((tab) => (
+              <TabsTab
+                key={tab.value}
+                value={tab.value}
+                component="button"
+                type="button"
+              >
+                {tab.label}
+              </TabsTab>
+            ))}
+          </TabsList>
        </Box>

        <Container size={'xl'}>
--- a/src/app/darmasaba/(pages)/desa/galery/_lib/searchBar.tsx
+++ b/src/app/darmasaba/(pages)/desa/galery/_lib/searchBar.tsx
@@ -2,7 +2,7 @@

 'use client';

-import { TextInput } from '@mantine/core';
+import { Group, TextInput } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
@@ -65,13 +65,15 @@ export function SearchBar({
  }, []);

  return (
-    <TextInput
+    <Group justify='center'>
+      <TextInput
      radius="lg"
      placeholder={placeholder}
      leftSection={searchIcon}
-      w="100%"
+      w={{ base: '100%', md: '50%' }}
      value={searchValue}
      onChange={handleSearchChange}
    />
+    </Group>
  );
 }
--- a/src/app/darmasaba/(pages)/desa/galery/video/Content.tsx
+++ b/src/app/darmasaba/(pages)/desa/galery/video/Content.tsx
@@ -2,19 +2,24 @@

 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import { Box, Center, Pagination, Paper, SimpleGrid, Spoiler, Stack, Text } from '@mantine/core';
+import {
+  Box,
+  Center,
+  Pagination,
+  Paper,
+  SimpleGrid,
+  Spoiler,
+  Stack,
+  Text,
+} from '@mantine/core';
 import { useCallback, useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';

 export default function VideoContent() {
-  const [expanded, setExpanded] = useState(false);
+  // ✅ expanded state per index
+  const [expandedMap, setExpandedMap] = useState<Record<number, boolean>>({});
  const videoState = useSnapshot(stateGallery.video);
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-  } = videoState.findMany;
+  const { data, page, totalPages, loading } = videoState.findMany;

  // Handle search and pagination changes
  const loadData = useCallback((pageNum: number, searchTerm: string) => {
@@ -27,24 +32,18 @@ export default function VideoContent() {
      const urlParams = new URLSearchParams(window.location.search);
      const urlSearch = urlParams.get('search') || '';
      const urlPage = parseInt(urlParams.get('page') || '1');
-      
      loadData(urlPage, urlSearch);
    };

-    // Handle search updates from the search bar
    const handleSearchUpdate = (e: Event) => {
      const { search } = (e as CustomEvent).detail;
      loadData(1, search);
    };

-    // Initial load
    handleRouteChange();
-
-    // Set up event listeners
    window.addEventListener('popstate', handleRouteChange);
    window.addEventListener('searchUpdate', handleSearchUpdate as EventListener);
-    
-    // Cleanup
+
    return () => {
      window.removeEventListener('popstate', handleRouteChange);
      window.removeEventListener('searchUpdate', handleSearchUpdate as EventListener);
@@ -57,6 +56,13 @@ export default function VideoContent() {
    loadData(newPage, search);
  };

+  const toggleExpanded = (index: number, value: boolean) => {
+    setExpandedMap((prev) => ({
+      ...prev,
+      [index]: value,
+    }));
+  };
+
  const dataVideo = data || [];

  if (loading && !data) {
@@ -72,7 +78,13 @@ export default function VideoContent() {
      <SimpleGrid cols={{ base: 1, md: 3 }}>
        {dataVideo.map((v, k) => (
          <Box key={k}>
-            <Paper mb={50} p="md" radius={26} bg={colors['white-trans-1']} w={{ base: '100%', md: '100%' }}>
+            <Paper
+              mb={50}
+              p="md"
+              radius={26}
+              bg={colors['white-trans-1']}
+              w={{ base: '100%', md: '100%' }}
+            >
              <Box>
                <Center>
                  <Box
@@ -109,8 +121,8 @@ export default function VideoContent() {
                        Hide details
                      </Text>
                    }
-                    expanded={expanded}
-                    onExpandedChange={setExpanded}
+                    expanded={expandedMap[k] || false}
+                    onExpandedChange={(val) => toggleExpanded(k, val)}
                  >
                    <Text
                      ta="justify"
@@ -137,15 +149,15 @@ export default function VideoContent() {
  );
 }

-// ✅ Fix: HAPUS SPASI BERLEBIH DI URL
+// ✅ Fix: convert YouTube URL ke embed
 function convertToEmbedUrl(youtubeUrl: string): string {
  try {
    const url = new URL(youtubeUrl);
    const videoId = url.searchParams.get('v');
    if (!videoId) return youtubeUrl;
-    return `https://www.youtube.com/embed/${videoId}`; // ✅ tanpa spasi!
+    return `https://www.youtube.com/embed/${videoId}`;
  } catch (err) {
    console.error('Error converting YouTube URL to embed:', err);
    return youtubeUrl;
  }
-}
+}
--- a/src/app/darmasaba/(pages)/desa/layanan/[id]/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/layanan/[id]/page.tsx
@@ -2,11 +2,12 @@
 'use client'
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Center, Container, Group, Image, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Center, Container, Group, Image, Modal, Paper, Select, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../_com/BackButto';
+import { useDisclosure } from '@mantine/hooks';

 interface LayananData {
  id: string;
@@ -31,7 +32,12 @@ function Page() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<LayananData | null>(null);

+  const [opened, { open, close }] = useDisclosure(false);
+  const stateCreate = useProxy(stateLayananDesa.ajukanPermohonan);
+
+
  useEffect(() => {
+    state.suratKeterangan.findManyAll.load()
    const loadData = async () => {
      if (!id) return;
      try {
@@ -48,6 +54,22 @@ function Page() {
    loadData();
  }, [id]);

+  const resetForm = () => {
+    stateCreate.create.form = {
+      nama: '',
+      nik: '',
+      alamat: '',
+      nomorKk: '',
+      kategoriId: '',
+    }
+  }
+
+  const handleSubmit = async () => {
+    await stateCreate.create.create();
+    resetForm();
+    close();
+  }
+
  if (loading) {
    return (
      <Center h="100vh" bg={colors.Bg}>
@@ -105,12 +127,76 @@ function Page() {
              size="lg"
              variant="gradient"
              gradient={{ from: '#1C6EA4', to: '#63B3ED' }}
+              onClick={open}
            >
              Ajukan Permohonan
            </Button>
          </Group>
        </Stack>
      </Box>
+      <Modal
+        opened={opened}
+        onClose={close}
+        radius={0}
+        transitionProps={{ transition: 'fade', duration: 200 }}
+      >
+        <Paper p="md" withBorder>
+          <Stack gap="xs">
+            <Title order={3}>Ajukan Permohonan</Title>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama</Text>}
+              placeholder="masukkan nama"
+              onChange={(val) => (stateCreate.create.form.nama = val.target.value)}
+            />
+            <TextInput
+              type="number"
+              label={<Text fz="sm" fw="bold">NIK</Text>}
+              placeholder="masukkan NIK"
+              onChange={(val) => (stateCreate.create.form.nik = val.target.value)}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Alamat</Text>}
+              placeholder="masukkan alamat"
+              onChange={(val) => (stateCreate.create.form.alamat = val.target.value)}
+            />
+            <TextInput
+              type="number"
+              label={<Text fz="sm" fw="bold">Nomor KK</Text>}
+              placeholder="masukkan Nomor KK"
+              onChange={(val) => (stateCreate.create.form.nomorKk = val.target.value)}
+            />
+            <Select
+              label="Kategori"
+              placeholder="Pilih kategori"
+              data={stateLayananDesa.suratKeterangan.findManyAll.data?.map((item) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={stateCreate.create.form.kategoriId || null}
+              onChange={(val: string | null) => {
+                if (val) {
+                  const selected = stateLayananDesa.suratKeterangan.findMany.data?.find(
+                    (item) => item.id === val
+                  );
+                  if (selected) {
+                    stateCreate.create.form.kategoriId = selected.id;
+                  }
+                } else {
+                  stateCreate.create.form.kategoriId = '';
+                }
+              }}
+              searchable
+              clearable
+              nothingFoundMessage="Tidak ditemukan"
+              required
+            />
+
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>
+              Simpan
+            </Button>
+          </Stack>
+        </Paper>
+      </Modal>
    </Stack>
  );
 }
--- a/src/app/darmasaba/(pages)/desa/layanan/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/layanan/page.tsx
@@ -22,7 +22,7 @@ export default function Page() {
            <Container w={{ base: "100%", md: "50%" }} >
                <Stack align="center" gap={0}>
                    {/* Bagian Layanan */}
-                    <Text fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+                    <Text fz={{ base: "1.8rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" }} c={colors["blue-button"]} fw={"bold"}>
                        Layanan Desa Darmasaba
                    </Text>
                    <Text
--- a/src/app/darmasaba/(pages)/desa/pengumuman/[name]/[id]/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/pengumuman/[name]/[id]/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
-import { Box, Container, Flex, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Container, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useParams } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -31,7 +31,7 @@ function Page() {
      </Box>
      <Container size="lg" px="md">
        <Stack gap="xs" >
-            <Flex justify={"space-between"} align={"center"}>
+            <Group justify={"space-between"} align={"center"}>
              <Text fz={{ base: "2rem", md: "2rem" }} c={colors["blue-button"]} fw="bold" >
                {detail.data?.judul}
              </Text>
@@ -40,7 +40,7 @@ function Page() {
                  <Text  c={colors['white-1']}>{detail.data?.CategoryPengumuman?.name}</Text>
                </Paper>
              </Group>
-            </Flex>
+            </Group>
          <Paper bg={colors["white-1"]} p="md">
            <Text fz={"md"} dangerouslySetInnerHTML={{ __html: detail.data?.content }} />
            <Text fz={"md"} c={colors["blue-button"]} fw="bold" >