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

Fix UI Admin Menu Pendidikam, Add Menu User & Role

Browse Source
This commit is contained in:
nico
2025-09-02 18:08:53 +08:00
parent 7ae83788b4
commit fa9601e126
86 changed files with 5349 additions and 2649 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx
View File

@@ -1,83 +1,163 @@
'use client'
import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import {
Box,
Button,
Center,
Group,
Paper,
Stack,
Text,
TextInput,
Title,
Tooltip
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconArrowBack } from '@tabler/icons-react';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
const ProgramPendidikanAnakTextEditor = dynamic(() => import('../../_lib/programPendidikanAnakTextEditor').then(mod => mod.ProgramPendidikanAnakTextEditor), {
ssr: false,
});
const ProgramPendidikanAnakTextEditor = dynamic(
() =>
import('../../_lib/programPendidikanAnakTextEditor').then(
(mod) => mod.ProgramPendidikanAnakTextEditor
),
{ ssr: false }
);
function EditTujuanProgram() {
const router = useRouter()
const editState = useProxy(stateProgramPendidikanAnak.programUnggulanState)
const router = useRouter();
const editState = useProxy(stateProgramPendidikanAnak.programUnggulanState);
const [judul, setJudul] = useState('');
const [content, setContent] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
// load data once
useShallowEffect(() => {
if (!editState.findById.data) {
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
editState.findById.initialize();
}
}, []);
useEffect(() => {
if (editState.findById.data) {
setJudul(editState.findById.data.judul ?? '')
setContent(editState.findById.data.deskripsi ?? '')
setJudul(editState.findById.data.judul ?? '');
setContent(editState.findById.data.deskripsi ?? '');
}
}, [editState.findById.data])
}, [editState.findById.data]);
const submit = () => {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
editState.update.save(editState.findById.data)
const handleSubmit = async () => {
if (!judul.trim()) {
toast.error('Judul wajib diisi');
return;
}
router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan')
setIsSubmitting(true);
try {
if (editState.findById.data) {
editState.findById.data.judul = judul;
editState.findById.data.deskripsi = content;
await editState.update.save(editState.findById.data);
toast.success('Berhasil menyimpan perubahan');
router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan');
}
} catch (err) {
console.error('Error saving:', err);
toast.error('Gagal menyimpan data');
} finally {
setIsSubmitting(false);
}
};
const handleBack = () => router.back();
// loading state
if (editState.findById.loading) {
return (
<Box>
<Center h={400}>
<Text>Memuat data program unggulan...</Text>
</Center>
</Box>
);
}
return (
<Box>
<Stack gap={'xs'}>
<Box>
<Button
variant={'subtle'}
onClick={() => router.back()}
>
<IconArrowBack color={colors['blue-button']} size={20} />
</Button>
</Box>
<Box>
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
<Stack gap={'xs'}>
<Title order={3}>Edit Program Unggulan</Title>
<TextInput
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
value={judul}
onChange={(e) => setJudul(e.target.value)}
/>
<Text fw={"bold"}>Deskripsi</Text>
<Stack gap="xs">
<Group mb="md">
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
<Button
variant="subtle"
onClick={handleBack}
p="xs"
radius="md"
>
<IconArrowBack color={colors['blue-button']} size={24} />
</Button>
</Tooltip>
<Title order={4} ml="sm" c="dark">
Edit Program Unggulan
</Title>
</Group>
<Paper
w={{ base: '100%', md: '50%' }}
bg={colors['white-1']}
p="md"
radius="md"
shadow="sm"
style={{ border: '1px solid #e0e0e0' }}
>
<Stack gap="xs">
<Title order={3}>Edit Tujuan Program</Title>
{/* Judul Field */}
<TextInput
label={<Text fw="bold">Judul</Text>}
placeholder="Masukkan judul program"
value={judul}
onChange={(e) => setJudul(e.currentTarget.value)}
error={!judul && 'Judul wajib diisi'}
/>
{/* Deskripsi Field */}
<Box>
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
<ProgramPendidikanAnakTextEditor
showSubmit={false}
onChange={setContent}
initialContent={content}
/>
<Group>
<Button
bg={colors['blue-button']}
onClick={submit}
loading={editState.update.loading}
>
Submit
</Button>
</Group>
</Stack>
</Paper>
</Box>
</Box>
{/* Submit & Cancel */}
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
>
Batal
</Button>
</Group>
</Stack>
</Paper>
</Stack>
</Box>
);