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

Sinkronisasi UI & API Admin - User Submenu Profile, Menu Desa

Browse Source
This commit is contained in:
nico
2025-08-13 14:53:48 +08:00
parent 0777b00a7d
commit b8a45bc451
23 changed files with 1348 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
prisma/schema.prisma
View File

@@ -99,6 +99,7 @@ model FileStorage {
PrestasiDesa PrestasiDesa[]
DataPerpustakaan DataPerpustakaan[]
PegawaiPPID PegawaiPPID[]
PerbekelDariMasaKeMasa PerbekelDariMasaKeMasa[]
}
//========================================= MENU LANDING PAGE ========================================= //
@@ -220,48 +221,48 @@ model KategoriPrestasiDesa {
//========================================= INDEKS KEPUASAAN MASYARAKAT ========================================= //
model Responden {
id String @id @default(cuid())
name String @unique
tanggal DateTime // misal: 2025-05-01
jenisKelamin JenisKelaminResponden @relation(fields: [jenisKelaminId], references: [id])
id String @id @default(cuid())
name String @unique
tanggal DateTime // misal: 2025-05-01
jenisKelamin JenisKelaminResponden @relation(fields: [jenisKelaminId], references: [id])
jenisKelaminId String
rating PilihanRatingResponden @relation(fields: [ratingId], references: [id])
ratingId String
kelompokUmur UmurResponden @relation(fields: [kelompokUmurId], references: [id])
rating PilihanRatingResponden @relation(fields: [ratingId], references: [id])
ratingId String
kelompokUmur UmurResponden @relation(fields: [kelompokUmurId], references: [id])
kelompokUmurId String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}
model JenisKelaminResponden {
id String @id @default(cuid())
name String @unique
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
id String @id @default(cuid())
name String @unique
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
Responden Responden[]
}
model PilihanRatingResponden {
id String @id @default(cuid())
name String @unique
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
id String @id @default(cuid())
name String @unique
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
Responden Responden[]
}
model UmurResponden {
id String @id @default(cuid())
name String @unique
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
id String @id @default(cuid())
name String @unique
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
Responden Responden[]
}
@@ -552,6 +553,19 @@ model ProfilPerbekel {
isActive Boolean @default(true)
}
model PerbekelDariMasaKeMasa {
id String @id @default(cuid())
nama String @db.Text
periode String @db.Text
image FileStorage? @relation(fields: [imageId], references: [id])
imageId String?
daerah String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
deletedAt DateTime @default(now())
isActive Boolean @default(true)
}
// ========================================= BERITA ========================================= //
model Berita {
id String @id @default(cuid())

284
src/app/admin/(dashboard)/_state/desa/profile.ts
View File

@@ -1,7 +1,9 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
import { Prisma } from "@prisma/client";
import ApiFetch from "@/lib/api-fetch";
// ========================================= SEJARAH DESA ========================================= //
const sejarahDesaForm = z.object({
@@ -106,16 +108,13 @@ const sejarahDesa = proxy({
this.error = null;
try {
const response = await fetch(
`/api/desa/profile/sejarah/${this.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
}
);
const response = await fetch(`/api/desa/profile/sejarah/${this.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
@@ -409,16 +408,13 @@ const lambangDesa = proxy({
this.error = null;
try {
const response = await fetch(
`/api/desa/profile/lambang/${this.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
}
);
const response = await fetch(`/api/desa/profile/lambang/${this.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(this.form),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
@@ -588,14 +584,11 @@ const maskotDesa = proxy({
this.error = null;
try {
const response = await fetch(
`/api/desa/profile/maskot/${this.id}`,
{
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.form),
}
);
const response = await fetch(`/api/desa/profile/maskot/${this.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.form),
});
const result = await response.json();
@@ -818,12 +811,247 @@ const profilPerbekel = proxy({
},
});
//========================================= MANTAN PERBEKEL ========================================= //
const mantanPerbekelForm = z.object({
nama: z.string().min(3, "Nama minimal 3 karakter"),
daerah: z.string().min(3, "Daerah minimal 3 karakter"),
periode: z.string().min(3, "Periode minimal 3 karakter"),
imageId: z.string().min(1, "Gambar wajib dipilih"),
});
const mantanPerbekelDefaultForm = {
nama: "",
daerah: "",
periode: "",
imageId: "",
};
const mantanPerbekel = proxy({
create: {
form: { ...mantanPerbekelDefaultForm },
loading: false,
async create() {
const cek = mantanPerbekelForm.safeParse(mantanPerbekel.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
mantanPerbekel.create.loading = true;
const res = await ApiFetch.api.desa.mantanperbekel["create"].post(
mantanPerbekel.create.form
);
if (res.status === 200) {
mantanPerbekel.findMany.load();
return toast.success("Foto berhasil disimpan!");
}
return toast.error("Gagal menyimpan foto");
} catch (error) {
console.log((error as Error).message);
} finally {
mantanPerbekel.create.loading = false;
}
},
resetForm() {
mantanPerbekel.create.form = { ...mantanPerbekelDefaultForm };
},
},
findMany: {
data: null as
| Prisma.PerbekelDariMasaKeMasaGetPayload<{
include: {
image: true;
};
}>[]
| null,
page: 1,
totalPages: 1,
loading: false,
search: "",
load: async (page = 1, limit = 10, search = "") => {
mantanPerbekel.findMany.loading = true; // ✅ Akses langsung via nama path
mantanPerbekel.findMany.page = page;
mantanPerbekel.findMany.search = search;
try {
const query: any = { page, limit };
if (search) query.search = search;
const res = await ApiFetch.api.desa.mantanperbekel["findMany"].get({
query,
});
if (res.status === 200 && res.data?.success) {
mantanPerbekel.findMany.data = res.data.data ?? [];
mantanPerbekel.findMany.totalPages = res.data.totalPages ?? 1;
} else {
mantanPerbekel.findMany.data = [];
mantanPerbekel.findMany.totalPages = 1;
}
} catch (err) {
console.error("Gagal fetch mantan perbekel paginated:", err);
mantanPerbekel.findMany.data = [];
mantanPerbekel.findMany.totalPages = 1;
} finally {
mantanPerbekel.findMany.loading = false;
}
},
},
findUnique: {
data: null as Prisma.PerbekelDariMasaKeMasaGetPayload<{
include: {
image: true;
};
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/desa/mantanperbekel/${id}`);
if (res.ok) {
const data = await res.json();
mantanPerbekel.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch mantan perbekel:", res.statusText);
mantanPerbekel.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching mantan perbekel:", error);
mantanPerbekel.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
mantanPerbekel.delete.loading = true;
const response = await fetch(`/api/desa/mantanperbekel/del/${id}`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
});
const result = await response.json();
if (response.ok) {
toast.success(result.message || "Mantan perbekel berhasil dihapus");
await mantanPerbekel.findMany.load(); // refresh list
} else {
toast.error(result.message || "Gagal menghapus mantan perbekel");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus mantan perbekel");
} finally {
mantanPerbekel.delete.loading = false;
}
},
},
update: {
id: "",
form: { ...mantanPerbekelDefaultForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
const response = await fetch(`/api/desa/mantanperbekel/${id}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
nama: data.nama,
daerah: data.daerah,
periode: data.periode,
imageId: data.imageId || "",
};
return data;
} else {
throw new Error(result.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading foto:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
}
},
async update() {
const cek = mantanPerbekelForm.safeParse(mantanPerbekel.update.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
toast.error(err);
return false;
}
try {
mantanPerbekel.update.loading = true;
const response = await fetch(`/api/desa/mantanperbekel/${this.id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: this.form.nama,
daerah: this.form.daerah,
periode: this.form.periode,
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(result.message || "Mantan perbekel berhasil diupdate");
await mantanPerbekel.findMany.load(); // refresh list
return true;
} else {
throw new Error(result.message || "Gagal mengupdate mantan perbekel");
}
} catch (error) {
console.error("Error updating mantan perbekel:", error);
toast.error(
error instanceof Error
? error.message
: "Gagal mengupdate mantan perbekel"
);
return false;
} finally {
mantanPerbekel.update.loading = false;
}
},
reset() {
mantanPerbekel.update.id = "";
mantanPerbekel.update.form = { ...mantanPerbekelDefaultForm };
},
},
});
const stateProfileDesa = proxy({
lambangDesa,
maskotDesa,
profilPerbekel,
visiMisiDesa,
sejarahDesa,
mantanPerbekel,
});
export default stateProfileDesa;

5
src/app/admin/(dashboard)/desa/profile/_lib/layoutTabsDetail.tsx
View File

@@ -18,6 +18,11 @@ function LayoutTabsDetail({ children }: { children: React.ReactNode }) {
label: "Profile Perbekel",
value: "profileperbekel",
href: "/admin/desa/profile/profile-perbekel"
},
{
label: "Profile Perbekel Dari Masa Ke Masa",
value: "profile-perbekel-dari-masa-ke-masa",
href: "/admin/desa/profile/profile-perbekel-dari-masa-ke-masa"
}
];
const curentTab = tabs.find(tab => tab.href === pathname)

170
src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/[id]/edit/page.tsx Normal file
View File

@@ -0,0 +1,170 @@
'use client'
/* eslint-disable react-hooks/exhaustive-deps */
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function EditPerbekelDariMasaKeMasa() {
const state = useProxy(stateProfileDesa.mantanPerbekel)
const router = useRouter();
const params = useParams();
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [formData, setFormData] = useState({
nama: state.update.form.nama || '',
daerah: state.update.form.daerah || '',
periode: state.update.form.periode || '',
imageId: state.update.form.imageId || ''
});
useEffect(() => {
const loadFoto = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await state.update.load(id);
if (data) {
setFormData({
nama: data.nama || '',
daerah: data.daerah || '',
periode: data.periode || '',
imageId: data.imageId || ''
});
if (data?.imageGalleryFoto?.link) {
setPreviewImage(data.imageGalleryFoto.link);
}
}
} catch (error) {
console.error('Error loading foto:', error);
toast.error('Gagal memuat data foto');
}
};
loadFoto();
}, [params?.id]);
const handleSubmit = async () => {
try {
state.update.form = {
...state.update.form,
nama: formData.nama,
daerah: formData.daerah,
periode: formData.periode,
imageId: formData.imageId
};
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");
}
state.update.form.imageId = uploaded.id;
}
await state.update.update();
toast.success('Perbekel dari masa ke masa berhasil diperbarui!');
router.push('/admin/desa/profile/profile-perbekel-dari-masa-ke-masa');
} catch (error) {
console.error('Error updating perbekel dari masa ke masa:', error);
toast.error('Terjadi kesalahan saat memperbarui perbekel dari masa ke masa');
}
};
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 Perbekel Dari Masa Ke Masa</Title>
<TextInput
label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
placeholder='Masukkan nama'
value={formData.nama}
onChange={(e) =>
(formData.nama = e.target.value)
}
/>
<Box>
<Text>Upload Foto</Text>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2} // Maks 5MB
accept={{ 'image/*': [] }}
>
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
<Dropzone.Accept>
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag gambar ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format gambar
</Text>
</div>
</Group>
</Dropzone>
{previewImage ? (
<Image alt="" src={previewImage} w={200} h={200} />
) : (
<Center w={200} h={200} bg={"gray"}>
<IconImageInPicture />
</Center>
)}
</Box>
<TextInput
label={<Text fw={"bold"} fz={"sm"}>Daerah</Text>}
placeholder='Masukkan daerah'
value={formData.daerah}
onChange={(e) =>
(formData.daerah = e.target.value)
}
/>
<TextInput
label={<Text fw={"bold"} fz={"sm"}>Periode</Text>}
placeholder='Masukkan periode'
value={formData.periode}
onChange={(e) =>
(formData.periode = e.target.value)
}
/>
<Group>
<Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default EditPerbekelDariMasaKeMasa;

111
src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/[id]/page.tsx Normal file
View File

@@ -0,0 +1,111 @@
'use client'
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
import colors from '@/con/colors';
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 { useProxy } from 'valtio/utils';
function DetailPerbekelDariMasa() {
const state = useProxy(stateProfileDesa.mantanPerbekel)
const [modalHapus, setModalHapus] = useState(false);
const [selectedId, setSelectedId] = useState<string | null>(null)
const params = useParams()
const router = useRouter()
useShallowEffect(() => {
state.findUnique.load(params?.id as string)
}, [])
const handleHapus = () => {
if (selectedId) {
state.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/desa/profile/profile-perbekel-dari-masa-ke-masa")
}
}
if (!state.findUnique.data) {
return (
<Stack py={10}>
<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 bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
<Stack>
<Text fz={"xl"} fw={"bold"}>Detail Perbekel Dari Masa Ke Masa</Text>
{state.findUnique.data ? (
<Paper key={state.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fw={"bold"} fz={"lg"}>Nama Perbekel</Text>
<Text fz={"lg"}>{state.findUnique.data?.nama}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Daerah</Text>
<Text fz={"lg"}>{state.findUnique.data?.daerah}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Periode</Text>
<Text fz={"lg"}>{state.findUnique.data?.periode}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Gambar</Text>
<Image w={{ base: 300, md: 350}} src={state.findUnique.data?.image?.link} alt="gambar" />
</Box>
<Flex gap={"xs"} mt={10}>
<Button
onClick={() => {
if (state.findUnique.data) {
setSelectedId(state.findUnique.data.id);
setModalHapus(true);
}
}}
disabled={state.delete.loading || !state.findUnique.data}
color={"red"}
>
<IconX size={20} />
</Button>
<Button
onClick={() => {
if (state.findUnique.data) {
router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${state.findUnique.data.id}/edit`);
}
}}
disabled={!state.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 perbekel dari masa ke masa ini?'
/>
</Box>
);
}
export default DetailPerbekelDariMasa;

155
src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/create/page.tsx Normal file
View File

@@ -0,0 +1,155 @@
'use client'
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreateVideo() {
const state = useProxy(stateProfileDesa.mantanPerbekel)
const router = useRouter();
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const resetForm = () => {
state.create.form = {
nama: "",
daerah: "",
periode: "",
imageId: "",
};
setPreviewImage(null)
setFile(null)
};
const handleSubmit = async () => {
if (!file) {
return toast.warn("Pilih file gambar terlebih dahulu");
}
const res = await ApiFetch.api.fileStorage.create.post({
file,
name: file.name,
});
const uploaded = res.data?.data;
if (!uploaded?.id) {
return toast.error("Gagal upload gambar");
}
state.create.form.imageId = uploaded.id;
await state.create.create();
resetForm();
router.push("/admin/desa/profile/profile-perbekel-dari-masa-ke-masa");
};
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 Perbekel Dari Masa Ke Masa</Title>
<TextInput
label={<Text fw={"bold"} fz={"sm"}>Nama Perbekel</Text>}
placeholder='Masukkan nama perbekel'
value={state.create.form.nama}
onChange={(val) => {
state.create.form.nama = val.target.value;
}}
/>
<TextInput
label="Daerah"
placeholder="Masukkan daerah"
value={state.create.form.daerah}
onChange={(e) => {
state.create.form.daerah = e.currentTarget.value;
}}
required
/>
<TextInput
label={<Text fw={"bold"} fz={"sm"}>Periode</Text>}
placeholder='Masukkan periode'
value={state.create.form.periode}
onChange={(e) =>
(state.create.form.periode = e.target.value)
}
/>
<Box>
<Text fz={"md"} fw={"bold"}>Gambar</Text>
<Box>
<Dropzone
onDrop={(files) => {
const selectedFile = files[0]; // Ambil file pertama
if (selectedFile) {
setFile(selectedFile);
setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
}
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2} // Maks 5MB
accept={{ 'image/*': [] }}
>
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
<Dropzone.Accept>
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
</Dropzone.Accept>
<Dropzone.Reject>
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
</Dropzone.Reject>
<Dropzone.Idle>
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
Drag gambar ke sini atau klik untuk pilih file
</Text>
<Text size="sm" c="dimmed" inline mt={7}>
Maksimal 5MB dan harus format gambar
</Text>
</div>
</Group>
</Dropzone>
{/* Tampilkan preview kalau ada */}
{previewImage && (
<Box mt="sm">
<Image
src={previewImage}
alt="Preview"
style={{
maxWidth: '100%',
maxHeight: '200px',
objectFit: 'contain',
borderRadius: '8px',
border: '1px solid #ddd',
}}
/>
</Box>
)}
</Box>
</Box>
<Group>
<Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateVideo;

106
src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/page.tsx Normal file
View File

@@ -0,0 +1,106 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconSearch } 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 stateProfileDesa from '../../../_state/desa/profile';
function PerbekelDariMasaKeMasa() {
const [search, setSearch] = useState("");
return (
<Box>
<HeaderSearch
title='Perbekel Dari Masa Ke Masa'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListPerbekelDariMasaKeMasa search={search} />
</Box>
);
}
function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
const state = useProxy(stateProfileDesa.mantanPerbekel)
const router = useRouter();
const {
data,
page,
totalPages,
loading,
load,
} = state.findMany;
useShallowEffect(() => {
load(page, 10, search)
}, [page, search])
const filteredData = (data || [])
if (loading || !data) {
return (
<Box py={10}>
<Skeleton h={500} />
</Box>
)
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<JudulList
title='List Perbekel Dari Masa Ke Masa'
href='/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/create'
/>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>
<TableTh>Nama Perbekel</TableTh>
<TableTh>Periode</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Box w={200}>
<Text lineClamp={1}>{item.nama}</Text>
</Box>
</TableTd>
<TableTd>
<Box w={200}>
<Text lineClamp={1}>{item.periode}</Text>
</Box>
</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}>
<IconDeviceImac size={20} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Paper>
<Center>
<Pagination
value={page}
onChange={(newPage) => load(newPage)} // ini penting!
total={totalPages}
mt="md"
mb="md"
/>
</Center>
</Box>
);
}
export default PerbekelDariMasaKeMasa;

2
src/app/admin/(dashboard)/desa/profile/profile-perbekel/page.tsx
View File

@@ -33,7 +33,7 @@ function Page() {
</GridCol>
</Grid>
{perbekel && (
<Box >
<Box>
<Paper p={"xl"} bg={colors['BG-trans']}>
<Box px={{ base: "md", md: 100 }}>
<Grid>

3
src/app/api/[[...slugs]]/_lib/desa/index.ts
View File

@@ -10,6 +10,7 @@ import Penghargaan from "./penghargaan";
import KategoriPotensi from "./potensi/kategori-potensi";
import KategoriBerita from "./berita/kategori-berita";
import KategoriPengumuman from "./pengumuman/kategori-pengumuman";
import MantanPerbekel from "./profile/profile-mantan-perbekel";
const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
@@ -19,10 +20,12 @@ const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
.use(PotensiDesa)
.use(GalleryFoto)
.use(GalleryVideo)
.use(MantanPerbekel)
.use(LayananDesa)
.use(Penghargaan)
.use(KategoriPotensi)
.use(KategoriBerita)
.use(KategoriPengumuman)
export default Desa;

29
src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/create.ts Normal file
View File

@@ -0,0 +1,29 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
type FormCreate = {
nama: string;
periode: string;
imageId: string;
daerah: string;
}
export default async function profileMantanPerbekelCreate(context: Context) {
const body = context.body as FormCreate;
await prisma.perbekelDariMasaKeMasa.create({
data: {
nama: body.nama,
periode: body.periode,
imageId: body.imageId,
daerah: body.daerah,
},
});
return {
success: true,
message: "Success create profile mantan perbekel",
data: {
...body,
},
};
}

53
src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/del.ts Normal file
View File

@@ -0,0 +1,53 @@
import prisma from "@/lib/prisma";
import { Context } from "elysia";
import fs from "fs/promises";
import path from "path";
const profileMantanPerbekelDelete = async (context: Context) => {
const id = context.params?.id as string;
if (!id) {
return {
status: 400,
body: "ID tidak diberikan",
};
}
const foto = await prisma.perbekelDariMasaKeMasa.findUnique({
where: { id },
include: {
image: true,
},
});
if (!foto) {
return {
status: 404,
body: "Foto tidak ditemukan",
};
}
// Hapus file gambar dari filesystem jika ada
if (foto.image) {
try {
const filePath = path.join(foto.image.path, foto.image.name);
await fs.unlink(filePath);
await prisma.fileStorage.delete({
where: { id: foto.image.id },
});
} catch (err) {
console.error("Gagal hapus gambar lama:", err);
}
}
await prisma.perbekelDariMasaKeMasa.delete({
where: { id },
});
return {
status: 200,
body: "Foto berhasil dihapus",
};
}
export default profileMantanPerbekelDelete

58
src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/findMany.ts Normal file
View File

@@ -0,0 +1,58 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
// /api/berita/findManyPaginated.ts
import prisma from "@/lib/prisma";
import { Context } from "elysia";
async function profileMantanPerbekelFindMany(context: Context) {
// Ambil parameter dari query
const page = Number(context.query.page) || 1;
const limit = Number(context.query.limit) || 10;
const search = (context.query.search as string) || '';
const skip = (page - 1) * limit;
// Buat where clause
const where: any = { isActive: true };
// Tambahkan pencarian (jika ada)
if (search) {
where.OR = [
{ nama: { contains: search, mode: 'insensitive' } },
{ periode: { contains: search, mode: 'insensitive' } },
{ daerah: { contains: search, mode: 'insensitive' } },
];
}
try {
// Ambil data dan total count secara paralel
const [data, total] = await Promise.all([
prisma.perbekelDariMasaKeMasa.findMany({
where,
include: {
image: true,
},
skip,
take: limit,
orderBy: { periode: 'asc' },
}),
prisma.perbekelDariMasaKeMasa.count({ where }),
]);
return {
success: true,
message: "Berhasil ambil foto dengan pagination",
data,
page,
limit,
total,
totalPages: Math.ceil(total / limit),
};
} catch (e) {
console.error("Error di findMany paginated:", e);
return {
success: false,
message: "Gagal mengambil data foto",
};
}
}
export default profileMantanPerbekelFindMany;

49
src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/findUnique.ts Normal file
View File

@@ -0,0 +1,49 @@
import prisma from "@/lib/prisma";
export default async function profileMantanPerbekelFindUnique(request: Request) {
const url = new URL(request.url);
const pathSegments = url.pathname.split('/');
const id = pathSegments[pathSegments.length - 1];
if (!id) {
return Response.json({
success: false,
message: "ID tidak boleh kosong",
}, { status: 400 });
}
try {
if (typeof id !== 'string') {
return Response.json({
success: false,
message: "ID tidak valid",
}, { status: 400 });
}
const data = await prisma.perbekelDariMasaKeMasa.findUnique({
where: { id },
include: {
image: true,
},
});
if (!data) {
return Response.json({
success: false,
message: "Profile mantan perbekel tidak ditemukan",
}, { status: 404 });
}
return Response.json({
success: true,
message: "Success fetch profile mantan perbekel by ID",
data,
}, { status: 200 });
} catch (e) {
console.error("Find by ID error:", e);
return Response.json({
success: false,
message: "Gagal mengambil profile mantan perbekel: " + (e instanceof Error ? e.message : 'Unknown error'),
}, { status: 500 });
}
}

44
src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/index.ts Normal file
View File

@@ -0,0 +1,44 @@
import Elysia, { t } from "elysia";
import profileMantanPerbekelCreate from "./create";
import profileMantanPerbekelDelete from "./del";
import profileMantanPerbekelFindMany from "./findMany";
import profileMantanPerbekelUpdate from "./updt";
import profileMantanPerbekelFindUnique from "./findUnique";
const MantanPerbekel = new Elysia({
prefix: "mantanperbekel",
tags: ["Desa/Profile/MantanPerbekel"],
})
.get("/findMany", profileMantanPerbekelFindMany)
.get("/:id", async (context) => {
const response = await profileMantanPerbekelFindUnique(
new Request(context.request)
);
return response;
})
.post("/create", profileMantanPerbekelCreate, {
body: t.Object({
nama: t.String(),
daerah: t.String(),
periode: t.String(),
imageId: t.String(),
}),
})
.delete("/del/:id", profileMantanPerbekelDelete)
.put(
"/:id",
async (context) => {
const response = await profileMantanPerbekelUpdate(context);
return response;
},
{
body: t.Object({
nama: t.String(),
daerah: t.String(),
periode: t.String(),
imageId: t.String(),
}),
}
);
export default MantanPerbekel;

82
src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/updt.ts Normal file
View File

@@ -0,0 +1,82 @@
import prisma from "@/lib/prisma";
import { Prisma } from "@prisma/client";
import { Context } from "elysia";
import fs from "fs/promises";
import path from "path";
type FormUpdate = Prisma.PerbekelDariMasaKeMasaGetPayload<{
select: {
id: true;
nama: true;
periode: true;
imageId: true;
daerah: true;
};
}>;
export default async function profileMantanPerbekelUpdate(context: Context) {
try {
const id = context.params?.id;
const body = (await context.body) as Omit<FormUpdate, "id">;
const { nama, periode, imageId, daerah } = body;
if (!id) {
return {
success: false,
message: "ID tidak diberikan",
};
}
const existing = await prisma.perbekelDariMasaKeMasa.findUnique({
where: { id },
include: {
image: true,
},
});
if (!existing) {
return {
success: false,
message: "Profile mantan perbekel tidak ditemukan",
};
}
if (existing.imageId && existing.imageId !== imageId) {
const oldImage = existing.image;
if (oldImage) {
try {
const filePath = path.join(oldImage.path, oldImage.name);
await fs.unlink(filePath);
await prisma.fileStorage.delete({
where: { id: oldImage.id },
});
} catch (err) {
console.error("Gagal hapus gambar lama:", err);
}
}
}
const updated = await prisma.perbekelDariMasaKeMasa.update({
where: { id },
data: {
nama,
periode,
imageId,
daerah,
},
});
return {
success: true,
message: "Success update profile mantan perbekel",
data: updated,
};
} catch (error) {
console.error("Error updating profile mantan perbekel:", error);
return {
success: false,
message: "Terjadi kesalahan saat mengupdate profile mantan perbekel",
};
}
}

1
src/app/darmasaba/(pages)/desa/profile/page.tsx
View File

@@ -31,7 +31,6 @@ function Page() {
<LambangDesa />
<MaskotDesa />
<ProfilPerbekel />
{/* <LembagaDesa /> */}
<MotoDesa />
<SemuaPerbekel/>
</Box>

63
src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx
View File

@@ -1,8 +1,27 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Stack, Paper, Image, Text, Center } from '@mantine/core';
import React from 'react';
import { Box, Stack, Paper, Image, Text, Center, Skeleton } from '@mantine/core';
import React, { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
function LambangDesa() {
const state = useProxy(stateProfileDesa.lambangDesa)
useEffect(() => {
state.findUnique.load("edit")
}, [])
const { data, loading } = state.findUnique
if (loading || !data) {
return (
<Box py={10}>
<Skeleton h={500} />
</Box>
)
}
return (
<Box pb={70}>
<Stack align='center' gap={0}>
@@ -13,46 +32,8 @@ function LambangDesa() {
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Lambang Desa</Text>
</Box>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Text fz={{ base: "md", md: "h3"}} ta={"justify"}>
Simbul atau lambang bukanlah suatu gambar bentuk tanpa mengandung makna, namun segala yang terdapat di dalamnya mengandung makna filosofi yang mendalam dan kepribadian, setidaknya mengandung suatu pengharapan atau tujuan yang ingin dicapai oleh yang empunya lambang tersebut.
</Text>
<Text fz={{ base: "md", md: "h3"}} py={10} ta={"justify"}>
Lambang Desa Darmasaba berbentuk persegi lima sama sisi dengan dasar warna biru yang di dalamnya terdapat bangunan Padmasana dengan rong tiga, di dasarnya terdapat bunga Padma berwarna merah muda yang dikelilingi oleh padi dan kapas serta rantai sebagai pengikatnya, terdapat pula pita berwarna putih bertuliskan “Dharma Temaja”.
</Text>
<Box>
<Text fz={{ base: "md", md: "h3"}} ta={"justify"} fw={"bold"}>
Bentuk Dasar Persegi Lima
</Text>
<Text fz={{ base: "md", md: "h3"}} ta={"justify"}>
Melambangkan Pancasila yang menjadi dasar Negara Republik Indonesia yang harus dihayati dan diamalkan oleh masyarakat Indonesia termasuk masyarakat Desa Darmaaba merupakan bagian dari Bangsa Indonesia.
</Text>
</Box>
<Box>
<Text fz={{ base: "md", md: "h3"}} ta={"justify"} fw={"bold"}>
Dasar Persegi Lima Yang Berwarna Biru
</Text>
<Text fz={{ base: "md", md: "h3"}} ta={"justify"}>
Mengandung makna wilayah Desa Darmasaba yang luas, tanahnya yg subur dan masyarakatnya memiliki berbagai macam mata pencaharian.
</Text>
</Box>
<Box>
<Text fz={{ base: "md", md: "h3"}} ta={"justify"} fw={"bold"}>
Bangunan Pelinggih Padmasana Rong Tiga
</Text>
<Text fz={{ base: "md", md: "h3"}} ta={"justify"}>
Merupakan perlambang wilayah Desa Darmasaba terdiri dari tiga Desa Adat antara lain Desa Adat Aban, Desa Adat Tegal dan Desa Adat Darmasaba yang dengan rasa persatuan dan kesatuan dilandasi semangat segalak segilik seguluk sebayantaka membangun Desa Darmasaba.
</Text>
</Box>
<Box>
<Text fz={{ base: "md", md: "h3"}} ta={"justify"} fw={"bold"}>
Bunga Padma Merah Muda
</Text>
<Text fz={{ base: "md", md: "h3"}} ta={"justify"}>
Memiliki arti kemuliaan.
</Text>
</Box>
<Text fz={{ base: "md", md: "h3"}} ta={"justify"} dangerouslySetInnerHTML={{__html: data.deskripsi}} />
</Paper>
</Stack>
</Box >
);

39
src/app/darmasaba/(pages)/desa/profile/ui/lembagaDesa.tsx
View File

@@ -1,39 +0,0 @@
import colors from '@/con/colors';
import { Box, Center, Image, Paper, Stack, Text } from '@mantine/core';
function LembagaDesa() {
return (
<Box pb={70}>
<Stack align='center' gap={0}>
<Box pb={30}>
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h1", md: "2.5rem" }}>Lembaga Desa</Text>
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h4", md: "h2"}}>Badan Permusyawaratan Desa (BPD)</Text>
</Box>
<Paper mb={50} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Center pb={10}>
<Image src={"/api/img/bpddarmasaba.png"} alt='' w={{ base: 390, md: 1000 }} />
</Center>
</Paper>
<Box pb={30}>
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h1", md: "2.5rem" }}>Lembaga pemberdayaan Masyarakat (LPM)</Text>
</Box>
<Paper mb={50} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Center pb={10}>
<Image src={"/api/img/bpddarmasaba.png"} alt='' w={{ base: 390, md: 1000 }} />
</Center>
</Paper>
<Box pb={30}>
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h1", md: "2.5rem" }}>Perangkat Desa</Text>
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h4", md: "h2"}}>Struktur Organisasi Tata Kerja Pemerintahan Desa Darmasaba</Text>
</Box>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Center pb={10}>
<Image src={"/api/img/pernagkatdesa.png"} alt='' w={{ base: 390, md: 1000 }} />
</Center>
</Paper>
</Stack>
</Box >
);
}
export default LembagaDesa;

117
src/app/darmasaba/(pages)/desa/profile/ui/maskotDesa.tsx
View File

@@ -1,7 +1,27 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
import colors from '@/con/colors';
import { Box, Center, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { Box, Card, Center, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
function MaskotDesa() {
const state = useProxy(stateProfileDesa.maskotDesa)
useEffect(() => {
state.findUnique.load("edit")
}, [])
const { data, loading } = state.findUnique
if (loading || !data) {
return (
<Box py={10}>
<Skeleton h={500} />
</Box>
)
}
return (
<Box pb={70}>
<Stack align='center' gap={0}>
@@ -11,83 +31,24 @@ function MaskotDesa() {
</Center>
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Maskot Desa</Text>
</Box>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
Pudak adalah bunga dari tanaman sejenis pandan <Text span fz={{ base: "md", md: "h3" }} fs={"italic"}>(Pandanaceae)</Text>. Bentuk bunga ini tersusun dalam beberapa lapisan, terbungkus oleh kelopak warna putih <Text span fz={{ base: "md", md: "h3" }} fs={"italic"}>(semacam daun lonjong)</Text> yang ujungnya meruncing.
</Text>
<Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
Bunga Pudak berwarna kuning dan akan terlihat jika kelopak atau pelepahnya telah mekar. Kekhasan dari bunga pudak, yaitu mempunyai aroma wangi yang semerbak nan lembut <Text span fz={{ base: "md", md: "h3" }} fs={"italic"}>(tidak menyengat)</Text>, dan dapat menebar keharuman sepanjang pagi atau pun sore hari. Tanaman ini dapat tumbuh di sepanjang pantai, aliran sungai, di atas batu-batu karang, dan juga di tanah ladang.
</Text>
{/* Pohon dan Bunga Pudak */}
<Box py={20}>
<SimpleGrid
cols={{
base: 1,
md: 2,
}}
>
<Center>
<Box>
<Paper p={"lg"}>
<Image src={"/pohonpudak.png"} alt="" w={{ base: 150, md: 250 }} />
<Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Pohon Pudak</Text>
</Paper>
</Box>
</Center>
<Center>
<Box>
<Paper p={"lg"}>
<Image src={"/bungapudak.png"} alt="" w={{ base: 150, md: 250 }} />
<Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Bunga Pudak</Text>
</Paper>
</Box>
</Center>
</SimpleGrid>
</Box>
<Box>
<Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
Dalam Kamus Jawa Kuna- Indonesia kata “Pudak” berarti bunga pandan atau Pandanus Moschatus (Mardiwarsito: 1981: 442). Selain itu bunga pudak juga dapat disebut ketaka atau ketaki (Mardiwarsito, 1981: 276). Sedangkan kata “Sategal” berasal dari kata dasar “Tegal” yang berarti ladang (Mardiwarsito, 1981: 593). Jadi Pudak Sategal dapat diartikan sebagai satu ladang luas yang dipenuhi bunga pudak dan menabar keharuman.
</Text>
<Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
Pada sebuah kesempatan, Ida Pedanda Putu Pemaron menjelaskan mengenai makna dari istilah Pudak Sategal dengan sebuah analogi bahwa, sekuntum bunga pudak memiliki aroma wangi atau keharuman yang sangat kuat, apalagi jika satu ladang penuh bunga pudak, maka dapat dipastikan aroma keharumannya akan membumbung menyebar ke segala penjuru (Wawancara, 18 Mei 2019 di Geria Putra Mandara Kenderan, Tegallalang).
“Pudak” ialah sebuah bunga yang memiliki aroma wangi atau keharuman yang semerbak, lembut, dan khas.
</Text>
</Box>
{/* Tari dan Pose Klimaks Sekar Pudak */}
<Box py={20}>
<SimpleGrid
cols={{
base: 1,
md: 2,
}}
>
<Box>
<Center>
<Paper p={"lg"}>
<Image src={"/tarisekar.png"} alt="" w={{ base: 150, md: 250 }} />
<Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Tari Sekar Pudak</Text>
</Paper>
</Center>
</Box>
<Box>
<Center>
<Paper p={"lg"}>
<Image src={"/klimakstari.png"} alt="" w={{ base: 150, md: 250 }} />
<Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Pose Klimaks Tari </Text>
<Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Sekar Pudak </Text>
</Paper>
</Center>
</Box>
</SimpleGrid>
</Box>
<Box>
<Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
Garapan Tari Maskot Desa Darmasaba Sekar Pudak diwujudkan ke dalam bentuk tari kreasi yang ditarikan secara berkelompok dengan jumlah lima orang penari perempuan (putri).
</Text>
<Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
Pemilihan penari perempuan dimaksudkan untuk mempresentasikan keindahan, keluwesan, dan keharuman dari bunga pudak. Sedangkan penetapan jumlah penari lima orang didasarkan atas pertimbangan kebutuhan koreografi agar dapat membentuk desain-desain komposisi lantai yang menarik dan dinamis, baik ketika ditarikan di area panggung yang luas atau pun area panggung yang kecil. Penyajian tari maskot ini dirancang dengan durasi waktu 9 menit.
</Text>
</Box>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
<Group wrap="wrap" gap="md">
{data.images.map((img, index) => (
<Card key={index} p="xs" w={220}>
<Image
src={img.image.link}
alt={img.label}
w={200}
h={200}
fit="cover"
radius="md"
style={{ border: '1px solid #ccc', objectFit: 'cover' }}
/>
<Text ta="center" mt="xs" fw="bold">{img.label}</Text>
</Card>
))}
</Group>
</Paper>
</Stack>
</Box >

146
src/app/darmasaba/(pages)/desa/profile/ui/profilPerbekel.tsx
View File

@@ -1,7 +1,27 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
import colors from '@/con/colors';
import { Box, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
import { Box, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
function ProfilPerbekel() {
const state = useProxy(stateProfileDesa.profilPerbekel)
useEffect(() => {
state.findUnique.load("edit")
}, [])
const { data, loading } = state.findUnique
if (loading || !data) {
return (
<Box py={10}>
<Skeleton h={500} />
</Box>
)
}
return (
<Box pb={70}>
<Stack align='center' gap={0}>
@@ -19,7 +39,16 @@ function ProfilPerbekel() {
<Box>
<Paper bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Stack gap={0}>
<Image pt={{ base: 0, md: 120 }} px={"lg"} src={"/api/img/perbekel.png"} sizes='100%' alt='' />
<Image
pt={{ base: 0, md: 120 }}
px={"lg"}
src={data.image?.link || "/perbekel.png"}
sizes='100%'
alt=''
onError={(e) => {
e.currentTarget.src = "/perbekel.png";
}}
/>
<Paper
bg={colors['blue-button']}
px={"lg"}
@@ -35,101 +64,30 @@ function ProfilPerbekel() {
</Stack>
</Paper>
</Box>
<Box>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Text fz={"h2"} fw={"bold"}>
Biodata
</Text>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis. Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.
</Text>
<Text py={10} fz={"h2"} fw={"bold"}>
Pengalaman
</Text>
<List>
<Box px={20}>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>2021 - 2027: Perbekel Desa Darmasaba</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>2015 - Sekarang: Founder & Managing Director Mantra
Legal Consultants & Advocates</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>2020 - Sekarang: Founder Ugawa Record Music Studio</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} >2010 - 2016: Dosen Fakultas Hukum Universitas
Mahasaraswati Denpasar</ListItem>
</Box>
</List>
<Text py={10} fz={"h2"} fw={"bold"}>
Pengalaman Organisasi
</Text>
<List>
<Box px={20}>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>1996 - 1997: Ketua OSIS SMP Negeri 1 Abiansemal</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>1999 - 2000: Ketua OSIS SMA Negeri 1 Mengwi</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>2008 - 2009: Ketua BEM Universitas Mahasaraswati Denpasar</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} >2008 - 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} >2020 - Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} >2021 - Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} >2023 - 2028: Komite Tetap Advokasi - Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</ListItem>
</Box>
</List>
</Paper>
</Box>
</SimpleGrid>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Box>
<Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Biodata</Text>
<Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.biodata }} />
</Box>
<Box>
<Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman</Text>
<Text fz={{ base: "1rem", md: "1.5rem" }} dangerouslySetInnerHTML={{ __html: data.pengalaman }} />
</Box>
</Paper>
</SimpleGrid >
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Text py={10} fz={{ base: "md", md: "h1" }} fw={"bold"} >
Program Kerja Unggulan
</Text>
<Stack>
<Box>
<Text fz={{ base: "md", md: "h3" }} fw={"bold"} ta={"justify"}>
Pemberdayaan Ekonomi dan UMKM
</Text>
<List>
<Box px={10}>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pelatihan dan pendampingan UMKM lokal</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Program bantuan modal usaha bagi pelaku usaha kecil</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</ListItem>
</Box>
</List>
<Box>
<Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
<Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.pengalamanOrganisasi }} />
</Box>
<Box pb={20}>
<Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
<Box px={20}>
<Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.programUnggulan }} />
</Box>
<Box>
<Text fz={{ base: "md", md: "h3" }} fw={"bold"} ta={"justify"}>
Peningkatan Infrastruktur Desa
</Text>
<List>
<Box px={10}>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pembangunan dan perbaikan jalan desa</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Penyediaan fasilitas umum dan ruang terbuka hijau</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Optimalisasi layanan publik berbasis digital</ListItem>
</Box>
</List>
</Box>
<Box>
<Text fz={{ base: "md", md: "h3" }} fw={"bold"} ta={"justify"}>
Pendidikan dan Pengembangan SDM
</Text>
<List>
<Box px={10}>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Beasiswa pendidikan bagi siswa berprestasi dari keluarga kurang mampu</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Program kursus dan pelatihan kerja bagi pemuda desa</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Peningkatan kualitas pendidikan melalui kerja sama dengan perguruan tinggi</ListItem>
</Box>
</List>
</Box>
<Box>
<Text fz={{ base: "md", md: "h3" }} fw={"bold"} ta={"justify"}>
Pelestarian Budaya dan Pariwisata
</Text>
<List>
<Box px={10}>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Revitalisasi pura dan tempat bersejarah di Darmasaba</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pengembangan desa wisata berbasis budaya dan seni lokal</ListItem>
<ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Festival budaya dan seni sebagai daya tarik wisata</ListItem>
</Box>
</List>
</Box>
</Stack>
</Box>
</Paper>
</Box>
</Box >
);
}

35
src/app/darmasaba/(pages)/desa/profile/ui/sejarahDesa.tsx
View File

@@ -1,7 +1,28 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
import colors from '@/con/colors';
import { Box, Center, Image, Paper, Stack, Text } from '@mantine/core';
import { Box, Center, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
function SejarahDesa() {
const state = useProxy(stateProfileDesa.sejarahDesa)
useEffect(() => {
state.findUnique.load("edit")
}, [])
const { data, loading } = state.findUnique
if (loading || !data) {
return (
<Box py={10}>
<Skeleton h={500} />
</Box>
)
}
return (
<>
<Box pb={70}>
@@ -12,16 +33,8 @@ function SejarahDesa() {
</Center>
<Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Sejarah Desa</Text>
</Box>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
Asal –usul nama Darmasaba tertuang dalam lontar Usada Bali. Seperti di tulis dalam monografi Desa Darmasaba tahun 1980 silam, nama Darmasaba berkaitan dengan keturunan Danghyang Nirarta diceritakan, Sang kawi-wiku asal Daha (Jawa Timur) itu memiliki cucu bernama Ida Pedanda Sakti Manuaba yang tigggal di Desa Kendran Tegalalang Gianyar.
</Text>
<Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
Merasa tidak disenangi sang ayah, Ida Pedanda Sakti Manuaba pergi mengembara bersama dua orang pengiringnya. Pengembaraan sang pendeta sampai di pura Sarin Buana di Jimbaran. Saat mengadakan semedi di tempat ini sang pendeta melihat sinar api. Yang sangat jauh di utara. Timbul keinginan Ida Pedanda Manuaba untuk mengunjungi tempat itu.
</Text>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
Sampailah sang Pedanda di pura Batan Bila Peguyangan. Disini Ida Pedanda Manuaba singgah menghadap Ida Pedanda Budha yang tinggal disana. Selanjutnya, kedua pendeta bersama-sama menuju arah utara dan singgah di Taman Cang Ana, sebuah taman milik Arya Lanang Blusung. Di tempat ini kedua pendeta bersama-sama melaksanakan semedi dan menetap untuk sementara waktu.
</Text>
<Paper p={"xl"} bg={colors['white-trans-1']}>
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
</Paper>
</Stack>

92
src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx
View File

@@ -1,73 +1,25 @@
'use client'
import colors from '@/con/colors';
import { Box, Center, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
const data = [
{
id: 1,
nama: "SI GEDE KANIA",
wilayah: "PERBEKEL TEGAL",
periode: "Tahun 1943 - 1946",
foto: "/api/img/perbekel-1.png"
},
{
id: 2,
nama: "SI GEDE GANDEM",
wilayah: "PERBEKEL TEGAL",
periode: "Tahun 1946 - 1950",
foto: "/api/img/perbekel-2.png"
},
{
id: 3,
nama: "I WAYAN SAMA",
wilayah: "PERBEKEL TEGAL",
periode: "Tahun 1950 - 1953",
foto: "/api/img/perbekel-3.png"
},
{
id: 4,
nama: "I WAYAN NAMBREG",
wilayah: "PERBEKEL DARMASABA",
periode: "Tahun 1950 - 1960",
foto: "/api/img/perbekel-4.png"
},
{
id: 5,
nama: "IDA BAGUS PUTU OKA",
wilayah: "PERBEKEL TEGAL/DARMASABA",
periode: "Tahun 1953 - 1974",
foto: "/api/img/perbekel-5.png"
},
{
id: 6,
nama: "I NYOMAN PATRA",
wilayah: "PERBEKEL DARMASABA",
periode: "Tahun 1974 - 1991",
foto: "/api/img/perbekel-6.png"
},
{
id: 7,
nama: "I MADE RUDJA",
wilayah: "PERBEKEL DARMASABA",
periode: "Tahun 1991 - 2007",
foto: "/api/img/perbekel-7.png"
},
{
id: 8,
nama: "I WAYAN KALER, SH.MH.",
wilayah: "PERBEKEL DARMASABA",
periode: "Tahun 2007 - 2013",
foto: "/api/img/perbekel-8.png"
},
{
id: 9,
nama: "I MADE TARAM, SH.",
wilayah: "PERBEKEL DARMASABA",
periode: "Tahun 2013 - 2019",
foto: "/api/img/perbekel-9.png"
},
]
import { Box, Center, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
import { useProxy } from 'valtio/utils';
import { useShallowEffect } from '@mantine/hooks';
function SemuaPerbekel() {
const state = useProxy(stateProfileDesa.mantanPerbekel)
useShallowEffect(() => {
state.findMany.load()
}, [])
const {data, loading} = state.findMany
if (loading || !data) {
return (
<Box py={10}>
<Skeleton h={500} />
</Box>
)
}
return (
<Box pb={50}>
@@ -84,16 +36,16 @@ function SemuaPerbekel() {
{data.map((v, k) => {
return (
<Box key={k}>
<Paper mb={50} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Paper h={620} mb={50} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Box>
<Center>
<Image src={v.foto} alt='' />
<Image src={v.image?.link} alt='' />
</Center>
</Box>
<Box>
<Stack gap={"sm"} py={10}>
<Text ta={"center"} fw={"bold"} fz={{ base: "h3", md: "h3" }}>{v.nama}</Text>
<Text ta={"center"} fz={{ base: "h5", md: "h4" }}>{v.wilayah}</Text>
<Text ta={"center"} fz={{ base: "h5", md: "h4" }}>{v.daerah}</Text>
<Text ta={"center"} fz={{ base: "h5", md: "h4" }}>{v.periode}</Text>
</Stack>
</Box>

41
src/app/darmasaba/(pages)/desa/profile/ui/visimisiDesa.tsx
View File

@@ -1,8 +1,27 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
import colors from '@/con/colors';
import { Box, Stack, Paper, Image, Text, ListItem, List } from '@mantine/core';
import React from 'react';
import { Box, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
function VisimisiDesa() {
const state = useProxy(stateProfileDesa.visiMisiDesa)
useEffect(() => {
state.findUnique.load("edit")
}, [])
const { data, loading } = state.findUnique
if (loading || !data) {
return (
<Box py={10}>
<Skeleton h={500} />
</Box>
)
}
return (
<>
<Box pb={30}>
@@ -12,24 +31,12 @@ function VisimisiDesa() {
</Box>
<Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Text c={colors['blue-button']} ta={"center"} fw={"lighter"} fz={"2.5rem"}>Visi Desa</Text>
<Text fz={"1.5rem"} ta={"center"} fw={"bold"}>
“Mewujudkan Desa Darmasaba yang sejahtera, unggul, religius, berbudaya, dan aman dengan berlandaskan Tri Hita Karana”
</Text>
<Text fz={"1.5rem"} ta={"center"} fw={"bold"} dangerouslySetInnerHTML={{ __html: data.visi }} />
</Paper>
<Paper my={20} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
<Text c={colors['blue-button']} ta={"center"} fw={"lighter"} fz={"2.5rem"}>Misi Desa</Text>
<Box >
<List type='ordered'>
<ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Memperkokoh kerukunan hidup masyarakat dalam jalinan adat, budaya, olahraga, dan agama.</ListItem>
<ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Meningkatkan kualitas pelayanan publik dengan menerapkan teknologi informasi dan komunikasi terintegrasi.</ListItem>
<ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Meningkatkan tata kelola pemerintah desa dengan menerapkan prinsip good governance dan good clean goverment.</ListItem>
<ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Meningkatkan kualitas pendidikan, kesehatan, Keluarga Berencana serta pengelolaan kependudukan.</ListItem>
<ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Memperkuat usaha mikro kecil dan menengah (UMKM) dan BUMDesa sebagai pilar ekonomi masyarakat.</ListItem>
<ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Mewujudkan tatanan kehidupan bermasyarakat yang menjunjung tinggi penegakan hukum dan HAM. </ListItem>
<ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Meningkatkan perlindungan dan pengelolaan terhadap sumber daya alam dan lingkungan hidup.</ListItem>
<ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Memperkuat daya saing desa melalui peningkatan mutu sumber daya manusia dan infrastruktur desa berbasis potensi desa. </ListItem>
<ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Meningkatkan sinergisitas potensi budaya, pertanian dalam arti luas dan pariwisata.</ListItem>
</List>
<Box>
<Text fz={"1.5rem"} fw={"bold"} dangerouslySetInnerHTML={{ __html: data.misi }} />
</Box>
</Paper>
</Stack>