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

Fix QC Kak Inno Admin, Fix QC Keano UI User, Fix QC Pak jun tabel apbdes

Browse Source
This commit is contained in:
nico
2025-11-12 17:42:31 +08:00
parent 417a8937f5
commit 9622eb5a9a
354 changed files with 11444 additions and 4012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx
View File

@@ -3,7 +3,7 @@
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 } from '@mantine/core';
import { Box, Button, Group, Loader, 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';
@@ -14,10 +14,15 @@ function EditProgramKreatifDesa() {
const state = useProxy(beasiswaDesaState.keunggulanProgram)
const params = useParams()
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
const [formData, setFormData] = useState({
judul: '',
deskripsi: '',
})
const [originalData, setOriginalData] = useState({
judul: '',
deskripsi: '',
})
useEffect(() => {
const loadProgramKreatif = async () => {
@@ -39,6 +44,10 @@ function EditProgramKreatifDesa() {
judul: data.judul,
deskripsi: data.deskripsi,
});
setOriginalData({
judul: data.judul,
deskripsi: data.deskripsi,
});
}
} catch (error) {
console.error("Error loading pengelolaan sampah:", error);
@@ -49,10 +58,24 @@ function EditProgramKreatifDesa() {
loadProgramKreatif();
}, [params?.id]);
const handleResetForm = () => {
const resetData = {
judul: originalData.judul,
deskripsi: originalData.deskripsi,
};
setFormData(resetData);
// ⬇️ tambahkan sinkronisasi ke state global
state.update.form = { ...resetData };
toast.info("Form dikembalikan ke data awal");
};
const handleSubmit = async () => {
try {
setIsSubmitting(true);
state.update.form = {
...state.update.form,
judul: formData.judul.trim(),
@@ -65,6 +88,8 @@ function EditProgramKreatifDesa() {
} catch (error) {
console.error("Error updating keunggulan program:", error);
toast.error(error instanceof Error ? error.message : "Gagal memperbarui data keunggulan program");
} finally {
setIsSubmitting(false);
}
}
return (
@@ -95,7 +120,7 @@ function EditProgramKreatifDesa() {
<TextInput
label="Judul"
placeholder="Masukkan judul"
defaultValue={formData.judul}
value={formData.judul}
onChange={(e) => {
const value = e.target.value;
setFormData(prev => ({
@@ -120,6 +145,17 @@ function EditProgramKreatifDesa() {
</Box>
<Group justify="right" mt="md">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -130,7 +166,7 @@ function EditProgramKreatifDesa() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

22
src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx
View File

@@ -2,9 +2,10 @@
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 } from '@mantine/core';
import { Box, Button, Group, Loader, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
@@ -13,6 +14,7 @@ import { useProxy } from 'valtio/utils';
function CreateKeunggulanProgram() {
const stateCreate = useProxy(beasiswaDesaState.keunggulanProgram);
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
const resetForm = () => {
stateCreate.create.form = {
@@ -23,11 +25,14 @@ function CreateKeunggulanProgram() {
const handleSubmit = async () => {
try {
setIsSubmitting(true);
await stateCreate.create.create();
resetForm();
router.push("/admin/pendidikan/beasiswa-desa/keunggulan-program");
} catch (error) {
console.error('Error creating keunggulan program:', error);
} finally {
setIsSubmitting(false);
}
};
@@ -59,7 +64,7 @@ function CreateKeunggulanProgram() {
<TextInput
label="Judul"
placeholder="Masukkan judul"
defaultValue={stateCreate.create.form.judul || ''}
value={stateCreate.create.form.judul || ''}
onChange={(e) => (stateCreate.create.form.judul = e.target.value)}
required
/>
@@ -77,6 +82,17 @@ function CreateKeunggulanProgram() {
</Box>
<Group justify="right" mt="md">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={resetForm}
>
Reset
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -87,7 +103,7 @@ function CreateKeunggulanProgram() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

49
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx
View File

@@ -7,6 +7,7 @@ import {
Button,
Center,
Group,
Loader,
Paper,
Stack,
Text,
@@ -36,6 +37,10 @@ function EditFasilitasYangDisediakan() {
// === State lokal form ===
const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState({
judul: '',
deskripsi: '',
});
// Load data pertama kali
useShallowEffect(() => {
@@ -51,6 +56,10 @@ function EditFasilitasYangDisediakan() {
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? ''
});
setOriginalData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? '',
});
}
}, [editState.findById.data]);
@@ -58,6 +67,14 @@ function EditFasilitasYangDisediakan() {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleResetForm = () => {
setFormData({
judul: originalData.judul,
deskripsi: originalData.deskripsi,
});
toast.info("Form dikembalikan ke data awal");
};
const handleSubmit = async () => {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
@@ -146,23 +163,31 @@ function EditFasilitasYangDisediakan() {
</Box>
{/* Tombol Aksi */}
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<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)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>

46
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx
View File

@@ -7,6 +7,7 @@ import {
Button,
Center,
Group,
Loader,
Paper,
Stack,
Text,
@@ -36,6 +37,7 @@ function EditLokasiDanJadwal() {
// state lokal untuk form, tidak langsung merubah global state
const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState({ judul: '', deskripsi: '' });
// Load data sekali
useShallowEffect(() => {
@@ -51,6 +53,10 @@ function EditLokasiDanJadwal() {
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? ''
});
setOriginalData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? ''
});
}
}, [editState.findById.data]);
@@ -58,6 +64,14 @@ function EditLokasiDanJadwal() {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleResetForm = () => {
setFormData({
judul: originalData.judul,
deskripsi: originalData.deskripsi,
});
toast.info("Form dikembalikan ke data awal");
};
const handleSubmit = async () => {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
@@ -147,23 +161,31 @@ function EditLokasiDanJadwal() {
</Box>
{/* Action Button */}
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<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)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>

46
src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx
View File

@@ -7,6 +7,7 @@ import {
Button,
Center,
Group,
Loader,
Paper,
Stack,
Text,
@@ -36,6 +37,7 @@ function EditTujuanProgram() {
// gabung judul & content jadi formData
const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState({ judul: '', deskripsi: '' });
// load data sekali
useShallowEffect(() => {
@@ -49,6 +51,10 @@ function EditTujuanProgram() {
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? '',
});
setOriginalData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? '',
});
}
}, [editState.findById.data]);
@@ -56,6 +62,14 @@ function EditTujuanProgram() {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleResetForm = () => {
setFormData({
judul: originalData.judul,
deskripsi: originalData.deskripsi,
});
toast.info("Form dikembalikan ke data awal");
};
const handleSubmit = async () => {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
@@ -139,23 +153,31 @@ function EditTujuanProgram() {
</Box>
{/* Submit & Cancel */}
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<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)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>

60
src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx
View File

@@ -2,18 +2,20 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
import { Box, Button, Loader, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
import { toast } from 'react-toastify';
export default function EditDataPendidikan() {
const router = useRouter();
const params = useParams() as { id: string };
const stateDPM = useProxy(dataPendidikan);
const id = params.id;
const [isSubmitting, setIsSubmitting] = useState(false);
// state lokal untuk form
const [formData, setFormData] = useState({
@@ -21,6 +23,11 @@ export default function EditDataPendidikan() {
jumlah: '',
});
const [originalData, setOriginalData] = useState({
name: '',
jumlah: '',
});
// Load data saat mount
useEffect(() => {
if (id) {
@@ -31,21 +38,41 @@ export default function EditDataPendidikan() {
name: data.name || '',
jumlah: data.jumlah || '',
});
setOriginalData({
name: data.name || '',
jumlah: data.jumlah || '',
});
}
});
}
}, [id]);
const handleResetForm = () => {
setFormData({
name: originalData.name,
jumlah: originalData.jumlah,
});
toast.info("Form dikembalikan ke data awal");
};
const handleChange = (field: 'name' | 'jumlah', value: string) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
// update global state hanya saat submit
try {
setIsSubmitting(true);
// update global state hanya saat submit
stateDPM.update.id = id;
stateDPM.update.form = { ...formData };
await stateDPM.update.submit();
router.push('/admin/pendidikan/data-pendidikan');
} catch (error) {
console.error("Error updating data pendidikan:", error);
toast.error("Terjadi kesalahan saat memperbarui data pendidikan");
} finally {
setIsSubmitting(false);
}
};
return (
@@ -83,19 +110,30 @@ export default function EditDataPendidikan() {
radius="md"
required
/>
<Group justify="right" mt="sm">
<Group justify="right">
{/* Tombol Batal */}
<Button
onClick={handleSubmit}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, ${colors['blue-button-trans']})`,
color: 'white',
boxShadow: '0 0 10px rgba(0,123,255,0.5)',
'&:hover': { opacity: 0.9 },
}}
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Simpan
Batal
</Button>
{/* Tombol Simpan */}
<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)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

59
src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx
View File

@@ -1,31 +1,41 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client'
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { Box, Button, Group, Loader, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
import { toast } from 'react-toastify';
export default function CreateDataPendidikan() {
const stateDPM = useProxy(dataPendidikan);
const [chartData, setChartData] = useState<any[]>([]);
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
const resetForm = () => {
stateDPM.create.form = { name: '', jumlah: '' };
};
const handleSubmit = async () => {
const id = await stateDPM.create.create();
if (id) {
const idStr = String(id);
await stateDPM.findUnique.load(idStr);
if (stateDPM.findUnique.data) setChartData([stateDPM.findUnique.data]);
try {
setIsSubmitting(true);
const id = await stateDPM.create.create();
if (id) {
const idStr = String(id);
await stateDPM.findUnique.load(idStr);
if (stateDPM.findUnique.data) setChartData([stateDPM.findUnique.data]);
}
resetForm();
router.push('/admin/pendidikan/data-pendidikan');
} catch (error) {
console.error("Error creating data pendidikan:", error);
toast.error("Terjadi kesalahan saat menambahkan data pendidikan");
} finally {
setIsSubmitting(false);
}
resetForm();
router.push('/admin/pendidikan/data-pendidikan');
};
return (
@@ -49,7 +59,7 @@ export default function CreateDataPendidikan() {
<TextInput
label="Nama Pendidikan"
placeholder="Contoh: SD, SMP, SMA"
defaultValue={stateDPM.create.form.name}
value={stateDPM.create.form.name}
onChange={(e) => (stateDPM.create.form.name = e.currentTarget.value)}
radius="md"
required
@@ -57,25 +67,36 @@ export default function CreateDataPendidikan() {
<TextInput
label="Jumlah Peserta"
placeholder="Masukkan jumlah peserta"
defaultValue={stateDPM.create.form.jumlah}
value={stateDPM.create.form.jumlah}
onChange={(e) => (stateDPM.create.form.jumlah = e.currentTarget.value)}
radius="md"
type="number"
required
/>
<Group justify="right" mt="sm">
<Group justify="right">
{/* Tombol Batal */}
<Button
onClick={handleSubmit}
style={{
background: `linear-gradient(135deg, ${colors['blue-button']}, ${colors['blue-button-trans']})`,
color: 'white',
boxShadow: '0 0 10px rgba(0,123,255,0.5)',
'&:hover': { opacity: 0.9 },
}}
variant="outline"
color="gray"
radius="md"
size="md"
onClick={resetForm}
>
Simpan
Reset
</Button>
{/* Tombol Simpan */}
<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)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

27
src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx
View File

@@ -7,6 +7,7 @@ import {
Box,
Button,
Group,
Loader,
Paper,
Stack,
TextInput,
@@ -26,6 +27,8 @@ function EditJenjangPendidikan() {
const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
const [formData, setFormData] = useState({ nama: '' });
const [originalData, setOriginalData] = useState({ nama: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
const [loading, setLoading] = useState(true);
// Load data sekali saat component mount
@@ -38,6 +41,7 @@ function EditJenjangPendidikan() {
if (data) {
stateJenjang.edit.id = id; // tetap simpan di global state
setFormData({ nama: data.nama || '' });
setOriginalData({ nama: data.nama || '' });
}
} catch (error) {
console.error('Error loading jenjang pendidikan:', error);
@@ -61,6 +65,7 @@ function EditJenjangPendidikan() {
}
try {
setIsSubmitting(true);
stateJenjang.edit.form = { nama: formData.nama.trim() };
if (!stateJenjang.edit.id) stateJenjang.edit.id = id;
@@ -72,9 +77,18 @@ function EditJenjangPendidikan() {
} catch (error) {
console.error('Error updating jenjang pendidikan:', error);
toast.error('Terjadi kesalahan saat memperbarui jenjang pendidikan');
} finally {
setIsSubmitting(false);
}
};
const handleResetForm = () => {
setFormData({
nama: originalData.nama,
});
toast.info("Form dikembalikan ke data awal");
};
return (
<Box px={{ base: 'sm', md: 'lg' }} py="md">
{/* Header */}
@@ -107,6 +121,17 @@ function EditJenjangPendidikan() {
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -117,7 +142,7 @@ function EditJenjangPendidikan() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

38
src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx
View File

@@ -5,6 +5,7 @@ import {
Box,
Button,
Group,
Loader,
Paper,
Stack,
TextInput,
@@ -12,7 +13,7 @@ import {
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
@@ -20,6 +21,7 @@ import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
function CreateJenjangPendidikan() {
const router = useRouter();
const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
stateJenjang.findMany.load();
@@ -32,13 +34,20 @@ function CreateJenjangPendidikan() {
};
const handleSubmit = async () => {
if (!stateJenjang.create.form.nama) {
return toast.warn('Nama jenjang pendidikan tidak boleh kosong');
}
try {
if (!stateJenjang.create.form.nama) {
return toast.warn('Nama jenjang pendidikan tidak boleh kosong');
}
await stateJenjang.create.create();
resetForm();
router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan');
setIsSubmitting(true);
await stateJenjang.create.create();
resetForm();
router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan');
} catch (error) {
console.error(error);
} finally {
setIsSubmitting(false);
}
};
return (
@@ -71,12 +80,23 @@ function CreateJenjangPendidikan() {
<TextInput
label="Nama Jenjang Pendidikan"
placeholder="Masukkan nama jenjang pendidikan"
defaultValue={stateJenjang.create.form.nama || ''}
value={stateJenjang.create.form.nama || ''}
onChange={(e) => (stateJenjang.create.form.nama = e.target.value)}
required
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={resetForm}
>
Reset
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -87,7 +107,7 @@ function CreateJenjangPendidikan() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

62
src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx
View File

@@ -7,6 +7,7 @@ import {
Box,
Button,
Group,
Loader,
Paper,
Select,
Stack,
@@ -24,12 +25,18 @@ export default function EditLembaga() {
const { id } = useParams<{ id: string }>();
const state = useProxy(infoSekolahPaud.lembagaPendidikan);
const jenjangPendidikanList = infoSekolahPaud.jenjangPendidikan.findMany.data;
const [isSubmitting, setIsSubmitting] = useState(false);
const [form, setForm] = useState({
nama: '',
jenjangId: '',
});
const [originalData, setOriginalData] = useState({
nama: '',
jenjangId: '',
});
// Load jenjang pendidikan dan data lembaga
useEffect(() => {
infoSekolahPaud.jenjangPendidikan.findMany.load();
@@ -41,6 +48,10 @@ export default function EditLembaga() {
nama: data.nama,
jenjangId: data.jenjangId,
});
setOriginalData({
nama: data.nama,
jenjangId: data.jenjangId,
});
}
});
}
@@ -50,21 +61,37 @@ export default function EditLembaga() {
setForm((prev) => ({ ...prev, [field]: value }));
};
const handleResetForm = () => {
setForm({
nama: originalData.nama,
jenjangId: originalData.jenjangId,
});
toast.info('Form dikembalikan ke data awal');
};
const handleSubmit = async () => {
if (!form.nama || !form.jenjangId) {
toast.warn('Nama dan jenjang pendidikan harus diisi');
return;
}
try {
setIsSubmitting(true);
if (!form.nama || !form.jenjangId) {
toast.warn('Nama dan jenjang pendidikan harus diisi');
return;
}
// Update global state hanya saat submit
state.edit.id = id;
state.edit.form = form;
// Update global state hanya saat submit
state.edit.id = id;
state.edit.form = form;
const result = await state.edit.update();
const result = await state.edit.update();
if (result) {
toast.success('Data berhasil diperbarui');
router.push('/admin/pendidikan/info-sekolah/lembaga');
if (result) {
toast.success('Data berhasil diperbarui');
router.push('/admin/pendidikan/info-sekolah/lembaga');
}
} catch (error) {
console.error('Error updating lembaga:', error);
toast.error('Gagal memperbarui lembaga');
} finally {
setIsSubmitting(false);
}
};
@@ -119,6 +146,17 @@ export default function EditLembaga() {
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -129,7 +167,7 @@ export default function EditLembaga() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

34
src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx
View File

@@ -5,6 +5,7 @@ import {
Box,
Button,
Group,
Loader,
Paper,
Select,
Stack,
@@ -14,13 +15,15 @@ import {
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { useProxy } from 'valtio/utils';
import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
import { toast } from 'react-toastify';
function CreateLembaga() {
const router = useRouter();
const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan);
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
stateLembaga.findMany.load();
@@ -35,9 +38,17 @@ function CreateLembaga() {
};
const handleSubmit = async () => {
await stateLembaga.create.create();
resetForm();
router.push('/admin/pendidikan/info-sekolah/lembaga');
try {
setIsSubmitting(true);
await stateLembaga.create.create();
resetForm();
router.push('/admin/pendidikan/info-sekolah/lembaga');
} catch (error) {
console.error('Error creating lembaga:', error);
toast.error('Gagal menambahkan lembaga');
} finally {
setIsSubmitting(false);
}
};
return (
@@ -63,7 +74,7 @@ function CreateLembaga() {
>
<Stack gap="md">
<TextInput
defaultValue={stateLembaga.create.form.nama}
value={stateLembaga.create.form.nama}
onChange={(val) => {
stateLembaga.create.form.nama = val.target.value;
}}
@@ -90,6 +101,17 @@ function CreateLembaga() {
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={resetForm}
>
Reset
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -100,7 +122,7 @@ function CreateLembaga() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

34
src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx
View File

@@ -7,6 +7,7 @@ import {
Box,
Button,
Group,
Loader,
Paper,
Select,
Stack,
@@ -29,10 +30,15 @@ function EditPengajar() {
const params = useParams();
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
const [formData, setFormData] = useState<FormPengajar>({
nama: '',
lembagaId: ''
});
const [originalData, setOriginalData] = useState<FormPengajar>({
nama: '',
lembagaId: ''
});
useEffect(() => {
const loadData = async () => {
@@ -47,6 +53,10 @@ function EditPengajar() {
nama: data.nama || '',
lembagaId: data.lembagaId || '',
});
setOriginalData({
nama: data.nama || '',
lembagaId: data.lembagaId || '',
});
}
} catch (err) {
console.error(err);
@@ -57,12 +67,21 @@ function EditPengajar() {
loadData();
}, [params?.id]);
const handleResetForm = () => {
setFormData({
nama: originalData.nama,
lembagaId: originalData.lembagaId,
});
toast.info('Form dikembalikan ke data awal');
};
const handleChange = (field: keyof FormPengajar, value: string) => {
setFormData(prev => ({ ...prev, [field]: value }));
};
const handleSubmit = async () => {
try {
setIsSubmitting(true);
// update global state hanya saat submit
pengajarState.edit.form = {
...pengajarState.edit.form,
@@ -75,6 +94,8 @@ function EditPengajar() {
} catch (err) {
console.error(err);
toast.error("Terjadi kesalahan saat memperbarui pengajar");
} finally {
setIsSubmitting(false);
}
};
@@ -121,6 +142,17 @@ function EditPengajar() {
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -131,7 +163,7 @@ function EditPengajar() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

41
src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/create/page.tsx
View File

@@ -6,6 +6,7 @@ import {
Box,
Button,
Group,
Loader,
Paper,
Select,
Stack,
@@ -15,13 +16,14 @@ import {
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreatePengajar() {
const router = useRouter();
const stateCreate = useProxy(infoSekolahPaud.pengajar);
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
stateCreate.findMany.load();
@@ -36,14 +38,22 @@ function CreatePengajar() {
};
const handleSubmit = async () => {
if (!stateCreate.create.form.nama || !stateCreate.create.form.lembagaId) {
return toast.warn('Nama dan Lembaga wajib diisi!');
try {
setIsSubmitting(true);
if (!stateCreate.create.form.nama || !stateCreate.create.form.lembagaId) {
return toast.warn('Nama dan Lembaga wajib diisi!');
}
await stateCreate.create.create();
resetForm();
router.push('/admin/pendidikan/info-sekolah/pengajar');
} catch (error) {
console.error('Error creating pengajar:', error);
toast.error('Terjadi kesalahan saat menambahkan pengajar');
} finally {
setIsSubmitting(false);
}
await stateCreate.create.create();
resetForm();
router.push('/admin/pendidikan/info-sekolah/pengajar');
};
return (
@@ -71,7 +81,7 @@ function CreatePengajar() {
<TextInput
label={<Text fw="bold" fz="sm">Nama</Text>}
placeholder="Masukkan nama pengajar"
defaultValue={stateCreate.create.form.nama}
value={stateCreate.create.form.nama}
onChange={(e) => (stateCreate.create.form.nama = e.target.value)}
required
/>
@@ -91,6 +101,17 @@ function CreatePengajar() {
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={resetForm}
>
Reset
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -101,7 +122,7 @@ function CreatePengajar() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

35
src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx
View File

@@ -7,6 +7,7 @@ import {
Box,
Button,
Group,
Loader,
Paper,
Select,
Stack,
@@ -29,6 +30,12 @@ function EditSiswa() {
const siswaState = useProxy(infoSekolahPaud.siswa);
const params = useParams();
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState({
nama: "",
lembagaId: "",
});
const [formData, setFormData] = useState<FormSiswa>({
nama: '',
@@ -48,6 +55,10 @@ function EditSiswa() {
nama: data.nama || '',
lembagaId: data.lembagaId || '',
});
setOriginalData({
nama: data.nama || '',
lembagaId: data.lembagaId || '',
});
}
} catch (error) {
console.error('Error loading siswa:', error);
@@ -67,9 +78,18 @@ function EditSiswa() {
}));
};
const handleResetForm = () => {
setFormData({
nama: originalData.nama,
lembagaId: originalData.lembagaId,
});
toast.info('Form dikembalikan ke data awal');
};
// Submit ke global state
const handleSubmit = async () => {
try {
setIsSubmitting(true);
siswaState.edit.form = {
...siswaState.edit.form,
nama: formData.nama.trim(),
@@ -81,6 +101,8 @@ function EditSiswa() {
} catch (error) {
console.error('Error updating siswa:', error);
toast.error('Terjadi kesalahan saat memperbarui siswa');
} finally {
setIsSubmitting(false);
}
};
@@ -129,6 +151,17 @@ function EditSiswa() {
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -139,7 +172,7 @@ function EditSiswa() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

35
src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/create/page.tsx
View File

@@ -6,6 +6,7 @@ import {
Box,
Button,
Group,
Loader,
Paper,
Select,
Stack,
@@ -15,12 +16,14 @@ import {
} from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreateSiswa() {
const router = useRouter();
const stateCreate = useProxy(infoSekolahPaud.siswa);
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
stateCreate.findMany.load();
@@ -35,10 +38,17 @@ function CreateSiswa() {
};
const handleSubmit = async () => {
await stateCreate.create.create();
resetForm();
router.push('/admin/pendidikan/info-sekolah/siswa');
try {
setIsSubmitting(true);
await stateCreate.create.create();
resetForm();
router.push('/admin/pendidikan/info-sekolah/siswa');
} catch (error) {
console.error('Error creating siswa:', error);
toast.error('Gagal menambahkan siswa');
} finally {
setIsSubmitting(false);
}
};
return (
@@ -64,7 +74,7 @@ function CreateSiswa() {
>
<Stack gap="md">
<TextInput
defaultValue={stateCreate.create.form.nama}
value={stateCreate.create.form.nama}
onChange={(val) => {
stateCreate.create.form.nama = val.target.value;
}}
@@ -90,6 +100,17 @@ function CreateSiswa() {
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={resetForm}
>
Reset
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -100,7 +121,7 @@ function CreateSiswa() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

56
src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx
View File

@@ -6,6 +6,7 @@ import {
Button,
Center,
Group,
Loader,
Paper,
Stack,
Text,
@@ -34,6 +35,7 @@ function EditJenisProgramYangDiselenggarakan() {
const [formData, setFormData] = useState({ judul: '', content: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState({ judul: '', content: '' });
// Load data pertama kali
useShallowEffect(() => {
@@ -49,6 +51,10 @@ function EditJenisProgramYangDiselenggarakan() {
judul: editState.findById.data.judul ?? '',
content: editState.findById.data.deskripsi ?? '',
});
setOriginalData({
judul: editState.findById.data.judul ?? '',
content: editState.findById.data.deskripsi ?? '',
});
}
}, [editState.findById.data]);
@@ -56,6 +62,14 @@ function EditJenisProgramYangDiselenggarakan() {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleResetForm = () => {
setFormData({
judul: originalData.judul,
content: originalData.content,
});
toast.info("Form dikembalikan ke data awal");
};
const handleSubmit = async () => {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
@@ -137,24 +151,32 @@ function EditJenisProgramYangDiselenggarakan() {
/>
</Box>
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
>
Batal
</Button>
</Group>
{/* Tombol Simpan */}
<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)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Stack>

49
src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx
View File

@@ -7,6 +7,7 @@ import {
Button,
Center,
Group,
Loader,
Paper,
Stack,
Text,
@@ -39,6 +40,10 @@ function EditTempatKegiatan() {
deskripsi: '',
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState({
judul: '',
deskripsi: '',
});
// load data pertama kali
useShallowEffect(() => {
@@ -54,6 +59,10 @@ function EditTempatKegiatan() {
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? '',
});
setOriginalData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? '',
});
}
}, [editState.findById.data]);
@@ -61,6 +70,14 @@ function EditTempatKegiatan() {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleResetForm = () => {
setFormData({
judul: originalData.judul,
deskripsi: originalData.deskripsi,
});
toast.info("Form dikembalikan ke data awal");
};
const handleSubmit = async () => {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
@@ -143,23 +160,31 @@ function EditTempatKegiatan() {
/>
</Box>
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<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)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>

49
src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx
View File

@@ -8,6 +8,7 @@ import {
Center,
Group,
Paper,
Loader,
Stack,
Text,
TextInput,
@@ -32,6 +33,10 @@ function EditTujuanProgram() {
const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState({
judul: '',
deskripsi: '',
});
// Load data pertama kali
useShallowEffect(() => {
@@ -47,6 +52,10 @@ function EditTujuanProgram() {
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? ''
});
setOriginalData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? '',
});
}
}, [editState.findById.data]);
@@ -54,6 +63,14 @@ function EditTujuanProgram() {
setFormData(prev => ({ ...prev, [field]: value }));
};
const handleResetForm = () => {
setFormData({
judul: originalData.judul,
deskripsi: originalData.deskripsi,
});
toast.info("Form dikembalikan ke data awal");
};
const handleSubmit = async () => {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
@@ -129,23 +146,31 @@ function EditTujuanProgram() {
/>
</Box>
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<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)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>

70
src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx
View File

@@ -1,7 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
import { ActionIcon, Loader, Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone';
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
@@ -18,6 +18,7 @@ function EditPerpustakaanDigital() {
const router = useRouter();
const params = useParams();
const editState = useProxy(perpustakaanDigitalState.dataPerpustakaan);
const [isSubmitting, setIsSubmitting] = useState(false);
const [formData, setFormData] = useState({
judul: '',
@@ -26,6 +27,14 @@ function EditPerpustakaanDigital() {
imageId: '',
});
const [originalData, setOriginalData] = useState({
judul: '',
deskripsi: '',
kategoriId: '',
imageId: '',
imageUrl: ''
});
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
@@ -48,6 +57,14 @@ function EditPerpustakaanDigital() {
imageId: data.imageId || '',
});
setOriginalData({
judul: data.judul || '',
deskripsi: data.deskripsi || '',
kategoriId: data.kategoriId || '',
imageId: data.imageId || '',
imageUrl: data.image?.link || '',
});
if (data.image?.link) setPreviewImage(data.image.link);
} catch (error) {
console.error(error);
@@ -62,8 +79,20 @@ function EditPerpustakaanDigital() {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleResetForm = () => {
setFormData({
judul: originalData.judul,
deskripsi: originalData.deskripsi,
kategoriId: originalData.kategoriId,
imageId: originalData.imageId,
});
setPreviewImage(originalData.imageUrl || null);
setFile(null);
};
const handleSubmit = async () => {
try {
setIsSubmitting(true);
// Update global state hanya pas submit
editState.update.form = { ...editState.update.form, ...formData };
@@ -81,6 +110,8 @@ function EditPerpustakaanDigital() {
} catch (error) {
console.error(error);
toast.error('Terjadi kesalahan saat memperbarui data perpustakaan');
} finally {
setIsSubmitting(false);
}
};
@@ -120,7 +151,7 @@ function EditPerpustakaanDigital() {
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': [] }}
accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
radius="md"
p="xl"
>
@@ -139,14 +170,14 @@ function EditPerpustakaanDigital() {
Seret gambar atau klik untuk memilih file
</Text>
<Text size="sm" c="dimmed">
Maksimal 5MB, format gambar wajib
Maksimal 5MB, format gambar .png, .jpg, .jpeg, webp
</Text>
</Stack>
</Group>
</Dropzone>
{previewImage && (
<Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
<Box pos={"relative"} mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
<Image
src={previewImage}
alt="Preview"
@@ -154,6 +185,24 @@ function EditPerpustakaanDigital() {
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
loading="lazy"
/>
<ActionIcon
variant="filled"
color="red"
radius="xl"
size="sm"
pos="absolute"
top={5}
right={5}
onClick={() => {
setPreviewImage(null);
setFile(null);
}}
style={{
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
}}
>
<IconX size={14} />
</ActionIcon>
</Box>
)}
</Box>
@@ -190,6 +239,17 @@ function EditPerpustakaanDigital() {
{/* Submit Button */}
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -200,7 +260,7 @@ function EditPerpustakaanDigital() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

82
src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx
View File

@@ -3,7 +3,7 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
import colors from '@/con/colors';
import ApiFetch from '@/lib/api-fetch';
import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
import { ActionIcon, Box, Button, Group, Image, Loader, Paper, Select, 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';
@@ -16,6 +16,7 @@ function CreateDataPerpustakaan() {
const router = useRouter();
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
perpustakaanDigitalState.kategoriBuku.findMany.load();
@@ -33,24 +34,32 @@ function CreateDataPerpustakaan() {
};
const handleSubmit = async () => {
if (!file) {
return toast.warn("Pilih file gambar terlebih dahulu");
try {
if (!file) {
return toast.warn("Pilih file gambar terlebih dahulu");
}
setIsSubmitting(true);
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");
}
createState.create.form.imageId = uploaded.id;
await createState.create.create();
resetForm();
router.push("/admin/pendidikan/perpustakaan-digital/data-perpustakaan")
} catch (error) {
console.error("Error creating data perpustakaan:", error);
toast.error("Gagal menambahkan data perpustakaan");
} finally {
setIsSubmitting(false);
}
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");
}
createState.create.form.imageId = uploaded.id;
await createState.create.create();
resetForm();
router.push("/admin/pendidikan/perpustakaan-digital/data-perpustakaan")
};
return (
@@ -78,7 +87,7 @@ function CreateDataPerpustakaan() {
<TextInput
label={<Text fw="bold" fz="sm">Judul</Text>}
placeholder='Masukkan judul'
defaultValue={createState.create.form.judul}
value={createState.create.form.judul}
onChange={(val) => {
createState.create.form.judul = val.target.value;
}}
@@ -119,7 +128,7 @@ function CreateDataPerpustakaan() {
}}
onReject={() => toast.error('File tidak valid.')}
maxSize={5 * 1024 ** 2}
accept={{ 'image/*': [] }}
accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
radius="md"
p="xl"
>
@@ -140,7 +149,7 @@ function CreateDataPerpustakaan() {
</Dropzone>
{previewImage && (
<Box mt="sm" style={{ textAlign: 'center' }}>
<Box pos={"relative"} mt="sm" style={{ textAlign: 'center' }}>
<Image
src={previewImage}
alt="Preview"
@@ -148,12 +157,41 @@ function CreateDataPerpustakaan() {
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
loading="lazy"
/>
<ActionIcon
variant="filled"
color="red"
radius="xl"
size="sm"
pos="absolute"
top={5}
right={5}
onClick={() => {
setPreviewImage(null);
setFile(null);
}}
style={{
boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
}}
>
<IconX size={14} />
</ActionIcon>
</Box>
)}
</Box>
{/* Submit Button */}
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={resetForm}
>
Reset
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -164,7 +202,7 @@ function CreateDataPerpustakaan() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

35
src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx
View File

@@ -3,7 +3,7 @@
import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
import { Box, Button, Group, Loader, Paper, Stack, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
@@ -14,6 +14,11 @@ function EditKategoriBuku() {
const editState = useProxy(perpustakaanDigitalState.kategoriBuku);
const router = useRouter();
const params = useParams();
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState({
name: "",
})
const [formData, setFormData] = useState({ name: '' });
const [loading, setLoading] = useState(true);
@@ -27,6 +32,9 @@ function EditKategoriBuku() {
const data = await editState.update.load(id);
if (data) {
setFormData({ name: data.name || '' });
setOriginalData({
name: data.name || "",
});
}
} catch (error) {
console.error('Error loading kategori buku:', error);
@@ -43,8 +51,16 @@ function EditKategoriBuku() {
setFormData((prev) => ({ ...prev, name: e.target.value }));
};
const handleResetForm = () => {
setFormData({
name: originalData.name,
});
toast.info('Form dikembalikan ke data awal');
};
const handleSubmit = async () => {
try {
setIsSubmitting(true);
// Update global state hanya saat submit
editState.update.form = { ...editState.update.form, name: formData.name };
await editState.update.update();
@@ -53,6 +69,8 @@ function EditKategoriBuku() {
} catch (error) {
console.error('Error updating kategori buku:', error);
toast.error('Terjadi kesalahan saat memperbarui kategori buku');
} finally {
setIsSubmitting(false);
}
};
@@ -86,6 +104,18 @@ function EditKategoriBuku() {
/>
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -95,9 +125,8 @@ function EditKategoriBuku() {
color: '#fff',
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
disabled={loading || !formData.name.trim()}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

34
src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx
View File

@@ -1,14 +1,17 @@
'use client'
import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
import colors from '@/con/colors';
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { Box, Button, Loader, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
import { IconArrowBack } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
function CreateKategoriBuku() {
const createState = useProxy(perpustakaanDigitalState.kategoriBuku)
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
const resetForm = () => {
createState.create.form = {
@@ -17,9 +20,17 @@ function CreateKategoriBuku() {
};
const handleSubmit = async () => {
await createState.create.create();
resetForm();
router.push("/admin/pendidikan/perpustakaan-digital/kategori-buku");
try {
setIsSubmitting(true);
await createState.create.create();
resetForm();
router.push("/admin/pendidikan/perpustakaan-digital/kategori-buku");
} catch (error) {
console.error("Error creating kategori buku:", error);
toast.error("Terjadi kesalahan saat menambahkan kategori buku");
} finally {
setIsSubmitting(false);
}
};
return (
@@ -47,7 +58,7 @@ function CreateKategoriBuku() {
<TextInput
label={<Text fw="bold" fz="sm">Nama Kategori Buku</Text>}
placeholder='Masukkan nama kategori buku'
defaultValue={createState.create.form.name}
value={createState.create.form.name}
onChange={(val) => {
createState.create.form.name = val.target.value;
}}
@@ -55,6 +66,17 @@ function CreateKategoriBuku() {
/>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={resetForm}
>
Reset
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -65,7 +87,7 @@ function CreateKategoriBuku() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

65
src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/peminjam/[id]/edit/page.tsx
View File

@@ -8,6 +8,7 @@ import {
Box,
Button,
Group,
Loader,
Paper,
Select,
Stack,
@@ -29,6 +30,7 @@ function EditPeminjam() {
const stateEdit = useProxy(perpustakaanDigitalState.peminjamanBuku);
const router = useRouter();
const params = useParams();
const [isSubmitting, setIsSubmitting] = useState(false);
const [formData, setFormData] = useState<{
nama: string;
@@ -56,6 +58,18 @@ function EditPeminjam() {
catatan: '',
});
const [originalData, setOriginalData] = useState({
nama: "",
noTelp: "",
alamat: "",
bukuId: "",
tanggalPinjam: "",
batasKembali: "",
tanggalKembali: "",
status: "Dipinjam", // Default status
catatan: "",
})
useShallowEffect(() => {
perpustakaanDigitalState.dataPerpustakaan.findManyAll.load()
})
@@ -84,6 +98,22 @@ function EditPeminjam() {
status: (data.status as Status) ?? prev.status,
catatan: data.catatan ?? prev.catatan,
}));
setOriginalData((prev) => ({
...prev,
nama: data.nama ?? prev.nama,
noTelp: data.noTelp ?? prev.noTelp,
alamat: data.alamat ?? prev.alamat,
bukuId: data.bukuId ?? prev.bukuId,
buku: data.buku ? {
id: data.buku.id,
judul: data.buku.judul
} : undefined,
tanggalPinjam: data.tanggalPinjam ?? prev.tanggalPinjam,
batasKembali: data.batasKembali ?? prev.batasKembali,
tanggalKembali: data.tanggalKembali ?? prev.tanggalKembali,
status: (data.status as Status) ?? prev.status,
catatan: data.catatan ?? prev.catatan,
}));
}
} catch (error) {
console.error("Error loading peminjam:", error);
@@ -94,6 +124,22 @@ function EditPeminjam() {
loadPeminjam();
}, [params?.id]);
const handleResetForm = () => {
setFormData((prev) => ({
...prev,
nama: originalData.nama ?? prev.nama,
noTelp: originalData.noTelp ?? prev.noTelp,
alamat: originalData.alamat ?? prev.alamat,
bukuId: originalData.bukuId ?? prev.bukuId,
tanggalPinjam: originalData.tanggalPinjam ?? prev.tanggalPinjam,
batasKembali: originalData.batasKembali ?? prev.batasKembali,
tanggalKembali: originalData.tanggalKembali ?? prev.tanggalKembali,
status: (originalData.status as Status) ?? prev.status,
catatan: originalData.catatan ?? prev.catatan,
}));
toast.info("Form dikembalikan ke data awal");
};
const handleChange = (field: string, value: string | Status) => {
setFormData((prev) => ({ ...prev, [field]: value }));
@@ -101,6 +147,7 @@ function EditPeminjam() {
const handleSubmit = async () => {
try {
setIsSubmitting(true);
stateEdit.update.form = {
...stateEdit.update.form,
...formData,
@@ -112,6 +159,8 @@ function EditPeminjam() {
} catch (error) {
console.error("Error updating peminjam:", error);
toast.error("Terjadi kesalahan saat memperbarui peminjam");
} finally {
setIsSubmitting(false);
}
};
@@ -174,6 +223,7 @@ function EditPeminjam() {
</Box>
<DateInput
disabled
value={formData.tanggalPinjam}
onChange={(date) => {
perpustakaanDigitalState.peminjamanBuku.update.form.tanggalPinjam =
@@ -185,6 +235,7 @@ function EditPeminjam() {
/>
<DateInput
disabled
value={formData.tanggalKembali}
onChange={(date) => {
perpustakaanDigitalState.peminjamanBuku.update.form.tanggalKembali =
@@ -196,6 +247,7 @@ function EditPeminjam() {
/>
<DateInput
disabled
value={formData.batasKembali}
onChange={(date) => {
perpustakaanDigitalState.peminjamanBuku.update.form.batasKembali =
@@ -229,6 +281,17 @@ function EditPeminjam() {
</Box>
<Group justify="right">
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<Button
onClick={handleSubmit}
radius="md"
@@ -239,7 +302,7 @@ function EditPeminjam() {
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
}}
>
Simpan
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>

10
src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/peminjam/page.tsx
View File

@@ -89,9 +89,10 @@ function ListPeminjamBuku({ search }: { search: string }) {
<TableThead>
<TableTr>
<TableTh style={{ width: '10%' }}>No</TableTh>
<TableTh style={{ width: '60%' }}>Nama Peminjam</TableTh>
<TableTh style={{ width: '15%' }}>Status</TableTh>
<TableTh style={{ width: '15%' }}>Detail</TableTh>
<TableTh style={{ width: '25%' }}>Nama Peminjam</TableTh>
<TableTh style={{ width: '25%' }}>Status</TableTh>
<TableTh style={{ width: '25%' }}>Alamat</TableTh>
<TableTh style={{ width: '25%' }}>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
@@ -105,6 +106,9 @@ function ListPeminjamBuku({ search }: { search: string }) {
<TableTd>
{renderStatusBadge(item.status)}
</TableTd>
<TableTd>
{item.alamat}
</TableTd>
<TableTd>
<Button
variant="light"

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

@@ -7,6 +7,7 @@ import {
Button,
Center,
Group,
Loader,
Paper,
Stack,
Text,
@@ -43,6 +44,10 @@ function EditTujuanProgram() {
judul: '',
deskripsi: ''
});
const [originalData, setOriginalData] = useState<FormData>({
judul: '',
deskripsi: ''
});
const [isSubmitting, setIsSubmitting] = useState(false);
// load data once
@@ -57,6 +62,10 @@ function EditTujuanProgram() {
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? ''
});
setOriginalData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? ''
});
}
}, [editState.findById.data]);
@@ -67,6 +76,14 @@ function EditTujuanProgram() {
[]
);
const handleResetForm = () => {
setFormData({
judul: originalData.judul,
deskripsi: originalData.deskripsi,
});
toast.info("Form dikembalikan ke data awal");
};
const handleSubmit = async () => {
if (!formData.judul.trim()) {
toast.error('Judul wajib diisi');
@@ -152,24 +169,32 @@ function EditTujuanProgram() {
</Box>
{/* Submit & Cancel */}
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
>
Batal
</Button>
</Group>
{/* Tombol Simpan */}
<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)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>
</Stack>

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

@@ -6,6 +6,7 @@ import {
Button,
Center,
Group,
Loader,
Paper,
Stack,
Text,
@@ -32,6 +33,10 @@ function EditTujuanProgram() {
// Menggunakan satu state lokal untuk form
const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
const [isSubmitting, setIsSubmitting] = useState(false);
const [originalData, setOriginalData] = useState({
judul: '',
deskripsi: '',
});
// Load data pertama kali
useShallowEffect(() => {
@@ -47,9 +52,21 @@ function EditTujuanProgram() {
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? '',
});
setOriginalData({
judul: editState.findById.data.judul ?? '',
deskripsi: editState.findById.data.deskripsi ?? '',
});
}
}, [editState.findById.data]);
const handleResetForm = () => {
setFormData({
judul: originalData.judul,
deskripsi: originalData.deskripsi,
});
toast.info("Form dikembalikan ke data awal");
};
const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
setFormData(prev => ({ ...prev, [field]: value }));
};
@@ -132,23 +149,31 @@ function EditTujuanProgram() {
/>
</Box>
<Group>
<Button
bg={colors['blue-button']}
onClick={handleSubmit}
loading={isSubmitting || editState.update.loading}
disabled={!formData.judul}
>
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
</Button>
<Group justify="right">
{/* Tombol Batal */}
<Button
variant="outline"
onClick={handleBack}
disabled={isSubmitting || editState.update.loading}
color="gray"
radius="md"
size="md"
onClick={handleResetForm}
>
Batal
</Button>
{/* Tombol Simpan */}
<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)',
}}
>
{isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
</Button>
</Group>
</Stack>
</Paper>