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

API & UI Menu Landing Page, Submenu SDGs Desa & APBDes

Browse Source
This commit is contained in:
nico
2025-07-24 11:53:58 +08:00
parent bdf751ec3d
commit b745bd4623
25 changed files with 2189 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
prisma/schema.prisma
View File

@@ -92,6 +92,9 @@ model FileStorage {
PejabatDesa PejabatDesa[] PejabatDesa PejabatDesa[]
MediaSosial MediaSosial[] MediaSosial MediaSosial[]
DesaAntiKorupsi DesaAntiKorupsi[] DesaAntiKorupsi DesaAntiKorupsi[]
SDGSDesa SDGSDesa[]
APBDesImage APBDes[] @relation("APBDesImage")
APBDesFile APBDes[] @relation("APBDesFile")
} }
//========================================= MENU LANDING PAGE ========================================= // //========================================= MENU LANDING PAGE ========================================= //
@@ -158,6 +161,34 @@ model KategoriDesaAntiKorupsi {
DesaAntiKorupsi DesaAntiKorupsi[] DesaAntiKorupsi DesaAntiKorupsi[]
} }
//========================================= SDGS Desa ========================================= //
model SDGSDesa {
id String @id @default(cuid())
name String @unique
jumlah String
image FileStorage @relation(fields: [imageId], references: [id])
imageId String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}
//========================================= APBDes ========================================= //
model APBDes {
id String @id @default(cuid())
name String @unique
jumlah String
image FileStorage @relation("APBDesImage", fields: [imageId], references: [id])
imageId String
file FileStorage @relation("APBDesFile", fields: [fileId], references: [id])
fileId String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}
//========================================= MENU PPID ========================================= // //========================================= MENU PPID ========================================= //
//========================================= STRUKTUR PPID ========================================= // //========================================= STRUKTUR PPID ========================================= //

242
src/app/admin/(dashboard)/_state/landing-page/apbdes.ts Normal file
View File

@@ -0,0 +1,242 @@
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 templateapbDesaForm = z.object({
name: z.string().min(1, "Judul minimal 1 karakter"),
jumlah: z.string().min(1, "Deskripsi minimal 1 karakter"),
imageId: z.string().min(1, "File minimal 1"),
fileId: z.string().min(1, "File minimal 1"),
});
const defaultapbdesForm = {
name: "",
jumlah: "",
imageId: "",
fileId: "",
};
const apbdes = proxy({
create: {
form: { ...defaultapbdesForm },
loading: false,
async create() {
const cek = templateapbDesaForm.safeParse(
apbdes.create.form
);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
apbdes.create.loading = true;
const res = await ApiFetch.api.landingpage.apbdes[
"create"
].post({
...apbdes.create.form,
});
if (res.status === 200) {
apbdes.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 {
apbdes.create.loading = false;
}
},
},
findMany: {
data: null as Array<
Prisma.APBDesGetPayload<{
include: {
image: true;
file: true;
};
}>
> | null,
async load() {
const res = await ApiFetch.api.landingpage.apbdes[
"find-many"
].get();
if (res.status === 200) {
apbdes.findMany.data = res.data?.data ?? [];
}
},
},
findUnique: {
data: null as Prisma.APBDesGetPayload<{
include: {
image: true;
file: true;
};
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/landingpage/apbdes/${id}`);
if (res.ok) {
const data = await res.json();
apbdes.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
apbdes.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
apbdes.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
apbdes.delete.loading = true;
const response = await fetch(
`/api/landingpage/apbdes/del/${id}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
const result = await response.json();
if (response.ok && result?.success) {
toast.success(result.message || "apbdes berhasil dihapus");
await apbdes.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus apbdes");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus apbdes");
} finally {
apbdes.delete.loading = false;
}
},
},
edit: {
id: "",
form: { ...defaultapbdesForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
apbdes.edit.loading = true;
const response = await fetch(`/api/landingpage/apbdes/${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 = {
name: data.name,
jumlah: data.jumlah,
imageId: data.imageId,
fileId: data.fileId,
};
return data;
} else {
throw new Error(result?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading apbdes:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
} finally {
apbdes.edit.loading = false;
}
},
async update() {
const cek = templateapbDesaForm.safeParse(
apbdes.edit.form
);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
apbdes.edit.loading = true;
const response = await fetch(
`/api/landingpage/apbdes/${this.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: this.form.name,
jumlah: this.form.jumlah,
imageId: this.form.imageId,
fileId: this.form.fileId,
}),
}
);
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 apbdes");
await apbdes.findMany.load(); // refresh list
return true;
} else {
throw new Error(
result.message || "Gagal mengupdate apbdes"
);
}
} catch (error) {
console.error("Error updating apbdes:", error);
toast.error(
error instanceof Error
? error.message
: "Gagal mengupdate apbdes"
);
return false;
} finally {
apbdes.edit.loading = false;
}
},
reset() {
apbdes.edit.id = "";
apbdes.edit.form = { ...defaultapbdesForm };
},
},
});
export default apbdes;

236
src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts Normal file
View File

@@ -0,0 +1,236 @@
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 templatesdgsDesaForm = z.object({
name: z.string().min(1, "Judul minimal 1 karakter"),
jumlah: z.string().min(1, "Deskripsi minimal 1 karakter"),
imageId: z.string().min(1, "File minimal 1"),
});
const defaultsdgsDesaForm = {
name: "",
jumlah: "",
imageId: "",
};
const sdgsDesa = proxy({
create: {
form: { ...defaultsdgsDesaForm },
loading: false,
async create() {
const cek = templatesdgsDesaForm.safeParse(
sdgsDesa.create.form
);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
sdgsDesa.create.loading = true;
const res = await ApiFetch.api.landingpage.sdgsdesa[
"create"
].post({
...sdgsDesa.create.form,
});
if (res.status === 200) {
sdgsDesa.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 {
sdgsDesa.create.loading = false;
}
},
},
findMany: {
data: null as Array<
Prisma.SDGSDesaGetPayload<{
include: {
image: true;
};
}>
> | null,
async load() {
const res = await ApiFetch.api.landingpage.sdgsdesa[
"find-many"
].get();
if (res.status === 200) {
sdgsDesa.findMany.data = res.data?.data ?? [];
}
},
},
findUnique: {
data: null as Prisma.SDGSDesaGetPayload<{
include: {
image: true;
};
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/landingpage/sdgsdesa/${id}`);
if (res.ok) {
const data = await res.json();
sdgsDesa.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
sdgsDesa.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
sdgsDesa.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
sdgsDesa.delete.loading = true;
const response = await fetch(
`/api/landingpage/sdgsdesa/del/${id}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
const result = await response.json();
if (response.ok && result?.success) {
toast.success(result.message || "sdgs desa berhasil dihapus");
await sdgsDesa.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus sdgs desa");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus sdgs desa");
} finally {
sdgsDesa.delete.loading = false;
}
},
},
edit: {
id: "",
form: { ...defaultsdgsDesaForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
sdgsDesa.edit.loading = true;
const response = await fetch(`/api/landingpage/sdgsdesa/${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 = {
name: data.name,
jumlah: data.jumlah,
imageId: data.imageId,
};
return data;
} else {
throw new Error(result?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading sdgs desa:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
} finally {
sdgsDesa.edit.loading = false;
}
},
async update() {
const cek = templatesdgsDesaForm.safeParse(
sdgsDesa.edit.form
);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
sdgsDesa.edit.loading = true;
const response = await fetch(
`/api/landingpage/sdgsdesa/${this.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: this.form.name,
jumlah: this.form.jumlah,
imageId: this.form.imageId,
}),
}
);
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 sdgs desa");
await sdgsDesa.findMany.load(); // refresh list
return true;
} else {
throw new Error(
result.message || "Gagal mengupdate sdgs desa"
);
}
} catch (error) {
console.error("Error updating sdgs desa:", error);
toast.error(
error instanceof Error
? error.message
: "Gagal mengupdate sdgs desa"
);
return false;
} finally {
sdgsDesa.edit.loading = false;
}
},
reset() {
sdgsDesa.edit.id = "";
sdgsDesa.edit.form = { ...defaultsdgsDesaForm };
},
},
});
export default sdgsDesa;

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

@@ -0,0 +1,258 @@
/* eslint-disable react-hooks/exhaustive-deps */
"use client";
import apbdes from "@/app/admin/(dashboard)/_state/landing-page/apbdes";
import colors from "@/con/colors";
import ApiFetch from "@/lib/api-fetch";
import {
Box,
Button,
Group,
Paper,
Stack,
Text,
TextInput,
Title
} from "@mantine/core";
import { Dropzone } from "@mantine/dropzone";
import { IconArrowBack, IconFile, IconImageInPicture, IconUpload, IconX } from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import { useProxy } from "valtio/utils";
function EditAPBDes() {
const apbdesState = useProxy(apbdes);
const router = useRouter();
const params = useParams();
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [previewDoc, setPreviewDoc] = useState<string | null>(null);
const [imageFile, setImageFile] = useState<File | null>(null);
const [docFile, setDocFile] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: apbdesState.edit.form.name || '',
jumlah: apbdesState.edit.form.jumlah || '',
imageId: apbdesState.edit.form.imageId || '',
fileId: apbdesState.edit.form.fileId || ''
});
// Load sdgs desa by id saat pertama kali
useEffect(() => {
const loadKolaborasi = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await apbdesState.edit.load(id); // akses langsung, bukan dari proxy
if (data) {
setFormData({
name: data.name || '',
jumlah: data.jumlah || '',
imageId: data.imageId || '',
fileId: data.fileId || ''
});
if (data.image) {
if (data?.image?.link) {
setPreviewImage(data.image.link);
}
}
if (data.file) {
if (data?.file?.link) {
setPreviewDoc(data.file.link);
}
}
}
} catch (error) {
console.error("Error loading apbdes:", error);
toast.error("Gagal memuat data apbdes");
}
};
loadKolaborasi();
}, [params?.id]);
const handleSubmit = async () => {
try {
// edit global state with form data
apbdesState.edit.form = {
...apbdesState.edit.form,
name: formData.name,
jumlah: formData.jumlah,
imageId: formData.imageId // Keep existing imageId if not changed
};
// Jika ada file image baru, upload
if (imageFile) {
const res = await ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name });
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal upload gambar");
}
// edit imageId in global state
apbdesState.edit.form.imageId = uploaded.id;
}
// Jika ada file doc baru, upload
if (docFile) {
const res = await ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name });
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal upload doc");
}
// edit fileId in global state
apbdesState.edit.form.fileId = uploaded.id;
}
await apbdesState.edit.update();
toast.success("apbdes berhasil diperbarui!");
router.push("/admin/landing-page/APBDes");
} catch (error) {
console.error("Error updating apbdes:", error);
toast.error("Terjadi kesalahan saat memperbarui apbdes");
}
};
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors["blue-button"]} size={30} />
</Button>
</Box>
<Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
<Stack gap={"xs"}>
<Title order={3}>Edit APBDes</Title>
<TextInput
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
placeholder="masukkan nama"
/>
<TextInput
value={formData.jumlah}
onChange={(e) => setFormData({ ...formData, jumlah: e.target.value })}
label={<Text fz={"sm"} fw={"bold"}>Jumlah</Text>}
placeholder="masukkan jumlah"
/>
<Box>
<Text fz={"md"} fw={"bold"}>File Image</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setImageFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2} // Maks 5MB
accept={{
'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
}}
>
<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>
<IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag file ke sini atau klik untuk pilih image
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format image
</Text>
</div>
</Group>
</Dropzone>
<Box>
<Text fw={"bold"} fz={"lg"}>Image</Text>
{previewImage ? (
<iframe
src={previewImage}
width="100%"
height="500px"
style={{ border: "1px solid #ccc", borderRadius: "8px" }}
/>
) : (
<Text>Tidak ada image tersedia</Text>
)}
</Box>
</Box>
</Box>
<Box>
<Text fz={"md"} fw={"bold"}>File Doc</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setDocFile(selectedFile);
setPreviewDoc(URL.createObjectURL(selectedFile)); // Buat preview
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2} // Maks 5MB
accept={{
'application/*': ['.pdf', '.doc', '.docx'],
}}
>
<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>
<IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag file ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format doc
</Text>
</div>
</Group>
</Dropzone>
<Box>
<Text fw={"bold"} fz={"lg"}>Dokumen</Text>
{previewDoc ? (
<iframe
src={previewDoc}
width="100%"
height="500px"
style={{ border: "1px solid #ccc", borderRadius: "8px" }}
/>
) : (
<Text>Tidak ada doc tersedia</Text>
)}
</Box>
</Box>
</Box>
<Button onClick={handleSubmit}>Simpan</Button>
</Stack>
</Paper>
</Box>
);
}
export default EditAPBDes;

126
src/app/admin/(dashboard)/landing-page/apbdes/[id]/page.tsx Normal file
View File

@@ -0,0 +1,126 @@
'use client'
import { useProxy } from 'valtio/utils';
import { ActionIcon, Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconFile, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import colors from '@/con/colors';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import apbdes from '../../../_state/landing-page/apbdes';
function DetailAPBDes() {
const apbdesState = useProxy(apbdes)
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const params = useParams()
const router = useRouter()
useShallowEffect(() => {
apbdesState.findUnique.load(params?.id as string)
}, [])
const handleHapus = () => {
if (selectedId) {
apbdesState.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/landing-page/APBDes")
}
}
if (!apbdesState.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 APBDes</Text>
{apbdesState.findUnique.data ? (
<Paper key={apbdesState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fw={"bold"} fz={"lg"}>Nama APBDes</Text>
<Text fz={"lg"}>{apbdesState.findUnique.data?.name}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Jumlah</Text>
<Text fz={"lg"}>{apbdesState.findUnique.data?.jumlah}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Gambar</Text>
<Image w={{ base: 150, md: 150, lg: 150 }} src={apbdesState.findUnique.data?.image?.link} alt="gambar" />
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Dokumen</Text>
{apbdesState.findUnique.data?.file?.link ? (
<ActionIcon
component="a"
href={apbdesState.findUnique.data.file.link}
target="_blank"
rel="noopener noreferrer"
variant="transparent"
>
<IconFile size={25} color={colors['blue-button']}/>
</ActionIcon>
) : (
<Text>Tidak ada dokumen tersedia</Text>
)}
</Box>
<Flex gap={"xs"} mt={10}>
<Button
onClick={() => {
if (apbdesState.findUnique.data) {
setSelectedId(apbdesState.findUnique.data.id);
setModalHapus(true);
}
}}
disabled={apbdesState.delete.loading || !apbdesState.findUnique.data}
color={"red"}
>
<IconX size={20} />
</Button>
<Button
onClick={() => {
if (apbdesState.findUnique.data) {
router.push(`/admin/landing-page/APBDes/${apbdesState.findUnique.data.id}/edit`);
}
}}
disabled={!apbdesState.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 APBDes ini?'
/>
</Box>
);
}
export default DetailAPBDes;

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

@@ -0,0 +1,215 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconFile, IconImageInPicture, 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';
import apbdes from '../../../_state/landing-page/apbdes';
function CreateAPBDes() {
const router = useRouter();
const stateAPBDes = useProxy(apbdes)
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [previewDoc, setPreviewDoc] = useState<string | null>(null);
const [imageFile, setImageFile] = useState<File | null>(null);
const [docFile, setDocFile] = useState<File | null>(null);
useEffect(() => {
stateAPBDes.findMany.load();
}, []);
const resetForm = () => {
stateAPBDes.create.form = {
name: "",
jumlah: "",
imageId: "",
fileId: "",
};
setImageFile(null);
setDocFile(null);
setPreviewImage(null);
};
const handleSubmit = async () => {
if (!imageFile || !docFile) {
return toast.warn("Pilih gambar dan dokumen terlebih dahulu");
}
try {
const [uploadImageRes, uploadDocRes] = await Promise.all([
ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name }),
ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name }),
]);
const imageId = uploadImageRes?.data?.data?.id;
const fileId = uploadDocRes?.data?.data?.id;
if (!imageId || !fileId) {
return toast.error("Gagal mengupload file");
}
stateAPBDes.create.form.imageId = imageId;
stateAPBDes.create.form.fileId = fileId;
await stateAPBDes.create.create();
toast.success("Berhasil menambahkan APBDes");
resetForm();
router.push("/admin/landing-page/APBDes");
} catch (error) {
console.error("Gagal submit:", error);
toast.error("Gagal menyimpan data");
}
};
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 APBDes</Title>
<Box>
<Text fz={"md"} fw={"bold"}>File Image</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setImageFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2} // Maks 5MB
accept={{
'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
}}
>
<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>
<IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag file ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format image
</Text>
</div>
</Group>
</Dropzone>
<Box>
<Text fw={"bold"} fz={"lg"}>Dokumen</Text>
{previewImage ? (
<iframe
src={previewImage}
width="100%"
height="500px"
style={{ border: "1px solid #ccc", borderRadius: "8px" }}
/>
) : (
<Text>Tidak ada image tersedia</Text>
)}
</Box>
</Box>
</Box>
<Box>
<Text fz={"md"} fw={"bold"}>File Dokumen</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setDocFile(selectedFile);
setPreviewDoc(URL.createObjectURL(selectedFile)); // Buat preview
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2} // Maks 5MB
accept={{
'application/*': ['.pdf', '.doc', '.docx'],
}}
>
<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>
<IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag file ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format dokumen
</Text>
</div>
</Group>
</Dropzone>
<Box>
<Text fw={"bold"} fz={"lg"}>Dokumen</Text>
{previewDoc ? (
<iframe
src={previewDoc}
width="100%"
height="500px"
style={{ border: "1px solid #ccc", borderRadius: "8px" }}
/>
) : (
<Text>Tidak ada dokumen tersedia</Text>
)}
</Box>
</Box>
</Box>
<TextInput
value={stateAPBDes.create.form.name}
onChange={(val) => {
stateAPBDes.create.form.name = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
placeholder='Masukkan judul'
/>
<TextInput
type='number'
value={stateAPBDes.create.form.jumlah}
onChange={(val) => {
stateAPBDes.create.form.jumlah = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
placeholder='Masukkan jumlah'
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateAPBDes;

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

@@ -1,11 +1,113 @@
import React from 'react'; /* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { ActionIcon, Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { IconDeviceImacCog, IconFile, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../_com/header';
import JudulList from '../../_com/judulList';
import apbdes from '../../_state/landing-page/apbdes';
function Page() {
function APBDes() {
const [search, setSearch] = useState('');
return ( return (
<div> <Box>
APBDes <HeaderSearch
</div> title='APBDes'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListAPBDes search={search} />
</Box>
); );
} }
export default Page; function ListAPBDes({ search }: { search: string }) {
const listState = useProxy(apbdes)
const router = useRouter();
useEffect(() => {
listState.findMany.load()
}, [])
const filteredData = (listState.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.name.toLowerCase().includes(keyword) ||
item.jumlah.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 APBDes'
href='/admin/landing-page/APBDes/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>Nama APBDes</TableTh>
<TableTh>Jumlah APBDes</TableTh>
<TableTh>Document</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Box w={100}>
<Text truncate="end" fz={"sm"}>{item.name}</Text>
</Box>
</TableTd>
<TableTd>
<Text truncate="end" fz={"sm"}>{item.jumlah}</Text>
</TableTd>
<TableTd>
{item.file?.link ? (
<ActionIcon
component="a"
href={item.file.link}
target="_blank"
rel="noopener noreferrer"
variant='transparent'
>
<IconFile size={25} color={colors['blue-button']}/>
</ActionIcon>
) : (
<Text>Tidak ada dokumen tersedia</Text>
)}
</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/landing-page/APBDes/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
</Box>
)
}
export default APBDes;

182
src/app/admin/(dashboard)/landing-page/sdgs-desa/[id]/edit/page.tsx Normal file
View File

@@ -0,0 +1,182 @@
/* eslint-disable react-hooks/exhaustive-deps */
"use client";
import sdgsDesa from "@/app/admin/(dashboard)/_state/landing-page/sdgs-desa";
import colors from "@/con/colors";
import ApiFetch from "@/lib/api-fetch";
import {
Box,
Button,
Group,
Paper,
Stack,
Text,
TextInput,
Title
} from "@mantine/core";
import { Dropzone } from "@mantine/dropzone";
import { IconArrowBack, IconImageInPicture, IconUpload, IconX } from "@tabler/icons-react";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import { useProxy } from "valtio/utils";
function EditKolaborasiInovasi() {
const sdgsState = useProxy(sdgsDesa);
const router = useRouter();
const params = useParams();
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState({
name: sdgsState.edit.form.name || '',
jumlah: sdgsState.edit.form.jumlah || '',
imageId: sdgsState.edit.form.imageId || ''
});
// Load sdgs desa by id saat pertama kali
useEffect(() => {
const loadKolaborasi = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await sdgsState.edit.load(id); // akses langsung, bukan dari proxy
if (data) {
setFormData({
name: data.name || '',
jumlah: data.jumlah || '',
imageId: data.imageId || '',
});
if (data.image) {
if (data?.image?.link) {
setPreviewImage(data.image.link);
}
}
}
} catch (error) {
console.error("Error loading sdgs desa:", error);
toast.error("Gagal memuat data sdgs desa");
}
};
loadKolaborasi();
}, [params?.id]);
const handleSubmit = async () => {
try {
// edit global state with form data
sdgsState.edit.form = {
...sdgsState.edit.form,
name: formData.name,
jumlah: formData.jumlah,
imageId: formData.imageId // Keep existing imageId if not changed
};
// Jika ada file baru, upload
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");
}
// edit imageId in global state
sdgsState.edit.form.imageId = uploaded.id;
}
await sdgsState.edit.update();
toast.success("sdgs desa berhasil diperbarui!");
router.push("/admin/landing-page/SDGs-Desa");
} catch (error) {
console.error("Error updating sdgs desa:", error);
toast.error("Terjadi kesalahan saat memperbarui sdgs desa");
}
};
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors["blue-button"]} size={30} />
</Button>
</Box>
<Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
<Stack gap={"xs"}>
<Title order={3}>Edit SDGs Desa</Title>
<TextInput
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
placeholder="masukkan nama"
/>
<TextInput
value={formData.jumlah}
onChange={(e) => setFormData({ ...formData, jumlah: e.target.value })}
label={<Text fz={"sm"} fw={"bold"}>Jumlah</Text>}
placeholder="masukkan jumlah"
/>
<Box>
<Text fz={"md"} fw={"bold"}>File Image</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={{
'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
}}
>
<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>
<IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag file ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format image
</Text>
</div>
</Group>
</Dropzone>
<Box>
<Text fw={"bold"} fz={"lg"}>Dokumen</Text>
{previewImage ? (
<iframe
src={previewImage}
width="100%"
height="500px"
style={{ border: "1px solid #ccc", borderRadius: "8px" }}
/>
) : (
<Text>Tidak ada image tersedia</Text>
)}
</Box>
</Box>
</Box>
<Button onClick={handleSubmit}>Simpan</Button>
</Stack>
</Paper>
</Box>
);
}
export default EditKolaborasiInovasi;

110
src/app/admin/(dashboard)/landing-page/sdgs-desa/[id]/page.tsx Normal file
View File

@@ -0,0 +1,110 @@
'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 { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import sdgsDesa from '../../../_state/landing-page/sdgs-desa';
function DetailSDGSDesa() {
const sdgsState = useProxy(sdgsDesa)
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const params = useParams()
const router = useRouter()
useShallowEffect(() => {
sdgsState.findUnique.load(params?.id as string)
}, [])
const handleHapus = () => {
if (selectedId) {
sdgsState.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/landing-page/SDGs-Desa")
}
}
if (!sdgsState.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 SDGS Desa</Text>
{sdgsState.findUnique.data ? (
<Paper key={sdgsState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fw={"bold"} fz={"lg"}>Nama SDGS Desa</Text>
<Text fz={"lg"}>{sdgsState.findUnique.data?.name}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Jumlah</Text>
<Text fz={"lg"}>{sdgsState.findUnique.data?.jumlah}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Gambar</Text>
<Image w={{ base: 150, md: 150, lg: 150 }} src={sdgsState.findUnique.data?.image?.link} alt="gambar" />
</Box>
<Flex gap={"xs"} mt={10}>
<Button
onClick={() => {
if (sdgsState.findUnique.data) {
setSelectedId(sdgsState.findUnique.data.id);
setModalHapus(true);
}
}}
disabled={sdgsState.delete.loading || !sdgsState.findUnique.data}
color={"red"}
>
<IconX size={20} />
</Button>
<Button
onClick={() => {
if (sdgsState.findUnique.data) {
router.push(`/admin/landing-page/SDGs-Desa/${sdgsState.findUnique.data.id}/edit`);
}
}}
disabled={!sdgsState.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 SDGS Desa ini?'
/>
</Box>
);
}
export default DetailSDGSDesa;

148
src/app/admin/(dashboard)/landing-page/sdgs-desa/create/page.tsx Normal file
View File

@@ -0,0 +1,148 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconImageInPicture, 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';
import sdgsDesa from '../../../_state/landing-page/sdgs-desa';
function CreateSDGsDesa() {
const router = useRouter();
const stateSDGSDesa = useProxy(sdgsDesa)
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
useEffect(() => {
stateSDGSDesa.findMany.load();
}, []);
const resetForm = () => {
stateSDGSDesa.create.form = {
name: "",
jumlah: "",
imageId: "",
};
setFile(null);
setPreviewImage(null);
};
const handleSubmit = async () => {
if (!file) {
return toast.warn("Pilih file image 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");
}
stateSDGSDesa.create.form.imageId = uploaded.id;
await stateSDGSDesa.create.create();
resetForm();
router.push("/admin/landing-page/SDGs-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 SDGs Desa</Title>
<Box>
<Text fz={"md"} fw={"bold"}>File Image</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={{
'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
}}
>
<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>
<IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag file ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format image
</Text>
</div>
</Group>
</Dropzone>
<Box>
<Text fw={"bold"} fz={"lg"}>Dokumen</Text>
{previewImage ? (
<iframe
src={previewImage}
width="100%"
height="500px"
style={{ border: "1px solid #ccc", borderRadius: "8px" }}
/>
) : (
<Text>Tidak ada image tersedia</Text>
)}
</Box>
</Box>
</Box>
<TextInput
value={stateSDGSDesa.create.form.name}
onChange={(val) => {
stateSDGSDesa.create.form.name = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
placeholder='Masukkan judul'
/>
<TextInput
type='number'
value={stateSDGSDesa.create.form.jumlah}
onChange={(val) => {
stateSDGSDesa.create.form.jumlah = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
placeholder='Masukkan jumlah'
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateSDGsDesa;

98
src/app/admin/(dashboard)/landing-page/sdgs-desa/page.tsx
View File

@@ -1,11 +1,97 @@
import React from 'react'; /* 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 { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../_com/header';
import sdgsDesa from '../../_state/landing-page/sdgs-desa';
import JudulList from '../../_com/judulList';
function Page() {
function SdgsDesa() {
const [search, setSearch] = useState('');
return ( return (
<div> <Box>
SDGS Desa <HeaderSearch
</div> title='SDGs Desa'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListSdgsDesa search={search} />
</Box>
); );
} }
export default Page; function ListSdgsDesa({ search }: { search: string }) {
const listState = useProxy(sdgsDesa)
const router = useRouter();
useEffect(() => {
listState.findMany.load()
}, [])
const filteredData = (listState.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.name.toLowerCase().includes(keyword) ||
item.jumlah.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='SDGs Desa'
href='/admin/landing-page/SDGs-Desa/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>Nama SDGs Desa</TableTh>
<TableTh>Jumlah SDGs 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.name}</Text>
</Box>
</TableTd>
<TableTd>
<Text truncate="end" fz={"sm"}>{item.jumlah}</Text>
</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/landing-page/SDGs-Desa/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
</Box>
)
}
export default SdgsDesa;

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

@@ -22,12 +22,12 @@ export const navBar = [
{ {
id: "Landing_Page_4", id: "Landing_Page_4",
name: "SDGs Desa", name: "SDGs Desa",
path: "/admin/landing-page/sdgs-desa" path: "/admin/landing-page/SDGs-Desa"
}, },
{ {
id: "Landing_Page_5", id: "Landing_Page_5",
name: "APBDes", name: "APBDes",
path: "/admin/landing-page/apbdes" path: "/admin/landing-page/APBDes"
}, },
{ {
id: "Landing_Page_6", id: "Landing_Page_6",

36
src/app/api/[[...slugs]]/_lib/landing_page/apbdes/create.ts Normal file
View File

@@ -0,0 +1,36 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
type FormCreate = {
name: string;
jumlah: string;
imageId: string;
fileId: string;
};
export default async function apbdesCreate(context: Context) {
const body = context.body as FormCreate;
try {
const result = await prisma.aPBDes.create({
data: {
name: body.name,
jumlah: body.jumlah,
imageId: body.imageId,
fileId: body.fileId,
},
include: {
image: true,
file: true,
},
});
return {
success: true,
message: "Berhasil membuat APB Des",
data: result,
};
} catch (error) {
console.error("Error creating APB Des:", error);
throw new Error("Gagal membuat APB Des: " + (error as Error).message);
}
}

21
src/app/api/[[...slugs]]/_lib/landing_page/apbdes/del.ts Normal file
View File

@@ -0,0 +1,21 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function apbdesDelete(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.aPBDes.delete({
where: { id },
});
return {
success: true,
message: "Berhasil menghapus APB Des",
data: deleted,
};
}

44
src/app/api/[[...slugs]]/_lib/landing_page/apbdes/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 apbdesFindMany(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.aPBDes.findMany({
where: { isActive: true },
include: {
image: true,
file: true,
},
skip,
take: limit,
orderBy: { createdAt: "desc" }, // opsional, kalau mau urut berdasarkan waktu
}),
prisma.aPBDes.count({
where: { isActive: true },
}),
]);
return {
success: true,
message: "Success fetch APB Des 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 APB Des with pagination",
};
}
}
export default apbdesFindMany;

29
src/app/api/[[...slugs]]/_lib/landing_page/apbdes/findUnique.ts Normal file
View File

@@ -0,0 +1,29 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function apbdesFindUnique(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.aPBDes.findUnique({
where: { id },
include: {
image: true,
file: true,
},
});
if (!data) {
throw new Error("APB Des tidak ditemukan");
}
return {
success: true,
message: "Data APB Des ditemukan",
data,
};
}

41
src/app/api/[[...slugs]]/_lib/landing_page/apbdes/index.ts Normal file
View File

@@ -0,0 +1,41 @@
import Elysia, { t } from "elysia";
import apbdesCreate from "./create";
import apbdesDelete from "./del";
import apbdesFindMany from "./findMany";
import apbdesFindUnique from "./findUnique";
import apbdesUpdate from "./updt";
const APBDes = new Elysia({
prefix: "/apbdes",
tags: ["Landing Page/Profile/APB Des"],
})
// ✅ Find all
.get("/find-many", apbdesFindMany)
// ✅ Find by ID
.get("/:id", apbdesFindUnique)
// ✅ Create
.post("/create", apbdesCreate, {
body: t.Object({
name: t.String(),
imageId: t.String(),
fileId: t.String(),
jumlah: t.String(),
}),
})
// ✅ Update
.put("/:id", apbdesUpdate, {
body: t.Object({
name: t.String(),
imageId: t.Optional(t.String()),
fileId: t.Optional(t.String()),
jumlah: t.Optional(t.String()),
}),
})
// ✅ Delete
.delete("/del/:id", apbdesDelete);
export default APBDes;

51
src/app/api/[[...slugs]]/_lib/landing_page/apbdes/updt.ts Normal file
View File

@@ -0,0 +1,51 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
type FormUpdateAPBDes = {
name?: string;
imageId?: string;
fileId?: string;
jumlah?: string;
};
export default async function apbdesUpdate(context: Context) {
const body = context.body as FormUpdateAPBDes;
const id = context.params.id;
if (!id) {
return {
success: false,
message: "ID APB Des wajib diisi",
};
}
try {
const updated = await prisma.aPBDes.update({
where: { id },
data: {
name: body.name,
imageId: body.imageId,
fileId: body.fileId,
jumlah: body.jumlah,
},
include: {
image: true,
},
});
return {
success: true,
message: "APB Des berhasil diperbarui",
data: updated,
};
} catch (error: any) {
console.error("❌ Error update APB Des:", error);
return {
success: false,
message: "Gagal memperbarui data APB Des",
error: error.message,
};
}
}

4
src/app/api/[[...slugs]]/_lib/landing_page/index.ts
View File

@@ -4,6 +4,8 @@ import ProgramInovasi from "./profile/program-inovasi";
import PejabatDesa from "./profile/pejabat-desa"; import PejabatDesa from "./profile/pejabat-desa";
import KategoriDesaAntiKorupsi from "./desa-anti-korupsi/kategori-dak"; import KategoriDesaAntiKorupsi from "./desa-anti-korupsi/kategori-dak";
import DesaAntiKorupsi from "./desa-anti-korupsi"; import DesaAntiKorupsi from "./desa-anti-korupsi";
import SDGSDesa from "./sdgs-desa";
import APBDes from "./apbdes";
const LandingPage = new Elysia({ const LandingPage = new Elysia({
prefix: "/api/landingpage", prefix: "/api/landingpage",
@@ -15,5 +17,7 @@ const LandingPage = new Elysia({
.use(PejabatDesa) .use(PejabatDesa)
.use(KategoriDesaAntiKorupsi) .use(KategoriDesaAntiKorupsi)
.use(DesaAntiKorupsi) .use(DesaAntiKorupsi)
.use(SDGSDesa)
.use(APBDes)
export default LandingPage export default LandingPage

33
src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/create.ts Normal file
View File

@@ -0,0 +1,33 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
type FormCreate = {
name: string;
jumlah: string;
imageId: string;
};
export default async function sdgsDesaCreate(context: Context) {
const body = context.body as FormCreate;
try {
const result = await prisma.sDGSDesa.create({
data: {
name: body.name,
jumlah: body.jumlah,
imageId: body.imageId,
},
include: {
image: true,
},
});
return {
success: true,
message: "Berhasil membuat SDGS Desa",
data: result,
};
} catch (error) {
console.error("Error creating SDGS Desa:", error);
throw new Error("Gagal membuat SDGS Desa: " + (error as Error).message);
}
}

21
src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/del.ts Normal file
View File

@@ -0,0 +1,21 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function sdgsDesaDelete(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.sDGSDesa.delete({
where: { id },
});
return {
success: true,
message: "Berhasil menghapus SDGS Desa",
data: deleted,
};
}

43
src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/findMany.ts Normal file
View File

@@ -0,0 +1,43 @@
// /api/berita/findManyPaginated.ts
import prisma from "@/lib/prisma";
import { Context } from "elysia";
async function sdgsDesaFindMany(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.sDGSDesa.findMany({
where: { isActive: true },
include: {
image: true,
},
skip,
take: limit,
orderBy: { createdAt: "desc" }, // opsional, kalau mau urut berdasarkan waktu
}),
prisma.sDGSDesa.count({
where: { isActive: true },
}),
]);
return {
success: true,
message: "Success fetch SDGS 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 SDGS Desa with pagination",
};
}
}
export default sdgsDesaFindMany;

28
src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/findUnique.ts Normal file
View File

@@ -0,0 +1,28 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function sdgsDesaFindUnique(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.sDGSDesa.findUnique({
where: { id },
include: {
image: true,
},
});
if (!data) {
throw new Error("SDGS Desa tidak ditemukan");
}
return {
success: true,
message: "Data SDGS Desa ditemukan",
data,
};
}

39
src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/index.ts Normal file
View File

@@ -0,0 +1,39 @@
import Elysia, { t } from "elysia";
import sdgsDesaCreate from "./create";
import sdgsDesaDelete from "./del";
import sdgsDesaFindMany from "./findMany";
import sdgsDesaFindUnique from "./findUnique";
import sdgsDesaUpdate from "./updt";
const SDGSDesa = new Elysia({
prefix: "/sdgsdesa",
tags: ["Landing Page/Profile/SDGS Desa"],
})
// ✅ Find all
.get("/find-many", sdgsDesaFindMany)
// ✅ Find by ID
.get("/:id", sdgsDesaFindUnique)
// ✅ Create
.post("/create", sdgsDesaCreate, {
body: t.Object({
name: t.String(),
imageId: t.String(),
jumlah: t.String(),
}),
})
// ✅ Update
.put("/:id", sdgsDesaUpdate, {
body: t.Object({
name: t.String(),
imageId: t.Optional(t.String()),
jumlah: t.Optional(t.String()),
}),
})
// ✅ Delete
.delete("/del/:id", sdgsDesaDelete);
export default SDGSDesa;

49
src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/updt.ts Normal file
View File

@@ -0,0 +1,49 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
type FormUpdateSDGSDesa = {
name?: string;
imageId?: string;
jumlah?: string;
};
export default async function sdgsDesaUpdate(context: Context) {
const body = context.body as FormUpdateSDGSDesa;
const id = context.params.id;
if (!id) {
return {
success: false,
message: "ID SDGS Desa wajib diisi",
};
}
try {
const updated = await prisma.sDGSDesa.update({
where: { id },
data: {
name: body.name,
imageId: body.imageId,
jumlah: body.jumlah,
},
include: {
image: true,
},
});
return {
success: true,
message: "SDGS Desa berhasil diperbarui",
data: updated,
};
} catch (error: any) {
console.error("❌ Error update SDGS Desa:", error);
return {
success: false,
message: "Gagal memperbarui data SDGS Desa",
error: error.message,
};
}
}