wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Fix Tampilab DesaAntiKorupsi Landing Page Mobile

Browse Source
This commit is contained in:
nico
2025-09-20 03:49:20 +08:00
parent 068d8b1077
commit 8e25c91e85
15 changed files with 762 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/app/admin/(dashboard)/_state/inovasi/layanan-online-desa.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import ApiFetch from "@/lib/api-fetch";
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
@@ -54,19 +55,20 @@ const administrasiOnline = proxy({
},
findMany: {
data: null as Array<
Prisma.AdministrasiOnlineGetPayload<{
include: {
jenisLayanan: true;
};
}>
> | null,
Prisma.AdministrasiOnlineGetPayload<{
include: {
jenisLayanan: true;
};
}>
> | null,
page: 1,
totalPages: 1,
loading: false,
async load(page = 1, limit = 10) {
search: '',
async load(page = 1, limit = 10, search = '') {
administrasiOnline.findMany.loading = true;
administrasiOnline.findMany.page = page;
administrasiOnline.findMany.search = search;
try {
const res =
await ApiFetch.api.inovasi.layananonlinedesa.administrasionline[
@@ -75,6 +77,7 @@ const administrasiOnline = proxy({
query: {
page,
limit,
search,
},
});
@@ -91,10 +94,10 @@ const administrasiOnline = proxy({
},
findUnique: {
data: null as Prisma.AdministrasiOnlineGetPayload<{
include: {
jenisLayanan: true;
};
}> | null,
include: {
jenisLayanan: true;
};
}> | null,
async load(id: string) {
try {
const res = await fetch(
@@ -199,13 +202,37 @@ const jenisLayanan = proxy({
nama: string;
deskripsi: string;
}> | null,
async load() {
const res =
await ApiFetch.api.inovasi.layananonlinedesa.administrasionline.jenislayanan[
page: 1,
totalPages: 1,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
jenisLayanan.findMany.loading = true; // ✅ Akses langsung via nama path
jenisLayanan.findMany.page = page;
jenisLayanan.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.inovasi.layananonlinedesa.administrasionline.jenislayanan[
"find-many"
].get();
if (res.status === 200) {
jenisLayanan.findMany.data = res.data?.data ?? [];
].get({ query });
if (res.status === 200 && res.data?.success) {
jenisLayanan.findMany.data = res.data.data ?? [];
jenisLayanan.findMany.totalPages =
res.data.totalPages ?? 1;
} else {
jenisLayanan.findMany.data = [];
jenisLayanan.findMany.totalPages = 1;
}
} catch (err) {
console.error("Gagal fetch jenis layanan paginated:", err);
jenisLayanan.findMany.data = [];
jenisLayanan.findMany.totalPages = 1;
} finally {
jenisLayanan.findMany.loading = false;
}
},
},
@@ -403,7 +430,9 @@ const templatePengaduanMasyarakatForm = z.object({
nik: z.string().min(1, "NIK minimal 1 karakter"),
judulPengaduan: z.string().min(1, "Judul pengaduan minimal 1 karakter"),
lokasiKejadian: z.string().min(1, "Lokasi kejadian minimal 1 karakter"),
deskripsiPengaduan: z.string().min(1, "Deskripsi pengaduan minimal 1 karakter"),
deskripsiPengaduan: z
.string()
.min(1, "Deskripsi pengaduan minimal 1 karakter"),
jenisPengaduanId: z.string().min(1, "Jenis pengaduan minimal 1 karakter"),
imageId: z.string().min(1, "Image minimal 1 karakter"),
});
@@ -455,13 +484,13 @@ const pengaduanMasyarakat = proxy({
},
findMany: {
data: null as Array<
Prisma.PengaduanMasyarakatGetPayload<{
include: {
jenisPengaduan: true;
image: true;
};
}>
> | null,
Prisma.PengaduanMasyarakatGetPayload<{
include: {
jenisPengaduan: true;
image: true;
};
}>
> | null,
page: 1,
totalPages: 1,
loading: false,
@@ -493,11 +522,11 @@ const pengaduanMasyarakat = proxy({
},
findUnique: {
data: null as Prisma.PengaduanMasyarakatGetPayload<{
include: {
jenisPengaduan: true;
image: true;
};
}> | null,
include: {
jenisPengaduan: true;
image: true;
};
}> | null,
async load(id: string) {
try {
const res = await fetch(
@@ -507,7 +536,10 @@ const pengaduanMasyarakat = proxy({
const data = await res.json();
pengaduanMasyarakat.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch pengaduan masyarakat:", res.statusText);
console.error(
"Failed to fetch pengaduan masyarakat:",
res.statusText
);
pengaduanMasyarakat.findUnique.data = null;
}
} catch (error) {
@@ -542,7 +574,9 @@ const pengaduanMasyarakat = proxy({
);
await pengaduanMasyarakat.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus pengaduan masyarakat");
toast.error(
result?.message || "Gagal menghapus pengaduan masyarakat"
);
}
} catch (error) {
console.error("Gagal delete:", error);
@@ -567,7 +601,9 @@ const jenisPengaduan = proxy({
form: { ...defaultJenisPengaduanForm },
loading: false,
async create() {
const cek = templateJenisPengaduanForm.safeParse(jenisPengaduan.create.form);
const cek = templateJenisPengaduanForm.safeParse(
jenisPengaduan.create.form
);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
@@ -693,7 +729,7 @@ const jenisPengaduan = proxy({
const data = result.data;
this.id = data.id;
this.form = {
nama: data.nama
nama: data.nama,
};
return data;
} else {
@@ -709,7 +745,9 @@ const jenisPengaduan = proxy({
},
async update() {
const cek = templateJenisPengaduanForm.safeParse(jenisPengaduan.edit.form);
const cek = templateJenisPengaduanForm.safeParse(
jenisPengaduan.edit.form
);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
@@ -759,7 +797,9 @@ const jenisPengaduan = proxy({
await jenisPengaduan.findMany.load(); // refresh list
return true;
} else {
throw new Error(result.message || "Gagal mengupdate jenis pengaduan");
throw new Error(
result.message || "Gagal mengupdate jenis pengaduan"
);
}
} catch (error) {
// If JSON parsing fails, try to get the response text for better error messages
@@ -792,7 +832,6 @@ const jenisPengaduan = proxy({
},
});
const layananonlineDesa = proxy({
administrasiOnline,
jenisLayanan,

194
src/app/admin/(dashboard)/inovasi/layanan-online-desa/_lib/layoutTabs.tsx
View File

@@ -1,72 +1,148 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import {
ScrollArea,
Stack,
Tabs,
TabsList,
TabsPanel,
TabsTab,
Title,
Tooltip
} from '@mantine/core';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import {
IconFileText,
IconListDetails,
IconMessage,
IconAlertCircle
} from '@tabler/icons-react';
function LayoutTabsLayananOnlineDesa({ children }: { children: React.ReactNode }) {
const router = useRouter()
const pathname = usePathname()
const tabs = [
{
label: "Administrasi Online",
value: "administrasionline",
href: "/admin/inovasi/layanan-online-desa/administrasi-online"
},
{
label: "Jenis Layanan",
value: "jenislayanan",
href: "/admin/inovasi/layanan-online-desa/jenis-layanan"
},
{
label: "Pengaduan Masyarakat",
value: "pengaduanmasyarakat",
href: "/admin/inovasi/layanan-online-desa/pengaduan-masyarakat"
},
{
label: "Jenis Pengaduan",
value: "jenispengaduan",
href: "/admin/inovasi/layanan-online-desa/jenis-pengaduan"
}
];
const curentTab = tabs.find(tab => tab.href === pathname)
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
const router = useRouter();
const pathname = usePathname();
const handleTabChange = (value: string | null) => {
const tab = tabs.find(t => t.value === value)
if (tab) {
router.push(tab.href)
}
setActiveTab(value)
// ✅ Tambahin icon + tooltip biar konsisten sama versi berita
const tabs = [
{
label: "Administrasi Online",
value: "administrasionline",
href: "/admin/inovasi/layanan-online-desa/administrasi-online",
icon: <IconFileText size={18} stroke={1.8} />,
tooltip: "Kelola administrasi online desa"
},
{
label: "Jenis Layanan",
value: "jenislayanan",
href: "/admin/inovasi/layanan-online-desa/jenis-layanan",
icon: <IconListDetails size={18} stroke={1.8} />,
tooltip: "Daftar jenis layanan desa"
},
{
label: "Pengaduan Masyarakat",
value: "pengaduanmasyarakat",
href: "/admin/inovasi/layanan-online-desa/pengaduan-masyarakat",
icon: <IconMessage size={18} stroke={1.8} />,
tooltip: "Laporan pengaduan masyarakat"
},
{
label: "Jenis Pengaduan",
value: "jenispengaduan",
href: "/admin/inovasi/layanan-online-desa/jenis-pengaduan",
icon: <IconAlertCircle size={18} stroke={1.8} />,
tooltip: "Kategori/jenis pengaduan masyarakat"
}
];
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname)
if (match) {
setActiveTab(match.value)
}
}, [pathname])
const currentTab = tabs.find(tab => tab.href === pathname);
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
return (
<Stack>
<Title order={3}>Layanan Online Desa</Title>
<Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
<TabsList p={"xs"} bg={"#BBC8E7FF"}>
{tabs.map((e, i) => (
<TabsTab key={i} value={e.value}>{e.label}</TabsTab>
))}
</TabsList>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value}>
{/* Konten dummy, bisa diganti tergantung routing */}
<></>
</TabsPanel>
))}
</Tabs>
{children}
</Stack>
);
const handleTabChange = (value: string | null) => {
const tab = tabs.find(t => t.value === value);
if (tab) {
router.push(tab.href);
}
setActiveTab(value);
};
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname);
if (match) {
setActiveTab(match.value);
}
}, [pathname]);
return (
<Stack gap="lg">
<Title order={3} fw={700} style={{ color: "#1A1B1E" }}>
Layanan Online Desa
</Title>
<Tabs
color={colors['blue-button']}
variant="pills"
value={activeTab}
onChange={handleTabChange}
radius="lg"
keepMounted={false}
>
{/* ✅ Scroll horizontal biar gak overflow */}
<ScrollArea type="auto" offsetScrollbars>
<TabsList
p="sm"
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
paddingInline: "0.5rem",
}}
>
{tabs.map((tab, i) => (
<Tooltip
key={i}
label={tab.tooltip}
position="bottom"
withArrow
transitionProps={{ transition: 'pop', duration: 200 }}
>
<TabsTab
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
>
{tab.label}
</TabsTab>
</Tooltip>
))}
</TabsList>
</ScrollArea>
{tabs.map((tab, i) => (
<TabsPanel
key={i}
value={tab.value}
style={{
padding: "1.5rem",
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
borderRadius: "1rem",
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
}}
>
<>{children}</>
</TabsPanel>
))}
</Tabs>
</Stack>
);
}
export default LayoutTabsLayananOnlineDesa;
export default LayoutTabsLayananOnlineDesa;

149
src/app/admin/(dashboard)/inovasi/layanan-online-desa/administrasi-online/[id]/page.tsx
View File

@@ -1,92 +1,111 @@
'use client'
import { useProxy } from 'valtio/utils';
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import layananonlineDesa from '@/app/admin/(dashboard)/_state/inovasi/layanan-online-desa';
import colors from '@/con/colors';
function DetailAdministrasiOnline() {
const beritaState = useProxy(layananonlineDesa)
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const params = useParams()
const router = useRouter()
const stateAdminOnline = useProxy(layananonlineDesa.administrasiOnline);
const [modalHapus, setModalHapus] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
const params = useParams();
const router = useRouter();
useShallowEffect(() => {
beritaState.administrasiOnline.findUnique.load(params?.id as string)
}, [])
stateAdminOnline.findUnique.load(params?.id as string);
}, []);
const handleHapus = () => {
if (selectedId) {
beritaState.administrasiOnline.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/inovasi/layanan-online-desa/administrasi-online")
stateAdminOnline.delete.byId(selectedId);
setModalHapus(false);
setSelectedId(null);
router.push("/admin/inovasi/layanan-online-desa/administrasi-online");
}
}
};
if (!beritaState.administrasiOnline.findUnique.data) {
if (!stateAdminOnline.findUnique.data) {
return (
<Stack py={10}>
<Skeleton h={40} />
<Skeleton height={500} radius="md" />
</Stack>
)
);
}
const data = stateAdminOnline.findUnique.data;
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
<Box py={10}>
<Group justify='space-between' align='center' w={{ base: "100%", md: "50%" }} mb={10}>
{/* Tombol Kembali */}
<Button
variant="subtle"
onClick={() => router.back()}
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
>
Kembali
</Button>
</Box>
<Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
<Stack>
<Flex gap={"xs"} justify={"space-between"} mt={10}>
<Text fz={"xl"} fw={"bold"}>Detail Administrasi Online</Text>
<Button
onClick={() => {
if (beritaState.administrasiOnline.findUnique.data) {
setSelectedId(beritaState.administrasiOnline.findUnique.data.id);
setModalHapus(true);
}
}}
disabled={beritaState.administrasiOnline.delete.loading || !beritaState.administrasiOnline.findUnique.data}
color={"red"}
>
<IconTrash size={20} />
</Button>
</Flex>
{beritaState.administrasiOnline.findUnique.data ? (
<Paper key={beritaState.administrasiOnline.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fw={"bold"} fz={"lg"}>Nama</Text>
<Text fz={"lg"}>{beritaState.administrasiOnline.findUnique.data?.name}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Alamat</Text>
<Text fz={"lg"}>{beritaState.administrasiOnline.findUnique.data?.alamat}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Nomor Telepon</Text>
<Text fz={"lg"} >{beritaState.administrasiOnline.findUnique.data?.nomorTelepon}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Jenis Layanan</Text>
<Text fz={"lg"} >{beritaState.administrasiOnline.findUnique.data?.jenisLayanan?.nama}</Text>
</Box>
</Stack>
</Paper>
) : null}
<Tooltip label="Hapus Data" withArrow position="top">
<Button
color="red"
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
variant="light"
radius="md"
size="md"
>
<IconTrash size={20} />
</Button>
</Tooltip>
</Group>
{/* Konten Detail */}
<Paper
withBorder
w={{ base: "100%", md: "50%" }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
>
<Stack gap="md">
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
Detail Administrasi Online
</Text>
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="sm">
<Box>
<Text fz="lg" fw="bold">Nama</Text>
<Text fz="md" c="dimmed">{data.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Alamat</Text>
<Text fz="md" c="dimmed">{data.alamat || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Nomor Telepon</Text>
<Text fz="md" c="dimmed">{data.nomorTelepon || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold">Jenis Layanan</Text>
<Text fz="md" c="dimmed">{data.jenisLayanan?.nama || '-'}</Text>
</Box>
</Stack>
</Paper>
</Stack>
</Paper>
@@ -95,10 +114,10 @@ function DetailAdministrasiOnline() {
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text='Apakah anda yakin ingin menghapus administrasi online ini?'
text="Apakah Anda yakin ingin menghapus administrasi online ini?"
/>
</Box>
);
}
export default DetailAdministrasiOnline;
export default DetailAdministrasiOnline;

161
src/app/admin/(dashboard)/inovasi/layanan-online-desa/administrasi-online/page.tsx
View File

@@ -1,9 +1,26 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
import {
Box,
Button,
Center,
Group,
Pagination,
Paper,
Skeleton,
Stack,
Table,
TableTbody,
TableTd,
TableTh,
TableThead,
TableTr,
Text,
Title,
Tooltip
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -15,8 +32,8 @@ function AdministrasiOnline() {
return (
<Box>
<HeaderSearch
title='Administrasi Online'
placeholder='pencarian'
title="Administrasi Online"
placeholder="Cari nama layanan, alamat, atau nomor telepon..."
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,69 +44,117 @@ function AdministrasiOnline() {
}
function ListAdministrasiOnline({ search }: { search: string }) {
const listState = useProxy(layananonlineDesa.administrasiOnline)
const state = useProxy(layananonlineDesa.administrasiOnline);
const router = useRouter();
const {
data,
page,
totalPages,
loading,
load,
} = listState.findMany;
const { data, page, totalPages, loading, load } = state.findMany;
useShallowEffect(() => {
load(page, 10);
}, [page]);
load(page, 10, search);
}, [page, search]);
const filteredData = (data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.name.toLowerCase().includes(keyword) ||
item.alamat.toLowerCase().includes(keyword) ||
item.nomorTelepon.toLowerCase().includes(keyword)
);
});
const filteredData = data || [];
if (loading || !data) {
return <Skeleton h={500} />;
return (
<Stack py={10}>
<Skeleton height={600} radius="md" />
</Stack>
);
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<Title order={3} mb={10}>List Administrasi Online</Title>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>
<TableTh>Nama Layanan</TableTh>
<TableTh>Alamat</TableTh>
<TableTh>Nomor Telepon</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody style={{ overflowX: "auto" }}>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.name}</TableTd>
<TableTd>{item.alamat}</TableTd>
<TableTd>{item.nomorTelepon}</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin//inovasi/layanan-online-desa/administrasi-online/${item.id}`)}>
<IconDeviceImac size={20} />
</Button>
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Administrasi Online</Title>
<Tooltip label="Tambah Layanan Baru" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() =>
router.push('/admin/inovasi/layanan-online-desa/administrasi-online/create')
}
>
Tambah Baru
</Button>
</Tooltip>
</Group>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover>
<TableThead>
<TableTr>
<TableTh style={{ width: '25%' }}>Nama Layanan</TableTh>
<TableTh style={{ width: '25%' }}>Alamat</TableTh>
<TableTh style={{ width: '20%' }}>Nomor Telepon</TableTh>
<TableTh style={{ width: '15%' }}>Aksi</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fw={500} truncate="end" lineClamp={1}>
{item.name}
</Text>
</TableTd>
<TableTd>
<Text fz="sm" c="dimmed" lineClamp={1}>
{item.alamat}
</Text>
</TableTd>
<TableTd>
<Text fz="sm" c="dimmed" lineClamp={1}>
{item.nomorTelepon || '-'}
</Text>
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImac size={16} />}
onClick={() =>
router.push(
`/admin/inovasi/layanan-online-desa/administrasi-online/${item.id}`
)
}
>
Detail
</Button>
</TableTd>
</TableTr>
))
) : (
<TableTr>
<TableTd colSpan={4}>
<Center py={20}>
<Text color="dimmed">Tidak ada data administrasi online yang cocok</Text>
</Center>
</TableTd>
</TableTr>
))}
)}
</TableTbody>
</Table>
</Table>
</Box>
</Paper>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)} // ini penting!
onChange={(newPage) => {
load(newPage, 10, search);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
</Box>

166
src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-layanan/page.tsx
View File

@@ -1,23 +1,39 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
import {
Box,
Button,
Center,
Group,
Pagination,
Paper,
Skeleton,
Stack,
Table,
TableTbody,
TableTd,
TableTh,
TableThead,
TableTr,
Text,
Title,
Tooltip
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import JudulList from '../../../_com/judulList';
import layananonlineDesa from '../../../_state/inovasi/layanan-online-desa';
function JenisLayanan() {
const [search, setSearch] = useState("")
const [search, setSearch] = useState("");
return (
<Box>
<HeaderSearch
title='Jenis Layanan'
placeholder='pencarian'
title="Jenis Layanan"
placeholder="Cari jenis layanan..."
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
@@ -28,59 +44,115 @@ function JenisLayanan() {
}
function ListJenisLayanan({ search }: { search: string }) {
const stateList = useProxy(layananonlineDesa.jenisLayanan)
const router = useRouter()
const stateList = useProxy(layananonlineDesa.jenisLayanan);
const router = useRouter();
const { data, page, totalPages, loading, load } = stateList.findMany;
useShallowEffect(() => {
stateList.findMany.load()
}, [])
load(page, 10, search);
}, [page, search]);
const filteredData = data || [];
const filteredData = (stateList.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.nama.toLowerCase().includes(keyword)
);
});
if (!stateList.findMany.data) {
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton h={500} />
<Skeleton height={600} radius="md" />
</Stack>
)
);
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<JudulList
title='List Jenis Layanan'
href='/admin/inovasi/layanan-online-desa/jenis-layanan/create'
/>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>
<TableTh>Nama Jenis Layanan</TableTh>
<TableTh>Deskripsi</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.nama}</TableTd>
<TableTd>{item.deskripsi}</TableTd>
<TableTd>
<Button color="green" onClick={() => router.push(`/admin/inovasi/layanan-online-desa/jenis-layanan/${item.id}`)}>
<IconDeviceImac size={20} />
</Button>
</TableTd>
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Jenis Layanan</Title>
<Tooltip label="Tambah Jenis Layanan" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() =>
router.push(
'/admin/inovasi/layanan-online-desa/jenis-layanan/create'
)
}
>
Tambah Baru
</Button>
</Tooltip>
</Group>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover>
<TableThead>
<TableTr>
<TableTh style={{ width: '30%' }}>Nama Jenis Layanan</TableTh>
<TableTh style={{ width: '40%' }}>Deskripsi</TableTh>
<TableTh style={{ width: '15%' }}>Aksi</TableTh>
</TableTr>
))}
</TableTbody>
</Table>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd style={{ width: '30%' }}>
<Text fw={500} truncate="end" lineClamp={1}>
{item.nama}
</Text>
</TableTd>
<TableTd style={{ width: '40%' }}>
<Text fz="sm" c="dimmed" lineClamp={2}>
{item.deskripsi || '-'}
</Text>
</TableTd>
<TableTd style={{ width: '15%' }}>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImac size={16} />}
onClick={() =>
router.push(
`/admin/inovasi/layanan-online-desa/jenis-layanan/${item.id}`
)
}
>
Detail
</Button>
</TableTd>
</TableTr>
))
) : (
<TableTr>
<TableTd colSpan={3}>
<Center py={20}>
<Text color="dimmed">
Tidak ada jenis layanan yang cocok
</Text>
</Center>
</TableTd>
</TableTr>
)}
</TableTbody>
</Table>
</Box>
</Paper>
<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>
);
}

61
src/app/admin/layout.tsx
View File

@@ -39,8 +39,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
suppressHydrationWarning
header={{ height: 64 }}
navbar={{
width: 300,
breakpoint: "sm",
width: { base: 260, sm: 280, lg: 300 },
breakpoint: 'sm',
collapsed: {
mobile: !opened,
desktop: !desktopOpened,
@@ -52,23 +52,29 @@ export default function Layout({ children }: { children: React.ReactNode }) {
style={{
background: "linear-gradient(90deg, #ffffff, #f9fbff)",
borderBottom: `1px solid ${colors["blue-button"]}20`,
padding: '0 16px',
}}
px={{ base: 'sm', sm: 'md' }}
py={{ base: 'xs', sm: 'sm' }}
>
<Group px="md" h="100%" justify="space-between">
<Group w="100%" h="100%" justify="space-between" wrap="nowrap">
<Flex align="center" gap="sm">
<Image
src="/assets/images/darmasaba-icon.png"
alt="Logo Darmasaba"
width={46}
height={46}
w={{ base: 32, sm: 40 }}
h={{ base: 32, sm: 40 }}
radius="md"
loading="lazy"
style={{
minWidth: '32px',
height: 'auto',
}}
/>
<Text
fw={700}
c={colors["blue-button"]}
fz="lg"
style={{ letterSpacing: rem(0.3) }}
fz={{ base: 'md', sm: 'xl' }}
>
Admin Darmasaba
</Text>
@@ -93,8 +99,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
opened={opened}
onClick={toggle}
hiddenFrom="sm"
size="sm"
size="md"
color={colors["blue-button"]}
mr="xs"
/>
<Tooltip label="Kembali ke Website Desa" position="bottom" withArrow>
@@ -108,7 +115,18 @@ export default function Layout({ children }: { children: React.ReactNode }) {
variant="gradient"
gradient={{ from: colors["blue-button"], to: "#228be6" }}
>
<Image src="/assets/images/darmasaba-icon.png" alt="Logo Darmasaba" w={25} h={25} radius="md" loading="lazy" />
<Image
src="/assets/images/darmasaba-icon.png"
alt="Logo Darmasaba"
w={20}
h={20}
radius="md"
loading="lazy"
style={{
minWidth: '20px',
height: 'auto',
}}
/>
</ActionIcon>
</Tooltip>
<Tooltip label="Keluar" position="bottom" withArrow>
@@ -135,6 +153,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
background: "#ffffff",
borderRight: `1px solid ${colors["blue-button"]}20`,
}}
p={{ base: 'xs', sm: 'sm' }}
>
<AppShell.Section p="sm">
{navBar.map((v, k) => {
@@ -155,6 +174,13 @@ export default function Layout({ children }: { children: React.ReactNode }) {
marginBottom: rem(4),
transition: "background 150ms ease",
}}
styles={{
root: {
'&:hover': {
backgroundColor: 'rgba(25, 113, 194, 0.05)',
},
},
}}
variant="light"
active={isParentActive}
>
@@ -173,10 +199,19 @@ export default function Layout({ children }: { children: React.ReactNode }) {
{child.name}
</Text>
}
style={{
borderRadius: rem(8),
marginBottom: rem(2),
transition: "background 150ms ease",
styles={{
root: {
borderRadius: rem(8),
marginBottom: rem(2),
transition: 'background 150ms ease',
padding: '6px 12px',
'&:hover': {
backgroundColor: isChildActive ? 'rgba(25, 113, 194, 0.15)' : 'rgba(25, 113, 194, 0.05)',
},
...(isChildActive && {
backgroundColor: 'rgba(25, 113, 194, 0.1)',
}),
},
}}
active={isChildActive}
component={Link}

14
src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/administrasi-online/findMany.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
// /api/berita/findManyPaginated.ts
import prisma from "@/lib/prisma";
import { Context } from "elysia";
@@ -5,8 +6,20 @@ import { Context } from "elysia";
async function administrasiOnlineFindMany(context: Context) {
const page = Number(context.query.page) || 1;
const limit = Number(context.query.limit) || 10;
const search = (context.query.search as string) || '';
const skip = (page - 1) * limit;
// Buat where clause
const where: any = { isActive: true };
// Tambahkan pencarian (jika ada)
if (search) {
where.OR = [
{ name: { contains: search, mode: 'insensitive' } },
{ alamat: { contains: search, mode: 'insensitive' } },
];
}
try {
const [data, total] = await Promise.all([
prisma.administrasiOnline.findMany({
@@ -28,6 +41,7 @@ async function administrasiOnlineFindMany(context: Context) {
message: "Success fetch administrasi online with pagination",
data,
page,
limit,
totalPages: Math.ceil(total / limit),
total,
};

45
src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/administrasi-online/jenis-layanan/findMany.ts
View File

@@ -1,9 +1,37 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function jenisLayananFindMany() {
const data = await prisma.jenisLayanan.findMany();
return {
export default async function jenisLayananFindMany(context: Context) {
// Ambil parameter dari query
const page = Number(context.query.page) || 1;
const limit = Number(context.query.limit) || 10;
const search = (context.query.search as string) || '';
const skip = (page - 1) * limit;
// Buat where clause
const where: any = { isActive: true };
// Tambahkan pencarian (jika ada)
if (search) {
where.OR = [
{ nama: { contains: search, mode: 'insensitive' } },
{ deskripsi: { contains: search, mode: 'insensitive' } },
];
}
try {
const [data, total] = await Promise.all([
prisma.jenisLayanan.findMany({
where,
skip,
take: limit,
orderBy: { createdAt: 'desc' },
}),
prisma.jenisLayanan.count({ where }),
]);
return {
success: true,
data: data.map((item: any) => {
return {
@@ -12,5 +40,16 @@ export default async function jenisLayananFindMany() {
deskripsi: item.deskripsi,
}
}),
page,
limit,
total,
totalPages: Math.ceil(total / limit),
};
} catch (e) {
console.error("Error di findMany paginated:", e);
return {
success: false,
message: "Gagal mengambil data jenis layanan",
};
}
}

101
src/app/coba/page.tsx
View File

@@ -1,63 +1,58 @@
import colors from '@/con/colors';
import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
import { Stack, Box, Container, Text, Image, ListItem, List } from '@mantine/core';
import React from 'react';
import BackButton from '../darmasaba/(pages)/desa/layanan/_com/BackButto';
function Page() {
return (
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
<Container w={{ base: "100%", md: "50%" }} >
<Box pb={20}>
<Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
IKM Berbasis Pengolahan Pangan
</Text>
<Text
ta={"center"}
fw={"bold"}
fz={"1.4rem"}
>
Informasi dan Pelayanan Administrasi Digital
</Text>
</Box>
<Image src="/api/img/ikm.png" alt='' w={"100%"} loading="lazy"/>
</Container>
<Box px={{ base: "md", md: 100 }}>
<Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
Desa Darmasaba, yang terletak di Kecamatan Abiansemal, Kabupaten Badung, memiliki potensi besar dalam Industri Kecil dan Menengah (IKM) berbasis pengolahan pangan. Dengan sumber daya alam yang melimpah dan warisan kuliner khas Bali, Darmasaba dapat mengembangkan sektor ini untuk meningkatkan kesejahteraan masyarakat dan menciptakan lapangan kerja baru.
</Text>
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
Potensi dan Peran IKM Berbasis Pengolahan Pangan:
</Text>
<List py={20} type='ordered'>
<ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
<Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Produk Unggulan Pengolahan Pangan</Text>
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Beberapa produk olahan pangan yang potensial dikembangkan di Darmasaba meliputi:</Text>
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Keripik dan Snack Tradisional : Seperti keripik pisang, keripik singkong, dan rengginang.</Text>
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Sambal Khas Bali : Seperti sambal matah dan sambal embe yang banyak diminati pasar lokal dan nasional.</Text>
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Minuman Herbal dan Jamu : Berbasis rempah seperti kunyit asam, beras kencur, dan wedang jahe.</Text>
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Olahan Makanan Berbasis Kelapa : Seperti virgin coconut oil (VCO), serundeng, dan gula aren.</Text>
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Kue Tradisional Bali : Seperti jaje laklak, jaje uli, dan klepon yang dapat dikemas secara modern.</Text>
</ListItem>
<ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
<Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Peluang Ekonomi dan Pemberdayaan UMKM:</Text>IKM berbasis pengolahan pangan dapat membuka peluang bagi masyarakat, terutama ibu rumah tangga dan pemuda desa, untuk berwirausaha. Dengan dukungan modal dan pelatihan dari pemerintah desa atau BUMDes Pudak Mesari, usaha kecil ini dapat berkembang menjadi industri yang lebih besar.
</ListItem>
<ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
<Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Digitalisasi dan Pemasaran Online:</Text>Darmasaba dapat mengembangkan kawasan sentra IKM sebagai pusat produksi, pelatihan, dan pemasaran produk olahan pangan. Dengan adanya fasilitas ini, para pelaku usaha dapat lebih mudah berkolaborasi, meningkatkan kualitas produk, serta mendapatkan akses ke permodalan dan distribusi yang lebih luas.
</ListItem>
<ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
<Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Kawasan Sentra IKM:</Text>Dengan berkembangnya sektor kuliner, banyak pelaku UMKM di Darmasaba mulai merintis usaha makanan, baik dalam bentuk warung makan, katering, hingga produksi makanan ringan seperti keripik, sambal, dan minuman tradisional. Potensi ini dapat terus dikembangkan dengan dukungan pemerintah desa dan promosi melalui media sosial.
</ListItem>
<ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
<Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Sinergi dengan Pariwisata dan Agrowisata:</Text>Dengan berkembangnya sektor wisata di Darmasaba, produk olahan pangan dapat dijadikan suvenir khas desa. Pengunjung dapat membeli oleh-oleh seperti sambal kemasan, jajanan khas, atau minuman herbal sebagai bagian dari pengalaman wisata mereka.
</ListItem>
</List>
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
IKM berbasis pengolahan pangan memiliki potensi besar untuk menjadi sektor unggulan di Desa Darmasaba. Dengan inovasi, dukungan teknologi, serta pemasaran yang baik, produk-produk lokal dapat bersaing di pasar yang lebih luas, meningkatkan kesejahteraan masyarakat, dan menjadikan Darmasaba sebagai pusat industri pangan kreatif di Kabupaten Badung.
</Text>
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
<Container w={{ base: "100%", md: "50%" }} >
<Box pb={20}>
<Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
Taman Beji Cengana
</Text>
<Text
ta={"center"}
fw={"bold"}
fz={"1.5rem"}
>
Informasi dan Pelayanan Administrasi Digital
</Text>
</Box>
<Image src="/api/img/taman-beji.jpg" alt='' w={"100%"} h={400} />
</Container>
<Box px={{ base: "md", md: 100 }}>
<Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
Taman Beji Cengana, terletak di Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung, Bali, adalah situs suci yang memiliki nilai spiritual dan sejarah yang tinggi. Tempat ini dikenal sebagai lokasi untuk ritual pembersihan diri (melukat) dan peribadatan oleh umat Hindu Bali. Keberadaan mata air suci (Tirta Klebutan) di Taman Beji Cengana dipercaya memberikan berkah dan penyucian bagi mereka yang datang untuk berdoa dan melakukan ritual.
</Text>
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
Potensi Desa melalui Taman Beji Cengana:
</Text>
<List py={20} type='ordered'>
<ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
<Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Pariwisata Spiritual:</Text> Taman Beji Cengana memiliki potensi besar sebagai destinasi wisata spiritual. Wisatawan yang mencari pengalaman spiritual dan ketenangan batin dapat tertarik untuk mengunjungi tempat ini, mengikuti ritual melukat, dan merasakan suasana sakral yang ditawarkan.
</ListItem>
<ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
<Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pelestarian Budaya dan Tradisi:</Text>Dengan mempromosikan Taman Beji Cengana sebagai pusat kegiatan budaya dan ritual tradisional, desa dapat memastikan bahwa warisan budaya dan tradisi lokal tetap lestari.
</ListItem>
<ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
<Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pendidikan dan Penelitian:</Text>Taman Beji Cengana dapat dijadikan sebagai pusat pendidikan dan penelitian bagi akademisi, peneliti, dan pelajar yang tertarik mempelajari budaya, agama, dan sejarah Bali.
</ListItem>
<ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
<Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Ekonomi Kreatif:</Text>Dengan meningkatnya jumlah pengunjung ke Taman Beji Cengana, peluang bagi pengembangan ekonomi kreatif juga terbuka lebar. Masyarakat lokal dapat mengembangkan produk kerajinan tangan, kuliner khas, dan suvenir yang mencerminkan budaya dan tradisi desa.
</ListItem>
<ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
<Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Konservasi Lingkungan:</Text>Sebagai situs suci dengan mata air alami, Taman Beji Cengana memiliki peran penting dalam konservasi lingkungan. Upaya menjaga kebersihan dan kelestarian mata air serta lingkungan sekitarnya dapat menjadi contoh praktik konservasi yang baik.
</ListItem>
</List>
<Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
Dengan memanfaatkan potensi yang dimiliki Taman Beji Cengana, Desa Darmasaba dapat mengembangkan sektor pariwisata, budaya, pendidikan, ekonomi, dan lingkungan secara berkelanjutan, yang pada gilirannya akan meningkatkan kesejahteraan masyarakat dan pelestarian warisan budaya.
</Text>
</Box>
</Stack>
);
}
);
}
export default Page;

2
src/app/darmasaba/(pages)/desa/berita/[kategori]/[id]/page.tsx
View File

@@ -6,7 +6,6 @@ import { Box, Center, Container, Image, Skeleton, Stack, Text } from '@mantine/c
import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import BackButton from '../../../layanan/_com/BackButto';
@@ -50,7 +49,6 @@ function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
<Container w={{ base: "100%", md: "50%" }} >
<Box pb={20}>
<Text ta={"center"} fz={"2.4rem"} c={colors["blue-button"]} fw={"bold"}>

42
src/app/darmasaba/(pages)/desa/berita/_lib/layoutTabs.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import colors from '@/con/colors';
import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
import { Box, Container, Grid, GridCol, ScrollArea, 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';
@@ -22,15 +22,15 @@ function LayoutTabsBerita({
const router = useRouter();
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(() => {
@@ -50,28 +50,28 @@ function LayoutTabsBerita({
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
setSearchValue(value);
// Clear previous timeout
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');
}
// 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
setSearchTimeout(newTimeout);
};
const tabs = [
@@ -147,17 +147,19 @@ function LayoutTabsBerita({
<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, index) => (
<TabsTab
key={index}
value={tab.value}
onClick={() => router.push(tab.href)}
>
{tab.label}
</TabsTab>
))}
</TabsList>
<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

6
src/app/darmasaba/_com/main-page/apbdes/index.tsx
View File

@@ -35,12 +35,12 @@ function Apbdes() {
return (
<Stack p="lg" gap="4rem" bg={colors.Bg}>
<Box w={{ base: '100%', sm: '70%' }}>
<Box>
<Stack gap="sm">
<Text fz={{ base: '2.4rem', sm: '4rem' }} fw="bold" lh={1.2}>
<Text ta={"center"} fz={{ base: '2.4rem', sm: '4rem' }} fw="bold" lh={1.2}>
{textHeading.title}
</Text>
<Text fz={{ base: '1rem', sm: '1.3rem' }} c="dimmed">
<Text ta={"center"} fz={{ base: '1rem', sm: '1.3rem' }} c="dimmed">
{textHeading.des}
</Text>
</Stack>

99
src/app/darmasaba/_com/main-page/desaantikorupsi/index.tsx
View File

@@ -1,19 +1,17 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import korupsiState from "@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi";
import colors from "@/con/colors";
import { Box, Button, Center, Container, Flex, Paper, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
import { Button, Center, Container, Flex, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
import { IconClipboardText } from "@tabler/icons-react";
import Link from "next/link";
import korupsiState from "@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi";
import { useProxy } from "valtio/utils";
import { useEffect, useState } from "react";
import { useProxy } from "valtio/utils";
function DesaAntiKorupsi() {
const state = useProxy(korupsiState);
const [loading, setLoading] = useState(false);
const theme = useMantineTheme();
const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
useEffect(() => {
const loadData = async () => {
@@ -31,7 +29,7 @@ function DesaAntiKorupsi() {
const data = (state.desaAntikorupsi.findMany.data || []).slice(0, 6);
return (
<Stack gap={"0"} bg={colors.Bg} p={"sm"} h={mobile ? 2000 : 1050}>
<Stack gap={"0"} bg={colors.Bg} p={"sm"}>
<Container w={{ base: "100%", md: "80%" }} p={"xl"} >
<Center>
<Text fz={{ base: "2.4rem", md: "3.4rem" }}>Desa Anti Korupsi</Text>
@@ -41,51 +39,60 @@ function DesaAntiKorupsi() {
<Button radius={"lg"} fz={"h4"} bg={colors["blue-button"]} component={Link} href={"/darmasaba/desa-anti-korupsi/detail"}>Selengkapnya</Button>
</Center>
</Container>
<SimpleGrid
cols={{
base: 1,
sm: 2,
}}>
<Container w="100%" maw="80rem" px="md">
{loading ? (
<Center>
<Text fz={"2.4rem"}>Memuat Data...</Text>
<Center mih={200}>
<Text fz="lg">Memuat Data...</Text>
</Center>
) : (
data.map((v, k) => {
return (
<Box
<SimpleGrid
cols={{ base: 1, sm: 2, md: 3 }}
spacing="lg"
mt="lg"
>
{data.map((v, k) => (
<Paper
key={k}
p="md"
withBorder
shadow="sm"
radius="md"
h="100%"
>
<Paper
p={"lg"}
withBorder
shadow="sm"
h={{ base: 250, md: 210 }}
>
<Flex gap={"lg"} align={"center"}>
<Box>
<Flex justify={"center"} align={"center"}>
<Box>
<IconClipboardText color={colors["blue-button"]} size={50} />
</Box>
<Box px={20} >
<Stack gap={"xs"}>
<Text fz={{ base: "1.2rem", md: "lg" }} ta={"center"} c={colors["blue-button"]} fw={500}>
{v.kategori?.name || v.name || 'Kategori'}
</Text>
<Text dangerouslySetInnerHTML={{ __html: v.name || 'Name' }} fz={{ base: "1rem", md: "lg" }} ta={"center"} c={colors["blue-button"]} fw={500} />
</Stack>
</Box>
</Flex>
</Box>
</Flex>
</Paper>
</Box>
)
})
<Flex gap="md" align="flex-start">
<IconClipboardText
color={colors["blue-button"]}
size={40}
style={{ flexShrink: 0 }} // biar icon nggak ketekan
/>
<Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
<Text
fz={{ base: "sm", sm: "md", md: "lg", lg: "xl" }} // lebih besar di desktop
c={colors["blue-button"]}
fw={600}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
>
{v.kategori?.name || "Kategori"}
</Text>
<Text
dangerouslySetInnerHTML={{
__html: v.name || "Name",
}}
fz={{ base: "sm", sm: "md", md: "lg", lg: "xl" }} // sama, scaling responsif
c="dark"
style={{
wordBreak: "break-word",
whiteSpace: "normal",
}}
/>
</Stack>
</Flex>
</Paper>
))}
</SimpleGrid>
)}
</SimpleGrid>
</Container>
</Stack>
);
}

2
src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx
View File

@@ -109,7 +109,7 @@ function ModuleView() {
<ScrollArea h={280} // ✅ tinggi fixed, bisa disesuaikan
scrollbarSize={8}
offsetScrollbars
type="auto"
type="never"
styles={{
viewport: { paddingRight: 8 }, // kasih jarak biar scroll nggak dempet
}}

6
src/app/darmasaba/_com/main-page/potensi/index.tsx
View File

@@ -49,11 +49,11 @@ function Potensi() {
return (
<Stack p="sm" gap="4rem">
<Box w={{ base: "100%", sm: "60%" }}>
<Text fz="4.4rem" fw={700} c={colors["blue-button"]}>
<Box>
<Text ta={"center"} fz={{ base: "2.4rem", md: "3.4rem" }} fw={700} c={colors["blue-button"]}>
{textHeading.title}
</Text>
<Text size="1.4rem" c="black">
<Text ta={"center"} fz={{ base: "1.4rem", md: "1.6rem" }} c="black">
{textHeading.des}
</Text>
</Box>