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

QC User & Admin Responsive : Menu Landing Page - Desa

Browse Source
This commit is contained in:
nico
2025-10-02 00:10:33 +08:00
parent 63054cedf0
commit 8a6d8ed8db
70 changed files with 1839 additions and 1052 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/admin/(dashboard)/_state/landing-page/profile.ts
View File

@@ -388,16 +388,15 @@ const pejabatDesa = proxy({
this.error = null;
try {
const response = await fetch(
`/api/landingpage/pejabatdesa/${this.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
}
);
// Ensure ID is properly encoded in the URL
const url = new URL(`/api/landingpage/pejabatdesa/${encodeURIComponent(this.id)}`, window.location.origin);
const response = await fetch(url.toString(), {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));

27
src/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik.ts
View File

@@ -112,7 +112,32 @@ const statepermohonanInformasiPublik = proxy({
statepermohonanInformasiPublik.findMany.data = res.data?.data ?? [];
}
}
}
},
findUnique: {
data: null as Prisma.PermohonanInformasiPublikGetPayload<{
include: {
jenisInformasiDiminta: true,
caraMemperolehInformasi: true,
caraMemperolehSalinanInformasi: true,
};
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/ppid/permohonaninformasipublik/${id}`);
if (res.ok) {
const data = await res.json();
statepermohonanInformasiPublik.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch program inovasi:", res.statusText);
statepermohonanInformasiPublik.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching program inovasi:", error);
statepermohonanInformasiPublik.findUnique.data = null;
}
},
},
})
const statepermohonanInformasiPublikForm = proxy({

24
src/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi.ts
View File

@@ -57,7 +57,29 @@ const permohonanKeberatanInformasi = proxy({
permohonanKeberatanInformasi.findMany.data = res.data?.data ?? [];
}
}
}
},
findUnique: {
data: null as Prisma.FormulirPermohonanKeberatanGetPayload<{
omit: {
isActive: true;
};
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/ppid/permohonankeberataninformasipublik/${id}`);
if (res.ok) {
const data = await res.json();
permohonanKeberatanInformasi.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch permohonan keberatan informasi:", res.statusText);
permohonanKeberatanInformasi.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching permohonan keberatan informasi:", error);
permohonanKeberatanInformasi.findUnique.data = null;
}
},
}
});
export default permohonanKeberatanInformasi;

62
src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts
View File

@@ -381,7 +381,44 @@ const posisiOrganisasi = proxy({
}
},
},
findManyAll: {
data: [] as Array<{
id: string;
nama: string;
deskripsi: string | null;
hierarki: number;
}>,
loading: false,
search: "",
load: async (search = "") => {
// Change to arrow function
posisiOrganisasi.findManyAll.loading = true; // Use the full path to access the property
posisiOrganisasi.findManyAll.search = search;
try {
const query: any = { search };
if (search) query.search = search;
const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi[
"find-many-all"
].get({
query,
});
if (res.status === 200 && res.data?.success) {
posisiOrganisasi.findManyAll.data = res.data.data || [];
} else {
console.error("Failed to load posisiOrganisasi:", res.data?.message);
posisiOrganisasi.findManyAll.data = [];
}
} catch (error) {
console.error("Error loading posisiOrganisasi:", error);
posisiOrganisasi.findManyAll.data = [];
} finally {
posisiOrganisasi.findManyAll.loading = false;
}
},
},
delete: {
loading: false,
async byId(id: string) {
@@ -571,6 +608,31 @@ const pegawai = proxy({
},
},
nonActive: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
pegawai.nonActive.loading = true;
const res = await fetch(`/api/ppid/strukturppid/pegawai/non-active/${id}`, {
method: "DELETE", // biasanya nonActive pakai PATCH
});
const json = await res.json();
if (res.ok) {
toast.success(json.message ?? "Pegawai berhasil dinonaktifkan");
await pegawai.findMany.load(); // refresh data
} else {
toast.error(json.message ?? "Gagal menonaktifkan pegawai");
}
} catch (error) {
console.error("Gagal nonActive:", error);
toast.error("Terjadi kesalahan saat menonaktifkan pegawai");
} finally {
pegawai.nonActive.loading = false;
}
},
},
edit: {
id: "",
form: { ...pegawaiDefaultForm },

19
src/app/admin/(dashboard)/desa/berita/list-berita/[id]/edit/page.tsx
View File

@@ -166,13 +166,18 @@ function EditBerita() {
error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
/>
<TextInput
label="Deskripsi Singkat"
placeholder="Masukkan deskripsi singkat"
value={formData.deskripsi}
onChange={(e) => handleChange("deskripsi", e.target.value)}
required
/>
<Box>
<Text fz="sm" fw="bold">
Deskripsi Singkat
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) =>
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
}
/>
</Box>
{/* Upload Gambar */}
<Box>

2
src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx
View File

@@ -80,7 +80,7 @@ function DetailBerita() {
<Box>
<Text fz="lg" fw="bold">Deskripsi</Text>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
</Box>
<Box>

18
src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx
View File

@@ -131,13 +131,17 @@ export default function CreateBerita() {
required
/>
<TextInput
label="Deskripsi Singkat"
required
placeholder="Masukkan deskripsi berita"
defaultValue={beritaState.berita.create.form.deskripsi}
onChange={(e) => (beritaState.berita.create.form.deskripsi = e.target.value)}
/>
<Box>
<Text fz="sm" fw="bold" mb={6}>
Deskripsi Singkat
</Text>
<CreateEditor
value={beritaState.berita.create.form.deskripsi}
onChange={(htmlContent) => {
beritaState.berita.create.form.deskripsi = htmlContent;
}}
/>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>

38
src/app/admin/(dashboard)/desa/gallery/lib/youtube-utils.ts
View File

@@ -1,31 +1,11 @@
// export function convertYoutubeUrlToEmbed(url: string) {
// const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
// return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
// }
export function convertYoutubeUrlToEmbed(url: string) {
const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
const videoIdMatch = url.match(
/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
);
return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
}
// (url: string): string | null {
// const watchRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/;
// const shortRegex = /(?:https?:\/\/)?youtu\.be\/([^?]+)/;
// const matchWatch = url.match(watchRegex);
// const matchShort = url.match(shortRegex);
// if (matchWatch) {
// return `https://www.youtube.com/embed/${matchWatch[1]}`;
// }
// if (matchShort) {
// return `https://www.youtube.com/embed/${matchShort[1]}`;
// }
// return null;
// }
}

50
src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/edit/page.tsx
View File

@@ -44,32 +44,40 @@ function EditSuratKeterangan() {
const [previewImage2, setPreviewImage2] = useState<string | null>(null);
// load data awal
useEffect(() => {
const loadSurat = async () => {
const id = params?.id as string;
if (!id) return;
useEffect(() => {
const loadSurat = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await stateSurat.edit.load(id);
if (data) {
setFormData({
name: data.name || '',
deskripsi: data.deskripsi || '',
imageId: data.imageId || '',
image2Id: data.image2Id || '',
});
try {
const data = await stateSurat.edit.load(id);
if (data) {
// merge style -> isi hanya field kosong
setFormData((prev) => ({
...prev,
name: prev.name || data.name || '',
deskripsi: prev.deskripsi || data.deskripsi || '',
imageId: prev.imageId || data.imageId || '',
image2Id: prev.image2Id || data.image2Id || '',
}));
setPreviewImage(data.image?.link || null);
setPreviewImage2(data.image2?.link || null);
if (data.image?.link && !previewImage) {
setPreviewImage(data.image.link);
}
if (data.image2?.link && !previewImage2) {
setPreviewImage2(data.image2.link);
}
} catch (error) {
console.error('Error loading surat:', error);
toast.error('Gagal memuat data surat');
}
};
} catch (error) {
console.error("Error loading surat:", error);
toast.error("Gagal memuat data surat");
}
};
loadSurat();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [params?.id]);
loadSurat();
}, [params?.id, stateSurat.edit]);
// handler untuk submit
const handleSubmit = useCallback(async () => {

37
src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/edit/page.tsx
View File

@@ -47,11 +47,11 @@ function EditPotensi() {
useEffect(() => {
potensiDesaState.kategoriPotensi.findMany.load();
const loadPotensi = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await potensiState.edit.load(id);
if (data) {
@@ -62,7 +62,17 @@ function EditPotensi() {
content: data.content || "",
imageId: data.imageId || "",
});
// // merge, bukan replace
// setFormData((prev) => ({
// ...prev,
// name: data.name ?? prev.name,
// deskripsi: data.deskripsi ?? prev.deskripsi,
// kategoriId: data.kategoriId ?? prev.kategoriId,
// content: data.content ?? prev.content,
// imageId: data.imageId ?? prev.imageId,
// }));
if (data?.image?.link) {
setPreviewImage(data.image.link);
}
@@ -72,9 +82,10 @@ function EditPotensi() {
toast.error("Gagal memuat data potensi");
}
};
loadPotensi();
}, [params?.id]);
const handleSubmit = async () => {
try {
@@ -143,13 +154,17 @@ function EditPotensi() {
required
/>
<TextInput
label="Deskripsi Singkat"
placeholder="Masukkan deskripsi"
value={formData.deskripsi}
onChange={(e) => handleChange("deskripsi", e.target.value)}
required
/>
<Box>
<Text fz="sm" fw="bold" mb={6}>
Deskripsi Singkat
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) =>
handleChange("deskripsi", htmlContent)
}
/>
</Box>
<Select
value={formData.kategoriId}

4
src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/page.tsx
View File

@@ -25,7 +25,7 @@ export default function DetailPotensi() {
potensiState.delete.byId(selectedId);
setModalHapus(false);
setSelectedId(null);
router.push("/admin/desa/potensi");
router.push("/admin/desa/potensi/list-potensi");
}
};
@@ -77,7 +77,7 @@ export default function DetailPotensi() {
<Box>
<Text fz="lg" fw="bold">Deskripsi</Text>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
</Box>
<Box>

18
src/app/admin/(dashboard)/desa/potensi/list-potensi/create/page.tsx
View File

@@ -101,13 +101,17 @@ function CreatePotensi() {
/>
{/* Deskripsi */}
<TextInput
defaultValue={potensiState.create.form.deskripsi}
onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
label="Deskripsi"
placeholder="Masukkan deskripsi singkat"
required
/>
<Box>
<Text fz="sm" fw="bold" mb={6}>
Deskripsi Singkat
</Text>
<CreateEditor
value={potensiState.create.form.deskripsi}
onChange={(htmlContent) => {
potensiState.create.form.deskripsi = htmlContent;
}}
/>
</Box>
{/* Kategori */}
<Select

15
src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx
View File

@@ -102,20 +102,25 @@ function ListPotensi({ search }: { search: string }) {
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fw={500} truncate="end" lineClamp={1}>
{item.name}
</Text>
<Box w={200}>
<Text fw={500} truncate="end" lineClamp={1}>
{item.name}
</Text>
</Box>
</TableTd>
<TableTd>
<Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
<Box w={200}>
<Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
</Box>
</TableTd>
<TableTd>
<Box w={300}>
<Text
lineClamp={1}
truncate
fz="sm"
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
style={{wordBreak: "break-word", whiteSpace: "normal"}}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
/>
</Box>
</TableTd>

18
src/app/admin/(dashboard)/desa/profile/profile-desa/[id]/maskot_desa/page.tsx
View File

@@ -18,7 +18,9 @@ function Page() {
const router = useRouter();
const params = useParams();
const [images, setImages] = useState<Array<{ file: File | null; preview: string; label: string }>>([]);
const [images, setImages] = useState<
Array<{ file: File | null; preview: string; label: string; imageId?: string }>
>([]);
const [formData, setFormData] = useState({
judul: '',
deskripsi: '',
@@ -55,6 +57,7 @@ function Page() {
file: null,
preview: img.image.link,
label: img.label,
imageId: img.image.id, // simpan id lama
})));
}
}
@@ -88,25 +91,24 @@ function Page() {
// Upload semua gambar baru
for (const img of images) {
if (!img.file) {
// Kalau gambar lama, skip upload
if (!img.preview) continue;
uploadedImages.push({ imageId: '', label: img.label });
if (!img.imageId) continue; // kalau benar2 kosong, skip
uploadedImages.push({ imageId: img.imageId, label: img.label });
continue;
}
// upload baru
const res = await ApiFetch.api.fileStorage.create.post({
file: img.file,
name: img.file.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) {
toast.error("Gagal upload salah satu gambar");
return;
}
uploadedImages.push({ imageId: uploaded.id, label: img.label || 'main' });
uploadedImages.push({ imageId: uploaded.id, label: img.label || "main" });
}
// Update ke global state
maskotState.update.updateField("judul", formData.judul);

4
src/app/admin/(dashboard)/desa/profile/profile-desa/page.tsx
View File

@@ -162,7 +162,7 @@ function Page() {
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" }}>
Lambang Desa
{lambang.judul}
</Text>
</Paper>
</Stack>
@@ -216,7 +216,7 @@ function Page() {
<Divider my="md" color={colors['blue-button']} />
<Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: maskot.deskripsi }} />
<Stack mt="md" gap="sm">
<SimpleGrid cols={{ base: 2, md: 4 }} spacing="md">
<SimpleGrid cols={{ base: 1, md: 4 }} spacing="md">
{maskot.images.map((img, idx) => (
<Card withBorder key={idx} p="xs" w={{ base: '100%', md: 180 }}>
<Center>

30
src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/page.tsx
View File

@@ -75,22 +75,28 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text fw={500} lineClamp={1}>{item.nama}</Text>
<Box w={200}>
<Text fw={500} lineClamp={1}>{item.nama}</Text>
</Box>
</TableTd>
<TableTd>
<Text lineClamp={1}>{item.periode}</Text>
<Box w={200}>
<Text lineClamp={1}>{item.periode}</Text>
</Box>
</TableTd>
<TableTd>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
>
Detail
</Button>
<Box w={200}>
<Button
size="xs"
radius="md"
variant="light"
color="blue"
leftSection={<IconDeviceImacCog size={16} />}
onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
>
Detail
</Button>
</Box>
</TableTd>
</TableTr>
))

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

@@ -26,7 +26,7 @@ export default function DetailResponden() {
stateDetail.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/ppid/ikm-desa-darmasaba/responden")
router.push("/admin/landing-page/indeks-kepuasan-masyarakat/responden")
}
}

4
src/app/admin/(dashboard)/landing-page/prestasi-desa/_lib/layoutTabs.tsx
View File

@@ -2,7 +2,7 @@
'use client'
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { IconCategory, IconListDetails } from '@tabler/icons-react';
import colors from '@/con/colors';
@@ -58,6 +58,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
radius="lg"
keepMounted={false}
>
<ScrollArea type="auto" offsetScrollbars>
<TabsList
p="sm"
style={{
@@ -82,6 +83,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
</Tooltip>
))}
</TabsList>
</ScrollArea>
{tabs.map((tab, i) => (
<TabsPanel

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

@@ -170,12 +170,11 @@ function CreatePrestasiDesa() {
required
/>
<Group justify="flex-end" mt="md">
<Group justify="space-between" mt="md">
<Button
variant="light"
color="gray"
onClick={() => router.back()}
style={{ marginRight: 'auto' }}
>
Batal
</Button>

16
src/app/admin/(dashboard)/landing-page/profile/pejabat-desa/[id]/page.tsx
View File

@@ -46,12 +46,19 @@ function EditPejabatDesa() {
const profileData = await profileLandingPageState.pejabatDesa.findUnique.load(id);
if (profileData) {
// Initialize form data
setFormData({
name: profileData.name || '',
position: profileData.position || '',
imageId: profileData.imageId || null,
});
// Initialize edit state with profile data
profileLandingPageState.pejabatDesa.edit.initialize({
...profileData,
imageId: profileData.imageId || ''
});
if (profileData.image?.link) {
setPreviewImage(profileData.image.link);
}
@@ -110,7 +117,14 @@ function EditPejabatDesa() {
imageId = uploaded.id;
}
// Update global state only on submit
// Ensure we have the ID from the URL
const id = params?.id as string;
if (!id) {
throw new Error("ID tidak ditemukan");
}
// Update global state with the ID and form data
profileLandingPageState.pejabatDesa.edit.id = id;
profileLandingPageState.pejabatDesa.edit.form = {
...formData,
imageId: imageId || '', // Ensure imageId is always a string

42
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx
View File

@@ -1,4 +1,5 @@
'use client'
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
import colors from '@/con/colors';
import {
@@ -33,8 +34,8 @@ function EditFasilitasYangDisediakan() {
const router = useRouter();
const editState = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
// === State lokal form ===
const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
// Load data pertama kali
@@ -44,16 +45,22 @@ function EditFasilitasYangDisediakan() {
}
}, []);
// Sinkronkan state dengan data yang sudah di-load
// Sinkronkan formData saat data load
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
setFormData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? ''
});
}
}, [editState.findById.data]);
const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
if (!judul.trim()) {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
@@ -61,9 +68,13 @@ function EditFasilitasYangDisediakan() {
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
await editState.update.save(editState.findById.data);
// Update global state hanya saat submit
const payload = {
...editState.findById.data,
judul: formData.judul,
deskripsi: formData.deskripsi
};
await editState.update.save(payload);
toast.success('Berhasil menyimpan perubahan');
router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan');
@@ -78,7 +89,6 @@ function EditFasilitasYangDisediakan() {
const handleBack = () => router.back();
// Loading state
if (editState.findById.loading) {
return (
<Box>
@@ -123,9 +133,9 @@ function EditFasilitasYangDisediakan() {
<TextInput
label={<Text fw="bold">Judul</Text>}
placeholder="Masukkan judul fasilitas"
defaultValue={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
value={formData.judul}
onChange={(e) => handleChange('judul', e.currentTarget.value)}
error={!formData.judul && 'Judul wajib diisi'}
/>
{/* Deskripsi */}
@@ -133,8 +143,8 @@ function EditFasilitasYangDisediakan() {
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
<BimbinganBelajarDesaTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
onChange={(value) => handleChange('deskripsi', value)}
initialContent={formData.deskripsi}
/>
</Box>
@@ -144,7 +154,7 @@ function EditFasilitasYangDisediakan() {
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>

53
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx
View File

@@ -1,4 +1,5 @@
'use client'
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
import colors from '@/con/colors';
import {
@@ -33,27 +34,33 @@ function EditLokasiDanJadwal() {
const router = useRouter();
const editState = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
// state lokal untuk form, tidak langsung merubah global state
const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
// load data sekali
// Load data sekali
useShallowEffect(() => {
if (!editState.findById.data) {
editState.findById.initialize();
}
}, []);
// isi state ketika data loaded
// Isi state lokal setelah data global ter-load
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
setFormData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? ''
});
}
}, [editState.findById.data]);
const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
if (!judul.trim()) {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
@@ -61,9 +68,13 @@ function EditLokasiDanJadwal() {
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
await editState.update.save(editState.findById.data);
// update global state hanya saat submit
const updatedData = {
...editState.findById.data,
judul: formData.judul,
deskripsi: formData.deskripsi
};
await editState.update.save(updatedData);
toast.success('Berhasil menyimpan perubahan');
router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal');
@@ -78,7 +89,6 @@ function EditLokasiDanJadwal() {
const handleBack = () => router.back();
// loading state
if (editState.findById.loading) {
return (
<Box>
@@ -92,15 +102,10 @@ function EditLokasiDanJadwal() {
return (
<Box>
<Stack gap="xs">
{/* Header dengan tombol kembali */}
{/* Header */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button
variant="subtle"
onClick={handleBack}
p="xs"
radius="md"
>
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
@@ -125,9 +130,9 @@ function EditLokasiDanJadwal() {
<TextInput
label={<Text fw="bold">Judul</Text>}
placeholder="Masukkan judul lokasi/jadwal"
defaultValue={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
value={formData.judul}
onChange={(e) => handleChange('judul', e.currentTarget.value)}
error={!formData.judul && 'Judul wajib diisi'}
/>
{/* Deskripsi Field */}
@@ -135,8 +140,8 @@ function EditLokasiDanJadwal() {
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
<BimbinganBelajarDesaTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
onChange={(value) => handleChange('deskripsi', value)}
initialContent={formData.deskripsi}
/>
</Box>
@@ -146,7 +151,7 @@ function EditLokasiDanJadwal() {
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>

45
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx
View File

@@ -1,4 +1,5 @@
'use client'
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
import colors from '@/con/colors';
import {
@@ -33,26 +34,31 @@ function EditTujuanProgram() {
const router = useRouter();
const editState = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
// gabung judul & content jadi formData
const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
// load data once
// load data sekali
useShallowEffect(() => {
if (!editState.findById.data) {
editState.findById.initialize();
}
if (!editState.findById.data) editState.findById.initialize();
}, []);
// sync data dari global state ke local formData sekali setelah load
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
setFormData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? '',
});
}
}, [editState.findById.data]);
const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
if (!judul.trim()) {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
@@ -60,8 +66,9 @@ function EditTujuanProgram() {
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
// update global state hanya saat submit
editState.findById.data.judul = formData.judul;
editState.findById.data.deskripsi = formData.deskripsi;
await editState.update.save(editState.findById.data);
toast.success('Berhasil menyimpan perubahan');
@@ -117,18 +124,20 @@ function EditTujuanProgram() {
<TextInput
label={<Text fw="bold">Judul</Text>}
placeholder="Masukkan judul program"
defaultValue={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
value={formData.judul}
onChange={(e) => handleChange('judul', e.currentTarget.value)}
error={!formData.judul && 'Judul wajib diisi'}
/>
{/* Deskripsi Field */}
<Box>
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
<Text fz="sm" fw="bold" mb="xs">
Deskripsi
</Text>
<BimbinganBelajarDesaTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
initialContent={formData.deskripsi}
onChange={(value) => handleChange('deskripsi', value)}
/>
</Box>
@@ -138,7 +147,7 @@ function EditTujuanProgram() {
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>

26
src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx
View File

@@ -5,7 +5,7 @@ import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
@@ -15,23 +15,35 @@ export default function EditDataPendidikan() {
const stateDPM = useProxy(dataPendidikan);
const id = params.id;
// state lokal untuk form
const [formData, setFormData] = useState({
name: '',
jumlah: '',
});
// Load data saat mount
useEffect(() => {
if (id) {
stateDPM.findUnique.load(id).then(() => {
const data = stateDPM.findUnique.data;
if (data) {
stateDPM.update.form = {
setFormData({
name: data.name || '',
jumlah: data.jumlah || '',
};
});
}
});
}
}, [id]);
const handleChange = (field: 'name' | 'jumlah', value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
// update global state hanya saat submit
stateDPM.update.id = id;
stateDPM.update.form = { ...formData };
await stateDPM.update.submit();
router.push('/admin/pendidikan/data-pendidikan');
};
@@ -59,8 +71,8 @@ export default function EditDataPendidikan() {
<TextInput
label="Nama Pendidikan"
placeholder="Contoh: SD, SMP, SMA"
defaultValue={stateDPM.update.form.name}
onChange={(e) => (stateDPM.update.form.name = e.currentTarget.value)}
value={formData.name}
onChange={(e) => handleChange('name', e.currentTarget.value)}
radius="md"
required
/>
@@ -68,8 +80,8 @@ export default function EditDataPendidikan() {
label="Jumlah Peserta"
type="number"
placeholder="Masukkan jumlah peserta"
defaultValue={stateDPM.update.form.jumlah}
onChange={(e) => (stateDPM.update.form.jumlah = e.currentTarget.value)}
value={formData.jumlah}
onChange={(e) => handleChange('jumlah', e.currentTarget.value)}
radius="md"
required
/>

68
src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx
View File

@@ -1,5 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
import colors from '@/con/colors';
import {
@@ -22,64 +23,62 @@ function EditJenjangPendidikan() {
const router = useRouter();
const params = useParams();
const id = params?.id as string;
const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
const [formData, setFormData] = useState({
nama: "",
});
const [formData, setFormData] = useState({ nama: '' });
const [loading, setLoading] = useState(true);
// Load data sekali saat component mount
useEffect(() => {
const loadJenjangPendidikan = async () => {
if (!id) return;
if (!id) return;
const loadJenjang = async () => {
try {
const data = await stateJenjang.edit.load(id);
if (data) {
stateJenjang.edit.id = id;
setFormData({
nama: data.nama || '',
});
stateJenjang.edit.id = id; // tetap simpan di global state
setFormData({ nama: data.nama || '' });
}
} catch (error) {
console.error("Error loading jenjang pendidikan:", error);
toast.error("Gagal memuat data jenjang pendidikan");
console.error('Error loading jenjang pendidikan:', error);
toast.error('Gagal memuat data jenjang pendidikan');
} finally {
setLoading(false);
}
};
loadJenjangPendidikan();
loadJenjang();
}, [id]);
const handleChange = (field: string, value: string) => {
setFormData(prev => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
if (!formData.nama.trim()) {
toast.error('Nama jenjang pendidikan tidak boleh kosong');
return;
}
try {
if (!formData.nama.trim()) {
toast.error('Nama jenjang pendidikan tidak boleh kosong');
return;
}
stateJenjang.edit.form = {
nama: formData.nama.trim(),
};
if (!stateJenjang.edit.id) {
stateJenjang.edit.id = id;
}
stateJenjang.edit.form = { nama: formData.nama.trim() };
if (!stateJenjang.edit.id) stateJenjang.edit.id = id;
const success = await stateJenjang.edit.update();
if (success) {
toast.success("Jenjang pendidikan berhasil diperbarui!");
router.push("/admin/pendidikan/info-sekolah/jenjang-pendidikan");
toast.success('Jenjang pendidikan berhasil diperbarui!');
router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan');
}
} catch (error) {
console.error("Error updating jenjang pendidikan:", error);
toast.error("Terjadi kesalahan saat memperbarui jenjang pendidikan");
console.error('Error updating jenjang pendidikan:', error);
toast.error('Terjadi kesalahan saat memperbarui jenjang pendidikan');
}
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header Back + Title */}
{/* Header */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
@@ -91,7 +90,7 @@ function EditJenjangPendidikan() {
</Title>
</Group>
{/* Form Container */}
{/* Form */}
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
@@ -104,9 +103,10 @@ function EditJenjangPendidikan() {
<TextInput
label="Nama Jenjang Pendidikan"
placeholder="Masukkan nama jenjang pendidikan"
defaultValue={formData.nama}
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
value={formData.nama}
onChange={(e) => handleChange('nama', e.target.value)}
required
disabled={loading}
/>
<Group justify="right">

16
src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx
View File

@@ -31,6 +31,7 @@ export default function EditLembaga() {
jenjangId: '',
});
// Load jenjang pendidikan dan data lembaga
useEffect(() => {
infoSekolahPaud.jenjangPendidikan.findMany.load();
@@ -46,12 +47,17 @@ export default function EditLembaga() {
}
}, [id]);
const handleChange = (field: 'nama' | 'jenjangId', value: string) => {
setForm((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
if (!form.nama || !form.jenjangId) {
toast.warn('Nama dan jenjang pendidikan harus diisi');
return;
}
// Update global state hanya saat submit
state.edit.id = id;
state.edit.form = form;
@@ -65,7 +71,7 @@ export default function EditLembaga() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header dengan back button */}
{/* Header */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button
@@ -82,7 +88,7 @@ export default function EditLembaga() {
</Title>
</Group>
{/* Card Form */}
{/* Form Card */}
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
@@ -95,8 +101,8 @@ export default function EditLembaga() {
<TextInput
label="Nama Lembaga"
placeholder="Masukkan nama lembaga"
defaultValue={form.nama}
onChange={(e) => setForm({ ...form, nama: e.currentTarget.value })}
value={form.nama}
onChange={(e) => handleChange('nama', e.currentTarget.value)}
required
/>
@@ -111,7 +117,7 @@ export default function EditLembaga() {
})) || []
}
value={form.jenjangId}
onChange={(val) => setForm({ ...form, jenjangId: val || '' })}
onChange={(val) => handleChange('jenjangId', val || '')}
required
/>

47
src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx
View File

@@ -1,5 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
import colors from '@/con/colors';
import {
@@ -25,21 +26,22 @@ interface FormPengajar {
}
function EditPengajar() {
const pengajarState = useProxy(infoSekolahPaud.pengajar)
const params = useParams()
const router = useRouter()
const pengajarState = useProxy(infoSekolahPaud.pengajar);
const params = useParams();
const router = useRouter();
const [formData, setFormData] = useState<FormPengajar>({
nama: '',
lembagaId: ''
})
});
useEffect(() => {
const loadPengajar = async () => {
const loadData = async () => {
const id = params?.id as string;
if (!id) return;
try {
infoSekolahPaud.lembagaPendidikan.findMany.load();
const data = await pengajarState.edit.load(id);
if (data) {
setFormData({
@@ -47,30 +49,35 @@ function EditPengajar() {
lembagaId: data.lembagaId || '',
});
}
} catch (error) {
console.error("Error loading pengajar:", error);
} catch (err) {
console.error(err);
toast.error("Gagal memuat data pengajar");
}
}
infoSekolahPaud.lembagaPendidikan.findMany.load()
loadPengajar();
};
loadData();
}, [params?.id]);
const handleChange = (field: keyof FormPengajar, value: string) => {
setFormData(prev => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
try {
// update global state hanya saat submit
pengajarState.edit.form = {
...pengajarState.edit.form,
nama: formData.nama.trim(),
lembagaId: formData.lembagaId.trim(),
}
await pengajarState.edit.update()
toast.success("Data pengajar berhasil diperbarui!")
lembagaId: formData.lembagaId.trim()
};
await pengajarState.edit.update();
toast.success("Data pengajar berhasil diperbarui!");
router.push("/admin/pendidikan/info-sekolah/pengajar");
} catch (error) {
console.error("Error updating pengajar:", error);
} catch (err) {
console.error(err);
toast.error("Terjadi kesalahan saat memperbarui pengajar");
}
}
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -99,8 +106,8 @@ function EditPengajar() {
<TextInput
label="Nama Pengajar"
placeholder="Masukkan nama pengajar"
defaultValue={formData.nama}
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
value={formData.nama}
onChange={(e) => handleChange('nama', e.target.value)}
required
/>
@@ -112,7 +119,7 @@ function EditPengajar() {
label: k.nama
})) ?? []}
value={formData.lembagaId}
onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
onChange={(val) => handleChange('lembagaId', val ?? '')}
required
/>

22
src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx
View File

@@ -1,5 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
import colors from '@/con/colors';
import {
@@ -35,6 +36,7 @@ function EditSiswa() {
lembagaId: '',
});
// Load data siswa
useEffect(() => {
const loadSiswa = async () => {
const id = params?.id as string;
@@ -53,10 +55,20 @@ function EditSiswa() {
toast.error('Gagal memuat data siswa');
}
};
infoSekolahPaud.lembagaPendidikan.findMany.load();
loadSiswa();
}, [params?.id]);
// Handler update local formData
const handleChange = (field: keyof FormSiswa, value: string) => {
setFormData((prev) => ({
...prev,
[field]: value,
}));
};
// Submit ke global state
const handleSubmit = async () => {
try {
siswaState.edit.form = {
@@ -75,7 +87,7 @@ function EditSiswa() {
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header dengan tombol kembali */}
{/* Header */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
@@ -87,7 +99,7 @@ function EditSiswa() {
</Title>
</Group>
{/* Card Form */}
{/* Form Card */}
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
@@ -100,8 +112,8 @@ function EditSiswa() {
<TextInput
label={<Text fz="sm" fw="bold">Nama Siswa</Text>}
placeholder="Masukkan nama siswa"
defaultValue={formData.nama}
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
value={formData.nama}
onChange={(e) => handleChange('nama', e.target.value)}
required
/>
@@ -115,7 +127,7 @@ function EditSiswa() {
})) ?? []
}
value={formData.lembagaId}
onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
onChange={(val) => handleChange('lembagaId', val ?? '')}
required
/>

39
src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx
View File

@@ -33,8 +33,7 @@ function EditJenisProgramYangDiselenggarakan() {
const router = useRouter();
const editState = useProxy(pendidikanNonFormalState.stateJenisProgram);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
const [formData, setFormData] = useState({ judul: '', content: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
// Load data pertama kali
@@ -44,16 +43,22 @@ function EditJenisProgramYangDiselenggarakan() {
}
}, []);
// Sync state dengan data hasil fetch
// Sync state lokal dengan data hasil fetch
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
setFormData({
judul: editState.findById.data.judul ?? '',
content: editState.findById.data.deskripsi ?? '',
});
}
}, [editState.findById.data]);
const handleChange = (field: 'judul' | 'content', value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
if (!judul.trim()) {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
@@ -61,11 +66,15 @@ function EditJenisProgramYangDiselenggarakan() {
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
await editState.update.save(editState.findById.data);
const updatedData = {
...editState.findById.data,
judul: formData.judul,
deskripsi: formData.content,
};
await editState.update.save(updatedData);
toast.success('Berhasil menyimpan perubahan');
router.push(
'/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan'
);
@@ -117,17 +126,17 @@ function EditJenisProgramYangDiselenggarakan() {
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="Masukkan judul program"
defaultValue={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
value={formData.judul}
onChange={(e) => handleChange('judul', e.currentTarget.value)}
error={!formData.judul && 'Judul wajib diisi'}
/>
<Box>
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
<JenisProgramYangDiselenggarakanTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
onChange={(value: string) => handleChange('content', value)}
initialContent={formData.content}
/>
</Box>
@@ -136,7 +145,7 @@ function EditJenisProgramYangDiselenggarakan() {
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>

43
src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx
View File

@@ -1,4 +1,5 @@
'use client'
import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
import colors from '@/con/colors';
import {
@@ -33,8 +34,11 @@ function EditTempatKegiatan() {
const router = useRouter();
const editState = useProxy(pendidikanNonFormalState.stateTempatKegiatan);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
// state lokal form
const [formData, setFormData] = useState({
judul: '',
deskripsi: '',
});
const [isSubmitting, setIsSubmitting] = useState(false);
// load data pertama kali
@@ -44,16 +48,22 @@ function EditTempatKegiatan() {
}
}, []);
// sync state dengan data hasil fetch
// sync state lokal ketika data fetch selesai
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
setFormData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? '',
});
}
}, [editState.findById.data]);
const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
if (!judul.trim()) {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
@@ -61,10 +71,13 @@ function EditTempatKegiatan() {
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
await editState.update.save(editState.findById.data);
const updatedData = {
...editState.findById.data,
judul: formData.judul,
deskripsi: formData.deskripsi,
};
await editState.update.save(updatedData);
toast.success('Berhasil menyimpan perubahan');
router.push(
'/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan'
@@ -117,9 +130,9 @@ function EditTempatKegiatan() {
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="Masukkan judul tempat kegiatan"
defaultValue={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
value={formData.judul}
onChange={(e) => handleChange('judul', e.currentTarget.value)}
error={!formData.judul && 'Judul wajib diisi'}
/>
<Box>
@@ -128,8 +141,8 @@ function EditTempatKegiatan() {
</Text>
<TempatKegiatanTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
onChange={(value) => handleChange('deskripsi', value)}
initialContent={formData.deskripsi}
/>
</Box>
@@ -138,7 +151,7 @@ function EditTempatKegiatan() {
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>

54
src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx
View File

@@ -1,4 +1,5 @@
'use client'
import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
import colors from '@/con/colors';
import {
@@ -30,41 +31,49 @@ function EditTujuanProgram() {
const router = useRouter();
const editState = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
// load data pertama kali
// Load data pertama kali
useShallowEffect(() => {
if (!editState.findById.data) {
editState.findById.initialize();
}
}, []);
// sync data hasil fetch ke local state
// Sync hasil fetch ke local state (sekali)
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
setFormData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? ''
});
}
}, [editState.findById.data]);
const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
setFormData(prev => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
if (!judul.trim()) {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
if (!editState.findById.data) return;
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
await editState.update.save(editState.findById.data);
const payload = {
...editState.findById.data,
judul: formData.judul,
deskripsi: formData.deskripsi
};
toast.success('Berhasil menyimpan perubahan');
router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program');
}
await editState.update.save(payload);
toast.success('Berhasil menyimpan perubahan');
router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program');
} catch (err) {
console.error('Error saving:', err);
toast.error('Gagal menyimpan data');
@@ -88,16 +97,13 @@ function EditTujuanProgram() {
return (
<Box>
<Stack gap="xs">
{/* Back Button + Title */}
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={22} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Edit Tujuan Program
</Title>
<Title order={4} ml="sm" c="dark">Edit Tujuan Program</Title>
</Group>
<Paper
@@ -112,17 +118,17 @@ function EditTujuanProgram() {
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="Masukkan judul program"
defaultValue={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
value={formData.judul}
onChange={(e) => handleChange('judul', e.currentTarget.value)}
error={!formData.judul && 'Judul wajib diisi'}
/>
<Box>
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
<PendidikanNonFormalTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
onChange={(value) => handleChange('deskripsi', value)}
initialContent={formData.deskripsi}
/>
</Box>
@@ -131,7 +137,7 @@ function EditTujuanProgram() {
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>

134
src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx
View File

@@ -1,74 +1,86 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import { toast } from 'react-toastify';
import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function EditPerpustakaanDigital() {
const editState = useProxy(perpustakaanDigitalState.dataPerpustakaan)
const router = useRouter();
const params = useParams();
const editState = useProxy(perpustakaanDigitalState.dataPerpustakaan);
const [formData, setFormData] = useState({
judul: '',
deskripsi: '',
kategoriId: '',
imageId: '',
});
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState({
judul: editState.update.form.judul || "",
deskripsi: editState.update.form.deskripsi || "",
imageId: editState.update.form.imageId || "",
kategoriId: editState.update.form.kategoriId || "",
})
// Load kategori & data awal
useEffect(() => {
perpustakaanDigitalState.kategoriBuku.findMany.load();
const loadDataPerpustakaan = async () => {
const id = params?.id as string;
const loadData = async () => {
const id = Array.isArray(params?.id) ? params.id[0] : params?.id;
if (!id) return;
try {
const data = await editState.update.load(id);
if (data) {
setFormData({
judul: data.judul || "",
deskripsi: data.deskripsi || "",
imageId: data.imageId || "",
kategoriId: data.kategoriId || "",
});
if (data.image?.link) setPreviewImage(data.image.link);
}
} catch (error) {
console.error("Error loading data perpustakaan:", error);
toast.error(error instanceof Error ? error.message : "Gagal mengambil data perpustakaan");
}
}
if (!data) return;
loadDataPerpustakaan();
setFormData({
judul: data.judul || '',
deskripsi: data.deskripsi || '',
kategoriId: data.kategoriId || '',
imageId: data.imageId || '',
});
if (data.image?.link) setPreviewImage(data.image.link);
} catch (error) {
console.error(error);
toast.error(error instanceof Error ? error.message : 'Gagal memuat data perpustakaan');
}
};
loadData();
}, [params?.id]);
const handleInputChange = (field: string, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
try {
editState.update.form = { ...editState.update.form, ...formData }
// Update global state hanya pas submit
editState.update.form = { ...editState.update.form, ...formData };
// Upload file jika ada
if (file) {
const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
const uploaded = res.data?.data;
if (!uploaded?.id) return toast.error("Gagal upload gambar");
if (!uploaded?.id) return toast.error('Gagal upload gambar');
editState.update.form.imageId = uploaded.id;
}
await editState.update.update();
toast.success("Data perpustakaan berhasil diperbarui!");
router.push("/admin/pendidikan/perpustakaan-digital/data-perpustakaan");
toast.success('Data perpustakaan berhasil diperbarui!');
router.push('/admin/pendidikan/perpustakaan-digital/data-perpustakaan');
} catch (error) {
console.error("Error updating data perpustakaan:", error);
toast.error("Terjadi kesalahan saat memperbarui data perpustakaan");
console.error(error);
toast.error('Terjadi kesalahan saat memperbarui data perpustakaan');
}
};
@@ -86,18 +98,26 @@ function EditPerpustakaanDigital() {
</Title>
</Group>
{/* Form Paper */}
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p="lg" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
{/* Dropzone Image */}
<Box>
<Text fw="bold" fz="sm" mb={6}>Gambar</Text>
<Text fw="bold" fz="sm" mb={6}>
Gambar
</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile));
const selected = files[0];
if (selected) {
setFile(selected);
setPreviewImage(URL.createObjectURL(selected));
}
}}
onReject={() => toast.error('File tidak valid.')}
@@ -117,8 +137,12 @@ function EditPerpustakaanDigital() {
<IconPhoto size={48} color="#868e96" stroke={1.5} />
</Dropzone.Idle>
<Stack gap="xs" align="center">
<Text size="md" fw={500}>Seret gambar atau klik untuk memilih file</Text>
<Text size="sm" c="dimmed">Maksimal 5MB, format gambar wajib</Text>
<Text size="md" fw={500}>
Seret gambar atau klik untuk memilih file
</Text>
<Text size="sm" c="dimmed">
Maksimal 5MB, format gambar wajib
</Text>
</Stack>
</Group>
</Dropzone>
@@ -140,28 +164,30 @@ function EditPerpustakaanDigital() {
<TextInput
label="Judul"
placeholder="Masukkan judul"
defaultValue={formData.judul}
onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
value={formData.judul}
onChange={(e) => handleInputChange('judul', e.target.value)}
required
/>
{/* Deskripsi */}
<Box>
<Text fw="bold" fz="sm" mb={6}>Deskripsi</Text>
<EditEditor value={formData.deskripsi} onChange={(val) => setFormData({ ...formData, deskripsi: val })} />
<Text fw="bold" fz="sm" mb={6}>
Deskripsi
</Text>
<EditEditor value={formData.deskripsi} onChange={(val) => handleInputChange('deskripsi', val)} />
</Box>
{/* Kategori */}
<Select
value={formData.kategoriId}
onChange={(val) => setFormData({ ...formData, kategoriId: val || "" })}
onChange={(val) => handleInputChange('kategoriId', val || '')}
label="Kategori"
placeholder='Pilih kategori'
data={perpustakaanDigitalState.kategoriBuku.findMany.data?.map(v => ({ value: v.id, label: v.name })) || []}
placeholder="Pilih kategori"
data={perpustakaanDigitalState.kategoriBuku.findMany.data?.map((v) => ({ value: v.id, label: v.name })) || []}
clearable
searchable
required
error={!formData.kategoriId ? "Pilih kategori" : undefined}
error={!formData.kategoriId ? 'Pilih kategori' : undefined}
/>
{/* Submit Button */}

23
src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx
View File

@@ -1,5 +1,6 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
@@ -14,9 +15,8 @@ function EditKategoriBuku() {
const router = useRouter();
const params = useParams();
const [formData, setFormData] = useState({
name: editState.update.form.name || '',
});
const [formData, setFormData] = useState({ name: '' });
const [loading, setLoading] = useState(true);
useEffect(() => {
const loadKategori = async () => {
@@ -26,21 +26,26 @@ function EditKategoriBuku() {
try {
const data = await editState.update.load(id);
if (data) {
setFormData({
name: data.name || '',
});
setFormData({ name: data.name || '' });
}
} catch (error) {
console.error('Error loading kategori buku:', error);
toast.error('Gagal memuat data kategori buku');
} finally {
setLoading(false);
}
};
loadKategori();
}, [params?.id]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData((prev) => ({ ...prev, name: e.target.value }));
};
const handleSubmit = async () => {
try {
// Update global state hanya saat submit
editState.update.form = { ...editState.update.form, name: formData.name };
await editState.update.update();
toast.success('Kategori Buku berhasil diperbarui!');
@@ -76,9 +81,10 @@ function EditKategoriBuku() {
<TextInput
label="Nama Kategori Buku"
placeholder="Masukkan nama kategori buku"
defaultValue={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
value={formData.name}
onChange={handleChange}
required
disabled={loading}
/>
<Group justify="right">
@@ -91,6 +97,7 @@ function EditKategoriBuku() {
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
disabled={loading || !formData.name.trim()}
>
Simpan
</Button>

69
src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx
View File

@@ -1,4 +1,5 @@
'use client'
import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
import colors from '@/con/colors';
import {
@@ -17,7 +18,7 @@ import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useEffect, useState, useCallback } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
@@ -29,30 +30,46 @@ const ProgramPendidikanAnakTextEditor = dynamic(
{ ssr: false }
);
interface FormData {
judul: string;
deskripsi: string;
}
function EditTujuanProgram() {
const router = useRouter();
const editState = useProxy(stateProgramPendidikanAnak.programUnggulanState);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
// lokal state form
const [formData, setFormData] = useState<FormData>({
judul: '',
deskripsi: ''
});
const [isSubmitting, setIsSubmitting] = useState(false);
// load data once
useShallowEffect(() => {
if (!editState.findById.data) {
editState.findById.initialize();
}
if (!editState.findById.data) editState.findById.initialize();
}, []);
// populate formData saat data global tersedia
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
setFormData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? ''
});
}
}, [editState.findById.data]);
const handleChange = useCallback(
(field: keyof FormData, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
},
[]
);
const handleSubmit = async () => {
if (!judul.trim()) {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
@@ -60,9 +77,13 @@ function EditTujuanProgram() {
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
await editState.update.save(editState.findById.data);
// update global state only on submit
const updatedData = {
...editState.findById.data,
judul: formData.judul,
deskripsi: formData.deskripsi
};
await editState.update.save(updatedData);
toast.success('Berhasil menyimpan perubahan');
router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan');
@@ -77,7 +98,6 @@ function EditTujuanProgram() {
const handleBack = () => router.back();
// loading state
if (editState.findById.loading) {
return (
<Box>
@@ -93,12 +113,7 @@ function EditTujuanProgram() {
<Stack gap="xs">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button
variant="subtle"
onClick={handleBack}
p="xs"
radius="md"
>
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
@@ -122,18 +137,20 @@ function EditTujuanProgram() {
<TextInput
label={<Text fw="bold">Judul</Text>}
placeholder="Masukkan judul program"
defaultValue={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
value={formData.judul}
onChange={(e) => handleChange('judul', e.currentTarget.value)}
error={!formData.judul && 'Judul wajib diisi'}
/>
{/* Deskripsi Field */}
<Box>
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
<Text fz="sm" fw="bold" mb="xs">
Deskripsi
</Text>
<ProgramPendidikanAnakTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
onChange={(value) => handleChange('deskripsi', value)}
initialContent={formData.deskripsi}
/>
</Box>
@@ -143,7 +160,7 @@ function EditTujuanProgram() {
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>

41
src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx
View File

@@ -11,7 +11,7 @@ import {
Text,
TextInput,
Title,
Tooltip
Tooltip,
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
@@ -30,8 +30,8 @@ function EditTujuanProgram() {
const router = useRouter();
const editState = useProxy(stateProgramPendidikanAnak.stateTujuanProgram);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
// Menggunakan satu state lokal untuk form
const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
// Load data pertama kali
@@ -41,16 +41,22 @@ function EditTujuanProgram() {
}
}, []);
// Sync state dengan data hasil fetch
// Sync hanya sekali saat data fetch berhasil
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
setFormData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? '',
});
}
}, [editState.findById.data]);
const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
setFormData(prev => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
if (!judul.trim()) {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
@@ -58,9 +64,12 @@ function EditTujuanProgram() {
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
await editState.update.save(editState.findById.data);
const updatedData = {
...editState.findById.data,
judul: formData.judul,
deskripsi: formData.deskripsi,
};
await editState.update.save(updatedData);
toast.success('Berhasil menyimpan perubahan');
router.push('/admin/pendidikan/program-pendidikan-anak/tujuan-program');
@@ -112,17 +121,17 @@ function EditTujuanProgram() {
<TextInput
label={<Text fz="sm" fw="bold">Judul</Text>}
placeholder="Masukkan judul program"
defaultValue={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
value={formData.judul}
onChange={(e) => handleChange('judul', e.currentTarget.value)}
error={!formData.judul && 'Judul wajib diisi'}
/>
<Box>
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
<ProgramPendidikanAnakTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
onChange={(value) => handleChange('deskripsi', value)}
initialContent={formData.deskripsi}
/>
</Box>
@@ -131,7 +140,7 @@ function EditTujuanProgram() {
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>

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

@@ -1,5 +1,6 @@
'use client';
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import daftarInformasiPublik from '@/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
import colors from '@/con/colors';
@@ -17,15 +18,15 @@ interface FormDaftarInformasi {
}
function EditDaftarInformasiPublik() {
const daftarInformasi = useProxy(daftarInformasiPublik)
const router = useRouter()
const params = useParams()
const daftarInformasi = useProxy(daftarInformasiPublik);
const router = useRouter();
const params = useParams();
const [formData, setFormData] = useState<FormDaftarInformasi>({
jenisInformasi: '',
deskripsi: '',
tanggal: '',
})
});
const formatDateForInput = (dateString: string) => {
if (!dateString) return '';
@@ -33,6 +34,7 @@ function EditDaftarInformasiPublik() {
return date.toISOString().split('T')[0];
};
// Load data once on mount / when ID changes
useEffect(() => {
const loadDaftarInformasi = async () => {
const id = params?.id as string;
@@ -48,14 +50,18 @@ function EditDaftarInformasiPublik() {
});
}
} catch (error) {
console.error("Error loading daftar informasi:", error);
toast.error("Gagal memuat data daftar informasi");
console.error('Error loading daftar informasi:', error);
toast.error('Gagal memuat data daftar informasi');
}
}
};
loadDaftarInformasi();
}, [params?.id]);
const handleChange = (field: keyof FormDaftarInformasi, value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
try {
daftarInformasi.edit.form = {
@@ -63,14 +69,14 @@ function EditDaftarInformasiPublik() {
jenisInformasi: formData.jenisInformasi.trim(),
deskripsi: formData.deskripsi.trim(),
tanggal: formData.tanggal.trim(),
}
await daftarInformasi.edit.update()
router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba");
};
await daftarInformasi.edit.update();
router.push('/admin/ppid/daftar-informasi-publik-desa-darmasaba');
} catch (error) {
console.error("Error updating berita:", error);
toast.error("Terjadi kesalahan saat memperbarui berita");
console.error('Error updating berita:', error);
toast.error('Terjadi kesalahan saat memperbarui berita');
}
}
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -97,13 +103,8 @@ function EditDaftarInformasiPublik() {
<TextInput
label="Jenis Informasi"
placeholder="Masukkan jenis informasi"
defaultValue={formData.jenisInformasi}
onChange={(val) => {
setFormData({
...formData,
jenisInformasi: val.target.value
});
}}
value={formData.jenisInformasi}
onChange={(e) => handleChange('jenisInformasi', e.target.value)}
required
/>
@@ -113,10 +114,7 @@ function EditDaftarInformasiPublik() {
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) => {
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
daftarInformasi.edit.form.deskripsi = htmlContent;
}}
onChange={(htmlContent) => handleChange('deskripsi', htmlContent)}
/>
</Box>
@@ -124,13 +122,8 @@ function EditDaftarInformasiPublik() {
type="date"
label="Tanggal Publikasi"
placeholder="Pilih tanggal publikasi"
defaultValue={formatDateForInput(formData.tanggal)}
onChange={(val) => {
setFormData({
...formData,
tanggal: val.target.value
});
}}
value={formatDateForInput(formData.tanggal)}
onChange={(e) => handleChange('tanggal', e.target.value)}
required
/>

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

@@ -63,7 +63,7 @@ function DetailDaftarInformasiPublik() {
Detail Informasi Publik
</Text>
<Paper bg="#f8f9fa" p="md" radius="md" shadow="xs">
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="lg">
<Box>
<Text fz="lg" fw="bold" mb={4}>Jenis Informasi</Text>

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

@@ -9,37 +9,44 @@ import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
import { useRouter } from 'next/navigation';
import { IconArrowBack } from '@tabler/icons-react';
const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
ssr: false,
});
const PPIDTextEditor = dynamic(
() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor),
{ ssr: false }
);
function EditDasarHukum() {
const router = useRouter()
const dasarHukumState = useProxy(stateDasarHukumPPID)
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
const router = useRouter();
const dasarHukumState = useProxy(stateDasarHukumPPID);
// Gabungkan judul & content jadi satu state lokal
const [formData, setFormData] = useState({ judul: '', content: '' });
// Load data awal sekali
useShallowEffect(() => {
if (!dasarHukumState.findById.data) {
dasarHukumState.findById.initialize(); // biar masuk ke `findFirst` route kamu
dasarHukumState.findById.initialize();
}
}, []);
// Set state lokal saat data global sudah tersedia
useEffect(() => {
if (dasarHukumState.findById.data) {
setJudul(dasarHukumState.findById.data.judul ?? '')
setContent(dasarHukumState.findById.data.content ?? '')
setFormData({
judul: dasarHukumState.findById.data.judul ?? '',
content: dasarHukumState.findById.data.content ?? '',
});
}
}, [dasarHukumState.findById.data])
}, [dasarHukumState.findById.data]);
const submit = () => {
const handleSubmit = () => {
if (dasarHukumState.findById.data) {
dasarHukumState.findById.data.judul = judul;
dasarHukumState.findById.data.content = content;
dasarHukumState.update.save(dasarHukumState.findById.data)
// Update global state hanya saat submit
const updated = { ...dasarHukumState.findById.data, ...formData };
dasarHukumState.update.save(updated);
}
router.push('/admin/ppid/dasar-hukum')
}
router.push('/admin/ppid/dasar-hukum');
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
@@ -69,12 +76,12 @@ function EditDasarHukum() {
<Box style={{ border: '1px solid #dee2e6', borderRadius: '0.25rem' }}>
<PPIDTextEditor
showSubmit={false}
onChange={setJudul}
initialContent={judul}
initialContent={formData.judul}
onChange={value => setFormData(prev => ({ ...prev, judul: value }))}
/>
</Box>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Konten
@@ -82,15 +89,15 @@ function EditDasarHukum() {
<Box style={{ border: '1px solid #dee2e6', borderRadius: '0.25rem' }}>
<PPIDTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
initialContent={formData.content}
onChange={value => setFormData(prev => ({ ...prev, content: value }))}
/>
</Box>
</Box>
<Group justify="flex-end" mt="md">
<Button
onClick={submit}
onClick={handleSubmit}
loading={dasarHukumState.update.loading}
radius="md"
size="md"

70
src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/_lib/layoutTabs.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import colors from '@/con/colors';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
import { IconChartBar, IconUsers } from '@tabler/icons-react';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
@@ -49,41 +49,49 @@ function LayoutTabsIKM({ children }: { children: React.ReactNode }) {
IKM Desa Darmasaba
</Title>
<Tabs
radius="xl"
color={colors['blue-button']}
color={colors["blue-button"]}
variant="pills"
value={activeTab}
onChange={handleTabChange}
radius="lg"
keepMounted={false}
>
<TabsList
p="sm"
style={{
background: "#F3F4FB",
borderRadius: "1rem",
}}
>
{tabs.map((e, i) => (
<Tooltip
key={i}
label={e.description}
withArrow
position="bottom"
transitionProps={{ transition: 'pop', duration: 200 }}
>
<TabsTab
value={e.value}
leftSection={e.icon}
style={{
fontWeight: 500,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
<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 }}
>
{e.label}
</TabsTab>
</Tooltip>
))}
</TabsList>
<TabsTab
value={e.value}
leftSection={e.icon}
style={{
fontWeight: 500,
fontSize: "0.9rem",
transition: "all 0.2s ease",
}}
>
{e.label}
</TabsTab>
</Tooltip>
))}
</TabsList>
</ScrollArea>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value} mt="md">
{/* Konten dummy, bisa diganti tergantung routing */}

147
src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/[id]/edit/page.tsx
View File

@@ -1,11 +1,11 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
/* eslint-disable react-hooks/exhaustive-deps */
import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Select, Stack, TextInput, Title, Tooltip } from '@mantine/core';
import { IconArrowBack, IconDeviceFloppy } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useEffect, useState, ChangeEvent } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
@@ -18,24 +18,35 @@ interface FormResponden {
}
function EditResponden() {
const router = useRouter()
const params = useParams() as { id: string }
const state = useProxy(indeksKepuasanState.responden)
const id = params.id
const router = useRouter();
const params = useParams() as { id: string };
const state = useProxy(indeksKepuasanState.responden);
const id = params.id;
const [formData, setFormData] = useState<FormResponden>({
name: '',
tanggal: '',
jenisKelaminId: '',
ratingId: '',
kelompokUmurId: '',
})
});
// Helper untuk membuat data Select dari state
const mapSelectData = (data: any[] | null | undefined) =>
(data || [])
.filter(Boolean)
.map((v: any) => ({
value: v.id || '',
label: typeof v.name === 'string' ? v.name : 'Tanpa Nama',
}));
useEffect(() => {
// Load opsi dropdown
indeksKepuasanState.jenisKelaminResponden.findMany.load();
indeksKepuasanState.pilihanRatingResponden.findMany.load();
indeksKepuasanState.kelompokUmurResponden.findMany.load();
const loadResponden = async () => {
const id = params?.id as string;
if (!id) return;
try {
@@ -43,39 +54,35 @@ function EditResponden() {
if (data) {
state.update.id = id;
state.update.form = {
name: data.name,
tanggal: data.tanggal,
jenisKelaminId: data.jenisKelaminId,
ratingId: data.ratingId,
kelompokUmurId: data.kelompokUmurId,
};
// **formData lokal tetap controlled**, tidak overwrite tiap render
setFormData({
name: data.name,
tanggal: data.tanggal,
jenisKelaminId: data.jenisKelaminId,
ratingId: data.ratingId,
kelompokUmurId: data.kelompokUmurId,
name: data.name || '',
tanggal: data.tanggal || '',
jenisKelaminId: data.jenisKelaminId || '',
ratingId: data.ratingId || '',
kelompokUmurId: data.kelompokUmurId || '',
});
}
} catch (error) {
console.error("Error loading program penghijauan:", error);
toast.error("Gagal memuat data program penghijauan");
console.error("Error loading responden:", error);
toast.error("Gagal memuat data responden");
}
}
};
loadResponden();
}, [params?.id]);
}, [id, state.update]);
const handleChange = (field: keyof FormResponden) => (e: ChangeEvent<HTMLInputElement> | string | null) => {
const value = typeof e === 'string' || e === null ? e || '' : e.currentTarget.value;
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
state.update.id = id;
state.update.form = { ...formData }; // <-- sinkronisasi manual
state.update.form = { ...formData }; // hanya update global state saat submit
await state.update.submit();
router.push('/admin/ppid/ikm-desa-darmasaba/responden')
}
router.push('/admin/ppid/ikm-desa-darmasaba/responden');
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -101,47 +108,27 @@ function EditResponden() {
<Stack gap="md">
<TextInput
label="Nama Responden"
type='text'
placeholder="Masukkan nama responden"
defaultValue={formData.name}
onChange={(val) => {
setFormData({
...formData,
name: val.currentTarget.value
})
}}
value={formData.name}
onChange={handleChange('name')}
radius="md"
required
/>
<TextInput
label="Tanggal"
type="date"
placeholder='Pilih tanggal'
defaultValue={formData.tanggal ? new Date(formData.tanggal).toISOString().split('T')[0] : ''}
onChange={(e) => {
const selectedDate = e.currentTarget.value;
setFormData({
...formData,
tanggal: selectedDate,
});
}}
value={formData.tanggal ? new Date(formData.tanggal).toISOString().split('T')[0] : ''}
onChange={handleChange('tanggal')}
radius="md"
required
/>
<Select
key="jenisKelamin"
label="Jenis Kelamin"
placeholder="Pilih jenis kelamin"
value={formData.jenisKelaminId}
onChange={(val) => setFormData({ ...formData, jenisKelaminId: val || "" })}
data={
(indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
.filter(Boolean)
.map((v) => ({
value: v.id || '',
label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
}))
}
onChange={handleChange('jenisKelaminId')}
data={mapSelectData(indeksKepuasanState.jenisKelaminResponden.findMany.data)}
disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
clearable
searchable
@@ -149,20 +136,13 @@ function EditResponden() {
radius="md"
error={!formData.jenisKelaminId ? "Pilih jenis kelamin" : undefined}
/>
<Select
key="rating"
value={formData.ratingId}
onChange={(val) => setFormData({ ...formData, ratingId: val || "" })}
label="Rating"
placeholder='Pilih rating'
data={
(indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
.filter(Boolean)
.map((v) => ({
value: v.id || '',
label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
}))
}
placeholder="Pilih rating"
value={formData.ratingId}
onChange={handleChange('ratingId')}
data={mapSelectData(indeksKepuasanState.pilihanRatingResponden.findMany.data)}
disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
clearable
searchable
@@ -172,37 +152,26 @@ function EditResponden() {
/>
<Select
key={"kelompokUmur"}
value={formData.kelompokUmurId}
onChange={(val) => setFormData({ ...formData, kelompokUmurId: val || "" })}
label="Kelompok Umur"
placeholder='Pilih kelompok umur'
data={
(indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
.filter(Boolean)
.map((v) => ({
value: v.id || '',
label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
}))
}
placeholder="Pilih kelompok umur"
value={formData.kelompokUmurId}
onChange={handleChange('kelompokUmurId')}
data={mapSelectData(indeksKepuasanState.kelompokUmurResponden.findMany.data)}
disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
clearable
searchable
required
radius="md"
error={!formData.kelompokUmurId ? "Pilih kelompok umur" : undefined}
/>
<Group justify="flex-end" mt="md">
<Button
variant="light"
color="red"
onClick={() => router.back()}
>
<Button variant="light" color="red" onClick={() => router.back()}>
Batal
</Button>
<Button
<Button
leftSection={<IconDeviceFloppy size={20} />}
onClick={handleSubmit}
onClick={handleSubmit}
loading={state.update.loading}
color={colors['blue-button']}
>

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

@@ -0,0 +1,95 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import statepermohonanInformasiPublikForm from '../../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
function DetailPermohonanInformasiPublik() {
const state = useProxy(statepermohonanInformasiPublikForm.statepermohonanInformasiPublik)
const router = useRouter()
const params = useParams()
useShallowEffect(() => {
state.findUnique.load(params?.id as string)
}, [params?.id])
if (!state.findUnique.data) {
return (
<Stack py={10}>
<Skeleton height={500} radius="md" />
</Stack>
)
}
const data = state.findUnique.data;
return (
<Box py="md">
<Button
variant="subtle"
onClick={() => router.back()}
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
mb={15}
>
Kembali
</Button>
<Paper
withBorder
w={{ base: '100%', md: '60%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
>
<Stack gap="xl">
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
Detail Informasi Publik
</Text>
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="lg">
<Box>
<Text fz="lg" fw="bold" mb={4}>Nama</Text>
<Text fz="md" c="dimmed">{data.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>NIK</Text>
<Text fz="md" c="dimmed">{data.nik || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Telepon</Text>
<Text fz="md" c="dimmed">{data.notelp || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Email</Text>
<Text fz="md" c="dimmed">{data.email || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Jenis Informasi</Text>
<Text fz="md" c="dimmed">{data.jenisInformasiDiminta?.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Cara Akses Informasi</Text>
<Text fz="md" c="dimmed">{data.caraMemperolehInformasi?.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Cara Akses Salinan Informasi</Text>
<Text fz="md" c="dimmed">{data.caraMemperolehSalinanInformasi?.name || '-'}</Text>
</Box>
</Stack>
</Paper>
</Stack>
</Paper>
</Box>
);
}
export default DetailPermohonanInformasiPublik;

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

@@ -1,13 +1,15 @@
'use client'
import { useProxy } from 'valtio/utils'
import { useShallowEffect } from '@mantine/hooks'
import { Box, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title, Text, Group, Tooltip, Badge } from '@mantine/core'
import { IconInfoCircle, IconUser, IconMail, IconPhone, IconId } from '@tabler/icons-react'
import statepermohonanInformasiPublikForm from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik'
import colors from '@/con/colors'
import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core'
import { useShallowEffect } from '@mantine/hooks'
import { IconDeviceImacCog, IconId, IconInfoCircle, IconPhone, IconUser } from '@tabler/icons-react'
import { useRouter } from 'next/navigation'
import { useProxy } from 'valtio/utils'
import statepermohonanInformasiPublikForm from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik'
function Page() {
const permohonanInformasiPublikState = useProxy(statepermohonanInformasiPublikForm)
const router = useRouter()
useShallowEffect(() => {
permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.load()
@@ -56,10 +58,7 @@ function Page() {
<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}><IconMail size={16} /> Email</Group></TableTh>
<TableTh>Jenis Informasi</TableTh>
<TableTh>Cara Akses Informasi</TableTh>
<TableTh>Salinan Informasi</TableTh>
<TableTh><Group gap={5}><IconInfoCircle size={16} /> Detail</Group></TableTh>
</TableTr>
</TableThead>
<TableTbody>
@@ -67,27 +66,31 @@ function Page() {
<TableTr key={item.id}>
<TableTd>{index + 1}</TableTd>
<TableTd>
<Tooltip label={item.name}>
<Box w={200}>
<Text lineClamp={1} fw={500}>{item.name}</Text>
</Tooltip>
</TableTd>
<TableTd>{item.nik}</TableTd>
<TableTd>{item.notelp}</TableTd>
<TableTd>{item.email}</TableTd>
<TableTd>
<Badge variant="light" radius="sm" color="blue">
{item.jenisInformasiDiminta?.name || '-'}
</Badge>
</Box>
</TableTd>
<TableTd>
<Tooltip label={item.caraMemperolehInformasi?.name}>
<Text lineClamp={1} size="sm">{item.caraMemperolehInformasi?.name || '-'}</Text>
</Tooltip>
<Box w={200}>
{item.nik}
</Box>
</TableTd>
<TableTd>
<Tooltip label={item.caraMemperolehSalinanInformasi?.name}>
<Text lineClamp={1} size="sm">{item.caraMemperolehSalinanInformasi?.name || '-'}</Text>
</Tooltip>
<Box w={200}>
{item.notelp}
</Box>
</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>
))}

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

@@ -0,0 +1,82 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import statePermohonanKeberatan from '../../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi'
function DetailPermohonanKeberatanInformasiPublik() {
const state = useProxy(statePermohonanKeberatan)
const router = useRouter()
const params = useParams()
useShallowEffect(() => {
state.findUnique.load(params?.id as string)
}, [params?.id])
if (!state.findUnique.data) {
return (
<Stack py={10}>
<Skeleton height={500} radius="md" />
</Stack>
)
}
const data = state.findUnique.data;
return (
<Box py="md">
<Button
variant="subtle"
onClick={() => router.back()}
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
mb={15}
>
Kembali
</Button>
<Paper
withBorder
w={{ base: '100%', md: '60%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
>
<Stack gap="xl">
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
Detail Informasi Publik
</Text>
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
<Stack gap="lg">
<Box>
<Text fz="lg" fw="bold" mb={4}>Nama</Text>
<Text fz="md" c="dimmed">{data.name || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Telepon</Text>
<Text fz="md" c="dimmed">{data.notelp || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Email</Text>
<Text fz="md" c="dimmed">{data.email || '-'}</Text>
</Box>
<Box>
<Text fz="lg" fw="bold" mb={4}>Alasan</Text>
<Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.alasan || '-' }}></Text>
</Box>
</Stack>
</Paper>
</Stack>
</Paper>
</Box>
);
}
export default DetailPermohonanKeberatanInformasiPublik;

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

@@ -1,13 +1,15 @@
'use client'
import colors from '@/con/colors'
import { Box, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core'
import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core'
import { useShallowEffect } from '@mantine/hooks'
import { IconInfoCircle, IconMail, IconMessage, IconPhone, IconUser } from '@tabler/icons-react'
import { IconDeviceImacCog, IconInfoCircle, IconMail, IconPhone, IconUser } from '@tabler/icons-react'
import { useProxy } from 'valtio/utils'
import statePermohonanKeberatan from '../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi'
import { useRouter } from 'next/navigation'
function Page() {
const listState = useProxy(statePermohonanKeberatan)
const router = useRouter()
useShallowEffect(() => {
listState.findMany.load()
}, [])
@@ -55,7 +57,7 @@ function Page() {
<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}><IconMessage size={16} /> Alasan Keberatan</Group></TableTh>
<TableTh><Group gap={5}><IconInfoCircle size={16} /> Detail</Group></TableTh>
</TableTr>
</TableThead>
<TableTbody>
@@ -74,23 +76,16 @@ function Page() {
<Text>{item.notelp || '-'}</Text>
</TableTd>
<TableTd>
<Tooltip label={item.alasan?.replace(/<[^>]*>?/gm, '')}>
<div
style={{
maxWidth: '300px',
overflow: 'hidden',
textOverflow: 'ellipsis',
wordBreak: "break-word",
whiteSpace: "normal"
}}
dangerouslySetInnerHTML={{
__html: item.alasan ?
item.alasan.replace(/<[^>]*>?/gm, '').substring(0, 50) + '...' :
'-'
}}
/>
</Tooltip>
<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>
))}

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

@@ -175,7 +175,7 @@ function EditProfilePPID() {
<TextInput
label={<Text fw="bold">Nama Perbekel</Text>}
placeholder="Masukkan nama perbekel"
defaultValue={allState.editForm.form.name}
value={allState.editForm.form.name}
onChange={(e) => handleFieldChange('name', e.currentTarget.value)}
error={!allState.editForm.form.name && "Nama wajib diisi"}
/>

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

@@ -23,27 +23,26 @@ import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
export default function EditPegawaiPPID() {
const router = useRouter();
const { id } = useParams<{ id: string }>();
const stateOrganisasi = useProxy(stateStrukturPPID.pegawai);
const [formData, setFormData] = useState({
namaLengkap: '',
gelarAkademik: '',
imageId: '',
tanggalMasuk: '',
email: '',
telepon: '',
alamat: '',
posisiId: '',
isActive: true,
});
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const stateOrganisasi = useProxy(stateStrukturPPID.pegawai);
const [formData, setFormData] = useState({
namaLengkap: stateOrganisasi.edit.form.namaLengkap,
gelarAkademik: stateOrganisasi.edit.form.gelarAkademik,
imageId: stateOrganisasi.edit.form.imageId,
tanggalMasuk: stateOrganisasi.edit.form.tanggalMasuk,
email: stateOrganisasi.edit.form.email,
telepon: stateOrganisasi.edit.form.telepon,
alamat: stateOrganisasi.edit.form.alamat,
posisiId: stateOrganisasi.edit.form.posisiId,
isActive: stateOrganisasi.edit.form.isActive,
});
// Format date to YYYY-MM-DD for date input
// Format date for <input type="date">
const formatDateForInput = (dateString: string) => {
if (!dateString) return '';
const date = new Date(dateString);
@@ -53,36 +52,29 @@ export default function EditPegawaiPPID() {
useEffect(() => {
const loadPegawai = async () => {
try {
await stateStrukturPPID.posisiOrganisasi.findMany.load(1, 0); // ambil semua data
await stateStrukturPPID.posisiOrganisasi.findManyAll.load();
const data = await stateOrganisasi.edit.load(id);
if (data) {
setFormData({
namaLengkap: data.namaLengkap || "",
gelarAkademik: data.gelarAkademik || "",
imageId: data.imageId || "",
tanggalMasuk: data.tanggalMasuk || "",
email: data.email || "",
telepon: data.telepon || "",
alamat: data.alamat || "",
posisiId: data.posisiId || "",
isActive: data.isActive ?? true, // pakai nullish coalescing
namaLengkap: data.namaLengkap || '',
gelarAkademik: data.gelarAkademik || '',
imageId: data.imageId || '',
tanggalMasuk: data.tanggalMasuk || '',
email: data.email || '',
telepon: data.telepon || '',
alamat: data.alamat || '',
posisiId: data.posisiId || '',
isActive: data.isActive ?? true,
});
if (data.image?.link) {
setPreviewImage(data.image.link);
} else {
setPreviewImage(null);
}
setPreviewImage(data.image?.link || null);
}
} catch (error) {
console.error("Error loading pegawai:", error);
toast.error(
error instanceof Error ? error.message : "Gagal mengambil data pegawai"
);
console.error('Error loading pegawai:', error);
toast.error(error instanceof Error ? error.message : 'Gagal mengambil data pegawai');
}
};
console.log('Current posisiId:', formData.posisiId);
console.log('Available positions:', stateStrukturPPID.posisiOrganisasi.findMany.data?.map(p => p.id));
loadPegawai();
}, [id]);
@@ -90,50 +82,28 @@ export default function EditPegawaiPPID() {
const handleSubmit = async () => {
try {
if (!formData.namaLengkap.trim()) {
toast.error('Nama lengkap tidak boleh kosong');
return;
return toast.error('Nama lengkap tidak boleh kosong');
}
stateOrganisasi.edit.form = {
namaLengkap: formData.namaLengkap.trim(),
gelarAkademik: formData.gelarAkademik.trim(),
imageId: formData.imageId || "",
tanggalMasuk: formData.tanggalMasuk.trim(),
email: formData.email.trim(),
telepon: formData.telepon.trim(),
alamat: formData.alamat.trim(),
posisiId: formData.posisiId.trim(),
isActive: formData.isActive,
};
// Update global state only on submit
const updatedForm = { ...formData };
if (file) {
const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal upload gambar");
}
// Update imageId in global state
stateOrganisasi.edit.form.imageId = uploaded.id;
if (!uploaded?.id) return toast.error('Gagal upload gambar');
updatedForm.imageId = uploaded.id;
}
if (id && !stateOrganisasi.edit.id) {
stateOrganisasi.edit.id = id;
}
stateOrganisasi.edit.form = updatedForm;
if (id && !stateOrganisasi.edit.id) stateOrganisasi.edit.id = id;
const success = await stateOrganisasi.edit.submit();
if (success) {
router.push("/admin/ppid/struktur-ppid/pegawai");
}
if (success) router.push('/admin/ppid/struktur-ppid/pegawai');
} catch (error) {
console.error("Error updating pegawai:", error);
toast.error(error instanceof Error ? error.message : "Gagal memperbarui data pegawai");
console.error('Error updating pegawai:', error);
toast.error(error instanceof Error ? error.message : 'Gagal memperbarui data pegawai');
}
};
return (
@@ -144,9 +114,7 @@ export default function EditPegawaiPPID() {
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Edit Data Pegawai PPID
</Title>
<Title order={4} ml="sm" c="dark">Edit Data Pegawai PPID</Title>
</Group>
<Paper
@@ -158,27 +126,26 @@ export default function EditPegawaiPPID() {
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
{/* Nama Lengkap */}
<TextInput
label="Nama Lengkap"
placeholder="Masukkan nama lengkap"
value={formData.namaLengkap}
onChange={(e) => setFormData({ ...formData, namaLengkap: e.target.value })}
required
/>
{/* Gelar Akademik */}
<TextInput
label="Gelar Akademik"
placeholder="Contoh: S.Kom"
value={formData.gelarAkademik}
onChange={(e) => setFormData({ ...formData, gelarAkademik: e.target.value })}
/>
{/* Foto Profil */}
<Box>
<TextInput
label="Nama Lengkap"
placeholder="Masukkan nama lengkap"
defaultValue={formData.namaLengkap}
onChange={(e) => setFormData({ ...formData, namaLengkap: e.target.value })}
required
/>
</Box>
<Box>
<TextInput
label="Gelar Akademik"
placeholder="Contoh: S.Kom"
defaultValue={formData.gelarAkademik}
onChange={(e) => setFormData({ ...formData, gelarAkademik: e.target.value })}
/>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Foto Profil
</Text>
<Text fw="bold" fz="sm" mb={6}>Foto Profil</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0];
@@ -194,22 +161,12 @@ export default function EditPegawaiPPID() {
p="xl"
>
<Group justify="center" gap="xl" mih={180}>
<Dropzone.Accept>
<IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={48} color="red" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={48} color="#868e96" stroke={1.5} />
</Dropzone.Idle>
<Dropzone.Accept><IconUpload size={48} color={colors['blue-button']} stroke={1.5} /></Dropzone.Accept>
<Dropzone.Reject><IconX size={48} color="red" stroke={1.5} /></Dropzone.Reject>
<Dropzone.Idle><IconPhoto size={48} color="#868e96" stroke={1.5} /></Dropzone.Idle>
<Stack gap="xs" align="center">
<Text size="md" fw={500}>
Seret gambar atau klik untuk memilih file
</Text>
<Text size="sm" c="dimmed">
Maksimal 5MB, format gambar wajib
</Text>
<Text size="md" fw={500}>Seret gambar atau klik untuk memilih file</Text>
<Text size="sm" c="dimmed">Maksimal 5MB, format gambar wajib</Text>
</Stack>
</Group>
</Dropzone>
@@ -221,78 +178,74 @@ export default function EditPegawaiPPID() {
alt="Preview Gambar"
radius="md"
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading='lazy'
loading="lazy"
/>
</Box>
)}
</Box>
{/* Tanggal Masuk */}
<TextInput
label="Tanggal Masuk"
type="date"
placeholder="Contoh: 2022-01-01"
value={formatDateForInput(formData.tanggalMasuk)}
onChange={(e) => setFormData({ ...formData, tanggalMasuk: e.target.value })}
/>
{/* Email */}
<TextInput
label="Email"
type="email"
placeholder="contoh@email.com"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
/>
{/* Telepon */}
<TextInput
label="Telepon"
placeholder="08123456789"
value={formData.telepon}
onChange={(e) => setFormData({ ...formData, telepon: e.target.value })}
/>
{/* Alamat */}
<TextInput
label="Alamat"
placeholder="Jl. Contoh No. 123"
value={formData.alamat}
onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
/>
{/* Posisi */}
<Box>
<TextInput
label="Tanggal Masuk"
type="date"
placeholder="Contoh: 2022-01-01"
defaultValue={formatDateForInput(formData.tanggalMasuk)}
onChange={(e) => setFormData({ ...formData, tanggalMasuk: e.target.value })}
/>
</Box>
<Box>
<TextInput
label="Email"
type="email"
placeholder="contoh@email.com"
defaultValue={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
/>
</Box>
<Box>
<TextInput
label="Telepon"
placeholder="08123456789"
defaultValue={formData.telepon}
onChange={(e) => setFormData({ ...formData, telepon: e.target.value })}
/>
</Box>
<Box>
<TextInput
label="Alamat"
placeholder="Jl. Contoh No. 123"
defaultValue={formData.alamat}
onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
/>
</Box>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Posisi
</Text>
<Text fw="bold" fz="sm" mb={6}>Posisi</Text>
<Select
placeholder="Pilih posisi"
data={stateStrukturPPID.posisiOrganisasi.findMany.data?.map(p => ({
value: p.id,
label: p.nama
})) || []}
data={stateStrukturPPID.posisiOrganisasi.findManyAll.data?.map(p => ({ value: p.id, label: p.nama })) || []}
value={formData.posisiId}
onChange={(value) => value && setFormData({ ...formData, posisiId: value })}
searchable
clearable
/>
</Box>
{/* Status Pegawai */}
<Box>
<Text fw="bold" fz="sm" mb={6}>
Status Pegawai
</Text>
<Text fw="bold" fz="sm" mb={6}>Status Pegawai</Text>
<Select
data={[
{ value: 'true', label: 'Aktif' },
{ value: 'false', label: 'Tidak Aktif' },
]}
value={String(formData.isActive)}
onChange={(val) => {
setFormData({ ...formData, isActive: val === 'true' });
}}
onChange={(val) => setFormData({ ...formData, isActive: val === 'true' })}
clearable
/>
</Box>
{/* Submit Button */}
<Group justify="flex-end" mt="md">
<Button
onClick={handleSubmit}

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

@@ -12,6 +12,7 @@ import { useProxy } from 'valtio/utils';
function DetailPegawai() {
const statePegawai = useProxy(stateStrukturPPID.pegawai);
const [modalHapus, setModalHapus] = useState(false);
const [modalNonActive, setModalNonActive] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null);
const params = useParams();
const router = useRouter();
@@ -30,6 +31,15 @@ function DetailPegawai() {
}
};
const handleNonActive = () => {
if (selectedId) {
statePegawai.nonActive.byId(selectedId);
setModalNonActive(false);
setSelectedId(null);
router.push("/admin/ppid/struktur-ppid/pegawai");
}
};
if (!statePegawai.findUnique.data) {
return (
<Stack py={10}>
@@ -64,7 +74,7 @@ function DetailPegawai() {
<Stack gap="md">
<Box>
<Text fz="lg" fw="bold">Nama Lengkap</Text>
<Text fz="md" c="dimmed" style={{wordBreak: "break-word", whiteSpace: "normal"}}>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
{data.namaLengkap || '-'} {data.gelarAkademik || ''}
</Text>
</Box>
@@ -86,7 +96,7 @@ function DetailPegawai() {
<Box>
<Text fz="lg" fw="bold">Alamat</Text>
<Text fz="md" c="dimmed" style={{wordBreak: "break-word", whiteSpace: "normal"}}>{data.alamat || '-'}</Text>
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.alamat || '-'}</Text>
</Box>
<Box>
@@ -125,6 +135,19 @@ function DetailPegawai() {
)}
</Box>
<Button
color={data.isActive ? "green" : "gray"}
onClick={() => {
setSelectedId(data.id || null);
setModalNonActive(true);
}}
variant="light"
radius="md"
size="md"
>
{data.isActive ? "Aktif" : "Nonaktif"}
</Button>
<Group gap="sm" mt="md">
<Tooltip label="Hapus Pegawai" withArrow position="top">
<Button
@@ -165,6 +188,14 @@ function DetailPegawai() {
onConfirm={handleHapus}
text="Apakah Anda yakin ingin menghapus data pegawai ini?"
/>
{/* Modal NonActive */}
<ModalKonfirmasiHapus
opened={modalNonActive}
onClose={() => setModalNonActive(false)}
onConfirm={handleNonActive}
text="Apakah Anda yakin ingin menonaktifkan pegawai ini?"
/>
</Box>
);
}

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

@@ -16,7 +16,7 @@ function CreatePegawaiPPID() {
const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
const stateOrganisasi = useProxy(stateStrukturPPID.pegawai)
useEffect(() => {
stateStrukturPPID.posisiOrganisasi.findMany.load(1, 0);
stateStrukturPPID.posisiOrganisasi.findManyAll.load();
resetForm();
}, []);
@@ -228,7 +228,7 @@ function CreatePegawaiPPID() {
</Text>
<Select
placeholder="Pilih posisi"
data={stateStrukturPPID.posisiOrganisasi.findMany.data?.map(p => ({
data={stateStrukturPPID.posisiOrganisasi.findManyAll.data?.map(p => ({
value: p.id,
label: p.nama
})) || []}

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

@@ -1,5 +1,7 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID';
import colors from '@/con/colors';
@@ -17,20 +19,23 @@ function EditPosisiOrganisasiPPID() {
const stateOrganisasi = useProxy(stateStrukturPPID.posisiOrganisasi);
const [formData, setFormData] = useState({
nama: "",
deskripsi: "",
nama: '',
deskripsi: '',
hierarki: 0,
});
useEffect(() => {
const loadPosisiOrganisasi = async () => {
if (!id) return;
// Fungsi generik untuk update formData
const handleChange = (field: keyof typeof formData, value: any) => {
setFormData(prev => ({ ...prev, [field]: value }));
};
useEffect(() => {
if (!id) return;
const loadPosisiOrganisasi = async () => {
try {
const data = await stateOrganisasi.edit.load(id);
if (data) {
// pastikan id-nya masuk ke state edit
stateOrganisasi.edit.id = id;
setFormData({
nama: data.nama || '',
@@ -38,9 +43,9 @@ function EditPosisiOrganisasiPPID() {
hierarki: data.hierarki || 0,
});
}
} catch (error) {
console.error("Error loading posisi organisasi:", error);
toast.error("Gagal memuat data posisi organisasi");
} catch (err) {
console.error('Error loading posisi organisasi:', err);
toast.error('Gagal memuat data posisi organisasi');
}
};
@@ -48,31 +53,31 @@ function EditPosisiOrganisasiPPID() {
}, [id]);
const handleSubmit = async () => {
try {
if (!formData.nama.trim()) {
toast.error('Nama posisi organisasi tidak boleh kosong');
return;
}
if (!formData.nama.trim()) {
toast.error('Nama posisi organisasi tidak boleh kosong');
return;
}
try {
// Update global state hanya saat submit
stateOrganisasi.edit.form = {
nama: formData.nama.trim(),
deskripsi: formData.deskripsi.trim(),
hierarki: formData.hierarki,
};
// Safety check tambahan: pastikan ID tidak kosong
if (!stateOrganisasi.edit.id) {
stateOrganisasi.edit.id = id; // fallback
stateOrganisasi.edit.id = id;
}
const success = await stateOrganisasi.edit.update();
if (success) {
router.push("/admin/ppid/struktur-ppid/posisi-organisasi");
router.push('/admin/ppid/struktur-ppid/posisi-organisasi');
}
} catch (error) {
console.error("Error updating posisi organisasi:", error);
// toast akan ditampilkan dari fungsi update
} catch (err) {
console.error('Error updating posisi organisasi:', err);
// toast error biasanya sudah ada di update
}
};
@@ -101,32 +106,30 @@ function EditPosisiOrganisasiPPID() {
<TextInput
label="Nama Posisi Organisasi"
placeholder="Masukkan nama posisi organisasi"
defaultValue={formData.nama}
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
value={formData.nama}
onChange={(e) => handleChange('nama', e.target.value)}
required
/>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Deskripsi
</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) => {
setFormData({ ...formData, deskripsi: htmlContent });
}}
onChange={(html) => handleChange('deskripsi', html)}
/>
</Box>
<TextInput
label="Hierarki"
type="number"
min={0}
placeholder="Contoh: 1 (Angka semakin kecil, posisi semakin tinggi)"
defaultValue={formData.hierarki}
value={formData.hierarki}
onChange={(e) => {
const value = parseInt(e.target.value, 10);
setFormData({ ...formData, hierarki: isNaN(value) ? 0 : value });
handleChange('hierarki', isNaN(value) ? 0 : value);
}}
required
/>

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

@@ -42,7 +42,10 @@ function ListStrukturOrganisasiPPID() {
}
const posisiMap = new Map<string, any>();
for (const pegawai of stateOrganisasi.findMany.data) {
const aktifPegawai = stateOrganisasi.findMany.data.filter(p => p.isActive);
for (const pegawai of aktifPegawai) {
const posisiId = pegawai.posisi.id;
if (!posisiMap.has(posisiId)) {
posisiMap.set(posisiId, {

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

@@ -10,13 +10,14 @@ import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID'
import MisiPPID from '../misiPPID/misi-PPID';
import VisiPPID from '../visiPPID/visi-PPID';
function VisiMisiPPIDEdit() {
const router = useRouter()
const router = useRouter();
const visiMisi = useProxy(stateVisiMisiPPID);
const [draftVisi, setDraftVisi] = useState('');
const [draftMisi, setDraftMisi] = useState('');
// Gabung state lokal menjadi satu object
const [formData, setFormData] = useState({ visi: '', misi: '' });
// Initialize global data ke state lokal saat pertama load
useShallowEffect(() => {
if (!visiMisi.findById.data) {
visiMisi.findById.initialize();
@@ -25,19 +26,25 @@ function VisiMisiPPIDEdit() {
useEffect(() => {
if (visiMisi.findById.data) {
setDraftVisi(visiMisi.findById.data.visi ?? '');
setDraftMisi(visiMisi.findById.data.misi ?? '');
setFormData({
visi: visiMisi.findById.data.visi ?? '',
misi: visiMisi.findById.data.misi ?? '',
});
}
}, [visiMisi.findById.data]);
const handleChange = (key: 'visi' | 'misi', value: string) => {
setFormData(prev => ({ ...prev, [key]: value }));
};
const submit = () => {
if (visiMisi.findById.data) {
// update nilai di state global hanya saat submit
visiMisi.findById.data.visi = draftVisi;
visiMisi.findById.data.misi = draftMisi;
// update nilai global hanya saat submit
visiMisi.findById.data.visi = formData.visi;
visiMisi.findById.data.misi = formData.misi;
visiMisi.update.save(visiMisi.findById.data);
}
router.push('/admin/ppid/visi-misi-ppid')
router.push('/admin/ppid/visi-misi-ppid');
};
return (
@@ -63,11 +70,11 @@ function VisiMisiPPIDEdit() {
>
<Stack gap="xl">
<Box>
<VisiPPID value={draftVisi} onChange={setDraftVisi} />
<VisiPPID value={formData.visi} onChange={value => handleChange('visi', value)} />
</Box>
<Box>
<MisiPPID value={draftMisi} onChange={setDraftMisi} />
<MisiPPID value={formData.misi} onChange={value => handleChange('misi', value)} />
</Box>
<Group justify="flex-end" mt="md">

118
src/app/admin/(dashboard)/user&role/role/[id]/page.tsx
View File

@@ -1,62 +1,71 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, MultiSelect, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useEffect, useState, useCallback } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
import user from '../../../_state/user/user-state';
function EditRole() {
const stateRole = useProxy(user.roleState)
const stateRole = useProxy(user.roleState);
const router = useRouter();
const params = useParams();
// Controlled local state
const [formData, setFormData] = useState({
name: stateRole.update.form.name || "",
permissions: stateRole.update.form.permissions || [],
})
name: '',
permissions: [] as string[],
});
// Load role data
const loadRole = useCallback(async (id: string) => {
try {
const data = await stateRole.update.load(id);
if (data) {
setFormData({
name: data.name || '',
permissions: data.permissions || [],
});
}
} catch (error) {
console.error('Error loading role:', error);
toast.error(error instanceof Error ? error.message : 'Gagal mengambil data role');
}
}, [stateRole.update]);
useEffect(() => {
stateRole.findMany.load();
const loadRole = async () => {
const id = params?.id as string;
if (!id) return;
stateRole.findMany.load(); // Load permissions/options
const id = params?.id as string;
if (id) loadRole(id);
}, [params?.id, loadRole, stateRole.findMany]);
try {
const data = await stateRole.update.load(id);
if (data) {
setFormData({
name: data.name || "",
permissions: data.permissions || [],
});
}
} catch (error) {
console.error("Error loading role:", error);
toast.error(
error instanceof Error ? error.message : "Gagal mengambil data role"
);
}
// Submit handler
const handleSubmit = async () => {
if (!formData.name.trim()) {
toast.error('Nama role tidak boleh kosong');
return;
}
if (!formData.permissions.length) {
toast.error('Pilih minimal satu permission');
return;
}
loadRole();
}, [params?.id]);
const handleSubmit = async () => {
try {
// Update global state only on submit
stateRole.update.form = {
...stateRole.update.form,
name: formData.name,
permissions: formData.permissions,
}
};
await stateRole.update.update();
toast.success("Role berhasil diperbarui!");
router.push("/admin/user&role/role");
toast.success('Role berhasil diperbarui!');
router.push('/admin/user&role/role');
} catch (error) {
console.error("Error updating role:", error);
toast.error("Terjadi kesalahan saat memperbarui role");
console.error('Error updating role:', error);
toast.error('Terjadi kesalahan saat memperbarui role');
}
};
@@ -76,47 +85,48 @@ function EditRole() {
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p={'md'}
p="md"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap={"xs"}>
<Title order={4}>Edit Role</Title>
<Stack gap="xs">
<TextInput
defaultValue={formData.name}
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
label={<Text fw={"bold"} fz={"sm"}>Nama Role</Text>}
placeholder='Masukkan nama role'
label={<Text fw="bold" fz="sm">Nama Role</Text>}
placeholder="Masukkan nama role"
/>
<MultiSelect
value={formData.permissions}
onChange={(val) => setFormData({ ...formData, permissions: val })}
label={<Text fw={"bold"} fz={"sm"}>Permission</Text>}
placeholder='Pilih permission'
label={<Text fw="bold" fz="sm">Permission</Text>}
placeholder="Pilih permission"
data={
stateRole.findMany.data?.map((v) => ({
value: v.id, // Make sure this is using the ID
label: v.name
value: v.id,
label: v.name,
})) || []
}
clearable
searchable
required
error={!formData.permissions.length ? "Pilih minimal satu permission" : undefined}
error={!formData.permissions.length ? 'Pilih minimal satu permission' : undefined}
/>
<Group justify="right">
<Button
radius="md"
size="md"
onClick={handleSubmit}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>Submit</Button>
<Button
radius="md"
size="md"
onClick={handleSubmit}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Submit
</Button>
</Group>
</Stack>
</Paper>

2
src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/findMany.ts
View File

@@ -27,7 +27,7 @@ async function kategoriBeritaFindMany(context: Context) {
where,
skip,
take: limit,
orderBy: { createdAt: 'desc' },
orderBy: { createdAt: 'asc' },
}),
prisma.kategoriBerita.count({ where }),
]);

52
src/app/api/[[...slugs]]/_lib/ppid/permohonan_informasi_publik/findUnique.ts Normal file
View File

@@ -0,0 +1,52 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function permohonanInformasiPublikFindUnique(context: Context) {
const url = new URL(context.request.url);
const pathSegments = url.pathname.split('/');
const id = pathSegments[pathSegments.length - 1];
if (!id) {
return {
success: false,
message: "ID is required",
}
}
try {
if (typeof id !== 'string') {
return {
success: false,
message: "ID is required",
}
}
const data = await prisma.permohonanInformasiPublik.findUnique({
where: { id },
include: {
jenisInformasiDiminta: true,
caraMemperolehInformasi: true,
caraMemperolehSalinanInformasi: true,
}
});
if (!data) {
return {
success: false,
message: "Permohonan informasi publik tidak ditemukan",
}
}
return {
success: true,
message: "Success find permohonan informasi publik",
data,
}
} catch (error) {
console.error("Find by ID error:", error);
return {
success: false,
message: "Gagal mengambil permohonan informasi publik: " + (error instanceof Error ? error.message : 'Unknown error'),
}
}
}

5
src/app/api/[[...slugs]]/_lib/ppid/permohonan_informasi_publik/index.ts
View File

@@ -4,6 +4,7 @@ import permohonanInformasiPublikFindMany from "./find-many";
import jenisInformasiFindMany from "./jenisInformasi";
import memperolehInformasiFindMany from "./memperolehInformasi";
import salinanInformasiFindMany from "./salinanInformasi";
import permohonanInformasiPublikFindUnique from "./findUnique";
const PermohonanInformasiPublik = new Elysia({
prefix: "/permohonaninformasipublik",
@@ -12,6 +13,10 @@ const PermohonanInformasiPublik = new Elysia({
.get("/jenisInformasi/find-many", jenisInformasiFindMany)
.get("/memperolehInformasi/find-many", memperolehInformasiFindMany)
.get("/salinanInformasi/find-many", salinanInformasiFindMany)
.get("/:id", async (context) => {
const response = await permohonanInformasiPublikFindUnique(context);
return response;
})
.get("/find-many", permohonanInformasiPublikFindMany)
.post("/create", permohonanInformasiPublikCreate, {
body: t.Object({

47
src/app/api/[[...slugs]]/_lib/ppid/permohonan_keberatan_informasi_publik/findUnique.ts Normal file
View File

@@ -0,0 +1,47 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function permohonanKeberatanInformasiPublikFindUnique(context: Context) {
const url = new URL(context.request.url);
const pathSegments = url.pathname.split('/');
const id = pathSegments[pathSegments.length - 1];
if (!id) {
return {
success: false,
message: "ID is required",
}
}
try {
if (typeof id !== 'string') {
return {
success: false,
message: "ID is required",
}
}
const data = await prisma.formulirPermohonanKeberatan.findUnique({
where: { id },
});
if (!data) {
return {
success: false,
message: "Permohonan keberatan informasi publik tidak ditemukan",
}
}
return {
success: true,
message: "Success find permohonan keberatan informasi publik",
data,
}
} catch (error) {
console.error("Find by ID error:", error);
return {
success: false,
message: "Gagal mengambil permohonan keberatan informasi publik: " + (error instanceof Error ? error.message : 'Unknown error'),
}
}
}

2
src/app/api/[[...slugs]]/_lib/ppid/permohonan_keberatan_informasi_publik/index.ts
View File

@@ -1,12 +1,14 @@
import Elysia, { t } from "elysia";
import permohonanKeberatanInformasiPublikCreate from "./create";
import permohonanKeberatanInformasiPublikFindMany from "./find-many";
import permohonanKeberatanInformasiPublikFindUnique from "./findUnique";
const PermohonanKeberatanInformasiPublik = new Elysia({
prefix: "/permohonankeberataninformasipublik",
tags: ["PPID/Permohonan Keberatan Informasi Publik"],
})
.get("/find-many", permohonanKeberatanInformasiPublikFindMany)
.get("/:id", permohonanKeberatanInformasiPublikFindUnique)
.post("/create", permohonanKeberatanInformasiPublikCreate, {
body: t.Object({
name: t.String(),

8
src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/pegawai/del.ts
View File

@@ -13,17 +13,13 @@ export default async function pegawaiDelete(context: Context) {
}
try {
const deleted = await prisma.pegawaiPPID.update({
const deleted = await prisma.pegawaiPPID.delete({
where: { id },
data: {
isActive: false, // soft delete
updatedAt: new Date(),
},
});
return {
success: true,
message: "Pegawai berhasil di-nonaktifkan",
message: "Pegawai berhasil dihapus",
data: deleted,
};
} catch (error: any) {

4
src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/pegawai/index.ts
View File

@@ -2,8 +2,9 @@ import Elysia, { t } from "elysia";
import pegawaiFindMany from "./findMany";
import pegawaiFindUnique from "./findUnique";
import pegawaiCreate from "./create";
import pegawaiDelete from "./del";
import pegawaiNonActive from "./nonActive";
import pegawaiUpdate from "./updt";
import pegawaiDelete from "./del";
const Pegawai = new Elysia({
@@ -58,6 +59,7 @@ const Pegawai = new Elysia({
)
// ✅ Delete
.delete("/non-active/:id", pegawaiNonActive)
.delete("/del/:id", pegawaiDelete);
export default Pegawai;

37
src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/pegawai/nonActive.ts Normal file
View File

@@ -0,0 +1,37 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function pegawaiNonActive(context: Context) {
const { id } = context.params as { id: string };
if (!id) {
return {
success: false,
message: "ID pegawai tidak ditemukan",
};
}
try {
const deleted = await prisma.pegawaiPPID.update({
where: { id },
data: {
isActive: false, // soft delete
updatedAt: new Date(),
},
});
return {
success: true,
message: "Pegawai berhasil di-nonaktifkan",
data: deleted,
};
} catch (error: any) {
console.error("Error nonaktifkan pegawai:", error);
return {
success: false,
message: "Gagal nonaktifkan pegawai",
error: error.message,
};
}
}

45
src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/posisi-organisasi/findManyAll.ts Normal file
View File

@@ -0,0 +1,45 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
// /api/posisi-organisasi/findManyAll.ts
import prisma from "@/lib/prisma";
import { Context } from "elysia";
async function posisiOrganisasiFindManyAll(context: Context) {
const search = (context.query.search as string) || "";
// filter default
const where: any = { isActive: true };
if (search) {
where.OR = [
{ nama: { contains: search, mode: "insensitive" } },
{ deskripsi: { contains: search, mode: "insensitive" } },
];
}
try {
const data = await prisma.posisiOrganisasiPPID.findMany({
where,
orderBy: { hierarki: "asc" },
});
return {
success: true,
message: "Berhasil mengambil semua data posisi organisasi",
data: data.map((item: any) => ({
id: item.id,
nama: item.nama,
deskripsi: item.deskripsi,
hierarki: item.hierarki,
})),
total: data.length,
};
} catch (e) {
console.error("Find many all error:", e);
return {
success: false,
message: "Gagal mengambil data posisi organisasi",
};
}
}
export default posisiOrganisasiFindManyAll;

2
src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/posisi-organisasi/index.ts
View File

@@ -4,6 +4,7 @@ import posisiOrganisasiFindUnique from "./findUnique";
import posisiOrganisasiCreate from "./create";
import posisiOrganisasiUpdate from "./updt";
import posisiOrganisasiDelete from "./del";
import posisiOrganisasiFindManyAll from "./findManyAll";
const PosisiOrganisasi = new Elysia({
prefix: "/posisiorganisasi",
@@ -11,6 +12,7 @@ const PosisiOrganisasi = new Elysia({
})
.get("/find-many", posisiOrganisasiFindMany)
.get("/find-many-all", posisiOrganisasiFindManyAll)
.get("/:id", async (context) => {
const response = await posisiOrganisasiFindUnique(context);
return response;

6
src/app/darmasaba/(pages)/desa/berita/[kategori]/Content.tsx
View File

@@ -75,7 +75,7 @@ export default function Content({ kategori }: { kategori: string }) {
{featured.kategoriBerita?.name || kategori}
</Badge>
<Title order={2} mb="md">{featured.judul}</Title>
<Text color="dimmed" lineClamp={3} mb="md">{featured.deskripsi}</Text>
<Text c="dimmed" lineClamp={3} mb="md" dangerouslySetInnerHTML={{ __html: featured.deskripsi }} />
</div>
<Group justify="apart" mt="auto">
<Group gap="xs">
@@ -135,9 +135,9 @@ export default function Content({ kategori }: { kategori: string }) {
{item.kategoriBerita?.name || kategori}
</Badge>
<Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
<Text size="sm" color="dimmed" lineClamp={3} mt="xs">{item.deskripsi}</Text>
<Text size="sm" c="dimmed" lineClamp={3} mt="xs" dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
<Group justify="apart" mt="md" gap="xs">
<Text size="xs" color="dimmed">
<Text size="xs" c="dimmed">
{new Date(item.createdAt).toLocaleDateString('id-ID', {
day: 'numeric',
month: 'short',

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

@@ -1,3 +1,152 @@
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
// 'use client'
// import colors from '@/con/colors';
// import { Box, Group, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
// import { IconSearch } from '@tabler/icons-react';
// import { usePathname, useRouter, useSearchParams } from 'next/navigation';
// import React, { useEffect, useState } from 'react';
// import BackButton from '../../layanan/_com/BackButto';
// type HeaderSearchProps = {
// placeholder?: string;
// searchIcon?: React.ReactNode;
// value?: string;
// onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
// children?: React.ReactNode;
// };
// function LayoutTabsBerita({
// children,
// placeholder = "pencarian",
// searchIcon = <IconSearch size={20} />
// }: HeaderSearchProps) {
// const router = useRouter();
// const pathname = usePathname();
// const searchParams = useSearchParams();
// const activeTab = pathname.split('/').pop() || 'semua';
// const initialSearch = searchParams.get('search') || '';
// const [searchValue, setSearchValue] = useState(initialSearch);
// const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
// const [activeTabState, setActiveTabState] = useState(activeTab);
// useEffect(() => {
// setActiveTabState(activeTab);
// }, [activeTab]);
// useEffect(() => {
// return () => {
// if (searchTimeout !== null) clearTimeout(searchTimeout);
// };
// }, [searchTimeout]);
// const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
// const value = event.target.value;
// setSearchValue(value);
// if (searchTimeout !== null) clearTimeout(searchTimeout);
// const newTimeout = window.setTimeout(() => {
// const params = new URLSearchParams(searchParams.toString());
// if (value) params.set('search', value);
// else params.delete('search');
// if (params.toString() !== searchParams.toString()) {
// router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
// }
// }, 500);
// setSearchTimeout(newTimeout);
// };
// const tabs = [
// { label: "Semua", value: "semua", href: "/darmasaba/desa/berita/semua" },
// { label: "Budaya", value: "budaya", href: "/darmasaba/desa/berita/budaya" },
// { label: "Pemerintahan", value: "pemerintahan", href: "/darmasaba/desa/berita/pemerintahan" },
// { label: "Ekonomi", value: "ekonomi", href: "/darmasaba/desa/berita/ekonomi" },
// { label: "Pembangunan", value: "pembangunan", href: "/darmasaba/desa/berita/pembangunan" },
// { label: "Sosial", value: "sosial", href: "/darmasaba/desa/berita/sosial" },
// { label: "Teknologi", value: "teknologi", href: "/darmasaba/desa/berita/teknologi" },
// ];
// const handleTabChange = (value: string | null) => {
// if (!value) return;
// const tab = tabs.find(t => t.value === value);
// if (tab) {
// const params = new URLSearchParams(searchParams.toString());
// router.push(`/darmasaba/desa/berita/${value}${params.toString() ? `?${params.toString()}` : ''}`);
// }
// };
// return (
// <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
// {/* Header */}
// <Box px={{ base: "md", md: 100 }}>
// <BackButton />
// </Box>
// <Box px={{ base: 'md', md: 100 }}>
// <Group justify='space-between' align="center">
// <Stack gap="0">
// <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
// Portal Berita Darmasaba
// </Text>
// <Text>
// Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
// </Text>
// </Stack>
// <Box>
// <TextInput
// radius="lg"
// placeholder={placeholder}
// leftSection={searchIcon}
// w="100%"
// value={searchValue}
// onChange={handleSearchChange}
// />
// </Box>
// </Group>
// </Box>
// <Tabs
// color={colors['blue-button']}
// variant="pills"
// value={activeTabState}
// onChange={handleTabChange}
// >
// <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
// {/* SCROLLABLE TABS */}
// <Box style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
// <TabsList style={{ display: 'flex', flexWrap: 'nowrap', gap: '0.5rem' }}>
// {tabs.map((tab, index) => (
// <TabsTab
// key={index}
// value={tab.value}
// onClick={() => router.push(tab.href)}
// style={{
// flex: '0 0 auto', // Prevent shrinking
// minWidth: 100, // optional: makes them touch-friendly
// textAlign: 'center'
// }}
// >
// {tab.label}
// </TabsTab>
// ))}
// </TabsList>
// </Box>
// </Box>
// {children}
// </Tabs>
// </Stack>
// );
// }
// export default LayoutTabsBerita;
'use client'
import colors from '@/con/colors';
import { Box, Group, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
@@ -5,39 +154,32 @@ import { IconSearch } from '@tabler/icons-react';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import BackButton from '../../layanan/_com/BackButto';
import { useProxy } from 'valtio/utils';
import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
type HeaderSearchProps = {
placeholder?: string;
searchIcon?: React.ReactNode;
value?: string;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
children?: React.ReactNode;
};
function LayoutTabsBerita({
children,
placeholder = "pencarian",
searchIcon = <IconSearch size={20} />
}: HeaderSearchProps) {
function LayoutTabsBerita({ children }: { children: React.ReactNode }) {
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const activeTab = pathname.split('/').pop() || 'semua';
const initialSearch = searchParams.get('search') || '';
const [searchValue, setSearchValue] = useState(initialSearch);
const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
const kategoriState = useProxy(stateDashboardBerita.kategoriBerita);
// tab aktif dari url
const activeTab = pathname.split('/').pop() || 'semua';
const [activeTabState, setActiveTabState] = useState(activeTab);
useEffect(() => {
kategoriState.findMany.load(); // ambil kategori dari DB
}, []);
useEffect(() => {
setActiveTabState(activeTab);
}, [activeTab]);
useEffect(() => {
return () => {
if (searchTimeout !== null) clearTimeout(searchTimeout);
};
}, [searchTimeout]);
// search
const initialSearch = searchParams.get('search') || '';
const [searchValue, setSearchValue] = useState(initialSearch);
const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
@@ -47,26 +189,23 @@ function LayoutTabsBerita({
const newTimeout = window.setTimeout(() => {
const params = new URLSearchParams(searchParams.toString());
if (value) params.set('search', value);
else params.delete('search');
if (params.toString() !== searchParams.toString()) {
router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
}
router.push(`/darmasaba/desa/berita/${activeTab}${params.toString() ? `?${params.toString()}` : ''}`);
}, 500);
setSearchTimeout(newTimeout);
};
// --- tabs dinamis ---
const tabs = [
{ label: "Semua", value: "semua", href: "/darmasaba/desa/berita/semua" },
{ label: "Budaya", value: "budaya", href: "/darmasaba/desa/berita/budaya" },
{ label: "Pemerintahan", value: "pemerintahan", href: "/darmasaba/desa/berita/pemerintahan" },
{ label: "Ekonomi", value: "ekonomi", href: "/darmasaba/desa/berita/ekonomi" },
{ label: "Pembangunan", value: "pembangunan", href: "/darmasaba/desa/berita/pembangunan" },
{ label: "Sosial", value: "sosial", href: "/darmasaba/desa/berita/sosial" },
{ label: "Teknologi", value: "teknologi", href: "/darmasaba/desa/berita/teknologi" },
...(kategoriState.findMany.data || []).map((kat: any) => ({
label: kat.name,
value: kat.name.toLowerCase(),
href: `/darmasaba/desa/berita/${kat.name.toLowerCase()}`
}))
];
const handleTabChange = (value: string | null) => {
@@ -74,7 +213,7 @@ function LayoutTabsBerita({
const tab = tabs.find(t => t.value === value);
if (tab) {
const params = new URLSearchParams(searchParams.toString());
router.push(`/darmasaba/desa/berita/${value}${params.toString() ? `?${params.toString()}` : ''}`);
router.push(`${tab.href}${params.toString() ? `?${params.toString()}` : ''}`);
}
};
@@ -88,18 +227,16 @@ function LayoutTabsBerita({
<Box px={{ base: 'md', md: 100 }}>
<Group justify='space-between' align="center">
<Stack gap="0">
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold">
Portal Berita Darmasaba
</Text>
<Text>
Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
</Text>
<Text>Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba</Text>
</Stack>
<Box>
<TextInput
radius="lg"
placeholder={placeholder}
leftSection={searchIcon}
placeholder="pencarian"
leftSection={<IconSearch size={20} />}
w="100%"
value={searchValue}
onChange={handleSearchChange}
@@ -108,6 +245,7 @@ function LayoutTabsBerita({
</Group>
</Box>
{/* TABS */}
<Tabs
color={colors['blue-button']}
variant="pills"
@@ -115,7 +253,6 @@ function LayoutTabsBerita({
onChange={handleTabChange}
>
<Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
{/* SCROLLABLE TABS */}
<Box style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
<TabsList style={{ display: 'flex', flexWrap: 'nowrap', gap: '0.5rem' }}>
{tabs.map((tab, index) => (
@@ -124,8 +261,8 @@ function LayoutTabsBerita({
value={tab.value}
onClick={() => router.push(tab.href)}
style={{
flex: '0 0 auto', // Prevent shrinking
minWidth: 100, // optional: makes them touch-friendly
flex: '0 0 auto',
minWidth: 100,
textAlign: 'center'
}}
>

8
src/app/darmasaba/(pages)/desa/berita/semua/page.tsx
View File

@@ -82,9 +82,7 @@ function Semua() {
{featuredData.kategoriBerita?.name || 'Berita'}
</Badge>
<Title order={2} mb="md">{featuredData.judul}</Title>
<Text color="dimmed" lineClamp={3} mb="md">
{featuredData.deskripsi}
</Text>
<Text c="dimmed" lineClamp={3} mb="md" dangerouslySetInnerHTML={{ __html: featuredData.deskripsi }} />
</div>
<Group justify="apart" mt="auto">
<Group gap="xs">
@@ -146,10 +144,10 @@ function Semua() {
</Badge>
<Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
<Text size="sm" color="dimmed" lineClamp={3} mt="xs">{item.deskripsi}</Text>
<Text size="sm" c="dimmed" lineClamp={3} mt="xs" dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
<Flex align="center" justify="apart" mt="md" gap="xs">
<Text size="xs" color="dimmed">
<Text size="xs" c="dimmed">
{new Date(item.createdAt).toLocaleDateString('id-ID', {
day: 'numeric',
month: 'short',

174
src/app/darmasaba/(pages)/desa/layanan/_com/pelayananSuratKeterangan.tsx
View File

@@ -1,40 +1,47 @@
/* eslint-disable react-hooks/exhaustive-deps */
"use client";
import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
import colors from '@/con/colors';
import { BackgroundImage, Box, Button, Center, Group, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { BackgroundImage, Box, Button, Center, Group, Pagination, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconFileDescription, IconInfoCircle } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import React, { useEffect, useMemo, useState } from 'react';
import { useProxy } from 'valtio/utils';
function PelayananSuratKeterangan({ search }: { search: string }) {
const [loading, setLoading] = useState(false);
const router = useRouter();
const state = useProxy(stateLayananDesa);
const filteredData = useMemo(() => {
if (!state.suratKeterangan.findMany.data) return [];
return state.suratKeterangan.findMany.data.filter((item) => {
const keyword = search.toLowerCase();
return item.name?.toLowerCase().includes(keyword);
});
}, [state.suratKeterangan.findMany.data, search]);
const {
data,
page,
totalPages,
loading,
load
} = state.suratKeterangan.findMany;
useEffect(() => {
const loadData = async () => {
try {
setLoading(true);
await state.suratKeterangan.findMany.load();
} catch (error) {
console.error('Gagal memuat data:', error);
} finally {
setLoading(false);
}
};
loadData();
}, []);
useShallowEffect(() => {
load(page, 9, search);
}, [page, search]);
if (loading || !data) {
return Array.from({ length: 3 }).map((_, i) => (
<Skeleton key={i} h={250} radius="lg" />
));
}
if (data?.length === 0) {
return (
<Center py="xl">
<Stack align="center" gap="xs">
<IconFileDescription size={40} stroke={1.5} color={colors["blue-button"]} />
<Text c="dimmed" ta="center">
Tidak ada layanan surat keterangan yang ditemukan
</Text>
</Stack>
</Center>
);
}
return (
<Box pb="xl">
@@ -55,69 +62,68 @@ function PelayananSuratKeterangan({ search }: { search: string }) {
cols={{ base: 1, sm: 2, md: 3 }}
spacing="lg"
>
{loading ? (
Array.from({ length: 3 }).map((_, i) => (
<Skeleton key={i} h={250} radius="lg" />
))
) : filteredData.length === 0 ? (
<Center py="xl">
<Stack align="center" gap="xs">
<IconFileDescription size={40} stroke={1.5} color={colors["blue-button"]} />
<Text c="dimmed" ta="center">
Tidak ada layanan surat keterangan yang ditemukan
{data?.map((v, k) => (
<BackgroundImage
key={k}
src={v.image?.link || ''}
h={250}
radius="lg"
pos="relative"
style={{
boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
overflow: "hidden",
}}
>
<Box
pos="absolute"
w="100%"
h="100%"
bg="rgba(0,0,0,0.45)"
style={{ borderRadius: 16 }}
/>
<Stack justify="space-between" h="100%" gap="md" p="lg" pos="relative">
<Text
c="white"
fw={600}
fz="lg"
ta="center"
lineClamp={2}
>
{v.name}
</Text>
</Stack>
</Center>
) : (
filteredData.map((v, k) => (
<BackgroundImage
key={k}
src={v.image?.link || ''}
h={250}
radius="lg"
pos="relative"
style={{
boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
overflow: "hidden",
}}
>
<Box
pos="absolute"
w="100%"
h="100%"
bg="rgba(0,0,0,0.45)"
style={{ borderRadius: 16 }}
/>
<Stack justify="space-between" h="100%" gap="md" p="lg" pos="relative">
<Text
c="white"
fw={600}
fz="lg"
ta="center"
lineClamp={2}
<Group justify="center">
<Button
size="md"
radius="xl"
bg={colors["blue-button"]}
px="lg"
onClick={() => router.push(`/darmasaba/desa/layanan/${v.id}`)}
style={{
boxShadow: "0 0 12px rgba(59,130,246,0.6)",
transition: "all 0.2s ease",
}}
>
{v.name}
</Text>
<Group justify="center">
<Button
size="md"
radius="xl"
bg={colors["blue-button"]}
px="lg"
onClick={() => router.push(`/darmasaba/desa/layanan/${v.id}`)}
style={{
boxShadow: "0 0 12px rgba(59,130,246,0.6)",
transition: "all 0.2s ease",
}}
>
Lihat Detail
</Button>
</Group>
</Stack>
</BackgroundImage>
))
)}
Lihat Detail
</Button>
</Group>
</Stack>
</BackgroundImage>
))}
</SimpleGrid>
<Center>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
</Box>
);
}

5
src/app/darmasaba/(pages)/ppid/dasar-hukum/page.tsx
View File

@@ -74,9 +74,8 @@ function Page() {
fw="bold"
fz={{ base: 'lg', md: 'xl' }}
style={{ lineHeight: 1.4 }}
>
{item.judul}
</Text>
dangerouslySetInnerHTML={{ __html: item.judul }}
/>
<Text
fz={{ base: 'sm', md: 'md' }}
style={{ lineHeight: 1.7, wordBreak: "break-word", whiteSpace: "normal" }}

15
src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx
View File

@@ -262,16 +262,19 @@ function StrukturOrganisasiPPID() {
}
const posisiMap = new Map<string, any>()
for (const pegawai of stateOrganisasi.findMany.data) {
const posisiId = pegawai.posisi.id
const aktifPegawai = stateOrganisasi.findMany.data.filter((p: any) => p.isActive);
for (const pegawai of aktifPegawai) {
const posisiId = pegawai.posisi.id;
if (!posisiMap.has(posisiId)) {
posisiMap.set(posisiId, {
...pegawai.posisi,
pegawaiList: [],
children: [],
})
});
}
posisiMap.get(posisiId)!.pegawaiList.push(pegawai)
posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
}
const root: any[] = []
@@ -371,7 +374,7 @@ function nodeTemplate(node: any) {
<Text size="xs" c="dimmed" mt={8} lineClamp={3}>
{description || 'Belum ada deskripsi.'}
</Text>
<Tooltip label="Lihat detail" withArrow position="bottom">
<Tooltip label="Kembali ke struktur organisasi" withArrow position="bottom">
<Button
variant="light"
size="xs"
@@ -383,7 +386,7 @@ function nodeTemplate(node: any) {
}
}}
>
Detail
Kembali
</Button>
</Tooltip>
</Card>

10
src/app/darmasaba/(tambahan)/prestasi-desa/page.tsx
View File

@@ -91,21 +91,17 @@ function Page() {
</Group>
<Box p={"lg"}>
<Text
ta={"center"}
fw={"bold"}
c={"white"}
size={"1.8rem"}
style={{
textAlign: "center",
lineHeight: 1.4,
minHeight: '5.4rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
wordBreak: "break-word",
whiteSpace: "normal"
}}
lineClamp={3}
lineClamp={5}
dangerouslySetInnerHTML={{ __html: v.deskripsi }}
truncate={'end'}
/>
</Box>
<Group justify="center">

1
src/app/darmasaba/_com/main-page/prestasi/index.tsx
View File

@@ -102,6 +102,7 @@ function Prestasi() {
ta="center"
dangerouslySetInnerHTML={{ __html: v.deskripsi }}
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
lineClamp={5}
/>
<Group justify="center">
<Button