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

Sinkronisasi UI & API Admin - User Submenu Berita

Browse Source
This commit is contained in:
nico
2025-08-07 10:53:56 +08:00
parent d4af56b508
commit 0ac9fa1f53
85 changed files with 1135 additions and 3908 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/app/admin/(dashboard)/_state/desa/berita.ts
View File

@@ -22,19 +22,6 @@ const defaultForm = {
kategoriBeritaId: "",
};
// 3. Kategori proxy
const category = proxy({
findMany: {
data: [] as Prisma.KategoriBeritaGetPayload<{ omit: { isActive: true } }>[],
async load() {
const res = await ApiFetch.api.desa.berita.category["find-many"].get();
if (res.status === 200) {
category.findMany.data = res.data?.data ?? [];
}
},
},
});
// 4. Berita proxy
const berita = proxy({
create: {
@@ -314,14 +301,238 @@ const berita = proxy({
}
},
}
});
//=============== Kategori Berita ===============
const templateKategoriBerita = z.object({
name: z.string().min(1, "Nama harus diisi"),
});
const defaultKategoriBerita = {
name: "",
};
const kategoriBerita = proxy({
create: {
form: { ...defaultKategoriBerita },
loading: false,
async create() {
const cek = templateKategoriBerita.safeParse(kategoriBerita.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
kategoriBerita.create.loading = true;
const res =
await ApiFetch.api.desa.kategoriberita[
"create"
].post(kategoriBerita.create.form);
if (res.status === 200) {
kategoriBerita.findMany.load();
return toast.success("Data Kategori Berita Berhasil Dibuat");
}
console.log(res);
return toast.error("failed create");
} catch (error) {
console.log(error);
return toast.error("failed create");
} finally {
kategoriBerita.create.loading = false;
}
},
},
findMany: {
data: [] as Prisma.KategoriBeritaGetPayload<{
omit: {
isActive: true;
};
}>[],
loading: false,
async load() {
const res =
await ApiFetch.api.desa.kategoriberita[
"findMany"
].get();
if (res.status === 200) {
kategoriBerita.findMany.data = res.data?.data ?? [];
}
},
},
findUnique: {
data: null as Prisma.KategoriBeritaGetPayload<{
omit: {
isActive: true;
};
}> | null,
loading: false,
async load(id: string) {
try {
const res = await fetch(
`/api/desa/kategoriberita/${id}`
);
if (res.ok) {
const data = await res.json();
kategoriBerita.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
kategoriBerita.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
kategoriBerita.findUnique.data = null;
}
},
},
delete: {
loading: false,
async delete(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
kategoriBerita.delete.loading = true;
const response = await fetch(
`/api/desa/kategoriberita/del/${id}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
const result = await response.json();
if (response.ok && result?.success) {
toast.success(
result.message || "Data Kategori Berita berhasil dihapus"
);
await kategoriBerita.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus Data Kategori Berita");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus Data Kategori Berita");
} finally {
kategoriBerita.delete.loading = false;
}
},
},
update: {
id: "",
form: { ...defaultKategoriBerita },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
const response = await fetch(
`/api/desa/kategoriberita/${id}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
name: data.name,
};
return data; // Return the loaded data
} else {
throw new Error(result?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading kategori berita:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
}
},
async update() {
const cek = templateKategoriBerita.safeParse(kategoriBerita.update.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
toast.error(err);
return false;
}
try {
kategoriBerita.update.loading = true;
const response = await fetch(
`/api/desa/kategoriberita/${this.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: this.form.name,
}),
}
);
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.message || `HTTP error! status: ${response.status}`
);
}
const result = await response.json();
if (result.success) {
toast.success("Berhasil update data kategori berita");
await kategoriBerita.findMany.load(); // refresh list
return true;
} else {
throw new Error(result.message || "Gagal update data kategori berita");
}
} catch (error) {
console.error("Error updating data kategori berita:", error);
toast.error(
error instanceof Error
? error.message
: "Terjadi kesalahan saat update data kategori berita"
);
return false;
} finally {
kategoriBerita.update.loading = false;
}
},
reset() {
kategoriBerita.update.id = "";
kategoriBerita.update.form = { ...defaultKategoriBerita };
},
},
});
// 5. State global
const stateDashboardBerita = proxy({
category,
kategoriBerita,
berita,
});

1180
src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat.ts
View File

File diff suppressed because it is too large Load Diff

24
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/_lib/layoutTabs.tsx → src/app/admin/(dashboard)/desa/berita/_com/layoutTabs.tsx
View File

@@ -5,25 +5,21 @@ import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core'
import { usePathname, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react';
function LayoutTabs({ children }: { children: React.ReactNode }) {
function LayoutTabsBerita({ children }: { children: React.ReactNode }) {
const router = useRouter()
const pathname = usePathname()
const tabs = [
{
label: "List Survey",
value: "listSurvey",
href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-survey"
label: "List Berita",
value: "list_berita",
href: "/admin/desa/berita/list-berita"
},
{
label: "List Bulanan",
value: "listBulanan",
href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan"
label: "Kategori Berita",
value: "kategori_berita",
href: "/admin/desa/berita/kategori-berita"
},
{
label: "List Gender Stat",
value: "listGenderStat",
href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat"
}
];
const curentTab = tabs.find(tab => tab.href === pathname)
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
@@ -45,7 +41,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
return (
<Stack>
<Title order={3}>Indeks Kepuasan Masyarakat</Title>
<Title order={3}>Gallery</Title>
<Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
<TabsList p={"xs"} bg={"#BBC8E7FF"}>
{tabs.map((e, i) => (
@@ -64,4 +60,4 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
);
}
export default LayoutTabs;
export default LayoutTabsBerita;

80
src/app/admin/(dashboard)/desa/berita/kategori-berita/[id]/page.tsx Normal file
View File

@@ -0,0 +1,80 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
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';
function EditKategoriBerita() {
const editState = useProxy(stateDashboardBerita.kategoriBerita)
const router = useRouter();
const params = useParams();
const [formData, setFormData] = useState({
name: editState.update.form.name || '',
});
useEffect(() => {
const loadKategori = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await editState.update.load(id); // akses langsung, bukan dari proxy
if (data) {
setFormData({
name: data.name || '',
});
}
} catch (error) {
console.error("Error loading kategori Berita:", error);
toast.error("Gagal memuat data kategori Berita");
}
};
loadKategori();
}, [params?.id]);
const handleSubmit = async () => {
try {
editState.update.form = {
...editState.update.form,
name: formData.name,
};
await editState.update.update();
toast.success('Kategori Berita berhasil diperbarui!');
router.push('/admin/desa/berita/kategori-berita');
} catch (error) {
console.error('Error updating kategori Berita:', error);
toast.error('Terjadi kesalahan saat memperbarui kategori Berita');
}
};
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors["blue-button"]} size={30} />
</Button>
</Box>
<Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
<Stack gap={"xs"}>
<Title order={3}>Edit Kategori Berita</Title>
<TextInput
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Berita</Text>}
placeholder="masukkan nama kategori Berita"
/>
<Button onClick={handleSubmit}>Simpan</Button>
</Stack>
</Paper>
</Box>
);
}
export default EditKategoriBerita;

55
src/app/admin/(dashboard)/desa/berita/kategori-berita/create/page.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client'
import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
function CreateKategoriBerita() {
const createState = useProxy(stateDashboardBerita.kategoriBerita)
const router = useRouter();
const resetForm = () => {
createState.create.form = {
name: "",
};
};
const handleSubmit = async () => {
await createState.create.create();
resetForm();
router.push("/admin/desa/berita/kategori-berita")
};
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 Kategori Berita</Title>
<TextInput
label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Berita</Text>}
placeholder='Masukkan nama kategori Berita'
value={createState.create.form.name}
onChange={(val) => {
createState.create.form.name = val.target.value;
}}
/>
<Group>
<Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateKategoriBerita;

128
src/app/admin/(dashboard)/desa/berita/kategori-berita/page.tsx Normal file
View File

@@ -0,0 +1,128 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import JudulList from '../../../_com/judulList';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import stateDashboardBerita from '../../../_state/desa/berita';
function KategoriBerita() {
const [search, setSearch] = useState('');
return (
<Box>
<HeaderSearch
title='Kategori Berita'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListKategoriBerita search={search} />
</Box>
);
}
function ListKategoriBerita({ search }: { search: string }) {
const listDataState = useProxy(stateDashboardBerita.kategoriBerita)
const router = useRouter();
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
useEffect(() => {
listDataState.findMany.load()
}, [])
const handleDelete = () => {
if (selectedId) {
listDataState.delete.delete(selectedId)
setModalHapus(false)
setSelectedId(null)
listDataState.findMany.load()
}
}
const filteredData = (listDataState.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.name.toLowerCase().includes(keyword)
);
});
if (!listDataState.findMany.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p="md">
<Stack>
<JudulList
title='List Kategori Berita'
href='/admin/desa/berita/kategori-berita/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>No</TableTh>
<TableTh>Nama</TableTh>
<TableTh>Edit</TableTh>
<TableTh>Hapus</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item, index) => (
<TableTr key={item.id}>
<TableTd>
<Box w={100}>
<Text truncate="end" fz={"sm"}>{index + 1}</Text>
</Box>
</TableTd>
<TableTd>{item.name}</TableTd>
<TableTd>
<Button color='green' onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-Berita/${item.id}`)}>
<IconEdit size={20} />
</Button>
</TableTd>
<TableTd>
<Button
color='red'
disabled={listDataState.delete.loading}
onClick={() => {
setSelectedId(item.id)
setModalHapus(true)
}}>
<IconTrash size={20} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
{/* Modal Konfirmasi Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleDelete}
text='Apakah anda yakin ingin menghapus kategori Berita ini?'
/>
</Box>
)
}
export default KategoriBerita;

13
src/app/admin/(dashboard)/desa/berita/layout.tsx Normal file
View File

@@ -0,0 +1,13 @@
'use client'
import React from 'react';
import LayoutTabsBerita from './_com/layoutTabs';
function Layout({ children }: { children: React.ReactNode }) {
return (
<LayoutTabsBerita>
{children}
</LayoutTabsBerita>
);
}
export default Layout;

98
src/app/admin/(dashboard)/desa/berita/[id]/edit/page.tsx → src/app/admin/(dashboard)/desa/berita/list-berita/[id]/edit/page.tsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable react-hooks/exhaustive-deps */
"use client";
import {
@@ -7,7 +8,6 @@ import {
Image,
Paper,
Select,
Skeleton,
Stack,
Text,
TextInput,
@@ -22,9 +22,8 @@ import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
import colors from "@/con/colors";
import ApiFetch from "@/lib/api-fetch";
import { FileInput } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { Prisma } from "@prisma/client";
import stateDashboardBerita from "../../../../_state/desa/berita";
import stateDashboardBerita from "@/app/admin/(dashboard)/_state/desa/berita";
function EditBerita() {
const beritaState = useProxy(stateDashboardBerita);
@@ -43,6 +42,7 @@ function EditBerita() {
// Load berita by id saat pertama kali
useEffect(() => {
beritaState.kategoriBerita.findMany.load()
const loadBerita = async () => {
const id = params?.id as string;
if (!id) return;
@@ -99,7 +99,7 @@ function EditBerita() {
await beritaState.berita.edit.update();
toast.success("Berita berhasil diperbarui!");
router.push("/admin/desa/berita");
router.push("/admin/desa/berita/list-berita");
} catch (error) {
console.error("Error updating berita:", error);
toast.error("Terjadi kesalahan saat memperbarui berita");
@@ -154,22 +154,29 @@ function EditBerita() {
<Box>
<Text fz={"sm"} fw={"bold"}>Konten</Text>
<EditEditor
value={formData.content}
onChange={(htmlContent) => {
setFormData((prev) => ({ ...prev, content: htmlContent }));
beritaState.berita.edit.form.content = htmlContent;
}}
value={formData.content}
onChange={(htmlContent) => {
setFormData((prev) => ({ ...prev, content: htmlContent }));
beritaState.berita.edit.form.content = htmlContent;
}}
/>
</Box>
<SelectCategory
<Select
value={formData.kategoriBeritaId}
onChange={(val) => {
setFormData({
...formData,
kategoriBeritaId: val?.id || ''
});
}}
onChange={(val) => setFormData({ ...formData, kategoriBeritaId: val || "" })}
label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
placeholder='Pilih kategori'
data={
beritaState.kategoriBerita.findMany.data?.map((v) => ({
value: v.id,
label: v.name
})) || []
}
clearable
searchable
required
error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
/>
<Button onClick={handleSubmit}>Edit Berita</Button>
@@ -179,61 +186,4 @@ function EditBerita() {
);
}
interface SelectCategoryProps {
onChange: (value: Prisma.KategoriBeritaGetPayload<{
select: {
name: true;
id: true;
};
}> | null) => void;
value?: string | null;
defaultValue?: string | null;
}
function SelectCategory({
onChange,
value,
defaultValue,
}: SelectCategoryProps) {
const categoryState = useProxy(stateDashboardBerita.category);
useShallowEffect(() => {
categoryState.findMany.load().then(() => {
console.log("Kategori berhasil dimuat:", categoryState.findMany.data);
});
}, []);
if (!categoryState.findMany.data) {
return <Skeleton height={38} />;
}
const selectedValue = value || defaultValue;
return (
<Select
label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
placeholder="Pilih kategori"
data={categoryState.findMany.data.map((item) => ({
label: item.name,
value: item.id,
}))}
value={selectedValue || null}
onChange={(val: string | null) => {
if (val) {
const selected = categoryState.findMany.data?.find((item) => item.id === val);
if (selected) {
onChange(selected);
}
} else {
onChange(null);
}
}}
searchable
clearable
nothingFoundMessage="Tidak ditemukan"
/>
);
}
export default EditBerita;

6
src/app/admin/(dashboard)/desa/berita/[id]/page.tsx → src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx
View File

@@ -8,8 +8,8 @@ import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import colors from '@/con/colors';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import stateDashboardBerita from '../../../_state/desa/berita';
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
function DetailBerita() {
const beritaState = useProxy(stateDashboardBerita)
@@ -28,7 +28,7 @@ function DetailBerita() {
beritaState.berita.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/desa/berita")
router.push("/admin/desa/berita/list-berita")
}
}

95
src/app/admin/(dashboard)/desa/berita/create/page.tsx → src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx
View File

@@ -1,16 +1,16 @@
'use client'
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Center, FileInput, Image, Paper, Select, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
import { Box, Button, Center, FileInput, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { Prisma } from '@prisma/client';
import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
import CreateEditor from '../../../_com/createEditor';
import stateDashboardBerita from '../../../_state/desa/berita';
export default function CreateBerita() {
const beritaState = useProxy(stateDashboardBerita);
@@ -18,6 +18,10 @@ export default function CreateBerita() {
const [file, setFile] = useState<File | null>(null);
const router = useRouter()
useShallowEffect(() => {
beritaState.kategoriBerita.findMany.load()
}, []);
const resetForm = () => {
// Reset state di valtio
beritaState.berita.create.form = {
@@ -57,7 +61,7 @@ export default function CreateBerita() {
// Reset form setelah submit
resetForm();
router.push("/admin/desa/berita")
router.push("/admin/desa/berita/list-berita")
};
return (
@@ -78,11 +82,27 @@ export default function CreateBerita() {
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
placeholder="masukkan judul"
/>
<SelectCategory
value={beritaState.berita.create.form.kategoriBeritaId}
onChange={(val) => {
beritaState.berita.create.form.kategoriBeritaId = val?.id || "";
<Select
label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
placeholder="Pilih kategori"
data={beritaState.kategoriBerita.findMany.data.map((item) => ({
label: item.name,
value: item.id,
}))}
value={beritaState.berita.create.form.kategoriBeritaId || null}
onChange={(val: string | null) => {
if (val) {
const selected = beritaState.kategoriBerita.findMany.data?.find((item) => item.id === val);
if (selected) {
beritaState.berita.create.form.kategoriBeritaId = selected.id;
}
} else {
beritaState.berita.create.form.kategoriBeritaId = "";
}
}}
searchable
clearable
nothingFoundMessage="Tidak ditemukan"
/>
<TextInput
value={beritaState.berita.create.form.deskripsi}
@@ -126,61 +146,4 @@ export default function CreateBerita() {
</Paper>
</Box>
);
interface SelectCategoryProps {
onChange: (value: Prisma.KategoriBeritaGetPayload<{
select: {
name: true;
id: true;
};
}> | null) => void;
value?: string | null;
defaultValue?: string | null;
}
function SelectCategory({
onChange,
value,
defaultValue,
}: SelectCategoryProps) {
const categoryState = useProxy(stateDashboardBerita.category);
useShallowEffect(() => {
categoryState.findMany.load().then(() => {
console.log("Kategori berhasil dimuat:", categoryState.findMany.data);
});
}, []);
if (!categoryState.findMany.data) {
return <Skeleton height={38} />;
}
const selectedValue = value || defaultValue;
return (
<Select
label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
placeholder="Pilih kategori"
data={categoryState.findMany.data.map((item) => ({
label: item.name,
value: item.id,
}))}
value={selectedValue || null}
onChange={(val: string | null) => {
if (val) {
const selected = categoryState.findMany.data?.find((item) => item.id === val);
if (selected) {
onChange(selected);
}
} else {
onChange(null);
}
}}
searchable
clearable
nothingFoundMessage="Tidak ditemukan"
/>
);
}
}

9
src/app/admin/(dashboard)/desa/berita/page.tsx → src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx
View File

@@ -6,8 +6,9 @@ import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/ico
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../_com/header';
import stateDashboardBerita from '../../_state/desa/berita';
import HeaderSearch from '../../../_com/header';
import stateDashboardBerita from '../../../_state/desa/berita';
function Berita() {
@@ -67,7 +68,7 @@ function ListBerita({ search }: { search: string }) {
</GridCol>
<GridCol span={{ base: 12, md: 1 }}>
<Button
onClick={() => router.push("/admin/desa/berita/create")}
onClick={() => router.push("/admin/desa/berita/list-berita/create")}
bg={colors["blue-button"]}
>
<IconCircleDashedPlus size={25} />
@@ -107,7 +108,7 @@ function ListBerita({ search }: { search: string }) {
<Button
bg={"green"}
onClick={() =>
router.push(`/admin/desa/berita/${item.id}`)
router.push(`/admin/desa/berita/list-berita/${item.id}`)
}
>
<IconDeviceImacCog size={25} />

12
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/layout.tsx
View File

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

128
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/[id]/edit/page.tsx
View File

@@ -1,128 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function EditListBulanan() {
const editState = useProxy(indeksKepuasanState.monthlyStatState)
const params = useParams()
const router = useRouter()
const [formData, setFormData] = useState({
month: editState.edit.form.month || '',
respondentsCount: editState.edit.form.respondentsCount || 0,
surveyId: editState.edit.form.surveyId || '',
})
useEffect(() => {
const loadSurvey = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
if (data) {
setFormData({
month: data.month,
respondentsCount: data.respondentsCount,
surveyId: data.surveyId,
});
}
} catch (error) {
console.error("Error loading list bulanan:", error);
toast.error("Gagal memuat data list bulanan");
}
};
indeksKepuasanState.surveyState.findMany.load();
loadSurvey();
}, [params?.id]);
const handleSubmit = async () => {
try {
// edit global state with form data
editState.edit.form = {
...editState.edit.form,
month: formData.month,
respondentsCount: formData.respondentsCount,
surveyId: formData.surveyId,
};
await editState.edit.update();
toast.success("list bulanan berhasil diperbarui!");
router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan");
} catch (error) {
console.error("Error updating list bulanan:", error);
toast.error("Terjadi kesalahan saat memperbarui list bulanan");
}
};
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Stack>
<Text fz={"xl"} fw={"bold"}>Edit List Survey</Text>
<Paper>
<Stack gap={"xs"}>
<TextInput
value={formData.month}
onChange={(val) => {
setFormData({
...formData,
month: val.target.value
})
}}
label={<Text fw={"bold"} fz={"sm"}>Bulan</Text>}
placeholder='Masukkan bulan'
/>
<TextInput
value={formData.respondentsCount}
onChange={(val) => {
setFormData({
...formData,
respondentsCount: Number(val.target.value)
})
}}
label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
placeholder='Masukkan total responden'
/>
<Select
label={<Text fw="bold" fz="sm">Pilih Survey</Text>}
placeholder="Pilih survey"
value={formData.surveyId}
onChange={(value) => {
if (value) setFormData({
...formData,
surveyId: value
})
}}
data={
indeksKepuasanState.surveyState.findMany.data?.map((survey) => ({
value: survey.id,
label: `${survey.title} (${survey.totalRespondents} responden)`,
})) || []
}
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Stack>
</Paper>
</Box>
);
}
export default EditListBulanan;

109
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/[id]/page.tsx
View File

@@ -1,109 +0,0 @@
'use client'
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
import colors from '@/con/colors';
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
function DetailListBulanan() {
const detailState = useProxy(indeksKepuasanState.monthlyStatState)
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const params = useParams()
const router = useRouter()
useShallowEffect(() => {
detailState.findUnique.load(params?.id as string)
}, [])
const handleHapus = () => {
if (selectedId) {
detailState.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan")
}
}
if (!detailState.findUnique.data) {
return (
<Stack py={10}>
<Skeleton h={40} />
</Stack>
)
}
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
<Stack>
<Text fz={"xl"} fw={"bold"}>Detail List Survey</Text>
{detailState.findUnique.data ? (
<Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fw={"bold"} fz={"lg"}>Bulan</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.month}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Total Responden</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.respondentsCount}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Survey</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.survey.title }</Text>
</Box>
<Flex gap={"xs"} mt={10}>
<Button
onClick={() => {
if (detailState.findUnique.data) {
setSelectedId(detailState.findUnique.data.id);
setModalHapus(true);
}
}}
disabled={detailState.delete.loading || !detailState.findUnique.data}
color={"red"}
>
<IconX size={20} />
</Button>
<Button
onClick={() => {
if (detailState.findUnique.data) {
router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan/${detailState.findUnique.data.id}/edit`);
}
}}
disabled={!detailState.findUnique.data}
color={"green"}
>
<IconEdit size={20} />
</Button>
</Flex>
</Stack>
</Paper>
) : null}
</Stack>
</Paper>
{/* Modal Konfirmasi Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text='Apakah anda yakin ingin menghapus list bulanan ini?'
/>
</Box>
);
}
export default DetailListBulanan;

84
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/create/page.tsx
View File

@@ -1,84 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
function CreateListBulanan() {
const router = useRouter();
const stateCreate = useProxy(indeksKepuasanState.monthlyStatState)
useEffect(() => {
stateCreate.findMany.load();
indeksKepuasanState.surveyState.findMany.load();
}, []);
const resetForm = () => {
stateCreate.create.form = {
month: "",
respondentsCount: 0,
surveyId: "",
};
};
const handleSubmit = async () => {
await stateCreate.create.create();
resetForm();
router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan")
}
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 List Bulanan</Title>
<TextInput
value={stateCreate.create.form.month}
onChange={(val) => {
stateCreate.create.form.month = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Bulan</Text>}
placeholder='Masukkan bulan'
/>
<TextInput
value={stateCreate.create.form.respondentsCount}
onChange={(val) => {
stateCreate.create.form.respondentsCount = Number(val.target.value);
}}
label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
placeholder='Masukkan total responden'
/>
<Select
label={<Text fw="bold" fz="sm">Pilih Survey</Text>}
placeholder="Pilih survey"
value={stateCreate.create.form.surveyId}
onChange={(value) => {
if (value) stateCreate.create.form.surveyId = value;
}}
data={
indeksKepuasanState.surveyState.findMany.data?.map((survey) => ({
value: survey.id,
label: `${survey.title} (${survey.totalRespondents} responden)`,
})) || []
}
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateListBulanan;

98
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/page.tsx
View File

@@ -1,98 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan-masyarakat';
import JudulList from '../../../_com/judulList';
function ListBulananLandingPage() {
const [search, setSearch] = useState('');
return (
<Box>
<HeaderSearch
title='List Bulanan'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListBUlanan search={search} />
</Box>
);
}
function ListBUlanan({ search }: { search: string }) {
const listState = useProxy(indeksKepuasanState.monthlyStatState)
const router = useRouter();
useEffect(() => {
listState.findMany.load()
}, [])
const filteredData = (listState.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.month.toLowerCase().includes(keyword) ||
item.respondentsCount.toString().includes(keyword)
);
});
if (!listState.findMany.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<Stack>
<JudulList
title='List Bulanan'
href='/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>Bulan</TableTh>
<TableTh>Total Responden</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Box w={100}>
<Text truncate="end" fz={"sm"}>{item.month}</Text>
</Box>
</TableTd>
<TableTd>
<Text truncate="end" fz={"sm"}>{item.respondentsCount}</Text>
</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
</Box>
)
}
export default ListBulananLandingPage;

186
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/[id]/edit/page.tsx
View File

@@ -1,186 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function EditListSurvey() {
const editState = useProxy(indeksKepuasanState.genderStatState)
const params = useParams()
const router = useRouter()
const [formData, setFormData] = useState({
laki: editState.edit.form.laki || 0,
perempuan: editState.edit.form.perempuan || 0,
monthlyStatId: editState.edit.form.monthlyStatId || '',
total: editState.edit.form.total || 0,
percentLaki: editState.edit.form.percentLaki || 0,
percentPerempuan: editState.edit.form.percentPerempuan || 0,
})
useEffect(() => {
indeksKepuasanState.monthlyStatState.findMany.load();
const loadSurvey = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
if (data) {
setFormData({
laki: data.laki || 0,
perempuan: data.perempuan || 0,
monthlyStatId: data.monthlyStatId || '',
total: data.total || 0,
percentLaki: data.percentLaki || 0,
percentPerempuan: data.percentPerempuan || 0,
});
}
} catch (error) {
console.error("Error loading list survey:", error);
toast.error("Gagal memuat data list survey");
}
};
loadSurvey();
}, [params?.id]);
// Hitung total dan persentase saat nilai laki atau perempuan berubah
useEffect(() => {
const total = formData.laki + formData.perempuan;
const percentLaki = total > 0 ? Math.round((formData.laki / total) * 100) : 0;
const percentPerempuan = 100 - percentLaki;
setFormData(prev => ({
...prev,
total,
percentLaki,
percentPerempuan
}));
}, [formData.laki, formData.perempuan]);
const handleSubmit = async () => {
if (!formData.monthlyStatId) {
return toast.error("Silakan pilih bulan terlebih dahulu");
}
if (formData.laki < 0 || formData.perempuan < 0) {
return toast.error("Nilai tidak boleh negatif");
}
try {
// edit global state with form data
editState.edit.form = {
...editState.edit.form,
laki: formData.laki,
perempuan: formData.perempuan,
monthlyStatId: formData.monthlyStatId,
total: formData.total,
percentLaki: formData.percentLaki,
percentPerempuan: formData.percentPerempuan,
};
await editState.edit.update();
toast.success("Data gender berhasil diperbarui!");
router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat");
} catch (error) {
console.error("Error updating list gender:", error);
toast.error("Terjadi kesalahan saat memperbarui data gender");
}
};
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Stack>
<Text fz={"xl"} fw={"bold"}>Edit List Survey</Text>
<Paper>
<Stack gap={"xs"}>
<TextInput
type="number"
value={formData.laki}
onChange={(val) => {
setFormData({
...formData,
laki: Number(val.target.value)
})
}}
label={<Text fw={"bold"} fz={"sm"}>Laki - Laki</Text>}
placeholder='Masukkan laki - laki'
/>
<TextInput
type="number"
value={formData.perempuan}
onChange={(val) => {
setFormData({
...formData,
perempuan: Number(val.target.value)
})
}}
label={<Text fw={"bold"} fz={"sm"}>Perempuan</Text>}
placeholder='Masukkan perempuan'
/>
<TextInput
type="number"
value={formData.total}
label={<Text fw="bold" fz="sm">Total</Text>}
disabled
/>
<TextInput
type="number"
value={formData.percentLaki}
label={<Text fw="bold" fz="sm">Persentase Laki Laki</Text>}
disabled
/>
<TextInput
type="number"
value={formData.percentPerempuan}
label={<Text fw="bold" fz="sm">Persentase Perempuan</Text>}
disabled
/>
<Select
label={"Pilih Bulan"}
placeholder="Pilih bulanan"
value={formData.monthlyStatId}
onChange={(value) => {
setFormData(prev => ({
...prev,
monthlyStatId: value || ''
}));
}}
data={
indeksKepuasanState.monthlyStatState.findMany.data?.map((monthlyStat) => ({
value: monthlyStat.id,
label: `${monthlyStat.month} (${monthlyStat.respondentsCount} responden)`,
})) || []
}
required
error={!formData.monthlyStatId ? 'Bulan harus dipilih' : undefined}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={editState.edit.loading}
>
{editState.edit.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
</Group>
</Stack>
</Paper>
</Stack>
</Paper>
</Box>
);
}
export default EditListSurvey;

113
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/[id]/page.tsx
View File

@@ -1,113 +0,0 @@
'use client'
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
import colors from '@/con/colors';
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
function DetailGenderStat() {
const detailState = useProxy(indeksKepuasanState.genderStatState)
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const params = useParams()
const router = useRouter()
useShallowEffect(() => {
detailState.findUnique.load(params?.id as string)
}, [])
const handleHapus = () => {
if (selectedId) {
detailState.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat")
}
}
if (!detailState.findUnique.data) {
return (
<Stack py={10}>
<Skeleton h={40} />
</Stack>
)
}
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
<Stack>
<Text fz={"xl"} fw={"bold"}>Detail List Survey</Text>
{detailState.findUnique.data ? (
<Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fw={"bold"} fz={"lg"}>Laki Laki</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.laki}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Perempuan</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.perempuan}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Persentase Laki Laki</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.percentLaki}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Persentase Perempuan</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.percentPerempuan}</Text>
</Box>
<Flex gap={"xs"} mt={10}>
<Button
onClick={() => {
if (detailState.findUnique.data) {
setSelectedId(detailState.findUnique.data.id);
setModalHapus(true);
}
}}
disabled={detailState.delete.loading || !detailState.findUnique.data}
color={"red"}
>
<IconX size={20} />
</Button>
<Button
onClick={() => {
if (detailState.findUnique.data) {
router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/${detailState.findUnique.data.id}/edit`);
}
}}
disabled={!detailState.findUnique.data}
color={"green"}
>
<IconEdit size={20} />
</Button>
</Flex>
</Stack>
</Paper>
) : null}
</Stack>
</Paper>
{/* Modal Konfirmasi Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text='Apakah anda yakin ingin menghapus list gender stat ini?'
/>
</Box>
);
}
export default DetailGenderStat;

103
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/create/page.tsx
View File

@@ -1,103 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
function CreateListGenderStat() {
const router = useRouter();
const stateCreate = useProxy(indeksKepuasanState.genderStatState)
useEffect(() => {
stateCreate.findMany.load();
indeksKepuasanState.monthlyStatState.findMany.load();
}, []);
const resetForm = () => {
stateCreate.create.form = {
laki: 0,
perempuan: 0,
monthlyStatId: "",
total: 0,
percentLaki: 0,
percentPerempuan: 0,
};
};
const handleSubmit = async () => {
await stateCreate.create.create();
resetForm();
router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat")
}
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 List Gender Stat</Title>
<TextInput
value={stateCreate.create.form.laki}
onChange={(val) => {
stateCreate.create.form.laki = Number(val.target.value);
}}
label={<Text fw={"bold"} fz={"sm"}>Laki Laki</Text>}
placeholder='Masukkan laki laki'
/>
<TextInput
value={stateCreate.create.form.perempuan}
onChange={(val) => {
stateCreate.create.form.perempuan = Number(val.target.value);
}}
label={<Text fw={"bold"} fz={"sm"}>Perempuan</Text>}
placeholder='Masukkan perempuan'
/>
<TextInput
value={stateCreate.create.form.total}
label={<Text fw="bold" fz="sm">Total</Text>}
disabled
/>
<TextInput
value={stateCreate.create.form.percentLaki}
label={<Text fw="bold" fz="sm">Persentase Laki Laki</Text>}
disabled
/>
<TextInput
value={stateCreate.create.form.percentPerempuan}
label={<Text fw="bold" fz="sm">Persentase Perempuan</Text>}
disabled
/>
<Select
label={<Text fw="bold" fz="sm">Pilih Bulan</Text>}
placeholder="Pilih bulanan"
value={stateCreate.create.form.monthlyStatId}
onChange={(value) => {
if (value) stateCreate.create.form.monthlyStatId = value;
}}
data={
indeksKepuasanState.monthlyStatState.findMany.data?.map((monthlyStat) => ({
value: monthlyStat.id,
label: `${monthlyStat.month} (${monthlyStat.respondentsCount} responden)`,
})) || []
}
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateListGenderStat;

106
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/page.tsx
View File

@@ -1,106 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import JudulList from '../../../_com/judulList';
import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan-masyarakat';
function ListGenderStat() {
const [search, setSearch] = useState('');
return (
<Box>
<HeaderSearch
title='Gender Stat'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListGender search={search} />
</Box>
);
}
function ListGender({ search }: { search: string }) {
const listState = useProxy(indeksKepuasanState.genderStatState)
const router = useRouter();
useEffect(() => {
listState.findMany.load()
}, [])
const filteredData = (listState.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.laki.toString().includes(keyword) ||
item.perempuan.toString().includes(keyword)
);
});
if (!listState.findMany.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<Stack>
<JudulList
title='List Gender Stat'
href='/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>Laki Laki</TableTh>
<TableTh>Perempuan</TableTh>
<TableTh>Persentase Laki Laki</TableTh>
<TableTh>Persentase Perempuan</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Box w={100}>
<Text truncate="end" fz={"sm"}>{item.laki}</Text>
</Box>
</TableTd>
<TableTd>
<Text truncate="end" fz={"sm"}>{item.perempuan}</Text>
</TableTd>
<TableTd>
<Text truncate="end" fz={"sm"}>{item.percentLaki}%</Text>
</TableTd>
<TableTd>
<Text truncate="end" fz={"sm"}>{item.percentPerempuan}%</Text>
</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
</Box>
)
}
export default ListGenderStat;

122
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/[id]/edit/page.tsx
View File

@@ -1,122 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function EditListSurvey() {
const editState = useProxy(indeksKepuasanState.surveyState)
const params = useParams()
const router = useRouter()
const [formData, setFormData] = useState({
title: editState.edit.form.title || '',
totalRespondents: editState.edit.form.totalRespondents || 0,
averageScore: editState.edit.form.averageScore || 0,
})
useEffect(() => {
const loadSurvey = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
if (data) {
setFormData({
title: data.title || '',
totalRespondents: data.totalRespondents || 0,
averageScore: data.averageScore || 0,
});
}
} catch (error) {
console.error("Error loading list survey:", error);
toast.error("Gagal memuat data list survey");
}
};
loadSurvey();
}, [params?.id]);
const handleSubmit = async () => {
try {
// edit global state with form data
editState.edit.form = {
...editState.edit.form,
title: formData.title,
totalRespondents: formData.totalRespondents,
averageScore: formData.averageScore,
};
await editState.edit.update();
toast.success("list survey berhasil diperbarui!");
router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-survey");
} catch (error) {
console.error("Error updating list survey:", error);
toast.error("Terjadi kesalahan saat memperbarui list survey");
}
};
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Stack>
<Text fz={"xl"} fw={"bold"}>Edit List Survey</Text>
<Paper>
<Stack gap={"xs"}>
<TextInput
value={formData.title}
onChange={(val) => {
setFormData({
...formData,
title: val.target.value
})
}}
label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
placeholder='Masukkan judul'
/>
<TextInput
value={formData.totalRespondents}
onChange={(val) => {
setFormData({
...formData,
totalRespondents: Number(val.target.value)
})
}}
label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
placeholder='Masukkan total responden'
/>
<TextInput
value={formData.averageScore}
onChange={(val) => {
setFormData({
...formData,
averageScore: Number(val.target.value)
})
}}
label={<Text fw={"bold"} fz={"sm"}>Skor Rata-rata</Text>}
placeholder='Masukkan skor'
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Stack>
</Paper>
</Box>
);
}
export default EditListSurvey;

109
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/[id]/page.tsx
View File

@@ -1,109 +0,0 @@
'use client'
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
import colors from '@/con/colors';
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
function DetailKegiatanDesa() {
const detailState = useProxy(indeksKepuasanState.surveyState)
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const params = useParams()
const router = useRouter()
useShallowEffect(() => {
detailState.findUnique.load(params?.id as string)
}, [])
const handleHapus = () => {
if (selectedId) {
detailState.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-survey")
}
}
if (!detailState.findUnique.data) {
return (
<Stack py={10}>
<Skeleton h={40} />
</Stack>
)
}
return (
<Box>
<Box mb={10}>
<Button variant="subtle" onClick={() => router.back()}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
<Stack>
<Text fz={"xl"} fw={"bold"}>Detail List Survey</Text>
{detailState.findUnique.data ? (
<Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
<Stack gap={"xs"}>
<Box>
<Text fw={"bold"} fz={"lg"}>Judul</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.title}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Total Responden</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.totalRespondents}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Rata-rata Skor</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.averageScore}</Text>
</Box>
<Flex gap={"xs"} mt={10}>
<Button
onClick={() => {
if (detailState.findUnique.data) {
setSelectedId(detailState.findUnique.data.id);
setModalHapus(true);
}
}}
disabled={detailState.delete.loading || !detailState.findUnique.data}
color={"red"}
>
<IconX size={20} />
</Button>
<Button
onClick={() => {
if (detailState.findUnique.data) {
router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-survey/${detailState.findUnique.data.id}/edit`);
}
}}
disabled={!detailState.findUnique.data}
color={"green"}
>
<IconEdit size={20} />
</Button>
</Flex>
</Stack>
</Paper>
) : null}
</Stack>
</Paper>
{/* Modal Konfirmasi Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text='Apakah anda yakin ingin menghapus list survey ini?'
/>
</Box>
);
}
export default DetailKegiatanDesa;

78
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/create/page.tsx
View File

@@ -1,78 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useProxy } from 'valtio/utils';
function CreateListSurvey() {
const router = useRouter();
const stateCreate = useProxy(indeksKepuasanState.surveyState)
useEffect(() => {
stateCreate.findMany.load();
}, []);
const resetForm = () => {
stateCreate.create.form = {
title: "",
totalRespondents: 0,
averageScore: 0,
};
};
const handleSubmit = async () => {
await stateCreate.create.create();
resetForm();
router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-survey")
}
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 List Survey</Title>
<TextInput
value={stateCreate.create.form.title}
onChange={(val) => {
stateCreate.create.form.title = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
placeholder='Masukkan judul'
/>
<TextInput
value={stateCreate.create.form.totalRespondents}
onChange={(val) => {
stateCreate.create.form.totalRespondents = Number(val.target.value);
}}
label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
placeholder='Masukkan tahun'
/>
<TextInput
value={stateCreate.create.form.averageScore}
onChange={(val) => {
stateCreate.create.form.averageScore = Number(val.target.value);
}}
label={<Text fw={"bold"} fz={"sm"}>Skor</Text>}
placeholder='Masukkan skor'
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateListSurvey;

103
src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/page.tsx
View File

@@ -1,103 +0,0 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan-masyarakat';
import JudulList from '../../../_com/judulList';
function ListSurveyLandingPage() {
const [search, setSearch] = useState('');
return (
<Box>
<HeaderSearch
title='List Survey'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListSurvey search={search} />
</Box>
);
}
function ListSurvey({ search }: { search: string }) {
const listState = useProxy(indeksKepuasanState.surveyState)
const router = useRouter();
useEffect(() => {
listState.findMany.load()
}, [])
const filteredData = (listState.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.title.toLowerCase().includes(keyword) ||
item.totalRespondents.toString().includes(keyword) ||
item.averageScore.toString().includes(keyword)
);
});
if (!listState.findMany.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<Stack>
<JudulList
title='List Survey'
href='/admin/landing-page/indeks-kepuasan-masyarakat/list-survey/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>Judul</TableTh>
<TableTh>Total Responden</TableTh>
<TableTh>Skor Rata-rata</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Box w={100}>
<Text truncate="end" fz={"sm"}>{item.title}</Text>
</Box>
</TableTd>
<TableTd>
<Text truncate="end" fz={"sm"}>{item.totalRespondents}</Text>
</TableTd>
<TableTd>
<Text truncate="end" fz={"sm"}>{item.averageScore}</Text>
</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-survey/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
</Box>
)
}
export default ListSurveyLandingPage;

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

@@ -103,7 +103,7 @@ export const navBar = [
{
id: "Desa_3",
name: "Berita",
path: "/admin/desa/berita"
path: "/admin/desa/berita/list-berita"
},
{
id: "Desa_4",