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

Sinkronisasi UI & API Admin - User Submenu Gotong Royong, Menu Lingkungan

Browse Source
This commit is contained in:
nico
2025-08-27 11:57:02 +08:00
parent 3a726a3334
commit f15ef5a275
20 changed files with 1443 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/app/admin/(dashboard)/_state/lingkungan/gotong-royong.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import ApiFetch from "@/lib/api-fetch";
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
@@ -67,10 +68,46 @@ const kegiatanDesa = proxy({
};
}>
> | null,
async load() {
const res = await ApiFetch.api.lingkungan.kegiatandesa["find-many"].get();
if (res.status === 200) {
kegiatanDesa.findMany.data = res.data?.data ?? [];
page: 1,
totalPages: 1,
total: 0,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "", kategori = "") => {
// Change to arrow function
kegiatanDesa.findMany.loading = true; // Use the full path to access the property
kegiatanDesa.findMany.page = page;
kegiatanDesa.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
if (kategori) query.kategori = kategori;
const res = await ApiFetch.api.lingkungan.kegiatandesa[
"find-many"
].get({
query,
});
if (res.status === 200 && res.data?.success) {
kegiatanDesa.findMany.data = res.data.data || [];
kegiatanDesa.findMany.total = res.data.total || 0;
kegiatanDesa.findMany.totalPages = res.data.totalPages || 1;
} else {
console.error(
"Failed to load kegiatan desa:",
res.data?.message
);
kegiatanDesa.findMany.data = [];
kegiatanDesa.findMany.total = 0;
kegiatanDesa.findMany.totalPages = 1;
}
} catch (error) {
console.error("Error loading kegiatan desa:", error);
kegiatanDesa.findMany.data = [];
kegiatanDesa.findMany.total = 0;
kegiatanDesa.findMany.totalPages = 1;
} finally {
kegiatanDesa.findMany.loading = false;
}
},
},
@@ -244,6 +281,35 @@ const kegiatanDesa = proxy({
kegiatanDesa.edit.form = { ...defaultKegiatanDesaForm };
},
},
findFirst: {
data: null as Prisma.KegiatanDesaGetPayload<{
include: {
image: true;
kategoriKegiatan: true;
};
}> | null,
loading: false,
// findFirst.load()
async load(kategori?: string) {
this.loading = true;
try {
const res = await ApiFetch.api.lingkungan.kegiatandesa["find-first"].get({
query: kategori ? { kategori } : {},
});
if (res.status === 200 && res.data?.success) {
this.data = res.data.data || null;
} else {
this.data = null;
}
} catch (err) {
console.error("Gagal fetch kegiatan desa terbaru:", err);
this.data = null;
} finally {
this.loading = false;
}
},
},
});
// ========================================= KATEGORI kegiatan ========================================= //
@@ -269,9 +335,7 @@ const kategoriKegiatan = proxy({
}
try {
kategoriKegiatan.create.loading = true;
const res = await ApiFetch.api.lingkungan.kategorikegiatan[
"create"
].post(kategoriKegiatan.create.form);
const res = await ApiFetch.api.lingkungan.kategorikegiatan["create"].post(kategoriKegiatan.create.form);
if (res.status === 200) {
kategoriKegiatan.findMany.load();
return toast.success("Data berhasil ditambahkan");
@@ -305,9 +369,7 @@ const kategoriKegiatan = proxy({
}> | null,
async load(id: string) {
try {
const res = await fetch(
`/api/lingkungan/kategorikegiatan/${id}`
);
const res = await fetch(`/api/lingkungan/kategorikegiatan/${id}`);
if (res.ok) {
const data = await res.json();
kategoriKegiatan.findUnique.data = data.data ?? null;
@@ -367,15 +429,12 @@ const kategoriKegiatan = proxy({
}
try {
const response = await fetch(
`/api/lingkungan/kategorikegiatan/${id}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
const response = await fetch(`/api/lingkungan/kategorikegiatan/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}

192
src/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import ApiFetch from "@/lib/api-fetch";
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
@@ -51,13 +52,46 @@ const jenjangPendidikan = proxy({
id: string;
nama: string;
}> | null,
async load() {
const res =
await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
"find-many"
].get();
if (res.status === 200) {
jenjangPendidikan.findMany.data = res.data?.data ?? [];
page: 1,
totalPages: 1,
total: 0,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
// Change to arrow function
jenjangPendidikan.findMany.loading = true; // Use the full path to access the property
jenjangPendidikan.findMany.page = page;
jenjangPendidikan.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res =
await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
"find-many"
].get({
query,
});
if (res.status === 200 && res.data?.success) {
jenjangPendidikan.findMany.data = res.data.data || [];
jenjangPendidikan.findMany.total = res.data.total || 0;
jenjangPendidikan.findMany.totalPages = res.data.totalPages || 1;
} else {
console.error(
"Failed to load jenjang pendidikan:",
res.data?.message
);
jenjangPendidikan.findMany.data = [];
jenjangPendidikan.findMany.total = 0;
jenjangPendidikan.findMany.totalPages = 1;
}
} catch (error) {
console.error("Error loading jenjang pendidikan:", error);
jenjangPendidikan.findMany.data = [];
jenjangPendidikan.findMany.total = 0;
jenjangPendidikan.findMany.totalPages = 1;
} finally {
jenjangPendidikan.findMany.loading = false;
}
},
},
@@ -304,13 +338,46 @@ const lembagaPendidikan = proxy({
};
}>
> | null,
async load() {
const res =
await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
"find-many"
].get();
if (res.status === 200) {
lembagaPendidikan.findMany.data = res.data?.data ?? [];
page: 1,
totalPages: 1,
total: 0,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
// Change to arrow function
lembagaPendidikan.findMany.loading = true; // Use the full path to access the property
lembagaPendidikan.findMany.page = page;
lembagaPendidikan.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res =
await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
"find-many"
].get({
query,
});
if (res.status === 200 && res.data?.success) {
lembagaPendidikan.findMany.data = res.data.data || [];
lembagaPendidikan.findMany.total = res.data.total || 0;
lembagaPendidikan.findMany.totalPages = res.data.totalPages || 1;
} else {
console.error(
"Failed to load lembaga pendidikan:",
res.data?.message
);
lembagaPendidikan.findMany.data = [];
lembagaPendidikan.findMany.total = 0;
lembagaPendidikan.findMany.totalPages = 1;
}
} catch (error) {
console.error("Error loading lembaga pendidikan:", error);
lembagaPendidikan.findMany.data = [];
lembagaPendidikan.findMany.total = 0;
lembagaPendidikan.findMany.totalPages = 1;
} finally {
lembagaPendidikan.findMany.loading = false;
}
},
},
@@ -558,12 +625,45 @@ const siswa = proxy({
};
}>
> | null,
async load() {
const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
"find-many"
].get();
if (res.status === 200) {
siswa.findMany.data = res.data?.data ?? [];
page: 1,
totalPages: 1,
total: 0,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
// Change to arrow function
siswa.findMany.loading = true; // Use the full path to access the property
siswa.findMany.page = page;
siswa.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
"find-many"
].get({
query,
});
if (res.status === 200 && res.data?.success) {
siswa.findMany.data = res.data.data || [];
siswa.findMany.total = res.data.total || 0;
siswa.findMany.totalPages = res.data.totalPages || 1;
} else {
console.error(
"Failed to load siswa:",
res.data?.message
);
siswa.findMany.data = [];
siswa.findMany.total = 0;
siswa.findMany.totalPages = 1;
}
} catch (error) {
console.error("Error loading siswa:", error);
siswa.findMany.data = [];
siswa.findMany.total = 0;
siswa.findMany.totalPages = 1;
} finally {
siswa.findMany.loading = false;
}
},
},
@@ -798,12 +898,45 @@ const pengajar = proxy({
};
}>
> | null,
async load() {
const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
"find-many"
].get();
if (res.status === 200) {
pengajar.findMany.data = res.data?.data ?? [];
page: 1,
totalPages: 1,
total: 0,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
// Change to arrow function
pengajar.findMany.loading = true; // Use the full path to access the property
pengajar.findMany.page = page;
pengajar.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
"find-many"
].get({
query,
});
if (res.status === 200 && res.data?.success) {
pengajar.findMany.data = res.data.data || [];
pengajar.findMany.total = res.data.total || 0;
pengajar.findMany.totalPages = res.data.totalPages || 1;
} else {
console.error(
"Failed to load pengajar:",
res.data?.message
);
pengajar.findMany.data = [];
pengajar.findMany.total = 0;
pengajar.findMany.totalPages = 1;
}
} catch (error) {
console.error("Error loading pengajar:", error);
pengajar.findMany.data = [];
pengajar.findMany.total = 0;
pengajar.findMany.totalPages = 1;
} finally {
pengajar.findMany.loading = false;
}
},
},
@@ -815,7 +948,9 @@ const pengajar = proxy({
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/pendidikan/infosekolahpaud/pengajar/${id}`);
const res = await fetch(
`/api/pendidikan/infosekolahpaud/pengajar/${id}`
);
if (res.ok) {
const data = await res.json();
pengajar.findUnique.data = data.data ?? null;
@@ -948,7 +1083,8 @@ const pengajar = proxy({
result
);
throw new Error(
result?.message || `Gagal mengupdate pengajar (${response.status})`
result?.message ||
`Gagal mengupdate pengajar (${response.status})`
);
}

38
src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/findFirst.ts Normal file
View File

@@ -0,0 +1,38 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function KegiatanDesaFindFirst(context: Context) {
const kategori = (context.query.kategori as string) || '';
const where: any = { isActive: true };
if (kategori) {
where.kategoriKegiatan = {
name: { equals: kategori, mode: 'insensitive' }
};
}
try {
const data = await prisma.kegiatanDesa.findFirst({
where,
include: {
image: true,
kategoriKegiatan: true,
},
orderBy: { createdAt: 'desc' },
});
return {
success: true,
message: "Berhasil ambil gotong royong terbaru",
data,
};
} catch (error) {
console.error('Error di findFirst:', error);
return {
success: false,
message: 'Gagal memuat gotong royong terbaru',
};
}
}

31
src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/findMany.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
// /api/berita/findManyPaginated.ts
import prisma from "@/lib/prisma";
import { Context } from "elysia";
@@ -5,12 +6,38 @@ import { Context } from "elysia";
async function kegiatanDesaFindMany(context: Context) {
const page = Number(context.query.page) || 1;
const limit = Number(context.query.limit) || 10;
const search = (context.query.search as string) || '';
const kategori = (context.query.kategori as string) || ''; // 🔥 Parameter kategori baru
const skip = (page - 1) * limit;
// Buat where clause
const where: any = { isActive: true };
// Filter berdasarkan kategori (jika ada)
if (kategori) {
where.kategoriKegiatan = {
nama: {
equals: kategori,
mode: 'insensitive' // Tidak case-sensitive
}
};
}
// Tambahkan pencarian (jika ada)
if (search) {
where.OR = [
{ judul: { contains: search, mode: 'insensitive' } },
{ deskripsiSingkat: { contains: search, mode: 'insensitive' } },
{ deskripsiLengkap: { contains: search, mode: 'insensitive' } },
{ kategoriKegiatan: { nama: { contains: search, mode: 'insensitive' } } }
];
}
try {
const [data, total] = await Promise.all([
prisma.kegiatanDesa.findMany({
where: { isActive: true },
where,
include: {
kategoriKegiatan: true,
image: true,
@@ -20,7 +47,7 @@ async function kegiatanDesaFindMany(context: Context) {
orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
}),
prisma.kegiatanDesa.count({
where: { isActive: true }
where,
})
]);

4
src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/index.ts
View File

@@ -4,6 +4,7 @@ import KegiatanDesaDelete from "./del";
import KegiatanDesaFindMany from "./findMany";
import KegiatanDesaFindUnique from "./findUnique";
import KegiatanDesaUpdate from "./updt";
import KegiatanDesaFindFirst from "./findFirst";
const KegiatanDesa = new Elysia({
prefix: "/kegiatandesa",
@@ -16,6 +17,9 @@ const KegiatanDesa = new Elysia({
// ✅ Find by ID
.get("/:id", KegiatanDesaFindUnique)
// ✅ Find First
.get("/find-first", KegiatanDesaFindFirst)
// ✅ Create
.post("/create", KegiatanDesaCreate, {
body: t.Object({

63
src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/jenjang-pendidikan/findMany.ts
View File

@@ -1,15 +1,56 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function jenjangPendidikanFindMany() {
const data = await prisma.jenjangPendidikan.findMany();
return {
success: true,
data: data.map((item: any) => {
return {
id: item.id,
nama: item.nama,
}
}),
export default async function jenjangPendidikanFindMany(context: Context) {
const page = Number(context.query.page) || 1;
const limit = Number(context.query.limit) || 10;
const search = (context.query.search as string) || "";
const skip = (page - 1) * limit;
// Buat where clause
const where: any = { isActive: true };
// Tambahkan pencarian (jika ada)
if (search) {
where.OR = [
{ nama: { contains: search, mode: "insensitive" } },
{ lembagas: { contains: search, mode: "insensitive" } },
];
}
try {
// Ambil data dan total count secara paralel
const [data, total] = await Promise.all([
prisma.jenjangPendidikan.findMany({
where,
skip,
take: limit,
orderBy: { createdAt: "desc" },
}),
prisma.jenjangPendidikan.count({ where }),
]);
return {
success: true,
message: "Berhasil ambil jenjang pendidikan dengan pagination",
data: data.map((item: any) => {
return {
id: item.id,
nama: item.nama,
lembagas: item.lembagas,
};
}),
page,
limit,
total,
totalPages: Math.ceil(total / limit),
};
}
} catch (e) {
console.error("Error di findMany paginated:", e);
return {
success: false,
message: "Gagal mengambil data jenjang pendidikan",
};
}
}

22
src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/lembaga/findMany.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
// /api/berita/findManyPaginated.ts
import prisma from "@/lib/prisma";
import { Context } from "elysia";
@@ -5,12 +6,26 @@ import { Context } from "elysia";
async function lembagaPendidikanFindMany(context: Context) {
const page = Number(context.query.page) || 1;
const limit = Number(context.query.limit) || 10;
const search = (context.query.search as string) || "";
const skip = (page - 1) * limit;
// Buat where clause
const where: any = { isActive: true };
// Tambahkan pencarian (jika ada)
if (search) {
where.OR = [
{ nama: { contains: search, mode: "insensitive" } },
{ siswa: { contains: search, mode: "insensitive" } },
{ pengajar: { contains: search, mode: "insensitive" } },
{ jenjangPendidikan: { contains: search, mode: "insensitive" } },
];
}
try {
const [data, total] = await Promise.all([
prisma.lembaga.findMany({
where: { isActive: true },
where,
include: {
jenjangPendidikan: true,
siswa: true,
@@ -20,8 +35,8 @@ async function lembagaPendidikanFindMany(context: Context) {
take: limit,
orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
}),
prisma.kegiatanDesa.count({
where: { isActive: true }
prisma.lembaga.count({
where,
})
]);
@@ -30,6 +45,7 @@ async function lembagaPendidikanFindMany(context: Context) {
message: "Success fetch lembaga pendidikan with pagination",
data,
page,
limit,
totalPages: Math.ceil(total / limit),
total,
};

18
src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/pengajar/findMany.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
// /api/berita/findManyPaginated.ts
import prisma from "@/lib/prisma";
import { Context } from "elysia";
@@ -6,11 +7,23 @@ async function pengajarFindMany(context: Context) {
const page = Number(context.query.page) || 1;
const limit = Number(context.query.limit) || 10;
const skip = (page - 1) * limit;
const search = (context.query.search as string) || "";
// Buat where clause
const where: any = { isActive: true };
// Tambahkan pencarian (jika ada)
if (search) {
where.OR = [
{ nama: { contains: search, mode: "insensitive" } },
{ lembaga: { contains: search, mode: "insensitive" } },
];
}
try {
const [data, total] = await Promise.all([
prisma.pengajar.findMany({
where: { isActive: true },
where,
include: {
lembaga: true,
},
@@ -19,7 +32,7 @@ async function pengajarFindMany(context: Context) {
orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
}),
prisma.pengajar.count({
where: { isActive: true }
where,
})
]);
@@ -28,6 +41,7 @@ async function pengajarFindMany(context: Context) {
message: "Success fetch pengajar with pagination",
data,
page,
limit,
totalPages: Math.ceil(total / limit),
total,
};

18
src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/siswa/findMany.ts
View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
// /api/berita/findManyPaginated.ts
import prisma from "@/lib/prisma";
import { Context } from "elysia";
@@ -6,11 +7,23 @@ async function siswaFindMany(context: Context) {
const page = Number(context.query.page) || 1;
const limit = Number(context.query.limit) || 10;
const skip = (page - 1) * limit;
const search = (context.query.search as string) || "";
// Buat where clause
const where: any = { isActive: true };
// Tambahkan pencarian (jika ada)
if (search) {
where.OR = [
{ nama: { contains: search, mode: "insensitive" } },
{ lembaga: { contains: search, mode: "insensitive" } },
];
}
try {
const [data, total] = await Promise.all([
prisma.siswa.findMany({
where: { isActive: true },
where,
include: {
lembaga: true,
},
@@ -19,7 +32,7 @@ async function siswaFindMany(context: Context) {
orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
}),
prisma.siswa.count({
where: { isActive: true }
where,
})
]);
@@ -28,6 +41,7 @@ async function siswaFindMany(context: Context) {
message: "Success fetch siswa with pagination",
data,
page,
limit,
totalPages: Math.ceil(total / limit),
total,
};

129
src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/page.tsx
View File

@@ -1,100 +1,87 @@
'use client'
import colors from '@/con/colors';
import { Box, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { Box, List, ListItem, Paper, SimpleGrid, Stack, Text, Tooltip } from '@mantine/core';
import { IconLeaf, IconPlant2, IconRecycle } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
const data = [
{
id: 1,
title: 'Tujuan Edukasi Lingkungan',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Meningkatkan kesadaran masyarakat tentang pentingnya lingkungan bersih dan sehat
</ListItem>
<ListItem>
Mendorong partisipasi warga dalam kegiatan pengelolaan sampah, penghijauan, dan konservasi
</ListItem>
<ListItem>
Mengurangi dampak negatif terhadap lingkungan dari kegiatan manusia
</ListItem>
<ListItem>
Membentuk generasi muda yang peduli terhadap isu-isu lingkungan
</ListItem>
</List>
icon: <IconLeaf size={28} color={colors['blue-button']} />,
listDeskripsi: [
'Meningkatkan kesadaran masyarakat akan pentingnya lingkungan bersih dan sehat',
'Mendorong partisipasi warga dalam pengelolaan sampah, penghijauan, dan konservasi',
'Mengurangi dampak negatif kegiatan manusia terhadap lingkungan',
'Membentuk generasi muda peduli isu-isu lingkungan',
],
},
{
id: 2,
title: 'Materi Edukasi yang Diberikan',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Pengelolaan Sampah (Pilah sampah organik dan anorganik)
</ListItem>
<ListItem>
Pencegahan pencemaran lingkungan (air, udara, dan tanah)
</ListItem>
<ListItem>
Pemanfaatan lahan hijau dan penghijauan desa
</ListItem>
<ListItem>
Daur ulang dan kreatifitas dari sampah
</ListItem>
<ListItem>
Bahaya pembakaran sampah sembarangan
</ListItem>
</List>
icon: <IconRecycle size={28} color={colors['blue-button']} />,
listDeskripsi: [
'Pengelolaan sampah: pilah organik & anorganik',
'Pencegahan pencemaran lingkungan (air, udara, tanah)',
'Pemanfaatan lahan hijau dan penghijauan desa',
'Daur ulang dan kreativitas dari sampah',
'Bahaya pembakaran sampah sembarangan',
],
},
{
id: 3,
title: 'Contoh Kegiatan di Desa Darmasaba',
listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
<ListItem>
Pelatihan membuat kompos dari sampah rumah tangga
</ListItem>
<ListItem>
Gerakan &quot;Jumat Bersih&quot; rutin
</ListItem>
<ListItem>
Workshop membuat ecobrick
</ListItem>
<ListItem>
Lomba kebersihan antar banjar
</ListItem>
<ListItem>
Sosialisasi lingkungan di sekolah dan posyandu
</ListItem>
</List>
icon: <IconPlant2 size={28} color={colors['blue-button']} />,
listDeskripsi: [
'Pelatihan membuat kompos dari sampah rumah tangga',
'Gerakan "Jumat Bersih" rutin',
'Workshop pembuatan ecobrick',
'Lomba kebersihan antar banjar',
'Sosialisasi lingkungan di sekolah dan posyandu',
],
},
]
];
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} pb={20}>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
<Text ta={'center'} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
Edukasi Lingkungan
</Text>
<Text px={20} ta={'center'} fz={'h4'}>
Edukasi Lingkungan adalah bagian penting dalam membentuk perilaku masyarakat yang peduli dan bertanggung jawab terhadap kelestarian alam. Melalui program ini, masyarakat diajak untuk memahami pentingnya menjaga lingkungan demi kesehatan, kenyamanan, dan keberlanjutan hidup bersama.
<Text ta={'center'} fz="h4" c="black">
Program edukasi ini membimbing masyarakat untuk peduli dan bertanggung jawab terhadap alam,
meningkatkan kesehatan, kenyamanan, dan keberlanjutan hidup bersama.
</Text>
</Box>
<Box px={{ base: 'md', md: 100 }} >
<SimpleGrid
cols={{
base: 1,
md: 3,
}}>
{data.map((v, k) => {
return (
<Box key={k}>
<Paper h={{base: 0, md: 350}} p={20} bg={colors['white-trans-1']}>
<Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.title}</Text>
{v.listDeskripsi}
</Paper>
</Box>
)
})}
<Box px={{ base: 'md', md: 100 }}>
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
{data.map((item) => (
<Paper key={item.id} p={20} bg={colors['white-trans-1']} shadow="md" radius="md">
<Stack gap="md">
<Box>
<Tooltip label={item.title} position="top" withArrow>
<Stack gap={4} align="center">
{item.icon}
<Text fz="h3" fw="bold" c={colors['blue-button']} ta="center">
{item.title}
</Text>
</Stack>
</Tooltip>
</Box>
<List fz="h4" spacing="sm" withPadding>
{item.listDeskripsi.map((desc, idx) => (
<ListItem key={idx}>{desc}</ListItem>
))}
</List>
</Stack>
</Paper>
))}
</SimpleGrid>
</Box>
</Stack>

80
src/app/darmasaba/(pages)/lingkungan/gotong-royong/[kategori]/[id]/page.tsx Normal file
View File

@@ -0,0 +1,80 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
import colors from '@/con/colors';
import { Box, Center, Container, Image, Skeleton, Stack, Text } from '@mantine/core';
import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
function Page() {
const params = useParams<{ id: string }>();
const id = Array.isArray(params.id) ? params.id[0] : params.id;
const state = useProxy(gotongRoyongState.kegiatanDesa)
const [loading, setLoading] = useState(true)
useEffect(() => {
const loadData = async () => {
if (!id) return;
try {
setLoading(true);
await state.findUnique.load(id);
} catch (error) {
console.error('Error loading data:', error);
} finally {
setLoading(false);
}
}
loadData()
}, [id])
if (loading) {
return (
<Center>
<Skeleton height={500} />
</Center>
);
}
if (!state.findUnique.data) {
return (
<Center>
<Text>Data tidak ditemukan</Text>
</Center>
);
}
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
<Box px={{ base: "md", md: 100 }}><BackButton /></Box>
<Container w={{ base: "100%", md: "50%" }} >
<Box pb={20}>
<Text ta={"center"} fz={"2.4rem"} c={colors["blue-button"]} fw={"bold"}>
{state.findUnique.data?.judul}
</Text>
<Text
ta={"center"}
fw={"bold"}
fz={"1.5rem"}
>
Informasi Kegiatan Gotong Royong
</Text>
</Box>
<Image src={state.findUnique.data?.image?.link || ''} alt='' w={"100%"} />
</Container>
<Box px={{ base: "md", md: 100 }}>
<Stack gap={"xs"}>
<Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.deskripsiLengkap || '' }} />
</Stack>
</Box>
</Stack>
);
}
export default Page;

168
src/app/darmasaba/(pages)/lingkungan/gotong-royong/[kategori]/content.tsx Normal file
View File

@@ -0,0 +1,168 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
import {
Badge,
Box,
Button,
Card,
Center,
Container,
Divider,
Grid,
GridCol,
Group,
Image,
Pagination,
Paper,
SimpleGrid,
Skeleton,
Stack,
Text,
Title,
} from '@mantine/core';
import { IconArrowRight, IconCalendar } from '@tabler/icons-react';
import { useTransitionRouter } from 'next-view-transitions';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
export default function Content({ kategori }: { kategori: string }) {
const router = useTransitionRouter();
const [page, setPage] = useState(1);
const state = useProxy(gotongRoyongState.kegiatanDesa);
const featuredState = useProxy(gotongRoyongState.kegiatanDesa.findFirst);
const featured = featuredState.data;
const paginatedNews = state.findMany.data || [];
const totalPages = state.findMany.totalPages || 1;
// Load data
useEffect(() => {
gotongRoyongState.kegiatanDesa.findFirst.load(kategori);
}, [kategori]);
useEffect(() => {
state.findMany.load(page, 3, '', kategori);
}, [page, kategori]);
return (
<Box py={20}>
<Container size="xl" px={{ base: 'md', md: 'xl' }}>
{/* === Gotong Royong Utama === */}
{featuredState.loading ? (
<Center><Skeleton h={400} /></Center>
) : featured ? (
<Box mb={50}>
<Text fz="h2" fw={700} mb="md">Gotong Royong Utama</Text>
<Paper shadow="md" radius="md" withBorder>
<Grid gutter={0}>
<GridCol span={{ base: 12, md: 6 }}>
<Image
src={featured.image?.link}
alt={featured.judul || 'Berita Utama'}
height={400}
fit="cover"
radius="md"
style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
/>
</GridCol>
<GridCol span={{ base: 12, md: 6 }} p="xl">
<Stack h="100%" justify="space-between">
<div>
<Badge color="blue" variant="light" mb="md">
{featured.kategoriKegiatan?.nama || kategori}
</Badge>
<Title order={2} mb="md">{featured.judul}</Title>
<Text color="dimmed" lineClamp={3} mb="md">{featured.deskripsiLengkap}</Text>
</div>
<Group justify="apart" mt="auto">
<Group gap="xs">
<IconCalendar size={18} />
<Text size="sm">
{new Date(featured.createdAt).toLocaleDateString('id-ID', {
day: 'numeric',
month: 'long',
year: 'numeric',
})}
</Text>
</Group>
<Button
variant="light"
rightSection={<IconArrowRight size={16} />}
onClick={() => router.push(`/darmasaba/lingkungan/gotong-royong/${kategori}/${featured.id}`)}
>
Baca Selengkapnya
</Button>
</Group>
</Stack>
</GridCol>
</Grid>
</Paper>
</Box>
) : null}
{/* === Daftar Gotong Royong === */}
<Box mt={50}>
<Title order={2} mb="md">Daftar Gotong Royong</Title>
<Divider mb="xl" />
{state.findMany.loading ? (
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
{Array(3).fill(0).map((_, i) => (
<Skeleton key={i} h={300} radius="md" />
))}
</SimpleGrid>
) : paginatedNews.length === 0 ? (
<Text c="dimmed" ta="center">Belum ada gotong royong di kategori &quot;{kategori}&quot;.</Text>
) : (
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
{paginatedNews.map((item) => (
<Card
key={item.id}
shadow="sm"
p="lg"
radius="md"
withBorder
onClick={() => router.push(`/darmasaba/lingkungan/gotong-royong/${kategori}/${item.id}`)}
style={{ cursor: 'pointer' }}
>
<Card.Section>
<Image src={item.image?.link} height={200} alt={item.judul} fit="cover" />
</Card.Section>
<Badge color="blue" variant="light" mt="md">
{item.kategoriKegiatan?.nama || kategori}
</Badge>
<Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
<Text size="sm" color="dimmed" lineClamp={3} mt="xs" dangerouslySetInnerHTML={{ __html: item.deskripsiLengkap }} />
<Group justify="apart" mt="md" gap="xs">
<Text size="xs" color="dimmed">
{new Date(item.createdAt).toLocaleDateString('id-ID', {
day: 'numeric',
month: 'short',
year: 'numeric',
})}
</Text>
<Badge color="gray" variant="outline">Baca Selengkapnya</Badge>
</Group>
</Card>
))}
</SimpleGrid>
)}
{/* Pagination */}
<Center mt="xl">
<Pagination
total={totalPages}
value={page}
onChange={(newPage) => setPage(newPage)}
siblings={1}
boundaries={1}
withEdges
/>
</Center>
</Box>
</Container>
</Box>
);
}

14
src/app/darmasaba/(pages)/lingkungan/gotong-royong/[kategori]/page.tsx Normal file
View File

@@ -0,0 +1,14 @@
// src/app/darmasaba/(pages)/desa/berita/[kategori]/page.tsx
import { Suspense } from "react";
import Content from "./content";
export default async function Page({ params }: { params: Promise<{ kategori: string }> }) {
const { kategori } = await params;
return (
<Suspense fallback={<div>Loading...</div>}>
<Content kategori={kategori} />
</Suspense>
);
}

171
src/app/darmasaba/(pages)/lingkungan/gotong-royong/_lib/layoutTabs.tsx Normal file
View File

@@ -0,0 +1,171 @@
'use client'
import colors from '@/con/colors';
import { Box, Container, Grid, GridCol, 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 '../../../desa/layanan/_com/BackButto';
type HeaderSearchProps = {
placeholder?: string;
searchIcon?: React.ReactNode;
value?: string;
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
children?: React.ReactNode;
};
function LayoutTabsGotongRoyong({
children,
placeholder = "pencarian",
searchIcon = <IconSearch size={20} />
}: HeaderSearchProps) {
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
// Get active tab from URL path
const activeTab = pathname.split('/').pop() || 'semua';
// Get initial search value from URL
const initialSearch = searchParams.get('search') || '';
const [searchValue, setSearchValue] = useState(initialSearch);
const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
// Update active tab state when pathname changes
const [activeTabState, setActiveTabState] = useState(activeTab);
useEffect(() => {
setActiveTabState(activeTab);
}, [activeTab]);
// Clean up timeouts on unmount
useEffect(() => {
return () => {
if (searchTimeout !== null) {
clearTimeout(searchTimeout);
}
};
}, [searchTimeout]);
// Handle search input change with debounce
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
setSearchValue(value);
// Clear previous timeout
if (searchTimeout !== null) {
clearTimeout(searchTimeout);
}
// Set new timeout
const newTimeout = window.setTimeout(() => {
const params = new URLSearchParams(searchParams.toString());
if (value) {
params.set('search', value);
} else {
params.delete('search');
}
// Only update URL if the search value has actually changed
if (params.toString() !== searchParams.toString()) {
router.push(`/darmasaba/lingkungan/gotong-royong/${activeTab}?${params.toString()}`);
}
}, 500); // 500ms debounce delay
setSearchTimeout(newTimeout);
};
const tabs = [
{
label: "Semua",
value: "semua",
href: "/darmasaba/lingkungan/gotong-royong/semua"
},
{
label: "Kebersihan",
value: "kebersihan",
href: "/darmasaba/lingkungan/gotong-royong/kebersihan"
},
{
label: "Infrasturktur",
value: "infrasturktur",
href: "/darmasaba/lingkungan/gotong-royong/infrasturktur"
},
{
label: "Sosial",
value: "sosial",
href: "/darmasaba/lingkungan/gotong-royong/sosial"
},
{
label: "Lingkungan",
value: "lingkungan",
href: "/darmasaba/lingkungan/gotong-royong/lingkungan"
}
];
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/lingkungan/gotong-royong/${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>
<Container size="lg" px="md">
<Stack align="center" gap="0" >
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
Gotong Royong Desa Darmasaba
</Text>
<Text ta="center" px="md">
Gotong royong rutin dilakukan oleh warga desa untuk meningkatkan kualitas hidup dan kesejahteraan masyarakat Desa Darmasaba
</Text>
</Stack>
</Container>
<Tabs
color={colors['blue-button']}
variant="pills"
value={activeTabState}
onChange={handleTabChange}
>
<Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
<Grid>
<GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
<TabsList>
{tabs.map((tab, index) => (
<TabsTab
key={index}
value={tab.value}
onClick={() => router.push(tab.href)}
>
{tab.label}
</TabsTab>
))}
</TabsList>
</GridCol>
<GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
<TextInput
radius="lg"
placeholder={placeholder}
leftSection={searchIcon}
w="100%"
value={searchValue}
onChange={handleSearchChange}
/>
</GridCol>
</Grid>
</Box>
{children}
</Tabs>
</Stack>
);
}
export default LayoutTabsGotongRoyong;

12
src/app/darmasaba/(pages)/lingkungan/gotong-royong/layout.tsx Normal file
View File

@@ -0,0 +1,12 @@
// app/desa/berita/BeritaLayoutClient.tsx
'use client'
import dynamic from 'next/dynamic';
const LayoutTabsGotongRoyong = dynamic(
() => import('./_lib/layoutTabs'),
{ ssr: false }
);
export default function GotongRoyongLayoutClient({ children }: { children: React.ReactNode }) {
return <LayoutTabsGotongRoyong>{children}</LayoutTabsGotongRoyong>;
}

89
src/app/darmasaba/(pages)/lingkungan/gotong-royong/page.tsx
View File

@@ -1,89 +0,0 @@
import colors from '@/con/colors';
import { Stack, Box, Container, Grid, GridCol, Group, Paper, TextInput, Text, Image, Flex, Button } from '@mantine/core';
import { IconCalendar, IconMapPin, IconSearch, IconUsersGroup } from '@tabler/icons-react';
import React from 'react';
import BackButton from '../../desa/layanan/_com/BackButto';
import Link from 'next/link';
function Page() {
return (
<Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
{/* Header */}
<Box px={{ base: "md", md: 100 }}>
<BackButton />
</Box>
<Container size="lg" px="md">
<Stack align="center" gap={0} mb="xl">
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
Program Gotong Royong
</Text>
<Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
Desa Darmasaba
</Text>
</Stack>
</Container>
{/* Tabs Menu */}
<Box px={{ base: "md", md: "xl" }} py="md" bg={colors['BG-trans']} mb="md">
<Grid align="center" justify="space-between" mb={20}>
<GridCol span={{ base: 12, md: 8 }}>
<Group gap="md" wrap="wrap">
<Paper bg={colors['blue-button']} radius="xl" py={5} px={20}>
<Text c={colors['white-1']} size="sm">
Semua
</Text>
</Paper>
{['Kebersihan', 'Infrastruktur', 'Sosial', 'Lingkungan'].map((kategori) => (
<Paper key={kategori} bg={colors['blue-button-trans']} radius="xl" py={5} px={20}>
<Text size="sm">
{kategori}
</Text>
</Paper>
))}
</Group>
</GridCol>
<GridCol span={{ base: 12, md: 4 }}>
<TextInput
radius="lg"
placeholder="Cari Program Gotong Royong"
leftSection={<IconSearch size={18} />}
w="100%"
/>
</GridCol>
</Grid>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Stack gap={'xs'}>
<Image radius={20} src={'/api/img/gotong-royong.png'} w={'100%'} alt='' />
<Text fw={"bold"} fz={{ base: "h2", md: "h1" }}>Membangun Fasilitas Desa</Text>
<Group>
<Paper py={5} px={20} bg={colors['blue-button-trans']} radius={20}>
<Text c={colors['white-1']}>Sosial</Text>
</Paper>
</Group>
<Text fz={{ base: "h4", md: "h3" }}>
Program Pembangunan Fasilitas Desa Maju, Masyarakat Sejahtera.
</Text>
<Flex gap={5} align={'center'}>
<IconCalendar color={colors['blue-button-trans']} size={45} />
<Text fz={{ base: "h4", md: "h3" }}>1 April 2025</Text>
</Flex>
<Flex gap={5} align={'center'}>
<IconMapPin color={colors['blue-button-trans']} size={45} />
<Text fz={{ base: "h4", md: "h3" }}>Banjar Desa Darmasaba</Text>
</Flex>
<Flex gap={5} align={'center'}>
<IconUsersGroup color={colors['blue-button-trans']} size={45} />
<Text fz={{ base: "h4", md: "h3" }}>30 Partisipan</Text>
</Flex>
<Text fw={'bold'} fz={'md'}>Deskripsi : Program pembangunan Pura sebagai pusat spiritual dan budaya desa, melibatkan gotong royong masyarakat dalam pembangunan struktur utama serta ornamen tradisional.</Text>
<Group py={20} justify='center'>
<Button component={Link} href={'https://www.whatsapp.com/?lang=id'} bg={colors['blue-button']} >Daftar Sebagai Relawan</Button>
</Group>
</Stack>
</Paper>
</Box>
</Stack>
);
}
export default Page;

183
src/app/darmasaba/(pages)/lingkungan/gotong-royong/semua/page.tsx Normal file
View File

@@ -0,0 +1,183 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
import { Badge, Box, Button, Card, Center, Container, Divider, Flex, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
import { IconArrowRight, IconCalendar } from '@tabler/icons-react';
import { useTransitionRouter } from 'next-view-transitions';
import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
function Page() {
const searchParams = useSearchParams();
const router = useTransitionRouter();
// Parameter URL
const search = searchParams.get('search') || '';
const currentPage = parseInt(searchParams.get('page') || '1');
const [page, setPage] = useState(currentPage);
// Gunakan proxy untuk state
const state = useProxy(gotongRoyongState.kegiatanDesa);
const featured = useProxy(gotongRoyongState.kegiatanDesa.findFirst); // ✅ Berita utama
const loadingGrid = state.findMany.loading;
const loadingFeatured = featured.loading;
// Load berita utama (hanya sekali)
useEffect(() => {
if (!featured.data && !loadingFeatured) {
gotongRoyongState.kegiatanDesa.findFirst.load();
}
}, [featured.data, loadingFeatured]);
// Load berita terbaru (untuk grid) saat page/search berubah
useEffect(() => {
const limit = 3; // Sesuaikan dengan tampilan grid
state.findMany.load(page, limit, search);
}, [page, search]);
// Update URL saat page berubah
useEffect(() => {
const url = new URLSearchParams();
if (search) url.set('search', search);
if (page > 1) url.set('page', page.toString());
router.replace(`?${url.toString()}`);
}, [page, search]);
const featuredData = featured.data;
const paginatedNews = state.findMany.data || [];
const totalPages = state.findMany.totalPages || 1;
return (
<Box py={20}>
<Container size="xl" px={{ base: "md", md: "xl" }}>
{/* === Gotong royong Utama (Tetap) === */}
{loadingFeatured ? (
<Center><Skeleton h={400} /></Center>
) : featuredData ? (
<Box mb={50}>
<Text fz="h2" fw={700} mb="md">Gotong royong Utama</Text>
<Paper shadow="md" radius="md" withBorder>
<Grid gutter={0}>
<GridCol span={{ base: 12, md: 6 }}>
<Image
src={featuredData.image?.link || '/images/placeholder.jpg'}
alt={featuredData.judul || 'Gotong royong Utama'}
height={400}
fit="cover"
radius="md"
style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
/>
</GridCol>
<GridCol span={{ base: 12, md: 6 }} p="xl">
<Stack h="100%" justify="space-between">
<div>
<Badge color="blue" variant="light" mb="md">
{featuredData.kategoriKegiatan?.nama || 'Gotong royong'}
</Badge>
<Title order={2} mb="md">{featuredData.judul}</Title>
<Text c="dimmed" lineClamp={3} mb="md">
{featuredData.deskripsiSingkat}
</Text>
</div>
<Group justify="apart" mt="auto">
<Group gap="xs">
<IconCalendar size={18} />
<Text size="sm">
{new Date(featuredData.createdAt).toLocaleDateString('id-ID', {
day: 'numeric',
month: 'long',
year: 'numeric'
})}
</Text>
</Group>
<Button
variant="light"
rightSection={<IconArrowRight size={16} />}
onClick={() => router.push(`/darmasaba/lingkungan/gotong-royong/${featuredData.kategoriKegiatan?.nama}/${featuredData.id}`)}
>
Baca Selengkapnya
</Button>
</Group>
</Stack>
</GridCol>
</Grid>
</Paper>
</Box>
) : null}
{/* === Gotong royong Terbaru (Berubah Saat Pagination) === */}
<Box mt={50}>
<Title order={2} mb="md">Gotong royong Terbaru</Title>
<Divider mb="xl" />
{loadingGrid ? (
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
{Array(3).fill(0).map((_, i) => (
<Skeleton key={i} h={300} radius="md" />
))}
</SimpleGrid>
) : paginatedNews.length === 0 ? (
<Text c="dimmed" ta="center">Tidak ada gotong royong ditemukan.</Text>
) : (
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
{paginatedNews.map((item) => (
<Card
key={item.id}
shadow="sm"
p="lg"
radius="md"
withBorder
>
<Card.Section>
<Image
src={item.image?.link || '/images/placeholder-small.jpg'}
height={200}
alt={item.judul}
fit="cover"
/>
</Card.Section>
<Badge color="blue" variant="light" mt="md">
{item.kategoriKegiatan?.nama || 'Gotong royong'}
</Badge>
<Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
<Text size="sm" c="dimmed" lineClamp={3} mt="xs">{item.deskripsiSingkat}</Text>
<Flex align="center" justify="apart" mt="md" gap="xs">
<Text size="xs" c="dimmed">
{new Date(item.createdAt).toLocaleDateString('id-ID', {
day: 'numeric',
month: 'short',
year: 'numeric'
})}
</Text>
<Button p="xs" variant="light" rightSection={<IconArrowRight size={16} />} onClick={() => router.push(`/darmasaba/lingkungan/gotong-royong/${item.kategoriKegiatan?.nama}/${item.id}`)}>Baca Selengkapnya</Button>
</Flex>
</Card>
))}
</SimpleGrid>
)}
{/* Pagination hanya untuk berita terbaru */}
<Center mt="xl">
<Pagination
total={totalPages}
value={page}
onChange={setPage}
siblings={1}
boundaries={1}
withEdges
/>
</Center>
</Box>
</Container>
</Box>
);
}
export default Page;

2
src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx
View File

@@ -51,7 +51,7 @@ function Page() {
<Text ta="center" fz={{ base: '2xl', md: '3rem' }} c={colors['blue-button']} fw="bold">
Konservasi Adat Bali
</Text>
<Text px={20} ta="center" fz="lg" c="dimmed">
<Text px={20} ta="center" fz="lg" c="black">
Pelestarian lingkungan di Bali yang berpijak pada kearifan lokal, menjaga harmoni antara alam, budaya, dan manusia.
</Text>
</Box>

420
src/app/darmasaba/(pages)/pendidikan/info-sekolah-paud/page.tsx
View File

@@ -1,105 +1,363 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { IconChalkboard, IconMicroscope, IconSchool, IconSearch } from '@tabler/icons-react';
import BackButton from '../../desa/layanan/_com/BackButto';
import React, { useMemo, useState } from 'react';
import {
ActionIcon,
Badge,
Box,
Button,
Center,
Container,
Group,
Paper,
Progress,
SimpleGrid,
Stack,
Text,
TextInput,
Tooltip,
VisuallyHidden,
} from '@mantine/core';
import {
IconChalkboard,
IconInfoCircle,
IconMicroscope,
IconSchool,
IconSearch,
IconArrowLeft,
} from '@tabler/icons-react';
import { motion } from 'framer-motion';
import type { IconProps } from '@tabler/icons-react';
type Stat = {
id: number;
icon: React.ComponentType<IconProps>;
jumlah: number;
nama: string;
helper?: string;
};
const dataSekolah = [
const dataSekolah: Stat[] = [
{
id: 1,
icon: <IconChalkboard size={55} color={colors["blue-button"]} />,
icon: IconChalkboard,
jumlah: 15,
nama: 'Lembaga Pendidikan'
nama: 'Lembaga Pendidikan',
helper: 'Jumlah institusi pendidikan resmi di wilayah ini',
},
{
id: 2,
icon: <IconSchool size={55} color={colors["blue-button"]} />,
icon: IconSchool,
jumlah: 3209,
nama: 'Siswa Terdaftar'
nama: 'Siswa Terdaftar',
helper: 'Total siswa aktif di semua jenjang',
},
{
id: 3,
icon: <IconMicroscope size={55} color={colors["blue-button"]} />,
icon: IconMicroscope,
jumlah: 285,
nama: 'Tenaga Pengajar'
nama: 'Tenaga Pengajar',
helper: 'Jumlah guru dan staf pengajar aktif',
},
]
];
export default function SekolahPage() {
const [query, setQuery] = useState('');
const [kategoriAktif, setKategoriAktif] = useState('Semua');
const kategoriList = ['Semua', 'TK/PAUD', 'SD', 'SMP', 'SMA/SMK'];
const maxJumlah = useMemo(() => Math.max(...dataSekolah.map((d) => d.jumlah)), []);
const filtered = useMemo(() => {
const q = query.trim().toLowerCase();
return dataSekolah.filter((d) => {
const teks = `${d.nama} ${d.jumlah}`.toLowerCase();
const matchQuery = q ? teks.includes(q) : true;
return matchQuery;
});
}, [query, kategoriAktif]);
const hasilCount = filtered.length;
function Page() {
return (
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
<Box px={{ base: 'md', md: 100 }}>
<BackButton />
</Box>
<Box px={{ base: 'md', md: 100 }} pb={20}>
<Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
Cari Informasi Sekolah
</Text>
<Group justify='center' pb={20}>
<TextInput
w={{ base: "50%", md: "70%" }}
placeholder='Cari Sekolah...'
rightSection={
<Button
size="xs"
style={{ height: '80%', marginRight: '5px' }}
bg={colors["blue-button"]}
>
Cari
</Button>
}
rightSectionWidth={70}
leftSection={<IconSearch size={20} />}
/>
</Group>
<Group mb={20} gap="md" justify='center' wrap="wrap">
<Paper bg={colors['blue-button']} radius="xl" py={5} px={20}>
<Text c={colors['white-1']} size="sm">
Semua
</Text>
</Paper>
{['TK/PAUD', 'SD', 'SMP', 'SMA/SMK'].map((kategori) => (
<Paper key={kategori} bg={'gray'} radius="xl" py={5} px={20}>
<Text c={colors['white-1']} size="sm">
{kategori}
</Text>
</Paper>
))}
</Group>
<SimpleGrid
cols={{
base: 1,
md: 3
}}
>
{dataSekolah.map((v, k) => {
return (
<Box key={k}>
<Box style={{ minHeight: '100vh', background: '#f8fafc', paddingBottom: 48 }}>
<Container size="xl" py={{ base: 'md', md: 'xl' }}>
<Stack gap="lg">
<Box>
<ActionIcon
aria-label="Kembali"
onClick={() => window.history.back()}
size="lg"
radius="md"
variant="light"
style={{
color: '#1e293b',
background: 'white',
boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
}}
>
<IconArrowLeft size={20} stroke={2} />
<VisuallyHidden>Tombol kembali</VisuallyHidden>
</ActionIcon>
</Box>
<Paper
radius="lg"
p={{ base: 'md', md: 'xl' }}
style={{
background: 'linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%)',
border: '1px solid #e2e8f0',
boxShadow: '0 6px 24px rgba(0,0,0,0.06)',
}}
role="search"
aria-label="Pencarian sekolah"
>
<Stack gap="md">
<Center>
<motion.div
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.8 }}
style={{ width: '100%', height: '100%' }}
initial={{ opacity: 0, y: -8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.45, ease: 'easeOut' }}
>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Stack>
<Center>
{v.icon}
</Center>
<Text c={colors["blue-button"]} ta={'center'} fw={'bold'} fz={{ base: "h2", md: "h1" }}>{v.jumlah}</Text>
<Text c={colors["blue-button"]} ta={'center'} fw={'bold'}>{v.nama}</Text>
</Stack>
</Paper>
<Text
ta="center"
c="#0f172a"
fz={{ base: 22, md: 30 }}
fw={800}
style={{ letterSpacing: -0.3 }}
>
Cari Informasi Sekolah
</Text>
<Text ta="center" c="dimmed" fz="sm" mt={6}>
Masukkan nama, jenjang, atau alamat sekolah untuk hasil lebih spesifik.
</Text>
</motion.div>
</Box>
)
})}
</SimpleGrid>
</Box>
</Stack>
</Center>
<Group align="center" justify="center" gap="sm" style={{ width: '100%' }}>
<TextInput
value={query}
onChange={(e) => setQuery(e.currentTarget.value)}
placeholder="Contoh: SMP Negeri, SD 01, Kelurahan..."
leftSection={<IconSearch size={18} aria-hidden />}
aria-label="Masukkan kata kunci pencarian"
radius="xl"
size="md"
rightSection={
<Button
radius="xl"
size="sm"
aria-label="Telusuri"
onClick={() => {}}
style={{
height: 38,
minWidth: 110,
background: 'linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%)',
color: 'white',
boxShadow: '0 4px 16px rgba(59,130,246,0.3)',
}}
>
Telusuri
</Button>
}
rightSectionWidth={120}
style={{
width: '100%',
maxWidth: 920,
}}
/>
</Group>
<Group justify="center" gap="xs" wrap="wrap" style={{ marginTop: 4 }}>
{kategoriList.map((k) => {
const aktif = k === kategoriAktif;
return (
<motion.div
key={k}
initial={{ scale: 0.98, opacity: 0.9 }}
animate={{ scale: 1, opacity: 1 }}
whileHover={{ scale: 1.02 }}
>
<Button
onClick={() => setKategoriAktif(k)}
radius="xl"
size="sm"
variant={aktif ? 'filled' : 'light'}
style={{
background: aktif
? 'linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)'
: 'white',
color: aktif ? 'white' : '#2563eb',
boxShadow: aktif ? '0 4px 16px rgba(59,130,246,0.25)' : 'none',
border: '1px solid #e2e8f0',
}}
>
{k}
</Button>
</motion.div>
);
})}
</Group>
</Stack>
</Paper>
<Box aria-live="polite" aria-atomic>
<Text fz="sm" c="dimmed">
Menampilkan <Text component="span" c="#0f172a" fw={700}>{hasilCount}</Text> hasil.
</Text>
</Box>
<SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
{filtered.length === 0 ? (
<Paper
p="xl"
radius="md"
style={{
background: '#f9fafb',
border: '1px dashed #e2e8f0',
minHeight: 220,
}}
role="status"
aria-label="Tidak ada hasil"
>
<Center style={{ minHeight: 180, flexDirection: 'column' }}>
<Text fz="lg" fw={800} c="#2563eb">
Tidak ditemukan
</Text>
<Text c="dimmed" mt="6px">
Coba gunakan kata kunci lain atau setel ulang filter.
</Text>
<Button
mt="md"
radius="xl"
onClick={() => {
setQuery('');
setKategoriAktif('Semua');
}}
style={{
background: 'linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%)',
color: 'white',
boxShadow: '0 6px 18px rgba(59,130,246,0.25)',
}}
aria-label="Tampilkan semua"
>
Tampilkan Semua
</Button>
</Center>
</Paper>
) : (
filtered.map((v) => {
const percent = Math.round((v.jumlah / maxJumlah) * 100) || 0;
return (
<motion.div
key={v.id}
whileHover={{ scale: 1.025 }}
whileTap={{ scale: 0.995 }}
style={{ width: '100%' }}
>
<Paper
p="lg"
radius="lg"
style={{
background: 'white',
border: '1px solid #e2e8f0',
boxShadow: '0 8px 28px rgba(0,0,0,0.06)',
minHeight: 260,
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
}}
role="article"
aria-label={`${v.nama} kartu statistik`}
>
<Stack gap="sm">
<Center>
<Box
style={{
width: 80,
height: 80,
borderRadius: 16,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#eff6ff',
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.6)',
}}
aria-hidden
>
{React.createElement(v.icon, {
color: '#2563eb',
size: 34,
stroke: 1.6,
})}
</Box>
</Center>
<Group justify="apart" align="center" gap="xs">
<Stack gap={0}>
<Text fz={{ base: 18, md: 22 }} fw={800} c="#0f172a">
{v.jumlah.toLocaleString()}
</Text>
<Group gap={6} align="center">
<Text fz="sm" fw={700} c="#2563eb">
{v.nama}
</Text>
<Tooltip label={v.helper ?? ''} position="right" withArrow>
<ActionIcon aria-label={`Info ${v.nama}`} variant="transparent" size="xs">
<IconInfoCircle size={16} style={{ color: '#2563eb' }} />
</ActionIcon>
</Tooltip>
</Group>
</Stack>
<Badge
radius="md"
variant="light"
style={{
background: '#eff6ff',
color: '#2563eb',
border: '1px solid #e2e8f0',
}}
>
Statistik
</Badge>
</Group>
<Box>
<Progress
value={percent}
size="sm"
radius="xl"
aria-label={`${v.nama} progres ${percent} persen`}
/>
<Text fz="xs" c="dimmed" mt="6px">
Perbandingan dengan jumlah terbesar.
</Text>
</Box>
</Stack>
<Group justify="right" mt="8px">
<Button
radius="xl"
variant="outline"
onClick={() => {}}
aria-label={`Lihat detail ${v.nama}`}
style={{
borderColor: '#e2e8f0',
color: '#2563eb',
paddingLeft: 20,
paddingRight: 20,
}}
>
Lihat Detail
</Button>
</Group>
</Paper>
</motion.div>
);
})
)}
</SimpleGrid>
</Stack>
</Container>
</Box>
);
}
export default Page;

2
src/con/navbar-list-menu.ts
View File

@@ -286,7 +286,7 @@ const navbarListMenu = [
{
id: "7.4",
name: "Gotong Royong",
href: "/darmasaba/lingkungan/gotong-royong"
href: "/darmasaba/lingkungan/gotong-royong/semua"
},
{
id: "7.5",