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

Merge pull request 'nico/17-des-25' (#43) from nico/17-des-25 into staggingweb

Browse Source 
Reviewed-on: http://wibugit.wibudev.com/wibu/desa-darmasaba/pulls/43
This commit is contained in:
nicoarya20
2025-12-17 17:39:29 +08:00
parent 44c421129e dc8793e3ae
commit 7a42bec63b
44 changed files with 2028 additions and 833 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik.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";
@@ -136,12 +137,43 @@ const statepermohonanInformasiPublik = proxy({
};
}>[]
| null,
async load() {
const res = await ApiFetch.api.ppid.permohonaninformasipublik[
"find-many"
].get();
if (res.status === 200) {
statepermohonanInformasiPublik.findMany.data = res.data?.data ?? [];
page: 1,
totalPages: 1,
total: 0,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
// Change to arrow function
statepermohonanInformasiPublik.findMany.loading = true; // Use the full path to access the property
statepermohonanInformasiPublik.findMany.page = page;
statepermohonanInformasiPublik.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.ppid.permohonaninformasipublik[
"find-many"
].get({
query,
});
if (res.status === 200 && res.data?.success) {
statepermohonanInformasiPublik.findMany.data = res.data.data || [];
statepermohonanInformasiPublik.findMany.total = res.data.total || 0;
statepermohonanInformasiPublik.findMany.totalPages = res.data.totalPages || 1;
} else {
console.error("Failed to load permohonan keberatan informasi:", res.data?.message);
statepermohonanInformasiPublik.findMany.data = [];
statepermohonanInformasiPublik.findMany.total = 0;
statepermohonanInformasiPublik.findMany.totalPages = 1;
}
} catch (error) {
console.error("Error loading permohonan keberatan informasi:", error);
statepermohonanInformasiPublik.findMany.data = [];
statepermohonanInformasiPublik.findMany.total = 0;
statepermohonanInformasiPublik.findMany.totalPages = 1;
} finally {
statepermohonanInformasiPublik.findMany.loading = false;
}
},
},

50
src/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi.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";
@@ -57,17 +58,48 @@ const permohonanKeberatanInformasi = proxy({
},
},
findMany: {
data: null as
data: null as
| null
| Prisma.FormulirPermohonanKeberatanGetPayload<{
omit: { isActive: true };
}>[]
| null,
async load() {
const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik[
"find-many"
].get();
if (res.status === 200) {
permohonanKeberatanInformasi.findMany.data = res.data?.data ?? [];
}>[],
page: 1,
totalPages: 1,
total: 0,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
// Change to arrow function
permohonanKeberatanInformasi.findMany.loading = true; // Use the full path to access the property
permohonanKeberatanInformasi.findMany.page = page;
permohonanKeberatanInformasi.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik[
"find-many"
].get({
query,
});
if (res.status === 200 && res.data?.success) {
permohonanKeberatanInformasi.findMany.data = res.data.data || [];
permohonanKeberatanInformasi.findMany.total = res.data.total || 0;
permohonanKeberatanInformasi.findMany.totalPages = res.data.totalPages || 1;
} else {
console.error("Failed to load permohonan keberatan informasi:", res.data?.message);
permohonanKeberatanInformasi.findMany.data = [];
permohonanKeberatanInformasi.findMany.total = 0;
permohonanKeberatanInformasi.findMany.totalPages = 1;
}
} catch (error) {
console.error("Error loading permohonan keberatan informasi:", error);
permohonanKeberatanInformasi.findMany.data = [];
permohonanKeberatanInformasi.findMany.total = 0;
permohonanKeberatanInformasi.findMany.totalPages = 1;
} finally {
permohonanKeberatanInformasi.findMany.loading = false;
}
},
},

4
src/app/admin/(dashboard)/desa/profil/profil-perbekel-dari-masa-ke-masa/[id]/page.tsx
View File

@@ -4,7 +4,7 @@ import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
import colors from '@/con/colors';
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -108,7 +108,7 @@ function DetailPerbekelDariMasa() {
radius="md"
size="md"
>
<IconX size={20} />
<IconTrash size={20} />
</Button>
<Button

4
src/app/admin/(dashboard)/landing-page/SDGs/[id]/page.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -106,7 +106,7 @@ function DetailSDGSDesa() {
size="md"
disabled={sdgsState.delete.loading}
>
<IconX size={20} />
<IconTrash size={20} />
</Button>
<Button

28
src/app/admin/(dashboard)/landing-page/SDGs/page.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -28,6 +28,8 @@ function SdgsDesa() {
function ListSdgsDesa({ search }: { search: string }) {
const listState = useProxy(sdgsDesa);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000);
const {
data,
@@ -38,8 +40,8 @@ function ListSdgsDesa({ search }: { search: string }) {
} = listState.findMany;
useShallowEffect(() => {
load(page, 10, search);
}, [page, search]);
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
const filteredData = data || [];
@@ -63,7 +65,7 @@ function ListSdgsDesa({ search }: { search: string }) {
</Title>
<Button
leftSection={<IconPlus size={18} />}
color={colors['blue-button']}
color='blue'
variant="light"
onClick={() => router.push('/admin/landing-page/SDGs/create')}
>
@@ -147,12 +149,18 @@ function ListSdgsDesa({ search }: { search: string }) {
{filteredData.map((item) => (
<Paper key={item.id} withBorder p="md" radius="md">
<Stack gap={4}>
<Text fz="sm" fw={600} lh={1.4}>
{item.name}
</Text>
<Text fz="xs" c="dark.6" lh={1.4}>
Jumlah: {item.jumlah || '0'}
</Text>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Nama SDGs Desa</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.name}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Jumlah</Text>
<Text fz="xs" c="dark.6" lh={1.4}>
{item.jumlah || '0'}
</Text>
</Box>
<Group justify="flex-end" mt="xs">
<Button
size="xs"

14
src/app/admin/(dashboard)/landing-page/apbdes/[id]/edit/page.tsx
View File

@@ -368,6 +368,13 @@ function EditAPBDes() {
{ value: '2', label: 'Level 2 (Sub-kelompok)' },
{ value: '3', label: 'Level 3 (Detail)' },
]}
styles={{
option: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}}
value={String(newItem.level)}
onChange={(val) => setNewItem({ ...newItem, level: Number(val) || 1 })}
/>
@@ -378,6 +385,13 @@ function EditAPBDes() {
{ value: 'belanja', label: 'Belanja' },
{ value: 'pembiayaan', label: 'Pembiayaan' },
]}
styles={{
option: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}}
value={newItem.tipe}
onChange={(val) => setNewItem({ ...newItem, tipe: (val as any) || 'pendapatan' })}
/>

14
src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx
View File

@@ -353,6 +353,13 @@ function CreateAPBDes() {
{ value: '2', label: 'Level 2 (Sub-kelompok)' },
{ value: '3', label: 'Level 3 (Detail)' },
]}
styles={{
option: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}}
value={String(newItem.level)}
onChange={(val) => setNewItem({ ...newItem, level: Number(val) || 1 })}
/>
@@ -363,6 +370,13 @@ function CreateAPBDes() {
{ value: 'belanja', label: 'Belanja' },
{ value: 'pembiayaan', label: 'Pembiayaan' },
]}
styles={{
option: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}}
value={newItem.level === 1 ? null : newItem.tipe}
onChange={(val) => setNewItem({ ...newItem, tipe: val as any })}
disabled={newItem.level === 1}

19
src/app/admin/(dashboard)/landing-page/apbdes/page.tsx
View File

@@ -18,7 +18,7 @@ import {
Text,
Title,
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconFile, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -45,12 +45,13 @@ function APBDes() {
function ListAPBDes({ search }: { search: string }) {
const listState = useProxy(apbdes);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000);
const { data, page, totalPages, loading, load } = listState.findMany;
useShallowEffect(() => {
load(page, 10, search);
}, [page, search]);
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
const filteredData = data || [];
@@ -197,17 +198,17 @@ function ListAPBDes({ search }: { search: string }) {
<Text fz="sm" fw={600} lh={1.4}>
APBDes {item.tahun}
</Text>
<Group justify="space-between" wrap="nowrap">
<Text fz="sm" c="dimmed" lh={1.4}>
<Box>
<Text fz="sm"fw={600} lh={1.4}>
Tahun
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.tahun || '-'}
</Text>
</Group>
</Box>
<Group justify="space-between" wrap="nowrap">
<Text fz="sm" c="dimmed" lh={1.4}>
<Box>
<Text fz="sm"fw={600} lh={1.4}>
Dokumen
</Text>
{item.file?.link ? (
@@ -230,7 +231,7 @@ function ListAPBDes({ search }: { search: string }) {
Tidak ada
</Text>
)}
</Group>
</Box>
<Button
size="xs"

6
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx
View File

@@ -151,7 +151,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
{item.name}
</Text>
</TableTd>
<TableTd w={60}>
<TableTd w={120}>
<Button
variant="light"
color="green"
@@ -161,7 +161,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
<IconEdit size={18} />
</Button>
</TableTd>
<TableTd w={60}>
<TableTd w={120}>
<Button
variant="light"
color="red"
@@ -191,7 +191,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
);
return (
<Box py={{ base: 'xl', md: 'xl' }}>
<Box py={{ base: 20, md: 20 }}>
<Paper bg={colors['white-1']} p={{ base: 'md', md: 'xl' }} shadow="md" radius="md">
<Group justify="space-between" mb={{ base: 'md', md: 'lg' }}>
<Title order={2} lh={1.2}>

12
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx
View File

@@ -150,12 +150,18 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
filteredData.map((item) => (
<Paper key={item.id} p="sm" radius="md" withBorder shadow="xs">
<Stack gap="xs">
<Text fw={500} fz="sm" lh={1.5} lineClamp={1}>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Nama Program</Text>
<Text fw={500} fz="sm" lh={1.5} lineClamp={1}>
{item.name || '-'}
</Text>
<Text fz="xs" c="dimmed" lh={1.5} lineClamp={1}>
Kategori: {item.kategori?.name || '-'}
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Kategori</Text>
<Text fz="xs" c="dimmed" lh={1.5} lineClamp={1}>
{item.kategori?.name || '-'}
</Text>
</Box>
<Group justify="flex-end">
<Button
size="xs"

7
src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/page.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -32,6 +32,7 @@ function ListKategoriPrestasi({ search }: { search: string }) {
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const router = useRouter()
const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
const handleHapus = () => {
if (selectedId) {
@@ -50,8 +51,8 @@ function ListKategoriPrestasi({ search }: { search: string }) {
} = stateKategori.findMany
useShallowEffect(() => {
load(page, 10, search)
}, [page, search])
load(page, 10, debouncedSearch)
}, [page, debouncedSearch])
const filteredData = data || []

118
src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/page.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -29,6 +29,7 @@ function ListPrestasi({ search }: { search: string }) {
const listState = useProxy(prestasiState.prestasiDesa)
const router = useRouter();
const isMobile = useMediaQuery('(max-width: 768px)');
const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
const {
data,
@@ -39,8 +40,8 @@ function ListPrestasi({ search }: { search: string }) {
} = listState.findMany
useShallowEffect(() => {
load(page, 10, search);
}, []);
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
const filteredData = data || []
@@ -71,44 +72,46 @@ function ListPrestasi({ search }: { search: string }) {
</Group>
{/* Desktop Table */}
<Box visibleFrom="md">
<Table highlightOnHover miw={0}>
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table highlightOnHover striped verticalSpacing="sm" miw={800}>
<TableThead>
<TableTr>
<TableTh w="25%">Nama Prestasi</TableTh>
<TableTh w="25%">Deskripsi</TableTh>
<TableTh w="25%">Kategori</TableTh>
<TableTh w="25%" ta="center">Aksi</TableTh>
<TableTh>Nama Prestasi</TableTh>
<TableTh>Deskripsi</TableTh>
<TableTh>Kategori</TableTh>
<TableTh ta="center">Aksi</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd w="25%">
<TableTd style={{ maxWidth: 250 }}>
<Text truncate="end" fz="md" lh={1.5}>
{item.name}
</Text>
</TableTd>
<TableTd w="25%">
<TableTd style={{ maxWidth: 250 }}>
<Text lineClamp={1} fz="md" c="dimmed" lh={1.5} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
</TableTd>
<TableTd w="25%">
<TableTd>
<Text truncate="end" fz="md" lh={1.5}>
{item.kategori?.name || 'Tidak ada kategori'}
</Text>
</TableTd>
<TableTd w="25%" ta="center">
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/landing-page/prestasi-desa/list-prestasi-desa/${item.id}`)}
>
Detail
</Button>
<TableTd ta="center">
<Center>
<Button
size="sm"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/landing-page/prestasi-desa/list-prestasi-desa/${item.id}`)}
>
Detail
</Button>
</Center>
</TableTd>
</TableTr>
))
@@ -127,39 +130,48 @@ function ListPrestasi({ search }: { search: string }) {
{/* Mobile Cards */}
<Stack hiddenFrom="md" gap="xs">
{filteredData.length > 0 ? (
filteredData.map((item) => (
<Paper key={item.id} withBorder p="sm" radius="sm">
<Stack gap={4}>
<Text fz="sm" fw={600} lh={1.4}>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<Paper key={item.id} withBorder p="sm" radius="sm">
<Stack gap={"xs"}>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Nama Prestasi</Text>
<Text fz="sm" fw={500} lh={1.4} lineClamp={2}>
{item.name}
</Text>
<Text fz="xs" c="dimmed" lh={1.5} lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
<Text fz="xs" c="dimmed" lh={1.4}>
Kategori: {item.kategori?.name || 'Tidak ada kategori'}
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Deskripsi</Text>
<Text fz="sm" fw={500} lh={1.5} lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Kategori</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.kategori?.name || 'Tidak ada kategori'}
</Text>
<Group justify="flex-end" mt="xs">
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={14} />}
onClick={() => router.push(`/admin/landing-page/prestasi-desa/list-prestasi-desa/${item.id}`)}
>
Detail
</Button>
</Group>
</Stack>
</Paper>
))
) : (
<Center py="md">
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data prestasi
</Text>
</Center>
)}
</Box>
<Group justify="flex-end" mt="xs">
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={14} />}
onClick={() => router.push(`/admin/landing-page/prestasi-desa/list-prestasi-desa/${item.id}`)}
>
Detail
</Button>
</Group>
</Stack>
</Paper>
))
) : (
<Center py="md">
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data prestasi
</Text>
</Center>
)}
</Stack>
</Paper>

16
src/app/admin/(dashboard)/landing-page/profil/media-sosial/page.tsx
View File

@@ -20,7 +20,7 @@ import {
Text,
Title,
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -48,6 +48,7 @@ function MediaSosial() {
function ListMediaSosial({ search }: { search: string }) {
const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
const getIconSource = (item: any) => {
if (item.image?.link) return item.image.link;
@@ -66,8 +67,8 @@ function ListMediaSosial({ search }: { search: string }) {
} = stateMediaSosial.findMany;
useShallowEffect(() => {
load(page, 10, search);
}, [page, search]);
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
const filteredData = data || [];
@@ -195,12 +196,15 @@ function ListMediaSosial({ search }: { search: string }) {
{filteredData.length > 0 ? (
filteredData.map((item) => (
<Paper key={item.id} withBorder p="sm" radius="md">
<Group justify="space-between" wrap="nowrap" align='center'>
<Box>
<Text fw={600} fz="sm" lh={1.45}>
<Text fz="sm" fw={600} lh={1.4}>Nama Media Sosial / Kontak</Text>
<Text fw={500} fz="sm" lh={1.45}>
{item.name}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Gambar</Text>
</Box>
<Box w={40} h={40} style={{ borderRadius: 6, overflow: 'hidden' }}>
{(() => {
const src = getIconSource(item);
@@ -217,8 +221,8 @@ function ListMediaSosial({ search }: { search: string }) {
return <Box bg={colors['blue-button']} w="100%" h="100%" />;
})()}
</Box>
</Group>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Link / No. Telepon</Text>
<a
href={item.link}
target="_blank"

20
src/app/admin/(dashboard)/landing-page/profil/program-inovasi/page.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import colors from '@/con/colors';
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 { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -29,12 +29,13 @@ function ProgramInovasi() {
function ListProgramInovasi({ search }: { search: string }) {
const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
const { data, page, totalPages, loading, load } = stateProgramInovasi.findMany;
useShallowEffect(() => {
load(page, 10, search);
}, [page, search]);
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
const filteredData = data || [];
@@ -135,15 +136,22 @@ function ListProgramInovasi({ search }: { search: string }) {
>
<Stack gap={6}>
{/* Title */}
<Text fw={600}>{item.name}</Text>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Nama Program</Text>
<Text fw={500} lh={1.4}>{item.name}</Text>
</Box>
{/* Description */}
<Text fz="sm" c="gray.7" lineClamp={2}>
{item.description || '-'}
<Box>
<Text fz="sm" fw={600} lh={1.4}>Deskripsi</Text>
<Text fz="sm" c="gray.7" lineClamp={2}>
{item.description || '-'}
</Text>
</Box>
{/* Link */}
<Box>
<Text fz="sm" fw={600} lh={1.4}>Link</Text>
<a
href={item.link}
target="_blank"

2
src/app/admin/(dashboard)/ppid/daftar-informasi-publik/[id]/edit/page.tsx
View File

@@ -79,7 +79,7 @@ function EditDaftarInformasiPublik() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />

54
src/app/admin/(dashboard)/ppid/daftar-informasi-publik/[id]/page.tsx
View File

@@ -52,7 +52,7 @@ function DetailDaftarInformasiPublik() {
<Paper
withBorder
w={{ base: '100%', md: '60%' }}
w={{ base: '100%', md: '70%' }}
bg={colors['white-1']}
p="lg"
radius="md"
@@ -83,39 +83,39 @@ function DetailDaftarInformasiPublik() {
<Box>
<Text fz="lg" fw="bold" mb={4}>Deskripsi</Text>
<Box
fz="md"
c="dimmed"
<Text
px={"xs"}
fz="md"
c="dimmed"
dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
className="prose max-w-none"
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
/>
</Box>
<Group gap="sm" mt="md">
<Button
variant="light"
color="green"
leftSection={<IconEdit size={18} />}
onClick={() => router.push(`/admin/ppid/daftar-informasi-publik/${data.id}/edit`)}
disabled={!data}
>
Edit
</Button>
<Button
variant="light"
color="green"
leftSection={<IconEdit size={18} />}
onClick={() => router.push(`/admin/ppid/daftar-informasi-publik/${data.id}/edit`)}
disabled={!data}
>
Edit
</Button>
<Button
variant="light"
color="red"
leftSection={<IconTrash size={18} />}
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
disabled={stateDaftarInformasi.delete.loading || !data}
loading={stateDaftarInformasi.delete.loading}
>
Hapus
</Button>
<Button
variant="light"
color="red"
leftSection={<IconTrash size={18} />}
onClick={() => {
setSelectedId(data.id);
setModalHapus(true);
}}
disabled={stateDaftarInformasi.delete.loading || !data}
loading={stateDaftarInformasi.delete.loading}
>
Hapus
</Button>
</Group>
</Stack>
</Paper>

2
src/app/admin/(dashboard)/ppid/daftar-informasi-publik/create/page.tsx
View File

@@ -41,7 +41,7 @@ export default function CreateDaftarInformasi() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />

217
src/app/admin/(dashboard)/ppid/daftar-informasi-publik/page.tsx
View File

@@ -1,7 +1,24 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { useShallowEffect, useViewportSize } from '@mantine/hooks';
import {
Box,
Button,
Center,
Group,
Pagination,
Paper,
Skeleton,
Stack,
Table,
TableTbody,
TableTd,
TableTh,
TableThead,
TableTr,
Text,
Title,
} from '@mantine/core';
import { useDebouncedValue, useShallowEffect, useViewportSize } from '@mantine/hooks';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -10,7 +27,7 @@ import HeaderSearch from '../../_com/header';
import daftarInformasiPublik from '../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
function DaftarInformasiPublik() {
const [search, setSearch] = useState("");
const [search, setSearch] = useState('');
return (
<Box>
<HeaderSearch
@@ -26,102 +43,158 @@ function DaftarInformasiPublik() {
}
function ListDaftarInformasi({ search }: { search: string }) {
const listData = useProxy(daftarInformasiPublik)
const router = useRouter()
const listData = useProxy(daftarInformasiPublik);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000);
const { data, page, totalPages, loading, load } = listData.findMany
const { width } = useViewportSize()
const isMobile = width < 768
const { data, page, totalPages, loading, load } = listData.findMany;
const { width } = useViewportSize();
const isMobile = width < 768;
useShallowEffect(() => {
load(page, 10, search)
}, [page, search])
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
const filteredData = data || []
const filteredData = data || [];
if (loading || !data) {
return (
<Stack py={10}>
<Stack py="md">
<Skeleton height={600} radius="md" />
</Stack>
)
);
}
return (
<Box py="md">
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>List Daftar Informasi Publik</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/ppid/daftar-informasi-publik/create')}
>
{isMobile ? 'Tambah' : 'Tambah Baru'}
</Button>
<Box py={{ base: 'md', md: 'lg' }}>
<Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
<Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
<Title order={2} lh={1.2}>
List Daftar Informasi Publik
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/ppid/daftar-informasi-publik/create')}
>
{isMobile ? 'Tambah' : 'Tambah Baru'}
</Button>
</Group>
{filteredData.length === 0 ? (
<Stack align="center" py="xl">
<IconDeviceImacCog size={40} stroke={1.5} color={colors['blue-button']} />
<Text fw={500} c="dimmed">Belum ada informasi publik yang tersedia</Text>
<Text fz={{ base: 'sm', md: 'md' }} fw={500} c="dimmed" lh={1.5}>
Belum ada informasi publik yang tersedia
</Text>
</Stack>
) : (
<Box style={{ overflowX: 'auto' }}>
<Table
highlightOnHover
striped
stickyHeader
style={{ minWidth: '700px' }}
>
<TableThead>
<TableTr>
<TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
<TableTh style={{ width: '25%' }}>Jenis Informasi</TableTh>
<TableTh style={{ width: '40%' }}>Deskripsi</TableTh>
<TableTh style={{ width: '20%', textAlign: 'center' }}>Aksi</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item, index) => (
<TableTr key={item.id}>
<TableTd style={{ textAlign: 'center' }}>
<Text fz="sm">{(page - 1) * 10 + index + 1}</Text>
</TableTd>
<TableTd>
<Box w={200}>
<Text fw={500} lineClamp={1}>{item.jenisInformasi}</Text>
</Box>
</TableTd>
<TableTd>
<Box w={200}>
<Text lineClamp={1} fz="sm" c="dimmed">
{item.deskripsi?.replace(/<[^>]*>?/gm, '').substring(0, 80) + '...'}
</Text>
</Box>
</TableTd>
<TableTd style={{ textAlign: 'center' }}>
<>
{/* Desktop Table */}
<Box visibleFrom="md" style={{ overflowX: 'auto' }}>
<Table
highlightOnHover
striped
stickyHeader
style={{ minWidth: '700px' }}
>
<TableThead>
<TableTr>
<TableTh w="25%">
<Text fw={600} lh={1.4}>
Jenis Informasi
</Text>
</TableTh>
<TableTh w="40%">
<Text fw={600} lh={1.4}>
Deskripsi
</Text>
</TableTh>
<TableTh ta="center" w="20%">
<Text fw={600} lh={1.4}>
Aksi
</Text>
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fz="sm" fw={600} lh={1.5} lineClamp={1}>
{item.jenisInformasi}
</Text>
</TableTd>
<TableTd>
<Text fz="sm" lh={1.5} c="dimmed" lineClamp={1}>
{item.deskripsi?.replace(/<[^>]*>?/gm, '').substring(0, 80)}...
</Text>
</TableTd>
<TableTd ta="center">
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/ppid/daftar-informasi-publik/${item.id}`)}
onClick={() =>
router.push(`/admin/ppid/daftar-informasi-publik/${item.id}`)
}
>
Detail
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
{/* Mobile Card List */}
<Stack hiddenFrom="md" gap="sm">
{filteredData.map((item) => (
<Paper key={item.id} withBorder p="sm" radius="md">
<Stack gap={4}>
<Box>
<Text fw={600} lh={1.4}>
Jenis Informasi
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.jenisInformasi}
</Text>
</Box>
<Box>
<Text fw={600} lh={1.4}>
Deskripsi
</Text>
<Text fz="sm" fw={500} lh={1.5} c="dimmed">
{item.deskripsi?.replace(/<[^>]*>?/gm, '').substring(0, 80)}...
</Text>
</Box>
<Box>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/ppid/daftar-informasi-publik/${item.id}`)
}
>
Detail
</Button>
</Box>
</Stack>
</Paper>
))}
</Stack>
</>
)}
</Paper>
<Center mt="lg">
<Center mt={{ base: 'lg', md: 'xl' }}>
<Pagination
value={page}
onChange={(newPage) => {
@@ -129,14 +202,12 @@ function ListDaftarInformasi({ search }: { search: string }) {
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
</Box>
)
);
}
export default DaftarInformasiPublik;
export default DaftarInformasiPublik;

57
src/app/admin/(dashboard)/ppid/dasar-hukum/page.tsx
View File

@@ -8,11 +8,11 @@ import { useProxy } from 'valtio/utils';
import stateDasarHukumPPID from '../../_state/ppid/dasar_hukum/dasarHukum';
function Page() {
const router = useRouter()
const listDasarHukum = useProxy(stateDasarHukumPPID)
const router = useRouter();
const listDasarHukum = useProxy(stateDasarHukumPPID);
useShallowEffect(() => {
listDasarHukum.findById.load('1')
}, [])
listDasarHukum.findById.load('1');
}, []);
if (listDasarHukum.findById.loading) {
return (
@@ -40,15 +40,16 @@ function Page() {
<Title order={3} c={colors['blue-button']}>Preview Dasar Hukum PPID</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
onClick={() => router.push('/admin/ppid/dasar-hukum/edit')}
>
Edit
</Button>
<Button
w={{ base: '100%', md: "110%" }}
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
onClick={() => router.push('/admin/ppid/dasar-hukum/edit')}
>
Edit
</Button>
</GridCol>
</Grid>
@@ -57,33 +58,39 @@ function Page() {
<Grid>
<GridCol span={12}>
<Center>
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
<Image loading="lazy" src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
</Center>
</GridCol>
<GridCol span={12}>
<Text
ta="center"
fz={{ base: '1.5rem', md: '2rem' }}
fw="bold"
<Title
order={3}
ta="center"
lh={{ base: 1.15, md: 1.1 }}
fw="bold"
c={colors['blue-button']}
dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }}
style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
/>
</GridCol>
</Grid>
<Divider my="xl" color={colors['blue-button']} />
<Box
className="prose max-w-none"
<Text
dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }}
style={{ wordBreak: "break-word", whiteSpace: "normal", fontSize: '1.1rem', lineHeight: 1.7, textAlign: 'justify' }}
style={{
wordBreak: 'break-word',
whiteSpace: 'normal',
fontSize: '1rem',
lineHeight: 1.55,
textAlign: 'justify',
}}
/>
</Box>
</Paper>
</Stack>
</Paper>
)
);
}
export default Page;
export default Page;

95
src/app/admin/(dashboard)/ppid/indeks-kepuasan-masyarakat/_lib/layoutTabs.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import colors from '@/con/colors';
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title} from '@mantine/core';
import { IconChartBar, IconUsers } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
@@ -56,42 +56,77 @@ function LayoutTabsIKM({ children }: { children: React.ReactNode }) {
radius="lg"
keepMounted={false}
>
<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", // ✅ biar nggak nempel ke tepi
}}
>
{tabs.map((e, i) => (
<Tooltip
key={i}
label={e.description}
withArrow
position="bottom"
transitionProps={{ transition: 'pop', duration: 200 }}
>
{/* ✅ Scroll horizontal wrapper */}
<Box visibleFrom='md' pb={10}>
<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", // ✅ biar nggak nempel ke tepi
}}
>
{tabs.map((tab, i) => (
<TabsTab
value={e.value}
leftSection={e.icon}
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 500,
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{e.label}
{tab.label}
</TabsTab>
</Tooltip>
))}
</TabsList>
</ScrollArea>
))}
</TabsList>
</ScrollArea>
</Box>
<Box hiddenFrom='md' pb={10}>
<ScrollArea
type="auto"
offsetScrollbars={false}
w="100%"
>
<TabsList
p="xs" // lebih kecil
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
width: "max-content", // ⬅️ kunci
maxWidth: "100%", // ⬅️ penting
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
paddingInline: "0.75rem", // ⬅️ lebih ramping
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
</Box>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value} mt="md">
{/* Konten dummy, bisa diganti tergantung routing */}

8
src/app/admin/(dashboard)/ppid/indeks-kepuasan-masyarakat/responden/[id]/edit/page.tsx
View File

@@ -85,11 +85,11 @@ function EditResponden() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
<Title order={4} ml="sm" c="dark">
Edit Responden
</Title>

2
src/app/admin/(dashboard)/ppid/indeks-kepuasan-masyarakat/responden/[id]/page.tsx
View File

@@ -38,7 +38,7 @@ export default function DetailResponden() {
)
}
return (
<Box py={10}>
<Box px={{ base: 0, md: 'xs' }} py="xs">
<Button
variant="subtle"
onClick={() => router.back()}

36
src/app/admin/(dashboard)/ppid/indeks-kepuasan-masyarakat/responden/create/page.tsx
View File

@@ -51,7 +51,7 @@ function RespondenCreate() {
}
}
return (
<Box>
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack size={20} />
@@ -96,24 +96,24 @@ function RespondenCreate() {
}
disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
/>
<Select
<Select
key={"rating_responden"}
label={"Rating"}
placeholder={indeksKepuasanState.pilihanRatingResponden.findMany.loading ? 'Memuat...' : 'Pilih rating'}
value={stategrafikBerdasarkanResponden.create.form.ratingId || ""}
onChange={(val) => {
stategrafikBerdasarkanResponden.create.form.ratingId = val ?? "";
}}
data={
(indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
.filter(Boolean) // Hapus null, undefined, dll
.map((item) => ({
value: item.id,
label: item.name || 'Tanpa Nama',
}))
}
disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
/>
label={"Rating"}
placeholder={indeksKepuasanState.pilihanRatingResponden.findMany.loading ? 'Memuat...' : 'Pilih rating'}
value={stategrafikBerdasarkanResponden.create.form.ratingId || ""}
onChange={(val) => {
stategrafikBerdasarkanResponden.create.form.ratingId = val ?? "";
}}
data={
(indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
.filter(Boolean) // Hapus null, undefined, dll
.map((item) => ({
value: item.id,
label: item.name || 'Tanpa Nama',
}))
}
disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
/>
<Select
key={"kelompokUmur"}
label={"Kelompok Umur"}

234
src/app/admin/(dashboard)/ppid/indeks-kepuasan-masyarakat/responden/page.tsx
View File

@@ -1,5 +1,21 @@
'use client';
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import {
Box,
Button,
Center,
Pagination,
Paper,
Skeleton,
Stack,
Table,
TableTbody,
TableTd,
TableTh,
TableThead,
TableTr,
Text,
Title,
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
@@ -9,11 +25,11 @@ import HeaderSearch from '../../../_com/header';
import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan';
function Responden() {
const [search, setSearch] = useState("");
const [search, setSearch] = useState('');
return (
<Box>
<HeaderSearch
title="Data Responden"
title="Responden"
placeholder="Cari nama responden..."
searchIcon={<IconSearch size={18} />}
value={search}
@@ -33,17 +49,13 @@ function ListResponden({ search }: ListRespondenProps) {
const router = useRouter();
const { data, page, totalPages, loading, load } = state.findMany;
useShallowEffect(() => {
load(page, 10)
load(page, 10);
}, [page]);
const filteredData = (data || []).filter(item => {
const filteredData = (data || []).filter((item) => {
const keyword = search.toLowerCase();
return (
item.name.toLowerCase().includes(keyword)
);
return item.name.toLowerCase().includes(keyword);
});
if (loading || !data) {
@@ -56,21 +68,25 @@ function ListResponden({ search }: ListRespondenProps) {
if (data.length === 0) {
return (
<Paper withBorder bg="white" p="lg" radius="md" shadow="sm">
<Paper withBorder bg="white" p={{ base: 'md', sm: 'lg' }} radius="md" shadow="sm">
<Stack gap="md">
<Title order={3}>Data Responden</Title>
<Table striped withRowBorders>
<TableThead>
<TableTr>
<TableTh style={{ textAlign: 'center' }}>No</TableTh>
<TableTh>Nama</TableTh>
<TableTh>Tanggal</TableTh>
<TableTh>Jenis Kelamin</TableTh>
<TableTh style={{ textAlign: 'center' }}>Aksi</TableTh>
</TableTr>
</TableThead>
</Table>
<Text c="dimmed" ta="center" py="md">
<Title order={2} lh={1.2}>
Data Responden
</Title>
<Box visibleFrom="md">
<Table striped withRowBorders>
<TableThead>
<TableTr>
<TableTh ta="center">No</TableTh>
<TableTh>Nama</TableTh>
<TableTh>Tanggal</TableTh>
<TableTh>Jenis Kelamin</TableTh>
<TableTh ta="center">Aksi</TableTh>
</TableTr>
</TableThead>
</Table>
</Box>
<Text c="dimmed" ta="center" py="md" fz={{ base: 'sm', md: 'md' }} lh={1.4}>
Belum ada data responden yang tersedia
</Text>
</Stack>
@@ -79,54 +95,133 @@ function ListResponden({ search }: ListRespondenProps) {
}
return (
<Paper withBorder bg="white" p="lg" radius="md" shadow="sm">
<Paper withBorder bg="white" p={{ base: 'md', sm: 'lg' }} radius="md" shadow="sm">
<Stack gap="md">
<Title order={3}>Data Responden</Title>
<Table striped withRowBorders>
<TableThead>
<TableTr>
<TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
<TableTh style={{ width: '25%' }}>Nama</TableTh>
<TableTh style={{ width: '25%' }}>Tanggal</TableTh>
<TableTh style={{ width: '20%' }}>Jenis Kelamin</TableTh>
<TableTh style={{ width: '15%', textAlign: 'center' }}>Aksi</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length === 0 ? (
<Title order={2} lh={1.2}>
Data Responden
</Title>
{/* Desktop Table */}
<Box visibleFrom="md">
<Table striped withRowBorders>
<TableThead>
<TableTr>
<TableTd colSpan={5}>
<Text c="dimmed" ta="center" py="md">
Tidak ada data yang cocok dengan pencarian
</Text>
</TableTd>
<TableTh w="5%" ta="center">
No
</TableTh>
<TableTh w="25%">Nama</TableTh>
<TableTh w="25%">Tanggal</TableTh>
<TableTh w="20%">Jenis Kelamin</TableTh>
<TableTh w="15%" ta="center">
Aksi
</TableTh>
</TableTr>
) : (
filteredData.map((item, index) => (
<TableTr key={item.id}>
<TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
<TableTd style={{ width: '25%' }}>{item.name}</TableTd>
<TableTd style={{ width: '25%' }}>
{item.tanggal ? new Date(item.tanggal).toLocaleDateString('id-ID') : '-'}
</TableTd>
<TableTd style={{ width: '20%' }}>{item.jenisKelamin.name}</TableTd>
<TableTd style={{ width: '15%', textAlign: 'center' }}>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${item.id}`)}
>
Detail
</Button>
</TableThead>
<TableTbody>
{filteredData.length === 0 ? (
<TableTr>
<TableTd colSpan={5}>
<Text c="dimmed" ta="center" py="md" fz="sm" lh={1.4}>
Tidak ada data yang cocok dengan pencarian
</Text>
</TableTd>
</TableTr>
))
)}
</TableTbody>
</Table>
) : (
filteredData.map((item, index) => (
<TableTr key={item.id}>
<TableTd ta="center">{index + 1}</TableTd>
<TableTd>{item.name}</TableTd>
<TableTd>
{item.tanggal ? new Date(item.tanggal).toLocaleDateString('id-ID') : '-'}
</TableTd>
<TableTd>{item.jenisKelamin.name}</TableTd>
<TableTd ta="center">
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${item.id}`)
}
>
Detail
</Button>
</TableTd>
</TableTr>
))
)}
</TableTbody>
</Table>
</Box>
{/* Mobile Card View */}
<Box hiddenFrom="md">
{filteredData.length === 0 ? (
<Text c="dimmed" ta="center" py="md" fz="sm" lh={1.4}>
Tidak ada data yang cocok dengan pencarian
</Text>
) : (
<Stack gap="sm">
{filteredData.map((item, index) => (
<Paper key={item.id} withBorder p="sm" radius="md">
<Stack gap={4}>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
No
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{index + 1}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
Nama
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.name}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
Tanggal
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.tanggal
? new Date(item.tanggal).toLocaleDateString('id-ID')
: '-'}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
Jenis Kelamin
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{item.jenisKelamin.name}
</Text>
</Box>
<Box ta="center">
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${item.id}`)
}
>
Detail
</Button>
</Box>
</Stack>
</Paper>
))}
</Stack>
)}
</Box>
{filteredData.length > 0 && (
<Center>
<Pagination
@@ -138,7 +233,6 @@ function ListResponden({ search }: ListRespondenProps) {
}}
size="md"
radius="md"
mt="md"
/>
</Center>
)}
@@ -147,6 +241,4 @@ function ListResponden({ search }: ListRespondenProps) {
);
}
export default Responden;
export default Responden;

4
src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/[id]/page.tsx
View File

@@ -27,7 +27,7 @@ function DetailPermohonanInformasiPublik() {
const data = state.findUnique.data;
return (
<Box py="md">
<Box px={{ base: 0, md: 'xs' }} py="xs">
<Button
variant="subtle"
onClick={() => router.back()}
@@ -39,7 +39,7 @@ function DetailPermohonanInformasiPublik() {
<Paper
withBorder
w={{ base: '100%', md: '60%' }}
w={{ base: '100%', md: '70%' }}
bg={colors['white-1']}
p="lg"
radius="md"

304
src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx
View File

@@ -1,105 +1,277 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors'
import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core'
import { useShallowEffect } from '@mantine/hooks'
import { IconDeviceImacCog, IconId, IconInfoCircle, IconPhone, IconUser } from '@tabler/icons-react'
import {
Box,
Button,
Center,
Grid,
GridCol,
Group,
Pagination,
Paper,
Skeleton,
Stack,
Table,
TableTbody,
TableTd,
TableTh,
TableThead,
TableTr,
Text,
TextInput,
Title,
} from '@mantine/core'
import {
IconDeviceImacCog,
IconId,
IconInfoCircle,
IconPhone,
IconSearch,
IconUser,
} from '@tabler/icons-react'
import { useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'
import { useProxy } from 'valtio/utils'
import statepermohonanInformasiPublikForm from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik'
import { useDebouncedValue } from '@mantine/hooks'
function Page() {
const permohonanInformasiPublikState = useProxy(statepermohonanInformasiPublikForm)
const router = useRouter()
const { data, page, totalPages, loading, load } = permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany
const [search, setSearch] = useState('')
const [debouncedSearch] = useDebouncedValue(search, 1000);
useShallowEffect(() => {
permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.load()
}, [])
useEffect(() => {
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
if (!permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data) {
if (loading) {
return (
<Stack pos="relative" bg={colors.Bg} p="lg" align="center">
<Skeleton radius="md" h={40} w="60%" />
<Stack pos="relative" p="lg" align="center">
<Skeleton radius="md" h={200} w="100%" />
</Stack>
)
}
if (!data || data.length === 0) {
return (
<Box py={{ base: 'md', md: 'lg' }}>
<Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="xl" shadow="sm" withBorder>
<Stack gap={'sm'}>
<Grid mb={10}>
<GridCol span={{ base: 12, md: 9 }}>
<Title order={2} lh={1.2} c="dark">
Daftar Permohonan Informasi Publik
</Title>
</GridCol>
<GridCol span={{ base: 12, md: 3 }}>
<Paper radius="lg" bg={colors['white-1']}>
<TextInput
radius="lg"
placeholder={"Cari nama..."}
leftSection={<IconSearch size={16} />}
w="100%"
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
</Paper>
</GridCol>
</Grid>
<Stack align="center" py="xl" ta="center">
<IconInfoCircle size={40} stroke={1.5} color={colors['blue-button']} />
<Text fz={{ base: 'sm', md: 'md' }} fw={500} c="dimmed" lh={1.5}>
{search
? 'Tidak ditemukan data yang sesuai dengan pencarian'
: 'Belum ada permohonan yang tercatat'
}
</Text>
</Stack>
</Stack>
</Paper>
</Box>
)
}
const data = permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data
return (
<Box py="md">
<Paper bg={colors['white-1']} p="lg" radius="xl" shadow="sm" withBorder>
<Stack gap="md">
<Group justify="space-between">
<Title order={2} c="dark">Daftar Permohonan Informasi Publik</Title>
<IconInfoCircle size={20} stroke={1.5} />
</Group>
<Box py={{ base: 'sm', md: 'md' }}>
<Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="xl" shadow="sm" withBorder>
<Stack gap={'sm'}>
<Grid mb={10}>
<GridCol span={{ base: 12, md: 9 }}>
<Title order={2} lh={1.2} c="dark">
Daftar Permohonan Informasi Publik
</Title>
</GridCol>
<GridCol span={{ base: 12, md: 3 }}>
<Paper radius="lg" bg={colors['white-1']}>
<TextInput
radius="lg"
placeholder={"Cari nama..."}
leftSection={<IconSearch size={16} />}
w="100%"
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
</Paper>
</GridCol>
</Grid>
{data.length === 0 ? (
<Stack align="center" py="xl">
<Stack align="center" py={{ base: 'xl', md: 'xl' }}>
<IconInfoCircle size={40} stroke={1.5} color={colors['blue-button']} />
<Text fw={500} c="dimmed">Belum ada permohonan informasi yang tercatat</Text>
<Text fz={{ base: 'sm', md: 'md' }} fw={500} c="dimmed" lh={1.5}>
Belum ada permohonan informasi yang tercatat
</Text>
</Stack>
) : (
<Box style={{ overflowX: 'auto' }}>
<Table
highlightOnHover
withRowBorders
withColumnBorders
withTableBorder
striped
stickyHeader
>
<TableThead>
<TableTr>
<TableTh>No</TableTh>
<TableTh><Group gap={5}><IconUser size={16} /> Nama</Group></TableTh>
<TableTh><Group gap={5}><IconId size={16} /> NIK</Group></TableTh>
<TableTh><Group gap={5}><IconPhone size={16} /> Telepon</Group></TableTh>
<TableTh><Group gap={5}><IconInfoCircle size={16} /> Detail</Group></TableTh>
</TableTr>
</TableThead>
<TableTbody>
{data.map((item, index) => (
<TableTr key={item.id}>
<TableTd>{index + 1}</TableTd>
<TableTd>
<Box w={200}>
<Text lineClamp={1} fw={500}>{item.name}</Text>
</Box>
</TableTd>
<TableTd>
<Box w={200}>
{item.nik}
</Box>
</TableTd>
<TableTd>
<Box w={200}>
{item.notelp}
</Box>
</TableTd>
<TableTd>
<>
{/* Desktop Table */}
<Box visibleFrom="md">
<Table highlightOnHover>
<TableThead>
<TableTr>
<TableTh fz="sm" fw={600} ta="center" w={60}>
No
</TableTh>
<TableTh fz="sm" fw={600}>
<Group gap={5}>
<IconUser size={16} />
Nama
</Group>
</TableTh>
<TableTh fz="sm" fw={600}>
<Group gap={5}>
<IconId size={16} />
NIK
</Group>
</TableTh>
<TableTh fz="sm" fw={600}>
<Group gap={5}>
<IconPhone size={16} />
Telepon
</Group>
</TableTh>
<TableTh fz="sm" fw={600} w={140}>
<Group gap={5}>
<IconInfoCircle size={16} />
Detail
</Group>
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{data.map((item, index) => (
<TableTr key={item.id}>
<TableTd ta="center" fz="sm" lh={1.5}>
{index + 1}
</TableTd>
<TableTd>
<Text fz="sm" fw={500} lh={1.5} lineClamp={1}>
{item.name}
</Text>
</TableTd>
<TableTd>
<Text fz="sm" lh={1.5}>{item.nik}</Text>
</TableTd>
<TableTd>
<Text fz="sm" lh={1.5}>{item.notelp}</Text>
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(`/admin/ppid/permohonan-informasi-publik/${item.id}`)
}
>
Detail
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
{/* Mobile Cards */}
<Stack hiddenFrom="md" gap="xs">
{data.map((item, index) => (
<Paper key={item.id} p="sm" radius="md" withBorder bg="white">
<Stack gap={4}>
<Box>
<Text fz="xs" fw={600} lh={1.4} c="dark">
No
</Text>
<Text fz="sm" fw={500} lh={1.5} c="dark">
{index + 1}
</Text>
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4} c="dark">
Nama
</Text>
<Text fz="sm" fw={500} lh={1.5} c="dark" lineClamp={1}>
{item.name}
</Text>
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4} c="dark">
NIK
</Text>
<Text fz="sm" lh={1.5} c="dark">{item.nik}</Text>
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4} c="dark">
Telepon
</Text>
<Text fz="sm" lh={1.5} c="dark">{item.notelp}</Text>
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4} c="dark">
Detail
</Text>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/ppid/permohonan-informasi-publik/${item.id}`)}
onClick={() =>
router.push(`/admin/ppid/permohonan-informasi-publik/${item.id}`)
}
mt={2}
>
Detail
Lihat Detail
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Box>
</Stack>
</Paper>
))}
</Stack>
</>
)}
</Stack>
<Center mt="xl">
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10);
window.scrollTo(0, 0);
}}
total={totalPages}
withEdges
withControls
radius="md"
/>
</Center>
</Paper>
</Box>
)
}
export default Page
export default Page

4
src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/[id]/page.tsx
View File

@@ -28,7 +28,7 @@ function DetailPermohonanKeberatanInformasiPublik() {
const data = state.findUnique.data;
return (
<Box py="md">
<Box px={{ base: 0, md: 'xs' }} py="xs">
<Button
variant="subtle"
onClick={() => router.back()}
@@ -40,7 +40,7 @@ function DetailPermohonanKeberatanInformasiPublik() {
<Paper
withBorder
w={{ base: '100%', md: '60%' }}
w={{ base: '100%', md: '70%' }}
bg={colors['white-1']}
p="lg"
radius="md"

312
src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx
View File

@@ -1,97 +1,285 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors'
import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core'
import { useShallowEffect } from '@mantine/hooks'
import { IconDeviceImacCog, IconInfoCircle, IconMail, IconPhone, IconUser } from '@tabler/icons-react'
import {
Box,
Button,
Center,
Grid,
GridCol,
Group,
Pagination,
Paper,
Skeleton,
Stack,
Table,
TableTbody,
TableTd,
TableTh,
TableThead,
TableTr,
Text,
TextInput,
Title,
} from '@mantine/core'
import {
IconDeviceImacCog,
IconInfoCircle,
IconMail,
IconPhone,
IconSearch,
IconUser,
} from '@tabler/icons-react'
import { useRouter } from 'next/navigation'
import { useProxy } from 'valtio/utils'
import statePermohonanKeberatan from '../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi'
import { useEffect, useState } from 'react'
import { useDebouncedValue } from '@mantine/hooks'
function Page() {
const listState = useProxy(statePermohonanKeberatan)
const router = useRouter()
useShallowEffect(() => {
listState.findMany.load()
}, [])
const listState = useProxy(statePermohonanKeberatan)
const [search, setSearch] = useState("");
const [debouncedSearch] = useDebouncedValue(search, 1000);
const { data, page, totalPages, loading, load } = listState.findMany
if (!listState.findMany.data) {
useEffect(() => {
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
if (loading) {
return (
<Stack pos="relative" bg={colors.Bg} p="lg" align="center">
<Skeleton radius="md" h={40} w="60%" />
<Stack pos="relative" p="lg" align="center">
<Skeleton radius="md" h={200} w="100%" />
</Stack>
)
}
const data = listState.findMany.data
if (!data || data.length === 0) {
return (
<Box py={{ base: 'md', md: 'lg' }}>
<Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="xl" shadow="sm" withBorder>
<Stack gap={'sm'}>
<Grid mb={10}>
<GridCol span={{ base: 12, md: 9 }}>
<Title order={2} lh={1.2} c="dark">
Daftar Permohonan Keberatan Informasi Publik
</Title>
</GridCol>
<GridCol span={{ base: 12, md: 3 }}>
<Paper radius="lg" bg={colors['white-1']}>
<TextInput
radius="lg"
placeholder={"Cari nama..."}
leftSection={<IconSearch size={16} />}
w="100%"
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
</Paper>
</GridCol>
</Grid>
<Stack align="center" py="xl" ta="center">
<IconInfoCircle size={40} stroke={1.5} color={colors['blue-button']} />
<Text fz={{ base: 'sm', md: 'md' }} fw={500} c="dimmed" lh={1.5}>
{search
? 'Tidak ditemukan data yang sesuai dengan pencarian'
: 'Belum ada permohonan keberatan yang tercatat'
}
</Text>
</Stack>
</Stack>
</Paper>
</Box>
)
}
return (
<Box py="md">
<Paper bg={colors['white-1']} p="lg" radius="xl" shadow="sm" withBorder>
<Stack gap="md">
<Group justify="space-between">
<Title order={2} c="dark">Daftar Permohonan Keberatan Informasi Publik</Title>
<IconInfoCircle size={20} stroke={1.5} />
</Group>
<Box py={{ base: 'md', md: 'lg' }}>
<Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="xl" shadow="sm" withBorder>
<Stack gap={'sm'}>
<Grid mb={10}>
<GridCol span={{ base: 12, md: 9 }}>
<Title order={2} lh={1.2} c="dark">
Daftar Permohonan Keberatan Informasi Publik
</Title>
</GridCol>
<GridCol span={{ base: 12, md: 3 }}>
<Paper radius="lg" bg={colors['white-1']}>
<TextInput
radius="lg"
placeholder={"Cari nama..."}
leftSection={<IconSearch size={16} />}
w="100%"
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
</Paper>
</GridCol>
</Grid>
{data.length === 0 ? (
<Stack align="center" py="xl">
<Stack align="center" py="xl" ta="center">
<IconInfoCircle size={40} stroke={1.5} color={colors['blue-button']} />
<Text fw={500} c="dimmed">Belum ada permohonan keberatan yang tercatat</Text>
<Text fz={{ base: 'sm', md: 'md' }} fw={500} c="dimmed" lh={1.5}>
Belum ada permohonan keberatan yang tercatat
</Text>
</Stack>
) : (
<Box style={{ overflowX: 'auto' }}>
<Table
highlightOnHover
withRowBorders
withColumnBorders
withTableBorder
striped
stickyHeader
>
<TableThead>
<TableTr>
<TableTh>No</TableTh>
<TableTh><Group gap={5}><IconUser size={16} /> Nama</Group></TableTh>
<TableTh><Group gap={5}><IconMail size={16} /> Email</Group></TableTh>
<TableTh><Group gap={5}><IconPhone size={16} /> Telepon</Group></TableTh>
<TableTh><Group gap={5}><IconInfoCircle size={16} /> Detail</Group></TableTh>
</TableTr>
</TableThead>
<TableTbody>
{data.map((item, index) => (
<TableTr key={item.id}>
<TableTd>{index + 1}</TableTd>
<TableTd>
<Text lineClamp={1} fw={500}>{item.name}</Text>
</TableTd>
<TableTd>
<Text size="sm">{item.email || '-'}</Text>
</TableTd>
<TableTd>
<Text>{item.notelp || '-'}</Text>
</TableTd>
<TableTd>
<>
{/* Desktop Table */}
<Box visibleFrom="md">
<Table highlightOnHover>
<TableThead>
<TableTr>
<TableTh fz="sm" fw={600} lh={1.4} ta="center">
No
</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>
<Group gap={5}>
<IconUser size={16} />
Nama
</Group>
</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>
<Group gap={5}>
<IconMail size={16} />
Email
</Group>
</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>
<Group gap={5}>
<IconPhone size={16} />
Telepon
</Group>
</TableTh>
<TableTh fz="sm" fw={600} lh={1.4} ta="center">
<Group gap={5}>
<IconInfoCircle size={16} />
Detail
</Group>
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{data.map((item, index) => (
<TableTr key={item.id}>
<TableTd ta="center" fz="sm" lh={1.5}>
{index + 1}
</TableTd>
<TableTd>
<Text fz="sm" fw={500} lh={1.5} lineClamp={1}>
{item.name}
</Text>
</TableTd>
<TableTd>
<Text fz="sm" lh={1.5}>
{item.email || '-'}
</Text>
</TableTd>
<TableTd>
<Text fz="sm" lh={1.5}>
{item.notelp || '-'}
</Text>
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() =>
router.push(
`/admin/ppid/permohonan-keberatan-informasi-publik/${item.id}`
)
}
>
Detail
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
{/* Mobile Cards */}
<Stack hiddenFrom="md" gap="xs">
{data.map((item, index) => (
<Paper key={item.id} p="sm" radius="md" withBorder bg="white">
<Stack gap={4}>
<Box>
<Text fz="xs" fw={600} lh={1.4} c="dimmed">
No
</Text>
<Text fz="sm" fw={600} lh={1.5}>
{index + 1}
</Text>
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4} c="dimmed">
Nama
</Text>
<Text fz="sm" fw={600} lh={1.5}>
{item.name}
</Text>
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4} c="dimmed">
Email
</Text>
<Text fz="sm" lh={1.5}>
{item.email || '-'}
</Text>
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4} c="dimmed">
Telepon
</Text>
<Text fz="sm" lh={1.5}>
{item.notelp || '-'}
</Text>
</Box>
<Box>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/ppid/permohonan-keberatan-informasi-publik/${item.id}`)}
onClick={() =>
router.push(
`/admin/ppid/permohonan-keberatan-informasi-publik/${item.id}`
)
}
mt={4}
>
Detail
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Box>
</Stack>
</Paper>
))}
</Stack>
</>
)}
</Stack>
<Center mt="xl">
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10);
window.scrollTo(0, 0);
}}
total={totalPages}
withEdges
withControls
radius="md"
/>
</Center>
</Paper>
</Box>
);
)
}
export default Page;
export default Page

2
src/app/admin/(dashboard)/ppid/profil-ppid/[id]/page.tsx
View File

@@ -138,7 +138,7 @@ function EditProfilePPID() {
}
return (
<Box p="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Stack gap="md">
<Group mb="md">
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">

122
src/app/admin/(dashboard)/ppid/profil-ppid/page.tsx
View File

@@ -7,13 +7,13 @@ import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
function Page() {
const router = useRouter()
const allList = useProxy(stateProfilePPID)
const router = useRouter();
const allList = useProxy(stateProfilePPID);
useShallowEffect(() => {
allList.profile.load("edit") // Assuming "1" is your default ID, adjust as needed
}, [])
allList.profile.load("edit");
}, []);
if (!allList.profile.data) {
return (
@@ -32,19 +32,19 @@ function Page() {
<Stack gap="md">
<Grid>
<GridCol span={{ base: 12, md: 11 }}>
<Title order={3} c={colors['blue-button']}>Preview Profil PPID</Title>
<Title order={3} c={colors['blue-button']} lh={1.2}>Preview Profil PPID</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button
w={{base: '100%', md: "110%"}}
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
onClick={() => router.push(`/admin/ppid/profil-ppid/${allList.profile.data?.id}`)}
>
Edit
</Button>
<Button
w={{ base: '100%', md: "110%" }}
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
onClick={() => router.push(`/admin/ppid/profil-ppid/${allList.profile.data?.id}`)}
>
Edit
</Button>
</GridCol>
</Grid>
{dataArray.map((item) => (
@@ -57,9 +57,14 @@ function Page() {
</Center>
</GridCol>
<GridCol span={12}>
<Text ta="center" fz={{ base: "1.2rem", md: "1.8rem" }} fw="bold" c={colors['blue-button']}>
<Title
order={2}
c={colors['blue-button']}
ta="center"
lh={1.15}
>
PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA
</Text>
</Title>
</GridCol>
</Grid>
</Box>
@@ -87,34 +92,77 @@ function Page() {
className="glass3"
style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
>
<Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
<Title
order={3}
c={colors['white-1']}
ta="center"
lh={1.2}
>
{item.name}
</Text>
</Title>
</Paper>
</Stack>
</Paper>
<Box mt="lg">
<Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mb={4}>Biodata</Text>
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" c={colors['blue-button']} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: item.biodata }} />
<Title order={3} lh={1.2} mb={4}>
Biodata
</Title>
<Text
fz={{ base: 'sm', md: 'md' }}
ta="justify"
c={colors['blue-button']}
lh={1.5}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
dangerouslySetInnerHTML={{ __html: item.biodata }}
/>
</Box>
<Box mt="xl">
<Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mb={4}>Riwayat Karir</Text>
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" c={colors['blue-button']} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: item.riwayat }} />
</Box>
<Box mt="xl">
<Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mb={4}>Pengalaman Organisasi</Text>
<Title order={3} lh={1.2} mb={4}>
Riwayat Karir
</Title>
<Box px={20}>
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" c={colors['blue-button']} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: item.pengalaman }} />
<Text
fz={{ base: 'sm', md: 'md' }}
ta="justify"
c={colors['blue-button']}
lh={1.5}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
dangerouslySetInnerHTML={{ __html: item.riwayat }}
/>
</Box>
</Box>
<Box mt="xl" mb="lg">
<Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mb={4}>Program Kerja Unggulan</Text>
<Box mt="xl">
<Title order={3} lh={1.2} mb={4}>
Pengalaman Organisasi
</Title>
<Box px={20}>
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" c={colors['blue-button']} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: item.unggulan }} />
<Text
fz={{ base: 'sm', md: 'md' }}
ta="justify"
c={colors['blue-button']}
lh={1.5}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
dangerouslySetInnerHTML={{ __html: item.pengalaman }}
/>
</Box>
</Box>
<Box mt="xl" mb="lg">
<Title order={3} lh={1.2} mb={4}>
Program Kerja Unggulan
</Title>
<Box px={20}>
<Text
fz={{ base: 'sm', md: 'md' }}
ta="justify"
c={colors['blue-button']}
lh={1.5}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
dangerouslySetInnerHTML={{ __html: item.unggulan }}
/>
</Box>
</Box>
</Box>
@@ -122,9 +170,7 @@ function Page() {
))}
</Stack>
</Paper>
)
);
}
export default Page;

125
src/app/admin/(dashboard)/ppid/struktur-ppid/_lib/layoutTabs.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { IconBuildingCommunity, IconHierarchy2, IconUsers } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
@@ -63,51 +63,92 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
keepMounted={false}
>
{/* ✅ Scroll horizontal wrapper */}
<ScrollArea type="auto" offsetScrollbars>
<TabsList
p="sm"
<Box visibleFrom='md' pb={10}>
<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", // ✅ biar nggak nempel ke tepi
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
</Box>
<Box hiddenFrom='md' pb={10}>
<ScrollArea
type="auto"
offsetScrollbars={false}
w="100%"
>
<TabsList
p="xs" // lebih kecil
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
borderRadius: "1rem",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
width: "max-content", // ⬅️ kunci
maxWidth: "100%", // ⬅️ penting
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
paddingInline: "0.75rem", // ⬅️ lebih ramping
flexShrink: 0, // ✅ jangan mengecil aneh-aneh
}}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</ScrollArea>
</Box>
{tabs.map((tab, i) => (
<TabsPanel
key={i}
value={tab.value}
style={{
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
padding: "1.5rem",
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
borderRadius: "1rem",
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
display: "flex",
flexWrap: "nowrap",
gap: "0.5rem",
paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
}}
>
{tabs.map((tab, i) => (
<TabsTab
key={i}
value={tab.value}
leftSection={tab.icon}
style={{
fontWeight: 600,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
>
{tab.label}
</TabsTab>
))}
</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>
{children}
</TabsPanel>
))}
</Tabs>
</Stack >
);
}

2
src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/[id]/edit/page.tsx
View File

@@ -153,7 +153,7 @@ export default function EditPegawaiPPID() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />

4
src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/[id]/page.tsx
View File

@@ -51,7 +51,7 @@ function DetailPegawai() {
const data = statePegawai.findUnique.data;
return (
<Box>
<Box px={{ base: 0, md: 'xs' }} py="xs">
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
@@ -59,7 +59,7 @@ function DetailPegawai() {
</Box>
<Paper
withBorder
w={{ base: "100%", md: "60%" }}
w={{ base: "100%", md: "70%" }}
bg={colors['white-1']}
p="lg"
radius="md"

2
src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/create/page.tsx
View File

@@ -78,7 +78,7 @@ function CreatePegawaiPPID() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />

191
src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/page.tsx
View File

@@ -1,13 +1,32 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Badge, Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title } from '@mantine/core';
import { IconCheck, IconDeviceImacCog, IconPlus, IconSearch, IconX } from '@tabler/icons-react';
import {
Badge,
Box,
Button,
Center,
Group,
Pagination,
Paper,
Skeleton,
Stack,
Table,
TableTbody,
TableTd,
TableTh,
TableThead,
TableTr,
Text,
Title
} from '@mantine/core';
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import stateStrukturPPID from '../../../_state/ppid/struktur_ppid/struktur_PPID';
import { useDebouncedValue } from '@mantine/hooks';
function PegawaiPPID() {
const [search, setSearch] = useState("");
@@ -28,6 +47,7 @@ function PegawaiPPID() {
function ListPegawaiPPID({ search }: { search: string }) {
const stateOrganisasi = useProxy(stateStrukturPPID.pegawai);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000);
const {
data,
@@ -38,47 +58,28 @@ function ListPegawaiPPID({ search }: { search: string }) {
} = stateOrganisasi.findMany;
useEffect(() => {
load(page, 10, search);
}, [page, search]);
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
const filteredData = data || []
const filteredData = data || [];
// Handle loading state
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton height={300} />
<Stack py="xl">
<Skeleton height={300} radius="md" />
</Stack>
);
}
if (data.length === 0) {
return (
<Box py={10}>
<Box py="xl">
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Pegawai PPID</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/ppid/struktur-ppid/pegawai/create')}
>
Tambah Baru
</Button>
</Group>
<Center py="xl">
<Text c="dimmed">Tidak ada data pegawai yang ditemukan</Text>
</Center>
</Paper>
</Box>
);
}
return (
<Box py={10}>
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Pegawai PPID</Title>
<Title order={2} lh={1.2}>
Daftar Pegawai PPID
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
@@ -87,53 +88,70 @@ function ListPegawaiPPID({ search }: { search: string }) {
>
Tambah Baru
</Button>
</Group>
<Center py="xl">
<Text c="dimmed" fz={{ base: 'sm', md: 'md' }} lh={1.5}>
Tidak ada data pegawai yang ditemukan
</Text>
</Center>
</Paper>
</Box>
);
}
return (
<Box py="xl">
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={2} lh={1.2}>
Daftar Pegawai PPID
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/ppid/struktur-ppid/pegawai/create')}
>
Tambah Baru
</Button>
</Group>
<Box style={{ overflowX: "auto" }}>
<Table highlightOnHover>
{/* Desktop: Table */}
<Box visibleFrom="md">
<Table highlightOnHover miw={0}>
<TableThead>
<TableTr>
<TableTh style={{ width: '25%' }}>Nama Lengkap</TableTh>
<TableTh style={{ width: '20%' }}>Posisi</TableTh>
<TableTh style={{ width: '10%' }}>Status</TableTh>
<TableTh style={{ width: '10%' }}>Aksi</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>
Nama Lengkap
</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>
Posisi
</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>
Status
</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>
Aksi
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Box w={150}>
<Text fw={500} truncate="end" lineClamp={1}>
{item.namaLengkap}
</Text>
</Box>
<Text fz="md" fw={500} lh={1.5} truncate="end">
{item.namaLengkap}
</Text>
</TableTd>
<TableTd>
<Box w={150}>
<Badge variant="light" color="blue">
{item.posisi?.nama || 'Belum diatur'}
</Badge>
</Box>
<Badge variant="light" color="blue" fz="sm" lh={1.4}>
{item.posisi?.nama || 'Belum diatur'}
</Badge>
</TableTd>
<TableTd>
<Group gap="xs" wrap="nowrap">
<Box visibleFrom="sm">
<Badge color={item.isActive ? "green" : "red"}>
{item.isActive ? "Aktif" : "Tidak Aktif"}
</Badge>
</Box>
<Box hiddenFrom="sm">
{item.isActive ? (
<ThemeIcon color="green" variant="light" size="sm">
<IconCheck size={16} />
</ThemeIcon>
) : (
<ThemeIcon color="red" variant="light" size="sm">
<IconX size={16} />
</ThemeIcon>
)}
</Box>
</Group>
<Badge color={item.isActive ? "green" : "red"} fz="sm" lh={1.4}>
{item.isActive ? "Aktif" : "Tidak Aktif"}
</Badge>
</TableTd>
<TableTd>
<Button
@@ -143,6 +161,7 @@ function ListPegawaiPPID({ search }: { search: string }) {
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/ppid/struktur-ppid/pegawai/${item.id}`)}
fz="sm"
>
Detail
</Button>
@@ -152,7 +171,47 @@ function ListPegawaiPPID({ search }: { search: string }) {
</TableTbody>
</Table>
</Box>
<Center mt="lg">
{/* Mobile: Card List */}
<Stack hiddenFrom="md" gap="sm" mt="md">
{filteredData.map((item) => (
<Paper key={item.id} withBorder p="md" radius="md">
<Stack gap={"xs"}>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Nama Lengkap</Text>
<Text fz="md" fw={500} lh={1.4}>
{item.namaLengkap}
</Text>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Posisi</Text>
<Badge variant="light" color="blue" fz="xs" lh={1.4}>
{item.posisi?.nama || 'Belum diatur'}
</Badge>
</Box>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Status</Text>
<Badge color={item.isActive ? "green" : "red"} fz="xs" lh={1.4}>
{item.isActive ? "Aktif" : "Tidak Aktif"}
</Badge>
</Box>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/ppid/struktur-ppid/pegawai/${item.id}`)}
fz="xs"
>
Detail
</Button>
</Stack>
</Paper>
))}
</Stack>
<Center mt="xl">
<Pagination
value={page}
onChange={(newPage) => {
@@ -170,4 +229,4 @@ function ListPegawaiPPID({ search }: { search: string }) {
);
}
export default PegawaiPPID;
export default PegawaiPPID;

2
src/app/admin/(dashboard)/ppid/struktur-ppid/posisi-organisasi/[id]/page.tsx
View File

@@ -107,7 +107,7 @@ function EditPosisiOrganisasiPPID() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />

2
src/app/admin/(dashboard)/ppid/struktur-ppid/posisi-organisasi/create/page.tsx
View File

@@ -46,7 +46,7 @@ function CreatePosisiOrganisasiPPID() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />

144
src/app/admin/(dashboard)/ppid/struktur-ppid/posisi-organisasi/page.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -31,6 +31,7 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
const router = useRouter();
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const [debouncedSearch] = useDebouncedValue(search, 1000);
const {
data,
@@ -41,8 +42,8 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
} = stateOrganisasi.findMany;
useShallowEffect(() => {
load(page, 10, search);
}, [page, search]);
load(page, 10, debouncedSearch);
}, [page, debouncedSearch]);
const handleHapus = async () => {
if (selectedId) {
@@ -56,63 +57,63 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
if (loading || !data) {
return (
<Stack py={10}>
<Stack py={{ base: 'sm', md: 'md' }}>
<Skeleton height={600} radius="md" />
</Stack>
);
}
return (
<Box py={10}>
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Posisi Organisasi PPID</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/ppid/struktur-ppid/posisi-organisasi/create')}
>
Tambah Baru
</Button>
<Box py={{ base: 'sm', md: 'md' }}>
<Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
<Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
<Title order={2}>Daftar Posisi Organisasi PPID</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/ppid/struktur-ppid/posisi-organisasi/create')}
>
Tambah Baru
</Button>
</Group>
<Box style={{ overflowX: 'auto' }}>
{/* Desktop Table */}
<Box visibleFrom="md">
<Table highlightOnHover>
<TableThead>
<TableTr>
<TableTh style={{ width: '20%' }}>Nama Posisi</TableTh>
<TableTh style={{ width: '20%' }}>Deskripsi</TableTh>
<TableTh style={{ width: '20%' }}>Hierarki</TableTh>
<TableTh style={{ width: '20%' }}>Edit</TableTh>
<TableTh style={{ width: '20%' }}>Hapus</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>Nama Posisi</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>Deskripsi</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>Hierarki</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>Edit</TableTh>
<TableTh fz="sm" fw={600} lh={1.4}>Hapus</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd style={{ width: '20%' }}>
<Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
<TableTd>
<Text fz="md" fw={600} lh={1.5} truncate="end" lineClamp={1}>{item.nama}</Text>
</TableTd>
<TableTd style={{ width: '20%' }}>
<Box w={200}>
<Text lineClamp={1} fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }} />
</Box>
<TableTd w={200}>
<Text fz="sm" lh={1.5} c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }} />
</TableTd>
<TableTd style={{ width: '20%' }}>
<Text>{item.hierarki || '-'}</Text>
<TableTd>
<Text fz="md" lh={1.5}>{item.hierarki || '-'}</Text>
</TableTd>
<TableTd style={{ width: '20%' }}>
<Button
variant="light"
color="green"
size="sm"
onClick={() => router.push(`/admin/ppid/struktur-ppid/posisi-organisasi/${item.id}`)}
>
<IconEdit size={18} />
</Button>
<TableTd>
<Button
variant="light"
color="green"
size="sm"
onClick={() => router.push(`/admin/ppid/struktur-ppid/posisi-organisasi/${item.id}`)}
>
<IconEdit size={18} />
</Button>
</TableTd>
<TableTd style={{ width: '20%' }}>
<TableTd>
<Button
variant="light"
color="red"
@@ -129,9 +130,11 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
))
) : (
<TableTr>
<TableTd colSpan={4}>
<Center py={20}>
<Text color="dimmed">Tidak ada data posisi organisasi yang cocok</Text>
<TableTd colSpan={5}>
<Center py={{ base: 'sm', md: 'md' }}>
<Text fz="sm" c="dimmed" ta="center" lh={1.5}>
Tidak ada data posisi organisasi yang cocok
</Text>
</Center>
</TableTd>
</TableTr>
@@ -139,7 +142,59 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
</TableTbody>
</Table>
</Box>
{/* Mobile Card View */}
<Stack gap="xs" hiddenFrom="md">
{filteredData.length > 0 ? (
filteredData.map((item) => (
<Paper key={item.id} withBorder p="sm" radius="sm">
<Stack gap={4}>
<Box>
<Text fz="xs" fw={600} lh={1.4}>Nama Posisi</Text>
<Text fz="sm" fw={600} lh={1.5}>{item.nama}</Text>
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4}>Deskripsi</Text>
<Text fz="sm" lh={1.5} dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }} />
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4}>Hierarki</Text>
<Text fz="sm" lh={1.5}>{item.hierarki || '-'}</Text>
</Box>
<Group justify="flex-end" gap="xs">
<Button
variant="light"
color="green"
size="xs"
onClick={() => router.push(`/admin/ppid/struktur-ppid/posisi-organisasi/${item.id}`)}
>
<IconEdit size={16} />
</Button>
<Button
variant="light"
color="red"
size="xs"
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
>
<IconTrash size={16} />
</Button>
</Group>
</Stack>
</Paper>
))
) : (
<Center py="sm">
<Text fz="sm" c="dimmed" ta="center" lh={1.5}>
Tidak ada data posisi organisasi yang cocok
</Text>
</Center>
)}
</Stack>
</Paper>
<Center>
<Pagination
value={page}
@@ -154,6 +209,7 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
radius="md"
/>
</Center>
{/* Modal Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
@@ -165,4 +221,4 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
);
}
export default PosisiOrganisasiPPID;
export default PosisiOrganisasiPPID;

2
src/app/admin/(dashboard)/ppid/visi-misi-ppid/edit/page.tsx
View File

@@ -71,7 +71,7 @@ function VisiMisiPPIDEdit() {
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Box px={{ base: 0, md: 'lg' }} py="xs">
<Group mb="md">
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />

87
src/app/admin/(dashboard)/ppid/visi-misi-ppid/page.tsx
View File

@@ -7,9 +7,8 @@ import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import stateVisiMisiPPID from '../../_state/ppid/visi_misi_ppid/visimisiPPID';
function VisiMisiPPIDList() {
const router = useRouter()
const router = useRouter();
const listVisiMisi = useProxy(stateVisiMisiPPID);
useShallowEffect(() => {
listVisiMisi.findById.load('1');
@@ -41,15 +40,16 @@ function VisiMisiPPIDList() {
<Title order={3} c={colors['blue-button']}>Preview Visi Misi PPID</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
onClick={() => router.push('/admin/ppid/visi-misi-ppid/edit')}
>
Edit
</Button>
<Button
w={{ base: '100%', md: "110%" }}
c="green"
variant="light"
leftSection={<IconEdit size={18} stroke={2} />}
radius="md"
onClick={() => router.push('/admin/ppid/visi-misi-ppid/edit')}
>
Edit
</Button>
</GridCol>
</Grid>
@@ -58,14 +58,25 @@ function VisiMisiPPIDList() {
<Grid>
<GridCol span={12}>
<Center>
<Image loading='lazy' src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
<Image loading="lazy" src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo PPID" />
</Center>
</GridCol>
<GridCol span={12}>
<Text ta="center" fz={{ base: '1.2rem', md: '1.8rem' }} fw="bold" c={colors['blue-button']}>
<Title
order={2}
ta="center"
c={colors['blue-button']}
style={{ lineHeight: 1.15 }}
>
MOTO PPID DESA DARMASABA
</Text>
<Text ta="center" fz={{ base: '1rem', md: '1.2rem' }} mt="sm">
</Title>
<Text
ta="center"
fz={{ base: 'sm', md: 'md' }}
lh={{ base: 1.5, md: 1.5 }}
mt="sm"
c="black"
>
MEMBERIKAN INFORMASI YANG CEPAT, MUDAH, TEPAT DAN TRANSPARAN
</Text>
</GridCol>
@@ -74,26 +85,50 @@ function VisiMisiPPIDList() {
<Divider my="xl" color={colors['blue-button']} />
<Box>
<Text fz={{ base: '1.5rem', md: '1.75rem' }} fw="bold" ta="center" mb="lg" c={colors['blue-button']}>
<Title
order={2}
ta="center"
mb="lg"
c={colors['blue-button']}
style={{ lineHeight: 1.15 }}
>
VISI PPID
</Text>
<Box
className="prose max-w-none"
</Title>
<Text
ta={{ base: "center", md: "justify" }}
dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.visi }}
style={{wordBreak: "break-word", whiteSpace: "normal", textAlign: "justify"}}
style={{
wordBreak: 'break-word',
whiteSpace: 'normal',
fontSize: '1rem',
lineHeight: 1.55,
color: 'black',
}}
/>
</Box>
<Divider my="xl" color={colors['blue-button']} />
<Box mt="xl">
<Text fz={{ base: '1.5rem', md: '1.75rem' }} fw="bold" ta="center" mb="lg" c={colors['blue-button']}>
<Title
order={2}
ta="center"
mb="lg"
c={colors['blue-button']}
style={{ lineHeight: 1.15 }}
>
MISI PPID
</Text>
<Box
className="prose max-w-none"
</Title>
<Text
ta={"justify"}
dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.misi }}
style={{wordBreak: "break-word", whiteSpace: "normal", textAlign: "justify"}}
style={{
wordBreak: 'break-word',
whiteSpace: 'normal',
fontSize: '1rem',
lineHeight: 1.55,
color: 'black',
}}
/>
</Box>
</Box>
@@ -103,4 +138,4 @@ function VisiMisiPPIDList() {
);
}
export default VisiMisiPPIDList;
export default VisiMisiPPIDList;

64
src/app/api/[[...slugs]]/_lib/ppid/permohonan_informasi_publik/find-many.ts
View File

@@ -1,14 +1,56 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function permohonanInformasiPublikFindMany() {
const res = await prisma.permohonanInformasiPublik.findMany({
include: {
jenisInformasiDiminta: true,
caraMemperolehInformasi: true,
caraMemperolehSalinanInformasi: true,
}
});
return {
data: res,
};
export default async function permohonanInformasiPublikFindMany(
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;
const where: any = { isActive: true };
// Tambahkan pencarian (jika ada)
if (search) {
where.OR = [
{ name: { contains: search, mode: "insensitive" } },
{ email: { contains: search, mode: "insensitive" } },
];
}
try {
const [data, total] = await Promise.all([
prisma.permohonanInformasiPublik.findMany({
where,
skip,
include: {
jenisInformasiDiminta: true,
caraMemperolehInformasi: true,
caraMemperolehSalinanInformasi: true,
},
take: limit,
orderBy: { name: "asc" }, // opsional, kalau mau urut berdasarkan waktu
}),
prisma.permohonanInformasiPublik.count({
where: { isActive: true },
}),
]);
return {
success: true,
message: "Success fetch formulir permohonan keberatan with pagination",
data,
page,
totalPages: Math.ceil(total / limit),
total,
};
} catch (e) {
console.error("Find many paginated error:", e);
return {
success: false,
message: "Failed fetch formulir permohonan keberatan with pagination",
};
}
}

51
src/app/api/[[...slugs]]/_lib/ppid/permohonan_keberatan_informasi_publik/find-many.ts
View File

@@ -1,8 +1,49 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function permohonanKeberatanInformasiPublikFindMany() {
const res = await prisma.formulirPermohonanKeberatan.findMany();
return {
data: res,
};
export default async function permohonanKeberatanInformasiPublikFindMany(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;
const where: any = { isActive: true };
// Tambahkan pencarian (jika ada)
if (search) {
where.OR = [
{ name: { contains: search, mode: 'insensitive' } },
{email: { contains: search, mode: 'insensitive' } },
];
}
try {
const [data, total] = await Promise.all([
prisma.formulirPermohonanKeberatan.findMany({
where,
skip,
take: limit,
orderBy: { name: "asc" }, // opsional, kalau mau urut berdasarkan waktu
}),
prisma.formulirPermohonanKeberatan.count({
where: { isActive: true },
}),
]);
return {
success: true,
message: "Success fetch formulir permohonan keberatan with pagination",
data,
page,
totalPages: Math.ceil(total / limit),
total,
};
} catch (e) {
console.error("Find many paginated error:", e);
return {
success: false,
message: "Failed fetch formulir permohonan keberatan with pagination",
};
}
}

361
src/app/darmasaba/_com/ModernNewsNotification.tsx
View File

@@ -216,105 +216,282 @@ export default function ModernNewsNotification({
{/* Widget Panel */}
<Transition mounted={widgetOpen} transition="slide-up" duration={300}>
{(styles) => (
<Paper
style={{
...styles,
position: "fixed",
bottom: "100px",
left: "24px",
width: "90vw",
maxWidth: 380,
maxHeight: "500px",
boxShadow: "0 8px 32px rgba(0,0,0,0.12)",
borderRadius: "16px",
overflow: "hidden",
}}
>
<Box
style={{
background: "linear-gradient(135deg, #1e5a7e 0%, #2c7da0 100%)",
padding: "16px 20px",
color: "white",
}}
>
<Group justify="space-between">
<Group gap="xs">
<IconBell size={20} />
<Text c="white" fw={600} size="md">
Berita & Pengumuman
</Text>
</Group>
<CloseButton
onClick={() => {
setWidgetOpen(false);
onSeen?.();
<Box>
<Box hiddenFrom="md">
<Paper
style={{
...styles,
position: "fixed",
bottom: "100px",
left: "24px",
width: "90vw",
maxWidth: 380,
maxHeight: "500px",
boxShadow: "0 8px 32px rgba(0,0,0,0.12)",
borderRadius: "16px",
overflow: "hidden",
}}
>
<Box
style={{
background: "linear-gradient(135deg, #1e5a7e 0%, #2c7da0 100%)",
padding: "16px 20px",
color: "white",
}}
variant="transparent"
c="white"
/>
</Group>
</Box>
<Box style={{ maxHeight: "400px", overflowY: "auto", padding: "12px" }}>
{news.length === 0 ? (
<Box p="xl" style={{ textAlign: "center" }}>
<Text c="dimmed" size="sm">
Tidak ada berita terbaru
</Text>
>
<Group justify="space-between">
<Group gap="xs">
<IconBell size={20} />
<Text c="white" fw={600} size="md">
Berita & Pengumuman
</Text>
</Group>
<CloseButton
onClick={() => {
setWidgetOpen(false);
onSeen?.();
}}
variant="transparent"
c="white"
/>
</Group>
</Box>
) : (
<Stack gap="xs">
{news.map((item) => (
<Paper
key={item.id}
p="md"
radius="md"
style={{
border: "1px solid #e9ecef",
cursor: "pointer",
transition: "all 0.2s ease",
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = "#1e5a7e";
e.currentTarget.style.transform = "translateY(-2px)";
e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.08)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = "#e9ecef";
e.currentTarget.style.transform = "translateY(0)";
e.currentTarget.style.boxShadow = "none";
}}
onClick={() => handleNotificationClick(item)}
>
<Group justify="space-between" mb="xs">
<Badge
size="sm"
color={item.type === "berita" ? "blue" : "orange"}
variant="light"
<Box style={{ maxHeight: "400px", overflowY: "auto", padding: "12px" }}>
{news.length === 0 ? (
<Box p="xl" style={{ textAlign: "center" }}>
<Text c="dimmed" size="sm">
Tidak ada berita terbaru
</Text>
</Box>
) : (
<Stack gap="xs">
{news.map((item) => (
<Paper
key={item.id}
p="md"
radius="md"
style={{
border: "1px solid #e9ecef",
cursor: "pointer",
transition: "all 0.2s ease",
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = "#1e5a7e";
e.currentTarget.style.transform = "translateY(-2px)";
e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.08)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = "#e9ecef";
e.currentTarget.style.transform = "translateY(0)";
e.currentTarget.style.boxShadow = "none";
}}
onClick={() => handleNotificationClick(item)}
>
{item.type === "berita" ? "Berita" : "Pengumuman"}
</Badge>
<IconChevronRight size={16} color="#adb5bd" />
</Group>
<Text fw={600} size="sm" mb={4} lineClamp={2}>
{item.title || "Tanpa Judul"}
</Text>
<Text size="xs" c="dimmed" lineClamp={2}>
{stripHtml(item.content).substring(0, 100)}...
</Text>
</Paper>
))}
</Stack>
)}
<Group justify="space-between" mb="xs">
<Badge
size="sm"
color={item.type === "berita" ? "blue" : "orange"}
variant="light"
>
{item.type === "berita" ? "Berita" : "Pengumuman"}
</Badge>
<IconChevronRight size={16} color="#adb5bd" />
</Group>
<Text fw={600} size="sm" mb={4} lineClamp={2}>
{item.title || "Tanpa Judul"}
</Text>
<Text size="xs" c="dimmed" lineClamp={2}>
{stripHtml(item.content).substring(0, 100)}...
</Text>
</Paper>
))}
</Stack>
)}
</Box>
</Paper>
</Box>
</Paper>
<Box visibleFrom="md">
<Paper
style={{
...styles,
position: "fixed",
bottom: "100px",
right: "24px",
width: "90vw",
maxWidth: 380,
maxHeight: "500px",
boxShadow: "0 8px 32px rgba(0,0,0,0.12)",
borderRadius: "16px",
overflow: "hidden",
}}
>
<Box
style={{
background: "linear-gradient(135deg, #1e5a7e 0%, #2c7da0 100%)",
padding: "16px 20px",
color: "white",
}}
>
<Group justify="space-between">
<Group gap="xs">
<IconBell size={20} />
<Text c="white" fw={600} size="md">
Berita & Pengumuman
</Text>
</Group>
<CloseButton
onClick={() => {
setWidgetOpen(false);
onSeen?.();
}}
variant="transparent"
c="white"
/>
</Group>
</Box>
<Box style={{ maxHeight: "400px", overflowY: "auto", padding: "12px" }}>
{news.length === 0 ? (
<Box p="xl" style={{ textAlign: "center" }}>
<Text c="dimmed" size="sm">
Tidak ada berita terbaru
</Text>
</Box>
) : (
<Stack gap="xs">
{news.map((item) => (
<Paper
key={item.id}
p="md"
radius="md"
style={{
border: "1px solid #e9ecef",
cursor: "pointer",
transition: "all 0.2s ease",
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = "#1e5a7e";
e.currentTarget.style.transform = "translateY(-2px)";
e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.08)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = "#e9ecef";
e.currentTarget.style.transform = "translateY(0)";
e.currentTarget.style.boxShadow = "none";
}}
onClick={() => handleNotificationClick(item)}
>
<Group justify="space-between" mb="xs">
<Badge
size="sm"
color={item.type === "berita" ? "blue" : "orange"}
variant="light"
>
{item.type === "berita" ? "Berita" : "Pengumuman"}
</Badge>
<IconChevronRight size={16} color="#adb5bd" />
</Group>
<Text fw={600} size="sm" mb={4} lineClamp={2}>
{item.title || "Tanpa Judul"}
</Text>
<Text size="xs" c="dimmed" lineClamp={2}>
{stripHtml(item.content).substring(0, 100)}...
</Text>
</Paper>
))}
</Stack>
)}
</Box>
</Paper>
</Box>
</Box>
)}
</Transition>
{/* Toast Notification */}
<Transition
<Box>
<Box hiddenFrom="md">
<Transition
mounted={toastVisible && !!currentNews}
transition="slide-left"
duration={300}
>
{(styles) => (
<Paper
style={{
...styles,
position: "fixed",
bottom: "100px",
left: "24px",
width: "90vw",
maxWidth: 380,
boxShadow: "0 8px 32px rgba(0,0,0,0.15)",
borderRadius: "12px",
overflow: "hidden",
border: "1px solid #e9ecef",
}}
onClick={handleLihatSemua}
>
<Box
style={{
height: "3px",
background: "#1e5a7e",
animation: "shrink 8s linear forwards",
}}
/>
<style>{`
@keyframes shrink {
from { width: 100%; }
to { width: 0%; }
}
`}</style>
<Box p="md">
<Group justify="space-between" mb="xs">
<Badge
size="md"
color={currentNews?.type === "berita" ? "blue" : "orange"}
variant="light"
>
{currentNews?.type === "berita"
? "Berita Terbaru"
: "Pengumuman"}
</Badge>
<CloseButton onClick={handleDismissToast} size="sm" />
</Group>
<Text fw={600} size="sm" mb={6}>
{currentNews?.title || "Informasi Terbaru"}
</Text>
<Text size="xs" c="dimmed" lineClamp={3}>
{stripHtml(currentNews?.content || "")}
</Text>
<Group justify="space-between" mt="md">
<Text size="xs" c="dimmed">
{news.length > 1 ? `${news.length} berita tersedia` : "1 berita"}
</Text>
<Text
size="xs"
fw={500}
c="#1e5a7e"
style={{ cursor: "pointer" }}
onClick={handleLihatSemua}
>
Lihat Semua →
</Text>
</Group>
</Box>
</Paper>
)}
</Transition>
</Box>
<Box visibleFrom="md">
<Transition
mounted={toastVisible && !!currentNews}
transition="slide-left"
transition="slide-right"
duration={300}
>
{(styles) => (
@@ -323,7 +500,7 @@ export default function ModernNewsNotification({
...styles,
position: "fixed",
bottom: "100px",
left: "24px",
right: "24px",
width: "90vw",
maxWidth: 380,
boxShadow: "0 8px 32px rgba(0,0,0,0.15)",
@@ -387,6 +564,8 @@ export default function ModernNewsNotification({
</Paper>
)}
</Transition>
</Box>
</Box>
</>
);
}

13
src/app/darmasaba/_com/NavbarMainMenu.tsx
View File

@@ -3,18 +3,17 @@
import colors from "@/con/colors"
import stateNav from "@/state/state-nav"
import { ActionIcon, Button, Container, Flex, Image, Menu, MenuTarget, Stack, Tooltip } from "@mantine/core"
import { IconSearch, IconUser } from "@tabler/icons-react"
import { IconSearch, IconUserCog } from "@tabler/icons-react"
import { useTransitionRouter } from 'next-view-transitions'
import { usePathname, useRouter } from "next/navigation"
import { useSnapshot } from "valtio"
import { MenuItem } from "../../../../types/menu-item"
import { NavbarSearch } from "./NavBarSearch"
import { NavbarSubMenu } from "./NavbarSubMenu"
import { authStore } from "@/store/authStore";
// contoh state auth (dummy aja dulu, bisa diganti sesuai sistem auth kamu)
const stateAuth = {
role: "admin", // coba ubah ke "user" buat test
}
const isAdmin = authStore.user?.roleId === 0 || authStore.user?.roleId === 1 || authStore.user?.roleId === 2 || authStore.user?.roleId === 3 || authStore.user?.roleId === 4;
export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
const { item, isSearch } = useSnapshot(stateNav)
@@ -70,8 +69,8 @@ export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
</Tooltip>
{/* hanya tampil kalau role = admin */}
{stateAuth.role === "admin" && (
<Tooltip label="Profil Saya" position="bottom" withArrow>
{isAdmin && (
<Tooltip label="Kembali ke Admin" position="bottom" withArrow>
<ActionIcon
onClick={() => {
next.push("/admin/landing-page/profil/program-inovasi")
@@ -80,7 +79,7 @@ export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
radius="xl"
variant="light"
>
<IconUser size={22} />
<IconUserCog size={22} />
</ActionIcon>
</Tooltip>
)}