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

UI & API Menu Landing Page, Submenu Desa Anti Korupsi

Browse Source
This commit is contained in:
nico
2025-07-23 17:12:33 +08:00
parent 1bc6dd8dbf
commit bdf751ec3d
34 changed files with 1965 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

485
src/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi.ts Normal file
View File

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

62
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/_lib/layouTabs.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: "List Desa Anti Korupsi",
value: "listDesaAntiKorupsi",
href: "/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi"
},
{
label: "Kategori Desa Anti Korupsi",
value: "kategoriDesaAntiKorupsi",
href: "/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi"
},
];
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}>Desa Anti Korupsi</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;

98
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/[id]/page.tsx Normal file
View File

@@ -0,0 +1,98 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
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 EditKategoriDesaAntiKorupsi() {
const router = useRouter();
const params = useParams();
const id = params?.id as string;
const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi);
const [formData, setFormData] = useState({
name: "",
});
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({
name: data.name || '',
});
}
} catch (error) {
console.error("Error loading kategori desa anti korupsi:", error);
toast.error("Gagal memuat data kategori desa anti korupsi");
}
};
loadKategorikegiatan();
}, [id]);
const handleSubmit = async () => {
try {
if (!formData.name.trim()) {
toast.error('Nama kategori desa anti korupsi tidak boleh kosong');
return;
}
stateKategori.edit.form = {
name: formData.name.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/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi");
}
} catch (error) {
console.error("Error updating kategori desa anti korupsi:", 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 Desa Anti Korupsi</Title>
<TextInput
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Desa Anti Korupsi</Text>}
placeholder='Masukkan nama kategori desa anti korupsi'
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default EditKategoriDesaAntiKorupsi;

61
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/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 korupsiState from '../../../../_state/landing-page/desa-anti-korupsi';
function CreateKategoriDesaAntiKorupsi() {
const router = useRouter();
const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi)
useEffect(() => {
stateKategori.findMany.load();
}, []);
const resetForm = () => {
stateKategori.create.form = {
name: "",
};
}
const handleSubmit = async () => {
await stateKategori.create.create();
resetForm();
router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi")
}
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 Desa Anti Korupsi</Title>
<TextInput
value={stateKategori.create.form.name}
onChange={(val) => {
stateKategori.create.form.name = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Desa Anti Korupsi</Text>}
placeholder='Masukkan nama kategori desa anti korupsi'
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
</Box>
);
}
export default CreateKategoriDesaAntiKorupsi;

112
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/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 korupsiState from '../../../_state/landing-page/desa-anti-korupsi';
function KategoriDesaAntiKorupsi() {
const [search, setSearch] = useState("")
return (
<Box>
<HeaderSearch
title='Kategori Desa Anti Korupsi'
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(korupsiState.kategoriDesaAntiKorupsi)
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.name.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/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/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.name}</TableTd>
<TableTd>
<Button color="green" onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/${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 KategoriDesaAntiKorupsi

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

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

229
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/edit/page.tsx Normal file
View File

@@ -0,0 +1,229 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import { useProxy } from 'valtio/utils';
import { Box, Button, Group, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
import { IconArrowBack, IconFile, IconUpload, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import colors from '@/con/colors';
import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
import ApiFetch from '@/lib/api-fetch';
import { Dropzone } from '@mantine/dropzone';
import { toast } from 'react-toastify';
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
interface FormDesaAntiKorupsi {
name: string;
deskripsi: string;
kategoriId: string;
fileId: string;
}
function EditDesaAntiKorupsi() {
const desaAntiKorupsiState = useProxy(korupsiState.desaAntikorupsi)
const [previewFile, setPreviewFile] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const params = useParams()
const router = useRouter()
const [formData, setFormData] = useState<FormDesaAntiKorupsi>({
name: '',
deskripsi: '',
kategoriId: '',
fileId: '',
})
useEffect(() => {
const loadDesaAntiKorupsi = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await desaAntiKorupsiState.edit.load(id);
if (data) {
// ⬇️ FIX PENTING: tambahkan ini
desaAntiKorupsiState.edit.id = id;
desaAntiKorupsiState.edit.form = {
name: data.name,
deskripsi: data.deskripsi,
kategoriId: data.kategoriId,
fileId: data.fileId,
};
setFormData({
name: data.name,
deskripsi: data.deskripsi,
kategoriId: data.kategoriId,
fileId: data.fileId,
});
if (data?.file?.link) {
setPreviewFile(data.file.link)
}
}
} catch (error) {
console.error("Error loading program penghijauan:", error);
toast.error("Gagal memuat data program penghijauan");
}
}
loadDesaAntiKorupsi();
}, [params?.id]);
const handleSubmit = async () => {
try {
// Update global state with form data
desaAntiKorupsiState.edit.form = {
...desaAntiKorupsiState.edit.form,
name: formData.name,
deskripsi: formData.deskripsi,
kategoriId: formData.kategoriId || '',
fileId: formData.fileId // 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");
}
// Update imageId in global state
desaAntiKorupsiState.edit.form.fileId = uploaded.id;
}
await desaAntiKorupsiState.edit.update();
toast.success("desa anti korupsi berhasil diperbarui!");
router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi");
} catch (error) {
console.error("Error updating desa anti korupsi:", error);
toast.error("Terjadi kesalahan saat memperbarui desa anti korupsi");
}
};
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"}>Edit List Desa Anti Korupsi</Text>
{desaAntiKorupsiState.findUnique.data ? (
<Paper key={desaAntiKorupsiState.findUnique.data.id}>
<Stack gap={"xs"}>
<TextInput
value={formData.name}
onChange={(val) => {
setFormData({
...formData,
name: val.target.value
})
}}
label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
placeholder='Masukkan judul'
/>
<Box>
<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
<EditEditor
value={formData.deskripsi}
onChange={(val) => {
setFormData({
...formData,
deskripsi: val
})
}}
/>
</Box>
<Select
value={formData.kategoriId}
onChange={(val) => {
setFormData({
...formData,
kategoriId: val ?? ""
})
}}
label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
placeholder="Pilih kategori"
data={
korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
value: v.id,
label: v.name,
})) || []
}
/>
<Box>
<Text fz={"md"} fw={"bold"}>File Document</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setFile(selectedFile);
setPreviewFile(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 document
</Text>
</div>
</Group>
</Dropzone>
<Box>
<Text fw={"bold"} fz={"lg"}>Dokumen</Text>
{previewFile ? (
<iframe
src={previewFile}
width="100%"
height="500px"
style={{ border: "1px solid #ccc", borderRadius: "8px" }}
/>
) : (
<Text>Tidak ada dokumen tersedia</Text>
)}
</Box>
</Box>
</Box>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
) : null}
</Stack>
</Paper>
</Box>
);
}
export default EditDesaAntiKorupsi;

122
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/page.tsx Normal file
View File

@@ -0,0 +1,122 @@
'use client'
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
import colors from '@/con/colors';
import { Box, Button, Flex, 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 { useProxy } from 'valtio/utils';
function DetailKegiatanDesa() {
const detailState = useProxy(korupsiState.desaAntikorupsi)
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const params = useParams()
const router = useRouter()
useShallowEffect(() => {
detailState.findUnique.load(params?.id as string)
}, [])
const handleHapus = () => {
if (selectedId) {
detailState.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi")
}
}
if (!detailState.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 List Desa Anti Korupsi</Text>
{detailState.findUnique.data ? (
<Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fw={"bold"} fz={"lg"}>Judul</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.name}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
<Text fz={"lg"} dangerouslySetInnerHTML={{ __html: detailState.findUnique.data?.deskripsi }} />
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Kategori</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.kategori?.name}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Dokumen</Text>
{detailState.findUnique.data?.file?.link ? (
<iframe
src={detailState.findUnique.data.file.link}
width="100%"
height="500px"
style={{ border: "1px solid #ccc", borderRadius: "8px" }}
/>
) : (
<Text>Tidak ada dokumen tersedia</Text>
)}
</Box>
<Flex gap={"xs"} mt={10}>
<Button
onClick={() => {
if (detailState.findUnique.data) {
setSelectedId(detailState.findUnique.data.id);
setModalHapus(true);
}
}}
disabled={detailState.delete.loading || !detailState.findUnique.data}
color={"red"}
>
<IconX size={20} />
</Button>
<Button
onClick={() => {
if (detailState.findUnique.data) {
router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${detailState.findUnique.data.id}/edit`);
}
}}
disabled={!detailState.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 desa anti korupsi ini?'
/>
</Box>
);
}
export default DetailKegiatanDesa;

166
src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create/page.tsx Normal file
View File

@@ -0,0 +1,166 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconFile, 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 CreateDesaAntiKorupsi() {
const router = useRouter();
const stateKorupsi = useProxy(korupsiState.desaAntikorupsi)
const [previewFile, setPreviewFile] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
useEffect(() => {
stateKorupsi.findMany.load();
korupsiState.kategoriDesaAntiKorupsi.findMany.load();
}, []);
const resetForm = () => {
stateKorupsi.create.form = {
name: "",
deskripsi: "",
kategoriId: "",
fileId: "",
};
setFile(null);
setPreviewFile(null);
};
const handleSubmit = async () => {
if (!file) {
return toast.warn("Pilih file pdf 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");
}
stateKorupsi.create.form.fileId = uploaded.id;
await stateKorupsi.create.create();
resetForm();
router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi")
}
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"}>File Document</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setFile(selectedFile);
setPreviewFile(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 document
</Text>
</div>
</Group>
</Dropzone>
<Box>
<Text fw={"bold"} fz={"lg"}>Dokumen</Text>
{previewFile ? (
<iframe
src={previewFile}
width="100%"
height="500px"
style={{ border: "1px solid #ccc", borderRadius: "8px" }}
/>
) : (
<Text>Tidak ada dokumen tersedia</Text>
)}
</Box>
</Box>
</Box>
<TextInput
value={stateKorupsi.create.form.name}
onChange={(val) => {
stateKorupsi.create.form.name = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
placeholder='Masukkan judul'
/>
<Box>
<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
<CreateEditor
value={stateKorupsi.create.form.deskripsi}
onChange={(val) => {
stateKorupsi.create.form.deskripsi = val;
}}
/>
</Box>
<Select
value={stateKorupsi.create.form.kategoriId}
onChange={(val) => {
stateKorupsi.create.form.kategoriId = val ?? "";
}}
label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
placeholder="Pilih kategori"
data={
korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
value: v.id,
label: v.name,
})) || []
}
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateDesaAntiKorupsi;

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

@@ -0,0 +1,99 @@
/* 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 JudulList from '../../../_com/judulList';
import korupsiState from '../../../_state/landing-page/desa-anti-korupsi';
function DesaAntiKorupsi() {
const [search, setSearch] = useState('');
return (
<Box>
<HeaderSearch
title='List Desa Anti Korupsi'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListDesaAntiKorupsi search={search} />
</Box>
);
}
function ListDesaAntiKorupsi({ search }: { search: string }) {
const listState = useProxy(korupsiState.desaAntikorupsi)
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.deskripsi.toLowerCase().includes(keyword) ||
item.kategori?.name?.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 Desa Anti Korupsi'
href='/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>Nama Desa Anti Korupsi</TableTh>
<TableTh>Deskripsi Desa Anti Korupsi</TableTh>
<TableTh>Kategori Desa Anti Korupsi</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"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
</TableTd>
<TableTd>{item.kategori?.name}</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
</Box>
)
}
export default DesaAntiKorupsi;

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

@@ -1,11 +0,0 @@
import React from 'react';
function Page() {
return (
<div>
Desa Anti Korupsi
</div>
);
}
export default Page;

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

@@ -50,7 +50,7 @@ function DetailKegiatanDesa() {
</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>
<Text fz={"xl"} fw={"bold"}>Detail Kegiatan Desa Inovasi</Text>
{kegiatanDesaState.findUnique.data ? (
<Paper key={kegiatanDesaState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>

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

@@ -12,7 +12,7 @@ export const navBar = [
{
id: "Landing_Page_2",
name: "Desa Anti Korupsi",
path: "/admin/landing-page/desa-anti-korupsi"
path: "/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi"
},
{
id: "Landing_Page_3",

37
src/app/admin/layout.tsx
View File

@@ -7,7 +7,9 @@ import {
AppShellHeader,
AppShellMain,
AppShellNavbar,
Box,
Burger,
Flex,
Group,
Image,
NavLink,
@@ -15,16 +17,16 @@ import {
Text
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
import { IconChevronLeft, IconChevronRight, IconDoorExit } from "@tabler/icons-react";
import _ from 'lodash';
import Link from "next/link";
import { useSelectedLayoutSegments } from "next/navigation";
import { useRouter, useSelectedLayoutSegments } from "next/navigation";
import { navBar } from "./_com/list_PageAdmin";
export default function Layout({ children }: { children: React.ReactNode }) {
const [opened, { toggle }] = useDisclosure();
const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
const router = useRouter()
// Normalisasi semua segmen jadi lowercase
const segments = useSelectedLayoutSegments().map(s => _.lowerCase(s));
@@ -44,6 +46,18 @@ export default function Layout({ children }: { children: React.ReactNode }) {
>
<AppShellHeader bg={colors["white-1"]}>
<Group px={10} align="center">
<Flex align="center" gap={'xs'}>
<Image
py={5}
src={'/assets/images/darmasaba-icon.png'}
alt=""
width={50}
height={50}
/>
<Text fw={'bold'} c={colors["blue-button"]} fz={'lg'}>
Dashboard Admin
</Text>
</Flex>
{!desktopOpened && (
<ActionIcon variant="light" onClick={toggleDesktop}>
<IconChevronRight />
@@ -55,6 +69,13 @@ export default function Layout({ children }: { children: React.ReactNode }) {
hiddenFrom="sm"
size={'sm'}
/>
<Box>
<ActionIcon onClick={() => {
router.push("/darmasaba")
}} color={colors["blue-button"]} radius={'xl'}>
<IconDoorExit size={24} />
</ActionIcon>
</Box>
<ActionIcon
w={50}
h={50}
@@ -62,17 +83,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
component={Link}
href="/admin"
>
<Image
py={5}
src={'/assets/images/darmasaba-icon.png'}
alt=""
width={50}
height={50}
/>
</ActionIcon>
<Text fw={'bold'} c={colors["blue-button"]} fz={'lg'}>
Dashboard Admin
</Text>
</Group>
</AppShellHeader>