Fix UI Admin Menu Pendidikam, Add Menu User & Role
This commit is contained in:
@@ -1,6 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": "cmdpm429r0000vnndkcwslt0h",
|
||||
"name": "warga"
|
||||
}
|
||||
]
|
||||
29
prisma/data/user/roles.json
Normal file
29
prisma/data/user/roles.json
Normal file
@@ -0,0 +1,29 @@
|
||||
[
|
||||
{
|
||||
"id": "role_admin_desa",
|
||||
"name": "ADMIN_DESA",
|
||||
"description": "Administrator Desa",
|
||||
"permissions": ["manage_users", "manage_content", "view_reports"],
|
||||
"isActive": true,
|
||||
"createdAt": "2025-09-01T00:00:00.000Z",
|
||||
"updatedAt": "2025-09-01T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "role_admin_kesehatan",
|
||||
"name": "ADMIN_KESEHATAN",
|
||||
"description": "Administrator Bidang Kesehatan",
|
||||
"permissions": ["manage_health_data", "view_reports"],
|
||||
"isActive": true,
|
||||
"createdAt": "2025-09-01T00:00:00.000Z",
|
||||
"updatedAt": "2025-09-01T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "role_admin_sekolah",
|
||||
"name": "ADMIN_SEKOLAH",
|
||||
"description": "Administrator Sekolah",
|
||||
"permissions": ["manage_school_data", "view_reports"],
|
||||
"isActive": true,
|
||||
"createdAt": "2025-09-01T00:00:00.000Z",
|
||||
"updatedAt": "2025-09-01T00:00:00.000Z"
|
||||
}
|
||||
]
|
||||
35
prisma/data/user/users.json
Normal file
35
prisma/data/user/users.json
Normal file
@@ -0,0 +1,35 @@
|
||||
[
|
||||
{
|
||||
"id": "user_admin_desa",
|
||||
"nama": "Admin Desa",
|
||||
"email": "admin.desa@example.com",
|
||||
"password": "$2b$10$XFDWYOJFxQ7ZM5bA0N4Z0O8u0eKYv58wLsaR7h6XK9bqWJ1YQJQ9q",
|
||||
"roleId": "role_admin_desa",
|
||||
"isActive": true,
|
||||
"lastLogin": "2025-08-31T10:00:00.000Z",
|
||||
"createdAt": "2025-09-01T00:00:00.000Z",
|
||||
"updatedAt": "2025-09-01T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "user_admin_puskesmas",
|
||||
"nama": "Admin Kesehatan",
|
||||
"email": "admin.kesehatan@example.com",
|
||||
"password": "$2b$10$XFDWYOJFxQ7ZM5bA0N4Z0O8u0eKYv58wLsaR7h6XK9bqWJ1YQJQ9q",
|
||||
"roleId": "role_admin_kesehatan",
|
||||
"isActive": true,
|
||||
"lastLogin": null,
|
||||
"createdAt": "2025-09-01T00:00:00.000Z",
|
||||
"updatedAt": "2025-09-01T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "user_admin_sekolah",
|
||||
"nama": "Admin Sekolah",
|
||||
"email": "admin.sekolah@example.com",
|
||||
"password": "$2b$10$XFDWYOJFxQ7ZM5bA0N4Z0O8u0eKYv58wLsaR7h6XK9bqWJ1YQJQ9q",
|
||||
"roleId": "role_admin_sekolah",
|
||||
"isActive": true,
|
||||
"lastLogin": null,
|
||||
"createdAt": "2025-09-01T00:00:00.000Z",
|
||||
"updatedAt": "2025-09-01T00:00:00.000Z"
|
||||
}
|
||||
]
|
||||
@@ -1661,6 +1661,7 @@ model MitraKolaborasi {
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
// ========================================= INFO TEKHNOLOGI TEPAT GUNA ========================================= //
|
||||
model InfoTekno {
|
||||
id String @id @default(cuid())
|
||||
@@ -2106,22 +2107,40 @@ model User {
|
||||
id String @id @default(cuid())
|
||||
nama String
|
||||
email String @unique
|
||||
password String
|
||||
password String?
|
||||
role Role @relation(fields: [roleId], references: [id])
|
||||
roleId String
|
||||
instansi String? // Nama instansi (Puskesmas, Sekolah, dll)
|
||||
isActive Boolean @default(true)
|
||||
lastLogin DateTime?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
}
|
||||
|
||||
model Role {
|
||||
id String @id @default(cuid())
|
||||
name String
|
||||
name String @unique // ADMIN_DESA, ADMIN_KESEHATAN, ADMIN_SEKOLAH
|
||||
description String?
|
||||
permissions Json // Menyimpan permission dalam format JSON
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
User User[]
|
||||
deletedAt DateTime?
|
||||
users User[]
|
||||
|
||||
@@map("roles")
|
||||
}
|
||||
|
||||
// Tabel untuk menyimpan permission
|
||||
model Permission {
|
||||
id String @id @default(cuid())
|
||||
name String @unique
|
||||
description String?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
|
||||
@@map("permissions")
|
||||
}
|
||||
|
||||
// ========================================= DATA PENDIDIKAN ========================================= //
|
||||
|
||||
@@ -52,8 +52,52 @@ import tempatKegiatan from "./data/pendidikan/pendidikan-non-formal/tempat-kegia
|
||||
import tujuanProgram2 from "./data/pendidikan/pendidikan-non-formal/tujuan-program2.json";
|
||||
import programUnggulan from "./data/pendidikan/program-pendidikan-anak/program-unggulan.json";
|
||||
import tujuanProgram from "./data/pendidikan/program-pendidikan-anak/tujuan-program.json";
|
||||
import roles from "./data/user/roles.json";
|
||||
import users from "./data/user/users.json";
|
||||
|
||||
(async () => {
|
||||
// =========== USER & ROLE ===========
|
||||
for (const r of roles) {
|
||||
await prisma.role.upsert({
|
||||
where: { id: r.id },
|
||||
update: {
|
||||
name: r.name,
|
||||
description: r.description,
|
||||
permissions: r.permissions,
|
||||
isActive: true,
|
||||
},
|
||||
create: {
|
||||
id: r.id,
|
||||
name: r.name,
|
||||
description: r.description,
|
||||
permissions: r.permissions,
|
||||
isActive: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
console.log("✅ Roles seeded");
|
||||
//users
|
||||
for (const u of users) {
|
||||
await prisma.user.upsert({
|
||||
where: { id: u.id },
|
||||
update: {
|
||||
nama: u.nama,
|
||||
email: u.email,
|
||||
password: u.password,
|
||||
roleId: u.roleId,
|
||||
isActive: true,
|
||||
},
|
||||
create: {
|
||||
id: u.id,
|
||||
nama: u.nama,
|
||||
email: u.email,
|
||||
password: u.password,
|
||||
roleId: u.roleId,
|
||||
isActive: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
console.log("✅ Users seeded");
|
||||
// =========== LANDING PAGE ===========
|
||||
// =========== SUBMENU PROFILE ===========
|
||||
// =========== PROFILE PEJABAT DESA ===========
|
||||
|
||||
@@ -317,14 +317,34 @@ const kategoriBuku = proxy({
|
||||
isActive: true;
|
||||
};
|
||||
}>[],
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
async load() {
|
||||
const res =
|
||||
await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku[
|
||||
"findMany"
|
||||
].get();
|
||||
if (res.status === 200) {
|
||||
kategoriBuku.findMany.data = res.data?.data ?? [];
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "") => {
|
||||
kategoriBuku.findMany.loading = true; // ✅ Akses langsung via nama path
|
||||
kategoriBuku.findMany.page = page;
|
||||
kategoriBuku.findMany.search = search;
|
||||
|
||||
try {
|
||||
const query: any = { page, limit };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku["findMany"].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
kategoriBuku.findMany.data = res.data.data ?? [];
|
||||
kategoriBuku.findMany.totalPages = res.data.totalPages ?? 1;
|
||||
} else {
|
||||
kategoriBuku.findMany.data = [];
|
||||
kategoriBuku.findMany.totalPages = 1;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch data kategori buku paginated:", err);
|
||||
kategoriBuku.findMany.data = [];
|
||||
kategoriBuku.findMany.totalPages = 1;
|
||||
} finally {
|
||||
kategoriBuku.findMany.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,124 +1,43 @@
|
||||
import { proxy } from 'valtio'
|
||||
import { toast } from 'react-toastify'
|
||||
import ApiFetch from '@/lib/api-fetch'
|
||||
import { Prisma } from '@prisma/client'
|
||||
import { z } from 'zod'
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { proxy } from "valtio";
|
||||
import { toast } from "react-toastify";
|
||||
import ApiFetch from "@/lib/api-fetch";
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { z } from "zod";
|
||||
|
||||
// 1. Validasi Zod
|
||||
const userSchema = z.object({
|
||||
nama: z.string().min(1, 'Nama harus diisi'),
|
||||
email: z.string().email('Email tidak valid'),
|
||||
password: z.string().min(6, 'Password minimal 6 karakter'),
|
||||
roleId: z.string().optional(),
|
||||
})
|
||||
|
||||
const defaultForm = { nama: '', email: '', password: '', roleId: '' }
|
||||
|
||||
// 2. State Valtio
|
||||
// State Valtio
|
||||
const userState = proxy({
|
||||
// Register
|
||||
register: {
|
||||
form: { ...defaultForm },
|
||||
loading: false,
|
||||
async submit() {
|
||||
const valid = userSchema.omit({ roleId: true }).safeParse(userState.register.form)
|
||||
if (!valid.success) {
|
||||
const err = valid.error.issues.map(i => i.message).join(', ')
|
||||
return toast.error(err)
|
||||
}
|
||||
try {
|
||||
userState.register.loading = true
|
||||
const res = await ApiFetch.api.user.register.post(userState.register.form)
|
||||
if (res.status === 200) {
|
||||
toast.success('Registrasi berhasil, silakan login')
|
||||
userState.register.form = { ...defaultForm } // reset
|
||||
} else {
|
||||
toast.error(res.data?.message || 'Gagal registrasi')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
toast.error('Terjadi kesalahan saat registrasi')
|
||||
} finally {
|
||||
userState.register.loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// Login
|
||||
login: {
|
||||
form: { email: '', password: '' },
|
||||
loading: false,
|
||||
async submit() {
|
||||
try {
|
||||
userState.login.loading = true
|
||||
const res = await ApiFetch.api.user.login.post(userState.login.form)
|
||||
if (res.status === 200) {
|
||||
toast.success('Login berhasil')
|
||||
const token = res.data?.data?.token
|
||||
if (typeof token === 'string') {
|
||||
localStorage.setItem('token', token)
|
||||
// Optional: simpan user role untuk otorisasi
|
||||
const user = res.data?.data?.user
|
||||
localStorage.setItem('user', JSON.stringify(user))
|
||||
}
|
||||
} else {
|
||||
toast.error(res.data?.message || 'Login gagal')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
toast.error('Terjadi kesalahan saat login')
|
||||
} finally {
|
||||
userState.login.loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// CRUD User (untuk admin)
|
||||
create: {
|
||||
form: { ...defaultForm },
|
||||
loading: false,
|
||||
async create(isAdmin = false) {
|
||||
const valid = userSchema.safeParse(userState.create.form)
|
||||
if (!valid.success) {
|
||||
const err = valid.error.issues.map(i => i.message).join(', ')
|
||||
return toast.error(err)
|
||||
}
|
||||
try {
|
||||
userState.create.loading = true
|
||||
const endpoint = isAdmin ? 'create' : 'register'
|
||||
const res = await ApiFetch.api.user[endpoint].post(userState.create.form)
|
||||
if (res.status === 200) {
|
||||
toast.success('User berhasil dibuat')
|
||||
userState.findMany.load() // refresh list
|
||||
userState.create.form = { ...defaultForm } // reset form
|
||||
} else {
|
||||
toast.error(res.data?.message || 'Gagal membuat user')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
toast.error('Gagal membuat user')
|
||||
} finally {
|
||||
userState.create.loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// Find Many
|
||||
findMany: {
|
||||
data: [] as Prisma.UserGetPayload<{ include: { role: true } }>[],
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
async load() {
|
||||
this.loading = true
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "") => {
|
||||
userState.findMany.loading = true; // ✅ Akses langsung via nama path
|
||||
userState.findMany.page = page;
|
||||
userState.findMany.search = search;
|
||||
|
||||
try {
|
||||
const res = await ApiFetch.api.user.findMany.get()
|
||||
if (res.status === 200) {
|
||||
this.data = res.data?.data || []
|
||||
const query: any = { page, limit };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.user["findMany"].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
userState.findMany.data = res.data.data ?? [];
|
||||
userState.findMany.totalPages = res.data.totalPages ?? 1;
|
||||
} else {
|
||||
userState.findMany.data = [];
|
||||
userState.findMany.totalPages = 1;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
toast.error('Gagal muat data user')
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch user paginated:", err);
|
||||
userState.findMany.data = [];
|
||||
userState.findMany.totalPages = 1;
|
||||
} finally {
|
||||
this.loading = false
|
||||
userState.findMany.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -128,71 +47,20 @@ const userState = proxy({
|
||||
data: null as Prisma.UserGetPayload<{ include: { role: true } }> | null,
|
||||
loading: false,
|
||||
async load(id: string) {
|
||||
this.loading = true
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await fetch(`/api/user/findUnique/${id}`)
|
||||
const data = await res.json()
|
||||
const res = await fetch(`/api/user/findUnique/${id}`);
|
||||
const data = await res.json();
|
||||
if (res.status === 200) {
|
||||
this.data = data.data
|
||||
this.data = data.data;
|
||||
} else {
|
||||
toast.error(data.message)
|
||||
toast.error(data.message);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
toast.error('Gagal ambil data user')
|
||||
console.error(e);
|
||||
toast.error("Gagal ambil data user");
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// Update
|
||||
update: {
|
||||
id: '',
|
||||
form: { ...defaultForm },
|
||||
loading: false,
|
||||
async load(id: string) {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await fetch(`/api/user/findUnique/${id}`)
|
||||
const data = await res.json()
|
||||
if (res.status === 200) {
|
||||
const user = data.data
|
||||
this.id = user.id
|
||||
this.form = {
|
||||
nama: user.nama,
|
||||
email: user.email,
|
||||
password: '', // jangan kirim password lama
|
||||
roleId: user.roleId,
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
toast.error('Gagal muat data')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async submit() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await fetch(`/api/user/update/${this.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(this.form),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (res.status === 200) {
|
||||
toast.success('Update berhasil')
|
||||
userState.findMany.load()
|
||||
} else {
|
||||
toast.error(data.message || 'Gagal update')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
toast.error('Gagal update user')
|
||||
} finally {
|
||||
this.loading = false
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -201,35 +69,37 @@ const userState = proxy({
|
||||
delete: {
|
||||
loading: false,
|
||||
async submit(id: string) {
|
||||
this.loading = true
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await fetch(`/api/user/del/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
})
|
||||
const data = await res.json()
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.status === 200) {
|
||||
toast.success('User dinonaktifkan')
|
||||
userState.findMany.load()
|
||||
toast.success("User dinonaktifkan");
|
||||
userState.findMany.load();
|
||||
} else {
|
||||
toast.error(data.message || 'Gagal hapus')
|
||||
toast.error(data.message || "Gagal hapus");
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
toast.error('Gagal hapus user')
|
||||
console.error(e);
|
||||
toast.error("Gagal hapus user");
|
||||
} finally {
|
||||
this.loading = false
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const templateRole = z.object({
|
||||
name: z.string().min(1, "Nama harus diisi"),
|
||||
permissions: z.array(z.string()).min(1, "Permission harus diisi"),
|
||||
});
|
||||
|
||||
const defaultRole = {
|
||||
name: "",
|
||||
permissions: [] as string[],
|
||||
};
|
||||
|
||||
const roleState = proxy({
|
||||
@@ -247,10 +117,9 @@ const roleState = proxy({
|
||||
|
||||
try {
|
||||
roleState.create.loading = true;
|
||||
const res =
|
||||
await ApiFetch.api.role[
|
||||
"create"
|
||||
].post(roleState.create.form);
|
||||
const res = await ApiFetch.api.role["create"].post(
|
||||
roleState.create.form
|
||||
);
|
||||
if (res.status === 200) {
|
||||
roleState.findMany.load();
|
||||
return toast.success("Data role Berhasil Dibuat");
|
||||
@@ -273,10 +142,7 @@ const roleState = proxy({
|
||||
}>[],
|
||||
loading: false,
|
||||
async load() {
|
||||
const res =
|
||||
await ApiFetch.api.role[
|
||||
"findMany"
|
||||
].get();
|
||||
const res = await ApiFetch.api.role["findMany"].get();
|
||||
if (res.status === 200) {
|
||||
roleState.findMany.data = res.data?.data ?? [];
|
||||
}
|
||||
@@ -291,9 +157,7 @@ const roleState = proxy({
|
||||
loading: false,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/role/${id}`
|
||||
);
|
||||
const res = await fetch(`/api/role/${id}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
roleState.findUnique.data = data.data ?? null;
|
||||
@@ -315,22 +179,17 @@ const roleState = proxy({
|
||||
try {
|
||||
roleState.delete.loading = true;
|
||||
|
||||
const response = await fetch(
|
||||
`/api/role/del/${id}`,
|
||||
{
|
||||
const response = await fetch(`/api/role/del/${id}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result?.success) {
|
||||
toast.success(
|
||||
result.message || "Data role berhasil dihapus"
|
||||
);
|
||||
toast.success(result.message || "Data role berhasil dihapus");
|
||||
await roleState.findMany.load(); // refresh list
|
||||
} else {
|
||||
toast.error(result?.message || "Gagal menghapus Data role");
|
||||
@@ -354,15 +213,12 @@ const roleState = proxy({
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/role/${id}`,
|
||||
{
|
||||
const response = await fetch(`/api/role/${id}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
@@ -374,6 +230,7 @@ const roleState = proxy({
|
||||
this.id = data.id;
|
||||
this.form = {
|
||||
name: data.name,
|
||||
permissions: data.permissions,
|
||||
};
|
||||
return data; // Return the loaded data
|
||||
} else {
|
||||
@@ -400,18 +257,16 @@ const roleState = proxy({
|
||||
try {
|
||||
roleState.update.loading = true;
|
||||
|
||||
const response = await fetch(
|
||||
`/api/role/${this.id}`,
|
||||
{
|
||||
const response = await fetch(`/api/role/${this.id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: this.form.name,
|
||||
permissions: this.form.permissions,
|
||||
}),
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
@@ -451,6 +306,6 @@ const roleState = proxy({
|
||||
const user = proxy({
|
||||
userState,
|
||||
roleState,
|
||||
})
|
||||
});
|
||||
|
||||
export default user
|
||||
export default user;
|
||||
|
||||
@@ -4,6 +4,7 @@ import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { IconList, IconCategory } from '@tabler/icons-react';
|
||||
import colors from '@/con/colors';
|
||||
|
||||
function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter();
|
||||
@@ -50,6 +51,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
Desa Anti Korupsi
|
||||
</Title>
|
||||
<Tabs
|
||||
color={colors['blue-button']}
|
||||
variant="pills"
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { IconChartBar, IconUsers } from '@tabler/icons-react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
@@ -46,7 +47,7 @@ function LayoutTabsKepuasan({ children }: { children: React.ReactNode }) {
|
||||
</Title>
|
||||
<Tabs
|
||||
radius="xl"
|
||||
color="blue"
|
||||
color={colors['blue-button']}
|
||||
variant="pills"
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { IconCategory, IconListDetails } from '@tabler/icons-react';
|
||||
import colors from '@/con/colors';
|
||||
|
||||
function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter();
|
||||
@@ -50,6 +51,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
Prestasi Desa
|
||||
</Title>
|
||||
<Tabs
|
||||
color={colors['blue-button']}
|
||||
variant="pills"
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { IconBulb, IconUsers, IconBrandFacebook } from '@tabler/icons-react';
|
||||
import colors from '@/con/colors';
|
||||
|
||||
function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter();
|
||||
@@ -57,7 +58,8 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
Profil Desa
|
||||
</Title>
|
||||
<Tabs
|
||||
variant="pills"
|
||||
color={colors['blue-button']}
|
||||
variant='pills'
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
radius="lg"
|
||||
|
||||
@@ -1,61 +1,109 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { IconSchool, IconStar } from '@tabler/icons-react';
|
||||
|
||||
function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
label: "Beasiswa Pendaftar",
|
||||
value: "beasiswa-pendaftar",
|
||||
href: "/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar"
|
||||
href: "/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar",
|
||||
icon: <IconSchool size={18} stroke={1.8} />,
|
||||
tooltip: "Kelola data pendaftar beasiswa desa",
|
||||
},
|
||||
{
|
||||
label: "Keunggulan Program",
|
||||
value: "keunggulan-program",
|
||||
href: "/admin/pendidikan/beasiswa-desa/keunggulan-program"
|
||||
href: "/admin/pendidikan/beasiswa-desa/keunggulan-program",
|
||||
icon: <IconStar size={18} stroke={1.8} />,
|
||||
tooltip: "Lihat keunggulan dan detail program beasiswa",
|
||||
},
|
||||
|
||||
];
|
||||
const curentTab = tabs.find(tab => tab.href === pathname)
|
||||
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
|
||||
|
||||
const currentTab = tabs.find(tab => tab.href === pathname);
|
||||
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
|
||||
|
||||
const handleTabChange = (value: string | null) => {
|
||||
const tab = tabs.find(t => t.value === value)
|
||||
const tab = tabs.find(t => t.value === value);
|
||||
if (tab) {
|
||||
router.push(tab.href)
|
||||
}
|
||||
setActiveTab(value)
|
||||
router.push(tab.href);
|
||||
}
|
||||
setActiveTab(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const match = tabs.find(tab => tab.href === pathname)
|
||||
const match = tabs.find(tab => tab.href === pathname);
|
||||
if (match) {
|
||||
setActiveTab(match.value)
|
||||
setActiveTab(match.value);
|
||||
}
|
||||
}, [pathname])
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={3}>Beasiswa Desa</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>
|
||||
<Stack gap="lg">
|
||||
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
|
||||
Beasiswa Desa
|
||||
</Title>
|
||||
<Tabs
|
||||
color={colors['blue-button']}
|
||||
variant="pills"
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
radius="lg"
|
||||
keepMounted={false}
|
||||
>
|
||||
<TabsList
|
||||
p="sm"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab, i) => (
|
||||
<Tooltip
|
||||
key={i}
|
||||
label={tab.tooltip}
|
||||
position="bottom"
|
||||
withArrow
|
||||
transitionProps={{ transition: 'pop', duration: 200 }}
|
||||
>
|
||||
<TabsTab
|
||||
value={tab.value}
|
||||
leftSection={tab.icon}
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.9rem",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
</TabsTab>
|
||||
</Tooltip>
|
||||
))}
|
||||
</TabsList>
|
||||
{tabs.map((e, i) => (
|
||||
<TabsPanel key={i} value={e.value}>
|
||||
{/* Konten dummy, bisa diganti tergantung routing */}
|
||||
<></>
|
||||
|
||||
{tabs.map((tab, i) => (
|
||||
<TabsPanel
|
||||
key={i}
|
||||
value={tab.value}
|
||||
style={{
|
||||
padding: "1.5rem",
|
||||
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TabsPanel>
|
||||
))}
|
||||
</Tabs>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,133 +2,150 @@
|
||||
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
|
||||
import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconX } from '@tabler/icons-react';
|
||||
import { IconArrowBack, IconTrash } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
|
||||
function DetailBeasiswaPendaftar() {
|
||||
const state = useProxy(beasiswaDesaState.beasiswaPendaftar)
|
||||
const state = useProxy(beasiswaDesaState.beasiswaPendaftar);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
|
||||
useShallowEffect(() => {
|
||||
state.findUnique.load(params?.id as string)
|
||||
}, [])
|
||||
state.findUnique.load(params?.id as string);
|
||||
}, []);
|
||||
|
||||
const handleHapus = () => {
|
||||
if (selectedId) {
|
||||
state.delete.delete(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
router.push("/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar")
|
||||
}
|
||||
state.delete.delete(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
router.push("/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar");
|
||||
}
|
||||
};
|
||||
|
||||
if (!state.findUnique.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = state.findUnique.data;
|
||||
|
||||
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>
|
||||
<Flex justify="space-between" gap={"xs"}>
|
||||
<Text fz={"xl"} fw={"bold"}>Detail Beasiswa Pendaftar</Text>
|
||||
<Box py={10}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (state.findUnique.data) {
|
||||
setSelectedId(state.findUnique.data.id);
|
||||
setModalHapus(true);
|
||||
}
|
||||
}}
|
||||
disabled={state.delete.loading || !state.findUnique.data}
|
||||
color={"red"}
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
|
||||
mb={15}
|
||||
>
|
||||
<IconX size={20} />
|
||||
Kembali
|
||||
</Button>
|
||||
</Flex>
|
||||
{state.findUnique.data ? (
|
||||
<Paper key={state.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
|
||||
<Paper
|
||||
withBorder
|
||||
w={{ base: "100%", md: "70%" }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
|
||||
Detail Beasiswa Pendaftar
|
||||
</Text>
|
||||
|
||||
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
|
||||
<Stack gap="sm">
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Nama Lengkap</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.namaLengkap}</Text>
|
||||
<Text fz="lg" fw="bold">Nama Lengkap</Text>
|
||||
<Text fz="md" c="dimmed">{data.namaLengkap || '-'}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>NIK</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.nik}</Text>
|
||||
<Text fz="lg" fw="bold">NIK</Text>
|
||||
<Text fz="md" c="dimmed">{data.nik || '-'}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Tempat Lahir</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.tempatLahir}</Text>
|
||||
<Text fz="lg" fw="bold">Tempat Lahir</Text>
|
||||
<Text fz="md" c="dimmed">{data.tempatLahir || '-'}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Tanggal Lahir</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.tanggalLahir ? new Date(state.findUnique.data.tanggalLahir).toLocaleDateString() : '-'}</Text>
|
||||
<Text fz="lg" fw="bold">Tanggal Lahir</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
{data.tanggalLahir ? new Date(data.tanggalLahir).toLocaleDateString() : '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Jenis Kelamin</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.jenisKelamin}</Text>
|
||||
<Text fz="lg" fw="bold">Jenis Kelamin</Text>
|
||||
<Text fz="md" c="dimmed">{data.jenisKelamin || '-'}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Kewarganegaraan</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.kewarganegaraan}</Text>
|
||||
<Text fz="lg" fw="bold">Kewarganegaraan</Text>
|
||||
<Text fz="md" c="dimmed">{data.kewarganegaraan || '-'}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Agama</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.agama}</Text>
|
||||
<Text fz="lg" fw="bold">Agama</Text>
|
||||
<Text fz="md" c="dimmed">{data.agama || '-'}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Alamat KTP</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.alamatKTP}</Text>
|
||||
<Text fz="lg" fw="bold">Alamat KTP</Text>
|
||||
<Text fz="md" c="dimmed">{data.alamatKTP || '-'}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Alamat Domisili</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.alamatDomisili}</Text>
|
||||
<Text fz="lg" fw="bold">Alamat Domisili</Text>
|
||||
<Text fz="md" c="dimmed">{data.alamatDomisili || '-'}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>No HP</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.noHp}</Text>
|
||||
<Text fz="lg" fw="bold">No HP</Text>
|
||||
<Text fz="md" c="dimmed">{data.noHp || '-'}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Email</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.email}</Text>
|
||||
<Text fz="lg" fw="bold">Email</Text>
|
||||
<Text fz="md" c="dimmed">{data.email || '-'}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Status Pernikahan</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.statusPernikahan}</Text>
|
||||
<Text fz="lg" fw="bold">Status Pernikahan</Text>
|
||||
<Text fz="md" c="dimmed">{data.statusPernikahan || '-'}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Ukuran Baju</Text>
|
||||
<Text fz={"lg"}>{state.findUnique.data?.ukuranBaju}</Text>
|
||||
<Text fz="lg" fw="bold">Ukuran Baju</Text>
|
||||
<Text fz="md" c="dimmed">{data.ukuranBaju || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Group gap="sm" mt="md">
|
||||
<Tooltip label="Hapus Pendaftar" withArrow position="top">
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
setSelectedId(data.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : null}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text='Apakah anda yakin ingin menghapus beasiswa desa ini?'
|
||||
text="Apakah Anda yakin ingin menghapus data pendaftar ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,22 +1,38 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Pagination,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Table,
|
||||
TableTbody,
|
||||
TableTd,
|
||||
TableTh,
|
||||
TableThead,
|
||||
TableTr,
|
||||
Text,
|
||||
Title
|
||||
} from '@mantine/core';
|
||||
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import HeaderSearch from '../../../_com/header';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../../_com/header';
|
||||
import beasiswaDesaState from '../../../_state/pendidikan/beasiswa-desa';
|
||||
|
||||
|
||||
function BeasiswaPendaftar() {
|
||||
const [search, setSearch] = useState('');
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Beasiswa Pendaftar'
|
||||
placeholder='pencarian'
|
||||
placeholder='Cari nama, alamat, atau data lain...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -27,37 +43,34 @@ function BeasiswaPendaftar() {
|
||||
}
|
||||
|
||||
function ListBeasiswaPendaftar({ search }: { search: string }) {
|
||||
const listDataState = useProxy(beasiswaDesaState.beasiswaPendaftar)
|
||||
const state = useProxy(beasiswaDesaState.beasiswaPendaftar);
|
||||
const router = useRouter();
|
||||
|
||||
const { data, page, totalPages, loading, load } = state.findMany;
|
||||
|
||||
useEffect(() => {
|
||||
listDataState.findMany.load()
|
||||
}, [])
|
||||
load(page, 10, search);
|
||||
}, [page, search]);
|
||||
|
||||
const filteredData = (listDataState.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.namaLengkap.toLowerCase().includes(keyword) ||
|
||||
item.alamatKTP.toLowerCase().includes(keyword) ||
|
||||
(item.tanggalLahir ? new Date(item.tanggalLahir).toLocaleDateString() : '').toLowerCase().includes(keyword) ||
|
||||
item.jenisKelamin.toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
const filteredData = data || [];
|
||||
|
||||
if (!listDataState.findMany.data) {
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton height={600} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p="md">
|
||||
<Stack>
|
||||
<Title order={4}>List Beasiswa Pendaftar</Title>
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Beasiswa Pendaftar</Title>
|
||||
</Group>
|
||||
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>No</TableTh>
|
||||
@@ -65,43 +78,72 @@ function ListBeasiswaPendaftar({ search }: { search: string }) {
|
||||
<TableTh>Alamat</TableTh>
|
||||
<TableTh>Tanggal Lahir</TableTh>
|
||||
<TableTh>Jenis Kelamin</TableTh>
|
||||
<TableTh>Detail</TableTh>
|
||||
<TableTh>Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.map((item, index) => (
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item, index) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{index + 1}</TableTd>
|
||||
<TableTd>
|
||||
<Box w={100}>
|
||||
<Text truncate="end" fz={"sm"}>{index + 1}</Text>
|
||||
</Box>
|
||||
<Text truncate fz="sm">{item.namaLengkap}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text truncate="end" fz={"sm"}>{item.namaLengkap}</Text>
|
||||
<Text truncate fz="sm">{item.alamatKTP}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text truncate="end" fz={"sm"}>{item.alamatKTP}</Text>
|
||||
<Text truncate fz="sm">
|
||||
{item.tanggalLahir ? new Date(item.tanggalLahir).toLocaleDateString() : '-'}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text truncate="end" fz={"sm"}>{item.tanggalLahir ? new Date(item.tanggalLahir).toLocaleDateString() : '-'}</Text>
|
||||
<Text truncate fz="sm">{item.jenisKelamin}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text truncate="end" fz={"sm"}>{item.jenisKelamin}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button onClick={() => router.push(`/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar/${item.id}`)}>
|
||||
<IconDeviceImacCog size={25} />
|
||||
<Button
|
||||
variant="light"
|
||||
color="blue"
|
||||
onClick={() =>
|
||||
router.push(`/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar/${item.id}`)
|
||||
}
|
||||
>
|
||||
<IconDeviceImacCog size={20} />
|
||||
<Text ml={5}>Detail</Text>
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={6}>
|
||||
<Center py={20}>
|
||||
<Text c="dimmed">Tidak ada data pendaftar yang cocok</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10, search);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default BeasiswaPendaftar;
|
||||
|
||||
@@ -34,7 +34,7 @@ function CreateKeunggulanProgram() {
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" color="blue" position="bottom">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
|
||||
@@ -1,6 +1,24 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Pagination,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Table,
|
||||
TableTbody,
|
||||
TableTd,
|
||||
TableTh,
|
||||
TableThead,
|
||||
TableTr,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconPlus, IconSearch, IconTrashFilled } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -10,14 +28,13 @@ import HeaderSearch from '../../../_com/header';
|
||||
import beasiswaDesaState from '../../../_state/pendidikan/beasiswa-desa';
|
||||
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
|
||||
|
||||
|
||||
function KeunggulanProgram() {
|
||||
const [search, setSearch] = useState("");
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='List Keunggulan Program'
|
||||
placeholder='Cari keunggulan program...'
|
||||
title="List Keunggulan Program"
|
||||
placeholder="Cari keunggulan program..."
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -28,45 +45,38 @@ function KeunggulanProgram() {
|
||||
}
|
||||
|
||||
function ListKeunggulanProgram({ search }: { search: string }) {
|
||||
const stateList = useProxy(beasiswaDesaState.keunggulanProgram)
|
||||
const router = useRouter()
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const stateList = useProxy(beasiswaDesaState.keunggulanProgram);
|
||||
const router = useRouter();
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = stateList.findMany
|
||||
const { data, page, totalPages, loading, load } = stateList.findMany;
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, search)
|
||||
}, [page, search])
|
||||
load(page, 10, search);
|
||||
}, [page, search]);
|
||||
|
||||
const handleHapus = () => {
|
||||
if (selectedId) {
|
||||
stateList.delete.delete(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
}
|
||||
stateList.delete.delete(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const filteredData = data || []
|
||||
const filteredData = data || [];
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton height={600} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Keunggulan Program</Title>
|
||||
<Tooltip label="Tambah Keunggulan Program" withArrow>
|
||||
@@ -74,7 +84,11 @@ function ListKeunggulanProgram({ search }: { search: string }) {
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/pendidikan/beasiswa-desa/keunggulan-program/create')}
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/beasiswa-desa/keunggulan-program/create'
|
||||
)
|
||||
}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
@@ -85,10 +99,10 @@ function ListKeunggulanProgram({ search }: { search: string }) {
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Nama Keunggulan Program</TableTh>
|
||||
<TableTh>Deskripsi</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Delete</TableTh>
|
||||
<TableTh style={{ width: '30%' }}>Nama Keunggulan Program</TableTh>
|
||||
<TableTh style={{ width: '35%' }}>Deskripsi</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Edit</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Delete</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
@@ -96,10 +110,17 @@ function ListKeunggulanProgram({ search }: { search: string }) {
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Text lineClamp={1} truncate="end" fw={500}>{item.judul}</Text>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.judul}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text lineClamp={1} truncate="end" fw={500} dangerouslySetInnerHTML={{ __html: item.deskripsi }}></Text>
|
||||
<Text
|
||||
fw={500}
|
||||
truncate="end"
|
||||
lineClamp={1}
|
||||
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
|
||||
/>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Tooltip label="Edit" withArrow>
|
||||
@@ -107,7 +128,11 @@ function ListKeunggulanProgram({ search }: { search: string }) {
|
||||
variant="light"
|
||||
color="green"
|
||||
size="sm"
|
||||
onClick={() => router.push(`/admin/pendidikan/beasiswa-desa/keunggulan-program/${item.id}`)}
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/admin/pendidikan/beasiswa-desa/keunggulan-program/${item.id}`
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconEdit size={18} />
|
||||
</Button>
|
||||
@@ -132,34 +157,43 @@ function ListKeunggulanProgram({ search }: { search: string }) {
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={3} align="center" py="xl">
|
||||
<Text c="dimmed">Tidak ada data pengelolaan sampah</Text>
|
||||
<TableTd colSpan={4}>
|
||||
<Center py={20}>
|
||||
<Text c="dimmed">
|
||||
Tidak ada data keunggulan program yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<Center mt="xl">
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => load(newPage)}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
siblings={1}
|
||||
boundaries={1}
|
||||
withEdges
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text='Apakah anda yakin ingin menghapus pengelolaan sampah bank sampah ini?'
|
||||
text="Apakah anda yakin ingin menghapus keunggulan program ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,66 +1,116 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { IconSchool, IconCalendar, IconBuildingCommunity } from '@tabler/icons-react';
|
||||
|
||||
function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
label: "Tujuan Program",
|
||||
value: "tujuan-program",
|
||||
href: "/admin/pendidikan/bimbingan-belajar-desa/tujuan-program"
|
||||
href: "/admin/pendidikan/bimbingan-belajar-desa/tujuan-program",
|
||||
icon: <IconSchool size={18} stroke={1.8} />,
|
||||
tooltip: "Lihat tujuan utama program bimbingan belajar",
|
||||
},
|
||||
{
|
||||
label: "Lokasi dan Jadwal",
|
||||
value: "lokasi-dan-jadwal",
|
||||
href: "/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal"
|
||||
href: "/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal",
|
||||
icon: <IconCalendar size={18} stroke={1.8} />,
|
||||
tooltip: "Atur lokasi pelaksanaan dan jadwal bimbingan",
|
||||
},
|
||||
{
|
||||
label: "Fasilitas yang disediakan",
|
||||
label: "Fasilitas yang Disediakan",
|
||||
value: "fasilitas-yang-disediakan",
|
||||
href: "/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan"
|
||||
href: "/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan",
|
||||
icon: <IconBuildingCommunity size={18} stroke={1.8} />,
|
||||
tooltip: "Kelola fasilitas yang tersedia untuk peserta",
|
||||
},
|
||||
|
||||
];
|
||||
const curentTab = tabs.find(tab => tab.href === pathname)
|
||||
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
|
||||
|
||||
const currentTab = tabs.find(tab => tab.href === pathname);
|
||||
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
|
||||
|
||||
const handleTabChange = (value: string | null) => {
|
||||
const tab = tabs.find(t => t.value === value)
|
||||
const tab = tabs.find(t => t.value === value);
|
||||
if (tab) {
|
||||
router.push(tab.href)
|
||||
}
|
||||
setActiveTab(value)
|
||||
router.push(tab.href);
|
||||
}
|
||||
setActiveTab(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const match = tabs.find(tab => tab.href === pathname)
|
||||
const match = tabs.find(tab => tab.href === pathname);
|
||||
if (match) {
|
||||
setActiveTab(match.value)
|
||||
setActiveTab(match.value);
|
||||
}
|
||||
}, [pathname])
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={3}>Bimbingan Belajar Desa</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>
|
||||
<Stack gap="lg">
|
||||
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
|
||||
Bimbingan Belajar Desa
|
||||
</Title>
|
||||
<Tabs
|
||||
color={colors['blue-button']}
|
||||
variant="pills"
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
radius="lg"
|
||||
keepMounted={false}
|
||||
>
|
||||
<TabsList
|
||||
p="sm"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab, i) => (
|
||||
<Tooltip
|
||||
key={i}
|
||||
label={tab.tooltip}
|
||||
position="bottom"
|
||||
withArrow
|
||||
transitionProps={{ transition: 'pop', duration: 200 }}
|
||||
>
|
||||
<TabsTab
|
||||
value={tab.value}
|
||||
leftSection={tab.icon}
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.9rem",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
</TabsTab>
|
||||
</Tooltip>
|
||||
))}
|
||||
</TabsList>
|
||||
{tabs.map((e, i) => (
|
||||
<TabsPanel key={i} value={e.value}>
|
||||
{/* Konten dummy, bisa diganti tergantung routing */}
|
||||
<></>
|
||||
|
||||
{tabs.map((tab, i) => (
|
||||
<TabsPanel
|
||||
key={i}
|
||||
value={tab.value}
|
||||
style={{
|
||||
padding: "1.5rem",
|
||||
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TabsPanel>
|
||||
))}
|
||||
</Tabs>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,86 +1,167 @@
|
||||
'use client'
|
||||
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
const BimbinganBelajarDesaTextEditor = dynamic(
|
||||
() =>
|
||||
import('../../_lib/bimbinganBelajarDesaTextEditor').then(
|
||||
(mod) => mod.BimbinganBelajarDesaTextEditor
|
||||
),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
function EditFasilitasYangDisediakan() {
|
||||
const router = useRouter();
|
||||
const editState = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
|
||||
|
||||
function EditTujuanProgram() {
|
||||
const router = useRouter()
|
||||
const editState = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState)
|
||||
const [judul, setJudul] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Load data pertama kali
|
||||
useShallowEffect(() => {
|
||||
if (!editState.findById.data) {
|
||||
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
editState.findById.initialize();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Sinkronkan state dengan data yang sudah di-load
|
||||
useEffect(() => {
|
||||
if (editState.findById.data) {
|
||||
setJudul(editState.findById.data.judul ?? '')
|
||||
setContent(editState.findById.data.deskripsi ?? '')
|
||||
setJudul(editState.findById.data.judul ?? '');
|
||||
setContent(editState.findById.data.deskripsi ?? '');
|
||||
}
|
||||
}, [editState.findById.data])
|
||||
}, [editState.findById.data]);
|
||||
|
||||
const submit = () => {
|
||||
const handleSubmit = async () => {
|
||||
if (!judul.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (editState.findById.data) {
|
||||
editState.findById.data.judul = judul;
|
||||
editState.findById.data.deskripsi = content;
|
||||
editState.update.save(editState.findById.data)
|
||||
await editState.update.save(editState.findById.data);
|
||||
|
||||
toast.success('Berhasil menyimpan perubahan');
|
||||
router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan');
|
||||
}
|
||||
router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan')
|
||||
} catch (err) {
|
||||
console.error('Error saving:', err);
|
||||
toast.error('Gagal menyimpan data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => router.back();
|
||||
|
||||
// Loading state
|
||||
if (editState.findById.loading) {
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={'xs'}>
|
||||
<Box>
|
||||
<Button
|
||||
variant={'subtle'}
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={20} />
|
||||
</Button>
|
||||
<Center h={400}>
|
||||
<Text>Memuat data fasilitas yang disediakan...</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
|
||||
<Stack gap={'xs'}>
|
||||
<Title order={3}>Edit Fasilitas Yang Disediakan</Title>
|
||||
<Stack gap="xs">
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={handleBack}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Fasilitas Yang Disediakan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<Title order={3}>Formulir Edit</Title>
|
||||
|
||||
{/* Judul */}
|
||||
<TextInput
|
||||
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
||||
label={<Text fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul fasilitas"
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.target.value)}
|
||||
onChange={(e) => setJudul(e.currentTarget.value)}
|
||||
error={!judul && 'Judul wajib diisi'}
|
||||
/>
|
||||
<Text fw={"bold"}>Deskripsi</Text>
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
|
||||
<BimbinganBelajarDesaTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Tombol Aksi */}
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={editState.update.loading}
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting || editState.update.loading}
|
||||
disabled={!judul}
|
||||
>
|
||||
Submit
|
||||
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBack}
|
||||
disabled={isSubmitting || editState.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditTujuanProgram;
|
||||
export default EditFasilitasYangDisediakan;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
|
||||
import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const listPreview = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState)
|
||||
const router = useRouter();
|
||||
const listPreview = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
|
||||
|
||||
useShallowEffect(() => {
|
||||
listPreview.findById.load('edit')
|
||||
}, [])
|
||||
listPreview.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!listPreview.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={400} w="90%" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = listPreview.findById.data;
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
|
||||
<Stack gap="md">
|
||||
{/* Header */}
|
||||
<Grid align="center">
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Fasilitas Yang Disediakan</Title>
|
||||
<Title order={3} c={colors['blue-button']}>
|
||||
Pratinjau Fasilitas Yang Disediakan
|
||||
</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit')}>
|
||||
<IconEdit size={16} />
|
||||
<Tooltip label="Edit Fasilitas" withArrow>
|
||||
<Button
|
||||
c="green"
|
||||
variant="light"
|
||||
leftSection={<IconEdit size={18} stroke={2} />}
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit'
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
|
||||
</Box>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
|
||||
|
||||
{/* Konten Preview */}
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-1']}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="xs"
|
||||
>
|
||||
<Box px={{ base: 'sm', md: 50 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Judul */}
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '1.3rem', md: '1.8rem' }}
|
||||
fw="bold"
|
||||
c={colors['blue-button']}
|
||||
dangerouslySetInnerHTML={{ __html: data.judul }}
|
||||
/>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Text
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -1,86 +1,169 @@
|
||||
'use client'
|
||||
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
const BimbinganBelajarDesaTextEditor = dynamic(
|
||||
() =>
|
||||
import('../../_lib/bimbinganBelajarDesaTextEditor').then(
|
||||
(mod) => mod.BimbinganBelajarDesaTextEditor
|
||||
),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
function EditLokasiDanJadwal() {
|
||||
const router = useRouter();
|
||||
const editState = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
|
||||
|
||||
function EditTujuanProgram() {
|
||||
const router = useRouter()
|
||||
const editState = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState)
|
||||
const [judul, setJudul] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// load data sekali
|
||||
useShallowEffect(() => {
|
||||
if (!editState.findById.data) {
|
||||
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
editState.findById.initialize();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// isi state ketika data loaded
|
||||
useEffect(() => {
|
||||
if (editState.findById.data) {
|
||||
setJudul(editState.findById.data.judul ?? '')
|
||||
setContent(editState.findById.data.deskripsi ?? '')
|
||||
setJudul(editState.findById.data.judul ?? '');
|
||||
setContent(editState.findById.data.deskripsi ?? '');
|
||||
}
|
||||
}, [editState.findById.data])
|
||||
}, [editState.findById.data]);
|
||||
|
||||
const submit = () => {
|
||||
const handleSubmit = async () => {
|
||||
if (!judul.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (editState.findById.data) {
|
||||
editState.findById.data.judul = judul;
|
||||
editState.findById.data.deskripsi = content;
|
||||
editState.update.save(editState.findById.data)
|
||||
await editState.update.save(editState.findById.data);
|
||||
|
||||
toast.success('Berhasil menyimpan perubahan');
|
||||
router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal');
|
||||
}
|
||||
router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal')
|
||||
} catch (err) {
|
||||
console.error('Error saving:', err);
|
||||
toast.error('Gagal menyimpan data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => router.back();
|
||||
|
||||
// loading state
|
||||
if (editState.findById.loading) {
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={'xs'}>
|
||||
<Box>
|
||||
<Button
|
||||
variant={'subtle'}
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={20} />
|
||||
</Button>
|
||||
<Center h={400}>
|
||||
<Text>Memuat data lokasi & jadwal...</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
|
||||
<Stack gap={'xs'}>
|
||||
<Title order={3}>Edit Lokasi Dan Jadwal</Title>
|
||||
<Stack gap="xs">
|
||||
{/* Header dengan tombol kembali */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={handleBack}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Lokasi & Jadwal
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Card */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<Title order={3}>Form Lokasi & Jadwal</Title>
|
||||
|
||||
{/* Judul Field */}
|
||||
<TextInput
|
||||
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
||||
label={<Text fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul lokasi/jadwal"
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.target.value)}
|
||||
onChange={(e) => setJudul(e.currentTarget.value)}
|
||||
error={!judul && 'Judul wajib diisi'}
|
||||
/>
|
||||
<Text fw={"bold"}>Deskripsi</Text>
|
||||
|
||||
{/* Deskripsi Field */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
|
||||
<BimbinganBelajarDesaTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Action Button */}
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={editState.update.loading}
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting || editState.update.loading}
|
||||
disabled={!judul}
|
||||
>
|
||||
Submit
|
||||
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBack}
|
||||
disabled={isSubmitting || editState.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditTujuanProgram;
|
||||
export default EditLokasiDanJadwal;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
|
||||
import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const listPreview = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState)
|
||||
const router = useRouter();
|
||||
const listPreview = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
|
||||
|
||||
useShallowEffect(() => {
|
||||
listPreview.findById.load('edit')
|
||||
}, [])
|
||||
listPreview.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!listPreview.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={400} w="90%" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = listPreview.findById.data;
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
|
||||
<Stack gap="md">
|
||||
{/* Header */}
|
||||
<Grid align="center">
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Lokasi Dan Jadwal</Title>
|
||||
<Title order={3} c={colors['blue-button']}>
|
||||
Pratinjau Lokasi & Jadwal
|
||||
</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit')}>
|
||||
<IconEdit size={16} />
|
||||
<Tooltip label="Edit Lokasi & Jadwal" withArrow>
|
||||
<Button
|
||||
c="green"
|
||||
variant="light"
|
||||
leftSection={<IconEdit size={18} stroke={2} />}
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit'
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
|
||||
</Box>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
|
||||
|
||||
{/* Konten Preview */}
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-1']}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="xs"
|
||||
>
|
||||
<Box px={{ base: 'sm', md: 50 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Judul */}
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '1.3rem', md: '1.8rem' }}
|
||||
fw="bold"
|
||||
c={colors['blue-button']}
|
||||
dangerouslySetInnerHTML={{ __html: data.judul }}
|
||||
/>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Text
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -1,83 +1,158 @@
|
||||
'use client'
|
||||
import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
const BimbinganBelajarDesaTextEditor = dynamic(
|
||||
() =>
|
||||
import('../../_lib/bimbinganBelajarDesaTextEditor').then(
|
||||
(mod) => mod.BimbinganBelajarDesaTextEditor
|
||||
),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
function EditTujuanProgram() {
|
||||
const router = useRouter()
|
||||
const editState = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram)
|
||||
const router = useRouter();
|
||||
const editState = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
|
||||
|
||||
const [judul, setJudul] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// load data once
|
||||
useShallowEffect(() => {
|
||||
if (!editState.findById.data) {
|
||||
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
editState.findById.initialize();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (editState.findById.data) {
|
||||
setJudul(editState.findById.data.judul ?? '')
|
||||
setContent(editState.findById.data.deskripsi ?? '')
|
||||
setJudul(editState.findById.data.judul ?? '');
|
||||
setContent(editState.findById.data.deskripsi ?? '');
|
||||
}
|
||||
}, [editState.findById.data])
|
||||
}, [editState.findById.data]);
|
||||
|
||||
const submit = () => {
|
||||
const handleSubmit = async () => {
|
||||
if (!judul.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (editState.findById.data) {
|
||||
editState.findById.data.judul = judul;
|
||||
editState.findById.data.deskripsi = content;
|
||||
editState.update.save(editState.findById.data)
|
||||
await editState.update.save(editState.findById.data);
|
||||
|
||||
toast.success('Berhasil menyimpan perubahan');
|
||||
router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program');
|
||||
}
|
||||
router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program')
|
||||
} catch (err) {
|
||||
console.error('Error saving:', err);
|
||||
toast.error('Gagal menyimpan data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => router.back();
|
||||
|
||||
// loading state
|
||||
if (editState.findById.loading) {
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={'xs'}>
|
||||
<Box>
|
||||
<Button
|
||||
variant={'subtle'}
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={20} />
|
||||
</Button>
|
||||
<Center h={400}>
|
||||
<Text>Memuat data tujuan program...</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
|
||||
<Stack gap={'xs'}>
|
||||
<Title order={3}>Edit Tujuan Program</Title>
|
||||
<Stack gap="xs">
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Tujuan Program
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<Title order={3}>Form Edit Tujuan Program</Title>
|
||||
|
||||
{/* Judul Field */}
|
||||
<TextInput
|
||||
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
||||
label={<Text fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul program"
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.target.value)}
|
||||
onChange={(e) => setJudul(e.currentTarget.value)}
|
||||
error={!judul && 'Judul wajib diisi'}
|
||||
/>
|
||||
<Text fw={"bold"}>Deskripsi</Text>
|
||||
|
||||
{/* Deskripsi Field */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
|
||||
<BimbinganBelajarDesaTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Submit & Cancel */}
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={editState.update.loading}
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting || editState.update.loading}
|
||||
disabled={!judul}
|
||||
>
|
||||
Submit
|
||||
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBack}
|
||||
disabled={isSubmitting || editState.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -8,47 +20,86 @@ import { useProxy } from 'valtio/utils';
|
||||
import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const listPreview = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram)
|
||||
const router = useRouter();
|
||||
const listPreview = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
|
||||
|
||||
useShallowEffect(() => {
|
||||
listPreview.findById.load('edit')
|
||||
}, [])
|
||||
listPreview.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!listPreview.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={400} w="90%" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = listPreview.findById.data;
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
|
||||
<Stack gap="md">
|
||||
{/* Header */}
|
||||
<Grid align="center">
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Tujuan Program</Title>
|
||||
<Title order={3} c={colors['blue-button']}>
|
||||
Pratinjau Tujuan Program
|
||||
</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program/edit')}>
|
||||
<IconEdit size={16} />
|
||||
<Tooltip label="Edit Tujuan Program" withArrow>
|
||||
<Button
|
||||
c="green"
|
||||
variant="light"
|
||||
leftSection={<IconEdit size={18} stroke={2} />}
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/bimbingan-belajar-desa/tujuan-program/edit'
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
|
||||
</Box>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
|
||||
|
||||
{/* Konten Preview */}
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-1']}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="xs"
|
||||
>
|
||||
<Box px={{ base: 'sm', md: 50 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Judul */}
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '1.3rem', md: '1.8rem' }}
|
||||
fw="bold"
|
||||
c={colors['blue-button']}
|
||||
dangerouslySetInnerHTML={{ __html: data.judul }}
|
||||
/>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Text
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -2,79 +2,94 @@
|
||||
'use client'
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
|
||||
import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
|
||||
|
||||
function EditDataPendidikan() {
|
||||
const router = useRouter()
|
||||
const params = useParams() as { id: string }
|
||||
const stateDPM = useProxy(dataPendidikan)
|
||||
export default function EditDataPendidikan() {
|
||||
const router = useRouter();
|
||||
const params = useParams() as { id: string };
|
||||
const stateDPM = useProxy(dataPendidikan);
|
||||
const id = params.id;
|
||||
|
||||
const id = params.id
|
||||
|
||||
// Load data saat komponen mount
|
||||
// Load data saat mount
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
stateDPM.findUnique.load(id).then(() => {
|
||||
const data = stateDPM.findUnique.data
|
||||
const data = stateDPM.findUnique.data;
|
||||
if (data) {
|
||||
stateDPM.update.form = {
|
||||
name: data.name || "",
|
||||
jumlah: data.jumlah || "",
|
||||
name: data.name || '',
|
||||
jumlah: data.jumlah || '',
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}, [id])
|
||||
}, [id]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// Set the ID before submitting
|
||||
stateDPM.update.id = id;
|
||||
await stateDPM.update.submit();
|
||||
router.push('/admin/pendidikan/data-pendidikan')
|
||||
}
|
||||
router.push('/admin/pendidikan/data-pendidikan');
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack size={20} />
|
||||
<Box px={{ base: 'sm', md: 'xl' }} py="md">
|
||||
<Group mb="md" gap="sm">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" position="bottom" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} radius="md">
|
||||
<IconArrowBack size={20} stroke={2} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
|
||||
<Stack>
|
||||
<Title order={3}>Edit Data Pendidikan</Title>
|
||||
</Tooltip>
|
||||
<Title order={3} c="black">Edit Data Pendidikan</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
withBorder
|
||||
w={{ base: '100%', md: '60%' }}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="xl"
|
||||
bg="white"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Nama"
|
||||
placeholder="masukkan nama"
|
||||
label="Nama Pendidikan"
|
||||
placeholder="Contoh: SD, SMP, SMA"
|
||||
value={stateDPM.update.form.name}
|
||||
onChange={(val) => {
|
||||
stateDPM.update.form.name = val.currentTarget.value;
|
||||
}}
|
||||
onChange={(e) => (stateDPM.update.form.name = e.currentTarget.value)}
|
||||
radius="md"
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
label="Jumlah"
|
||||
label="Jumlah Peserta"
|
||||
type="number"
|
||||
placeholder="masukkan jumlah"
|
||||
placeholder="Masukkan jumlah peserta"
|
||||
value={stateDPM.update.form.jumlah}
|
||||
onChange={(val) => {
|
||||
stateDPM.update.form.jumlah = val.currentTarget.value;
|
||||
}}
|
||||
onChange={(e) => (stateDPM.update.form.jumlah = e.currentTarget.value)}
|
||||
radius="md"
|
||||
required
|
||||
/>
|
||||
<Group justify="right" mt="sm">
|
||||
<Button
|
||||
mt={10}
|
||||
bg={colors['blue-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 },
|
||||
}}
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default EditDataPendidikan;
|
||||
|
||||
@@ -1,81 +1,93 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
|
||||
|
||||
function CreateDataPendidikan() {
|
||||
export default function CreateDataPendidikan() {
|
||||
const stateDPM = useProxy(dataPendidikan);
|
||||
const [chartData, setChartData] = useState<any[]>([]);
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
|
||||
const resetForm = () => {
|
||||
stateDPM.create.form = {
|
||||
name: "",
|
||||
jumlah: "",
|
||||
}
|
||||
}
|
||||
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]);
|
||||
}
|
||||
if (stateDPM.findUnique.data) setChartData([stateDPM.findUnique.data]);
|
||||
}
|
||||
resetForm();
|
||||
router.push("/admin/pendidikan/data-pendidikan");
|
||||
}
|
||||
router.push('/admin/pendidikan/data-pendidikan');
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack size={20} />
|
||||
<Box px={{ base: 'sm', md: 'xl' }} py="md">
|
||||
<Group mb="md" gap="sm">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" position="bottom" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} radius="md">
|
||||
<IconArrowBack size={20} stroke={2} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Box>
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Title order={4}>Tambah Data Pendidikan</Title>
|
||||
<Stack gap={"xs"}>
|
||||
<TextInput
|
||||
label="Nama"
|
||||
type="text"
|
||||
value={stateDPM.create.form.name}
|
||||
placeholder="Masukkan nama"
|
||||
onChange={(val) => {
|
||||
stateDPM.create.form.name = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label="Jumlah"
|
||||
type="number"
|
||||
value={stateDPM.create.form.jumlah}
|
||||
placeholder="Masukkan jumlah"
|
||||
onChange={(val) => {
|
||||
stateDPM.create.form.jumlah = val.currentTarget.value;
|
||||
}}
|
||||
/>
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
mt={10}
|
||||
onClick={handleSubmit}
|
||||
</Tooltip>
|
||||
<Title order={3} c='black'>Tambah Data Pendidikan</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
withBorder
|
||||
w={{ base: '100%', md: '60%' }}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="xl"
|
||||
bg="white"
|
||||
>
|
||||
Submit
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Nama Pendidikan"
|
||||
placeholder="Contoh: SD, SMP, SMA"
|
||||
value={stateDPM.create.form.name}
|
||||
onChange={(e) => (stateDPM.create.form.name = e.currentTarget.value)}
|
||||
radius="md"
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
label="Jumlah Peserta"
|
||||
placeholder="Masukkan jumlah peserta"
|
||||
value={stateDPM.create.form.jumlah}
|
||||
onChange={(e) => (stateDPM.create.form.jumlah = e.currentTarget.value)}
|
||||
radius="md"
|
||||
type="number"
|
||||
required
|
||||
/>
|
||||
<Group justify="right" mt="sm">
|
||||
<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 },
|
||||
}}
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
{chartData.length === 0 && (
|
||||
<Text mt="md" c={colors['white-1']} ta="center">
|
||||
Data belum tersedia. Silakan tambahkan data pendidikan baru.
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateDataPendidikan;
|
||||
|
||||
@@ -1,24 +1,23 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
|
||||
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconDatabase, IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
|
||||
import { Bar, BarChart, Legend, Tooltip as RechartTooltip, ResponsiveContainer, XAxis, YAxis } from 'recharts';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../_com/header';
|
||||
import JudulList from '../../_com/judulList';
|
||||
import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
|
||||
import dataPendidikan from '../../_state/pendidikan/data-pendidikan';
|
||||
|
||||
function DataPendidikan() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [search, setSearch] = useState('');
|
||||
return (
|
||||
<Box>
|
||||
<Box py="md">
|
||||
<HeaderSearch
|
||||
title='Data Pendidikan'
|
||||
placeholder='pencarian'
|
||||
title="Data Pendidikan"
|
||||
placeholder="Cari data pendidikan..."
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -29,77 +28,81 @@ function DataPendidikan() {
|
||||
}
|
||||
|
||||
function ListDataPendidikan({ search }: { search: string }) {
|
||||
type DPMrafik = {
|
||||
id: string;
|
||||
name: string;
|
||||
jumlah: number;
|
||||
}
|
||||
type DPMrafik = { id: string; name: string; jumlah: number };
|
||||
const stateDPM = useProxy(dataPendidikan);
|
||||
const [chartData, setChartData] = useState<DPMrafik[]>([]);
|
||||
const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
|
||||
const isTablet = useMediaQuery('(max-width: 1024px)')
|
||||
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedId) {
|
||||
stateDPM.delete.byId(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
|
||||
stateDPM.findMany.load()
|
||||
}
|
||||
stateDPM.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
stateDPM.findMany.load();
|
||||
}
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
setMounted(true)
|
||||
stateDPM.findMany.load()
|
||||
}, [])
|
||||
setMounted(true);
|
||||
stateDPM.findMany.load();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
if (stateDPM.findMany.data) {
|
||||
setChartData(stateDPM.findMany.data.map((item) => ({
|
||||
setChartData(
|
||||
stateDPM.findMany.data.map((item) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
jumlah: Number(item.jumlah)
|
||||
})));
|
||||
jumlah: Number(item.jumlah),
|
||||
}))
|
||||
);
|
||||
}
|
||||
}, [stateDPM.findMany.data]);
|
||||
|
||||
const filteredData = (stateDPM.findMany.data || []).filter(item => {
|
||||
const filteredData = (stateDPM.findMany.data || []).filter((item) => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.name.toLowerCase().includes(keyword) ||
|
||||
item.jumlah.toLowerCase().includes(keyword)
|
||||
);
|
||||
return item.name.toLowerCase().includes(keyword) || item.jumlah.toString().includes(keyword);
|
||||
});
|
||||
|
||||
if (!stateDPM.findMany.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton h={500} />
|
||||
<Stack gap="sm">
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Stack gap={'xs'}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<JudulList
|
||||
title='List Data Pendidikan'
|
||||
href='/admin/pendidikan/data-pendidikan/create'
|
||||
/>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<Box py="sm">
|
||||
<Stack gap="sm">
|
||||
<Paper p="md" withBorder bg={colors['white-1']} shadow="sm" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Data Pendidikan</Title>
|
||||
<Tooltip label="Tambah Data Pendidikan" withArrow>
|
||||
<Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/pendidikan/data-pendidikan/create')}>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
{filteredData.length === 0 ? (
|
||||
<Box py="lg" px="md" style={{ textAlign: 'center' }}>
|
||||
<IconDatabase size={48} stroke={1.5} color={colors['white-1']} />
|
||||
<Text mt="sm" c="dimmed">
|
||||
Tidak ada data pendidikan yang sesuai pencarian
|
||||
</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<Table striped highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Nama</TableTh>
|
||||
<TableTh>Jumlah</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Delete</TableTh>
|
||||
<TableTh>Hapus</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
@@ -108,59 +111,70 @@ function ListDataPendidikan({ search }: { search: string }) {
|
||||
<TableTd>{item.name}</TableTd>
|
||||
<TableTd>{item.jumlah}</TableTd>
|
||||
<TableTd>
|
||||
<Button color='green' onClick={() => router.push(`/admin/pendidikan/data-pendidikan/${item.id}`)}>
|
||||
<Tooltip label="Edit data pendidikan" position="top" withArrow>
|
||||
<Button
|
||||
color="green"
|
||||
variant="light"
|
||||
radius="md"
|
||||
onClick={() => router.push(`/admin/pendidikan/data-pendidikan/${item.id}`)}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Tooltip label="Hapus data pendidikan" position="top" withArrow>
|
||||
<Button
|
||||
color='red'
|
||||
color="red"
|
||||
variant="light"
|
||||
radius="md"
|
||||
disabled={stateDPM.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id)
|
||||
setModalHapus(true)
|
||||
}}>
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Chart */}
|
||||
{!mounted && !chartData ? (
|
||||
<Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Title pb={10} order={3}>Grafik Data Pendidikan</Title>
|
||||
<Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
|
||||
</Paper>
|
||||
</Box>
|
||||
) : (
|
||||
<Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Title pb={10} order={4}>Grafik Data Pendidikan</Title>
|
||||
{mounted && chartData.length > 0 && (
|
||||
<BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
|
||||
<Paper withBorder p="md" bg={colors['white-1']} shadow="sm" radius="md">
|
||||
<Title order={4} mb="sm">
|
||||
Grafik Data Pendidikan
|
||||
</Title>
|
||||
{mounted && chartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={350}>
|
||||
<BarChart data={chartData} margin={{ top: 20, right: 30, left: 0, bottom: 5 }}>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<RechartTooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="jumlah" fill={colors['blue-button']} name="Data Pendidikan" />
|
||||
<Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah Pendidikan" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
)}
|
||||
</Paper>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<Box py="lg" style={{ textAlign: 'center' }}>
|
||||
<IconDatabase size={48} stroke={1.5} color={colors['white-1']} />
|
||||
<Text mt="sm" c="dimmed">
|
||||
Belum ada data untuk ditampilkan
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
</Stack>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text='Apakah anda yakin ingin menghapus grafik data pendidikan ini?'
|
||||
text="Apakah Anda yakin ingin menghapus data pendidikan ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,72 +1,124 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { IconBuilding, IconChalkboard, IconMicroscope, IconSchool } from '@tabler/icons-react';
|
||||
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 router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
label: "Jenjang Pendidikan",
|
||||
value: "jenjangPendidikan",
|
||||
href: "/admin/pendidikan/info-sekolah/jenjang-pendidikan"
|
||||
href: "/admin/pendidikan/info-sekolah/jenjang-pendidikan",
|
||||
icon: <IconBuilding size={18} stroke={1.8} />,
|
||||
tooltip: "Lihat dan kelola jenjang pendidikan",
|
||||
},
|
||||
{
|
||||
label: "Lembaga",
|
||||
value: "lembaga",
|
||||
href: "/admin/pendidikan/info-sekolah/lembaga"
|
||||
href: "/admin/pendidikan/info-sekolah/lembaga",
|
||||
icon: <IconChalkboard size={18} stroke={1.8} />,
|
||||
tooltip: "Lihat dan kelola lembaga",
|
||||
},
|
||||
{
|
||||
label: "Siswa",
|
||||
value: "siswa",
|
||||
href: "/admin/pendidikan/info-sekolah/siswa"
|
||||
href: "/admin/pendidikan/info-sekolah/siswa",
|
||||
icon: <IconSchool size={18} stroke={1.8} />,
|
||||
tooltip: "Lihat dan kelola siswa",
|
||||
},
|
||||
{
|
||||
label: "Pengajar",
|
||||
value: "pengajar",
|
||||
href: "/admin/pendidikan/info-sekolah/pengajar"
|
||||
},
|
||||
href: "/admin/pendidikan/info-sekolah/pengajar",
|
||||
icon: <IconMicroscope size={18} stroke={1.8} />,
|
||||
tooltip: "Lihat dan kelola pengajar",
|
||||
}
|
||||
];
|
||||
const curentTab = tabs.find(tab => tab.href === pathname)
|
||||
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
|
||||
|
||||
const currentTab = tabs.find(tab => tab.href === pathname);
|
||||
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
|
||||
|
||||
const handleTabChange = (value: string | null) => {
|
||||
const tab = tabs.find(t => t.value === value)
|
||||
const tab = tabs.find(t => t.value === value);
|
||||
if (tab) {
|
||||
router.push(tab.href)
|
||||
}
|
||||
setActiveTab(value)
|
||||
router.push(tab.href);
|
||||
}
|
||||
setActiveTab(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const match = tabs.find(tab => tab.href === pathname)
|
||||
const match = tabs.find(tab => tab.href === pathname);
|
||||
if (match) {
|
||||
setActiveTab(match.value)
|
||||
setActiveTab(match.value);
|
||||
}
|
||||
}, [pathname])
|
||||
}, [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>
|
||||
<Stack gap="lg">
|
||||
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
|
||||
Info Sekolah
|
||||
</Title>
|
||||
<Tabs
|
||||
color={colors['blue-button']}
|
||||
variant='pills'
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
radius="lg"
|
||||
keepMounted={false}
|
||||
>
|
||||
<TabsList
|
||||
p="sm"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab, i) => (
|
||||
<Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
|
||||
<TabsTab
|
||||
value={tab.value}
|
||||
leftSection={tab.icon}
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.9rem",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
</TabsTab>
|
||||
</Tooltip>
|
||||
))}
|
||||
</TabsList>
|
||||
{tabs.map((e, i) => (
|
||||
<TabsPanel key={i} value={e.value}>
|
||||
{/* Konten dummy, bisa diganti tergantung routing */}
|
||||
<></>
|
||||
|
||||
{tabs.map((tab, i) => (
|
||||
<TabsPanel
|
||||
key={i}
|
||||
value={tab.value}
|
||||
style={{
|
||||
padding: "1.5rem",
|
||||
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TabsPanel>
|
||||
))}
|
||||
</Tabs>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default LayoutTabs;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -2,7 +2,16 @@
|
||||
'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 {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
@@ -27,7 +36,6 @@ function EditJenjangPendidikan() {
|
||||
const data = await stateJenjang.edit.load(id);
|
||||
|
||||
if (data) {
|
||||
// pastikan id-nya masuk ke state edit
|
||||
stateJenjang.edit.id = id;
|
||||
setFormData({
|
||||
nama: data.nama || '',
|
||||
@@ -53,41 +61,67 @@ function EditJenjangPendidikan() {
|
||||
nama: formData.nama.trim(),
|
||||
};
|
||||
|
||||
// Safety check tambahan: pastikan ID tidak kosong
|
||||
if (!stateJenjang.edit.id) {
|
||||
stateJenjang.edit.id = id; // fallback
|
||||
stateJenjang.edit.id = id;
|
||||
}
|
||||
|
||||
const success = await stateJenjang.edit.update();
|
||||
|
||||
if (success) {
|
||||
toast.success("Jenjang pendidikan berhasil diperbarui!");
|
||||
router.push("/admin/pendidikan/info-sekolah/jenjang-pendidikan");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating jenjang pendidikan:", error);
|
||||
// toast akan ditampilkan dari fungsi update
|
||||
toast.error("Terjadi kesalahan saat memperbarui jenjang pendidikan");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header Back + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Jenjang Pendidikan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Edit Jenjang Pendidikan</Title>
|
||||
{/* Form Container */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Nama Jenjang Pendidikan"
|
||||
placeholder="Masukkan nama jenjang pendidikan"
|
||||
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'
|
||||
required
|
||||
/>
|
||||
<Group>
|
||||
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
@@ -1,16 +1,26 @@
|
||||
/* 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 {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
|
||||
|
||||
function CreateJenjangPendidikan() {
|
||||
const router = useRouter();
|
||||
const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan)
|
||||
const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
|
||||
|
||||
useEffect(() => {
|
||||
stateJenjang.findMany.load();
|
||||
@@ -18,43 +28,74 @@ function CreateJenjangPendidikan() {
|
||||
|
||||
const resetForm = () => {
|
||||
stateJenjang.create.form = {
|
||||
nama: "",
|
||||
nama: '',
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await stateJenjang.create.create();
|
||||
resetForm();
|
||||
router.push("/admin/pendidikan/info-sekolah/jenjang-pendidikan")
|
||||
if (!stateJenjang.create.form.nama) {
|
||||
return toast.warn('Nama jenjang pendidikan tidak boleh kosong');
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
await stateJenjang.create.create();
|
||||
resetForm();
|
||||
router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan');
|
||||
};
|
||||
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Create Jenjang Pendidikan</Title>
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Back button + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Jenjang Pendidikan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
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'
|
||||
label="Nama Jenjang Pendidikan"
|
||||
placeholder="Masukkan nama jenjang pendidikan"
|
||||
value={stateJenjang.create.form.nama || ''}
|
||||
onChange={(e) => (stateJenjang.create.form.nama = e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Group>
|
||||
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
|
||||
import { Box, Button, Center, Group, Paper, Pagination, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
|
||||
import { IconEdit, IconPlus, 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';
|
||||
|
||||
@@ -18,7 +17,7 @@ function JenjangPendidikan() {
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Jenjang Pendidikan'
|
||||
placeholder='pencarian'
|
||||
placeholder='Cari jenjang pendidikan...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -34,6 +33,14 @@ function ListJenjangPendidikan({ search }: { search: string }) {
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const router = useRouter()
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = stateList.findMany
|
||||
|
||||
const handleHapus = () => {
|
||||
if (selectedId) {
|
||||
stateList.delete.byId(selectedId)
|
||||
@@ -43,61 +50,104 @@ function ListJenjangPendidikan({ search }: { search: string }) {
|
||||
}
|
||||
|
||||
useShallowEffect(() => {
|
||||
stateList.findMany.load()
|
||||
}, [])
|
||||
load(page, 10, search)
|
||||
}, [page, search])
|
||||
|
||||
const filteredData = (stateList.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.nama.toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
const filteredData = data || []
|
||||
|
||||
if (!stateList.findMany.data) {
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton h={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<JudulList
|
||||
title='List Jenjang Pendidikan'
|
||||
href='/admin/pendidikan/info-sekolah/jenjang-pendidikan/create'
|
||||
/>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<Paper bg={colors['white-1']} p="lg" withBorder shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Jenjang Pendidikan</Title>
|
||||
<Tooltip label="Tambah Jenjang Pendidikan" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
|
||||
<Box style={{ overflowX: "auto" }}>
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Nama Jenjang Pendidikan</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Delete</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Edit</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Delete</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.map((item) => (
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.nama}</TableTd>
|
||||
<TableTd>
|
||||
<Button color="green" onClick={() => router.push(`/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`)}>
|
||||
<Text fw={500} truncate="end">{item.nama}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
color="green"
|
||||
variant="light"
|
||||
onClick={() => router.push(`/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`)}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button color="red" onClick={() => {
|
||||
<Button
|
||||
color="red"
|
||||
variant="light"
|
||||
onClick={() => {
|
||||
setSelectedId(item.id)
|
||||
setModalHapus(true)
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<IconX size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={3}>
|
||||
<Center py={20}>
|
||||
<Text color="dimmed">Tidak ada data jenjang pendidikan</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
|
||||
@@ -3,14 +3,23 @@
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { Box, Button, Paper, Select, Stack, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} 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 }>();
|
||||
@@ -26,7 +35,7 @@ export default function EditLembaga() {
|
||||
infoSekolahPaud.jenjangPendidikan.findMany.load();
|
||||
|
||||
if (id) {
|
||||
state.edit.load(id).then(data => {
|
||||
state.edit.load(id).then((data) => {
|
||||
if (data) {
|
||||
setForm({
|
||||
nama: data.nama,
|
||||
@@ -39,7 +48,7 @@ export default function EditLembaga() {
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.nama || !form.jenjangId) {
|
||||
toast.warn("Nama dan jenjang pendidikan harus diisi");
|
||||
toast.warn('Nama dan jenjang pendidikan harus diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -49,39 +58,77 @@ export default function EditLembaga() {
|
||||
const result = await state.edit.update();
|
||||
|
||||
if (result) {
|
||||
toast.success("Data berhasil diperbarui");
|
||||
toast.success('Data berhasil diperbarui');
|
||||
router.push('/admin/pendidikan/info-sekolah/lembaga');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header dengan back button */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper p="md" w={{ base: '100%', md: '50%' }}>
|
||||
<Stack>
|
||||
<Title order={3}>Edit Lembaga</Title>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Lembaga Pendidikan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Card Form */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Nama Lembaga"
|
||||
placeholder="Masukkan nama lembaga"
|
||||
value={form.nama}
|
||||
onChange={(e) => setForm({ ...form, nama: e.currentTarget.value })}
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Jenjang Pendidikan"
|
||||
placeholder="Pilih jenjang pendidikan"
|
||||
searchable
|
||||
data={jenjangPendidikanList?.map(p => ({
|
||||
data={
|
||||
jenjangPendidikanList?.map((p) => ({
|
||||
value: p.id,
|
||||
label: p.nama,
|
||||
})) || []}
|
||||
})) || []
|
||||
}
|
||||
value={form.jenjangId}
|
||||
onChange={(val) => setForm({ ...form, jenjangId: val || '' })}
|
||||
required
|
||||
/>
|
||||
<Button onClick={handleSubmit} color="blue">Simpan</Button>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
@@ -1,112 +1,131 @@
|
||||
'use client'
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
|
||||
import { IconArrowBack, IconEdit, IconTrash } 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()
|
||||
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)
|
||||
}, [])
|
||||
|
||||
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/lembaga")
|
||||
}
|
||||
detailState.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
router.push("/admin/pendidikan/info-sekolah/lembaga");
|
||||
}
|
||||
};
|
||||
|
||||
if (!detailState.findUnique.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={40} />
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = detailState.findUnique.data;
|
||||
|
||||
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}>
|
||||
<Box py={10}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (detailState.findUnique.data) {
|
||||
setSelectedId(detailState.findUnique.data.id);
|
||||
setModalHapus(true);
|
||||
}
|
||||
}}
|
||||
disabled={detailState.delete.loading || !detailState.findUnique.data}
|
||||
color={"red"}
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
|
||||
mb={15}
|
||||
>
|
||||
<IconX size={20} />
|
||||
Kembali
|
||||
</Button>
|
||||
|
||||
<Paper
|
||||
withBorder
|
||||
w={{ base: "100%", md: "60%" }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
|
||||
Detail Lembaga
|
||||
</Text>
|
||||
|
||||
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
|
||||
<Stack gap="sm">
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Nama</Text>
|
||||
<Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Jenjang Pendidikan</Text>
|
||||
<Text fz="md" c="dimmed">{data?.jenjangPendidikan?.nama || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Jumlah Siswa</Text>
|
||||
<Text fz="md" c="dimmed">{data?.siswa?.length ?? 0}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Jumlah Pengajar</Text>
|
||||
<Text fz="md" c="dimmed">{data?.pengajar?.length ?? 0}</Text>
|
||||
</Box>
|
||||
|
||||
<Group gap="sm">
|
||||
<Tooltip label="Hapus Lembaga" withArrow position="top">
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
if (detailState.findUnique.data) {
|
||||
router.push(`/admin/pendidikan/info-sekolah/lembaga/${detailState.findUnique.data.id}/edit`);
|
||||
}
|
||||
setSelectedId(data.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
disabled={!detailState.findUnique.data}
|
||||
color={"green"}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="Edit Lembaga" withArrow position="top">
|
||||
<Button
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/pendidikan/info-sekolah/lembaga/${data.id}/edit`)
|
||||
}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : null}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text='Apakah anda yakin ingin menghapus lembaga ini?'
|
||||
text="Apakah anda yakin ingin menghapus lembaga ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,18 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
'use client';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
@@ -10,7 +21,7 @@ import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
|
||||
|
||||
function CreateLembaga() {
|
||||
const router = useRouter();
|
||||
const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan)
|
||||
const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan);
|
||||
|
||||
useEffect(() => {
|
||||
stateLembaga.findMany.load();
|
||||
@@ -19,57 +30,85 @@ function CreateLembaga() {
|
||||
|
||||
const resetForm = () => {
|
||||
stateLembaga.create.form = {
|
||||
nama: "",
|
||||
jenjangId: "",
|
||||
nama: '',
|
||||
jenjangId: '',
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await stateLembaga.create.create();
|
||||
resetForm();
|
||||
router.push("/admin/pendidikan/info-sekolah/lembaga")
|
||||
}
|
||||
router.push('/admin/pendidikan/info-sekolah/lembaga');
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Lembaga Pendidikan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Create Lembaga</Title>
|
||||
{/* Form */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
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'
|
||||
label={<Text fw="bold" fz="sm">Nama Lembaga</Text>}
|
||||
placeholder="Masukkan nama lembaga"
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Jenjang Pendidikan"
|
||||
label={<Text fw="bold" fz="sm">Jenjang Pendidikan</Text>}
|
||||
placeholder="Pilih jenjang pendidikan"
|
||||
searchable
|
||||
data={infoSekolahPaud.jenjangPendidikan.findMany.data?.map(j => ({
|
||||
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 || '';
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<Group>
|
||||
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,23 +1,39 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Pagination,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Table,
|
||||
TableTbody,
|
||||
TableTd,
|
||||
TableTh,
|
||||
TableThead,
|
||||
TableTr,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
|
||||
import { IconDeviceImac, IconPlus, 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'
|
||||
placeholder='Cari nama lembaga atau jenjang pendidikan...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -31,57 +47,103 @@ function ListLembaga({ search }: { search: string }) {
|
||||
const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
|
||||
const router = useRouter()
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = stateList.findMany;
|
||||
|
||||
useShallowEffect(() => {
|
||||
stateList.findMany.load()
|
||||
}, [])
|
||||
load(page, 10, search)
|
||||
}, [page, search])
|
||||
|
||||
const filteredData = (stateList.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.nama.toLowerCase().includes(keyword) ||
|
||||
item.jenjangPendidikan?.nama.toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
const filteredData = data || []
|
||||
|
||||
if (!stateList.findMany.data) {
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton height={600} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<JudulList
|
||||
title='List Lembaga'
|
||||
href='/admin/pendidikan/info-sekolah/lembaga/create'
|
||||
/>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Lembaga</Title>
|
||||
<Tooltip label="Tambah Lembaga Baru" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/pendidikan/info-sekolah/lembaga/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<Box style={{ overflowX: "auto" }}>
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Nama Lembaga</TableTh>
|
||||
<TableTh>Jenjang Pendidikan</TableTh>
|
||||
<TableTh>Detail</TableTh>
|
||||
<TableTh style={{ width: '40%' }}>Nama Lembaga</TableTh>
|
||||
<TableTh style={{ width: '30%' }}>Jenjang Pendidikan</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.map((item) => (
|
||||
{filteredData.length > 0 ? (
|
||||
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/lembaga/${item.id}`)}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text fz="sm" c="dimmed">{item.jenjangPendidikan?.nama || '-'}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="blue"
|
||||
onClick={() => router.push(`/admin/pendidikan/info-sekolah/lembaga/${item.id}`)}
|
||||
>
|
||||
<IconDeviceImac size={20} />
|
||||
<Text ml={5}>Detail</Text>
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={3}>
|
||||
<Center py={20}>
|
||||
<Text color="dimmed">Tidak ada data lembaga yang cocok</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10, search);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,14 +2,23 @@
|
||||
'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 {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
|
||||
interface FormPengajar {
|
||||
nama: string;
|
||||
lembagaId: string;
|
||||
@@ -55,6 +64,7 @@ function EditPengajar() {
|
||||
lembagaId: formData.lembagaId.trim(),
|
||||
}
|
||||
await pengajarState.edit.update()
|
||||
toast.success("Data pengajar berhasil diperbarui!")
|
||||
router.push("/admin/pendidikan/info-sekolah/pengajar");
|
||||
} catch (error) {
|
||||
console.error("Error updating pengajar:", error);
|
||||
@@ -63,34 +73,63 @@ function EditPengajar() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header Back + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Pengajar
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
|
||||
<Stack gap="xs">
|
||||
<Title order={3}>Edit Pengajar</Title>
|
||||
{/* Form Card */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Nama Pengajar"
|
||||
placeholder="Masukkan nama pengajar"
|
||||
value={formData.nama}
|
||||
label={<Text fz="sm" fw="bold">Nama Pengajar</Text>}
|
||||
placeholder="masukkan nama siswa"
|
||||
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Lembaga Pendidikan"
|
||||
placeholder="Pilih lembaga"
|
||||
data={infoSekolahPaud.lembagaPendidikan.findMany.data?.map(k => ({
|
||||
value: k.id,
|
||||
label: k.nama
|
||||
})) ?? []}
|
||||
value={formData.lembagaId}
|
||||
onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
|
||||
required
|
||||
/>
|
||||
<Button bg={colors['blue-button']} onClick={handleSubmit} >
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
@@ -1,104 +1,121 @@
|
||||
'use client'
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
|
||||
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
|
||||
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
|
||||
import colors from '@/con/colors';
|
||||
|
||||
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()
|
||||
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)
|
||||
}, [])
|
||||
|
||||
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/pengajar")
|
||||
}
|
||||
detailState.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
router.push("/admin/pendidikan/info-sekolah/pengajar");
|
||||
}
|
||||
};
|
||||
|
||||
if (!detailState.findUnique.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={40} />
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = detailState.findUnique.data;
|
||||
|
||||
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}>
|
||||
<Box py={10}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (detailState.findUnique.data) {
|
||||
setSelectedId(detailState.findUnique.data.id);
|
||||
setModalHapus(true);
|
||||
}
|
||||
}}
|
||||
disabled={detailState.delete.loading || !detailState.findUnique.data}
|
||||
color={"red"}
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
|
||||
mb={15}
|
||||
>
|
||||
<IconX size={20} />
|
||||
Kembali
|
||||
</Button>
|
||||
|
||||
<Paper
|
||||
withBorder
|
||||
w={{ base: "100%", md: "60%" }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
|
||||
Detail Pengajar
|
||||
</Text>
|
||||
|
||||
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
|
||||
<Stack gap="sm">
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Nama</Text>
|
||||
<Text fz="md" c="dimmed">{data.nama || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Lembaga</Text>
|
||||
<Text fz="md" c="dimmed">{data.lembaga?.nama || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Group gap="sm" mt="sm">
|
||||
<Tooltip label="Hapus Pengajar" withArrow position="top">
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
if (detailState.findUnique.data) {
|
||||
router.push(`/admin/pendidikan/info-sekolah/pengajar/${detailState.findUnique.data.id}/edit`);
|
||||
}
|
||||
setSelectedId(data.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
disabled={!detailState.findUnique.data}
|
||||
color={"green"}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="Edit Pengajar" withArrow position="top">
|
||||
<Button
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/pendidikan/info-sekolah/pengajar/${data.id}/edit`)
|
||||
}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : null}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text='Apakah anda yakin ingin menghapus pengajar ini?'
|
||||
text="Apakah Anda yakin ingin menghapus pengajar ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,17 +1,28 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
'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 {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
function CreatePengajar() {
|
||||
const router = useRouter();
|
||||
const stateCreate = useProxy(infoSekolahPaud.pengajar)
|
||||
const stateCreate = useProxy(infoSekolahPaud.pengajar);
|
||||
|
||||
useEffect(() => {
|
||||
stateCreate.findMany.load();
|
||||
@@ -20,51 +31,81 @@ function CreatePengajar() {
|
||||
|
||||
const resetForm = () => {
|
||||
stateCreate.create.form = {
|
||||
nama: "",
|
||||
lembagaId: "",
|
||||
nama: '',
|
||||
lembagaId: '',
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
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")
|
||||
}
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
router.push('/admin/pendidikan/info-sekolah/pengajar');
|
||||
};
|
||||
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Create Pengajar</Title>
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header Back + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Pengajar
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Card Form */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={<Text fw="bold" fz="sm">Nama</Text>}
|
||||
placeholder="Masukkan nama pengajar"
|
||||
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'
|
||||
onChange={(e) => (stateCreate.create.form.nama = e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={stateCreate.create.form.lembagaId}
|
||||
onChange={(val) => {
|
||||
stateCreate.create.form.lembagaId = val ?? "";
|
||||
}}
|
||||
label={<Text fw={"bold"} fz={"sm"}>Lembaga</Text>}
|
||||
label={<Text fw="bold" fz="sm">Lembaga</Text>}
|
||||
placeholder="Pilih lembaga"
|
||||
value={stateCreate.create.form.lembagaId}
|
||||
onChange={(val) => (stateCreate.create.form.lembagaId = val ?? '')}
|
||||
data={
|
||||
infoSekolahPaud.lembagaPendidikan.findMany.data?.map((v) => ({
|
||||
value: v.id,
|
||||
label: v.nama,
|
||||
})) || []
|
||||
}
|
||||
required
|
||||
/>
|
||||
<Group>
|
||||
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
/* 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 {
|
||||
Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack,
|
||||
Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconDeviceImacCog, IconPlus, 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() {
|
||||
@@ -16,7 +18,7 @@ function Pengajar() {
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Pengajar'
|
||||
placeholder='pencarian'
|
||||
placeholder='Cari nama pengajar atau lembaga...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -29,60 +31,105 @@ function Pengajar() {
|
||||
function ListPengajar({ search }: { search: string }) {
|
||||
const listState = useProxy(infoSekolahPaud.pengajar)
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load
|
||||
} = listState.findMany;
|
||||
|
||||
useEffect(() => {
|
||||
listState.findMany.load()
|
||||
}, [])
|
||||
load(page, 10, search)
|
||||
}, [page, search])
|
||||
|
||||
const filteredData = (listState.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.nama.toLowerCase().includes(keyword) ||
|
||||
item.lembaga.nama.toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
const filteredData = data || []
|
||||
|
||||
if (!listState.findMany.data) {
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton h={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Stack>
|
||||
<JudulList
|
||||
title='List Pengajar'
|
||||
href='/admin/pendidikan/info-sekolah/pengajar/create'
|
||||
/>
|
||||
<Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Pengajar</Title>
|
||||
<Tooltip label="Tambah Pengajar" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/pendidikan/info-sekolah/pengajar/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
|
||||
<Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Nama Pengajar</TableTh>
|
||||
<TableTh>Lembaga</TableTh>
|
||||
<TableTh>Detail</TableTh>
|
||||
<TableTh style={{ width: '35%' }}>Nama Pengajar</TableTh>
|
||||
<TableTh style={{ width: '35%' }}>Lembaga</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.map((item) => (
|
||||
{filteredData.length > 0 ? (
|
||||
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/pengajar/${item.id}`)}>
|
||||
<IconDeviceImacCog size={25} />
|
||||
<Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text truncate="end" fz="sm" c="dimmed">{item.lembaga.nama}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="blue"
|
||||
onClick={() => router.push(`/admin/pendidikan/info-sekolah/pengajar/${item.id}`)}
|
||||
>
|
||||
<IconDeviceImacCog size={20} />
|
||||
<Text ml={5}>Detail</Text>
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={3}>
|
||||
<Center py={20}>
|
||||
<Text c="dimmed">Tidak ada data pengajar yang cocok</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10, search)
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,28 +2,38 @@
|
||||
'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 {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
|
||||
interface FormSiswa {
|
||||
nama: string;
|
||||
lembagaId: string;
|
||||
}
|
||||
|
||||
function EditSiswa() {
|
||||
const siswaState = useProxy(infoSekolahPaud.siswa)
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const siswaState = useProxy(infoSekolahPaud.siswa);
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
|
||||
const [formData, setFormData] = useState<FormSiswa>({
|
||||
nama: '',
|
||||
lembagaId: ''
|
||||
})
|
||||
lembagaId: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const loadSiswa = async () => {
|
||||
@@ -39,11 +49,11 @@ function EditSiswa() {
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading siswa:", error);
|
||||
toast.error("Gagal memuat data siswa");
|
||||
console.error('Error loading siswa:', error);
|
||||
toast.error('Gagal memuat data siswa');
|
||||
}
|
||||
}
|
||||
infoSekolahPaud.lembagaPendidikan.findMany.load()
|
||||
};
|
||||
infoSekolahPaud.lembagaPendidikan.findMany.load();
|
||||
loadSiswa();
|
||||
}, [params?.id]);
|
||||
|
||||
@@ -53,44 +63,76 @@ function EditSiswa() {
|
||||
...siswaState.edit.form,
|
||||
nama: formData.nama.trim(),
|
||||
lembagaId: formData.lembagaId.trim(),
|
||||
}
|
||||
await siswaState.edit.update()
|
||||
router.push("/admin/pendidikan/info-sekolah/siswa");
|
||||
};
|
||||
await siswaState.edit.update();
|
||||
toast.success('Data siswa berhasil diperbarui!');
|
||||
router.push('/admin/pendidikan/info-sekolah/siswa');
|
||||
} catch (error) {
|
||||
console.error("Error updating siswa:", error);
|
||||
toast.error("Terjadi kesalahan saat memperbarui siswa");
|
||||
}
|
||||
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} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header dengan tombol kembali */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Siswa
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
|
||||
<Stack gap="xs">
|
||||
<Title order={3}>Edit Siswa</Title>
|
||||
{/* Card Form */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
value={formData.nama}
|
||||
label={<Text fz="sm" fw="bold">Nama Siswa</Text>}
|
||||
placeholder="masukkan nama siswa"
|
||||
placeholder="Masukkan nama siswa"
|
||||
value={formData.nama}
|
||||
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Lembaga Pendidikan"
|
||||
data={infoSekolahPaud.lembagaPendidikan.findMany.data?.map(k => ({
|
||||
label={<Text fz="sm" fw="bold">Lembaga Pendidikan</Text>}
|
||||
placeholder="Pilih lembaga pendidikan"
|
||||
data={
|
||||
infoSekolahPaud.lembagaPendidikan.findMany.data?.map((k) => ({
|
||||
value: k.id,
|
||||
label: k.nama
|
||||
})) ?? []}
|
||||
label: k.nama,
|
||||
})) ?? []
|
||||
}
|
||||
value={formData.lembagaId}
|
||||
onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
|
||||
required
|
||||
/>
|
||||
<Button bg={colors['blue-button']} onClick={handleSubmit} >
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
'use client'
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core'
|
||||
import { useShallowEffect } from '@mantine/hooks'
|
||||
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { useState } from 'react'
|
||||
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';
|
||||
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus'
|
||||
import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud'
|
||||
import colors from '@/con/colors'
|
||||
|
||||
function DetailSiswa() {
|
||||
const detailState = useProxy(infoSekolahPaud.siswa)
|
||||
@@ -23,7 +21,6 @@ function DetailSiswa() {
|
||||
detailState.findUnique.load(params?.id as string)
|
||||
}, [])
|
||||
|
||||
|
||||
const handleHapus = () => {
|
||||
if (selectedId) {
|
||||
detailState.delete.byId(selectedId)
|
||||
@@ -36,60 +33,83 @@ function DetailSiswa() {
|
||||
if (!detailState.findUnique.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={40} />
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
const data = detailState.findUnique.data
|
||||
|
||||
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}>
|
||||
<Box py={10}>
|
||||
{/* Tombol Kembali */}
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (detailState.findUnique.data) {
|
||||
setSelectedId(detailState.findUnique.data.id);
|
||||
setModalHapus(true);
|
||||
}
|
||||
}}
|
||||
disabled={detailState.delete.loading || !detailState.findUnique.data}
|
||||
color={"red"}
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
|
||||
mb={15}
|
||||
>
|
||||
<IconX size={20} />
|
||||
Kembali
|
||||
</Button>
|
||||
|
||||
{/* Card Utama */}
|
||||
<Paper
|
||||
withBorder
|
||||
w={{ base: "100%", md: "60%" }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
|
||||
Detail Siswa
|
||||
</Text>
|
||||
|
||||
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
|
||||
<Stack gap="sm">
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Nama</Text>
|
||||
<Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Lembaga</Text>
|
||||
<Text fz="md" c="dimmed">{data?.lembaga?.nama || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Group gap="sm">
|
||||
<Tooltip label="Hapus Siswa" withArrow position="top">
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
if (detailState.findUnique.data) {
|
||||
router.push(`/admin/pendidikan/info-sekolah/siswa/${detailState.findUnique.data.id}/edit`);
|
||||
}
|
||||
setSelectedId(data.id)
|
||||
setModalHapus(true)
|
||||
}}
|
||||
disabled={!detailState.findUnique.data}
|
||||
color={"green"}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="Edit Siswa" withArrow position="top">
|
||||
<Button
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/pendidikan/info-sekolah/siswa/${data.id}/edit`)
|
||||
}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : null}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
@@ -98,10 +118,10 @@ function DetailSiswa() {
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text='Apakah anda yakin ingin menghapus siswa ini?'
|
||||
text="Apakah Anda yakin ingin menghapus siswa ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default DetailSiswa;
|
||||
export default DetailSiswa
|
||||
|
||||
@@ -2,16 +2,26 @@
|
||||
'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 {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} 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)
|
||||
const stateCreate = useProxy(infoSekolahPaud.siswa);
|
||||
|
||||
useEffect(() => {
|
||||
stateCreate.findMany.load();
|
||||
@@ -20,41 +30,58 @@ function CreateSiswa() {
|
||||
|
||||
const resetForm = () => {
|
||||
stateCreate.create.form = {
|
||||
nama: "",
|
||||
lembagaId: "",
|
||||
nama: '',
|
||||
lembagaId: '',
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await stateCreate.create.create();
|
||||
|
||||
resetForm();
|
||||
router.push("/admin/pendidikan/info-sekolah/siswa")
|
||||
}
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
router.push('/admin/pendidikan/info-sekolah/siswa');
|
||||
};
|
||||
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Create Siswa</Title>
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header + Back Button */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Siswa
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Card */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
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'
|
||||
label={<Text fw="bold" fz="sm">Nama</Text>}
|
||||
placeholder="Masukkan nama siswa"
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={stateCreate.create.form.lembagaId}
|
||||
onChange={(val) => {
|
||||
stateCreate.create.form.lembagaId = val ?? "";
|
||||
stateCreate.create.form.lembagaId = val ?? '';
|
||||
}}
|
||||
label={<Text fw={"bold"} fz={"sm"}>Lembaga</Text>}
|
||||
label={<Text fw="bold" fz="sm">Lembaga</Text>}
|
||||
placeholder="Pilih lembaga"
|
||||
data={
|
||||
infoSekolahPaud.lembagaPendidikan.findMany.data?.map((v) => ({
|
||||
@@ -62,9 +89,22 @@ function CreateSiswa() {
|
||||
label: v.nama,
|
||||
})) || []
|
||||
}
|
||||
required
|
||||
/>
|
||||
<Group>
|
||||
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
@@ -1,13 +1,30 @@
|
||||
/* 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 {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Pagination,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Table,
|
||||
TableTbody,
|
||||
TableTd,
|
||||
TableTh,
|
||||
TableThead,
|
||||
TableTr,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconDeviceImacCog, IconPlus, 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() {
|
||||
@@ -16,7 +33,7 @@ function Siswa() {
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Siswa'
|
||||
placeholder='pencarian'
|
||||
placeholder='Cari nama siswa atau lembaga...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -27,62 +44,101 @@ function Siswa() {
|
||||
}
|
||||
|
||||
function ListSiswa({ search }: { search: string }) {
|
||||
const listState = useProxy(infoSekolahPaud.siswa)
|
||||
const stateSiswa = useProxy(infoSekolahPaud.siswa)
|
||||
const router = useRouter();
|
||||
|
||||
const { data, page, totalPages, loading, load } = stateSiswa.findMany;
|
||||
|
||||
useEffect(() => {
|
||||
listState.findMany.load()
|
||||
}, [])
|
||||
load(page, 10, search)
|
||||
}, [page, search])
|
||||
|
||||
const filteredData = (listState.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.nama.toLowerCase().includes(keyword) ||
|
||||
item.lembaga.nama.toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
const filteredData = data || []
|
||||
|
||||
if (!listState.findMany.data) {
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Stack>
|
||||
<JudulList
|
||||
title='List Siswa'
|
||||
href='/admin/pendidikan/info-sekolah/siswa/create'
|
||||
/>
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
|
||||
<Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Siswa</Title>
|
||||
<Tooltip label="Tambah Siswa" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/pendidikan/info-sekolah/siswa/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
|
||||
<Box style={{ overflowX: "auto" }}>
|
||||
<Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Nama Siswa</TableTh>
|
||||
<TableTh>Lembaga</TableTh>
|
||||
<TableTh>Detail</TableTh>
|
||||
<TableTh style={{ width: '35%' }}>Nama Siswa</TableTh>
|
||||
<TableTh style={{ width: '35%' }}>Lembaga</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.map((item) => (
|
||||
{filteredData.length > 0 ? (
|
||||
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/siswa/${item.id}`)}>
|
||||
<IconDeviceImacCog size={25} />
|
||||
<Text fw={500} truncate="end">{item.nama}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text truncate="end" c="dimmed">{item.lembaga.nama}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="blue"
|
||||
onClick={() => router.push(`/admin/pendidikan/info-sekolah/siswa/${item.id}`)}
|
||||
>
|
||||
<IconDeviceImacCog size={20} />
|
||||
<Text ml={5}>Detail</Text>
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={3}>
|
||||
<Center py={20}>
|
||||
<Text color="dimmed">Tidak ada data siswa yang cocok</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,66 +1,117 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { IconSchool, IconMapPin, IconBook2 } from '@tabler/icons-react';
|
||||
|
||||
function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
label: "Tujuan Program",
|
||||
value: "tujuan-program",
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/tujuan-program"
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/tujuan-program",
|
||||
icon: <IconSchool size={18} stroke={1.8} />,
|
||||
tooltip: "Atur tujuan program pendidikan non formal",
|
||||
},
|
||||
{
|
||||
label: "Tempat Kegiatan",
|
||||
value: "tempat-kegiatan",
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan"
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan",
|
||||
icon: <IconMapPin size={18} stroke={1.8} />,
|
||||
tooltip: "Kelola daftar tempat kegiatan",
|
||||
},
|
||||
{
|
||||
label: "Jenis Program yang Diselenggarakan",
|
||||
value: "jenis-program-yang-diselenggarakan",
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan"
|
||||
href: "/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan",
|
||||
icon: <IconBook2 size={18} stroke={1.8} />,
|
||||
tooltip: "Lihat & atur jenis program yang tersedia",
|
||||
},
|
||||
|
||||
];
|
||||
const curentTab = tabs.find(tab => tab.href === pathname)
|
||||
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
|
||||
|
||||
const currentTab = tabs.find(tab => tab.href === pathname);
|
||||
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
|
||||
|
||||
const handleTabChange = (value: string | null) => {
|
||||
const tab = tabs.find(t => t.value === value)
|
||||
const tab = tabs.find(t => t.value === value);
|
||||
if (tab) {
|
||||
router.push(tab.href)
|
||||
}
|
||||
setActiveTab(value)
|
||||
router.push(tab.href);
|
||||
}
|
||||
setActiveTab(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const match = tabs.find(tab => tab.href === pathname)
|
||||
const match = tabs.find(tab => tab.href === pathname);
|
||||
if (match) {
|
||||
setActiveTab(match.value)
|
||||
setActiveTab(match.value);
|
||||
}
|
||||
}, [pathname])
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={3}>Pendidikan Non Formal</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>
|
||||
<Stack gap="lg">
|
||||
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
|
||||
Pendidikan Non Formal
|
||||
</Title>
|
||||
|
||||
<Tabs
|
||||
color={colors['blue-button']}
|
||||
variant="pills"
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
radius="lg"
|
||||
keepMounted={false}
|
||||
>
|
||||
<TabsList
|
||||
p="sm"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab, i) => (
|
||||
<Tooltip
|
||||
key={i}
|
||||
label={tab.tooltip}
|
||||
position="bottom"
|
||||
withArrow
|
||||
transitionProps={{ transition: 'pop', duration: 200 }}
|
||||
>
|
||||
<TabsTab
|
||||
value={tab.value}
|
||||
leftSection={tab.icon}
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.9rem",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
</TabsTab>
|
||||
</Tooltip>
|
||||
))}
|
||||
</TabsList>
|
||||
{tabs.map((e, i) => (
|
||||
<TabsPanel key={i} value={e.value}>
|
||||
{/* Konten dummy, bisa diganti tergantung routing */}
|
||||
<></>
|
||||
|
||||
{tabs.map((tab, i) => (
|
||||
<TabsPanel
|
||||
key={i}
|
||||
value={tab.value}
|
||||
style={{
|
||||
padding: "1.5rem",
|
||||
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TabsPanel>
|
||||
))}
|
||||
</Tabs>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,83 +1,156 @@
|
||||
'use client'
|
||||
import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const JenisProgramYangDiselenggarakanTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
const JenisProgramYangDiselenggarakanTextEditor = dynamic(
|
||||
() =>
|
||||
import('../../_lib/pendidikanNonFormalTextEditor').then(
|
||||
(mod) => mod.PendidikanNonFormalTextEditor
|
||||
),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
function EditJenisProgramYangDiselenggarakan() {
|
||||
const router = useRouter()
|
||||
const editState = useProxy(pendidikanNonFormalState.stateJenisProgram)
|
||||
const router = useRouter();
|
||||
const editState = useProxy(pendidikanNonFormalState.stateJenisProgram);
|
||||
|
||||
const [judul, setJudul] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Load data pertama kali
|
||||
useShallowEffect(() => {
|
||||
if (!editState.findById.data) {
|
||||
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
editState.findById.initialize();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Sync state dengan data hasil fetch
|
||||
useEffect(() => {
|
||||
if (editState.findById.data) {
|
||||
setJudul(editState.findById.data.judul ?? '')
|
||||
setContent(editState.findById.data.deskripsi ?? '')
|
||||
setJudul(editState.findById.data.judul ?? '');
|
||||
setContent(editState.findById.data.deskripsi ?? '');
|
||||
}
|
||||
}, [editState.findById.data])
|
||||
}, [editState.findById.data]);
|
||||
|
||||
const submit = () => {
|
||||
const handleSubmit = async () => {
|
||||
if (!judul.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (editState.findById.data) {
|
||||
editState.findById.data.judul = judul;
|
||||
editState.findById.data.deskripsi = content;
|
||||
editState.update.save(editState.findById.data)
|
||||
await editState.update.save(editState.findById.data);
|
||||
|
||||
toast.success('Berhasil menyimpan perubahan');
|
||||
router.push(
|
||||
'/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan'
|
||||
);
|
||||
}
|
||||
router.push('/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan')
|
||||
} catch (err) {
|
||||
console.error('Error saving:', err);
|
||||
toast.error('Gagal menyimpan data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => router.back();
|
||||
|
||||
if (editState.findById.loading) {
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={'xs'}>
|
||||
<Box>
|
||||
<Button
|
||||
variant={'subtle'}
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={20} />
|
||||
</Button>
|
||||
<Center h={400}>
|
||||
<Text>Memuat data jenis program...</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
|
||||
<Stack gap={'xs'}>
|
||||
<Title order={3}>Edit Jenis Program Yang Diselenggarakan</Title>
|
||||
<Stack gap="xs">
|
||||
{/* Back Button + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={22} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Jenis Program Yang Diselenggarakan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<TextInput
|
||||
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
||||
label={<Text fz="sm" fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul program"
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.target.value)}
|
||||
onChange={(e) => setJudul(e.currentTarget.value)}
|
||||
error={!judul && 'Judul wajib diisi'}
|
||||
/>
|
||||
<Text fw={"bold"}>Deskripsi</Text>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
|
||||
<JenisProgramYangDiselenggarakanTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={editState.update.loading}
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting || editState.update.loading}
|
||||
disabled={!judul}
|
||||
>
|
||||
Submit
|
||||
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBack}
|
||||
disabled={isSubmitting || editState.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -8,47 +20,86 @@ import { useProxy } from 'valtio/utils';
|
||||
import pendidikanNonFormalState from '../../../_state/pendidikan/pendidikan-non-formal';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const listPreview = useProxy(pendidikanNonFormalState.stateJenisProgram)
|
||||
const router = useRouter();
|
||||
const listPreview = useProxy(pendidikanNonFormalState.stateJenisProgram);
|
||||
|
||||
useShallowEffect(() => {
|
||||
listPreview.findById.load('edit')
|
||||
}, [])
|
||||
listPreview.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!listPreview.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={400} w="90%" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = listPreview.findById.data;
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
|
||||
<Stack gap="md">
|
||||
{/* Header */}
|
||||
<Grid align="center">
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Jenis Program Yang Diselenggarakan</Title>
|
||||
<Title order={3} c={colors['blue-button']}>
|
||||
Preview Jenis Program Yang Diselenggarakan
|
||||
</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit')}>
|
||||
<IconEdit size={16} />
|
||||
<Tooltip label="Edit Jenis Program" withArrow>
|
||||
<Button
|
||||
c="green"
|
||||
variant="light"
|
||||
leftSection={<IconEdit size={18} stroke={2} />}
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit'
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
|
||||
</Box>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
|
||||
|
||||
{/* Konten Preview */}
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-1']}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="xs"
|
||||
>
|
||||
<Box px={{ base: 'sm', md: 50 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Judul */}
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '1.3rem', md: '1.8rem' }}
|
||||
fw="bold"
|
||||
c={colors['blue-button']}
|
||||
dangerouslySetInnerHTML={{ __html: data.judul }}
|
||||
/>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Text
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -1,83 +1,158 @@
|
||||
'use client'
|
||||
import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const TempatKegiatanTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
const TempatKegiatanTextEditor = dynamic(
|
||||
() =>
|
||||
import('../../_lib/pendidikanNonFormalTextEditor').then(
|
||||
(mod) => mod.PendidikanNonFormalTextEditor
|
||||
),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
function EditTempatKegiatan() {
|
||||
const router = useRouter()
|
||||
const editState = useProxy(pendidikanNonFormalState.stateTempatKegiatan)
|
||||
const router = useRouter();
|
||||
const editState = useProxy(pendidikanNonFormalState.stateTempatKegiatan);
|
||||
|
||||
const [judul, setJudul] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// load data pertama kali
|
||||
useShallowEffect(() => {
|
||||
if (!editState.findById.data) {
|
||||
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
editState.findById.initialize();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// sync state dengan data hasil fetch
|
||||
useEffect(() => {
|
||||
if (editState.findById.data) {
|
||||
setJudul(editState.findById.data.judul ?? '')
|
||||
setContent(editState.findById.data.deskripsi ?? '')
|
||||
setJudul(editState.findById.data.judul ?? '');
|
||||
setContent(editState.findById.data.deskripsi ?? '');
|
||||
}
|
||||
}, [editState.findById.data])
|
||||
}, [editState.findById.data]);
|
||||
|
||||
const submit = () => {
|
||||
const handleSubmit = async () => {
|
||||
if (!judul.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (editState.findById.data) {
|
||||
editState.findById.data.judul = judul;
|
||||
editState.findById.data.deskripsi = content;
|
||||
editState.update.save(editState.findById.data)
|
||||
await editState.update.save(editState.findById.data);
|
||||
|
||||
toast.success('Berhasil menyimpan perubahan');
|
||||
router.push(
|
||||
'/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan'
|
||||
);
|
||||
}
|
||||
router.push('/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan')
|
||||
} catch (err) {
|
||||
console.error('Error saving:', err);
|
||||
toast.error('Gagal menyimpan data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => router.back();
|
||||
|
||||
if (editState.findById.loading) {
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={'xs'}>
|
||||
<Box>
|
||||
<Button
|
||||
variant={'subtle'}
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={20} />
|
||||
</Button>
|
||||
<Center h={400}>
|
||||
<Text>Memuat data tempat kegiatan...</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
|
||||
<Stack gap={'xs'}>
|
||||
<Title order={3}>Edit Tempat Kegiatan</Title>
|
||||
<Stack gap="xs">
|
||||
{/* Back Button + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={22} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Tempat Kegiatan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<TextInput
|
||||
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
||||
label={<Text fz="sm" fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul tempat kegiatan"
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.target.value)}
|
||||
onChange={(e) => setJudul(e.currentTarget.value)}
|
||||
error={!judul && 'Judul wajib diisi'}
|
||||
/>
|
||||
<Text fw={"bold"}>Deskripsi</Text>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb="xs">
|
||||
Deskripsi
|
||||
</Text>
|
||||
<TempatKegiatanTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={editState.update.loading}
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting || editState.update.loading}
|
||||
disabled={!judul}
|
||||
>
|
||||
Submit
|
||||
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBack}
|
||||
disabled={isSubmitting || editState.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
|
||||
import statePendidikanNonFormal from '../../../_state/pendidikan/pendidikan-non-formal';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const listPreview = useProxy(statePendidikanNonFormal.stateTempatKegiatan)
|
||||
const router = useRouter();
|
||||
const listPreview = useProxy(statePendidikanNonFormal.stateTempatKegiatan);
|
||||
|
||||
useShallowEffect(() => {
|
||||
listPreview.findById.load('edit')
|
||||
}, [])
|
||||
listPreview.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!listPreview.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={400} w="90%" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = listPreview.findById.data;
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
|
||||
<Stack gap="md">
|
||||
{/* Header */}
|
||||
<Grid align="center">
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Tempat Kegiatan</Title>
|
||||
<Title order={3} c={colors['blue-button']}>
|
||||
Preview Tempat Kegiatan
|
||||
</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit')}>
|
||||
<IconEdit size={16} />
|
||||
<Tooltip label="Edit Tempat Kegiatan" withArrow>
|
||||
<Button
|
||||
c="green"
|
||||
variant="light"
|
||||
leftSection={<IconEdit size={18} stroke={2} />}
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit'
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
|
||||
</Box>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
|
||||
|
||||
{/* Konten Preview */}
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-1']}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="xs"
|
||||
>
|
||||
<Box px={{ base: 'sm', md: 50 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Judul */}
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '1.3rem', md: '1.8rem' }}
|
||||
fw="bold"
|
||||
c={colors['blue-button']}
|
||||
dangerouslySetInnerHTML={{ __html: data.judul }}
|
||||
/>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Text
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -1,83 +1,151 @@
|
||||
'use client'
|
||||
import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const PendidikanNonFormalTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
const PendidikanNonFormalTextEditor = dynamic(
|
||||
() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
function EditTujuanProgram() {
|
||||
const router = useRouter()
|
||||
const editState = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal)
|
||||
const router = useRouter();
|
||||
const editState = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal);
|
||||
|
||||
const [judul, setJudul] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// load data pertama kali
|
||||
useShallowEffect(() => {
|
||||
if (!editState.findById.data) {
|
||||
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
editState.findById.initialize();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// sync data hasil fetch ke local state
|
||||
useEffect(() => {
|
||||
if (editState.findById.data) {
|
||||
setJudul(editState.findById.data.judul ?? '')
|
||||
setContent(editState.findById.data.deskripsi ?? '')
|
||||
setJudul(editState.findById.data.judul ?? '');
|
||||
setContent(editState.findById.data.deskripsi ?? '');
|
||||
}
|
||||
}, [editState.findById.data])
|
||||
}, [editState.findById.data]);
|
||||
|
||||
const submit = () => {
|
||||
const handleSubmit = async () => {
|
||||
if (!judul.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (editState.findById.data) {
|
||||
editState.findById.data.judul = judul;
|
||||
editState.findById.data.deskripsi = content;
|
||||
editState.update.save(editState.findById.data)
|
||||
await editState.update.save(editState.findById.data);
|
||||
|
||||
toast.success('Berhasil menyimpan perubahan');
|
||||
router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program');
|
||||
}
|
||||
router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program')
|
||||
} catch (err) {
|
||||
console.error('Error saving:', err);
|
||||
toast.error('Gagal menyimpan data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => router.back();
|
||||
|
||||
if (editState.findById.loading) {
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={'xs'}>
|
||||
<Box>
|
||||
<Button
|
||||
variant={'subtle'}
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={20} />
|
||||
</Button>
|
||||
<Center h={400}>
|
||||
<Text>Memuat data tujuan program...</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
|
||||
<Stack gap={'xs'}>
|
||||
<Title order={3}>Edit Tujuan Program</Title>
|
||||
<Stack gap="xs">
|
||||
{/* Back Button + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={22} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Tujuan Program
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<TextInput
|
||||
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
||||
label={<Text fz="sm" fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul program"
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.target.value)}
|
||||
onChange={(e) => setJudul(e.currentTarget.value)}
|
||||
error={!judul && 'Judul wajib diisi'}
|
||||
/>
|
||||
<Text fw={"bold"}>Deskripsi</Text>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
|
||||
<PendidikanNonFormalTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={editState.update.loading}
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting || editState.update.loading}
|
||||
disabled={!judul}
|
||||
>
|
||||
Submit
|
||||
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBack}
|
||||
disabled={isSubmitting || editState.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,18 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -8,47 +20,88 @@ import { useProxy } from 'valtio/utils';
|
||||
import statePendidikanNonFormal from '../../../_state/pendidikan/pendidikan-non-formal';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const listPreview = useProxy(statePendidikanNonFormal.stateTujuanPendidikanNonFormal)
|
||||
const router = useRouter();
|
||||
const listPreview = useProxy(
|
||||
statePendidikanNonFormal.stateTujuanPendidikanNonFormal
|
||||
);
|
||||
|
||||
useShallowEffect(() => {
|
||||
listPreview.findById.load('edit')
|
||||
}, [])
|
||||
listPreview.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!listPreview.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={400} w="90%" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = listPreview.findById.data;
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
|
||||
<Stack gap="md">
|
||||
{/* Header */}
|
||||
<Grid align="center">
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Pendidikan Non Formal</Title>
|
||||
<Title order={3} c={colors['blue-button']}>
|
||||
Pratinjau Pendidikan Non Formal
|
||||
</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program/edit')}>
|
||||
<IconEdit size={16} />
|
||||
<Tooltip label="Edit Tujuan Pendidikan Non Formal" withArrow>
|
||||
<Button
|
||||
c="green"
|
||||
variant="light"
|
||||
leftSection={<IconEdit size={18} stroke={2} />}
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/pendidikan-non-formal/tujuan-program/edit'
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
|
||||
</Box>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
|
||||
|
||||
{/* Konten Preview */}
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-1']}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="xs"
|
||||
>
|
||||
<Box px={{ base: 'sm', md: 50 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Judul */}
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '1.3rem', md: '1.8rem' }}
|
||||
fw="bold"
|
||||
c={colors['blue-button']}
|
||||
dangerouslySetInnerHTML={{ __html: data.judul }}
|
||||
/>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Text
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -1,61 +1,109 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { IconBook2, IconCategory } from '@tabler/icons-react';
|
||||
|
||||
function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
label: "Data Perpustakaan",
|
||||
value: "data-perpustakaan",
|
||||
href: "/admin/pendidikan/perpustakaan-digital/data-perpustakaan"
|
||||
href: "/admin/pendidikan/perpustakaan-digital/data-perpustakaan",
|
||||
icon: <IconBook2 size={18} stroke={1.8} />,
|
||||
tooltip: "Kelola data koleksi perpustakaan digital",
|
||||
},
|
||||
{
|
||||
label: "Kategori Buku",
|
||||
value: "kategori-buku",
|
||||
href: "/admin/pendidikan/perpustakaan-digital/kategori-buku"
|
||||
href: "/admin/pendidikan/perpustakaan-digital/kategori-buku",
|
||||
icon: <IconCategory size={18} stroke={1.8} />,
|
||||
tooltip: "Atur kategori untuk buku digital",
|
||||
},
|
||||
|
||||
];
|
||||
const curentTab = tabs.find(tab => tab.href === pathname)
|
||||
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
|
||||
|
||||
const currentTab = tabs.find(tab => tab.href === pathname);
|
||||
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
|
||||
|
||||
const handleTabChange = (value: string | null) => {
|
||||
const tab = tabs.find(t => t.value === value)
|
||||
const tab = tabs.find(t => t.value === value);
|
||||
if (tab) {
|
||||
router.push(tab.href)
|
||||
}
|
||||
setActiveTab(value)
|
||||
router.push(tab.href);
|
||||
}
|
||||
setActiveTab(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const match = tabs.find(tab => tab.href === pathname)
|
||||
const match = tabs.find(tab => tab.href === pathname);
|
||||
if (match) {
|
||||
setActiveTab(match.value)
|
||||
setActiveTab(match.value);
|
||||
}
|
||||
}, [pathname])
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={3}>Perpustakaan Digital</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>
|
||||
<Stack gap="lg">
|
||||
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
|
||||
Perpustakaan Digital
|
||||
</Title>
|
||||
<Tabs
|
||||
color={colors['blue-button']}
|
||||
variant='pills'
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
radius="lg"
|
||||
keepMounted={false}
|
||||
>
|
||||
<TabsList
|
||||
p="sm"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab, i) => (
|
||||
<Tooltip
|
||||
key={i}
|
||||
label={tab.tooltip}
|
||||
position="bottom"
|
||||
withArrow
|
||||
transitionProps={{ transition: 'pop', duration: 200 }}
|
||||
>
|
||||
<TabsTab
|
||||
value={tab.value}
|
||||
leftSection={tab.icon}
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.9rem",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
</TabsTab>
|
||||
</Tooltip>
|
||||
))}
|
||||
</TabsList>
|
||||
{tabs.map((e, i) => (
|
||||
<TabsPanel key={i} value={e.value}>
|
||||
{/* Konten dummy, bisa diganti tergantung routing */}
|
||||
<></>
|
||||
|
||||
{tabs.map((tab, i) => (
|
||||
<TabsPanel
|
||||
key={i}
|
||||
value={tab.value}
|
||||
style={{
|
||||
padding: "1.5rem",
|
||||
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TabsPanel>
|
||||
))}
|
||||
</Tabs>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
|
||||
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 { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
|
||||
import { Dropzone } from '@mantine/dropzone';
|
||||
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
@@ -12,7 +12,7 @@ import { useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditPasarDesa() {
|
||||
function EditPerpustakaanDigital() {
|
||||
const editState = useProxy(perpustakaanDigitalState.dataPerpustakaan)
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
@@ -41,16 +41,11 @@ function EditPasarDesa() {
|
||||
imageId: data.imageId || "",
|
||||
kategoriId: data.kategoriId || "",
|
||||
});
|
||||
// Tampilkan preview gambar
|
||||
if (data.image?.link) {
|
||||
setPreviewImage(data.image.link);
|
||||
}
|
||||
if (data.image?.link) setPreviewImage(data.image.link);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading data perpustakaan:", error);
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : "Gagal mengambil data perpustakaan"
|
||||
);
|
||||
toast.error(error instanceof Error ? error.message : "Gagal mengambil data perpustakaan");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -59,22 +54,12 @@ function EditPasarDesa() {
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
editState.update.form = {
|
||||
...editState.update.form,
|
||||
judul: formData.judul,
|
||||
deskripsi: formData.deskripsi,
|
||||
kategoriId: formData.kategoriId,
|
||||
imageId: formData.imageId,
|
||||
}
|
||||
editState.update.form = { ...editState.update.form, ...formData }
|
||||
|
||||
if (file) {
|
||||
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");
|
||||
}
|
||||
|
||||
// Update imageId in global state
|
||||
if (!uploaded?.id) return toast.error("Gagal upload gambar");
|
||||
editState.update.form.imageId = uploaded.id;
|
||||
}
|
||||
|
||||
@@ -88,106 +73,110 @@ function EditPasarDesa() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Data Perpustakaan Digital
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Edit Data Perpustakaan</Title>
|
||||
<Box>
|
||||
<Text fz={"md"} fw={"bold"}>Gambar</Text>
|
||||
{/* Form Paper */}
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p="lg" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
|
||||
<Stack gap="md">
|
||||
{/* Dropzone Image */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>Gambar</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
const selectedFile = files[0]; // Ambil file pertama
|
||||
const selectedFile = files[0];
|
||||
if (selectedFile) {
|
||||
setFile(selectedFile);
|
||||
setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
|
||||
setPreviewImage(URL.createObjectURL(selectedFile));
|
||||
}
|
||||
}}
|
||||
onReject={() => toast.error('File tidak valid.')}
|
||||
maxSize={5 * 1024 ** 2} // Maks 5MB
|
||||
maxSize={5 * 1024 ** 2}
|
||||
accept={{ 'image/*': [] }}
|
||||
radius="md"
|
||||
p="xl"
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
<IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
|
||||
<IconX size={48} color="red" stroke={1.5} />
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
|
||||
<IconPhoto size={48} color="#868e96" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
|
||||
<div>
|
||||
<Text size="xl" inline>
|
||||
Drag gambar ke sini atau klik untuk pilih file
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" inline mt={7}>
|
||||
Maksimal 5MB dan harus format gambar
|
||||
</Text>
|
||||
</div>
|
||||
<Stack gap="xs" align="center">
|
||||
<Text size="md" fw={500}>Seret gambar atau klik untuk memilih file</Text>
|
||||
<Text size="sm" c="dimmed">Maksimal 5MB, format gambar wajib</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Dropzone>
|
||||
|
||||
{/* Tampilkan preview kalau ada */}
|
||||
{previewImage && (
|
||||
<Box mt="sm">
|
||||
<Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Image
|
||||
src={previewImage}
|
||||
alt="Preview"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '200px',
|
||||
objectFit: 'contain',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
radius="md"
|
||||
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
{/* Judul */}
|
||||
<TextInput
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul"
|
||||
value={formData.judul}
|
||||
onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
|
||||
label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
|
||||
placeholder='Masukkan judul'
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(val) => {
|
||||
setFormData({ ...formData, deskripsi: val });
|
||||
}}
|
||||
/>
|
||||
<Text fw="bold" fz="sm" mb={6}>Deskripsi</Text>
|
||||
<EditEditor value={formData.deskripsi} onChange={(val) => setFormData({ ...formData, deskripsi: val })} />
|
||||
</Box>
|
||||
|
||||
{/* Kategori */}
|
||||
<Select
|
||||
value={formData.kategoriId}
|
||||
onChange={(val) => setFormData({ ...formData, kategoriId: val || "" })}
|
||||
label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
|
||||
label="Kategori"
|
||||
placeholder='Pilih kategori'
|
||||
data={
|
||||
perpustakaanDigitalState.kategoriBuku.findMany.data?.map((v) => ({
|
||||
value: v.id,
|
||||
label: v.name
|
||||
})) || []
|
||||
}
|
||||
data={perpustakaanDigitalState.kategoriBuku.findMany.data?.map(v => ({ value: v.id, label: v.name })) || []}
|
||||
clearable
|
||||
searchable
|
||||
required
|
||||
error={!formData.kategoriId ? "Pilih kategori" : undefined}
|
||||
/>
|
||||
|
||||
<Group>
|
||||
<Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
|
||||
{/* Submit Button */}
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
@@ -195,4 +184,4 @@ function EditPasarDesa() {
|
||||
);
|
||||
}
|
||||
|
||||
export default EditPasarDesa;
|
||||
export default EditPerpustakaanDigital;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
|
||||
import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
@@ -10,97 +10,130 @@ import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function DetailDataPerpustakaan() {
|
||||
const stateDetail = useProxy(perpustakaanDigitalState.dataPerpustakaan)
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const params = useParams()
|
||||
const stateDetail = useProxy(perpustakaanDigitalState.dataPerpustakaan);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
|
||||
useShallowEffect(() => {
|
||||
stateDetail.findUnique.load(params?.id as string)
|
||||
}, [])
|
||||
stateDetail.findUnique.load(params?.id as string);
|
||||
}, []);
|
||||
|
||||
const handleHapus = () => {
|
||||
if (selectedId) {
|
||||
stateDetail.delete.delete(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
router.push("/admin/pendidikan/perpustakaan-digital/data-perpustakaan")
|
||||
}
|
||||
stateDetail.delete.delete(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
router.push("/admin/pendidikan/perpustakaan-digital/data-perpustakaan");
|
||||
}
|
||||
};
|
||||
|
||||
if (!stateDetail.findUnique.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = stateDetail.findUnique.data;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack>
|
||||
<Text fz={"xl"} fw={"bold"}>Detail Data Perpustakaan</Text>
|
||||
<Paper bg={colors['BG-trans']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Judul</Text>
|
||||
<Text fz={"lg"}>{stateDetail.findUnique.data?.judul}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
|
||||
<Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateDetail.findUnique.data?.deskripsi }} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Kategori</Text>
|
||||
<Text fz={"lg"}>{stateDetail.findUnique.data?.kategori.name}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Gambar</Text>
|
||||
<Image src={stateDetail.findUnique.data?.image.link} alt="gambar" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Flex gap={"xs"}>
|
||||
<Box py={10}>
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
|
||||
mb={15}
|
||||
>
|
||||
Kembali
|
||||
</Button>
|
||||
|
||||
<Paper
|
||||
withBorder
|
||||
w={{ base: "100%", md: "60%" }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
|
||||
Detail Data Perpustakaan
|
||||
</Text>
|
||||
|
||||
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
|
||||
<Stack gap="sm">
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Judul</Text>
|
||||
<Text fz="md" c="dimmed">{data.judul || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text fz="md" dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Kategori</Text>
|
||||
<Text fz="md" c="dimmed">{data.kategori?.name || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Gambar</Text>
|
||||
{data.image?.link ? (
|
||||
<Image
|
||||
src={data.image.link}
|
||||
alt={data.judul || 'Gambar Perpustakaan'}
|
||||
w={120}
|
||||
h={120}
|
||||
radius="md"
|
||||
fit="cover"
|
||||
/>
|
||||
) : (
|
||||
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Group gap="sm">
|
||||
<Tooltip label="Hapus Data Perpustakaan" withArrow position="top">
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
if (stateDetail.findUnique.data) {
|
||||
setSelectedId(stateDetail.findUnique.data.id);
|
||||
setSelectedId(data.id);
|
||||
setModalHapus(true);
|
||||
}
|
||||
}}
|
||||
disabled={!stateDetail.findUnique.data}
|
||||
color="red">
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconX size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="Edit Data Perpustakaan" withArrow position="top">
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (stateDetail.findUnique.data) {
|
||||
router.push(`/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${stateDetail.findUnique.data.id}/edit`);
|
||||
}
|
||||
}}
|
||||
disabled={!stateDetail.findUnique.data}
|
||||
color="green">
|
||||
color="green"
|
||||
onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${data.id}/edit`)}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text="Apakah anda yakin ingin menghapus data ini?"
|
||||
text="Apakah Anda yakin ingin menghapus data ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -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 { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
|
||||
import { Dropzone } from '@mantine/dropzone';
|
||||
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -11,7 +11,6 @@ import { useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
|
||||
function CreateDataPerpustakaan() {
|
||||
const createState = useProxy(perpustakaanDigitalState.dataPerpustakaan)
|
||||
const router = useRouter();
|
||||
@@ -29,7 +28,6 @@ function CreateDataPerpustakaan() {
|
||||
imageId: "",
|
||||
kategoriId: "",
|
||||
};
|
||||
|
||||
setPreviewImage(null)
|
||||
setFile(null)
|
||||
};
|
||||
@@ -56,103 +54,119 @@ function CreateDataPerpustakaan() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Tombol Kembali */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Data Perpustakaan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Create Data Perpustakaan</Title>
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Judul */}
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
|
||||
label={<Text fw="bold" fz="sm">Judul</Text>}
|
||||
placeholder='Masukkan judul'
|
||||
value={createState.create.form.judul}
|
||||
onChange={(val) => {
|
||||
createState.create.form.judul = val.target.value;
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
|
||||
<Text fw="bold" fz="sm" mb={6}>Deskripsi</Text>
|
||||
<CreateEditor
|
||||
value={createState.create.form.deskripsi}
|
||||
onChange={(val) => {
|
||||
createState.create.form.deskripsi = val;
|
||||
}}
|
||||
onChange={(val) => { createState.create.form.deskripsi = val; }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Kategori */}
|
||||
<Select
|
||||
label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
|
||||
label={<Text fw="bold" fz="sm">Kategori</Text>}
|
||||
placeholder='Pilih kategori'
|
||||
value={createState.create.form.kategoriId || ""}
|
||||
onChange={(val) => {
|
||||
createState.create.form.kategoriId = val ?? "";
|
||||
}}
|
||||
onChange={(val) => { createState.create.form.kategoriId = val ?? ""; }}
|
||||
data={perpustakaanDigitalState.kategoriBuku.findMany.data?.map((item) => ({
|
||||
value: item.id,
|
||||
label: item.name,
|
||||
}))}
|
||||
/>
|
||||
|
||||
{/* Gambar */}
|
||||
<Box>
|
||||
<Text fz={"md"} fw={"bold"}>Gambar</Text>
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>Gambar</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
const selectedFile = files[0]; // Ambil file pertama
|
||||
const selectedFile = files[0];
|
||||
if (selectedFile) {
|
||||
setFile(selectedFile);
|
||||
setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
|
||||
setPreviewImage(URL.createObjectURL(selectedFile));
|
||||
}
|
||||
}}
|
||||
onReject={() => toast.error('File tidak valid.')}
|
||||
maxSize={5 * 1024 ** 2} // Maks 5MB
|
||||
maxSize={5 * 1024 ** 2}
|
||||
accept={{ 'image/*': [] }}
|
||||
radius="md"
|
||||
p="xl"
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
<IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
|
||||
<IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
|
||||
<IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
|
||||
<div>
|
||||
<Text size="xl" inline>
|
||||
Drag gambar ke sini atau klik untuk pilih file
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" inline mt={7}>
|
||||
Maksimal 5MB dan harus format gambar
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Text ta="center" mt="sm" size="sm" color="dimmed">
|
||||
Drag gambar ke sini atau klik untuk pilih file (maks 5MB)
|
||||
</Text>
|
||||
</Dropzone>
|
||||
|
||||
{/* Tampilkan preview kalau ada */}
|
||||
{previewImage && (
|
||||
<Box mt="sm">
|
||||
<Box mt="sm" style={{ textAlign: 'center' }}>
|
||||
<Image
|
||||
src={previewImage}
|
||||
alt="Preview"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '200px',
|
||||
objectFit: 'contain',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
}}
|
||||
radius="md"
|
||||
style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
<Group>
|
||||
<Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
|
||||
{/* Submit Button */}
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
@@ -1,24 +1,21 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
|
||||
import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
|
||||
import { Box, Button, Center, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip, Pagination } from '@mantine/core';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
|
||||
import HeaderSearch from '../../../_com/header';
|
||||
import JudulList from '../../../_com/judulList';
|
||||
import perpustakaanDigitalState from '../../../_state/pendidikan/perpustakaan-digital';
|
||||
|
||||
|
||||
|
||||
function DataPerpustakaan() {
|
||||
const [search, setSearch] = useState('');
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Data Perpustakaan'
|
||||
placeholder='pencarian'
|
||||
placeholder='Cari judul, deskripsi, atau kategori...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -32,37 +29,40 @@ function ListDataPerpustakaan({ search }: { search: string }) {
|
||||
const listDataState = useProxy(perpustakaanDigitalState.dataPerpustakaan)
|
||||
const router = useRouter();
|
||||
|
||||
const { data, page, totalPages, loading, load } = listDataState.findMany;
|
||||
|
||||
useEffect(() => {
|
||||
perpustakaanDigitalState.dataPerpustakaan.findMany.load()
|
||||
listDataState.findMany.load()
|
||||
}, [])
|
||||
load(page, 10, search);
|
||||
}, [page, search]);
|
||||
|
||||
const filteredData = (listDataState.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.judul.toLowerCase().includes(keyword) ||
|
||||
item.deskripsi.toLowerCase().includes(keyword) ||
|
||||
item.kategori.name.toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
const filteredData = data || [];
|
||||
|
||||
if (!listDataState.findMany.data) {
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p="md">
|
||||
<Stack>
|
||||
<JudulList
|
||||
title='List Data Perpustakaan'
|
||||
href='/admin/pendidikan/perpustakaan-digital/data-perpustakaan/create'
|
||||
/>
|
||||
<Paper withBorder bg={colors['white-1']} p="md" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>List Data Perpustakaan</Title>
|
||||
<Tooltip label="Tambah Data Perpustakaan" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/pendidikan/perpustakaan-digital/data-perpustakaan/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
|
||||
<Table striped highlightOnHover withRowBorders style={{ minWidth: '700px' }}>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>No</TableTh>
|
||||
@@ -72,30 +72,56 @@ function ListDataPerpustakaan({ search }: { search: string }) {
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.map((item, index) => (
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item, index) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Box w={100}>
|
||||
<Text truncate="end" fz={"sm"}>{index + 1}</Text>
|
||||
</Box>
|
||||
<Text truncate fz="sm">{index + 1}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text truncate="end" fz={"sm"}>{item.judul}</Text>
|
||||
<Text truncate fz="sm">{item.judul}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text truncate="end" fz={"sm"}>{item.kategori.name}</Text>
|
||||
<Text truncate fz="sm">{item.kategori.name}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${item.id}`)}>
|
||||
<IconDeviceImacCog size={25} />
|
||||
<Button
|
||||
variant="light"
|
||||
color="blue"
|
||||
onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${item.id}`)}
|
||||
>
|
||||
<IconDeviceImacCog size={20} />
|
||||
<Text ml={5}>Detail</Text>
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={4}>
|
||||
<Center py={20}>
|
||||
<Text color="dimmed">Tidak ada data perpustakaan yang cocok</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
</Paper>
|
||||
</Box>
|
||||
)
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
'use client';
|
||||
import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
@@ -10,9 +10,10 @@ import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditKategoriBuku() {
|
||||
const editState = useProxy(perpustakaanDigitalState.kategoriBuku)
|
||||
const editState = useProxy(perpustakaanDigitalState.kategoriBuku);
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: editState.update.form.name || '',
|
||||
});
|
||||
@@ -23,15 +24,15 @@ function EditKategoriBuku() {
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await editState.update.load(id); // akses langsung, bukan dari proxy
|
||||
const data = await editState.update.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
name: data.name || '',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading kategori buku:", error);
|
||||
toast.error("Gagal memuat data kategori buku");
|
||||
console.error('Error loading kategori buku:', error);
|
||||
toast.error('Gagal memuat data kategori buku');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -40,10 +41,7 @@ function EditKategoriBuku() {
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
editState.update.form = {
|
||||
...editState.update.form,
|
||||
name: formData.name,
|
||||
};
|
||||
editState.update.form = { ...editState.update.form, name: formData.name };
|
||||
await editState.update.update();
|
||||
toast.success('Kategori Buku berhasil diperbarui!');
|
||||
router.push('/admin/pendidikan/perpustakaan-digital/kategori-buku');
|
||||
@@ -54,23 +52,49 @@ function EditKategoriBuku() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors["blue-button"]} size={30} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Edit Kategori Buku</Title>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Kategori Buku
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label="Nama Kategori Buku"
|
||||
placeholder="Masukkan nama kategori buku"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Buku</Text>}
|
||||
placeholder="masukkan nama kategori buku"
|
||||
required
|
||||
/>
|
||||
|
||||
<Button onClick={handleSubmit}>Simpan</Button>
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
'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, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
|
||||
|
||||
function CreateKategoriBuku() {
|
||||
const createState = useProxy(perpustakaanDigitalState.kategoriBuku)
|
||||
const router = useRouter();
|
||||
@@ -21,30 +19,56 @@ function CreateKategoriBuku() {
|
||||
const handleSubmit = async () => {
|
||||
await createState.create.create();
|
||||
resetForm();
|
||||
router.push("/admin/pendidikan/perpustakaan-digital/kategori-buku")
|
||||
router.push("/admin/pendidikan/perpustakaan-digital/kategori-buku");
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant='subtle' color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Kategori Buku
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Create Kategori Buku</Title>
|
||||
{/* Form Paper */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Buku</Text>}
|
||||
label={<Text fw="bold" fz="sm">Nama Kategori Buku</Text>}
|
||||
placeholder='Masukkan nama kategori buku'
|
||||
value={createState.create.form.name}
|
||||
onChange={(val) => {
|
||||
createState.create.form.name = val.target.value;
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<Group>
|
||||
<Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
@@ -1,25 +1,22 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
|
||||
import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconPlus, IconTrash, IconSearch } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
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 perpustakaanDigitalState from '../../../_state/pendidikan/perpustakaan-digital';
|
||||
|
||||
|
||||
|
||||
function KategoriBuku() {
|
||||
const [search, setSearch] = useState('');
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Kategori Buku'
|
||||
placeholder='pencarian'
|
||||
placeholder='Cari kategori...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -30,89 +27,123 @@ function KategoriBuku() {
|
||||
}
|
||||
|
||||
function ListKategoriBuku({ search }: { search: string }) {
|
||||
const listDataState = useProxy(perpustakaanDigitalState.kategoriBuku)
|
||||
const stateKategori = useProxy(perpustakaanDigitalState.kategoriBuku)
|
||||
const router = useRouter();
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
listDataState.findMany.load()
|
||||
}, [])
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = stateKategori.findMany;
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, search)
|
||||
}, [page, search]);
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedId) {
|
||||
perpustakaanDigitalState.kategoriBuku.delete.delete(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
|
||||
perpustakaanDigitalState.kategoriBuku.findMany.load()
|
||||
}
|
||||
}
|
||||
|
||||
const filteredData = (listDataState.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.name.toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
const filteredData = data || [];
|
||||
|
||||
if (!listDataState.findMany.data) {
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p="md">
|
||||
<Stack>
|
||||
<JudulList
|
||||
title='List Kategori Buku'
|
||||
href='/admin/pendidikan/perpustakaan-digital/kategori-buku/create'
|
||||
/>
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Kategori Buku</Title>
|
||||
<Tooltip label="Tambah Kategori Buku" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/pendidikan/perpustakaan-digital/kategori-buku/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>No</TableTh>
|
||||
<TableTh>Nama</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Hapus</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>No</TableTh>
|
||||
<TableTh style={{ width: '60%' }}>Nama Kategori</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Edit</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Hapus</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.map((item, index) => (
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item, index) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{index + 1}</TableTd>
|
||||
<TableTd>
|
||||
<Box w={100}>
|
||||
<Text truncate="end" fz={"sm"}>{index + 1}</Text>
|
||||
</Box>
|
||||
<Text truncate fz="sm">{item.name}</Text>
|
||||
</TableTd>
|
||||
<TableTd>{item.name}</TableTd>
|
||||
<TableTd>
|
||||
<Button color='green' onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-buku/${item.id}`)}>
|
||||
<Button variant="light" color="green" onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-buku/${item.id}`)}>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
color='red'
|
||||
variant="light"
|
||||
color="red"
|
||||
disabled={perpustakaanDigitalState.kategoriBuku.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id)
|
||||
setModalHapus(true)
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={4}>
|
||||
<Center py={20}>
|
||||
<Text c="dimmed">Tidak ada data kategori buku yang cocok</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
|
||||
@@ -1,60 +1,110 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { IconSchool, IconTarget } from '@tabler/icons-react';
|
||||
|
||||
function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
label: "Program Unggulan",
|
||||
value: "program-unggulan",
|
||||
href: "/admin/pendidikan/program-pendidikan-anak/program-unggulan"
|
||||
href: "/admin/pendidikan/program-pendidikan-anak/program-unggulan",
|
||||
icon: <IconSchool size={18} stroke={1.8} />,
|
||||
tooltip: "Lihat dan kelola program unggulan pendidikan anak",
|
||||
},
|
||||
{
|
||||
label: "Tujuan Program",
|
||||
value: "tujuan-program",
|
||||
href: "/admin/pendidikan/program-pendidikan-anak/tujuan-program"
|
||||
href: "/admin/pendidikan/program-pendidikan-anak/tujuan-program",
|
||||
icon: <IconTarget size={18} stroke={1.8} />,
|
||||
tooltip: "Atur tujuan program pendidikan anak",
|
||||
},
|
||||
];
|
||||
const curentTab = tabs.find(tab => tab.href === pathname)
|
||||
const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
|
||||
|
||||
const currentTab = tabs.find(tab => tab.href === pathname);
|
||||
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
|
||||
|
||||
const handleTabChange = (value: string | null) => {
|
||||
const tab = tabs.find(t => t.value === value)
|
||||
const tab = tabs.find(t => t.value === value);
|
||||
if (tab) {
|
||||
router.push(tab.href)
|
||||
}
|
||||
setActiveTab(value)
|
||||
router.push(tab.href);
|
||||
}
|
||||
setActiveTab(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const match = tabs.find(tab => tab.href === pathname)
|
||||
const match = tabs.find(tab => tab.href === pathname);
|
||||
if (match) {
|
||||
setActiveTab(match.value)
|
||||
setActiveTab(match.value);
|
||||
}
|
||||
}, [pathname])
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Title order={3}>Program Pendidikan Anak</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>
|
||||
<Stack gap="lg">
|
||||
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
|
||||
Program Pendidikan Anak
|
||||
</Title>
|
||||
|
||||
<Tabs
|
||||
color={colors['blue-button']}
|
||||
variant='pills'
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
radius="lg"
|
||||
keepMounted={false}
|
||||
>
|
||||
<TabsList
|
||||
p="sm"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab, i) => (
|
||||
<Tooltip
|
||||
key={i}
|
||||
label={tab.tooltip}
|
||||
position="bottom"
|
||||
withArrow
|
||||
transitionProps={{ transition: 'pop', duration: 200 }}
|
||||
>
|
||||
<TabsTab
|
||||
value={tab.value}
|
||||
leftSection={tab.icon}
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.9rem",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
</TabsTab>
|
||||
</Tooltip>
|
||||
))}
|
||||
</TabsList>
|
||||
{tabs.map((e, i) => (
|
||||
<TabsPanel key={i} value={e.value}>
|
||||
{/* Konten dummy, bisa diganti tergantung routing */}
|
||||
<></>
|
||||
|
||||
{tabs.map((tab, i) => (
|
||||
<TabsPanel
|
||||
key={i}
|
||||
value={tab.value}
|
||||
style={{
|
||||
padding: "1.5rem",
|
||||
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TabsPanel>
|
||||
))}
|
||||
</Tabs>
|
||||
{children}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,83 +1,163 @@
|
||||
'use client'
|
||||
import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
const ProgramPendidikanAnakTextEditor = dynamic(() => import('../../_lib/programPendidikanAnakTextEditor').then(mod => mod.ProgramPendidikanAnakTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
const ProgramPendidikanAnakTextEditor = dynamic(
|
||||
() =>
|
||||
import('../../_lib/programPendidikanAnakTextEditor').then(
|
||||
(mod) => mod.ProgramPendidikanAnakTextEditor
|
||||
),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
function EditTujuanProgram() {
|
||||
const router = useRouter()
|
||||
const editState = useProxy(stateProgramPendidikanAnak.programUnggulanState)
|
||||
const router = useRouter();
|
||||
const editState = useProxy(stateProgramPendidikanAnak.programUnggulanState);
|
||||
|
||||
const [judul, setJudul] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// load data once
|
||||
useShallowEffect(() => {
|
||||
if (!editState.findById.data) {
|
||||
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
editState.findById.initialize();
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (editState.findById.data) {
|
||||
setJudul(editState.findById.data.judul ?? '')
|
||||
setContent(editState.findById.data.deskripsi ?? '')
|
||||
setJudul(editState.findById.data.judul ?? '');
|
||||
setContent(editState.findById.data.deskripsi ?? '');
|
||||
}
|
||||
}, [editState.findById.data])
|
||||
}, [editState.findById.data]);
|
||||
|
||||
const submit = () => {
|
||||
const handleSubmit = async () => {
|
||||
if (!judul.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (editState.findById.data) {
|
||||
editState.findById.data.judul = judul;
|
||||
editState.findById.data.deskripsi = content;
|
||||
editState.update.save(editState.findById.data)
|
||||
await editState.update.save(editState.findById.data);
|
||||
|
||||
toast.success('Berhasil menyimpan perubahan');
|
||||
router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan');
|
||||
}
|
||||
router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan')
|
||||
} catch (err) {
|
||||
console.error('Error saving:', err);
|
||||
toast.error('Gagal menyimpan data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => router.back();
|
||||
|
||||
// loading state
|
||||
if (editState.findById.loading) {
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={'xs'}>
|
||||
<Box>
|
||||
<Button
|
||||
variant={'subtle'}
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={20} />
|
||||
</Button>
|
||||
<Center h={400}>
|
||||
<Text>Memuat data program unggulan...</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
|
||||
<Stack gap={'xs'}>
|
||||
<Title order={3}>Edit Program Unggulan</Title>
|
||||
<Stack gap="xs">
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={handleBack}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Program Unggulan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<Title order={3}>Edit Tujuan Program</Title>
|
||||
|
||||
{/* Judul Field */}
|
||||
<TextInput
|
||||
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
||||
label={<Text fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul program"
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.target.value)}
|
||||
onChange={(e) => setJudul(e.currentTarget.value)}
|
||||
error={!judul && 'Judul wajib diisi'}
|
||||
/>
|
||||
<Text fw={"bold"}>Deskripsi</Text>
|
||||
|
||||
{/* Deskripsi Field */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
|
||||
<ProgramPendidikanAnakTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Submit & Cancel */}
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={editState.update.loading}
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting || editState.update.loading}
|
||||
disabled={!judul}
|
||||
>
|
||||
Submit
|
||||
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBack}
|
||||
disabled={isSubmitting || editState.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
|
||||
import stateProgramPendidikanAnak from '../../../_state/pendidikan/program-pendidikan-anak';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const listPreview = useProxy(stateProgramPendidikanAnak.programUnggulanState)
|
||||
const router = useRouter();
|
||||
const listPreview = useProxy(stateProgramPendidikanAnak.programUnggulanState);
|
||||
|
||||
useShallowEffect(() => {
|
||||
listPreview.findById.load('edit')
|
||||
}, [])
|
||||
listPreview.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!listPreview.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={400} w="90%" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = listPreview.findById.data;
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
|
||||
<Stack gap="md">
|
||||
{/* Header */}
|
||||
<Grid align="center">
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Program Unggulan</Title>
|
||||
<Title order={3} c={colors['blue-button']}>
|
||||
Pratinjau Program Unggulan
|
||||
</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan/edit')}>
|
||||
<IconEdit size={16} />
|
||||
<Tooltip label="Edit Program" withArrow>
|
||||
<Button
|
||||
c="green"
|
||||
variant="light"
|
||||
leftSection={<IconEdit size={18} stroke={2} />}
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/program-pendidikan-anak/program-unggulan/edit'
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
|
||||
</Box>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
|
||||
|
||||
{/* Konten Preview */}
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-1']}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="xs"
|
||||
>
|
||||
<Box px={{ base: 'sm', md: 50 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Judul */}
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '1.3rem', md: '1.8rem' }}
|
||||
fw="bold"
|
||||
c={colors['blue-button']}
|
||||
dangerouslySetInnerHTML={{ __html: data.judul }}
|
||||
/>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Text
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -1,83 +1,151 @@
|
||||
'use client'
|
||||
import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
const ProgramPendidikanAnakTextEditor = dynamic(() => import('../../_lib/programPendidikanAnakTextEditor').then(mod => mod.ProgramPendidikanAnakTextEditor), {
|
||||
ssr: false,
|
||||
});
|
||||
const ProgramPendidikanAnakTextEditor = dynamic(
|
||||
() => import('../../_lib/programPendidikanAnakTextEditor').then(mod => mod.ProgramPendidikanAnakTextEditor),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
function EditTujuanProgram() {
|
||||
const router = useRouter()
|
||||
const editState = useProxy(stateProgramPendidikanAnak.stateTujuanProgram)
|
||||
const router = useRouter();
|
||||
const editState = useProxy(stateProgramPendidikanAnak.stateTujuanProgram);
|
||||
|
||||
const [judul, setJudul] = useState('');
|
||||
const [content, setContent] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Load data pertama kali
|
||||
useShallowEffect(() => {
|
||||
if (!editState.findById.data) {
|
||||
editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
|
||||
editState.findById.initialize();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Sync state dengan data hasil fetch
|
||||
useEffect(() => {
|
||||
if (editState.findById.data) {
|
||||
setJudul(editState.findById.data.judul ?? '')
|
||||
setContent(editState.findById.data.deskripsi ?? '')
|
||||
setJudul(editState.findById.data.judul ?? '');
|
||||
setContent(editState.findById.data.deskripsi ?? '');
|
||||
}
|
||||
}, [editState.findById.data])
|
||||
}, [editState.findById.data]);
|
||||
|
||||
const submit = () => {
|
||||
const handleSubmit = async () => {
|
||||
if (!judul.trim()) {
|
||||
toast.error('Judul wajib diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (editState.findById.data) {
|
||||
editState.findById.data.judul = judul;
|
||||
editState.findById.data.deskripsi = content;
|
||||
editState.update.save(editState.findById.data)
|
||||
await editState.update.save(editState.findById.data);
|
||||
|
||||
toast.success('Berhasil menyimpan perubahan');
|
||||
router.push('/admin/pendidikan/program-pendidikan-anak/tujuan-program');
|
||||
}
|
||||
router.push('/admin/pendidikan/program-pendidikan-anak/tujuan-program')
|
||||
} catch (err) {
|
||||
console.error('Error saving:', err);
|
||||
toast.error('Gagal menyimpan data');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBack = () => router.back();
|
||||
|
||||
if (editState.findById.loading) {
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap={'xs'}>
|
||||
<Box>
|
||||
<Button
|
||||
variant={'subtle'}
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={20} />
|
||||
</Button>
|
||||
<Center h={400}>
|
||||
<Text>Memuat data tujuan program...</Text>
|
||||
</Center>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
|
||||
<Stack gap={'xs'}>
|
||||
<Title order={3}>Edit Tujuan Program</Title>
|
||||
<Stack gap="xs">
|
||||
{/* Back Button + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={handleBack} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={22} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Tujuan Program
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="xs">
|
||||
<TextInput
|
||||
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
||||
label={<Text fz="sm" fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul program"
|
||||
value={judul}
|
||||
onChange={(e) => setJudul(e.target.value)}
|
||||
onChange={(e) => setJudul(e.currentTarget.value)}
|
||||
error={!judul && 'Judul wajib diisi'}
|
||||
/>
|
||||
<Text fw={"bold"}>Deskripsi</Text>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
|
||||
<ProgramPendidikanAnakTextEditor
|
||||
showSubmit={false}
|
||||
onChange={setContent}
|
||||
initialContent={content}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={submit}
|
||||
loading={editState.update.loading}
|
||||
onClick={handleSubmit}
|
||||
loading={isSubmitting || editState.update.loading}
|
||||
disabled={!judul}
|
||||
>
|
||||
Submit
|
||||
{isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleBack}
|
||||
disabled={isSubmitting || editState.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
|
||||
import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -8,47 +8,86 @@ import { useProxy } from 'valtio/utils';
|
||||
import stateProgramPendidikanAnak from '../../../_state/pendidikan/program-pendidikan-anak';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const listPreview = useProxy(stateProgramPendidikanAnak.stateTujuanProgram)
|
||||
const router = useRouter();
|
||||
const listPreview = useProxy(stateProgramPendidikanAnak.stateTujuanProgram);
|
||||
|
||||
useShallowEffect(() => {
|
||||
listPreview.findById.load('edit')
|
||||
}, [])
|
||||
listPreview.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!listPreview.findById.data) {
|
||||
return (
|
||||
<Stack>
|
||||
<Skeleton radius={10} h={800} />
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={400} w="90%" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = listPreview.findById.data;
|
||||
|
||||
return (
|
||||
<Paper bg={colors['white-1']} p={'md'} radius={10}>
|
||||
<Stack gap={"22"}>
|
||||
<Grid>
|
||||
<Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
|
||||
<Stack gap="md">
|
||||
{/* Header */}
|
||||
<Grid align="center">
|
||||
<GridCol span={{ base: 12, md: 11 }}>
|
||||
<Title order={2}>Preview Tujuan Program</Title>
|
||||
<Title order={3} c={colors['blue-button']}>
|
||||
Pratinjau Tujuan Program
|
||||
</Title>
|
||||
</GridCol>
|
||||
<GridCol span={{ base: 12, md: 1 }}>
|
||||
<Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/program-pendidikan-anak/tujuan-program/edit')}>
|
||||
<IconEdit size={16} />
|
||||
<Tooltip label="Edit Tujuan Program" withArrow>
|
||||
<Button
|
||||
c="green"
|
||||
variant="light"
|
||||
leftSection={<IconEdit size={18} stroke={2} />}
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/pendidikan/program-pendidikan-anak/tujuan-program/edit'
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</GridCol>
|
||||
</Grid>
|
||||
<Box>
|
||||
<Stack gap={'lg'}>
|
||||
<Paper p={"xl"} bg={colors['BG-trans']}>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
|
||||
</Box>
|
||||
<Box px={{ base: 0, md: 30 }}>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
|
||||
|
||||
{/* Konten Preview */}
|
||||
<Paper
|
||||
p="xl"
|
||||
bg={colors['white-1']}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="xs"
|
||||
>
|
||||
<Box px={{ base: 'sm', md: 50 }}>
|
||||
<Stack gap="lg">
|
||||
{/* Judul */}
|
||||
<Text
|
||||
ta="center"
|
||||
fz={{ base: '1.3rem', md: '1.8rem' }}
|
||||
fw="bold"
|
||||
c={colors['blue-button']}
|
||||
dangerouslySetInnerHTML={{ __html: data.judul }}
|
||||
/>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Text
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
lh={1.7}
|
||||
ta="justify"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client';
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { IconChartBar, IconUsers } from '@tabler/icons-react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
@@ -49,7 +50,7 @@ function LayoutTabsIKM({ children }: { children: React.ReactNode }) {
|
||||
</Title>
|
||||
<Tabs
|
||||
radius="xl"
|
||||
color="blue"
|
||||
color={colors['blue-button']}
|
||||
variant="pills"
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { IconBuildingCommunity, IconHierarchy2, IconUsers } from '@tabler/icons-react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
@@ -57,7 +58,8 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
Struktur PPID
|
||||
</Title>
|
||||
<Tabs
|
||||
variant="pills"
|
||||
color={colors['blue-button']}
|
||||
variant='pills'
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
radius="lg"
|
||||
|
||||
103
src/app/admin/(dashboard)/user&role/layout.tsx
Normal file
103
src/app/admin/(dashboard)/user&role/layout.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { IconForms, IconUser } from '@tabler/icons-react';
|
||||
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: "User",
|
||||
value: "user",
|
||||
href: "/admin/user&role/user",
|
||||
icon: <IconUser size={18} stroke={1.8} />,
|
||||
tooltip: "Lihat dan kelola user",
|
||||
},
|
||||
{
|
||||
label: "Role",
|
||||
value: "role",
|
||||
href: "/admin/user&role/role",
|
||||
icon: <IconForms size={18} stroke={1.8} />,
|
||||
tooltip: "Kelola data role",
|
||||
},
|
||||
];
|
||||
|
||||
const currentTab = tabs.find(tab => tab.href === pathname);
|
||||
const [activeTab, setActiveTab] = useState<string | null>(currentTab?.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 gap="lg">
|
||||
<Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
|
||||
User & Role
|
||||
</Title>
|
||||
<Tabs
|
||||
variant="pills"
|
||||
value={activeTab}
|
||||
onChange={handleTabChange}
|
||||
radius="lg"
|
||||
keepMounted={false}
|
||||
>
|
||||
<TabsList
|
||||
p="sm"
|
||||
style={{
|
||||
background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab, i) => (
|
||||
<Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
|
||||
<TabsTab
|
||||
value={tab.value}
|
||||
leftSection={tab.icon}
|
||||
style={{
|
||||
fontWeight: 600,
|
||||
fontSize: "0.9rem",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
</TabsTab>
|
||||
</Tooltip>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
{tabs.map((tab, i) => (
|
||||
<TabsPanel
|
||||
key={i}
|
||||
value={tab.value}
|
||||
style={{
|
||||
padding: "1.5rem",
|
||||
background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
|
||||
borderRadius: "1rem",
|
||||
boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TabsPanel>
|
||||
))}
|
||||
</Tabs>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default LayoutTabs;
|
||||
127
src/app/admin/(dashboard)/user&role/role/[id]/page.tsx
Normal file
127
src/app/admin/(dashboard)/user&role/role/[id]/page.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, MultiSelect, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import user from '../../../_state/user/user-state';
|
||||
|
||||
function EditRole() {
|
||||
const stateRole = useProxy(user.roleState)
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: stateRole.update.form.name || "",
|
||||
permissions: stateRole.update.form.permissions || [],
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
stateRole.findMany.load();
|
||||
const loadRole = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await stateRole.update.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
name: data.name || "",
|
||||
permissions: data.permissions || [],
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading role:", error);
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : "Gagal mengambil data role"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
loadRole();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
stateRole.update.form = {
|
||||
...stateRole.update.form,
|
||||
name: formData.name,
|
||||
permissions: formData.permissions,
|
||||
}
|
||||
await stateRole.update.update();
|
||||
toast.success("Role berhasil diperbarui!");
|
||||
router.push("/admin/user&role/role");
|
||||
} catch (error) {
|
||||
console.error("Error updating role:", error);
|
||||
toast.error("Terjadi kesalahan saat memperbarui role");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Role
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p={'md'}
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={4}>Edit Role</Title>
|
||||
<TextInput
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
label={<Text fw={"bold"} fz={"sm"}>Nama Role</Text>}
|
||||
placeholder='Masukkan nama role'
|
||||
/>
|
||||
<MultiSelect
|
||||
value={formData.permissions}
|
||||
onChange={(val) => setFormData({ ...formData, permissions: val })}
|
||||
label={<Text fw={"bold"} fz={"sm"}>Permission</Text>}
|
||||
placeholder='Pilih permission'
|
||||
data={
|
||||
stateRole.findMany.data?.map((v) => ({
|
||||
value: v.id, // Make sure this is using the ID
|
||||
label: v.name
|
||||
})) || []
|
||||
}
|
||||
clearable
|
||||
searchable
|
||||
required
|
||||
error={!formData.permissions.length ? "Pilih minimal satu permission" : undefined}
|
||||
/>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
radius="md"
|
||||
size="md"
|
||||
onClick={handleSubmit}
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>Submit</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditRole;
|
||||
115
src/app/admin/(dashboard)/user&role/role/create/page.tsx
Normal file
115
src/app/admin/(dashboard)/user&role/role/create/page.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client';
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
MultiSelect,
|
||||
Paper,
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import user from '../../../_state/user/user-state';
|
||||
|
||||
|
||||
export default function CreateRole() {
|
||||
const router = useRouter();
|
||||
const stateRole = useProxy(user.roleState);
|
||||
useEffect(() => {
|
||||
stateRole.findMany.load();
|
||||
}, []);
|
||||
|
||||
const resetForm = () => {
|
||||
stateRole.create.form = {
|
||||
name: '',
|
||||
permissions: [] ,
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
await stateRole.create.create();
|
||||
|
||||
resetForm();
|
||||
router.push('/admin/user&role/role');
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Role
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<TextInput
|
||||
label="Nama Role"
|
||||
placeholder="Masukkan nama role"
|
||||
value={stateRole.create.form.name || ''}
|
||||
onChange={(e) => (stateRole.create.form.name = e.target.value)}
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<MultiSelect
|
||||
label="Permission"
|
||||
placeholder="Pilih permission"
|
||||
data={
|
||||
Array.from(
|
||||
new Set(
|
||||
stateRole.findMany.data
|
||||
?.map((item) => item.permissions)
|
||||
.flat()
|
||||
)
|
||||
)
|
||||
.filter((p): p is string => typeof p === 'string')
|
||||
.map((p) => ({ label: p, value: p }))
|
||||
}
|
||||
value={stateRole.create.form.permissions}
|
||||
onChange={(value) => (stateRole.create.form.permissions = value)}
|
||||
required
|
||||
/>
|
||||
|
||||
|
||||
</Box>
|
||||
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
124
src/app/admin/(dashboard)/user&role/role/page.tsx
Normal file
124
src/app/admin/(dashboard)/user&role/role/page.tsx
Normal file
@@ -0,0 +1,124 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title, Tooltip } from '@mantine/core';
|
||||
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../_com/header';
|
||||
import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
|
||||
import user from '../../_state/user/user-state';
|
||||
|
||||
|
||||
|
||||
|
||||
function Role() {
|
||||
const [search, setSearch] = useState('');
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Role'
|
||||
placeholder='pencarian'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListRole search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ListRole({ search }: { search: string }) {
|
||||
const listDataState = useProxy(user.roleState)
|
||||
const router = useRouter();
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
listDataState.findMany.load()
|
||||
}, [])
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedId) {
|
||||
listDataState.delete.delete(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
|
||||
listDataState.findMany.load()
|
||||
}
|
||||
}
|
||||
|
||||
const filteredData = (listDataState.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.name.toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
|
||||
if (!listDataState.findMany.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Role</Title>
|
||||
<Tooltip label="Tambah Role" withArrow>
|
||||
<Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/user&role/role/create')}>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table striped withRowBorders style={{ minWidth: '700px' }}>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Role</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Hapus</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.name}</TableTd>
|
||||
<TableTd>
|
||||
<Button color='green' onClick={() => router.push(`/admin/user&role/role/${item.id}`)}>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
color='red'
|
||||
disabled={listDataState.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id)
|
||||
setModalHapus(true)
|
||||
}}>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text='Apakah anda yakin ingin menghapus kategori Berita ini?'
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default Role;
|
||||
154
src/app/admin/(dashboard)/user&role/user/page.tsx
Normal file
154
src/app/admin/(dashboard)/user&role/user/page.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../_com/header';
|
||||
import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
|
||||
import user from '../../_state/user/user-state';
|
||||
|
||||
|
||||
function User() {
|
||||
const [search, setSearch] = useState("");
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='User'
|
||||
placeholder='Cari nama user...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListUser search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ListUser({ search }: { search: string }) {
|
||||
const stateUser = useProxy(user.userState)
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = stateUser.findMany;
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedId) {
|
||||
stateUser.delete.submit(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
|
||||
stateUser.findMany.load()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, search)
|
||||
}, [page, search])
|
||||
|
||||
const filteredData = data || []
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton height={600} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar User</Title>
|
||||
</Group>
|
||||
<Box style={{ overflowX: "auto" }}>
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh style={{ width: '25%' }}>Nama User</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Email</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Role</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Hapus</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd style={{ width: '25%', }}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '20%', }}>
|
||||
<Text truncate fz="sm" c="dimmed">
|
||||
{item.email}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '20%', }}>
|
||||
<Text truncate fz="sm" c="dimmed">
|
||||
{item.role.name}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '15%' }}>
|
||||
<Tooltip label="Hapus user" withArrow>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
onClick={() => {
|
||||
setSelectedId(item.id)
|
||||
setModalHapus(true)
|
||||
}}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={4}>
|
||||
<Center py={20}>
|
||||
<Text color="dimmed">Tidak ada data user yang cocok</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Paper>
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
load(newPage, 10);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
color="blue"
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text='Apakah anda yakin ingin menghapus user ini?'
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default User;
|
||||
@@ -377,5 +377,22 @@ export const navBar = [
|
||||
path: "/admin/pendidikan/data-pendidikan"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "User & Role",
|
||||
name: "User & Role",
|
||||
path: "",
|
||||
children: [
|
||||
{
|
||||
id: "User",
|
||||
name: "User",
|
||||
path: "/admin/user&role/user"
|
||||
},
|
||||
{
|
||||
id: "Role",
|
||||
name: "Role",
|
||||
path: "/admin/user&role/role"
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
0
src/app/api/[[...slugs]]/_lib/auth/logout.ts
Normal file
0
src/app/api/[[...slugs]]/_lib/auth/logout.ts
Normal file
@@ -10,9 +10,6 @@ async function lembagaPendidikanFindMany(context: Context) {
|
||||
const search = (context.query.search as string) || "";
|
||||
const skip = (page - 1) * limit;
|
||||
const jenjangPendidikanName = (context.query.jenjangPendidikanId as string) || "";
|
||||
|
||||
console.log('Lembaga API Query Params:', { page, limit, search, jenjangPendidikanName });
|
||||
|
||||
// Buat where clause
|
||||
const where: any = { isActive: true };
|
||||
|
||||
|
||||
@@ -10,8 +10,6 @@ async function pengajarFindMany(context: Context) {
|
||||
const search = (context.query.search as string) || "";
|
||||
const jenjangPendidikanName = (context.query.jenjangPendidikanId as string) || "";
|
||||
|
||||
console.log('Pengajar API Query Params:', { page, limit, search, jenjangPendidikanId: jenjangPendidikanName });
|
||||
|
||||
const where: any = { isActive: true };
|
||||
|
||||
// Filter berdasarkan jenjang pendidikan (jika ada)
|
||||
|
||||
@@ -10,8 +10,6 @@ async function siswaFindMany(context: Context) {
|
||||
const search = (context.query.search as string) || "";
|
||||
const jenjangPendidikanName = (context.query.jenjangPendidikanName as string) || "";
|
||||
|
||||
console.log('Siswa API Query Params:', { page, limit, search, jenjangPendidikanId: jenjangPendidikanName });
|
||||
|
||||
// Buat where clause
|
||||
const where: any = { isActive: true };
|
||||
|
||||
|
||||
@@ -1,11 +1,53 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
// /api/berita/findManyPaginated.ts
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Context } from "elysia";
|
||||
|
||||
export default async function kategoriBukuFindMany() {
|
||||
const data = await prisma.kategoriBuku.findMany();
|
||||
async function kategoriBukuFindMany(context: Context) {
|
||||
// Ambil parameter dari query
|
||||
const page = Number(context.query.page) || 1;
|
||||
const limit = Number(context.query.limit) || 10;
|
||||
const search = (context.query.search as string) || '';
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
// Buat where clause
|
||||
const where: any = { isActive: true };
|
||||
|
||||
// Tambahkan pencarian (jika ada)
|
||||
if (search) {
|
||||
where.OR = [
|
||||
{ name: { contains: search, mode: 'insensitive' } },
|
||||
];
|
||||
}
|
||||
|
||||
try {
|
||||
// Ambil data dan total count secara paralel
|
||||
const [data, total] = await Promise.all([
|
||||
prisma.kategoriBuku.findMany({
|
||||
where,
|
||||
skip,
|
||||
take: limit,
|
||||
orderBy: { createdAt: 'desc' },
|
||||
}),
|
||||
prisma.kategoriBuku.count({ where }),
|
||||
]);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Success get all kategori buku",
|
||||
message: "Berhasil ambil kategori buku dengan pagination",
|
||||
data,
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
};
|
||||
} catch (e) {
|
||||
console.error("Error di findMany paginated:", e);
|
||||
return {
|
||||
success: false,
|
||||
message: "Gagal mengambil data kategori buku",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default kategoriBukuFindMany;
|
||||
@@ -1,51 +0,0 @@
|
||||
import { Context } from "elysia";
|
||||
import prisma from "@/lib/prisma";
|
||||
import bcrypt from "bcryptjs";
|
||||
|
||||
type FormCreateUser = {
|
||||
nama: string;
|
||||
email: string;
|
||||
password: string;
|
||||
roleId: string;
|
||||
isActive?: boolean;
|
||||
};
|
||||
|
||||
export default async function userCreate(context: Context) {
|
||||
const body = (await context.body) as FormCreateUser;
|
||||
|
||||
if (!body.nama || !body.email || !body.password || !body.roleId) {
|
||||
throw new Error("Semua field wajib diisi");
|
||||
}
|
||||
|
||||
try {
|
||||
// Cek apakah email sudah terdaftar
|
||||
const existing = await prisma.user.findUnique({
|
||||
where: { email: body.email },
|
||||
});
|
||||
if (existing) {
|
||||
throw new Error("Email sudah terdaftar");
|
||||
}
|
||||
|
||||
// Hash password sebelum simpan
|
||||
const hashedPassword = await bcrypt.hash(body.password, 10);
|
||||
|
||||
const result = await prisma.user.create({
|
||||
data: {
|
||||
nama: body.nama,
|
||||
email: body.email,
|
||||
password: hashedPassword,
|
||||
roleId: body.roleId,
|
||||
isActive: body.isActive ?? true,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "User berhasil dibuat",
|
||||
data: result,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error creating user:", error);
|
||||
throw new Error("Gagal membuat user: " + (error as Error).message);
|
||||
}
|
||||
}
|
||||
@@ -1,28 +1,52 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import prisma from "@/lib/prisma";
|
||||
import { Context } from "elysia";
|
||||
|
||||
export default async function userFindMany(context: Context) {
|
||||
const page = Number(context.query.page) || 1;
|
||||
const limit = Number(context.query.limit) || 10;
|
||||
const search = (context.query.search as string) || '';
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
// Buat where clause
|
||||
const where: any = { isActive: true };
|
||||
|
||||
// Tambahkan pencarian (jika ada)
|
||||
if (search) {
|
||||
where.OR = [
|
||||
{ nama: { contains: search, mode: 'insensitive' } },
|
||||
];
|
||||
}
|
||||
|
||||
export default async function userFindMany() {
|
||||
try {
|
||||
const data = await prisma.user.findMany({
|
||||
const [data, total] = await Promise.all([
|
||||
prisma.user.findMany({
|
||||
include: {
|
||||
role: true,
|
||||
},
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
},
|
||||
});
|
||||
skip,
|
||||
take: limit,
|
||||
}),
|
||||
prisma.user.count({ where }),
|
||||
]);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: "Success get all user",
|
||||
message: "Berhasil ambil user dengan pagination",
|
||||
data,
|
||||
page,
|
||||
limit,
|
||||
total,
|
||||
totalPages: Math.ceil(total / limit),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Find many error:", error);
|
||||
} catch (e) {
|
||||
console.error("Error di findMany paginated:", e);
|
||||
return {
|
||||
success: false,
|
||||
message:
|
||||
"Gagal mengambil data: " +
|
||||
(error instanceof Error ? error.message : "Unknown error"),
|
||||
message: "Gagal mengambil data user",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,53 +1,13 @@
|
||||
import { Elysia, t } from "elysia";
|
||||
|
||||
// Import semua handler
|
||||
import userCreate from "./create";
|
||||
import userFindMany from "./findMany";
|
||||
import userFindUnique from "./findUnique";
|
||||
import userUpdate from "./updt";
|
||||
import userDelete from "./del"; // `delete` nggak boleh jadi nama file JS langsung, jadi biasanya `del.ts`
|
||||
import userLogin from "./login";
|
||||
import userRegister from "./register";
|
||||
|
||||
const User = new Elysia({ prefix: "/api/user" })
|
||||
.post("/register", userRegister, {
|
||||
body: t.Object({
|
||||
nama: t.String(),
|
||||
email: t.String(),
|
||||
password: t.String(),
|
||||
}),
|
||||
})
|
||||
.post("/login", userLogin, {
|
||||
body: t.Object({
|
||||
email: t.String(),
|
||||
password: t.String(),
|
||||
}),
|
||||
})
|
||||
.post("/create", userCreate, {
|
||||
body: t.Object({
|
||||
nama: t.String(),
|
||||
email: t.String(),
|
||||
password: t.String(),
|
||||
roleId: t.String(),
|
||||
}),
|
||||
})
|
||||
.get("/findMany", userFindMany)
|
||||
.get("/findUnique/:id", userFindUnique)
|
||||
.put(
|
||||
"/update/:id",
|
||||
async (context) => {
|
||||
const response = await userUpdate(context);
|
||||
return response;
|
||||
},
|
||||
{
|
||||
body: t.Object({
|
||||
nama: t.String(),
|
||||
email: t.String(),
|
||||
password: t.String(),
|
||||
roleId: t.String(),
|
||||
}),
|
||||
}
|
||||
)
|
||||
.put("/del/:id", userDelete, {
|
||||
params: t.Object({
|
||||
id: t.String(),
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Context } from "elysia";
|
||||
|
||||
type FormCreate = {
|
||||
name: string;
|
||||
permissions: string[];
|
||||
}
|
||||
|
||||
export default async function roleCreate(context: Context) {
|
||||
@@ -12,6 +13,7 @@ export default async function roleCreate(context: Context) {
|
||||
const result = await prisma.role.create({
|
||||
data: {
|
||||
name: body.name,
|
||||
permissions: body.permissions,
|
||||
},
|
||||
});
|
||||
return {
|
||||
|
||||
@@ -13,6 +13,7 @@ const Role = new Elysia({
|
||||
.post("/create", roleCreate, {
|
||||
body: t.Object({
|
||||
name: t.String(),
|
||||
permissions: t.Array(t.String()),
|
||||
}),
|
||||
})
|
||||
|
||||
@@ -26,6 +27,7 @@ const Role = new Elysia({
|
||||
.put("/:id", roleUpdate, {
|
||||
body: t.Object({
|
||||
name: t.String(),
|
||||
permissions: t.Array(t.String()),
|
||||
}),
|
||||
})
|
||||
.delete("/del/:id", roleDelete);
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Context } from "elysia";
|
||||
|
||||
type FormUpdate = {
|
||||
name: string;
|
||||
permissions: string[];
|
||||
}
|
||||
|
||||
export default async function roleUpdate(context: Context) {
|
||||
@@ -14,6 +15,7 @@ export default async function roleUpdate(context: Context) {
|
||||
where: { id },
|
||||
data: {
|
||||
name: body.name,
|
||||
permissions: body.permissions,
|
||||
},
|
||||
});
|
||||
return {
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
// /api/user/update.ts
|
||||
import prisma from '@/lib/prisma';
|
||||
import { Context } from 'elysia';
|
||||
|
||||
export default async function userUpdate(context: Context) {
|
||||
const { id } = context.params as { id: string };
|
||||
const body = await context.body as {
|
||||
nama?: string;
|
||||
email?: string;
|
||||
password?: string;
|
||||
roleId?: string;
|
||||
isActive?: boolean;
|
||||
};
|
||||
|
||||
try {
|
||||
const updated = await prisma.user.update({
|
||||
where: { id },
|
||||
data: {
|
||||
...body,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'User berhasil diupdate',
|
||||
data: updated,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return {
|
||||
success: false,
|
||||
message: 'Gagal mengupdate user',
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -4,17 +4,14 @@ import { Box, Button, Center, Flex, Group, Image, Paper, Stack, Text, TextInput,
|
||||
import { IconUserFilled } from '@tabler/icons-react';
|
||||
import Link from 'next/link';
|
||||
import BackButton from '../darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import { useSnapshot } from 'valtio';
|
||||
import userState from '../admin/(dashboard)/_state/user/user-state';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const snap = useSnapshot(userState.userState)
|
||||
const handleSubmit = async () => {
|
||||
router.push("/darmasaba/pendidikan/perpustakaan-digital")
|
||||
await snap.login.submit()
|
||||
}
|
||||
// const router = useRouter()
|
||||
// const snap = useSnapshot(userState.userState)
|
||||
// const handleSubmit = async () => {
|
||||
// router.push("/darmasaba/pendidikan/perpustakaan-digital")
|
||||
// await snap.login.submit()
|
||||
// }
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
@@ -47,23 +44,23 @@ function Page() {
|
||||
type='email'
|
||||
label='Email'
|
||||
placeholder='Email'
|
||||
value={snap.login.form.email}
|
||||
onChange={(e) => {
|
||||
userState.userState.login.form.email = e.target.value
|
||||
}}
|
||||
// value={snap.login.form.email}
|
||||
// onChange={(e) => {
|
||||
// userState.userState.login.form.email = e.target.value
|
||||
// }}
|
||||
required
|
||||
/>
|
||||
<TextInput py={20}
|
||||
type='password'
|
||||
label='Password'
|
||||
placeholder='Password'
|
||||
value={snap.login.form.password}
|
||||
onChange={(e) => {
|
||||
userState.userState.login.form.password = e.target.value
|
||||
}}
|
||||
// value={snap.login.form.password}
|
||||
// onChange={(e) => {
|
||||
// userState.userState.login.form.password = e.target.value
|
||||
// }}
|
||||
/>
|
||||
<Box pb={20} >
|
||||
<Button onClick={handleSubmit} fullWidth bg={colors['blue-button']} radius={'xl'}>Masuk</Button>
|
||||
<Button fullWidth bg={colors['blue-button']} radius={'xl'}>Masuk</Button>
|
||||
</Box>
|
||||
<Flex justify={'center'} align={'center'}>
|
||||
<Text>Belum punya akun? </Text>
|
||||
|
||||
@@ -2,19 +2,16 @@
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Checkbox, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import BackButton from '../darmasaba/(pages)/desa/layanan/_com/BackButto';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useSnapshot } from 'valtio';
|
||||
import userState from '../admin/(dashboard)/_state/user/user-state';
|
||||
|
||||
|
||||
|
||||
function Page() {
|
||||
const router = useRouter()
|
||||
const registrerState = useSnapshot(userState.userState)
|
||||
const handleSubmit = async () => {
|
||||
router.push("/login")
|
||||
await registrerState.register.submit()
|
||||
}
|
||||
// const router = useRouter()
|
||||
// const registrerState = useSnapshot(userState.userState)
|
||||
// const handleSubmit = async () => {
|
||||
// router.push("/login")
|
||||
// await registrerState.register.submit()
|
||||
// }
|
||||
return (
|
||||
<Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
|
||||
<Box px={{ base: 'md', md: 100 }}>
|
||||
@@ -43,28 +40,28 @@ function Page() {
|
||||
<Box>
|
||||
<TextInput placeholder='Nama Lengkap'
|
||||
label='Nama Lengkap'
|
||||
value={registrerState.register.form.nama}
|
||||
onChange={(e) => {
|
||||
userState.userState.register.form.nama = e.target.value
|
||||
}}
|
||||
// value={registrerState.register.form.nama}
|
||||
// onChange={(e) => {
|
||||
// userState.userState.register.form.nama = e.target.value
|
||||
// }}
|
||||
required
|
||||
|
||||
/>
|
||||
<TextInput py={10} placeholder='Email'
|
||||
label='Email'
|
||||
value={registrerState.register.form.email}
|
||||
onChange={(e) => {
|
||||
userState.userState.register.form.email = e.target.value
|
||||
}}
|
||||
// value={registrerState.register.form.email}
|
||||
// onChange={(e) => {
|
||||
// userState.userState.register.form.email = e.target.value
|
||||
// }}
|
||||
required
|
||||
/>
|
||||
<TextInput pb={10} placeholder='Password'
|
||||
type='password'
|
||||
label='Password'
|
||||
value={registrerState.register.form.password}
|
||||
onChange={(e) => {
|
||||
userState.userState.register.form.password = e.target.value
|
||||
}}
|
||||
// value={registrerState.register.form.password}
|
||||
// onChange={(e) => {
|
||||
// userState.userState.register.form.password = e.target.value
|
||||
// }}
|
||||
required
|
||||
/>
|
||||
<Box pb={10}>
|
||||
@@ -73,7 +70,7 @@ function Page() {
|
||||
/>
|
||||
</Box>
|
||||
<Box pb={20} >
|
||||
<Button onClick={handleSubmit} fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
|
||||
<Button fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user