Sinkronisasi UI & API Admin - User Submenu Info Sekolah

This commit is contained in:
2025-08-29 15:20:46 +08:00
parent b6d6583e77
commit 9f9a0fb451
59 changed files with 1848 additions and 521 deletions

View File

@@ -0,0 +1,144 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } 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 EditProgramKreatifDesa() {
const state = useProxy(beasiswaDesaState.keunggulanProgram)
const params = useParams()
const router = useRouter();
const [formData, setFormData] = useState({
judul: '',
deskripsi: '',
})
useEffect(() => {
const loadProgramKreatif = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await state.update.load(id);
if (data) {
// ⬇️ FIX PENTING: tambahkan ini
state.update.id = id;
state.update.form = {
judul: data.judul,
deskripsi: data.deskripsi,
};
setFormData({
judul: data.judul,
deskripsi: data.deskripsi,
});
}
} catch (error) {
console.error("Error loading pengelolaan sampah:", error);
toast.error("Gagal memuat data pengelolaan sampah");
}
}
loadProgramKreatif();
}, [params?.id]);
const handleSubmit = async () => {
try {
state.update.form = {
...state.update.form,
judul: formData.judul.trim(),
deskripsi: formData.deskripsi.trim(),
};
await state.update.update();
toast.success('Data keunggulan program berhasil diperbarui!');
router.push("/admin/pendidikan/beasiswa-desa/keunggulan-program");
} catch (error) {
console.error("Error updating keunggulan program:", error);
toast.error(error instanceof Error ? error.message : "Gagal memperbarui data keunggulan program");
}
}
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Edit Keunggulan Program
</Title>
</Group>
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
label="Judul"
placeholder="Masukkan judul"
value={formData.judul}
onChange={(e) => {
const value = e.target.value;
setFormData(prev => ({
...prev,
judul: value
}));
state.update.form.judul = value;
}}
required
/>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Deskripsi
</Text>
<EditEditor
value={state.update.form.deskripsi}
onChange={(htmlContent) => {
state.update.form.deskripsi = htmlContent;
}}
/>
</Box>
<Group justify="right" mt="md">
<Button
onClick={handleSubmit}
radius="md"
size="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default EditProgramKreatifDesa;

View File

@@ -0,0 +1,101 @@
'use client';
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useProxy } from 'valtio/utils';
function CreateKeunggulanProgram() {
const stateCreate = useProxy(beasiswaDesaState.keunggulanProgram);
const router = useRouter();
const resetForm = () => {
stateCreate.create.form = {
judul: "",
deskripsi: "",
};
};
const handleSubmit = async () => {
try {
await stateCreate.create.create();
resetForm();
router.push("/admin/pendidikan/beasiswa-desa/keunggulan-program");
} catch (error) {
console.error('Error creating keunggulan program:', error);
}
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" color="blue" position="bottom">
<Button
variant="subtle"
onClick={() => router.back()}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Tambah Keunggulan Program
</Title>
</Group>
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="lg"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="md">
<TextInput
label="Judul"
placeholder="Masukkan judul"
value={stateCreate.create.form.judul || ''}
onChange={(e) => (stateCreate.create.form.judul = e.target.value)}
required
/>
<Box>
<Text fw="bold" fz="sm" mb={6}>
Deskripsi
</Text>
<CreateEditor
value={stateCreate.create.form.deskripsi}
onChange={(htmlContent) => {
stateCreate.create.form.deskripsi = htmlContent;
}}
/>
</Box>
<Group justify="right" mt="md">
<Button
onClick={handleSubmit}
radius="md"
size="md"
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateKeunggulanProgram;

View File

@@ -1,71 +1,168 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit, IconPlus, IconSearch, IconTrashFilled } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import beasiswaDesaState from '../../../_state/pendidikan/beasiswa-desa';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
function BeasiswaDesa() {
function KeunggulanProgram() {
const [search, setSearch] = useState("");
return (
<Box>
<HeaderSearch
title='Keunggulan Program'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
title='List Keunggulan Program'
placeholder='Cari keunggulan program...'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListBeasiswaDesa/>
<ListKeunggulanProgram search={search} />
</Box>
);
}
function ListBeasiswaDesa() {
const router = useRouter();
function ListKeunggulanProgram({ search }: { search: string }) {
const stateList = useProxy(beasiswaDesaState.keunggulanProgram)
const router = useRouter()
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const {
data,
page,
totalPages,
loading,
load,
} = stateList.findMany
useShallowEffect(() => {
load(page, 10, search)
}, [page, search])
const handleHapus = () => {
if (selectedId) {
stateList.delete.delete(selectedId)
setModalHapus(false)
setSelectedId(null)
}
}
const filteredData = data || []
if (loading || !data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p="md">
<Stack>
<Title order={4}>List Beasiswa Desa</Title>
<Box style={{overflowX: 'auto'}}>
<Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
<TableThead>
<Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Keunggulan Program</Title>
<Tooltip label="Tambah Keunggulan Program" withArrow>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
variant="light"
onClick={() => router.push('/admin/pendidikan/beasiswa-desa/keunggulan-program/create')}
>
Tambah Baru
</Button>
</Tooltip>
</Group>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover>
<TableThead>
<TableTr>
<TableTh>Nama Keunggulan Program</TableTh>
<TableTh>Deskripsi</TableTh>
<TableTh>Edit</TableTh>
<TableTh>Delete</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>
<Text lineClamp={1} truncate="end" fw={500}>{item.judul}</Text>
</TableTd>
<TableTd>
<Text lineClamp={1} truncate="end" fw={500} dangerouslySetInnerHTML={{ __html: item.deskripsi }}></Text>
</TableTd>
<TableTd>
<Tooltip label="Edit" withArrow>
<Button
variant="light"
color="blue"
size="sm"
onClick={() => router.push(`/admin/pendidikan/beasiswa-desa/keunggulan-program/${item.id}`)}
>
<IconEdit size={18} />
</Button>
</Tooltip>
</TableTd>
<TableTd>
<Tooltip label="Hapus" withArrow>
<Button
variant="light"
color="red"
size="sm"
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
>
<IconTrashFilled size={18} />
</Button>
</Tooltip>
</TableTd>
</TableTr>
))
) : (
<TableTr>
<TableTh>Nomor</TableTh>
<TableTh>Nama Lengkap</TableTh>
<TableTh>Nomor Telepon</TableTh>
<TableTh>Email</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
<TableTr>
<TableTd>
<Box w={100}>
<Text truncate="end" fz={"sm"}>1</Text>
</Box>
</TableTd>
<TableTd>
<Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
</TableTd>
<TableTd>
<Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
</TableTd>
<TableTd>
<Text truncate="end" fz={"sm"}>Email</Text>
</TableTd>
<TableTd>
<Button onClick={() => router.push('/admin/pendidikan/beasiswa-desa/detail')}>
<IconDeviceImacCog size={25} />
</Button>
<TableTd colSpan={3} align="center" py="xl">
<Text c="dimmed">Tidak ada data pengelolaan sampah</Text>
</TableTd>
</TableTr>
</TableTbody>
</Table>
</Box>
</Stack>
)}
</TableTbody>
</Table>
</Box>
{totalPages > 1 && (
<Center mt="xl">
<Pagination
value={page}
onChange={(newPage) => load(newPage)}
total={totalPages}
siblings={1}
boundaries={1}
withEdges
/>
</Center>
)}
</Paper>
{/* Modal Konfirmasi Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text='Apakah anda yakin ingin menghapus pengelolaan sampah bank sampah ini?'
/>
</Box>
)
);
}
export default BeasiswaDesa;
export default KeunggulanProgram;

View File

@@ -12,22 +12,22 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
{
label: "Jenjang Pendidikan",
value: "jenjangPendidikan",
href: "/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan"
href: "/admin/pendidikan/info-sekolah/jenjang-pendidikan"
},
{
label: "Lembaga",
value: "lembaga",
href: "/admin/pendidikan/info-sekolah-paud/lembaga"
href: "/admin/pendidikan/info-sekolah/lembaga"
},
{
label: "Siswa",
value: "siswa",
href: "/admin/pendidikan/info-sekolah-paud/siswa"
href: "/admin/pendidikan/info-sekolah/siswa"
},
{
label: "Pengajar",
value: "pengajar",
href: "/admin/pendidikan/info-sekolah-paud/pengajar"
href: "/admin/pendidikan/info-sekolah/pengajar"
},
];
const curentTab = tabs.find(tab => tab.href === pathname)

View File

@@ -61,7 +61,7 @@ function EditJenjangPendidikan() {
const success = await stateJenjang.edit.update();
if (success) {
router.push("/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan");
router.push("/admin/pendidikan/info-sekolah/jenjang-pendidikan");
}
} catch (error) {
console.error("Error updating jenjang pendidikan:", error);

View File

@@ -25,7 +25,7 @@ function CreateJenjangPendidikan() {
const handleSubmit = async () => {
await stateJenjang.create.create();
resetForm();
router.push("/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan")
router.push("/admin/pendidikan/info-sekolah/jenjang-pendidikan")
}
return (

View File

@@ -66,7 +66,7 @@ function ListJenjangPendidikan({ search }: { search: string }) {
<Paper bg={colors['white-1']} p={'md'}>
<JudulList
title='List Jenjang Pendidikan'
href='/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan/create'
href='/admin/pendidikan/info-sekolah/jenjang-pendidikan/create'
/>
<Table striped withTableBorder withRowBorders>
<TableThead>
@@ -81,7 +81,7 @@ function ListJenjangPendidikan({ search }: { search: string }) {
<TableTr key={item.id}>
<TableTd>{item.nama}</TableTd>
<TableTd>
<Button color="green" onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan/${item.id}`)}>
<Button color="green" onClick={() => router.push(`/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`)}>
<IconEdit size={20} />
</Button>
</TableTd>

View File

@@ -50,7 +50,7 @@ export default function EditLembaga() {
if (result) {
toast.success("Data berhasil diperbarui");
router.push('/admin/pendidikan/info-sekolah-paud/lembaga');
router.push('/admin/pendidikan/info-sekolah/lembaga');
}
};

View File

@@ -29,7 +29,7 @@ function DetailLembaga() {
detailState.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/pendidikan/info-sekolah-paud/lembaga")
router.push("/admin/pendidikan/info-sekolah/lembaga")
}
}
@@ -86,7 +86,7 @@ function DetailLembaga() {
<Button
onClick={() => {
if (detailState.findUnique.data) {
router.push(`/admin/pendidikan/info-sekolah-paud/lembaga/${detailState.findUnique.data.id}/edit`);
router.push(`/admin/pendidikan/info-sekolah/lembaga/${detailState.findUnique.data.id}/edit`);
}
}}
disabled={!detailState.findUnique.data}

View File

@@ -27,7 +27,7 @@ function CreateLembaga() {
const handleSubmit = async () => {
await stateLembaga.create.create();
resetForm();
router.push("/admin/pendidikan/info-sekolah-paud/lembaga")
router.push("/admin/pendidikan/info-sekolah/lembaga")
}
return (

View File

@@ -57,7 +57,7 @@ function ListLembaga({ search }: { search: string }) {
<Paper bg={colors['white-1']} p={'md'}>
<JudulList
title='List Lembaga'
href='/admin/pendidikan/info-sekolah-paud/lembaga/create'
href='/admin/pendidikan/info-sekolah/lembaga/create'
/>
<Table striped withTableBorder withRowBorders>
<TableThead>
@@ -73,7 +73,7 @@ function ListLembaga({ search }: { search: string }) {
<TableTd>{item.nama}</TableTd>
<TableTd>{item.jenjangPendidikan?.nama}</TableTd>
<TableTd>
<Button color="blue" onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/lembaga/${item.id}`)}>
<Button color="blue" onClick={() => router.push(`/admin/pendidikan/info-sekolah/lembaga/${item.id}`)}>
<IconDeviceImac size={20} />
</Button>
</TableTd>

View File

@@ -55,7 +55,7 @@ function EditPengajar() {
lembagaId: formData.lembagaId.trim(),
}
await pengajarState.edit.update()
router.push("/admin/pendidikan/info-sekolah-paud/pengajar");
router.push("/admin/pendidikan/info-sekolah/pengajar");
} catch (error) {
console.error("Error updating pengajar:", error);
toast.error("Terjadi kesalahan saat memperbarui pengajar");

View File

@@ -29,7 +29,7 @@ function DetailPengajar() {
detailState.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/pendidikan/info-sekolah-paud/pengajar")
router.push("/admin/pendidikan/info-sekolah/pengajar")
}
}
@@ -78,7 +78,7 @@ function DetailPengajar() {
<Button
onClick={() => {
if (detailState.findUnique.data) {
router.push(`/admin/pendidikan/info-sekolah-paud/pengajar/${detailState.findUnique.data.id}/edit`);
router.push(`/admin/pendidikan/info-sekolah/pengajar/${detailState.findUnique.data.id}/edit`);
}
}}
disabled={!detailState.findUnique.data}

View File

@@ -28,7 +28,7 @@ function CreatePengajar() {
await stateCreate.create.create();
resetForm();
router.push("/admin/pendidikan/info-sekolah-paud/pengajar")
router.push("/admin/pendidikan/info-sekolah/pengajar")
}
return (
<Box>

View File

@@ -55,7 +55,7 @@ function ListPengajar({ search }: { search: string }) {
<Stack>
<JudulList
title='List Pengajar'
href='/admin/pendidikan/info-sekolah-paud/pengajar/create'
href='/admin/pendidikan/info-sekolah/pengajar/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
@@ -72,7 +72,7 @@ function ListPengajar({ search }: { search: string }) {
<TableTd>{item.nama}</TableTd>
<TableTd>{item.lembaga.nama}</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/pengajar/${item.id}`)}>
<Button onClick={() => router.push(`/admin/pendidikan/info-sekolah/pengajar/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>

View File

@@ -55,7 +55,7 @@ function EditSiswa() {
lembagaId: formData.lembagaId.trim(),
}
await siswaState.edit.update()
router.push("/admin/pendidikan/info-sekolah-paud/siswa");
router.push("/admin/pendidikan/info-sekolah/siswa");
} catch (error) {
console.error("Error updating siswa:", error);
toast.error("Terjadi kesalahan saat memperbarui siswa");

View File

@@ -29,7 +29,7 @@ function DetailSiswa() {
detailState.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
router.push("/admin/pendidikan/info-sekolah-paud/siswa")
router.push("/admin/pendidikan/info-sekolah/siswa")
}
}
@@ -78,7 +78,7 @@ function DetailSiswa() {
<Button
onClick={() => {
if (detailState.findUnique.data) {
router.push(`/admin/pendidikan/info-sekolah-paud/siswa/${detailState.findUnique.data.id}/edit`);
router.push(`/admin/pendidikan/info-sekolah/siswa/${detailState.findUnique.data.id}/edit`);
}
}}
disabled={!detailState.findUnique.data}

View File

@@ -28,7 +28,7 @@ function CreateSiswa() {
await stateCreate.create.create();
resetForm();
router.push("/admin/pendidikan/info-sekolah-paud/siswa")
router.push("/admin/pendidikan/info-sekolah/siswa")
}
return (
<Box>

View File

@@ -55,7 +55,7 @@ function ListSiswa({ search }: { search: string }) {
<Stack>
<JudulList
title='List Siswa'
href='/admin/pendidikan/info-sekolah-paud/siswa/create'
href='/admin/pendidikan/info-sekolah/siswa/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
@@ -72,7 +72,7 @@ function ListSiswa({ search }: { search: string }) {
<TableTd>{item.nama}</TableTd>
<TableTd>{item.lembaga.nama}</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/siswa/${item.id}`)}>
<Button onClick={() => router.push(`/admin/pendidikan/info-sekolah/siswa/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>