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

API & UI Menu Lingkungan, Submenu Gotong Royong

Browse Source
This commit is contained in:
nico
2025-07-22 11:24:19 +08:00
parent 9dfcda7687
commit 80a7df663e
34 changed files with 2401 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
prisma/migrations/20250721095104_nico_21_jul_25/migration.sql Normal file
View File

@@ -0,0 +1,144 @@
-- CreateTable
CREATE TABLE "ProgramPenghijauan" (
"id" TEXT NOT NULL,
"name" TEXT NOT NULL,
"judul" TEXT NOT NULL,
"deskripsi" TEXT NOT NULL,
"icon" TEXT NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "ProgramPenghijauan_pkey" PRIMARY KEY ("id")
);
-- CreateTable
CREATE TABLE "DataLingkunganDesa" (
"id" TEXT NOT NULL,
"name" TEXT NOT NULL,
"jumlah" TEXT NOT NULL,
"deskripsi" TEXT NOT NULL,
"icon" TEXT NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "DataLingkunganDesa_pkey" PRIMARY KEY ("id")
);
-- CreateTable
CREATE TABLE "KegiatanDesa" (
"id" TEXT NOT NULL,
"judul" TEXT NOT NULL,
"deskripsiSingkat" TEXT NOT NULL,
"deskripsiLengkap" TEXT NOT NULL,
"tanggal" TIMESTAMP(3) NOT NULL,
"lokasi" TEXT NOT NULL,
"partisipan" INTEGER NOT NULL,
"imageId" TEXT NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"isActive" BOOLEAN NOT NULL DEFAULT true,
"kategoriKegiatanId" TEXT NOT NULL,
CONSTRAINT "KegiatanDesa_pkey" PRIMARY KEY ("id")
);
-- CreateTable
CREATE TABLE "KategoriKegiatan" (
"id" TEXT NOT NULL,
"nama" TEXT NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "KategoriKegiatan_pkey" PRIMARY KEY ("id")
);
-- CreateTable
CREATE TABLE "TujuanEdukasiLingkungan" (
"id" TEXT NOT NULL,
"judul" TEXT NOT NULL,
"deskripsi" TEXT NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "TujuanEdukasiLingkungan_pkey" PRIMARY KEY ("id")
);
-- CreateTable
CREATE TABLE "MateriEdukasiLingkungan" (
"id" TEXT NOT NULL,
"judul" TEXT NOT NULL,
"deskripsi" TEXT NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "MateriEdukasiLingkungan_pkey" PRIMARY KEY ("id")
);
-- CreateTable
CREATE TABLE "ContohEdukasiLingkungan" (
"id" TEXT NOT NULL,
"judul" TEXT NOT NULL,
"deskripsi" TEXT NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "ContohEdukasiLingkungan_pkey" PRIMARY KEY ("id")
);
-- CreateTable
CREATE TABLE "FilosofiTriHita" (
"id" TEXT NOT NULL,
"judul" TEXT NOT NULL,
"deskripsi" TEXT NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "FilosofiTriHita_pkey" PRIMARY KEY ("id")
);
-- CreateTable
CREATE TABLE "BentukKonservasiBerdasarkanAdat" (
"id" TEXT NOT NULL,
"judul" TEXT NOT NULL,
"deskripsi" TEXT NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "BentukKonservasiBerdasarkanAdat_pkey" PRIMARY KEY ("id")
);
-- CreateTable
CREATE TABLE "NilaiKonservasiAdat" (
"id" TEXT NOT NULL,
"judul" TEXT NOT NULL,
"deskripsi" TEXT NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
"deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"isActive" BOOLEAN NOT NULL DEFAULT true,
CONSTRAINT "NilaiKonservasiAdat_pkey" PRIMARY KEY ("id")
);
-- AddForeignKey
ALTER TABLE "KegiatanDesa" ADD CONSTRAINT "KegiatanDesa_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE "KegiatanDesa" ADD CONSTRAINT "KegiatanDesa_kategoriKegiatanId_fkey" FOREIGN KEY ("kategoriKegiatanId") REFERENCES "KategoriKegiatan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

31
prisma/schema.prisma
View File

@@ -86,6 +86,8 @@ model FileStorage {
KolaborasiInovasi KolaborasiInovasi[] KolaborasiInovasi KolaborasiInovasi[]
InfoTekno InfoTekno[] InfoTekno InfoTekno[]
PengaduanMasyarakat PengaduanMasyarakat[] PengaduanMasyarakat PengaduanMasyarakat[]
KegiatanDesa KegiatanDesa[]
} }
//========================================= MENU PPID ========================================= // //========================================= MENU PPID ========================================= //
@@ -1499,6 +1501,35 @@ model DataLingkunganDesa {
isActive Boolean @default(true) isActive Boolean @default(true)
} }
// ========================================= GOTONG ROYONG ========================================= //
model KegiatanDesa {
id String @id @default(uuid())
judul String
deskripsiSingkat String
deskripsiLengkap String
tanggal DateTime
lokasi String
partisipan Int
image FileStorage @relation(fields: [imageId], references: [id])
imageId String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
kategoriKegiatan KategoriKegiatan @relation(fields: [kategoriKegiatanId], references: [id])
kategoriKegiatanId String
}
model KategoriKegiatan {
id String @id @default(cuid())
nama String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
KegiatanDesa KegiatanDesa[]
}
// ========================================= EDUKASI LINGKUNGAN ========================================= // // ========================================= EDUKASI LINGKUNGAN ========================================= //
model TujuanEdukasiLingkungan { model TujuanEdukasiLingkungan {
id String @id @default(cuid()) id String @id @default(cuid())

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

@@ -0,0 +1,476 @@
import ApiFetch from "@/lib/api-fetch";
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
const templateKegiatanDesaForm = z.object({
judul: z.string().min(1, "Judul minimal 1 karakter"),
deskripsiSingkat: z.string().min(1, "Deskripsi singkat minimal 1 karakter"),
deskripsiLengkap: z.string().min(1, "Deskripsi lengkap minimal 1 karakter"),
tanggal: z.date(),
lokasi: z.string().min(1, "Lokasi minimal 1 karakter"),
partisipan: z.number().min(1, "Partisipan minimal 1"),
imageId: z.string().min(1, "Gambar wajib dipilih"),
kategoriKegiatanId: z.string().min(1, "Kategori kegiatan minimal 1"),
});
const defaultKegiatanDesaForm = {
judul: "",
deskripsiSingkat: "",
deskripsiLengkap: "",
tanggal: new Date(),
lokasi: "",
partisipan: 0,
imageId: "",
kategoriKegiatanId: "",
};
const kegiatanDesa = proxy({
create: {
form: { ...defaultKegiatanDesaForm },
loading: false,
async create() {
const cek = templateKegiatanDesaForm.safeParse(kegiatanDesa.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
kegiatanDesa.create.loading = true;
const res = await ApiFetch.api.lingkungan.kegiatandesa["create"].post({
...kegiatanDesa.create.form,
tanggal: kegiatanDesa.create.form.tanggal.toISOString(), // ✅ convert Date -> string
});
if (res.status === 200) {
kegiatanDesa.findMany.load();
return toast.success("Data berhasil ditambahkan");
}
return toast.error("Gagal menambahkan data");
} catch (error) {
console.log(error);
toast.error("Gagal menambahkan data");
} finally {
kegiatanDesa.create.loading = false;
}
},
},
findMany: {
data: null as Array<
Prisma.KegiatanDesaGetPayload<{
include: {
image: true;
kategoriKegiatan: true;
};
}>
> | null,
async load() {
const res = await ApiFetch.api.lingkungan.kegiatandesa["find-many"].get();
if (res.status === 200) {
kegiatanDesa.findMany.data = res.data?.data ?? [];
}
},
},
findUnique: {
data: null as Prisma.KegiatanDesaGetPayload<{
include: {
image: true;
kategoriKegiatan: true;
};
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/lingkungan/kegiatandesa/${id}`);
if (res.ok) {
const data = await res.json();
kegiatanDesa.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
kegiatanDesa.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
kegiatanDesa.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
kegiatanDesa.delete.loading = true;
const response = await fetch(`/api/lingkungan/kegiatandesa/del/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
const result = await response.json();
if (response.ok && result?.success) {
toast.success(result.message || "kegiatan desa berhasil dihapus");
await kegiatanDesa.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus pasar desa");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus pasar desa");
} finally {
kegiatanDesa.delete.loading = false;
}
},
},
edit: {
id: "",
form: { ...defaultKegiatanDesaForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
kegiatanDesa.edit.loading = true;
const response = await fetch(`/api/lingkungan/kegiatandesa/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
judul: data.judul,
deskripsiSingkat: data.deskripsiSingkat,
deskripsiLengkap: data.deskripsiLengkap,
tanggal: data.tanggal,
lokasi: data.lokasi,
partisipan: data.partisipan,
imageId: data.imageId,
kategoriKegiatanId: data.kategoriKegiatanId,
};
return data;
} else {
throw new Error(result?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading kegiatan desa:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
} finally {
kegiatanDesa.edit.loading = false;
}
},
async update() {
const cek = templateKegiatanDesaForm.safeParse(kegiatanDesa.edit.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
kegiatanDesa.edit.loading = true;
const response = await fetch(`/api/lingkungan/kegiatandesa/${this.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
judul: this.form.judul,
deskripsiSingkat: this.form.deskripsiSingkat,
deskripsiLengkap: this.form.deskripsiLengkap,
tanggal: typeof this.form.tanggal === "string"
? this.form.tanggal
: this.form.tanggal.toISOString(),
lokasi: this.form.lokasi,
partisipan: this.form.partisipan,
imageId: this.form.imageId,
kategoriKegiatanId: this.form.kategoriKegiatanId,
}),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.message || `HTTP error! status: ${response.status}`
);
}
const result = await response.json();
if (result.success) {
toast.success("Berhasil update kegiatan desa");
await kegiatanDesa.findMany.load(); // refresh list
return true;
} else {
throw new Error(result.message || "Gagal mengupdate kegiatan desa");
}
} catch (error) {
console.error("Error updating kegiatan desa:", error);
toast.error(
error instanceof Error ? error.message : "Gagal mengupdate kegiatan desa"
);
return false;
} finally {
kegiatanDesa.edit.loading = false;
}
},
reset() {
kegiatanDesa.edit.id = "";
kegiatanDesa.edit.form = { ...defaultKegiatanDesaForm };
},
},
});
// ========================================= KATEGORI kegiatan ========================================= //
const kategoriKegiatanForm = z.object({
nama: z.string().min(1, "Nama minimal 1 karakter"),
});
const kategoriKegiatanDefaultForm = {
nama: "",
};
const kategoriKegiatan = proxy({
create: {
form: { ...kategoriKegiatanDefaultForm },
loading: false,
async create() {
const cek = kategoriKegiatanForm.safeParse(kategoriKegiatan.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
kategoriKegiatan.create.loading = true;
const res = await ApiFetch.api.lingkungan.kegiatandesa.kategorikegiatan["create"].post(
kategoriKegiatan.create.form
);
if (res.status === 200) {
kategoriKegiatan.findMany.load();
return toast.success("Data berhasil ditambahkan");
}
return toast.error("Gagal menambahkan data");
} catch (error) {
console.log(error);
toast.error("Gagal menambahkan data");
} finally {
kategoriKegiatan.create.loading = false;
}
},
},
findMany: {
data: null as Array<{
id: string;
nama: string;
}> | null,
async load() {
const res = await ApiFetch.api.lingkungan.kegiatandesa.kategorikegiatan["find-many"].get();
if (res.status === 200) {
kategoriKegiatan.findMany.data = res.data?.data ?? [];
}
},
},
findUnique: {
data: null as Prisma.KategoriKegiatanGetPayload<{
omit: { isActive: true };
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/lingkungan/kegiatanDesa/kategorikegiatan/${id}`);
if (res.ok) {
const data = await res.json();
kategoriKegiatan.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
kategoriKegiatan.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
kategoriKegiatan.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
kategoriKegiatan.delete.loading = true;
const response = await fetch(`/api/lingkungan/kegiatandesa/kategorikegiatan/del/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
const result = await response.json();
if (response.ok && result?.success) {
toast.success(result.message || "Kategori kegiatan berhasil dihapus");
await kategoriKegiatan.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus kategori kegiatan");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus kategori kegiatan");
} finally {
kategoriKegiatan.delete.loading = false;
}
},
},
edit: {
id: "",
form: { ...kategoriKegiatanDefaultForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
const response = await fetch(`/api/lingkungan/kegiatandesa/kategorikegiatan/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
nama: data.nama,
};
return data;
} else {
throw new Error(result?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading kategori kegiatan:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
}
},
async update() {
const cek = kategoriKegiatanForm.safeParse(kategoriKegiatan.edit.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
toast.error(err);
return false;
}
try {
kategoriKegiatan.edit.loading = true;
const response = await fetch(
`/api/lingkungan/kegiatandesa/kategorikegiatan/${kategoriKegiatan.edit.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: kategoriKegiatan.edit.form.nama,
}),
}
);
// Clone the response to avoid 'body already read' error
const responseClone = response.clone();
try {
const result = await response.json();
if (!response.ok) {
console.error(
"Update failed with status:",
response.status,
"Response:",
result
);
throw new Error(
result?.message ||
`Gagal mengupdate kategori kegiatan (${response.status})`
);
}
if (result.success) {
toast.success(
result.message || "Berhasil memperbarui kategori kegiatan"
);
await kategoriKegiatan.findMany.load(); // refresh list
return true;
} else {
throw new Error(
result.message || "Gagal mengupdate kategori kegiatan"
);
}
} catch (error) {
// If JSON parsing fails, try to get the response text for better error messages
try {
const text = await responseClone.text();
console.error("Error response text:", text);
throw new Error(`Gagal memproses respons dari server: ${text}`);
} catch (textError) {
console.error("Error parsing response as text:", textError);
console.error("Original error:", error);
throw new Error("Gagal memproses respons dari server");
}
}
} catch (error) {
console.error("Error updating kategori kegiatan:", error);
toast.error(
error instanceof Error
? error.message
: "Gagal mengupdate kategori kegiatan"
);
return false;
} finally {
kategoriKegiatan.edit.loading = false;
}
},
reset() {
kategoriKegiatan.edit.id = "";
kategoriKegiatan.edit.form = { ...kategoriKegiatanDefaultForm };
},
},
});
const gotongRoyongState = proxy({
kegiatanDesa,
kategoriKegiatan,
});
export default gotongRoyongState;

62
src/app/admin/(dashboard)/lingkungan/gotong-royong/_lib/layoutTabs.tsx Normal file
View File

@@ -0,0 +1,62 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
function LayoutTabs({ children }: { children: React.ReactNode }) {
const router = useRouter()
const pathname = usePathname()
const tabs = [
{
label: "Kegiatan Desa",
value: "kegiatanDesa",
href: "/admin/lingkungan/gotong-royong/kegiatan-desa"
},
{
label: "Kategori Kegiatan",
value: "kategoriKegiatan",
href: "/admin/lingkungan/gotong-royong/kategori-kegiatan"
},
];
const curentTab = tabs.find(tab => tab.href === pathname)
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
const handleTabChange = (value: string | null) => {
const tab = tabs.find(t => t.value === value)
if (tab) {
router.push(tab.href)
}
setActiveTab(value)
}
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname)
if (match) {
setActiveTab(match.value)
}
}, [pathname])
return (
<Stack>
<Title order={3}>Gotong Royong</Title>
<Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
<TabsList p={"xs"} bg={"#BBC8E7FF"}>
{tabs.map((e, i) => (
<TabsTab key={i} value={e.value}>{e.label}</TabsTab>
))}
</TabsList>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value}>
{/* Konten dummy, bisa diganti tergantung routing */}
<></>
</TabsPanel>
))}
</Tabs>
{children}
</Stack>
);
}
export default LayoutTabs;

68
src/app/admin/(dashboard)/lingkungan/gotong-royong/create/page.tsx
View File

@@ -1,68 +0,0 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import React from 'react';
import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
function CreateGotongRoyong() {
const router = useRouter()
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
<Stack gap="xs">
<Title order={3}>Create Gotong Royong</Title>
<TextInput
label={<Text fz="sm" fw="bold">Judul Gotong Royong</Text>}
placeholder="masukkan judul gotong royong"
/>
<TextInput
label={<Text fz="sm" fw="bold">Kategori Gotong Royong</Text>}
placeholder="masukkan kategori gotong royong"
/>
<Box>
<Text fw={"bold"} fz={"sm"}>Deskripsi Gotong Royong</Text>
<KeamananEditor
showSubmit={false}
/>
</Box>
{/* <FileInput
label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
value={file}
onChange={async (e) => {
if (!e) return;
setFile(e);
const base64 = await e.arrayBuffer().then((buf) =>
'data:image/png;base64,' + Buffer.from(buf).toString('base64')
);
setPreviewImage(base64);
}}
/> */}
{/* {previewImage ? (
<Image alt="" src={previewImage} w={200} h={200} />
) : (
<Center w={200} h={200} bg="gray">
<IconImageInPicture />
</Center>
)} */}
<Box>
<Text fz="sm" fw="bold">Gambar</Text>
<IconImageInPicture size={25} />
</Box>
<Button bg={colors['blue-button']} >
Simpan
</Button>
</Stack>
</Paper>
</Box>
);
}
export default CreateGotongRoyong;

66
src/app/admin/(dashboard)/lingkungan/gotong-royong/detail/page.tsx
View File

@@ -1,66 +0,0 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import React from 'react';
// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
function DetailGotongRoyong() {
const router = useRouter();
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
<Stack>
<Text fz={"xl"} fw={"bold"}>Detail Gotong Royong</Text>
<Paper bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fz={"lg"} fw={"bold"}>Judul Gotong Royong</Text>
<Text fz={"lg"}>Test Judul</Text>
</Box>
<Box>
<Text fz={"lg"} fw={"bold"}>Kategori Gotong Royong</Text>
<Text fz={"lg"}>Test Kategori</Text>
</Box>
<Box>
<Text fz={"lg"} fw={"bold"}>Deskripsi Gotong Royong</Text>
<Text fz={"lg"} >Test Deskripsi</Text>
</Box>
<Box>
<Text fz={"lg"} fw={"bold"}>Gambar</Text>
<Image src={"/"} alt="gambar" />
</Box>
<Box>
<Flex gap={"xs"}>
<Button color="red">
<IconX size={20} />
</Button>
<Button onClick={() => router.push('/admin/lingkungan/gotong-royong/edit')} color="green">
<IconEdit size={20} />
</Button>
</Flex>
</Box>
</Stack>
</Paper>
</Stack>
</Paper>
{/* Modal Hapus
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text="Apakah anda yakin ingin menghapus potensi ini?"
/> */}
</Box>
);
}
export default DetailGotongRoyong;

68
src/app/admin/(dashboard)/lingkungan/gotong-royong/edit/page.tsx
View File

@@ -1,68 +0,0 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import React from 'react';
import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
function EditGotongRoyong() {
const router = useRouter()
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
<Stack gap="xs">
<Title order={3}>Edit Gotong Royong</Title>
<TextInput
label={<Text fz="sm" fw="bold">Judul Gotong Royong</Text>}
placeholder="masukkan judul gotong royong"
/>
<TextInput
label={<Text fz="sm" fw="bold">Kategori Gotong Royong</Text>}
placeholder="masukkan kategori gotong royong"
/>
<Box>
<Text fw={"bold"} fz={"sm"}>Deskripsi Gotong Royong</Text>
<KeamananEditor
showSubmit={false}
/>
</Box>
{/* <FileInput
label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
value={file}
onChange={async (e) => {
if (!e) return;
setFile(e);
const base64 = await e.arrayBuffer().then((buf) =>
'data:image/png;base64,' + Buffer.from(buf).toString('base64')
);
setPreviewImage(base64);
}}
/> */}
{/* {previewImage ? (
<Image alt="" src={previewImage} w={200} h={200} />
) : (
<Center w={200} h={200} bg="gray">
<IconImageInPicture />
</Center>
)} */}
<Box>
<Text fz="sm" fw="bold">Gambar</Text>
<IconImageInPicture size={25} />
</Box>
<Button bg={colors['blue-button']} >
Simpan
</Button>
</Stack>
</Paper>
</Box>
);
}
export default EditGotongRoyong;

98
src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/[id]/page.tsx Normal file
View File

@@ -0,0 +1,98 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } 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 EditKategoriKegiatan() {
const router = useRouter();
const params = useParams();
const id = params?.id as string;
const stateKategori = useProxy(gotongRoyongState.kategoriKegiatan);
const [formData, setFormData] = useState({
nama: "",
});
useEffect(() => {
const loadKategorikegiatan = async () => {
if (!id) return;
try {
const data = await stateKategori.edit.load(id);
if (data) {
// pastikan id-nya masuk ke state edit
stateKategori.edit.id = id;
setFormData({
nama: data.nama || '',
});
}
} catch (error) {
console.error("Error loading kategori kegiatan:", error);
toast.error("Gagal memuat data kategori kegiatan");
}
};
loadKategorikegiatan();
}, [id]);
const handleSubmit = async () => {
try {
if (!formData.nama.trim()) {
toast.error('Nama kategori kegiatan tidak boleh kosong');
return;
}
stateKategori.edit.form = {
nama: formData.nama.trim(),
};
// Safety check tambahan: pastikan ID tidak kosong
if (!stateKategori.edit.id) {
stateKategori.edit.id = id; // fallback
}
const success = await stateKategori.edit.update();
if (success) {
router.push("/admin/lingkungan/gotong-royong/kategori-kegiatan");
}
} catch (error) {
console.error("Error updating kategori kegiatan:", error);
// toast akan ditampilkan dari fungsi update
}
};
return (
<Box>
<Box mb={10}>
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Stack gap={"xs"}>
<Title order={4}>Edit Kategori kegiatan</Title>
<TextInput
value={formData.nama}
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
label={<Text fw={"bold"} fz={"sm"}>Nama Kategori kegiatan</Text>}
placeholder='Masukkan nama kategori kegiatan'
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default EditKategoriKegiatan;

61
src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/create/page.tsx Normal file
View File

@@ -0,0 +1,61 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
import gotongRoyongState from '../../../../_state/lingkungan/gotong-royong';
function CreateKategoriKegiatan() {
const router = useRouter();
const stateKategori = useProxy(gotongRoyongState.kategoriKegiatan)
useEffect(() => {
stateKategori.findMany.load();
}, []);
const resetForm = () => {
stateKategori.create.form = {
nama: "",
};
}
const handleSubmit = async () => {
await stateKategori.create.create();
resetForm();
router.push("/admin/lingkungan/gotong-royong/kategori-kegiatan")
}
return (
<Box>
<Box>
<Box mb={10}>
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Stack gap={"xs"}>
<Title order={4}>Create Kategori Kegiatan</Title>
<TextInput
value={stateKategori.create.form.nama}
onChange={(val) => {
stateKategori.create.form.nama = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Kegiatan</Text>}
placeholder='Masukkan nama kategori kegiatan'
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
</Box>
);
}
export default CreateKategoriKegiatan;

112
src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/page.tsx Normal file
View File

@@ -0,0 +1,112 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import JudulList from '../../../_com/judulList';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import gotongRoyongState from '../../../_state/lingkungan/gotong-royong';
function KategoriKegiatan() {
const [search, setSearch] = useState("")
return (
<Box>
<HeaderSearch
title='Kategori Kegiatan'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListKategoriKegiatan search={search} />
</Box>
);
}
function ListKategoriKegiatan({ search }: { search: string }) {
const stateKategori = useProxy(gotongRoyongState.kategoriKegiatan)
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const router = useRouter()
const handleHapus = () => {
if (selectedId) {
stateKategori.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
}
}
useShallowEffect(() => {
stateKategori.findMany.load()
}, [])
const filteredData = (stateKategori.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.nama.toLowerCase().includes(keyword)
);
});
if (!stateKategori.findMany.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<JudulList
title='List Kategori Kegiatan'
href='/admin/lingkungan/gotong-royong/kategori-kegiatan/create'
/>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>
<TableTh>Nama Kategori</TableTh>
<TableTh>Edit</TableTh>
<TableTh>Delete</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.nama}</TableTd>
<TableTd>
<Button color="green" onClick={() => router.push(`/admin/lingkungan/gotong-royong/kategori-kegiatan/${item.id}`)}>
<IconEdit size={20} />
</Button>
</TableTd>
<TableTd>
<Button color="red" onClick={() => {
setSelectedId(item.id)
setModalHapus(true)
}}>
<IconX size={20} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Paper>
{/* Modal Konfirmasi Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text='Apakah anda yakin ingin menghapus kategori kegiatan ini?'
/>
</Box>
);
}
export default KategoriKegiatan;

242
src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/edit/page.tsx Normal file
View File

@@ -0,0 +1,242 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } 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';
interface FormKegiatanDesa {
judul: string;
deskripsiSingkat: string;
deskripsiLengkap: string;
tanggal: string;
lokasi: string;
partisipan: number;
imageId: string;
kategoriKegiatanId: string;
}
function EditGotongRoyong() {
const kegiatanDesaState = useProxy(gotongRoyongState.kegiatanDesa)
const params = useParams()
const router = useRouter()
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState<FormKegiatanDesa>({
judul: '',
deskripsiSingkat: '',
deskripsiLengkap: '',
tanggal: '',
lokasi: '',
partisipan: 0,
imageId: '',
kategoriKegiatanId: '',
})
const formatDateForInput = (dateString: string) => {
if (!dateString) return '';
const date = new Date(dateString);
return date.toISOString().split('T')[0];
};
useEffect(() => {
const loadKegiatanDesa = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await kegiatanDesaState.edit.load(id);
if (data) {
setFormData({
judul: data.judul || '',
deskripsiSingkat: data.deskripsiSingkat || '',
deskripsiLengkap: data.deskripsiLengkap || '',
tanggal: data.tanggal || '',
lokasi: data.lokasi || '',
partisipan: data.partisipan || 0,
imageId: data.imageId || '',
kategoriKegiatanId: data.kategoriKegiatanId || '',
});
}
} catch (error) {
console.error("Error loading kegiatan desa:", error);
toast.error("Gagal memuat data kegiatan desa");
}
}
gotongRoyongState.kategoriKegiatan.findMany.load()
loadKegiatanDesa();
}, [params?.id]);
const handleSubmit = async () => {
try {
kegiatanDesaState.edit.form = {
...kegiatanDesaState.edit.form,
judul: formData.judul.trim(),
deskripsiSingkat: formData.deskripsiSingkat.trim(),
deskripsiLengkap: formData.deskripsiLengkap.trim(),
tanggal: new Date(formData.tanggal.trim()),
lokasi: formData.lokasi.trim(),
partisipan: formData.partisipan,
imageId: formData.imageId,
kategoriKegiatanId: formData.kategoriKegiatanId,
}
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
kegiatanDesaState.edit.form.imageId = uploaded.id;
}
await kegiatanDesaState.edit.update()
router.push("/admin/lingkungan/gotong-royong/kegiatan-desa");
} catch (error) {
console.error("Error updating kegiatan desa:", error);
toast.error("Terjadi kesalahan saat memperbarui kegiatan desa");
}
}
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
<Stack gap="xs">
<Title order={3}>Edit Kegiatan Desa</Title>
<TextInput
value={formData.judul}
label={<Text fz="sm" fw="bold">Judul Kegiatan Desa</Text>}
placeholder="masukkan judul kegiatan desa"
onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
/>
<TextInput
value={formData.deskripsiSingkat}
label={<Text fz="sm" fw="bold">Deskripsi Singkat Kegiatan Desa</Text>}
placeholder="masukkan deskripsi singkat kegiatan desa"
onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
/>
<Select
label="Kategori Kegiatan"
data={gotongRoyongState.kategoriKegiatan.findMany.data?.map(k => ({
value: k.id,
label: k.nama
})) ?? []}
value={formData.kategoriKegiatanId}
onChange={(val) => setFormData({ ...formData, kategoriKegiatanId: val ?? '' })}
/>
<Box>
<Text fw={"bold"} fz={"sm"}>Deskripsi Lengkap Kegiatan Desa</Text>
<EditEditor
value={formData.deskripsiLengkap}
onChange={(htmlContent) => {
setFormData((prev) => ({ ...prev, deskripsiLengkap: htmlContent }));
kegiatanDesaState.edit.form.deskripsiLengkap = htmlContent;
}}
/>
</Box>
<TextInput
label={<Text fz="sm" fw="bold">Tanggal Kegiatan Desa</Text>}
placeholder="masukkan tanggal kegiatan desa"
type="date"
value={formatDateForInput(formData.tanggal)}
onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
/>
<TextInput
value={formData.lokasi}
label={<Text fz="sm" fw="bold">Lokasi Kegiatan Desa</Text>}
placeholder="masukkan lokasi kegiatan desa"
onChange={(e) => setFormData({ ...formData, lokasi: e.target.value })}
/>
<TextInput
value={formData.partisipan}
label={<Text fz="sm" fw="bold">Partisipan Kegiatan Desa</Text>}
placeholder="masukkan partisipan kegiatan desa"
onChange={(e) => {
const val = Number(e.target.value);
if (!isNaN(val)) {
setFormData({ ...formData, partisipan: val });
}
}}
/>
<Box>
<Text fz={"md"} fw={"bold"}>Gambar</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2} // Maks 5MB
accept={{ 'image/*': [] }}
>
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
<Dropzone.Accept>
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag gambar ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format gambar
</Text>
</div>
</Group>
</Dropzone>
{/* Tampilkan preview kalau ada */}
{previewImage && (
<Box mt="sm">
<Image
src={previewImage}
alt="Preview"
style={{
maxWidth: '100%',
maxHeight: '200px',
objectFit: 'contain',
borderRadius: '8px',
border: '1px solid #ddd',
}}
/>
</Box>
)}
</Box>
</Box>
<Button bg={colors['blue-button']} onClick={handleSubmit} >
Simpan
</Button>
</Stack>
</Paper>
</Box>
);
}
export default EditGotongRoyong;

133
src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/page.tsx Normal file
View File

@@ -0,0 +1,133 @@
'use client'
import { useProxy } from 'valtio/utils';
import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import colors from '@/con/colors';
import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
function DetailKegiatanDesa() {
const kegiatanDesaState = useProxy(gotongRoyongState.kegiatanDesa)
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const params = useParams()
const router = useRouter()
useShallowEffect(() => {
kegiatanDesaState.findUnique.load(params?.id as string)
}, [])
const handleHapus = () => {
if (selectedId) {
kegiatanDesaState.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/lingkungan/gotong-royong/kegiatan-desa")
}
}
if (!kegiatanDesaState.findUnique.data) {
return (
<Stack py={10}>
<Skeleton h={40} />
</Stack>
)
}
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
<Stack>
<Text fz={"xl"} fw={"bold"}>Detail kegiatanDesa Inovasi</Text>
{kegiatanDesaState.findUnique.data ? (
<Paper key={kegiatanDesaState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fw={"bold"} fz={"lg"}>Judul Kegiatan Desa Inovasi</Text>
<Text fz={"lg"}>{kegiatanDesaState.findUnique.data?.judul}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Tanggal</Text>
<Text fz={"lg"}>{kegiatanDesaState.findUnique.data?.tanggal
? new Date(kegiatanDesaState.findUnique.data.tanggal).toLocaleDateString()
: "-"}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Deskripsi Singkat</Text>
<Text fz={"lg"} >{kegiatanDesaState.findUnique.data?.deskripsiSingkat}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
<Text fz={"lg"} dangerouslySetInnerHTML={{ __html: kegiatanDesaState.findUnique.data?.deskripsiLengkap }} />
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Kategori Kegiatan</Text>
<Text fz={"lg"}>{kegiatanDesaState.findUnique.data?.kategoriKegiatan?.nama}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Partisipan</Text>
<Text fz={"lg"}>{kegiatanDesaState.findUnique.data?.partisipan}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Lokasi</Text>
<Text fz={"lg"}>{kegiatanDesaState.findUnique.data?.lokasi}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Gambar</Text>
<Image w={{ base: 150, md: 150, lg: 150 }} src={kegiatanDesaState.findUnique.data?.image?.link} alt="gambar" />
</Box>
<Flex gap={"xs"} mt={10}>
<Button
onClick={() => {
if (kegiatanDesaState.findUnique.data) {
setSelectedId(kegiatanDesaState.findUnique.data.id);
setModalHapus(true);
}
}}
disabled={kegiatanDesaState.delete.loading || !kegiatanDesaState.findUnique.data}
color={"red"}
>
<IconX size={20} />
</Button>
<Button
onClick={() => {
if (kegiatanDesaState.findUnique.data) {
router.push(`/admin/lingkungan/gotong-royong/kegiatan-desa/${kegiatanDesaState.findUnique.data.id}/edit`);
}
}}
disabled={!kegiatanDesaState.findUnique.data}
color={"green"}
>
<IconEdit size={20} />
</Button>
</Flex>
</Stack>
</Paper>
) : null}
</Stack>
</Paper>
{/* Modal Konfirmasi Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text='Apakah anda yakin ingin menghapus kegiatan desa ini?'
/>
</Box>
);
}
export default DetailKegiatanDesa;

215
src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/create/page.tsx Normal file
View File

@@ -0,0 +1,215 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreateKegiatanDesa() {
const router = useRouter();
const stateKegiatanDesa = useProxy(gotongRoyongState.kegiatanDesa)
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
useEffect(() => {
stateKegiatanDesa.findMany.load();
gotongRoyongState.kategoriKegiatan.findMany.load();
}, []);
const resetForm = () => {
stateKegiatanDesa.create.form = {
judul: "",
deskripsiSingkat: "",
deskripsiLengkap: "",
tanggal: new Date(),
lokasi: "",
partisipan: 0,
imageId: "",
kategoriKegiatanId: "",
};
setPreviewImage(null);
setFile(null);
};
const handleSubmit = async () => {
if (!file) {
return toast.warn("Pilih file gambar terlebih dahulu");
}
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
})
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal mengupload file");
}
stateKegiatanDesa.create.form.imageId = uploaded.id;
await stateKegiatanDesa.create.create();
resetForm();
router.push("/admin/lingkungan/gotong-royong/kegiatan-desa")
}
return (
<Box>
<Box mb={10}>
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Stack gap={"xs"}>
<Title order={4}>Create Kegiatan Desa</Title>
<Box>
<Text fz={"md"} fw={"bold"}>Gambar</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2} // Maks 5MB
accept={{ 'image/*': [] }}
>
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
<Dropzone.Accept>
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag gambar ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format gambar
</Text>
</div>
</Group>
</Dropzone>
{/* Tampilkan preview kalau ada */}
{previewImage && (
<Box mt="sm">
<Image
src={previewImage}
alt="Preview"
style={{
maxWidth: '100%',
maxHeight: '200px',
objectFit: 'contain',
borderRadius: '8px',
border: '1px solid #ddd',
}}
/>
</Box>
)}
</Box>
</Box>
<TextInput
value={stateKegiatanDesa.create.form.judul}
onChange={(val) => {
stateKegiatanDesa.create.form.judul = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Judul Kegiatan</Text>}
placeholder='Masukkan judul kegiatan'
/>
<TextInput
value={stateKegiatanDesa.create.form.deskripsiSingkat}
onChange={(val) => {
stateKegiatanDesa.create.form.deskripsiSingkat = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
placeholder='Masukkan deskripsi singkat'
/>
<TextInput
type="number"
min={0}
max={5}
step={0.1} // bisa pakai 0.1 biar support desimal
value={stateKegiatanDesa.create.form.partisipan}
onChange={(val) => {
const value = Number(val.target.value);
// Validasi manual juga boleh (jaga-jaga)
if (value >= 0 && value <= 1000) {
stateKegiatanDesa.create.form.partisipan = value;
}
}}
label={<Text fw={"bold"} fz={"sm"}>Partisipan</Text>}
placeholder='Masukkan partisipan'
/>
<TextInput
label={<Text fz={"sm"} fw={"bold"}>Tanggal</Text>}
type="date"
placeholder="Contoh: 2022-01-01"
value={stateKegiatanDesa.create.form.tanggal ? stateKegiatanDesa.create.form.tanggal.toISOString().split('T')[0] : ''}
onChange={(e) => {
const dateValue = e.currentTarget.value;
stateKegiatanDesa.create.form.tanggal = dateValue ? new Date(dateValue) : new Date();
}}
/>
<TextInput
value={stateKegiatanDesa.create.form.lokasi}
onChange={(val) => {
stateKegiatanDesa.create.form.lokasi = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Lokasi</Text>}
placeholder='Masukkan lokasi'
/>
<Box>
<Text fz={"sm"} fw={"bold"}>Deskripsi Lengkap</Text>
<CreateEditor
value={stateKegiatanDesa.create.form.deskripsiLengkap}
onChange={(val) => {
stateKegiatanDesa.create.form.deskripsiLengkap = val;
}}
/>
</Box>
<Select
value={stateKegiatanDesa.create.form.kategoriKegiatanId}
onChange={(val) => {
stateKegiatanDesa.create.form.kategoriKegiatanId = val ?? "";
}}
label={<Text fw={"bold"} fz={"sm"}>Kategori Kegiatan</Text>}
placeholder="Pilih kategori produk"
data={
gotongRoyongState.kategoriKegiatan.findMany.data?.map((v) => ({
value: v.id,
label: v.nama,
})) || []
}
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateKegiatanDesa;

97
src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/page.tsx Normal file
View File

@@ -0,0 +1,97 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import HeaderSearch from '../../../_com/header';
import JudulList from '../../../_com/judulList';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import gotongRoyongState from '../../../_state/lingkungan/gotong-royong';
function KegiatanDesa() {
const [search, setSearch] = useState('');
return (
<Box>
<HeaderSearch
title='Kegiatan Desa'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListKegiatanDesa search={search} />
</Box>
);
}
function ListKegiatanDesa({ search }: { search: string }) {
const listState = useProxy(gotongRoyongState.kegiatanDesa)
const router = useRouter();
useEffect(() => {
listState.findMany.load()
}, [])
const filteredData = (listState.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.judul.toLowerCase().includes(keyword) ||
item.lokasi.toLowerCase().includes(keyword) ||
item.kategoriKegiatan?.nama?.toLowerCase().includes(keyword)
);
});
if (!listState.findMany.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<Stack>
<JudulList
title='List Kegiatan Desa'
href='/admin/lingkungan/gotong-royong/kegiatan-desa/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>Judul Kegiatan Desa</TableTh>
<TableTh>Kategori Kegiatan Desa</TableTh>
<TableTh>Lokasi Kegiatan Desa</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Box w={100}>
<Text truncate="end" fz={"sm"}>{item.judul}</Text>
</Box>
</TableTd>
<TableTd>{item.kategoriKegiatan?.nama}</TableTd>
<TableTd>{item.lokasi}</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/lingkungan/gotong-royong/kegiatan-desa/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
</Box>
)
}
export default KegiatanDesa;

9
src/app/admin/(dashboard)/lingkungan/gotong-royong/layout.tsx Normal file
View File

@@ -0,0 +1,9 @@
import LayoutTabs from "./_lib/layoutTabs";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<LayoutTabs>
{children}
</LayoutTabs>
);
}

71
src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx
View File

@@ -1,71 +0,0 @@
'use client'
import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import HeaderSearch from '../../_com/header';
import colors from '@/con/colors';
import JudulList from '../../_com/judulList';
import { useRouter } from 'next/navigation';
function GotongRoyong() {
return (
<Box>
<HeaderSearch
title='Gotong Royong'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
/>
<ListGotongRoyong/>
</Box>
);
}
function ListGotongRoyong() {
const router = useRouter();
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<Stack>
<JudulList
title='List Gotong Royong'
href='/admin/lingkungan/gotong-royong/create'
/>
<Box style={{ overflowX: 'auto'}}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px'}}>
<TableThead>
<TableTr>
<TableTh>Judul Gotong Royong</TableTh>
<TableTh>Kategori Gotong Royong</TableTh>
<TableTh>Image</TableTh>
<TableTh>Deskripsi Gotong Royong</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
<TableTr>
<TableTd>
<Box w={100}>
<Text truncate="end" fz={"sm"}>Judul</Text>
</Box>
</TableTd>
<TableTd>Kategori</TableTd>
<TableTd>
<Image w={100} src="/" alt="image" />
</TableTd>
<TableTd>Deskripsi</TableTd>
<TableTd>
<Button onClick={() => router.push('/admin/lingkungan/gotong-royong/detail')}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
</Box>
)
}
export default GotongRoyong;

86
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit/page.tsx
View File

@@ -1 +1,87 @@
'use client'
import stateKonservasiAdatBali from '@/app/admin/(dashboard)/_state/lingkungan/konservasi-adat-bali';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
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 { useProxy } from 'valtio/utils';
const KonservasiAdatBaliTextEditor = dynamic(() => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor), {
ssr: false,
});
function EditBentukKonservasiBerdasarkanAdat() {
const router = useRouter()
const bentukKonservasiState = useProxy(stateKonservasiAdatBali.stateBentukKonservasiBerdasarkanAdat)
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
useShallowEffect(() => {
if (!bentukKonservasiState.findById.data) {
bentukKonservasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
}
}, []);
useEffect(() => {
if (bentukKonservasiState.findById.data) {
setJudul(bentukKonservasiState.findById.data.judul ?? '')
setContent(bentukKonservasiState.findById.data.deskripsi ?? '')
}
}, [bentukKonservasiState.findById.data])
const submit = () => {
if (bentukKonservasiState.findById.data) {
bentukKonservasiState.findById.data.judul = judul;
bentukKonservasiState.findById.data.deskripsi = content;
bentukKonservasiState.update.save(bentukKonservasiState.findById.data)
}
router.push('/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat')
}
return (
<Box>
<Stack gap={'xs'}>
<Box>
<Button
variant={'subtle'}
onClick={() => router.back()}
>
<IconArrowBack color={colors['blue-button']} size={20} />
</Button>
</Box>
<Box>
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
<Stack gap={'xs'}>
<Title order={3}>Edit Bentuk Konservasi Berdasarkan Adat</Title>
<Text fw={"bold"}>Judul</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setJudul}
initialContent={judul}
/>
<Text fw={"bold"}>Content</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={bentukKonservasiState.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
</Box>
</Stack>
</Box>
);
}
export default EditBentukKonservasiBerdasarkanAdat;

53
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/page.tsx
View File

@@ -1,11 +1,54 @@
import React from 'react'; 'use client'
import colors from '@/con/colors';
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import stateKonservasiAdatBali from '../../../_state/lingkungan/konservasi-adat-bali';
function Page() { function Page() {
const router = useRouter()
const listBentukKonservasiBerdasarkanAdat = useProxy(stateKonservasiAdatBali.stateBentukKonservasiBerdasarkanAdat)
useShallowEffect(() => {
listBentukKonservasiBerdasarkanAdat.findById.load('edit')
}, [])
if (!listBentukKonservasiBerdasarkanAdat.findById.data) {
return (
<Stack>
<Skeleton radius={10} h={800} />
</Stack>
)
}
return ( return (
<div> <Paper bg={colors['white-1']} p={'md'} radius={10}>
Page <Stack gap={"22"}>
</div> <Grid>
); <GridCol span={{ base: 12, md: 11 }}>
<Title order={2}>Preview Bentuk Konservasi Berdasarkan Adat</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit')}>
<IconEdit size={16} />
</Button>
</GridCol>
</Grid>
<Box>
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['BG-trans']}>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listBentukKonservasiBerdasarkanAdat.findById.data.judul }} />
</Box>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listBentukKonservasiBerdasarkanAdat.findById.data.deskripsi }} />
</Box>
</Paper>
</Stack>
</Box>
</Stack>
</Paper>
)
} }
export default Page; export default Page;

88
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit/page.tsx
View File

@@ -1,11 +1,87 @@
import React from 'react'; 'use client'
import stateKonservasiAdatBali from '@/app/admin/(dashboard)/_state/lingkungan/konservasi-adat-bali';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
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 { useProxy } from 'valtio/utils';
function Page() { const KonservasiAdatBaliTextEditor = dynamic(() => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor), {
ssr: false,
});
function EditNilaiKonservasiAdat() {
const router = useRouter()
const nilaiKonservasiState = useProxy(stateKonservasiAdatBali.stateNilaiKonservasiAdat)
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
useShallowEffect(() => {
if (!nilaiKonservasiState.findById.data) {
nilaiKonservasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
}
}, []);
useEffect(() => {
if (nilaiKonservasiState.findById.data) {
setJudul(nilaiKonservasiState.findById.data.judul ?? '')
setContent(nilaiKonservasiState.findById.data.deskripsi ?? '')
}
}, [nilaiKonservasiState.findById.data])
const submit = () => {
if (nilaiKonservasiState.findById.data) {
nilaiKonservasiState.findById.data.judul = judul;
nilaiKonservasiState.findById.data.deskripsi = content;
nilaiKonservasiState.update.save(nilaiKonservasiState.findById.data)
}
router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat')
}
return ( return (
<div> <Box>
Page <Stack gap={'xs'}>
</div> <Box>
<Button
variant={'subtle'}
onClick={() => router.back()}
>
<IconArrowBack color={colors['blue-button']} size={20} />
</Button>
</Box>
<Box>
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
<Stack gap={'xs'}>
<Title order={3}>Edit Nilai Konservasi Adat</Title>
<Text fw={"bold"}>Judul</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setJudul}
initialContent={judul}
/>
<Text fw={"bold"}>Content</Text>
<KonservasiAdatBaliTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={nilaiKonservasiState.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
</Box>
</Stack>
</Box>
); );
} }
export default Page; export default EditNilaiKonservasiAdat;

53
src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/page.tsx
View File

@@ -1,11 +1,54 @@
import React from 'react'; 'use client'
import colors from '@/con/colors';
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
import stateKonservasiAdatBali from '../../../_state/lingkungan/konservasi-adat-bali';
function Page() { function Page() {
const router = useRouter()
const listNilaiKonservasiAdat = useProxy(stateKonservasiAdatBali.stateNilaiKonservasiAdat)
useShallowEffect(() => {
listNilaiKonservasiAdat.findById.load('edit')
}, [])
if (!listNilaiKonservasiAdat.findById.data) {
return (
<Stack>
<Skeleton radius={10} h={800} />
</Stack>
)
}
return ( return (
<div> <Paper bg={colors['white-1']} p={'md'} radius={10}>
Page <Stack gap={"22"}>
</div> <Grid>
); <GridCol span={{ base: 12, md: 11 }}>
<Title order={2}>Preview Nilai Konservasi Adat</Title>
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit')}>
<IconEdit size={16} />
</Button>
</GridCol>
</Grid>
<Box>
<Stack gap={'lg'}>
<Paper p={"xl"} bg={colors['BG-trans']}>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listNilaiKonservasiAdat.findById.data.judul }} />
</Box>
<Box px={{ base: 0, md: 30 }}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listNilaiKonservasiAdat.findById.data.deskripsi }} />
</Box>
</Paper>
</Stack>
</Box>
</Stack>
</Paper>
)
} }
export default Page; export default Page;

2
src/app/admin/_com/list_PageAdmin.tsx
View File

@@ -323,7 +323,7 @@ export const navBar = [
{ {
id: "Lingkungan_4", id: "Lingkungan_4",
name: "Gotong Royong", name: "Gotong Royong",
path: "/admin/lingkungan/gotong-royong" path: "/admin/lingkungan/gotong-royong/kegiatan-desa"
}, },
{ {
id: "Lingkungan_5", id: "Lingkungan_5",

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

@@ -0,0 +1,51 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
type FormCreate = {
judul: string;
deskripsiSingkat: string;
deskripsiLengkap: string;
tanggal: string;
lokasi: string;
partisipan?: number;
imageId: string;
kategoriKegiatanId: string; // minimal satu kategori
};
export default async function kegiatanDesaCreate(context: Context) {
const body = context.body as FormCreate;
if (!body.kategoriKegiatanId) {
throw new Error("kategoriKegiatanId wajib diisi");
}
try {
// Create langsung data AdministrasiOnline
const result = await prisma.kegiatanDesa.create({
data: {
judul: body.judul,
deskripsiSingkat: body.deskripsiSingkat,
deskripsiLengkap: body.deskripsiLengkap,
tanggal: body.tanggal,
lokasi: body.lokasi,
partisipan: body.partisipan ?? 0,
imageId: body.imageId,
kategoriKegiatanId: body.kategoriKegiatanId, // relasi ke JenisLayanan
},
include: {
kategoriKegiatan: true, // Include data relasi
},
});
return {
success: true,
message: "Berhasil membuat kegiatan desa",
data: result,
};
} catch (error) {
console.error("Error creating kegiatan desa:", error);
throw new Error(
"Gagal membuat kegiatan desa: " + (error as Error).message
);
}
}

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

@@ -0,0 +1,21 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function kegiatanDesaDelete(context: Context) {
const { params } = context;
const id = params?.id as string;
if (!id) {
throw new Error("ID tidak ditemukan dalam parameter");
}
const deleted = await prisma.kegiatanDesa.delete({
where: { id },
});
return {
success: true,
message: "Berhasil menghapus kegiatan desa",
data: deleted,
};
}

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

@@ -0,0 +1,44 @@
// /api/berita/findManyPaginated.ts
import prisma from "@/lib/prisma";
import { Context } from "elysia";
async function kegiatanDesaFindMany(context: Context) {
const page = Number(context.query.page) || 1;
const limit = Number(context.query.limit) || 10;
const skip = (page - 1) * limit;
try {
const [data, total] = await Promise.all([
prisma.kegiatanDesa.findMany({
where: { isActive: true },
include: {
kategoriKegiatan: true,
image: true,
},
skip,
take: limit,
orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
}),
prisma.kegiatanDesa.count({
where: { isActive: true }
})
]);
return {
success: true,
message: "Success fetch kegiatan desa with pagination",
data,
page,
totalPages: Math.ceil(total / limit),
total,
};
} catch (e) {
console.error("Find many paginated error:", e);
return {
success: false,
message: "Failed fetch kegiatan desa with pagination",
};
}
}
export default kegiatanDesaFindMany;

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

@@ -0,0 +1,29 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function kegiatanDesaFindUnique(context: Context) {
const { params } = context;
const id = params?.id as string;
if (!id) {
throw new Error("ID tidak ditemukan dalam parameter");
}
const data = await prisma.kegiatanDesa.findUnique({
where: { id },
include: {
kategoriKegiatan: true,
image: true,
},
});
if (!data) {
throw new Error("Kegiatan desa tidak ditemukan");
}
return {
success: true,
message: "Data kegiatan desa ditemukan",
data,
};
}

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

@@ -0,0 +1,55 @@
import Elysia, { t } from "elysia";
import KegiatanDesaCreate from "./create";
import KegiatanDesaDelete from "./del";
import KegiatanDesaFindMany from "./findMany";
import KegiatanDesaFindUnique from "./findUnique";
import KegiatanDesaUpdate from "./updt";
import KategoriKegiatan from "./kategori-kegiatan";
const KegiatanDesa = new Elysia({
prefix: "/kegiatandesa",
tags: ["Lingkungan/Gotong Royong/Kegiatan Desa"],
})
// ✅ Find all
.get("/find-many", KegiatanDesaFindMany)
// ✅ Find by ID
.get("/:id", KegiatanDesaFindUnique)
// ✅ Create
.post("/create", KegiatanDesaCreate, {
body: t.Object({
judul: t.String(),
deskripsiSingkat: t.String(),
deskripsiLengkap: t.String(),
tanggal: t.String(),
lokasi: t.String(),
partisipan: t.Optional(t.Number()),
imageId: t.String(),
kategoriKegiatanId: t.String(),
}),
})
// ✅ Update
.put("/:id", KegiatanDesaUpdate, {
body: t.Object({
judul: t.Optional(t.String()),
deskripsiSingkat: t.Optional(t.String()),
deskripsiLengkap: t.Optional(t.String()),
tanggal: t.Optional(t.String()),
lokasi: t.Optional(t.String()),
partisipan: t.Optional(t.Number()),
imageId: t.Optional(t.String()),
kategoriKegiatanId: t.Optional(t.String()),
}),
})
// ✅ Kategori kegiatan routes (nested)
.use(KategoriKegiatan)
// ✅ Delete
.delete("/del/:id", KegiatanDesaDelete);
export default KegiatanDesa;

25
src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/kategori-kegiatan/create.ts Normal file
View File

@@ -0,0 +1,25 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function kategoriKegiatanCreate(context: Context) {
const body = context.body as {nama: string};
if (!body.nama) {
return {
success: false,
message: "Nama is required",
};
}
const kategoriKegiatan = await prisma.kategoriKegiatan.create({
data: {
nama: body.nama,
},
});
return {
success: true,
message: "Success create kategori kegiatan",
data: kategoriKegiatan
};
}

33
src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/kategori-kegiatan/del.ts Normal file
View File

@@ -0,0 +1,33 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
const kategoriKegiatanDelete = async (context: Context) => {
const id = context.params.id;
if (!id) {
return {
success: false,
message: "ID is required",
}
}
const kategoriKegiatan = await prisma.kategoriKegiatan.delete({
where: {
id: id,
},
})
if(!kategoriKegiatan) {
return {
success: false,
message: "Kategori Kegiatan tidak ditemukan",
}
}
return {
success: true,
message: "Success delete kategori kegiatan",
data: kategoriKegiatan,
}
}
export default kategoriKegiatanDelete

15
src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/kategori-kegiatan/findMany.ts Normal file
View File

@@ -0,0 +1,15 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
export default async function kategoriKegiatanFindMany() {
const data = await prisma.kategoriKegiatan.findMany();
return {
success: true,
data: data.map((item: any) => {
return {
id: item.id,
nama: item.nama,
}
}),
};
}

47
src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/kategori-kegiatan/findUnique.ts Normal file
View File

@@ -0,0 +1,47 @@
import { Context } from "elysia";
import prisma from "@/lib/prisma";
export default async function kategoriKegiatanFindUnique(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.kategoriKegiatan.findUnique({
where: { id },
});
if (!data) {
return {
success: false,
message: "Kategori kegiatan tidak ditemukan",
}
}
return {
success: true,
message: "Success find kategori kegiatan",
data,
}
} catch (error) {
console.error("Find by ID error:", error);
return {
success: false,
message: "Gagal mengambil kategori kegiatan: " + (error instanceof Error ? error.message : 'Unknown error'),
}
}
}

30
src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/kategori-kegiatan/index.ts Normal file
View File

@@ -0,0 +1,30 @@
import Elysia, { t } from "elysia";
import kategoriKegiatanCreate from "./create";
import kategoriKegiatanDelete from "./del";
import kategoriKegiatanFindMany from "./findMany";
import kategoriKegiatanFindUnique from "./findUnique";
import kategoriKegiatanUpdate from "./updt";
const KategoriKegiatan = new Elysia({
prefix: "/kategorikegiatan",
tags: ["Lingkungan/Kategori Kegiatan"],
})
.get("/find-many", kategoriKegiatanFindMany)
.get("/:id", async (context) => {
const response = await kategoriKegiatanFindUnique(context);
return response;
})
.delete("/del/:id", kategoriKegiatanDelete)
.post("/create", kategoriKegiatanCreate, {
body: t.Object({
nama: t.String(),
}),
})
.put("/:id", kategoriKegiatanUpdate, {
body: t.Object({
id: t.String(),
nama: t.String(),
}),
});
export default KategoriKegiatan;

44
src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/kategori-kegiatan/updt.ts Normal file
View File

@@ -0,0 +1,44 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function kategoriKegiatanUpdate(context: Context) {
const body = context.body as { nama: string };
const id = context.params?.id as string;
// Validasi ID dan nama
if (!id) {
return {
success: false,
message: "ID is required",
};
}
if (!body.nama) {
return {
success: false,
message: "Nama is required",
};
}
try {
const kategoriKegiatan = await prisma.kategoriKegiatan.update({
where: { id },
data: {
nama: body.nama,
},
});
return {
success: true,
message: "Success update kategori kegiatan",
data: kategoriKegiatan,
};
} catch (error) {
console.error("Update error:", error);
return {
success: false,
message: "Gagal update kategori kegiatan",
error: error instanceof Error ? error.message : String(error),
};
}
}

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

@@ -0,0 +1,60 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
type FormUpdateKegiatanDesa = {
judul?: string;
deskripsiSingkat?: string;
deskripsiLengkap?: string;
tanggal?: string;
lokasi?: string;
partisipan?: number;
imageId?: string;
kategoriKegiatanId?: string; // minimal satu kategori
};
export default async function kegiatanDesaUpdate(context: Context) {
const body = context.body as FormUpdateKegiatanDesa;
const id = context.params.id;
if (!id) {
return {
success: false,
message: "ID kegiatan desa wajib diisi",
};
}
try {
const updated = await prisma.kegiatanDesa.update({
where: { id },
data: {
judul: body.judul,
deskripsiSingkat: body.deskripsiSingkat,
deskripsiLengkap: body.deskripsiLengkap,
tanggal: body.tanggal ? new Date(body.tanggal) : undefined,
lokasi: body.lokasi,
partisipan: body.partisipan ?? 0,
imageId: body.imageId,
updatedAt: new Date(),
},
include: {
image: true,
kategoriKegiatan: true,
},
});
return {
success: true,
message: "Kegiatan desa berhasil diperbarui",
data: updated,
};
} catch (error: any) {
console.error("❌ Error update kegiatan desa:", error);
return {
success: false,
message: "Gagal memperbarui data kegiatan desa",
error: error.message,
};
}
}

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

@@ -4,6 +4,7 @@ import ProgramPenghijauan from "./program-penghijauan";
import DataLingkunganDesa from "./data-lingkungan-desa"; import DataLingkunganDesa from "./data-lingkungan-desa";
import EdukasiLingkungan from "./edukasi-lingkungan"; import EdukasiLingkungan from "./edukasi-lingkungan";
import KonservasiAdatBali from "./konservasi-adat-bali"; import KonservasiAdatBali from "./konservasi-adat-bali";
import KegiatanDesa from "./gotong-royong";
const Lingkungan = new Elysia({ const Lingkungan = new Elysia({
prefix: "/api/lingkungan", prefix: "/api/lingkungan",
@@ -15,6 +16,7 @@ const Lingkungan = new Elysia({
.use(DataLingkunganDesa) .use(DataLingkunganDesa)
.use(EdukasiLingkungan) .use(EdukasiLingkungan)
.use(KonservasiAdatBali) .use(KonservasiAdatBali)
.use(KegiatanDesa)
export default Lingkungan; export default Lingkungan;