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

API & UI Menu Lingkungan, Submenu Data Lingkungan Desa

Browse Source
This commit is contained in:
nico
2025-07-18 17:11:13 +08:00
parent cd343badb2
commit 41f54772e9
17 changed files with 974 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
prisma/schema.prisma
View File

@@ -1484,3 +1484,16 @@ model ProgramPenghijauan {
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}
// ========================================= DATA LINGKUNGAN DESA ========================================= //
model DataLingkunganDesa {
id String @id @default(cuid())
name String
jumlah String
deskripsi String @db.Text //deskripsi panjang
icon String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}

6
src/app/admin/(dashboard)/_com/selectIcon.tsx
View File

@@ -6,6 +6,8 @@ import {
IconChartLine,
IconChristmasTreeFilled,
IconClipboardTextFilled,
IconDroplet,
IconHome,
IconHomeEco,
IconLeaf,
IconRecycle,
@@ -13,6 +15,7 @@ import {
IconShieldFilled,
IconTent,
IconTrashFilled,
IconTree,
IconTrendingUp,
IconTrophy,
IconTruckFilled,
@@ -33,6 +36,9 @@ const iconMap = {
sumberOksigen: {label: 'Sumber Oksigen', icon: IconChristmasTreeFilled},
ekonomiBerkelanjutan: {label: 'Ekonomi Berkelanjutan', icon: IconTrendingUp},
mencegahBencana: {label: 'Mencegah Bencana', icon: IconShieldFilled},
rumah: {label: 'Rumah', icon: IconHome},
pohon: {label: 'Pohon', icon: IconTree},
air: {label: 'Air', icon: IconDroplet}
};

6
src/app/admin/(dashboard)/_com/selectIconEdit.tsx
View File

@@ -5,6 +5,8 @@ import {
IconChartLine,
IconChristmasTreeFilled,
IconClipboardTextFilled,
IconDroplet,
IconHome,
IconHomeEco,
IconLeaf,
IconRecycle,
@@ -12,6 +14,7 @@ import {
IconShieldFilled,
IconTent,
IconTrashFilled,
IconTree,
IconTrendingUp,
IconTrophy,
IconTruckFilled,
@@ -31,6 +34,9 @@ const iconMap = {
sumberOksigen: {label: 'Sumber Oksigen', icon: IconChristmasTreeFilled},
ekonomiBerkelanjutan: {label: 'Ekonomi Berkelanjutan', icon: IconTrendingUp},
mencegahBencana: {label: 'Mencegah Bencana', icon: IconShieldFilled},
rumah: {label: 'Rumah', icon: IconHome},
pohon: {label: 'Pohon', icon: IconTree},
air: {label: 'Air', icon: IconDroplet}
};
type IconKey = keyof typeof iconMap;

227
src/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa.ts Normal file
View File

@@ -0,0 +1,227 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
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 templateForm = z.object({
name: z.string().min(1, "Nama minimal 1 karakter"),
deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
jumlah: z.string().min(1, "Jumlah minimal 1 karakter"),
icon: z.string().min(1, "Icon minimal 1 karakter"),
});
const defaultForm = {
name: "",
deskripsi: "",
jumlah: "",
icon: "",
};
const dataLingkunganDesaState = proxy({
create: {
form: { ...defaultForm },
loading: false,
async create() {
const cek = templateForm.safeParse(dataLingkunganDesaState.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
dataLingkunganDesaState.create.loading = true;
const res = await ApiFetch.api.lingkungan.datalingkungandesa["create"].post(
dataLingkunganDesaState.create.form
);
if (res.status === 200) {
dataLingkunganDesaState.findMany.load();
return toast.success("success create");
}
console.log(res);
return toast.error("failed create");
} catch (error) {
console.log((error as Error).message);
} finally {
dataLingkunganDesaState.create.loading = false;
}
},
},
findMany: {
data: null as any[] | null,
page: 1,
totalPages: 1,
total: 0,
loading: false,
load: async (page = 1, limit = 10) => {
// Change to arrow function
dataLingkunganDesaState.findMany.loading = true; // Use the full path to access the property
dataLingkunganDesaState.findMany.page = page;
try {
const res = await ApiFetch.api.lingkungan.datalingkungandesa["find-many"].get({
query: { page, limit },
});
if (res.status === 200 && res.data?.success) {
dataLingkunganDesaState.findMany.data = res.data.data || [];
dataLingkunganDesaState.findMany.total = res.data.total || 0;
dataLingkunganDesaState.findMany.totalPages = res.data.totalPages || 1;
} else {
console.error(
"Failed to load berdasarkan data lingkungan desa :",
res.data?.message
);
dataLingkunganDesaState.findMany.data = [];
dataLingkunganDesaState.findMany.total = 0;
dataLingkunganDesaState.findMany.totalPages = 1;
}
} catch (error) {
console.error("Error loading berdasarkan data lingkungan desa :", error);
dataLingkunganDesaState.findMany.data = [];
dataLingkunganDesaState.findMany.total = 0;
dataLingkunganDesaState.findMany.totalPages = 1;
} finally {
dataLingkunganDesaState.findMany.loading = false;
}
},
},
update: {
id: "",
form: { ...defaultForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
const response = await fetch(`/api/lingkungan/datalingkungandesa/${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,
jumlah: data.jumlah,
icon: data.icon,
};
return data;
} else {
throw new Error(result?.message || "Gagal mengambil data");
}
} catch (error) {
console.error("Error loading data lingkungan desa :", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
}
},
async submit() {
const id = this.id;
if (!id) {
toast.warn("ID tidak valid");
return null;
}
const cek = templateForm.safeParse(this.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
toast.error(err);
return null;
}
this.loading = true;
try {
const response = await fetch(`/api/lingkungan/datalingkungandesa/${id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
});
const result = await response.json();
if (!response.ok || !result?.success) {
throw new Error(result?.message || "Gagal update data");
}
toast.success("Berhasil update data!");
await dataLingkunganDesaState.findMany.load();
return result.data;
} catch (error) {
console.error("Error update data:", error);
toast.error("Gagal update data data lingkungan desa");
} finally {
this.loading = false;
}
},
},
findUnique: {
data: null as Prisma.DataLingkunganDesaGetPayload<{
omit: { isActive: true };
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/lingkungan/datalingkungandesa/${id}`);
if (res.ok) {
const data = await res.json();
dataLingkunganDesaState.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
dataLingkunganDesaState.findUnique.data = null;
}
} catch (error) {
console.error("Error loading data lingkungan desa:", error);
dataLingkunganDesaState.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
dataLingkunganDesaState.delete.loading = true;
const response = await fetch(`/api/lingkungan/datalingkungandesa/del/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
const result = await response.json();
if (response.ok && result?.success) {
toast.success(result.message || "Data lingkungan desa berhasil dihapus");
await dataLingkunganDesaState.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus data lingkungan desa");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus data lingkungan desa");
} finally {
dataLingkunganDesaState.delete.loading = false;
}
},
},
});
export default dataLingkunganDesaState;

162
src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/edit/page.tsx Normal file
View File

@@ -0,0 +1,162 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import dataLingkunganDesaState from '@/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa';
import colors from '@/con/colors';
import { Box, Button, 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';
import SelectIconProgramEdit from '../../../../_com/selectIconEdit';
interface FormDataLingkunganDesa {
name: string;
deskripsi: string;
jumlah: string;
icon: string;
}
type IconKey =
'ekowisata' |
'kompetisi' |
'wisata' |
'ekonomi' |
'sampah' |
'truck' |
'scale' |
'clipboard' |
'trash' |
'lingkunganSehat' |
'sumberOksigen' |
'ekonomiBerkelanjutan' |
'mencegahBencana' |
'rumah' |
'pohon' |
'air';
function EditDataLingkunganDesa() {
const stateDataLingkunganDesa = useProxy(dataLingkunganDesaState)
const params = useParams()
const router = useRouter();
const [formData, setFormData] = useState<FormDataLingkunganDesa>({
name: '',
deskripsi: '',
jumlah: '',
icon: '',
})
useEffect(() => {
const loadProgramKreatif = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await stateDataLingkunganDesa.update.load(id);
if (data) {
// ⬇️ FIX PENTING: tambahkan ini
stateDataLingkunganDesa.update.id = id;
stateDataLingkunganDesa.update.form = {
name: data.name,
deskripsi: data.deskripsi,
jumlah: data.jumlah,
icon: data.icon,
};
setFormData({
name: data.name,
deskripsi: data.deskripsi,
jumlah: data.jumlah,
icon: data.icon,
});
}
} catch (error) {
console.error("Error loading data lingkungan desa:", error);
toast.error("Gagal memuat data data lingkungan desa");
}
}
loadProgramKreatif();
}, [params?.id]);
const handleSubmit = async () => {
try {
stateDataLingkunganDesa.update.form = {
...stateDataLingkunganDesa.update.form,
name: formData.name.trim(),
deskripsi: formData.deskripsi.trim(),
jumlah: formData.jumlah.trim(),
icon: formData.icon.trim(),
}
await stateDataLingkunganDesa.update.submit();
router.push("/admin/lingkungan/data-lingkungan-desa");
} catch (error) {
console.error("Error updating data lingkungan desa:", error);
toast.error("Gagal memuat data data lingkungan 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={3}>Edit Data Lingkungan Desa</Title>
<TextInput
value={formData.name}
label={<Text fz={"sm"} fw={"bold"}>Nama Data Lingkungan Desa</Text>}
placeholder="masukkan nama data lingkungan desa"
onChange={(val) => {
setFormData({
...formData,
name: val.target.value
})
}}
/>
<TextInput
value={formData.jumlah}
label={<Text fz={"sm"} fw={"bold"}>Jumlah Data Lingkungan Desa</Text>}
placeholder="masukkan jumlah data lingkungan desa"
onChange={(val) => {
setFormData({
...formData,
jumlah: val.target.value
})
}}
/>
<Box>
<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
<EditEditor
value={formData.deskripsi}
onChange={(htmlContent) => {
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
stateDataLingkunganDesa.update.form.deskripsi = htmlContent;
}}
/>
</Box>
<Box>
<Text fz={"sm"} fw={"bold"}>Ikon Data Lingkungan Desa</Text>
<SelectIconProgramEdit
value={formData.icon as IconKey}
onChange={(value) => {
setFormData((prev) => ({ ...prev, icon: value }));
stateDataLingkunganDesa.update.form.icon = value;
}} />
</Box>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
</Stack>
</Paper>
</Box>
);
}
export default EditDataLingkunganDesa;

138
src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/[id]/page.tsx Normal file
View File

@@ -0,0 +1,138 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import colors from '@/con/colors';
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconChartLine, IconChristmasTreeFilled, IconClipboard, IconDroplet, IconEdit, IconHome, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconShieldFilled, IconTent, IconTrash, IconTree, IconTrendingUp, IconTrophy, IconTruck, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { useProxy } from 'valtio/utils';
import dataLingkunganDesaState from '../../../_state/lingkungan/data-lingkungan-desa';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
function DetailDataLingkunganDesa() {
const [modalHapus, setModalHapus] = useState(false)
const stateDataLingkungan = useProxy(dataLingkunganDesaState)
const router = useRouter()
const params = useParams()
const [selectedId, setSelectedId] = useState<string | null>(null)
const iconMap: Record<string, React.FC<any>> = {
ekowisata: IconLeaf,
kompetisi: IconTrophy,
wisata: IconTent,
ekonomi: IconChartLine,
sampah: IconRecycle,
truck: IconTruck,
scale: IconScale,
clipboard: IconClipboard,
trash: IconTrash,
lingkunganSehat: IconHomeEco,
sumberOksigen: IconChristmasTreeFilled,
ekonomiBerkelanjutan: IconTrendingUp,
mencegahBencana: IconShieldFilled,
rumah: IconHome,
pohon: IconTree,
air: IconDroplet
};
useShallowEffect(() => {
stateDataLingkungan.findUnique.load(params?.id as string)
}, [params?.id])
const handleHapus = () => {
if (selectedId) {
stateDataLingkungan.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/lingkungan/data-lingkungan-desa")
}
}
if (!stateDataLingkungan.findUnique.data) {
return (
<Stack>
<Skeleton h={500} />
</Stack>
)
}
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
<Stack>
<Text fz={"xl"} fw={"bold"}>Detail Data Lingkungan Desa</Text>
<Paper bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fz={"lg"} fw={"bold"}>Nama Data Lingkungan Desa</Text>
<Text fz={"lg"}>{stateDataLingkungan.findUnique.data?.name}</Text>
</Box>
<Box>
<Text fz={"lg"} fw={"bold"}>Jumlah Data Lingkungan Desa</Text>
<Text fz={"lg"}>{stateDataLingkungan.findUnique.data?.jumlah}</Text>
</Box>
<Box>
<Text fz={"lg"} fw={"bold"}>Ikon Data Lingkungan Desa</Text>
{iconMap[stateDataLingkungan.findUnique.data?.icon] && (
<Box title={stateDataLingkungan.findUnique.data?.icon}>
{React.createElement(iconMap[stateDataLingkungan.findUnique.data?.icon], { size: 24 })}
</Box>
)}
</Box>
<Box>
<Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
<Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateDataLingkungan.findUnique.data?.deskripsi }}></Text>
</Box>
<Box>
<Flex gap={"xs"} mt={10}>
<Button
onClick={() => {
if (stateDataLingkungan.findUnique.data) {
setSelectedId(stateDataLingkungan.findUnique.data.id);
setModalHapus(true);
}
}}
disabled={stateDataLingkungan.delete.loading || !stateDataLingkungan.findUnique.data}
color={"red"}
>
<IconX size={20} />
</Button>
<Button
onClick={() => {
if (stateDataLingkungan.findUnique.data) {
router.push(`/admin/lingkungan/data-lingkungan-desa/${stateDataLingkungan.findUnique.data.id}/edit`);
}
}}
disabled={!stateDataLingkungan.findUnique.data}
color={"green"}
>
<IconEdit size={20} />
</Button>
</Flex>
</Box>
</Stack>
</Paper>
</Stack>
</Paper>
{/* Modal Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text="Apakah anda yakin ingin menghapus data lingkungan desa ini?"
/>
</Box>
);
}
export default DetailDataLingkunganDesa;

89
src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx
View File

@@ -1,69 +1,68 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import React from 'react';
import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
import { useProxy } from 'valtio/utils';
import CreateEditor from '../../../_com/createEditor';
import SelectIconProgram from '../../../_com/selectIcon';
import dataLingkunganDesaState from '../../../_state/lingkungan/data-lingkungan-desa';
function CreateDataLingkunganDesa() {
const router = useRouter()
const stateCreate = useProxy(dataLingkunganDesaState)
const router = useRouter();
const resetForm = () => {
stateCreate.create.form = {
name: "",
deskripsi: "",
jumlah: "",
icon: "",
}
}
const handleSubmit = async () => {
await stateCreate.create.create();
resetForm();
router.push("/admin/lingkungan/data-lingkungan-desa")
}
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
<Stack gap="xs">
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Stack gap={"xs"}>
<Title order={3}>Create Data Lingkungan Desa</Title>
<TextInput
label={<Text fz="sm" fw="bold">Nama Data Lingkungan Desa</Text>}
label={<Text fz={"sm"} fw={"bold"}>Nama Data Lingkungan Desa</Text>}
placeholder="masukkan nama data lingkungan desa"
/>
<TextInput
label={<Text fz="sm" fw="bold">Jumlah</Text>}
placeholder="masukkan jumlah"
/>
<TextInput
label={<Text fz="sm" fw="bold">Deskripsi</Text>}
placeholder="masukkan deskripsi"
onChange={(val) => stateCreate.create.form.name = val.target.value}
/>
<Box>
<Text fz="sm" fw="bold">Gambar</Text>
<IconImageInPicture size={25} />
<Text fz={"sm"} fw={"bold"}>Ikon Data Lingkungan Desa</Text>
<SelectIconProgram onChange={(value) => stateCreate.create.form.icon = value} />
</Box>
{/* <FileInput
label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
value={file}
onChange={async (e) => {
if (!e) return;
setFile(e);
const base64 = await e.arrayBuffer().then((buf) =>
'data:image/png;base64,' + Buffer.from(buf).toString('base64')
);
setPreviewImage(base64);
}}
/> */}
{/* {previewImage ? (
<Image alt="" src={previewImage} w={200} h={200} />
) : (
<Center w={200} h={200} bg="gray">
<IconImageInPicture />
</Center>
)} */}
<TextInput
type='number'
onChange={(e) => stateCreate.create.form.jumlah = e.currentTarget.value}
label={<Text fw={"bold"} fz={"sm"}>Jmlah data lingkungan desa</Text>}
placeholder='Masukkan jumlah data lingkungan desa'
/>
<Box>
<Text fw={"bold"} fz={"sm"}>Deskripsi Data Lingkungan Desa</Text>
<KeamananEditor
showSubmit={false}
<Text fw={"bold"} fz={"sm"}>Deskripsi data lingkungan desa</Text>
<CreateEditor
value={stateCreate.create.form.deskripsi}
onChange={(htmlContent) => stateCreate.create.form.deskripsi = htmlContent}
/>
</Box>
<Button bg={colors['blue-button']} >
Simpan Data
</Button>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>

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

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

73
src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/edit/page.tsx
View File

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

153
src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
View File

@@ -1,69 +1,168 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import React from 'react';
import HeaderSearch from '../../_com/header';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import colors from '@/con/colors';
import JudulList from '../../_com/judulList';
import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import {
IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconDeviceImac, IconDroplet, IconHome, IconHomeEco, IconLeaf,
IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent,
IconTrashFilled,
IconTree,
IconTrendingUp,
IconTrophy,
IconTruckFilled
} from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../_com/header';
import JudulList from '../../_com/judulList';
import dataLingkunganDesaState from '../../_state/lingkungan/data-lingkungan-desa';
function DataLingkunganDesa() {
const [search, setSearch] = useState("");
return (
<Box>
<HeaderSearch
title='Data Lingkungan Desa'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListDataLingkunganDesa/>
<ListDataLingkunganDesa search={search} />
</Box>
);
}
function ListDataLingkunganDesa() {
function ListDataLingkunganDesa({ search }: { search: string }) {
const listState = useProxy(dataLingkunganDesaState)
const { data, loading, page, totalPages, load } = listState.findMany
const router = useRouter();
useEffect(() => {
load(page, 10)
}, [page])
const filteredData = (data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.name.toLowerCase().includes(keyword) ||
item.deskripsi.toLowerCase().includes(keyword) ||
item.jumlah.toLowerCase().includes(keyword) ||
item.icon.toLowerCase().includes(keyword)
);
});
const iconMap: Record<string, React.FC<any>> = {
ekowisata: IconLeaf,
kompetisi: IconTrophy,
wisata: IconTent,
ekonomi: IconChartLine,
sampah: IconRecycle,
truck: IconTruckFilled,
scale: IconScale,
clipboard: IconClipboardTextFilled,
trash: IconTrashFilled,
lingkunganSehat: IconHomeEco,
sumberOksigen: IconChristmasTreeFilled,
ekonomiBerkelanjutan: IconTrendingUp,
mencegahBencana: IconShieldFilled,
rumah: IconHome,
pohon: IconTree,
air: IconDroplet
};
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton height={650} />
</Stack>
);
}
if (data.length === 0) {
return (
<Box py={10}>
<Paper bg={colors['white-1']} p="md">
<Paper p="md" >
<Stack>
<JudulList
title='List Data Lingkungan Desa'
href='/admin/lingkungan/data-lingkungan-desa/create'
/>
<Box style={{overflowX: 'auto'}}>
<Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>
<TableTh>Nama Data Lingkungan</TableTh>
<TableTh>Gambar</TableTh>
<TableTh>Deskripsi</TableTh>
<TableTh>No</TableTh>
<TableTh>Nama Data Lingkungan Desa</TableTh>
<TableTh>Jumlah Data Lingkungan Desa</TableTh>
<TableTh>Ikon</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
</Table>
<Text ta="center">Tidak ada data lingkungan desa yang tersedia</Text>
</Stack>
</Paper>
</Box >
);
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'} h={{ base: 'auto', md: 650 }}>
<JudulList
title='List Data Lingkungan Desa'
href='/admin/lingkungan/data-lingkungan-desa/create'
/>
<Box style={{ overflowY: 'auto' }}>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>
<TableTd>
<Box w={100}>
<Text truncate="end" fz={"sm"}>Lingkungan Desa</Text>
<TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
<TableTh style={{ width: '20%' }}>Nama Data Lingkungan Desa</TableTh>
<TableTh style={{ width: '35%' }}>Jumlah Data Lingkungan Desa</TableTh>
<TableTh style={{ width: '10%' }}>Ikon</TableTh>
<TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item, index) => (
<TableTr key={item.id}>
<TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
<TableTd style={{ width: '20%', wordWrap: 'break-word' }}>{item.name}</TableTd>
<TableTd style={{ width: '35%', wordWrap: 'break-word' }}>± {item.jumlah}</TableTd>
<TableTd style={{ width: '10%' }}>
{iconMap[item.icon] && (
<Box title={item.icon}>
{React.createElement(iconMap[item.icon], { size: 24 })}
</Box>
)}
</TableTd>
<TableTd>
<Image w={100} src={"/"} alt="image" />
</TableTd>
<TableTd>Deskripsi</TableTd>
<TableTd>
<Button onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/detail')}>
<IconDeviceImacCog size={25} />
<TableTd style={{ width: '15%', textAlign: 'center' }}>
<Button onClick={() => router.push(`/admin/lingkungan/data-lingkungan-desa/${item.id}`)}>
<IconDeviceImac size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
<Center>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10);
window.scrollTo(0, 0);
}}
total={totalPages}
mt="md"
mb="md"
/>
</Center>
</Box>
)
);
}
export default DataLingkunganDesa;

29
src/app/api/[[...slugs]]/_lib/lingkungan/data-lingkungan-desa/create.ts Normal file
View File

@@ -0,0 +1,29 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
type FormCreateDataLingkunganDesa = {
name: string;
jumlah: string;
deskripsi: string;
icon: string;
}
export default async function dataLingkunganDesaCreate(context: Context){
const body = context.body as FormCreateDataLingkunganDesa;
await prisma.dataLingkunganDesa.create({
data: {
name: body.name,
jumlah: body.jumlah,
deskripsi: body.deskripsi,
icon: body.icon,
}
})
return {
success: true,
message: "Success create data lingkungan desa",
data: {
...body,
}
}
}

33
src/app/api/[[...slugs]]/_lib/lingkungan/data-lingkungan-desa/del.ts Normal file
View File

@@ -0,0 +1,33 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function dataLingkunganDesaDelete(context: Context) {
const { id } = context.params as { id: string };
if (!id) {
return {
success: false,
message: "ID data lingkungan desa tidak ditemukan",
};
}
try {
const deleted = await prisma.dataLingkunganDesa.delete({
where: { id },
});
return {
success: true,
message: "Data lingkungan desa berhasil dihapus",
data: deleted,
};
} catch (error: any) {
console.error("Error delete data lingkungan desa:", error);
return {
success: false,
message: "Terjadi kesalahan saat menghapus data lingkungan desa",
error: error.message,
};
}
}

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

@@ -0,0 +1,44 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
// Di findMany.ts
export default async function dataLingkunganDesaFindMany(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.dataLingkunganDesa.findMany({
where: { isActive: true },
skip,
take: limit,
orderBy: { createdAt: 'desc' },
}),
prisma.dataLingkunganDesa.count({
where: { isActive: true }
})
]);
const totalPages = Math.ceil(total / limit);
return {
success: true,
message: "Success fetch data lingkungan desa with pagination",
data,
page,
totalPages,
total,
};
} catch (e) {
console.error("Find many paginated error:", e);
return {
success: false,
message: "Failed fetch data lingkungan desa with pagination",
data: [],
page: 1,
totalPages: 1,
total: 0,
};
}
}

39
src/app/api/[[...slugs]]/_lib/lingkungan/data-lingkungan-desa/findUnique.ts Normal file
View File

@@ -0,0 +1,39 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
export default async function dataLingkunganDesaFindUnique(context: Context) {
const { id } = context.params as { id: string };
if (!id) {
return {
success: false,
message: "ID data lingkungan desa diperlukan",
};
}
try {
const dataLingkunganDesa = await prisma.dataLingkunganDesa.findUnique({
where: { id },
});
if (!dataLingkunganDesa) {
return {
success: false,
message: "Data lingkungan desa tidak ditemukan",
};
}
return {
success: true,
data: dataLingkunganDesa,
};
} catch (error: any) {
console.error("Error findUnique data lingkungan desa:", error);
return {
success: false,
message: "Gagal mengambil data data lingkungan desa",
error: error.message,
};
}
}

41
src/app/api/[[...slugs]]/_lib/lingkungan/data-lingkungan-desa/index.ts Normal file
View File

@@ -0,0 +1,41 @@
import Elysia, { t } from "elysia";
import dataLingkunganDesaFindMany from "./findMany";
import dataLingkunganDesaFindUnique from "./findUnique";
import dataLingkunganDesaCreate from "./create";
import dataLingkunganDesaUpdate from "./updt";
import dataLingkunganDesaDelete from "./del";
const DataLingkunganDesa = new Elysia({
prefix: "/datalingkungandesa",
tags: ["Lingkungan/Data Lingkungan Desa"],
})
.get("/find-many", dataLingkunganDesaFindMany)
.get("/:id", async (context) => {
const response = await dataLingkunganDesaFindUnique(context);
return response;
})
.post("/create", dataLingkunganDesaCreate, {
body: t.Object({
name: t.String(),
jumlah: t.String(),
deskripsi: t.String(),
icon: t.String(),
}),
})
.put(
"/:id",
async (context) => {
const response = await dataLingkunganDesaUpdate(context);
return response;
},
{
body: t.Object({
name: t.String(),
jumlah: t.String(),
deskripsi: t.String(),
icon: t.String(),
}),
}
)
.delete("/del/:id", dataLingkunganDesaDelete);
export default DataLingkunganDesa;

48
src/app/api/[[...slugs]]/_lib/lingkungan/data-lingkungan-desa/updt.ts Normal file
View File

@@ -0,0 +1,48 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import prisma from "@/lib/prisma";
import { Context } from "elysia";
type FormUpdateDataLingkunganDesa = {
id: string;
name?: string;
jumlah?: string;
deskripsi?: string;
icon?: string;
};
export default async function dataLingkunganDesaUpdate(context: Context) {
const body = context.body as FormUpdateDataLingkunganDesa;
const id = context.params?.id; // ambil dari URL param
if (!id) {
return {
success: false,
message: "ID data lingkungan desa wajib diisi",
};
}
try {
const updated = await prisma.dataLingkunganDesa.update({
where: { id },
data: {
name: body.name,
jumlah: body.jumlah,
deskripsi: body.deskripsi,
icon: body.icon,
},
});
return {
success: true,
message: "Data lingkungan desa berhasil diupdate",
data: updated,
};
} catch (error: any) {
console.error("Error update data lingkungan desa:", error);
return {
success: false,
message: "Gagal mengupdate data lingkungan desa",
error: error.message,
};
}
}

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

@@ -1,6 +1,7 @@
import Elysia from "elysia";
import PengelolaanSampah from "./pengelolaan-sampah";
import ProgramPenghijauan from "./program-penghijauan";
import DataLingkunganDesa from "./data-lingkungan-desa";
const Lingkungan = new Elysia({
prefix: "/api/lingkungan",
@@ -9,5 +10,6 @@ const Lingkungan = new Elysia({
.use(PengelolaanSampah)
.use(ProgramPenghijauan)
.use(DataLingkunganDesa)
export default Lingkungan;