UI & API Menu Pendidikan, Submenu Info Sekolah

This commit is contained in:
2025-07-28 14:17:42 +08:00
parent 5601e59922
commit b24bcd8019
48 changed files with 3387 additions and 75 deletions

View File

@@ -0,0 +1,998 @@
import ApiFetch from "@/lib/api-fetch";
import { Prisma } from "@prisma/client";
import { toast } from "react-toastify";
import { proxy } from "valtio";
import { z } from "zod";
// ========================================= JENJANG PENDIDIKAN ========================================= //
const jenjangPendidikanForm = z.object({
nama: z.string().min(1, "Nama minimal 1 karakter"),
});
const jenjangPendidikanDefaultForm = {
nama: "",
};
const jenjangPendidikan = proxy({
create: {
form: { ...jenjangPendidikanDefaultForm },
loading: false,
async create() {
const cek = jenjangPendidikanForm.safeParse(
jenjangPendidikan.create.form
);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
jenjangPendidikan.create.loading = true;
const res =
await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
"create"
].post(jenjangPendidikan.create.form);
if (res.status === 200) {
jenjangPendidikan.findMany.load();
return toast.success("Data berhasil ditambahkan");
}
return toast.error("Gagal menambahkan data");
} catch (error) {
console.log(error);
toast.error("Gagal menambahkan data");
} finally {
jenjangPendidikan.create.loading = false;
}
},
},
findMany: {
data: null as Array<{
id: string;
nama: string;
}> | null,
async load() {
const res =
await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
"find-many"
].get();
if (res.status === 200) {
jenjangPendidikan.findMany.data = res.data?.data ?? [];
}
},
},
findUnique: {
data: null as Prisma.JenjangPendidikanGetPayload<{
omit: { isActive: true };
}> | null,
async load(id: string) {
try {
const res = await fetch(
`/api/pendidikan/infosekolahpaud/jenjangpendidikan/${id}`
);
if (res.ok) {
const data = await res.json();
jenjangPendidikan.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
jenjangPendidikan.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
jenjangPendidikan.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
jenjangPendidikan.delete.loading = true;
const response = await fetch(
`/api/pendidikan/infosekolahpaud/jenjangpendidikan/del/${id}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
const result = await response.json();
if (response.ok && result?.success) {
toast.success(
result.message || "jenjang pendidikan berhasil dihapus"
);
await jenjangPendidikan.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus jenjang pendidikan");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus jenjang pendidikan");
} finally {
jenjangPendidikan.delete.loading = false;
}
},
},
edit: {
id: "",
form: { ...jenjangPendidikanDefaultForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
const response = await fetch(
`/api/pendidikan/infosekolahpaud/jenjangpendidikan/${id}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
nama: data.nama,
};
return data;
} else {
throw new Error(result?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading jenjang pendidikan:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
}
},
async update() {
const cek = jenjangPendidikanForm.safeParse(jenjangPendidikan.edit.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
toast.error(err);
return false;
}
try {
jenjangPendidikan.edit.loading = true;
const response = await fetch(
`/api/pendidikan/infosekolahpaud/jenjangpendidikan/${jenjangPendidikan.edit.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: jenjangPendidikan.edit.form.nama,
}),
}
);
// Clone the response to avoid 'body already read' error
const responseClone = response.clone();
try {
const result = await response.json();
if (!response.ok) {
console.error(
"Update failed with status:",
response.status,
"Response:",
result
);
throw new Error(
result?.message ||
`Gagal mengupdate jenjang pendidikan (${response.status})`
);
}
if (result.success) {
toast.success(
result.message || "Berhasil memperbarui jenjang pendidikan"
);
await jenjangPendidikan.findMany.load(); // refresh list
return true;
} else {
throw new Error(
result.message || "Gagal mengupdate jenjang pendidikan"
);
}
} catch (error) {
// If JSON parsing fails, try to get the response text for better error messages
try {
const text = await responseClone.text();
console.error("Error response text:", text);
throw new Error(`Gagal memproses respons dari server: ${text}`);
} catch (textError) {
console.error("Error parsing response as text:", textError);
console.error("Original error:", error);
throw new Error("Gagal memproses respons dari server");
}
}
} catch (error) {
console.error("Error updating jenjang pendidikan:", error);
toast.error(
error instanceof Error
? error.message
: "Gagal mengupdate jenjang pendidikan"
);
return false;
} finally {
jenjangPendidikan.edit.loading = false;
}
},
reset() {
jenjangPendidikan.edit.id = "";
jenjangPendidikan.edit.form = { ...jenjangPendidikanDefaultForm };
},
},
});
// ========================================= LEMBAGA PENDIDIKAN ========================================= //
const lembagaPendidikanForm = z.object({
nama: z.string().min(1, "Nama minimal 1 karakter"),
jenjangId: z.string().min(1, "Jenjang pendidikan minimal 1"),
});
const lembagaPendidikanDefaultForm = {
nama: "",
jenjangId: "",
};
const lembagaPendidikan = proxy({
create: {
form: { ...lembagaPendidikanDefaultForm },
loading: false,
async create() {
const cek = lembagaPendidikanForm.safeParse(
lembagaPendidikan.create.form
);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
lembagaPendidikan.create.loading = true;
const res =
await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
"create"
].post(lembagaPendidikan.create.form);
if (res.status === 200) {
lembagaPendidikan.findMany.load();
return toast.success("Data berhasil ditambahkan");
}
return toast.error("Gagal menambahkan data");
} catch (error) {
console.log(error);
toast.error("Gagal menambahkan data");
} finally {
lembagaPendidikan.create.loading = false;
}
},
},
findMany: {
data: null as Array<
Prisma.LembagaGetPayload<{
include: {
jenjangPendidikan: true;
siswa: true;
pengajar: true;
};
}>
> | null,
async load() {
const res =
await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
"find-many"
].get();
if (res.status === 200) {
lembagaPendidikan.findMany.data = res.data?.data ?? [];
}
},
},
findUnique: {
data: null as Prisma.LembagaGetPayload<{
include: {
jenjangPendidikan: true;
siswa: true;
pengajar: true;
};
}> | null,
async load(id: string) {
try {
const res = await fetch(
`/api/pendidikan/infosekolahpaud/lembagapendidikan/${id}`
);
if (res.ok) {
const data = await res.json();
lembagaPendidikan.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
lembagaPendidikan.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
lembagaPendidikan.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
lembagaPendidikan.delete.loading = true;
const response = await fetch(
`/api/pendidikan/infosekolahpaud/lembagapendidikan/del/${id}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
const result = await response.json();
if (response.ok && result?.success) {
toast.success(
result.message || "lembaga pendidikan berhasil dihapus"
);
await lembagaPendidikan.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus lembaga pendidikan");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus lembaga pendidikan");
} finally {
lembagaPendidikan.delete.loading = false;
}
},
},
edit: {
id: "",
form: { ...lembagaPendidikanDefaultForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
const response = await fetch(
`/api/pendidikan/infosekolahpaud/lembagapendidikan/${id}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
nama: data.nama,
jenjangId: data.jenjangId,
};
return data;
} else {
throw new Error(result?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading lembaga pendidikan:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
}
},
async update() {
const cek = lembagaPendidikanForm.safeParse(lembagaPendidikan.edit.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
toast.error(err);
return false;
}
try {
lembagaPendidikan.edit.loading = true;
const response = await fetch(
`/api/pendidikan/infosekolahpaud/lembagapendidikan/${lembagaPendidikan.edit.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: lembagaPendidikan.edit.form.nama,
jenjangId: lembagaPendidikan.edit.form.jenjangId,
}),
}
);
// Clone the response to avoid 'body already read' error
const responseClone = response.clone();
try {
const result = await response.json();
if (!response.ok) {
console.error(
"Update failed with status:",
response.status,
"Response:",
result
);
throw new Error(
result?.message ||
`Gagal mengupdate lembaga pendidikan (${response.status})`
);
}
if (result.success) {
toast.success(
result.message || "Berhasil memperbarui lembaga pendidikan"
);
await lembagaPendidikan.findMany.load(); // refresh list
return true;
} else {
throw new Error(
result.message || "Gagal mengupdate lembaga pendidikan"
);
}
} catch (error) {
// If JSON parsing fails, try to get the response text for better error messages
try {
const text = await responseClone.text();
console.error("Error response text:", text);
throw new Error(`Gagal memproses respons dari server: ${text}`);
} catch (textError) {
console.error("Error parsing response as text:", textError);
console.error("Original error:", error);
throw new Error("Gagal memproses respons dari server");
}
}
} catch (error) {
console.error("Error updating lembaga pendidikan:", error);
toast.error(
error instanceof Error
? error.message
: "Gagal mengupdate lembaga pendidikan"
);
return false;
} finally {
lembagaPendidikan.edit.loading = false;
}
},
reset() {
lembagaPendidikan.edit.id = "";
lembagaPendidikan.edit.form = { ...lembagaPendidikanDefaultForm };
},
},
});
// ========================================= SISWA ========================================= //
const siswaForm = z.object({
nama: z.string().min(1, "Nama minimal 1 karakter"),
lembagaId: z.string().min(1, "lembaga pendidikan minimal 1"),
});
const siswaDefaultForm = {
nama: "",
lembagaId: "",
};
const siswa = proxy({
create: {
form: { ...siswaDefaultForm },
loading: false,
async create() {
const cek = siswaForm.safeParse(siswa.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
siswa.create.loading = true;
const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
"create"
].post(siswa.create.form);
if (res.status === 200) {
siswa.findMany.load();
return toast.success("Data berhasil ditambahkan");
}
return toast.error("Gagal menambahkan data");
} catch (error) {
console.log(error);
toast.error("Gagal menambahkan data");
} finally {
siswa.create.loading = false;
}
},
},
findMany: {
data: null as Array<
Prisma.SiswaGetPayload<{
include: {
lembaga: true;
};
}>
> | null,
async load() {
const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
"find-many"
].get();
if (res.status === 200) {
siswa.findMany.data = res.data?.data ?? [];
}
},
},
findUnique: {
data: null as Prisma.SiswaGetPayload<{
include: {
lembaga: true;
};
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/pendidikan/infosekolahpaud/siswa/${id}`);
if (res.ok) {
const data = await res.json();
siswa.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
siswa.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
siswa.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
siswa.delete.loading = true;
const response = await fetch(
`/api/pendidikan/infosekolahpaud/siswa/del/${id}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
const result = await response.json();
if (response.ok && result?.success) {
toast.success(result.message || "siswa berhasil dihapus");
await siswa.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus siswa");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus siswa");
} finally {
siswa.delete.loading = false;
}
},
},
edit: {
id: "",
form: { ...siswaDefaultForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
const response = await fetch(
`/api/pendidikan/infosekolahpaud/siswa/${id}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
nama: data.nama,
lembagaId: data.lembagaId,
};
return data;
} else {
throw new Error(result?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading siswa:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
}
},
async update() {
const cek = siswaForm.safeParse(siswa.edit.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
toast.error(err);
return false;
}
try {
siswa.edit.loading = true;
const response = await fetch(
`/api/pendidikan/infosekolahpaud/siswa/${siswa.edit.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: siswa.edit.form.nama,
lembagaId: siswa.edit.form.lembagaId,
}),
}
);
// Clone the response to avoid 'body already read' error
const responseClone = response.clone();
try {
const result = await response.json();
if (!response.ok) {
console.error(
"Update failed with status:",
response.status,
"Response:",
result
);
throw new Error(
result?.message || `Gagal mengupdate siswa (${response.status})`
);
}
if (result.success) {
toast.success(result.message || "Berhasil memperbarui siswa");
await siswa.findMany.load(); // refresh list
return true;
} else {
throw new Error(result.message || "Gagal mengupdate siswa");
}
} catch (error) {
// If JSON parsing fails, try to get the response text for better error messages
try {
const text = await responseClone.text();
console.error("Error response text:", text);
throw new Error(`Gagal memproses respons dari server: ${text}`);
} catch (textError) {
console.error("Error parsing response as text:", textError);
console.error("Original error:", error);
throw new Error("Gagal memproses respons dari server");
}
}
} catch (error) {
console.error("Error updating siswa:", error);
toast.error(
error instanceof Error ? error.message : "Gagal mengupdate siswa"
);
return false;
} finally {
siswa.edit.loading = false;
}
},
reset() {
siswa.edit.id = "";
siswa.edit.form = { ...siswaDefaultForm };
},
},
});
// ========================================= PENGAJAR ========================================= //
const pengajarForm = z.object({
nama: z.string().min(1, "Nama minimal 1 karakter"),
lembagaId: z.string().min(1, "lembaga pendidikan minimal 1"),
});
const pengajarDefaultForm = {
nama: "",
lembagaId: "",
};
const pengajar = proxy({
create: {
form: { ...pengajarDefaultForm },
loading: false,
async create() {
const cek = pengajarForm.safeParse(pengajar.create.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
return toast.error(err);
}
try {
pengajar.create.loading = true;
const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
"create"
].post(pengajar.create.form);
if (res.status === 200) {
pengajar.findMany.load();
return toast.success("Data berhasil ditambahkan");
}
return toast.error("Gagal menambahkan data");
} catch (error) {
console.log(error);
toast.error("Gagal menambahkan data");
} finally {
pengajar.create.loading = false;
}
},
},
findMany: {
data: null as Array<
Prisma.PengajarGetPayload<{
include: {
lembaga: true;
};
}>
> | null,
async load() {
const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
"find-many"
].get();
if (res.status === 200) {
pengajar.findMany.data = res.data?.data ?? [];
}
},
},
findUnique: {
data: null as Prisma.PengajarGetPayload<{
include: {
lembaga: true;
};
}> | null,
async load(id: string) {
try {
const res = await fetch(`/api/pendidikan/infosekolahpaud/pengajar/${id}`);
if (res.ok) {
const data = await res.json();
pengajar.findUnique.data = data.data ?? null;
} else {
console.error("Failed to fetch data", res.status, res.statusText);
pengajar.findUnique.data = null;
}
} catch (error) {
console.error("Error fetching data:", error);
pengajar.findUnique.data = null;
}
},
},
delete: {
loading: false,
async byId(id: string) {
if (!id) return toast.warn("ID tidak valid");
try {
pengajar.delete.loading = true;
const response = await fetch(
`/api/pendidikan/infosekolahpaud/pengajar/del/${id}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
}
);
const result = await response.json();
if (response.ok && result?.success) {
toast.success(result.message || "pengajar berhasil dihapus");
await pengajar.findMany.load(); // refresh list
} else {
toast.error(result?.message || "Gagal menghapus pengajar");
}
} catch (error) {
console.error("Gagal delete:", error);
toast.error("Terjadi kesalahan saat menghapus pengajar");
} finally {
pengajar.delete.loading = false;
}
},
},
edit: {
id: "",
form: { ...pengajarDefaultForm },
loading: false,
async load(id: string) {
if (!id) {
toast.warn("ID tidak valid");
return null;
}
try {
const response = await fetch(
`/api/pendidikan/infosekolahpaud/pengajar/${id}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result?.success) {
const data = result.data;
this.id = data.id;
this.form = {
nama: data.nama,
lembagaId: data.lembagaId,
};
return data;
} else {
throw new Error(result?.message || "Gagal memuat data");
}
} catch (error) {
console.error("Error loading siswa:", error);
toast.error(
error instanceof Error ? error.message : "Gagal memuat data"
);
return null;
}
},
async update() {
const cek = pengajarForm.safeParse(pengajar.edit.form);
if (!cek.success) {
const err = `[${cek.error.issues
.map((v) => `${v.path.join(".")}`)
.join("\n")}] required`;
toast.error(err);
return false;
}
try {
pengajar.edit.loading = true;
const response = await fetch(
`/api/pendidikan/infosekolahpaud/pengajar/${pengajar.edit.id}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
nama: pengajar.edit.form.nama,
lembagaId: pengajar.edit.form.lembagaId,
}),
}
);
// Clone the response to avoid 'body already read' error
const responseClone = response.clone();
try {
const result = await response.json();
if (!response.ok) {
console.error(
"Update failed with status:",
response.status,
"Response:",
result
);
throw new Error(
result?.message || `Gagal mengupdate pengajar (${response.status})`
);
}
if (result.success) {
toast.success(result.message || "Berhasil memperbarui pengajar");
await pengajar.findMany.load(); // refresh list
return true;
} else {
throw new Error(result.message || "Gagal mengupdate pengajar");
}
} catch (error) {
// If JSON parsing fails, try to get the response text for better error messages
try {
const text = await responseClone.text();
console.error("Error response text:", text);
throw new Error(`Gagal memproses respons dari server: ${text}`);
} catch (textError) {
console.error("Error parsing response as text:", textError);
console.error("Original error:", error);
throw new Error("Gagal memproses respons dari server");
}
}
} catch (error) {
console.error("Error updating pengajar:", error);
toast.error(
error instanceof Error ? error.message : "Gagal mengupdate pengajar"
);
return false;
} finally {
pengajar.edit.loading = false;
}
},
reset() {
pengajar.edit.id = "";
pengajar.edit.form = { ...pengajarDefaultForm };
},
},
});
const infoSekolahPaud = proxy({
jenjangPendidikan,
lembagaPendidikan,
siswa,
pengajar,
});
export default infoSekolahPaud;

View File

@@ -0,0 +1,72 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import colors from '@/con/colors';
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 }) {
const router = useRouter()
const pathname = usePathname()
const tabs = [
{
label: "Jenjang Pendidikan",
value: "jenjangPendidikan",
href: "/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan"
},
{
label: "Lembaga",
value: "lembaga",
href: "/admin/pendidikan/info-sekolah-paud/lembaga"
},
{
label: "Siswa",
value: "siswa",
href: "/admin/pendidikan/info-sekolah-paud/siswa"
},
{
label: "Pengajar",
value: "pengajar",
href: "/admin/pendidikan/info-sekolah-paud/pengajar"
},
];
const curentTab = tabs.find(tab => tab.href === pathname)
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
const handleTabChange = (value: string | null) => {
const tab = tabs.find(t => t.value === value)
if (tab) {
router.push(tab.href)
}
setActiveTab(value)
}
useEffect(() => {
const match = tabs.find(tab => tab.href === pathname)
if (match) {
setActiveTab(match.value)
}
}, [pathname])
return (
<Stack>
<Title order={3}>Info Sekolah & PAUD</Title>
<Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
<TabsList p={"xs"} bg={"#BBC8E7FF"}>
{tabs.map((e, i) => (
<TabsTab key={i} value={e.value}>{e.label}</TabsTab>
))}
</TabsList>
{tabs.map((e, i) => (
<TabsPanel key={i} value={e.value}>
{/* Konten dummy, bisa diganti tergantung routing */}
<></>
</TabsPanel>
))}
</Tabs>
{children}
</Stack>
);
}
export default LayoutTabs;

View File

@@ -0,0 +1,98 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
import colors from '@/con/colors';
import { Box, Button, Group, 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 EditJenjangPendidikan() {
const router = useRouter();
const params = useParams();
const id = params?.id as string;
const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
const [formData, setFormData] = useState({
nama: "",
});
useEffect(() => {
const loadJenjangPendidikan = async () => {
if (!id) return;
try {
const data = await stateJenjang.edit.load(id);
if (data) {
// pastikan id-nya masuk ke state edit
stateJenjang.edit.id = id;
setFormData({
nama: data.nama || '',
});
}
} catch (error) {
console.error("Error loading jenjang pendidikan:", error);
toast.error("Gagal memuat data jenjang pendidikan");
}
};
loadJenjangPendidikan();
}, [id]);
const handleSubmit = async () => {
try {
if (!formData.nama.trim()) {
toast.error('Nama jenjang pendidikan tidak boleh kosong');
return;
}
stateJenjang.edit.form = {
nama: formData.nama.trim(),
};
// Safety check tambahan: pastikan ID tidak kosong
if (!stateJenjang.edit.id) {
stateJenjang.edit.id = id; // fallback
}
const success = await stateJenjang.edit.update();
if (success) {
router.push("/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan");
}
} catch (error) {
console.error("Error updating jenjang pendidikan:", error);
// toast akan ditampilkan dari fungsi update
}
};
return (
<Box>
<Box mb={10}>
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
<Stack gap={"xs"}>
<Title order={4}>Edit Jenjang Pendidikan</Title>
<TextInput
value={formData.nama}
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
label={<Text fw={"bold"} fz={"sm"}>Nama Jenjang Pendidikan</Text>}
placeholder='Masukkan nama jenjang pendidikan'
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default EditJenjangPendidikan;

View File

@@ -0,0 +1,61 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
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';
import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
function CreateJenjangPendidikan() {
const router = useRouter();
const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan)
useEffect(() => {
stateJenjang.findMany.load();
}, []);
const resetForm = () => {
stateJenjang.create.form = {
nama: "",
};
}
const handleSubmit = async () => {
await stateJenjang.create.create();
resetForm();
router.push("/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan")
}
return (
<Box>
<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 Jenjang Pendidikan</Title>
<TextInput
value={stateJenjang.create.form.nama}
onChange={(val) => {
stateJenjang.create.form.nama = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Nama Jenjang Pendidikan</Text>}
placeholder='Masukkan nama jenjang pendidikan'
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
</Box>
);
}
export default CreateJenjangPendidikan;

View File

@@ -0,0 +1,112 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import JudulList from '../../../_com/judulList';
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
function JenjangPendidikan() {
const [search, setSearch] = useState("")
return (
<Box>
<HeaderSearch
title='Jenjang Pendidikan'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListJenjangPendidikan search={search} />
</Box>
);
}
function ListJenjangPendidikan({ search }: { search: string }) {
const stateList = useProxy(infoSekolahPaud.jenjangPendidikan)
const [modalHapus, setModalHapus] = useState(false)
const [selectedId, setSelectedId] = useState<string | null>(null)
const router = useRouter()
const handleHapus = () => {
if (selectedId) {
stateList.delete.byId(selectedId)
setModalHapus(false)
setSelectedId(null)
}
}
useShallowEffect(() => {
stateList.findMany.load()
}, [])
const filteredData = (stateList.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.nama.toLowerCase().includes(keyword)
);
});
if (!stateList.findMany.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<JudulList
title='List Jenjang Pendidikan'
href='/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan/create'
/>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>
<TableTh>Nama Jenjang Pendidikan</TableTh>
<TableTh>Edit</TableTh>
<TableTh>Delete</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.nama}</TableTd>
<TableTd>
<Button color="green" onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan/${item.id}`)}>
<IconEdit size={20} />
</Button>
</TableTd>
<TableTd>
<Button color="red" onClick={() => {
setSelectedId(item.id)
setModalHapus(true)
}}>
<IconX size={20} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Paper>
{/* Modal Konfirmasi Hapus */}
<ModalKonfirmasiHapus
opened={modalHapus}
onClose={() => setModalHapus(false)}
onConfirm={handleHapus}
text='Apakah anda yakin ingin menghapus jenjang pendidikan ini?'
/>
</Box>
);
}
export default JenjangPendidikan;

View File

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

View File

@@ -0,0 +1,89 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client';
import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { Box, Button, Paper, Select, Stack, TextInput, Title } from '@mantine/core';
import { toast } from 'react-toastify';
import { useProxy } from 'valtio/utils';
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
import colors from '@/con/colors';
import { IconArrowBack } from '@tabler/icons-react';
export default function EditLembaga() {
const router = useRouter();
const { id } = useParams<{ id: string }>();
const state = useProxy(infoSekolahPaud.lembagaPendidikan);
const jenjangPendidikanList = infoSekolahPaud.jenjangPendidikan.findMany.data;
const [form, setForm] = useState({
nama: '',
jenjangId: '',
});
useEffect(() => {
infoSekolahPaud.jenjangPendidikan.findMany.load();
if (id) {
state.edit.load(id).then(data => {
if (data) {
setForm({
nama: data.nama,
jenjangId: data.jenjangId,
});
}
});
}
}, [id]);
const handleSubmit = async () => {
if (!form.nama || !form.jenjangId) {
toast.warn("Nama dan jenjang pendidikan harus diisi");
return;
}
state.edit.id = id;
state.edit.form = form;
const result = await state.edit.update();
if (result) {
toast.success("Data berhasil diperbarui");
router.push('/admin/pendidikan/info-sekolah-paud/lembaga');
}
};
return (
<Box>
<Box mb={10}>
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
<IconArrowBack color={colors['blue-button']} size={25} />
</Button>
</Box>
<Paper p="md" w={{ base: '100%', md: '50%' }}>
<Stack>
<Title order={3}>Edit Lembaga</Title>
<TextInput
label="Nama Lembaga"
placeholder="Masukkan nama lembaga"
value={form.nama}
onChange={(e) => setForm({ ...form, nama: e.currentTarget.value })}
/>
<Select
label="Jenjang Pendidikan"
placeholder="Pilih jenjang pendidikan"
searchable
data={jenjangPendidikanList?.map(p => ({
value: p.id,
label: p.nama,
})) || []}
value={form.jenjangId}
onChange={(val) => setForm({ ...form, jenjangId: val || '' })}
/>
<Button onClick={handleSubmit} color="blue">Simpan</Button>
</Stack>
</Paper>
</Box>
);
}

View File

@@ -0,0 +1,115 @@
'use client'
import { useProxy } from 'valtio/utils';
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 colors from '@/con/colors';
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
function DetailLembaga() {
const detailState = useProxy(infoSekolahPaud.lembagaPendidikan)
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/pendidikan/info-sekolah-paud/lembaga")
}
}
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 Lembaga</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"}>Nama</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.nama}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Jenjang Pendidikan</Text>
<Text fz={"lg"} >{detailState.findUnique.data?.jenjangPendidikan?.nama}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Jumlah Siswa</Text>
<Text fz={"lg"} >{detailState.findUnique.data?.siswa?.length}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Jumlah Pengajar</Text>
<Text fz={"lg"} >{detailState.findUnique.data?.pengajar?.length}</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/pendidikan/info-sekolah-paud/lembaga/${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 lembaga ini?'
/>
</Box>
);
}
export default DetailLembaga;

View File

@@ -0,0 +1,76 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
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';
import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
function CreateLembaga() {
const router = useRouter();
const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan)
useEffect(() => {
stateLembaga.findMany.load();
infoSekolahPaud.jenjangPendidikan.findMany.load();
}, []);
const resetForm = () => {
stateLembaga.create.form = {
nama: "",
jenjangId: "",
};
}
const handleSubmit = async () => {
await stateLembaga.create.create();
resetForm();
router.push("/admin/pendidikan/info-sekolah-paud/lembaga")
}
return (
<Box>
<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 Lembaga</Title>
<TextInput
value={stateLembaga.create.form.nama}
onChange={(val) => {
stateLembaga.create.form.nama = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Nama Lembaga</Text>}
placeholder='Masukkan nama lembaga'
/>
<Select
label="Jenjang Pendidikan"
placeholder="Pilih jenjang pendidikan"
searchable
data={infoSekolahPaud.jenjangPendidikan.findMany.data?.map(j => ({
value: j.id,
label: j.nama,
})) || []}
value={stateLembaga.create.form.jenjangId}
onChange={(val) => {
stateLembaga.create.form.jenjangId = val || '';
}}
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
</Box>
);
}
export default CreateLembaga;

View File

@@ -0,0 +1,89 @@
'use client'
import colors from '@/con/colors';
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import JudulList from '../../../_com/judulList';
import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
function Lembaga() {
const [search, setSearch] = useState("")
return (
<Box>
<HeaderSearch
title='Lembaga'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListLembaga search={search} />
</Box>
);
}
function ListLembaga({ search }: { search: string }) {
const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
const router = useRouter()
useShallowEffect(() => {
stateList.findMany.load()
}, [])
const filteredData = (stateList.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.nama.toLowerCase().includes(keyword) ||
item.jenjangPendidikan?.nama.toLowerCase().includes(keyword)
);
});
if (!stateList.findMany.data) {
return (
<Stack py={10}>
<Skeleton h={500} />
</Stack>
)
}
return (
<Box py={10}>
<Paper bg={colors['white-1']} p={'md'}>
<JudulList
title='List Lembaga'
href='/admin/pendidikan/info-sekolah-paud/lembaga/create'
/>
<Table striped withTableBorder withRowBorders>
<TableThead>
<TableTr>
<TableTh>Nama Lembaga</TableTh>
<TableTh>Jenjang Pendidikan</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.nama}</TableTd>
<TableTd>{item.jenjangPendidikan?.nama}</TableTd>
<TableTd>
<Button color="blue" onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/lembaga/${item.id}`)}>
<IconDeviceImac size={20} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Paper>
</Box>
);
}
export default Lembaga;

View File

@@ -1,69 +0,0 @@
'use client'
import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
import React from 'react';
import HeaderSearch from '../../_com/header';
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
import colors from '@/con/colors';
import JudulList from '../../_com/judulList';
import { useRouter } from 'next/navigation';
function InfoSekolahPaud() {
return (
<Box>
<HeaderSearch
title='Info Sekolah & PAUD'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
/>
<ListInfoSekolahPaud/>
</Box>
);
}
function ListInfoSekolahPaud() {
const router = useRouter();
return (
<Box py={10}>
<Paper bg={colors['white-1']} p="md">
<Stack>
<JudulList
title='List Info Sekolah & PAUD'
href='/admin/pendidikan/info-sekolah-paud/create'
/>
<Box style={{overflowX: 'auto'}}>
<Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
<TableThead>
<TableTr>
<TableTh>Nama Sekolah PAUD</TableTh>
<TableTh>Gambar</TableTh>
<TableTh>Deskripsi</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
<TableTr>
<TableTd>
<Box w={100}>
<Text truncate="end" fz={"sm"}>Sekolah PAUD</Text>
</Box>
</TableTd>
<TableTd>
<Image w={100} src={"/"} alt="image" />
</TableTd>
<TableTd>Deskripsi</TableTd>
<TableTd>
<Button onClick={() => router.push('/admin/pendidikan/info-sekolah-paud/detail')}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
</Box>
)
}
export default InfoSekolahPaud;

View File

@@ -0,0 +1,100 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
import colors from '@/con/colors';
import { Box, Button, Paper, Select, 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';
interface FormPengajar {
nama: string;
lembagaId: string;
}
function EditPengajar() {
const pengajarState = useProxy(infoSekolahPaud.pengajar)
const params = useParams()
const router = useRouter()
const [formData, setFormData] = useState<FormPengajar>({
nama: '',
lembagaId: ''
})
useEffect(() => {
const loadPengajar = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await pengajarState.edit.load(id);
if (data) {
setFormData({
nama: data.nama || '',
lembagaId: data.lembagaId || '',
});
}
} catch (error) {
console.error("Error loading pengajar:", error);
toast.error("Gagal memuat data pengajar");
}
}
infoSekolahPaud.lembagaPendidikan.findMany.load()
loadPengajar();
}, [params?.id]);
const handleSubmit = async () => {
try {
pengajarState.edit.form = {
...pengajarState.edit.form,
nama: formData.nama.trim(),
lembagaId: formData.lembagaId.trim(),
}
await pengajarState.edit.update()
router.push("/admin/pendidikan/info-sekolah-paud/pengajar");
} catch (error) {
console.error("Error updating pengajar:", error);
toast.error("Terjadi kesalahan saat memperbarui pengajar");
}
}
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']} p="md" w={{ base: '100%', md: '50%' }}>
<Stack gap="xs">
<Title order={3}>Edit Pengajar</Title>
<TextInput
value={formData.nama}
label={<Text fz="sm" fw="bold">Nama Pengajar</Text>}
placeholder="masukkan nama siswa"
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
/>
<Select
label="Lembaga Pendidikan"
data={infoSekolahPaud.lembagaPendidikan.findMany.data?.map(k => ({
value: k.id,
label: k.nama
})) ?? []}
value={formData.lembagaId}
onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
/>
<Button bg={colors['blue-button']} onClick={handleSubmit} >
Simpan
</Button>
</Stack>
</Paper>
</Box>
);
}
export default EditPengajar;

View File

@@ -0,0 +1,107 @@
'use client'
import { useProxy } from 'valtio/utils';
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 colors from '@/con/colors';
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
function DetailPengajar() {
const detailState = useProxy(infoSekolahPaud.pengajar)
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/pendidikan/info-sekolah-paud/pengajar")
}
}
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 Pengajar</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"}>Nama</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.nama}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Lembaga</Text>
<Text fz={"lg"} >{detailState.findUnique.data?.lembaga?.nama}</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/pendidikan/info-sekolah-paud/pengajar/${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 pengajar ini?'
/>
</Box>
);
}
export default DetailPengajar;

View File

@@ -0,0 +1,75 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
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 CreatePengajar() {
const router = useRouter();
const stateCreate = useProxy(infoSekolahPaud.pengajar)
useEffect(() => {
stateCreate.findMany.load();
infoSekolahPaud.lembagaPendidikan.findMany.load();
}, []);
const resetForm = () => {
stateCreate.create.form = {
nama: "",
lembagaId: "",
};
};
const handleSubmit = async () => {
await stateCreate.create.create();
resetForm();
router.push("/admin/pendidikan/info-sekolah-paud/pengajar")
}
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 Pengajar</Title>
<TextInput
value={stateCreate.create.form.nama}
onChange={(val) => {
stateCreate.create.form.nama = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
placeholder='Masukkan nama'
/>
<Select
value={stateCreate.create.form.lembagaId}
onChange={(val) => {
stateCreate.create.form.lembagaId = val ?? "";
}}
label={<Text fw={"bold"} fz={"sm"}>Lembaga</Text>}
placeholder="Pilih lembaga"
data={
infoSekolahPaud.lembagaPendidikan.findMany.data?.map((v) => ({
value: v.id,
label: v.nama,
})) || []
}
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreatePengajar;

View File

@@ -0,0 +1,90 @@
/* 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 } 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 infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
function Pengajar() {
const [search, setSearch] = useState('');
return (
<Box>
<HeaderSearch
title='Pengajar'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListPengajar search={search} />
</Box>
);
}
function ListPengajar({ search }: { search: string }) {
const listState = useProxy(infoSekolahPaud.pengajar)
const router = useRouter();
useEffect(() => {
listState.findMany.load()
}, [])
const filteredData = (listState.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.nama.toLowerCase().includes(keyword) ||
item.lembaga.nama.toLowerCase().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 Pengajar'
href='/admin/pendidikan/info-sekolah-paud/pengajar/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>Nama Pengajar</TableTh>
<TableTh>Lembaga</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.nama}</TableTd>
<TableTd>{item.lembaga.nama}</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/pengajar/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
</Box>
)
}
export default Pengajar;

View File

@@ -0,0 +1,100 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
import colors from '@/con/colors';
import { Box, Button, Paper, Select, 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';
interface FormSiswa {
nama: string;
lembagaId: string;
}
function EditSiswa() {
const siswaState = useProxy(infoSekolahPaud.siswa)
const params = useParams()
const router = useRouter()
const [formData, setFormData] = useState<FormSiswa>({
nama: '',
lembagaId: ''
})
useEffect(() => {
const loadSiswa = async () => {
const id = params?.id as string;
if (!id) return;
try {
const data = await siswaState.edit.load(id);
if (data) {
setFormData({
nama: data.nama || '',
lembagaId: data.lembagaId || '',
});
}
} catch (error) {
console.error("Error loading siswa:", error);
toast.error("Gagal memuat data siswa");
}
}
infoSekolahPaud.lembagaPendidikan.findMany.load()
loadSiswa();
}, [params?.id]);
const handleSubmit = async () => {
try {
siswaState.edit.form = {
...siswaState.edit.form,
nama: formData.nama.trim(),
lembagaId: formData.lembagaId.trim(),
}
await siswaState.edit.update()
router.push("/admin/pendidikan/info-sekolah-paud/siswa");
} catch (error) {
console.error("Error updating siswa:", error);
toast.error("Terjadi kesalahan saat memperbarui siswa");
}
}
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']} p="md" w={{ base: '100%', md: '50%' }}>
<Stack gap="xs">
<Title order={3}>Edit Siswa</Title>
<TextInput
value={formData.nama}
label={<Text fz="sm" fw="bold">Nama Siswa</Text>}
placeholder="masukkan nama siswa"
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
/>
<Select
label="Lembaga Pendidikan"
data={infoSekolahPaud.lembagaPendidikan.findMany.data?.map(k => ({
value: k.id,
label: k.nama
})) ?? []}
value={formData.lembagaId}
onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
/>
<Button bg={colors['blue-button']} onClick={handleSubmit} >
Simpan
</Button>
</Stack>
</Paper>
</Box>
);
}
export default EditSiswa;

View File

@@ -0,0 +1,107 @@
'use client'
import { useProxy } from 'valtio/utils';
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 colors from '@/con/colors';
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
function DetailSiswa() {
const detailState = useProxy(infoSekolahPaud.siswa)
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/pendidikan/info-sekolah-paud/siswa")
}
}
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 Siswa</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"}>Nama</Text>
<Text fz={"lg"}>{detailState.findUnique.data?.nama}</Text>
</Box>
<Box>
<Text fw={"bold"} fz={"lg"}>Lembaga</Text>
<Text fz={"lg"} >{detailState.findUnique.data?.lembaga?.nama}</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/pendidikan/info-sekolah-paud/siswa/${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 siswa ini?'
/>
</Box>
);
}
export default DetailSiswa;

View File

@@ -0,0 +1,75 @@
/* eslint-disable react-hooks/exhaustive-deps */
'use client'
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
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 CreateSiswa() {
const router = useRouter();
const stateCreate = useProxy(infoSekolahPaud.siswa)
useEffect(() => {
stateCreate.findMany.load();
infoSekolahPaud.lembagaPendidikan.findMany.load();
}, []);
const resetForm = () => {
stateCreate.create.form = {
nama: "",
lembagaId: "",
};
};
const handleSubmit = async () => {
await stateCreate.create.create();
resetForm();
router.push("/admin/pendidikan/info-sekolah-paud/siswa")
}
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 Siswa</Title>
<TextInput
value={stateCreate.create.form.nama}
onChange={(val) => {
stateCreate.create.form.nama = val.target.value;
}}
label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
placeholder='Masukkan nama'
/>
<Select
value={stateCreate.create.form.lembagaId}
onChange={(val) => {
stateCreate.create.form.lembagaId = val ?? "";
}}
label={<Text fw={"bold"} fz={"sm"}>Lembaga</Text>}
placeholder="Pilih lembaga"
data={
infoSekolahPaud.lembagaPendidikan.findMany.data?.map((v) => ({
value: v.id,
label: v.nama,
})) || []
}
/>
<Group>
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
</Group>
</Stack>
</Paper>
</Box>
);
}
export default CreateSiswa;

View File

@@ -0,0 +1,90 @@
/* 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 } 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 infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
function Siswa() {
const [search, setSearch] = useState('');
return (
<Box>
<HeaderSearch
title='Siswa'
placeholder='pencarian'
searchIcon={<IconSearch size={20} />}
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListSiswa search={search} />
</Box>
);
}
function ListSiswa({ search }: { search: string }) {
const listState = useProxy(infoSekolahPaud.siswa)
const router = useRouter();
useEffect(() => {
listState.findMany.load()
}, [])
const filteredData = (listState.findMany.data || []).filter(item => {
const keyword = search.toLowerCase();
return (
item.nama.toLowerCase().includes(keyword) ||
item.lembaga.nama.toLowerCase().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 Siswa'
href='/admin/pendidikan/info-sekolah-paud/siswa/create'
/>
<Box style={{ overflowX: 'auto' }}>
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
<TableThead>
<TableTr>
<TableTh>Nama Siswa</TableTh>
<TableTh>Lembaga</TableTh>
<TableTh>Detail</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.nama}</TableTd>
<TableTd>{item.lembaga.nama}</TableTd>
<TableTd>
<Button onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/siswa/${item.id}`)}>
<IconDeviceImacCog size={25} />
</Button>
</TableTd>
</TableTr>
))}
</TableTbody>
</Table>
</Box>
</Stack>
</Paper>
</Box>
)
}
export default Siswa;

View File

@@ -344,7 +344,7 @@ export const navBar = [
{
id: "Pendidikan_1",
name: "Info Sekolah & PAUD",
path: "/admin/pendidikan/info-sekolah-paud"
path: "/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan"
},
{
id: "Pendidikan_2",