QC User & Admin Responsive : Menu Landing Page - Desa

2025-10-02 00:10:33 +08:00
parent 63054cedf0
commit 8a6d8ed8db
70 changed files with 1839 additions and 1052 deletions
--- a/src/app/darmasaba/(pages)/desa/berita/[kategori]/Content.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/[kategori]/Content.tsx
@@ -75,7 +75,7 @@ export default function Content({ kategori }: { kategori: string }) {
                        {featured.kategoriBerita?.name || kategori}
                      </Badge>
                      <Title order={2} mb="md">{featured.judul}</Title>
-                      <Text color="dimmed" lineClamp={3} mb="md">{featured.deskripsi}</Text>
+                      <Text c="dimmed" lineClamp={3} mb="md" dangerouslySetInnerHTML={{ __html: featured.deskripsi }} />
                    </div>
                    <Group justify="apart" mt="auto">
                      <Group gap="xs">
@@ -135,9 +135,9 @@ export default function Content({ kategori }: { kategori: string }) {
                    {item.kategoriBerita?.name || kategori}
                  </Badge>
                  <Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
-                  <Text size="sm" color="dimmed" lineClamp={3} mt="xs">{item.deskripsi}</Text>
+                  <Text size="sm" c="dimmed" lineClamp={3} mt="xs" dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                  <Group justify="apart" mt="md" gap="xs">
-                    <Text size="xs" color="dimmed">
+                    <Text size="xs" c="dimmed">
                      {new Date(item.createdAt).toLocaleDateString('id-ID', {
                        day: 'numeric',
                        month: 'short',
--- a/src/app/darmasaba/(pages)/desa/berita/_lib/layoutTabs.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/_lib/layoutTabs.tsx
@@ -1,3 +1,152 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// 'use client'
+// import colors from '@/con/colors';
+// 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';
+// import BackButton from '../../layanan/_com/BackButto';
+
+// type HeaderSearchProps = {
+//   placeholder?: string;
+//   searchIcon?: React.ReactNode;
+//   value?: string;
+//   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+//   children?: React.ReactNode;
+// };
+
+// function LayoutTabsBerita({
+//   children,
+//   placeholder = "pencarian",
+//   searchIcon = <IconSearch size={20} />
+// }: HeaderSearchProps) {
+//   const router = useRouter();
+//   const pathname = usePathname();
+//   const searchParams = useSearchParams();
+
+//   const activeTab = pathname.split('/').pop() || 'semua';
+//   const initialSearch = searchParams.get('search') || '';
+//   const [searchValue, setSearchValue] = useState(initialSearch);
+//   const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
+
+//   const [activeTabState, setActiveTabState] = useState(activeTab);
+//   useEffect(() => {
+//     setActiveTabState(activeTab);
+//   }, [activeTab]);
+
+//   useEffect(() => {
+//     return () => {
+//       if (searchTimeout !== null) clearTimeout(searchTimeout);
+//     };
+//   }, [searchTimeout]);
+
+//   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+//     const value = event.target.value;
+//     setSearchValue(value);
+
+//     if (searchTimeout !== null) clearTimeout(searchTimeout);
+
+//     const newTimeout = window.setTimeout(() => {
+//       const params = new URLSearchParams(searchParams.toString());
+
+//       if (value) params.set('search', value);
+//       else params.delete('search');
+
+//       if (params.toString() !== searchParams.toString()) {
+//         router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
+//       }
+//     }, 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 handleTabChange = (value: string | null) => {
+//     if (!value) return;
+//     const tab = tabs.find(t => t.value === value);
+//     if (tab) {
+//       const params = new URLSearchParams(searchParams.toString());
+//       router.push(`/darmasaba/desa/berita/${value}${params.toString() ? `?${params.toString()}` : ''}`);
+//     }
+//   };
+
+//   return (
+//     <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+//       {/* Header */}
+//       <Box px={{ base: "md", md: 100 }}>
+//         <BackButton />
+//       </Box>
+
+//       <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']}
+//         variant="pills"
+//         value={activeTabState}
+//         onChange={handleTabChange}
+//       >
+//         <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
+//           {/* 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}
+//       </Tabs>
+//     </Stack>
+//   );
+// }
+
+// export default LayoutTabsBerita;
+
+
 'use client'
 import colors from '@/con/colors';
 import { Box, Group, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
@@ -5,39 +154,32 @@ import { IconSearch } from '@tabler/icons-react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import BackButton from '../../layanan/_com/BackButto';
+import { useProxy } from 'valtio/utils';
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';

-type HeaderSearchProps = {
-  placeholder?: string;
-  searchIcon?: React.ReactNode;
-  value?: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  children?: React.ReactNode;
-};
-
-function LayoutTabsBerita({
-  children,
-  placeholder = "pencarian",
-  searchIcon = <IconSearch size={20} />
-}: HeaderSearchProps) {
+function LayoutTabsBerita({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

-  const activeTab = pathname.split('/').pop() || 'semua';
-  const initialSearch = searchParams.get('search') || '';
-  const [searchValue, setSearchValue] = useState(initialSearch);
-  const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
+  const kategoriState = useProxy(stateDashboardBerita.kategoriBerita);

+  // tab aktif dari url
+  const activeTab = pathname.split('/').pop() || 'semua';
  const [activeTabState, setActiveTabState] = useState(activeTab);
+
+  useEffect(() => {
+    kategoriState.findMany.load(); // ambil kategori dari DB
+  }, []);
+
  useEffect(() => {
    setActiveTabState(activeTab);
  }, [activeTab]);

-  useEffect(() => {
-    return () => {
-      if (searchTimeout !== null) clearTimeout(searchTimeout);
-    };
-  }, [searchTimeout]);
+  // search
+  const initialSearch = searchParams.get('search') || '';
+  const [searchValue, setSearchValue] = useState(initialSearch);
+  const [searchTimeout, setSearchTimeout] = useState<number | null>(null);

  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
@@ -47,26 +189,23 @@ function LayoutTabsBerita({

    const newTimeout = window.setTimeout(() => {
      const params = new URLSearchParams(searchParams.toString());
-
      if (value) params.set('search', value);
      else params.delete('search');

-      if (params.toString() !== searchParams.toString()) {
-        router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
-      }
+      router.push(`/darmasaba/desa/berita/${activeTab}${params.toString() ? `?${params.toString()}` : ''}`);
    }, 500);

    setSearchTimeout(newTimeout);
  };

+  // --- tabs dinamis ---
  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" },
+    ...(kategoriState.findMany.data || []).map((kat: any) => ({
+      label: kat.name,
+      value: kat.name.toLowerCase(),
+      href: `/darmasaba/desa/berita/${kat.name.toLowerCase()}`
+    }))
  ];

  const handleTabChange = (value: string | null) => {
@@ -74,7 +213,7 @@ function LayoutTabsBerita({
    const tab = tabs.find(t => t.value === value);
    if (tab) {
      const params = new URLSearchParams(searchParams.toString());
-      router.push(`/darmasaba/desa/berita/${value}${params.toString() ? `?${params.toString()}` : ''}`);
+      router.push(`${tab.href}${params.toString() ? `?${params.toString()}` : ''}`);
    }
  };

@@ -88,18 +227,16 @@ function LayoutTabsBerita({
      <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" >
+            <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>
+            <Text>Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba</Text>
          </Stack>
          <Box>
            <TextInput
              radius="lg"
-              placeholder={placeholder}
-              leftSection={searchIcon}
+              placeholder="pencarian"
+              leftSection={<IconSearch size={20} />}
              w="100%"
              value={searchValue}
              onChange={handleSearchChange}
@@ -108,6 +245,7 @@ function LayoutTabsBerita({
        </Group>
      </Box>

+      {/* TABS */}
      <Tabs
        color={colors['blue-button']}
        variant="pills"
@@ -115,7 +253,6 @@ function LayoutTabsBerita({
        onChange={handleTabChange}
      >
        <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
-          {/* SCROLLABLE TABS */}
          <Box style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
            <TabsList style={{ display: 'flex', flexWrap: 'nowrap', gap: '0.5rem' }}>
              {tabs.map((tab, index) => (
@@ -124,8 +261,8 @@ function LayoutTabsBerita({
                  value={tab.value}
                  onClick={() => router.push(tab.href)}
                  style={{
-                    flex: '0 0 auto', // Prevent shrinking
-                    minWidth: 100, // optional: makes them touch-friendly
+                    flex: '0 0 auto',
+                    minWidth: 100,
                    textAlign: 'center'
                  }}
                >
--- a/src/app/darmasaba/(pages)/desa/berita/semua/page.tsx
+++ b/src/app/darmasaba/(pages)/desa/berita/semua/page.tsx
@@ -82,9 +82,7 @@ function Semua() {
                        {featuredData.kategoriBerita?.name || 'Berita'}
                      </Badge>
                      <Title order={2} mb="md">{featuredData.judul}</Title>
-                      <Text color="dimmed" lineClamp={3} mb="md">
-                        {featuredData.deskripsi}
-                      </Text>
+                      <Text c="dimmed" lineClamp={3} mb="md" dangerouslySetInnerHTML={{ __html: featuredData.deskripsi }} />
                    </div>
                    <Group justify="apart" mt="auto">
                      <Group gap="xs">
@@ -146,10 +144,10 @@ function Semua() {
                  </Badge>

                  <Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
-                  <Text size="sm" color="dimmed" lineClamp={3} mt="xs">{item.deskripsi}</Text>
+                  <Text size="sm" c="dimmed" lineClamp={3} mt="xs" dangerouslySetInnerHTML={{ __html: item.deskripsi }} />

                  <Flex align="center" justify="apart" mt="md" gap="xs">
-                    <Text size="xs" color="dimmed">
+                    <Text size="xs" c="dimmed">
                      {new Date(item.createdAt).toLocaleDateString('id-ID', {
                        day: 'numeric',
                        month: 'short',
--- a/src/app/darmasaba/(pages)/desa/layanan/_com/pelayananSuratKeterangan.tsx
+++ b/src/app/darmasaba/(pages)/desa/layanan/_com/pelayananSuratKeterangan.tsx
@@ -1,40 +1,47 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 "use client";

 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { BackgroundImage, Box, Button, Center, Group, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+import { BackgroundImage, Box, Button, Center, Group, Pagination, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconFileDescription, IconInfoCircle } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import React, { useEffect, useMemo, useState } from 'react';
 import { useProxy } from 'valtio/utils';

 function PelayananSuratKeterangan({ search }: { search: string }) {
-  const [loading, setLoading] = useState(false);
  const router = useRouter();
  const state = useProxy(stateLayananDesa);

-  const filteredData = useMemo(() => {
-    if (!state.suratKeterangan.findMany.data) return [];
-    return state.suratKeterangan.findMany.data.filter((item) => {
-      const keyword = search.toLowerCase();
-      return item.name?.toLowerCase().includes(keyword);
-    });
-  }, [state.suratKeterangan.findMany.data, search]);
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load
+  } = state.suratKeterangan.findMany;

-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        setLoading(true);
-        await state.suratKeterangan.findMany.load();
-      } catch (error) {
-        console.error('Gagal memuat data:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-    loadData();
-  }, []);
+  useShallowEffect(() => {
+    load(page, 9, search);
+  }, [page, search]);
+
+  if (loading || !data) {
+    return Array.from({ length: 3 }).map((_, i) => (
+      <Skeleton key={i} h={250} radius="lg" />
+    ));
+  }
+
+  if (data?.length === 0) {
+    return (
+      <Center py="xl">
+        <Stack align="center" gap="xs">
+          <IconFileDescription size={40} stroke={1.5} color={colors["blue-button"]} />
+          <Text c="dimmed" ta="center">
+            Tidak ada layanan surat keterangan yang ditemukan
+          </Text>
+        </Stack>
+      </Center>
+    );
+  }

  return (
    <Box pb="xl">
@@ -55,69 +62,68 @@ function PelayananSuratKeterangan({ search }: { search: string }) {
        cols={{ base: 1, sm: 2, md: 3 }}
        spacing="lg"
      >
-        {loading ? (
-          Array.from({ length: 3 }).map((_, i) => (
-            <Skeleton key={i} h={250} radius="lg" />
-          ))
-        ) : filteredData.length === 0 ? (
-          <Center py="xl">
-            <Stack align="center" gap="xs">
-              <IconFileDescription size={40} stroke={1.5} color={colors["blue-button"]} />
-              <Text c="dimmed" ta="center">
-                Tidak ada layanan surat keterangan yang ditemukan
+        {data?.map((v, k) => (
+          <BackgroundImage
+            key={k}
+            src={v.image?.link || ''}
+            h={250}
+            radius="lg"
+            pos="relative"
+            style={{
+              boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
+              overflow: "hidden",
+            }}
+          >
+            <Box
+              pos="absolute"
+              w="100%"
+              h="100%"
+              bg="rgba(0,0,0,0.45)"
+              style={{ borderRadius: 16 }}
+            />
+            <Stack justify="space-between" h="100%" gap="md" p="lg" pos="relative">
+              <Text
+                c="white"
+                fw={600}
+                fz="lg"
+                ta="center"
+                lineClamp={2}
+              >
+                {v.name}
              </Text>
-            </Stack>
-          </Center>
-        ) : (
-          filteredData.map((v, k) => (
-            <BackgroundImage
-              key={k}
-              src={v.image?.link || ''}
-              h={250}
-              radius="lg"
-              pos="relative"
-              style={{
-                boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
-                overflow: "hidden",
-              }}
-            >
-              <Box
-                pos="absolute"
-                w="100%"
-                h="100%"
-                bg="rgba(0,0,0,0.45)"
-                style={{ borderRadius: 16 }}
-              />
-              <Stack justify="space-between" h="100%" gap="md" p="lg" pos="relative">
-                <Text
-                  c="white"
-                  fw={600}
-                  fz="lg"
-                  ta="center"
-                  lineClamp={2}
+              <Group justify="center">
+                <Button
+                  size="md"
+                  radius="xl"
+                  bg={colors["blue-button"]}
+                  px="lg"
+                  onClick={() => router.push(`/darmasaba/desa/layanan/${v.id}`)}
+                  style={{
+                    boxShadow: "0 0 12px rgba(59,130,246,0.6)",
+                    transition: "all 0.2s ease",
+                  }}
                >
-                  {v.name}
-                </Text>
-                <Group justify="center">
-                  <Button
-                    size="md"
-                    radius="xl"
-                    bg={colors["blue-button"]}
-                    px="lg"
-                    onClick={() => router.push(`/darmasaba/desa/layanan/${v.id}`)}
-                    style={{
-                      boxShadow: "0 0 12px rgba(59,130,246,0.6)",
-                      transition: "all 0.2s ease",
-                    }}
-                  >
-                    Lihat Detail
-                  </Button>
-                </Group>
-              </Stack>
-            </BackgroundImage>
-          ))
-        )}
+                  Lihat Detail
+                </Button>
+              </Group>
+            </Stack>
+          </BackgroundImage>
+        ))}
      </SimpleGrid>
+      <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>
  );
 }
--- a/src/app/darmasaba/(pages)/ppid/dasar-hukum/page.tsx
+++ b/src/app/darmasaba/(pages)/ppid/dasar-hukum/page.tsx
@@ -74,9 +74,8 @@ function Page() {
                      fw="bold"
                      fz={{ base: 'lg', md: 'xl' }}
                      style={{ lineHeight: 1.4 }}
-                    >
-                      {item.judul}
-                    </Text>
+                      dangerouslySetInnerHTML={{ __html: item.judul }}
+                    />
                    <Text
                      fz={{ base: 'sm', md: 'md' }}
                      style={{ lineHeight: 1.7, wordBreak: "break-word", whiteSpace: "normal" }}
--- a/src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx
+++ b/src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx
@@ -262,16 +262,19 @@ function StrukturOrganisasiPPID() {
  }

  const posisiMap = new Map<string, any>()
-  for (const pegawai of stateOrganisasi.findMany.data) {
-    const posisiId = pegawai.posisi.id
+
+  const aktifPegawai = stateOrganisasi.findMany.data.filter((p: any) => p.isActive);
+
+  for (const pegawai of aktifPegawai) {
+    const posisiId = pegawai.posisi.id;
    if (!posisiMap.has(posisiId)) {
      posisiMap.set(posisiId, {
        ...pegawai.posisi,
        pegawaiList: [],
        children: [],
-      })
+      });
    }
-    posisiMap.get(posisiId)!.pegawaiList.push(pegawai)
+    posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
  }

  const root: any[] = []
@@ -371,7 +374,7 @@ function nodeTemplate(node: any) {
          <Text size="xs" c="dimmed" mt={8} lineClamp={3}>
            {description || 'Belum ada deskripsi.'}
          </Text>
-          <Tooltip label="Lihat detail" withArrow position="bottom">
+          <Tooltip label="Kembali ke struktur organisasi" withArrow position="bottom">
            <Button
              variant="light"
              size="xs"
@@ -383,7 +386,7 @@ function nodeTemplate(node: any) {
                }
              }}
            >
-              Detail
+              Kembali
            </Button>
          </Tooltip>
        </Card>
--- a/src/app/darmasaba/(tambahan)/prestasi-desa/page.tsx
+++ b/src/app/darmasaba/(tambahan)/prestasi-desa/page.tsx
@@ -91,21 +91,17 @@ function Page() {
                  </Group>
                  <Box p={"lg"}>
                    <Text
+                      ta={"center"}
                      fw={"bold"}
                      c={"white"}
                      size={"1.8rem"}
                      style={{
-                        textAlign: "center",
-                        lineHeight: 1.4,
-                        minHeight: '5.4rem',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
                        wordBreak: "break-word", 
                        whiteSpace: "normal"
                      }}
-                      lineClamp={3}
+                      lineClamp={5}
                      dangerouslySetInnerHTML={{ __html: v.deskripsi }}
+                      truncate={'end'}
                    />
                  </Box>
                  <Group justify="center">
--- a/src/app/darmasaba/_com/main-page/prestasi/index.tsx
+++ b/src/app/darmasaba/_com/main-page/prestasi/index.tsx
@@ -102,6 +102,7 @@ function Prestasi() {
                    ta="center"
                    dangerouslySetInnerHTML={{ __html: v.deskripsi }}
                    style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                    lineClamp={5}
                  />
                  <Group justify="center">
                    <Button