Compare commits
15 Commits
nico/19-se
...
nico/7-okt
| Author | SHA1 | Date | |
|---|---|---|---|
| d601b2fee3 | |||
| cee0957e07 | |||
| 5c66eccf23 | |||
| f7fd9be255 | |||
| 8a6d8ed8db | |||
| 63054cedf0 | |||
| c2f1ab8179 | |||
| 295d6f7d63 | |||
| dbd56a1493 | |||
| 2a26db6e17 | |||
| 33fc472472 | |||
| d8fa56d923 | |||
| cac146471a | |||
| 3e4a7a1c0a | |||
| b5c044df6e |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -41,6 +41,9 @@ next-env.d.ts
|
||||
# uploads
|
||||
/uploads
|
||||
|
||||
# download
|
||||
/download
|
||||
|
||||
# cache
|
||||
/cache
|
||||
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
experimental: {},
|
||||
allowedDevOrigins: [
|
||||
"http://192.168.1.82:3000", // buat akses dari HP/device lain
|
||||
"http://localhost:3000", // akses lokal
|
||||
],
|
||||
async headers() {
|
||||
return [
|
||||
{
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"version": "0.1.5",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "bun --bun next dev",
|
||||
"dev": "bun --bun next dev --hostname 0.0.0.0",
|
||||
"build": "bun --bun next build",
|
||||
"start": "bun --bun next start"
|
||||
},
|
||||
@@ -39,19 +39,23 @@
|
||||
"@tiptap/pm": "^2.11.7",
|
||||
"@tiptap/react": "^2.11.7",
|
||||
"@tiptap/starter-kit": "^2.11.7",
|
||||
"@types/adm-zip": "^0.5.7",
|
||||
"@types/bun": "^1.2.2",
|
||||
"@types/leaflet": "^1.9.20",
|
||||
"@types/lodash": "^4.17.16",
|
||||
"add": "^2.0.6",
|
||||
"adm-zip": "^0.5.16",
|
||||
"animate.css": "^4.1.1",
|
||||
"bcryptjs": "^3.0.2",
|
||||
"bun": "^1.2.2",
|
||||
"chart.js": "^4.4.8",
|
||||
"classnames": "^2.5.1",
|
||||
"colors": "^1.4.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"elysia": "^1.3.5",
|
||||
"embla-carousel-autoplay": "^8.5.2",
|
||||
"embla-carousel-react": "^7.1.0",
|
||||
"extract-zip": "^2.0.1",
|
||||
"form-data": "^4.0.2",
|
||||
"framer-motion": "^12.23.5",
|
||||
"get-port": "^7.1.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[
|
||||
{
|
||||
"id": "1",
|
||||
"id": "edit",
|
||||
"name": "Pelayanan Penduduk Non-Permanent",
|
||||
"deskripsi": "<p>Surat Keterangan Penduduk Non-Permanent adalah dokumen yang dikeluarkan oleh pihak berwenang untuk memberikan keterangan bahwa seseorang atau kelompok orang memiliki status penduduk non-permanent di suatu wilayah. Dokumen ini biasanya digunakan untuk keperluan administratif atau legal, seperti mendapatkan akses ke layanan kesehatan, pendidikan, atau pelayanan publik lainnya.</p>"
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[
|
||||
{
|
||||
"id": "1",
|
||||
"id": "edit",
|
||||
"name": "Pelayanan Perizinan Berusaha Berbasis Risiko Melalui Sistem ONLINE SINGLE SUBMISSION (OSS)",
|
||||
"deskripsi": "<p>Penyelenggaraan Perizinan Berusaha Berbasis Risiko melalui Sistem Online Single Submission (OSS) merupakan pelaksanaan Undang-Undang Nomor 11 Tahun 2020 Tentang Cipta Kerja. OSS Berbasis Risiko wajib digunakan oleh Pelaku Usaha, Kementerian/Lembaga, Pemerintah Daerah, Administrator Kawasan Ekonomi Khusus (KEK), dan Badan Pengusahaan Kawasan Perdagangan Bebas Pelabuhan Bebas (KPBPB).Berdasarkan Peraturan Pemerintah Nomor 5 Tahun 2021 terdapat 1.702 kegiatan usaha yang terdiri atas 1.349 Klasifikasi Baku Lapangan Usaha Indonesia (KBLI) yang sudah diimplementasikan dalam Sistem OSS Berbasis Risiko.</p>",
|
||||
"link" : "https://oss.go.id/"
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": "650e8400-e29b-41d4-a716-446655440001",
|
||||
"atasanId": "550e8400-e29b-41d4-a716-446655440001",
|
||||
"bawahanId": "550e8400-e29b-41d4-a716-446655440002",
|
||||
"tipe": "Langsung Melapor"
|
||||
}
|
||||
]
|
||||
91
prisma/data/ekonomi/struktur-organisasi/pegawai-bumdes.json
Normal file
91
prisma/data/ekonomi/struktur-organisasi/pegawai-bumdes.json
Normal file
@@ -0,0 +1,91 @@
|
||||
[
|
||||
{
|
||||
"id": "cmgewz4gt000704ib91i3f169",
|
||||
"namaLengkap": "Ida Bagus Surya Prabhawa Manuaba, S.H.,M.H., NL.P.",
|
||||
"gelarAkademik": "S.H.,M.H.,NL.P.",
|
||||
"tanggalMasuk": "2020-01-01T00:00:00.000Z",
|
||||
"email": "bagus@desa.id",
|
||||
"telepon": "081234567891",
|
||||
"alamat": "Jl. Raya Desa No. 1",
|
||||
"posisiId": "kepala_desa",
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "cmgewxfvw000004ibee5013f4",
|
||||
"namaLengkap": "I Ketut Suwanta",
|
||||
"gelarAkademik": "S.Pt",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
"email": "suwanta@desa.id",
|
||||
"telepon": "081234567892",
|
||||
"alamat": "Jl. Raya Desa No. 2",
|
||||
"posisiId": "sekretaris_desa",
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "cmgewxvqw000104ibgm5l8fzs",
|
||||
"namaLengkap": "Ni Wayan Supardiati",
|
||||
"gelarAkademik": "S.Pd",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
"email": "supardiati@desa.id",
|
||||
"telepon": "081234567892",
|
||||
"alamat": "Jl. Raya Desa No. 2",
|
||||
"posisiId": "kaur_keuangan",
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "cmgewy1g9000204ib2n7hbx0i",
|
||||
"namaLengkap": "I Wayan Agus Juni Artha Saputra",
|
||||
"gelarAkademik": "S.T.",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
"email": "agus@desa.id",
|
||||
"telepon": "081234567892",
|
||||
"alamat": "Jl. Raya Desa No. 2",
|
||||
"posisiId": "kadus_banjar_dinas_menesa",
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "cmgewybah000304ibgqhn1gm2",
|
||||
"namaLengkap": "I Wayan Sueca",
|
||||
"gelarAkademik": "S.H.",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
"email": "sueca@desa.id",
|
||||
"telepon": "081234567893",
|
||||
"alamat": "Jl. Raya Desa No. 2",
|
||||
"posisiId": "kadus_banjar_dinas_darmasaba",
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "cmgewygqz000404ib20sv8nvg",
|
||||
"namaLengkap": "Si Gede Ketut Astawa",
|
||||
"gelarAkademik": "S.T.",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
"email": "astawa@desa.id",
|
||||
"telepon": "081234567893",
|
||||
"alamat": "Jl. Raya Desa No. 2",
|
||||
"posisiId": "kadus_banjar_dinas_bucu",
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "cmgewyos1000504ibcu8o2gyk",
|
||||
"namaLengkap": "I Kadek Arya Minarta",
|
||||
"gelarAkademik": "S.T.",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
"email": "minarta@desa.id",
|
||||
"telepon": "081234567893",
|
||||
"alamat": "Jl. Raya Desa No. 2",
|
||||
"posisiId": "kadus_banjar_dinas_gulingan",
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "cmgewyxk7000604ib8djs3i6c",
|
||||
"namaLengkap": "I Gede Andika Pradnya Diputra",
|
||||
"gelarAkademik": "S.E.",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
"email": "diputra@desa.id",
|
||||
"telepon": "081234567893",
|
||||
"alamat": "Jl. Raya Desa No. 2",
|
||||
"posisiId": "kadus_banjar_dinas_taman",
|
||||
"isActive": true
|
||||
}
|
||||
|
||||
]
|
||||
@@ -1,24 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440001",
|
||||
"namaLengkap": "Budi Santoso",
|
||||
"gelarAkademik": "S.IP",
|
||||
"tanggalMasuk": "2020-01-01T00:00:00.000Z",
|
||||
"email": "budi@desa.id",
|
||||
"telepon": "081234567891",
|
||||
"alamat": "Jl. Raya Desa No. 1",
|
||||
"posisiId": "kepala_desa",
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440002",
|
||||
"namaLengkap": "Ani Lestari",
|
||||
"gelarAkademik": "S.Pd",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
"email": "ani@desa.id",
|
||||
"telepon": "081234567892",
|
||||
"alamat": "Jl. Raya Desa No. 2",
|
||||
"posisiId": "sekretaris_desa",
|
||||
"isActive": true
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,159 @@
|
||||
[
|
||||
[
|
||||
{
|
||||
"id": "kepala_desa",
|
||||
"nama": "Kepala Desa",
|
||||
"deskripsi": "Pemimpin desa Darmasaba",
|
||||
"hierarki": 1,
|
||||
"parentId": null
|
||||
},
|
||||
{
|
||||
"id": "kepala_urusan",
|
||||
"nama": "Kepala Urusan",
|
||||
"deskripsi": "Pemimpin urusan desa Darmasaba",
|
||||
"hierarki": 2,
|
||||
"parentId": "kepala_desa"
|
||||
},
|
||||
{
|
||||
"id": "sekretaris_desa",
|
||||
"nama": "Sekretaris Desa",
|
||||
"deskripsi": "Pengelola administrasi desa",
|
||||
"hierarki": 2,
|
||||
"parentId": "kepala_desa"
|
||||
},
|
||||
{
|
||||
"id": "kaur_keuangan",
|
||||
"nama": "Kaur Keuangan",
|
||||
"deskripsi": "Pengelola keuangan desa",
|
||||
"hierarki": 3,
|
||||
"parentId": "kaur_umum"
|
||||
},
|
||||
{
|
||||
"id": "kaur_perencanaan",
|
||||
"nama": "Kaur Perencanaan",
|
||||
"deskripsi": "Penyusun program kerja desa",
|
||||
"hierarki": 3,
|
||||
"parentId": "kaur_umum"
|
||||
},
|
||||
{
|
||||
"id": "kaur_umum",
|
||||
"nama": "Kaur Umum & TU",
|
||||
"deskripsi": "Pelayanan umum dan administrasi",
|
||||
"hierarki": 2,
|
||||
"parentId": "kepala_desa"
|
||||
},
|
||||
{
|
||||
"id": "kasi_pemerintahan",
|
||||
"nama": "Kasi Pemerintahan",
|
||||
"deskripsi": "Urusan pemerintahan dan keamanan",
|
||||
"hierarki": 2,
|
||||
"parentId": "kepala_desa"
|
||||
},
|
||||
{
|
||||
"id": "kasi_pelayanan",
|
||||
"nama": "Kasi Pelayanan",
|
||||
"deskripsi": "Urusan pelayanan masyarakat",
|
||||
"hierarki": 2,
|
||||
"parentId": "kepala_desa"
|
||||
},
|
||||
{
|
||||
"id": "kasi_kesejahteraan",
|
||||
"nama": "Kasi Kesejahteraan",
|
||||
"deskripsi": "Urusan sosial dan kesejahteraan",
|
||||
"hierarki": 2,
|
||||
"parentId": "kepala_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_cabe",
|
||||
"nama": "Kepala Dusun Banjar Dinas Cabe",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Dinas Cabe",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_menesa",
|
||||
"nama": "Kepala Dusun Banjar Dinas Menesa",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Menesa",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_penenjoan",
|
||||
"nama": "Kepala Dusun Banjar Dinas Penenjoan",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Dinas Penenjoan",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_telanga",
|
||||
"nama": "Kepala Dusun Banjar Dinas Telanga",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Dinas Telanga",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_tengah",
|
||||
"nama": "Kepala Dusun Banjar Dinas Tengah",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Dinas Tengah",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_baler_pasar",
|
||||
"nama": "Kepala Dusun Banjar Dinas Baler Pasar",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Dinas Baler Pasar",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_bucu",
|
||||
"nama": "Kepala Dusun Banjar Dinas Bucu",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Dinas Bucu",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_gulingan",
|
||||
"nama": "Kepala Dusun Banjar Dinas Gulingan",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Dinas Gulingan",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_bersih",
|
||||
"nama": "Kepala Dusun Banjar Dinas Bersih",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Dinas Bersih",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_umahanyar",
|
||||
"nama": "Kepala Dusun Banjar Dinas Umahanyar",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Dinas Umahanyar",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_taman",
|
||||
"nama": "Kepala Dusun Banjar Dinas Taman",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Dinas Taman",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "kadus_banjar_dinas_darmasaba",
|
||||
"nama": "Kepala Dusun Banjar Dinas Darmasaba",
|
||||
"deskripsi": "Pimpinan wilayah Banjar Dinas Darmasaba",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
},
|
||||
{
|
||||
"id": "staf_desa",
|
||||
"nama": "Staf Desa",
|
||||
"deskripsi": "Staf Desa",
|
||||
"hierarki": 3,
|
||||
"parentId": "sekretaris_desa"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": "kepala_desa",
|
||||
"nama": "Kepala Desa",
|
||||
"deskripsi": "Kepala Desa",
|
||||
"hierarki": 1
|
||||
},
|
||||
{
|
||||
"id": "sekretaris_desa",
|
||||
"nama": "Sekretaris Desa",
|
||||
"deskripsi": "Sekretaris Desa",
|
||||
"hierarki": 2
|
||||
},
|
||||
{
|
||||
"id": "bendahara_desa",
|
||||
"nama": "Bendahara Desa",
|
||||
"deskripsi": "Bendahara Desa",
|
||||
"hierarki": 3
|
||||
},
|
||||
{
|
||||
"id": "staff_umum",
|
||||
"nama": "Staff Umum",
|
||||
"deskripsi": "Staff Umum",
|
||||
"hierarki": 4
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440001",
|
||||
"id": "cmgewz4gt000704ib91i3f169",
|
||||
"namaLengkap": "Ida Bagus Surya Prabhawa Manuaba, S.H.,M.H., NL.P.",
|
||||
"gelarAkademik": "S.H.,M.H.,NL.P.",
|
||||
"tanggalMasuk": "2020-01-01T00:00:00.000Z",
|
||||
@@ -11,7 +11,7 @@
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440002",
|
||||
"id": "cmgewxfvw000004ibee5013f4",
|
||||
"namaLengkap": "I Ketut Suwanta",
|
||||
"gelarAkademik": "S.Pt",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
@@ -22,7 +22,7 @@
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440006",
|
||||
"id": "cmgewxvqw000104ibgm5l8fzs",
|
||||
"namaLengkap": "Ni Wayan Supardiati",
|
||||
"gelarAkademik": "S.Pd",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
@@ -33,7 +33,7 @@
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440011",
|
||||
"id": "cmgewy1g9000204ib2n7hbx0i",
|
||||
"namaLengkap": "I Wayan Agus Juni Artha Saputra",
|
||||
"gelarAkademik": "S.T.",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
@@ -44,7 +44,7 @@
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440012",
|
||||
"id": "cmgewybah000304ibgqhn1gm2",
|
||||
"namaLengkap": "I Wayan Sueca",
|
||||
"gelarAkademik": "S.H.",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
@@ -55,7 +55,7 @@
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440017",
|
||||
"id": "cmgewygqz000404ib20sv8nvg",
|
||||
"namaLengkap": "Si Gede Ketut Astawa",
|
||||
"gelarAkademik": "S.T.",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
@@ -66,7 +66,7 @@
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440018",
|
||||
"id": "cmgewyos1000504ibcu8o2gyk",
|
||||
"namaLengkap": "I Kadek Arya Minarta",
|
||||
"gelarAkademik": "S.T.",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
@@ -77,7 +77,7 @@
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440021",
|
||||
"id": "cmgewyxk7000604ib8djs3i6c",
|
||||
"namaLengkap": "I Gede Andika Pradnya Diputra",
|
||||
"gelarAkademik": "S.E.",
|
||||
"tanggalMasuk": "2020-02-01T00:00:00.000Z",
|
||||
|
||||
@@ -1,29 +1,23 @@
|
||||
[
|
||||
{
|
||||
"id": "1",
|
||||
"id": "role-1",
|
||||
"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"
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"id": "role-2",
|
||||
"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"
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"id": "role-3",
|
||||
"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"
|
||||
"isActive": true
|
||||
}
|
||||
]
|
||||
@@ -1,32 +1,23 @@
|
||||
[
|
||||
{
|
||||
"id": "1",
|
||||
"nama": "Admin Desa",
|
||||
"nomor": "089647037426",
|
||||
"roleId": "1",
|
||||
"isActive": true,
|
||||
"lastLogin": "2025-08-31T10:00:00.000Z",
|
||||
"createdAt": "2025-09-01T00:00:00.000Z",
|
||||
"updatedAt": "2025-09-01T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"nama": "Admin Kesehatan",
|
||||
"nomor": "082339004198",
|
||||
"roleId": "2",
|
||||
"isActive": true,
|
||||
"lastLogin": null,
|
||||
"createdAt": "2025-09-01T00:00:00.000Z",
|
||||
"updatedAt": "2025-09-01T00:00:00.000Z"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"nama": "Admin Sekolah",
|
||||
"nomor": "085237157222",
|
||||
"roleId": "3",
|
||||
"isActive": true,
|
||||
"lastLogin": null,
|
||||
"createdAt": "2025-09-01T00:00:00.000Z",
|
||||
"updatedAt": "2025-09-01T00:00:00.000Z"
|
||||
}
|
||||
]
|
||||
{
|
||||
"id": "user-1",
|
||||
"nama": "Admin Desa",
|
||||
"nomor": "089647037426",
|
||||
"roleId": "role-1",
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "user-2",
|
||||
"nama": "Admin Kesehatan",
|
||||
"nomor": "082339004198",
|
||||
"roleId": "role-2",
|
||||
"isActive": true
|
||||
},
|
||||
{
|
||||
"id": "user-3",
|
||||
"nama": "Admin Sekolah",
|
||||
"nomor": "085237157222",
|
||||
"roleId": "role-3",
|
||||
"isActive": true
|
||||
}
|
||||
]
|
||||
|
||||
30
prisma/safeseedUnique.ts
Normal file
30
prisma/safeseedUnique.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
// helpers/safeSeedUnique.ts
|
||||
import { PrismaClient } from "@prisma/client";
|
||||
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
/**
|
||||
* Helper generic buat seed dengan upsert aman
|
||||
*/
|
||||
export async function safeSeedUnique<T extends keyof PrismaClient>(
|
||||
model: T,
|
||||
where: Record<string, any>,
|
||||
data: Record<string, any>
|
||||
) {
|
||||
const m = prisma[model];
|
||||
|
||||
if (!m) throw new Error(`Model ${String(model)} tidak ditemukan di PrismaClient`);
|
||||
|
||||
try {
|
||||
// @ts-expect-error upsert dynamic
|
||||
await m.upsert({
|
||||
where,
|
||||
update: data,
|
||||
create: { ...where, ...data },
|
||||
});
|
||||
console.log(`✅ Seeded ${String(model)} -> ${JSON.stringify(where)}`);
|
||||
} catch (err) {
|
||||
console.error(`❌ Gagal seed ${String(model)} -> ${JSON.stringify(where)}`, err);
|
||||
}
|
||||
}
|
||||
@@ -81,7 +81,7 @@ model FileStorage {
|
||||
PelayananSuratKeteranganImage PelayananSuratKeterangan[] @relation("PelayananSuratKeteranganImage")
|
||||
PelayananSuratKeteranganImage2 PelayananSuratKeterangan[] @relation("PelayananSuratKeteranganImage2")
|
||||
PasarDesa PasarDesa[]
|
||||
Pegawai Pegawai[]
|
||||
PegawaiBumDes PegawaiBumDes[]
|
||||
DesaDigital DesaDigital[]
|
||||
InfoTekno InfoTekno[]
|
||||
PengaduanMasyarakat PengaduanMasyarakat[]
|
||||
@@ -101,6 +101,7 @@ model FileStorage {
|
||||
MitraKolaborasi MitraKolaborasi[]
|
||||
|
||||
ArtikelKesehatan ArtikelKesehatan[]
|
||||
StrukturBumDes StrukturBumDes[]
|
||||
}
|
||||
|
||||
//========================================= MENU LANDING PAGE ========================================= //
|
||||
@@ -286,49 +287,51 @@ model StrukturPPID {
|
||||
}
|
||||
|
||||
model PosisiOrganisasiPPID {
|
||||
id String @id @default(cuid())
|
||||
nama String @db.VarChar(100)
|
||||
deskripsi String? @db.Text
|
||||
hierarki Int
|
||||
pegawai PegawaiPPID[]
|
||||
strukturOrganisasi StrukturPPID[] // Relasi balik
|
||||
parentId String?
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
parent PosisiOrganisasiPPID? @relation("Parent", fields: [parentId], references: [id])
|
||||
children PosisiOrganisasiPPID[] @relation("Parent")
|
||||
id String @id @default(cuid())
|
||||
nama String @db.VarChar(100)
|
||||
deskripsi String? @db.Text
|
||||
hierarki Int
|
||||
pegawai PegawaiPPID[]
|
||||
strukturOrganisasi StrukturPPID[] // Relasi balik
|
||||
parentId String?
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
parent PosisiOrganisasiPPID? @relation("Parent", fields: [parentId], references: [id])
|
||||
children PosisiOrganisasiPPID[] @relation("Parent")
|
||||
StrukturOrganisasiPPID StrukturOrganisasiPPID[]
|
||||
}
|
||||
|
||||
model PegawaiPPID {
|
||||
id String @id @default(cuid())
|
||||
namaLengkap String @db.VarChar(255)
|
||||
gelarAkademik String? @db.VarChar(100)
|
||||
image FileStorage? @relation(fields: [imageId], references: [id])
|
||||
imageId String?
|
||||
tanggalMasuk DateTime? @db.Date
|
||||
email String? @unique @db.VarChar(255)
|
||||
telepon String? @db.VarChar(20)
|
||||
alamat String? @db.Text
|
||||
posisiId String @db.VarChar(50)
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
posisi PosisiOrganisasiPPID @relation(fields: [posisiId], references: [id])
|
||||
strukturOrganisasi StrukturPPID[] // Relasi balik
|
||||
id String @id @default(cuid())
|
||||
namaLengkap String @db.VarChar(255)
|
||||
gelarAkademik String? @db.VarChar(100)
|
||||
image FileStorage? @relation(fields: [imageId], references: [id])
|
||||
imageId String?
|
||||
tanggalMasuk DateTime? @db.Date
|
||||
email String? @unique @db.VarChar(255)
|
||||
telepon String? @db.VarChar(20)
|
||||
alamat String? @db.Text
|
||||
posisiId String @db.VarChar(50)
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
posisi PosisiOrganisasiPPID @relation(fields: [posisiId], references: [id])
|
||||
strukturOrganisasi StrukturPPID[] // Relasi balik
|
||||
StrukturOrganisasiPPID StrukturOrganisasiPPID[]
|
||||
}
|
||||
|
||||
model StrukturOrganisasiPPID {
|
||||
id String @id @default(uuid())
|
||||
posisiOrganisasiId String @db.VarChar(50)
|
||||
pegawaiId String @db.Uuid
|
||||
hubunganOrganisasiId String @db.Uuid
|
||||
posisiOrganisasi PosisiOrganisasi @relation(fields: [posisiOrganisasiId], references: [id])
|
||||
pegawai Pegawai @relation(fields: [pegawaiId], references: [id])
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
id String @id @default(uuid())
|
||||
posisiOrganisasiId String @db.VarChar(50)
|
||||
pegawaiId String
|
||||
hubunganOrganisasiId String
|
||||
posisiOrganisasi PosisiOrganisasiPPID @relation(fields: [posisiOrganisasiId], references: [id])
|
||||
pegawai PegawaiPPID @relation(fields: [pegawaiId], references: [id])
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
isActive Boolean @default(true)
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
// ========================================= VISI MISI PPID ========================================= //
|
||||
@@ -672,17 +675,18 @@ model GalleryVideo {
|
||||
|
||||
// ========================================= LAYANAN DESA ========================================= //
|
||||
model PelayananSuratKeterangan {
|
||||
id String @id @default(cuid())
|
||||
name String
|
||||
deskripsi String @db.Text
|
||||
image FileStorage? @relation("PelayananSuratKeteranganImage", fields: [imageId], references: [id])
|
||||
imageId String?
|
||||
image2 FileStorage? @relation("PelayananSuratKeteranganImage2", fields: [image2Id], references: [id])
|
||||
image2Id String?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
id String @id @default(cuid())
|
||||
name String
|
||||
deskripsi String @db.Text
|
||||
image FileStorage? @relation("PelayananSuratKeteranganImage", fields: [imageId], references: [id])
|
||||
imageId String?
|
||||
image2 FileStorage? @relation("PelayananSuratKeteranganImage2", fields: [image2Id], references: [id])
|
||||
image2Id String?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
AjukanPermohonan AjukanPermohonan[]
|
||||
}
|
||||
|
||||
model PelayananTelunjukSaktiDesa {
|
||||
@@ -717,6 +721,20 @@ model PelayananPendudukNonPermanen {
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
model AjukanPermohonan {
|
||||
id String @id @default(cuid())
|
||||
nama String
|
||||
nik String
|
||||
alamat String
|
||||
nomorKk String
|
||||
kategori PelayananSuratKeterangan @relation(fields: [kategoriId], references: [id])
|
||||
kategoriId String
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
// ========================================= PENGHARGAAN ========================================= //
|
||||
model Penghargaan {
|
||||
id String @id @default(cuid())
|
||||
@@ -835,8 +853,8 @@ model JadwalKegiatan {
|
||||
syaratKetentuanJadwalKegiatanId String
|
||||
dokumenjadwalkegiatan DokumenJadwalKegiatan @relation(fields: [dokumenJadwalKegiatanId], references: [id])
|
||||
dokumenJadwalKegiatanId String
|
||||
pendaftaranjadwalkegiatan PendaftaranJadwalKegiatan @relation(fields: [pendaftaranJadwalKegiatanId], references: [id])
|
||||
pendaftaranJadwalKegiatanId String
|
||||
pendaftaranjadwalkegiatan PendaftaranJadwalKegiatan? @relation(fields: [pendaftaranJadwalKegiatanId], references: [id])
|
||||
pendaftaranJadwalKegiatanId String?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
@@ -1152,6 +1170,7 @@ model KontakDarurat {
|
||||
deskripsi String
|
||||
image FileStorage @relation(fields: [imageId], references: [id])
|
||||
imageId String
|
||||
whatsapp String
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
@@ -1254,15 +1273,15 @@ model KontakDaruratToItem {
|
||||
|
||||
// ========================================= PENCEGAHAN KRIMINALITAS ========================================= //
|
||||
model PencegahanKriminalitas {
|
||||
id String @id @default(cuid())
|
||||
judul String
|
||||
deskripsi String
|
||||
deskripsiSingkat String
|
||||
linkVideo String
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
id String @id @default(cuid())
|
||||
judul String
|
||||
deskripsi String
|
||||
deskripsiSingkat String
|
||||
linkVideo String
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
// ========================================= LAPORAN PUBLIK ========================================= //
|
||||
@@ -1325,6 +1344,7 @@ model PasarDesa {
|
||||
harga Int
|
||||
rating Float
|
||||
alamatUsaha String
|
||||
kontak String
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
@@ -1367,6 +1387,7 @@ model LowonganPekerjaan {
|
||||
gaji String
|
||||
deskripsi String
|
||||
kualifikasi String
|
||||
notelp String
|
||||
tanggalPosting DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
@@ -1376,79 +1397,67 @@ model LowonganPekerjaan {
|
||||
|
||||
// ========================================= STRUKTUR ORGANISASI ========================================= //
|
||||
|
||||
model PosisiOrganisasi {
|
||||
id String @id @default(uuid()) @db.VarChar(50)
|
||||
nama String @db.VarChar(100)
|
||||
deskripsi String? @db.Text
|
||||
hierarki Int
|
||||
|
||||
pegawai Pegawai[]
|
||||
strukturOrganisasi StrukturOrganisasi[] // Relasi balik
|
||||
StrukturOrganisasiPPID StrukturOrganisasiPPID[]
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
|
||||
@@map("posisi_organisasi")
|
||||
model StrukturBumDes {
|
||||
id String @id @default(cuid())
|
||||
name String @db.Text
|
||||
image FileStorage? @relation(fields: [imageId], references: [id])
|
||||
imageId String?
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
PosisiOrganisasiBumDes PosisiOrganisasiBumDes? @relation(fields: [posisiOrganisasiBumDesId], references: [id])
|
||||
posisiOrganisasiBumDesId String?
|
||||
PegawaiBumDes PegawaiBumDes? @relation(fields: [pegawaiBumDesId], references: [id])
|
||||
pegawaiBumDesId String?
|
||||
}
|
||||
|
||||
model Pegawai {
|
||||
id String @id @default(uuid()) @db.Uuid
|
||||
namaLengkap String @db.VarChar(255)
|
||||
gelarAkademik String? @db.VarChar(100)
|
||||
image FileStorage? @relation(fields: [imageId], references: [id])
|
||||
imageId String?
|
||||
tanggalMasuk DateTime? @db.Date
|
||||
email String? @unique @db.VarChar(255)
|
||||
telepon String? @db.VarChar(20)
|
||||
alamat String? @db.Text
|
||||
posisiId String @db.VarChar(50)
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
|
||||
posisi PosisiOrganisasi @relation(fields: [posisiId], references: [id])
|
||||
|
||||
sebagaiAtasan HubunganOrganisasi[] @relation("AtasanToBawahan")
|
||||
sebagaiBawahan HubunganOrganisasi[] @relation("BawahanToAtasan")
|
||||
|
||||
strukturOrganisasi StrukturOrganisasi[] // Relasi balik
|
||||
StrukturOrganisasiPPID StrukturOrganisasiPPID[]
|
||||
|
||||
@@map("pegawai")
|
||||
model PosisiOrganisasiBumDes {
|
||||
id String @id @default(cuid())
|
||||
nama String @db.VarChar(100)
|
||||
deskripsi String? @db.Text
|
||||
hierarki Int
|
||||
pegawai PegawaiBumDes[]
|
||||
strukturOrganisasi StrukturBumDes[] // Relasi balik
|
||||
parentId String?
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
parent PosisiOrganisasiBumDes? @relation("Parent", fields: [parentId], references: [id])
|
||||
children PosisiOrganisasiBumDes[] @relation("Parent")
|
||||
StrukturOrganisasiBumDes StrukturOrganisasiBumDes[]
|
||||
}
|
||||
|
||||
model HubunganOrganisasi {
|
||||
id String @id @default(uuid()) @db.Uuid
|
||||
atasanId String @db.Uuid
|
||||
bawahanId String @db.Uuid
|
||||
tipe String? @db.VarChar(50)
|
||||
|
||||
atasan Pegawai @relation("AtasanToBawahan", fields: [atasanId], references: [id])
|
||||
bawahan Pegawai @relation("BawahanToAtasan", fields: [bawahanId], references: [id])
|
||||
|
||||
strukturOrganisasi StrukturOrganisasi[] // Relasi balik
|
||||
|
||||
@@unique([atasanId, bawahanId])
|
||||
@@map("hubungan_organisasi")
|
||||
model PegawaiBumDes {
|
||||
id String @id @default(cuid())
|
||||
namaLengkap String @db.VarChar(255)
|
||||
gelarAkademik String? @db.VarChar(100)
|
||||
image FileStorage? @relation(fields: [imageId], references: [id])
|
||||
imageId String?
|
||||
tanggalMasuk DateTime? @db.Date
|
||||
email String? @unique @db.VarChar(255)
|
||||
telepon String? @db.VarChar(20)
|
||||
alamat String? @db.Text
|
||||
posisiId String @db.VarChar(50)
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
posisi PosisiOrganisasiBumDes @relation(fields: [posisiId], references: [id])
|
||||
strukturOrganisasi StrukturBumDes[] // Relasi balik
|
||||
StrukturOrganisasiBumDes StrukturOrganisasiBumDes[]
|
||||
}
|
||||
|
||||
model StrukturOrganisasi {
|
||||
id String @id @default(uuid())
|
||||
posisiOrganisasiId String @db.VarChar(50)
|
||||
pegawaiId String @db.Uuid
|
||||
hubunganOrganisasiId String @db.Uuid
|
||||
|
||||
posisiOrganisasi PosisiOrganisasi @relation(fields: [posisiOrganisasiId], references: [id])
|
||||
pegawai Pegawai @relation(fields: [pegawaiId], references: [id])
|
||||
hubunganOrganisasi HubunganOrganisasi @relation(fields: [hubunganOrganisasiId], references: [id])
|
||||
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
isActive Boolean @default(true)
|
||||
|
||||
@@map("struktur_organisasi")
|
||||
model StrukturOrganisasiBumDes {
|
||||
id String @id @default(uuid())
|
||||
posisiOrganisasiId String @db.VarChar(50)
|
||||
pegawaiId String
|
||||
hubunganOrganisasiId String
|
||||
posisiOrganisasi PosisiOrganisasiBumDes @relation(fields: [posisiOrganisasiId], references: [id])
|
||||
pegawai PegawaiBumDes @relation(fields: [pegawaiId], references: [id])
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime?
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
// ========================================= PROGRAM KEMISKINAN ========================================= //
|
||||
|
||||
115
prisma/seed.ts
115
prisma/seed.ts
@@ -31,9 +31,8 @@ import sejarahDesa from "./data/desa/profile/sejarah_desa.json";
|
||||
import visiMisiDesa from "./data/desa/profile/visi_misi_desa.json";
|
||||
import detailDataPengangguran from "./data/ekonomi/jumlah-pengangguran/detail-data-pengangguran.json";
|
||||
import kategoriProduk from "./data/ekonomi/pasar-desa/kategori-produk.json";
|
||||
import hubunganOrganisasi from "./data/ekonomi/struktur-organisasi/hubungan-organisasi.json";
|
||||
import pegawai from "./data/ekonomi/struktur-organisasi/pegawai.json";
|
||||
import posisiOrganisasi from "./data/ekonomi/struktur-organisasi/posisi-organisasi.json";
|
||||
import pegawai from "./data/ekonomi/struktur-organisasi/pegawai-bumdes.json";
|
||||
import posisiOrganisasi from "./data/ekonomi/struktur-organisasi/posisi-organisasi-bumdes.json";
|
||||
import kategoriBerita from "./data/kategori-berita.json";
|
||||
import contohEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/contoh-kegiatan-di-desa-darmasaba.json";
|
||||
import materiEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan.json";
|
||||
@@ -56,6 +55,8 @@ import tujuanProgram from "./data/pendidikan/program-pendidikan-anak/tujuan-prog
|
||||
import roles from "./data/user/roles.json";
|
||||
import users from "./data/user/users.json";
|
||||
import fileStorage from "./data/file-storage.json";
|
||||
import seedAssets from "./seed_assets";
|
||||
import { safeSeedUnique } from "./safeseedUnique";
|
||||
|
||||
(async () => {
|
||||
// =========== USER & ROLE ===========
|
||||
@@ -63,23 +64,14 @@ import fileStorage from "./data/file-storage.json";
|
||||
// =========== ROLES ===========
|
||||
console.log("🔄 Seeding roles...");
|
||||
for (const r of roles) {
|
||||
await prisma.role.upsert({
|
||||
where: { id: r.id },
|
||||
update: {
|
||||
name: r.name,
|
||||
description: r.description,
|
||||
permissions: r.permissions,
|
||||
isActive: r.isActive,
|
||||
},
|
||||
create: {
|
||||
id: r.id,
|
||||
name: r.name,
|
||||
description: r.description,
|
||||
permissions: r.permissions,
|
||||
isActive: r.isActive,
|
||||
},
|
||||
await safeSeedUnique("role", { id: r.id }, {
|
||||
name: r.name,
|
||||
description: r.description,
|
||||
permissions: r.permissions,
|
||||
isActive: r.isActive,
|
||||
});
|
||||
}
|
||||
|
||||
console.log("✅ Roles seeded");
|
||||
|
||||
// =========== USERS ===========
|
||||
@@ -95,22 +87,12 @@ import fileStorage from "./data/file-storage.json";
|
||||
continue;
|
||||
}
|
||||
|
||||
await prisma.user.upsert({
|
||||
where: { id: u.id },
|
||||
update: {
|
||||
username: u.nama,
|
||||
nomor: u.nomor,
|
||||
roleId: u.roleId,
|
||||
await safeSeedUnique("user", { id: u.id }, {
|
||||
username: u.nama,
|
||||
nomor: u.nomor,
|
||||
roleId: u.roleId,
|
||||
isActive: u.isActive,
|
||||
},
|
||||
create: {
|
||||
id: u.id,
|
||||
username: u.nama,
|
||||
nomor: u.nomor,
|
||||
roleId: u.roleId,
|
||||
isActive: u.isActive,
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
console.log("✅ Users seeded");
|
||||
|
||||
@@ -364,6 +346,7 @@ import fileStorage from "./data/file-storage.json";
|
||||
jumlah: l.jumlah,
|
||||
},
|
||||
create: {
|
||||
id: l.id,
|
||||
name: l.name,
|
||||
jumlah: l.jumlah,
|
||||
},
|
||||
@@ -823,28 +806,34 @@ import fileStorage from "./data/file-storage.json";
|
||||
}
|
||||
console.log("kategori produk success ...");
|
||||
|
||||
for (const p of posisiOrganisasi) {
|
||||
await prisma.posisiOrganisasi.upsert({
|
||||
where: {
|
||||
id: p.id,
|
||||
},
|
||||
update: {
|
||||
nama: p.nama,
|
||||
deskripsi: p.deskripsi,
|
||||
hierarki: p.hierarki,
|
||||
},
|
||||
create: {
|
||||
id: p.id,
|
||||
nama: p.nama,
|
||||
deskripsi: p.deskripsi,
|
||||
hierarki: p.hierarki,
|
||||
},
|
||||
const flattenedPosisiBumdes = posisiOrganisasi.flat();
|
||||
|
||||
// ✅ Urutkan berdasarkan hierarki
|
||||
const sortedPosisiBumdes = flattenedPosisiBumdes.sort((a, b) => a.hierarki - b.hierarki);
|
||||
|
||||
for (const p of sortedPosisiBumdes) {
|
||||
console.log(`Seeding: ${p.nama} (id: ${p.id}, parent: ${p.parentId})`);
|
||||
|
||||
if (p.parentId) {
|
||||
const parentExists = flattenedPosisi.some((pos) => pos.id === p.parentId);
|
||||
if (!parentExists) {
|
||||
console.warn(
|
||||
`⚠️ Parent tidak ditemukan: ${p.parentId} untuk ${p.nama}`
|
||||
);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
await prisma.posisiOrganisasiBumDes.upsert({
|
||||
where: { id: p.id },
|
||||
update: p,
|
||||
create: p,
|
||||
});
|
||||
}
|
||||
console.log("posisi organisasi success ...");
|
||||
console.log("posisi organisasi berhasil");
|
||||
|
||||
for (const p of pegawai) {
|
||||
await prisma.pegawai.upsert({
|
||||
await prisma.pegawaiBumDes.upsert({
|
||||
where: {
|
||||
id: p.id,
|
||||
},
|
||||
@@ -873,26 +862,6 @@ import fileStorage from "./data/file-storage.json";
|
||||
}
|
||||
console.log("pegawai success ...");
|
||||
|
||||
for (const p of hubunganOrganisasi) {
|
||||
await prisma.hubunganOrganisasi.upsert({
|
||||
where: {
|
||||
atasanId_bawahanId: {
|
||||
atasanId: p.atasanId,
|
||||
bawahanId: p.bawahanId,
|
||||
},
|
||||
},
|
||||
update: {
|
||||
tipe: p.tipe,
|
||||
},
|
||||
create: {
|
||||
atasanId: p.atasanId,
|
||||
bawahanId: p.bawahanId,
|
||||
tipe: p.tipe,
|
||||
},
|
||||
});
|
||||
}
|
||||
console.log("hubungan organisasi success ...");
|
||||
|
||||
for (const d of detailDataPengangguran) {
|
||||
await prisma.detailDataPengangguran.upsert({
|
||||
where: {
|
||||
@@ -1169,6 +1138,10 @@ import fileStorage from "./data/file-storage.json";
|
||||
console.log(
|
||||
"✅ fasilitas bimbingan belajar desa seeded (editable later via UI)"
|
||||
);
|
||||
|
||||
// seed assets
|
||||
await seedAssets();
|
||||
|
||||
})()
|
||||
.then(() => prisma.$disconnect())
|
||||
.catch((e) => {
|
||||
|
||||
118
prisma/seed_assets.ts
Normal file
118
prisma/seed_assets.ts
Normal file
@@ -0,0 +1,118 @@
|
||||
// prisma/seedAssets.ts
|
||||
import fs from "fs/promises";
|
||||
import path from "path";
|
||||
import sharp from "sharp";
|
||||
import fetch from "node-fetch";
|
||||
import AdmZip from "adm-zip";
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
const UPLOADS_DIR =
|
||||
process.env.WIBU_UPLOAD_DIR || path.join(process.cwd(), "uploads");
|
||||
|
||||
// --- Helper: deteksi kategori file ---
|
||||
function detectCategory(filename: string): "image" | "document" | "other" {
|
||||
const ext = path.extname(filename).toLowerCase();
|
||||
if ([".jpg", ".jpeg", ".png", ".webp"].includes(ext)) return "image";
|
||||
if ([".pdf", ".doc", ".docx"].includes(ext)) return "document";
|
||||
return "other";
|
||||
}
|
||||
|
||||
// --- Helper: recursive walk dir ---
|
||||
async function walkDir(dir: string, fileList: string[] = []): Promise<string[]> {
|
||||
const entries = await fs.readdir(dir, { withFileTypes: true });
|
||||
|
||||
for (const entry of entries) {
|
||||
const fullPath = path.join(dir, entry.name);
|
||||
|
||||
if (entry.isDirectory()) {
|
||||
if (entry.name === "__MACOSX") continue; // skip folder sampah
|
||||
await walkDir(fullPath, fileList);
|
||||
} else {
|
||||
if (entry.name.startsWith(".") || entry.name === ".DS_Store") continue; // skip file sampah
|
||||
fileList.push(fullPath);
|
||||
}
|
||||
}
|
||||
|
||||
return fileList;
|
||||
}
|
||||
|
||||
export default async function seedAssets() {
|
||||
console.log("🚀 Seeding assets...");
|
||||
|
||||
// 1. Download zip
|
||||
const url =
|
||||
"https://cld-dkr-makuro-seafile.wibudev.com/f/ffd5a548a04f47939474/?dl=1";
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(`Gagal download assets: ${res.statusText}`);
|
||||
const buffer = Buffer.from(await res.arrayBuffer());
|
||||
|
||||
// 2. Extract zip ke folder tmp
|
||||
const extractDir = path.join(process.cwd(), "tmp_assets");
|
||||
await fs.rm(extractDir, { recursive: true, force: true });
|
||||
await fs.mkdir(extractDir, { recursive: true });
|
||||
|
||||
const zip = new AdmZip(buffer);
|
||||
zip.extractAllTo(extractDir, true);
|
||||
|
||||
// 3. Cari semua file valid (recursive)
|
||||
const files = await walkDir(extractDir);
|
||||
|
||||
// 4. Loop tiap file & simpan
|
||||
for (const filePath of files) {
|
||||
const entryName = path.basename(filePath);
|
||||
const category = detectCategory(entryName);
|
||||
|
||||
let finalName = entryName;
|
||||
let mimeType = "application/octet-stream";
|
||||
let targetPath = "";
|
||||
|
||||
if (category === "image") {
|
||||
const fileBaseName = path.parse(entryName).name;
|
||||
finalName = `${fileBaseName}.webp`;
|
||||
targetPath = path.join(UPLOADS_DIR, "images", finalName);
|
||||
await fs.mkdir(path.dirname(targetPath), { recursive: true });
|
||||
await sharp(filePath).webp({ quality: 80 }).toFile(targetPath);
|
||||
mimeType = "image/webp";
|
||||
} else if (category === "document") {
|
||||
targetPath = path.join(UPLOADS_DIR, "documents", entryName);
|
||||
await fs.mkdir(path.dirname(targetPath), { recursive: true });
|
||||
await fs.copyFile(filePath, targetPath);
|
||||
mimeType = "application/pdf";
|
||||
} else {
|
||||
targetPath = path.join(UPLOADS_DIR, "other", entryName);
|
||||
await fs.mkdir(path.dirname(targetPath), { recursive: true });
|
||||
await fs.copyFile(filePath, targetPath);
|
||||
}
|
||||
|
||||
// 5. Simpan ke DB
|
||||
await prisma.fileStorage.create({
|
||||
data: {
|
||||
name: finalName,
|
||||
realName: entryName,
|
||||
path: targetPath,
|
||||
mimeType,
|
||||
link: `/uploads/${category}/${finalName}`,
|
||||
category,
|
||||
},
|
||||
});
|
||||
|
||||
console.log(`📂 saved: ${category}/${finalName}`);
|
||||
}
|
||||
|
||||
// 6. Cleanup
|
||||
await fs.rm(extractDir, { recursive: true, force: true });
|
||||
|
||||
console.log("✅ Selesai seed assets!");
|
||||
}
|
||||
|
||||
// --- Auto run kalau dipanggil langsung ---
|
||||
if (import.meta.main) {
|
||||
seedAssets()
|
||||
.catch((err) => {
|
||||
console.error("❌ Error seeding assets:", err);
|
||||
process.exit(1);
|
||||
})
|
||||
.finally(async () => {
|
||||
await prisma.$disconnect();
|
||||
});
|
||||
}
|
||||
BIN
public/beasiswa-siswa.png
Normal file
BIN
public/beasiswa-siswa.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 446 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 47 KiB |
@@ -71,6 +71,22 @@ const pelayananPendudukNonPermanenForm = {
|
||||
deskripsi: "",
|
||||
};
|
||||
|
||||
const templateAjukanForm = z.object({
|
||||
nama: z.string().min(1).max(5000),
|
||||
nik: z.string().min(1).max(5000),
|
||||
alamat: z.string().min(1).max(5000),
|
||||
nomorKk: z.string().min(1).max(5000),
|
||||
kategoriId: z.string().min(1).max(5000),
|
||||
});
|
||||
|
||||
const defaultAjukanForm = {
|
||||
nama: "",
|
||||
nik: "",
|
||||
alamat: "",
|
||||
nomorKk: "",
|
||||
kategoriId: "",
|
||||
};
|
||||
|
||||
const suratKeterangan = proxy({
|
||||
create: {
|
||||
form: { ...suratKeteranganForm },
|
||||
@@ -146,6 +162,30 @@ const suratKeterangan = proxy({
|
||||
}
|
||||
},
|
||||
},
|
||||
findManyAll: {
|
||||
data: null as Prisma.PelayananSuratKeteranganGetPayload<{
|
||||
omit: { isActive: true };
|
||||
}>[] | null,
|
||||
loading: false,
|
||||
load: async () => {
|
||||
suratKeterangan.findManyAll.loading = true;
|
||||
try {
|
||||
const res = await ApiFetch.api.desa.layanan.pelayanansuratketerangan["findManyAll"].get();
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
suratKeterangan.findManyAll.data = res.data.data || [];
|
||||
} else {
|
||||
suratKeterangan.findManyAll.data = [];
|
||||
console.error("Failed to load surat keterangan all:", res.data?.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading surat keterangan all:", error);
|
||||
suratKeterangan.findManyAll.data = [];
|
||||
} finally {
|
||||
suratKeterangan.findManyAll.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
findUnique: {
|
||||
data: null as Prisma.PelayananSuratKeteranganGetPayload<{
|
||||
include: {
|
||||
@@ -541,33 +581,24 @@ const pelayananPerizinanBerusaha = proxy({
|
||||
findById: {
|
||||
data: null as pelayananPerizinanBerusahaForm | null,
|
||||
loading: false,
|
||||
initialize() {
|
||||
pelayananPerizinanBerusaha.findById.data = {
|
||||
id: "",
|
||||
name: "",
|
||||
deskripsi: "",
|
||||
link: "",
|
||||
} as pelayananPerizinanBerusahaForm;
|
||||
},
|
||||
async load(id: string) {
|
||||
try {
|
||||
pelayananPerizinanBerusaha.findById.loading = true;
|
||||
const res = await fetch(
|
||||
`/api/desa/layanan/pelayananperizinanberusaha/${id}`
|
||||
);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
pelayananPerizinanBerusaha.findById.data = data.data ?? null;
|
||||
} else {
|
||||
console.error(
|
||||
"Failed to fetch pelayanan perizinan berusaha:",
|
||||
res.statusText
|
||||
);
|
||||
pelayananPerizinanBerusaha.findById.data = null;
|
||||
this.loading = true;
|
||||
const response = await fetch(`/api/desa/layanan/pelayananperizinanberusaha/${id}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const result = await response.json();
|
||||
if (result?.success) {
|
||||
this.data = result.data; // Make sure this matches your API response structure
|
||||
}
|
||||
return result?.data || null;
|
||||
} catch (error) {
|
||||
console.error("Error fetching pelayanan perizinan berusaha:", error);
|
||||
pelayananPerizinanBerusaha.findById.data = null;
|
||||
console.error('Error loading data:', error);
|
||||
toast.error('Gagal memuat data');
|
||||
return null;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -769,11 +800,250 @@ const pelayananPendudukNonPermanen = proxy({
|
||||
},
|
||||
});
|
||||
|
||||
const ajukanPermohonan = proxy({
|
||||
create: {
|
||||
form: { ...defaultAjukanForm },
|
||||
loading: false,
|
||||
async create() {
|
||||
const cek = templateAjukanForm.safeParse(
|
||||
ajukanPermohonan.create.form
|
||||
);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues
|
||||
.map((v) => `${v.path.join(".")}`)
|
||||
.join("\n")}] required`;
|
||||
return toast.error(err);
|
||||
}
|
||||
try {
|
||||
ajukanPermohonan.create.loading = true;
|
||||
const res = await ApiFetch.api.desa.ajukanpermohonan[
|
||||
"create"
|
||||
].post(ajukanPermohonan.create.form);
|
||||
if (res.status === 200) {
|
||||
ajukanPermohonan.findMany.load();
|
||||
return toast.success("Ajukan permohonan berhasil disimpan!");
|
||||
}
|
||||
return toast.error("Gagal menyimpan ajukan permohonan");
|
||||
} catch (error) {
|
||||
console.log((error as Error).message);
|
||||
} finally {
|
||||
ajukanPermohonan.create.loading = false;
|
||||
}
|
||||
},
|
||||
resetForm() {
|
||||
ajukanPermohonan.create.form = { ...defaultAjukanForm };
|
||||
},
|
||||
},
|
||||
findMany: {
|
||||
data: null as Prisma.AjukanPermohonanGetPayload<{
|
||||
include: {
|
||||
kategori: true;
|
||||
};
|
||||
}>[] | null,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
total: 0,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "") => {
|
||||
// Change to arrow function
|
||||
ajukanPermohonan.findMany.loading = true; // Use the full path to access the property
|
||||
ajukanPermohonan.findMany.page = page;
|
||||
ajukanPermohonan.findMany.search = search;
|
||||
try {
|
||||
const query: any = { page, limit };
|
||||
if (search) query.search = search;
|
||||
const res = await ApiFetch.api.desa.ajukanpermohonan[
|
||||
"findMany"
|
||||
].get({
|
||||
query,
|
||||
});
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
ajukanPermohonan.findMany.data = res.data.data || [];
|
||||
ajukanPermohonan.findMany.total = res.data.total || 0;
|
||||
ajukanPermohonan.findMany.totalPages = res.data.totalPages || 1;
|
||||
} else {
|
||||
console.error("Failed to load ajukan permohonan:", res.data?.message);
|
||||
ajukanPermohonan.findMany.data = [];
|
||||
ajukanPermohonan.findMany.total = 0;
|
||||
ajukanPermohonan.findMany.totalPages = 1;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading ajukan permohonan:", error);
|
||||
ajukanPermohonan.findMany.data = [];
|
||||
ajukanPermohonan.findMany.total = 0;
|
||||
ajukanPermohonan.findMany.totalPages = 1;
|
||||
} finally {
|
||||
ajukanPermohonan.findMany.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
findUnique: {
|
||||
data: null as Prisma.AjukanPermohonanGetPayload<{
|
||||
include: {
|
||||
kategori: true;
|
||||
}
|
||||
}> | null,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/desa/ajukanpermohonan/${id}`
|
||||
);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
ajukanPermohonan.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch ajukan permohonan:", res.statusText);
|
||||
ajukanPermohonan.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching ajukan permohonan:", error);
|
||||
ajukanPermohonan.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
try {
|
||||
ajukanPermohonan.delete.loading = true;
|
||||
const response = await fetch(
|
||||
`/api/desa/ajukanpermohonan/del/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
const result = await response.json();
|
||||
if (response.ok) {
|
||||
toast.success(result.message || "Ajukan permohonan berhasil dihapus");
|
||||
await ajukanPermohonan.findMany.load(); // refresh list
|
||||
} else {
|
||||
toast.error(result.message || "Gagal menghapus ajukan permohonan");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal delete:", error);
|
||||
toast.error("Terjadi kesalahan saat menghapus ajukan permohonan");
|
||||
} finally {
|
||||
ajukanPermohonan.delete.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
edit: {
|
||||
id: "",
|
||||
form: { ...defaultAjukanForm },
|
||||
loading: false,
|
||||
|
||||
async load(id: string) {
|
||||
if (!id) {
|
||||
toast.warn("ID tidak valid");
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/desa/ajukanpermohonan/${id}`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const result = await response.json();
|
||||
if (result?.success) {
|
||||
const data = result.data;
|
||||
this.id = data.id;
|
||||
this.form = {
|
||||
nama: data.nama,
|
||||
nik: data.nik,
|
||||
alamat: data.alamat,
|
||||
nomorKk: data.nomorKk,
|
||||
kategoriId: data.kategoriId,
|
||||
};
|
||||
return data;
|
||||
} else {
|
||||
throw new Error(result.message || "Gagal memuat data");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching ajukan permohonan:", error);
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : "Gagal memuat data"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
async update() {
|
||||
const cek = templateAjukanForm.safeParse(
|
||||
ajukanPermohonan.edit.form
|
||||
);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues
|
||||
.map((v) => `${v.path.join(".")}`)
|
||||
.join("\n")}] required`;
|
||||
return toast.error(err);
|
||||
}
|
||||
try {
|
||||
ajukanPermohonan.edit.loading = true;
|
||||
const response = await fetch(
|
||||
`/api/desa/ajukanpermohonan/${this.id}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
nama: this.form.nama,
|
||||
nik: this.form.nik,
|
||||
alamat: this.form.alamat,
|
||||
nomorKk: this.form.nomorKk,
|
||||
kategoriId: this.form.kategoriId,
|
||||
}),
|
||||
}
|
||||
);
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(
|
||||
errorData.message || `HTTP error! status: ${response.status}`
|
||||
);
|
||||
}
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
toast.success(result.message || "Ajukan permohonan berhasil diupdate");
|
||||
await ajukanPermohonan.findMany.load(); // refresh list
|
||||
return true;
|
||||
} else {
|
||||
throw new Error(
|
||||
result.message || "Gagal mengupdate ajukan permohonan"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating ajukan permohonan:", error);
|
||||
toast.error(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Terjadi kesalahan saat update ajukan permohonan"
|
||||
);
|
||||
return false;
|
||||
} finally {
|
||||
ajukanPermohonan.edit.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const stateLayananDesa = proxy({
|
||||
suratKeterangan,
|
||||
pelayananPerizinanBerusaha,
|
||||
pelayananTelunjukSaktiDesa,
|
||||
pelayananPendudukNonPermanen,
|
||||
ajukanPermohonan,
|
||||
});
|
||||
|
||||
export default stateLayananDesa;
|
||||
|
||||
@@ -13,6 +13,7 @@ const templateForm = z.object({
|
||||
gaji: z.string(),
|
||||
deskripsi: z.string(),
|
||||
kualifikasi: z.string(),
|
||||
notelp: z.string(),
|
||||
});
|
||||
|
||||
const defaultForm = {
|
||||
@@ -23,6 +24,7 @@ const defaultForm = {
|
||||
gaji: "",
|
||||
deskripsi: "",
|
||||
kualifikasi: "",
|
||||
notelp: "",
|
||||
};
|
||||
|
||||
const lowonganKerjaState = proxy({
|
||||
@@ -179,6 +181,7 @@ const lowonganKerjaState = proxy({
|
||||
gaji: data.gaji,
|
||||
deskripsi: data.deskripsi,
|
||||
kualifikasi: data.kualifikasi,
|
||||
notelp: data.notelp,
|
||||
};
|
||||
return data;
|
||||
} else {
|
||||
@@ -218,6 +221,7 @@ const lowonganKerjaState = proxy({
|
||||
gaji: this.form.gaji,
|
||||
deskripsi: this.form.deskripsi,
|
||||
kualifikasi: this.form.kualifikasi,
|
||||
notelp: this.form.notelp,
|
||||
}),
|
||||
});
|
||||
if (!response.ok) {
|
||||
|
||||
@@ -12,6 +12,7 @@ const templatePasarDesaForm = z.object({
|
||||
imageId: z.string().min(1, "Gambar wajib dipilih"),
|
||||
rating: z.number().min(1, "Rating minimal 1"),
|
||||
kategoriId: z.array(z.string()).min(1, "Minimal pilih satu kategori"),
|
||||
kontak: z.string().min(1, "Kontak wajib diisi"),
|
||||
});
|
||||
|
||||
const defaultPasarDesaForm = {
|
||||
@@ -21,6 +22,7 @@ const defaultPasarDesaForm = {
|
||||
imageId: "",
|
||||
rating: 0,
|
||||
kategoriId: [] as string[],
|
||||
kontak: "",
|
||||
};
|
||||
|
||||
const pasarDesa = proxy({
|
||||
@@ -188,6 +190,7 @@ const pasarDesa = proxy({
|
||||
imageId: data.imageId,
|
||||
rating: data.rating,
|
||||
kategoriId: data.kategoriId,
|
||||
kontak: data.kontak,
|
||||
};
|
||||
return data;
|
||||
} else {
|
||||
@@ -225,6 +228,7 @@ const pasarDesa = proxy({
|
||||
imageId: this.form.imageId,
|
||||
rating: this.form.rating,
|
||||
kategoriId: this.form.kategoriId,
|
||||
kontak: this.form.kontak,
|
||||
}),
|
||||
});
|
||||
if (!response.ok) {
|
||||
@@ -336,6 +340,40 @@ const kategoriProduk = proxy({
|
||||
}
|
||||
},
|
||||
},
|
||||
// ✅ Versi findManyAll (ambil semua tanpa pagination)
|
||||
findManyAll: {
|
||||
data: null as
|
||||
| Prisma.KategoriProdukGetPayload<{
|
||||
omit: { isActive: true };
|
||||
}>[]
|
||||
| null,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (search = "") => {
|
||||
kategoriProduk.findManyAll.loading = true;
|
||||
kategoriProduk.findManyAll.search = search;
|
||||
|
||||
try {
|
||||
const query: any = {};
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.ekonomi.kategoriproduk["find-many-all"].get({
|
||||
query,
|
||||
});
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
kategoriProduk.findManyAll.data = res.data.data ?? [];
|
||||
} else {
|
||||
kategoriProduk.findManyAll.data = [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch kategori produk (all):", err);
|
||||
kategoriProduk.findManyAll.data = [];
|
||||
} finally {
|
||||
kategoriProduk.findManyAll.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
findUnique: {
|
||||
data: null as Prisma.KategoriProdukGetPayload<{
|
||||
omit: { isActive: true };
|
||||
|
||||
@@ -1,9 +1,173 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { proxy } from "valtio";
|
||||
import { z } from "zod";
|
||||
import { toast } from "react-toastify";
|
||||
import ApiFetch from "@/lib/api-fetch";
|
||||
import { Prisma } from "@prisma/client";
|
||||
import { toast } from "react-toastify";
|
||||
import { proxy } from "valtio";
|
||||
import { z } from "zod";
|
||||
|
||||
const templateForm = z.object({
|
||||
name: z.string().min(3, "Nama minimal 3 karakter"),
|
||||
imageId: z.string().min(1, "Gambar wajib dipilih"),
|
||||
});
|
||||
|
||||
const defaultForm = {
|
||||
name: "",
|
||||
imageId: "",
|
||||
};
|
||||
|
||||
type StrukturBumDesForm = Prisma.StrukturBumDesGetPayload<{
|
||||
select: {
|
||||
id: true;
|
||||
name: true;
|
||||
imageId: true;
|
||||
image?: {
|
||||
select: {
|
||||
link: true;
|
||||
};
|
||||
};
|
||||
};
|
||||
}>;
|
||||
|
||||
const stateStruktur = proxy({
|
||||
struktur: {
|
||||
data: null as StrukturBumDesForm | null,
|
||||
loading: false,
|
||||
error: null as string | null,
|
||||
|
||||
async load(id: string) {
|
||||
if (!id) {
|
||||
toast.warn("ID tidak valid");
|
||||
return null;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/ekonomi/struktur-organisasi/${id}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
this.data = result.data;
|
||||
return result.data;
|
||||
} else {
|
||||
throw new Error(result.message || "Gagal mengambil data struktur");
|
||||
}
|
||||
} catch (error) {
|
||||
const errorMessage = (error as Error).message;
|
||||
this.error = errorMessage;
|
||||
console.error("Load struktur error:", errorMessage);
|
||||
toast.error("Terjadi kesalahan saat mengambil data struktur");
|
||||
return null;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.data = null;
|
||||
this.error = null;
|
||||
this.loading = false;
|
||||
},
|
||||
},
|
||||
|
||||
editStruktur: {
|
||||
id: "",
|
||||
form: { ...defaultForm },
|
||||
loading: false,
|
||||
error: null as string | null,
|
||||
isReadOnly: false,
|
||||
|
||||
initialize(strukturData: StrukturBumDesForm) {
|
||||
this.id = strukturData.id;
|
||||
this.isReadOnly = false;
|
||||
this.form = {
|
||||
name: strukturData.name || "",
|
||||
imageId: strukturData.imageId || "",
|
||||
};
|
||||
},
|
||||
|
||||
updateField(field: keyof typeof defaultForm, value: string) {
|
||||
this.form[field] = value;
|
||||
},
|
||||
|
||||
async submit() {
|
||||
const validation = templateForm.safeParse(this.form);
|
||||
|
||||
if (!validation.success) {
|
||||
const errors = validation.error.issues
|
||||
.map((issue) => `${issue.path.join(".")}: ${issue.message}`)
|
||||
.join(", ");
|
||||
toast.error(`Form tidak valid: ${errors}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/ekonomi/struktur-organisasi/${this.id}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(this.form),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(
|
||||
errorData.message || `HTTP error! status: ${response.status}`
|
||||
);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
toast.success("Berhasil update struktur");
|
||||
await stateStruktur.struktur.load(this.id);
|
||||
return true;
|
||||
} else {
|
||||
throw new Error(result.message || "Gagal update struktur");
|
||||
}
|
||||
} catch (error) {
|
||||
const errorMessage = (error as Error).message;
|
||||
this.error = errorMessage;
|
||||
console.error("Update struktur error:", errorMessage);
|
||||
toast.error("Terjadi kesalahan saat update struktur");
|
||||
return false;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.id = "";
|
||||
this.form = { ...defaultForm };
|
||||
this.error = null;
|
||||
this.loading = false;
|
||||
this.isReadOnly = false;
|
||||
},
|
||||
},
|
||||
|
||||
async loadForEdit(id: string) {
|
||||
const strukturData = await this.struktur.load(id);
|
||||
if (strukturData) {
|
||||
this.editStruktur.initialize(strukturData);
|
||||
}
|
||||
return strukturData;
|
||||
},
|
||||
|
||||
reset() {
|
||||
this.struktur.reset();
|
||||
this.editStruktur.reset();
|
||||
},
|
||||
});
|
||||
|
||||
const templatePosisiOrganisasi = z.object({
|
||||
nama: z.string().min(1, "Nama harus diisi"),
|
||||
@@ -30,9 +194,7 @@ const posisiOrganisasi = proxy({
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
|
||||
"posisi-organisasi"
|
||||
]["create"].post(this.form);
|
||||
const res = await ApiFetch.api.ekonomi['struktur-organisasi']['posisi-organisasi']['create'].post(this.form);
|
||||
if (res.status === 200) {
|
||||
toast.success("Berhasil menambahkan posisi organisasi");
|
||||
posisiOrganisasi.findMany.load();
|
||||
@@ -52,6 +214,29 @@ const posisiOrganisasi = proxy({
|
||||
},
|
||||
},
|
||||
|
||||
findUnique: {
|
||||
data: null as Prisma.StrukturOrganisasiBumDesGetPayload<{
|
||||
omit: { isActive: true };
|
||||
}> | null,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/ekonomi/struktur-organisasi/posisi-organisasi/${id}`
|
||||
);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
posisiOrganisasi.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch posisiOrganisasi:", res.statusText);
|
||||
posisiOrganisasi.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching posisiOrganisasi:", error);
|
||||
posisiOrganisasi.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
edit: {
|
||||
id: "",
|
||||
form: { ...posisiOrganisasiDefaultForm },
|
||||
@@ -165,17 +350,17 @@ const posisiOrganisasi = proxy({
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "") => {
|
||||
posisiOrganisasi.findMany.loading = true; // ✅ Akses langsung via nama path
|
||||
load: async (page = 1, limit?: number, search = "") => {
|
||||
const appliedLimit = limit ?? 10;
|
||||
posisiOrganisasi.findMany.page = page;
|
||||
posisiOrganisasi.findMany.search = search;
|
||||
|
||||
|
||||
try {
|
||||
const query: any = { page, limit };
|
||||
const query: any = { page, limit: appliedLimit };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["posisi-organisasi"]["find-many"].get({ query });
|
||||
|
||||
|
||||
const res = await ApiFetch.api.ekonomi['struktur-organisasi']['posisi-organisasi']['find-many'].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
posisiOrganisasi.findMany.data = res.data.data ?? [];
|
||||
posisiOrganisasi.findMany.totalPages = res.data.totalPages ?? 1;
|
||||
@@ -192,7 +377,42 @@ const posisiOrganisasi = proxy({
|
||||
}
|
||||
},
|
||||
},
|
||||
findManyAll: {
|
||||
data: [] as Array<{
|
||||
id: string;
|
||||
nama: string;
|
||||
deskripsi: string | null;
|
||||
hierarki: number;
|
||||
}>,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (search = "") => {
|
||||
// Change to arrow function
|
||||
posisiOrganisasi.findManyAll.loading = true; // Use the full path to access the property
|
||||
posisiOrganisasi.findManyAll.search = search;
|
||||
try {
|
||||
const query: any = { search };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.ekonomi['struktur-organisasi']['posisi-organisasi']['find-many-all'].get({
|
||||
query,
|
||||
});
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
posisiOrganisasi.findManyAll.data = res.data.data || [];
|
||||
|
||||
} else {
|
||||
console.error("Failed to load posisiOrganisasi:", res.data?.message);
|
||||
posisiOrganisasi.findManyAll.data = [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading posisiOrganisasi:", error);
|
||||
posisiOrganisasi.findManyAll.data = [];
|
||||
} finally {
|
||||
posisiOrganisasi.findManyAll.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
@@ -231,12 +451,12 @@ const posisiOrganisasi = proxy({
|
||||
|
||||
const templatePegawai = z.object({
|
||||
namaLengkap: z.string().min(1, "Nama wajib diisi"),
|
||||
gelarAkademik: z.string().optional(),
|
||||
imageId: z.string().nullable().optional(),
|
||||
tanggalMasuk: z.string().optional(), // ISO format
|
||||
gelarAkademik: z.string().min(1, "Gelar Akademik wajib diisi"),
|
||||
imageId: z.string().min(1, "Gambar wajib dipilih"),
|
||||
tanggalMasuk: z.string().min(1, "Tanggal masuk wajib diisi"), // ISO format
|
||||
email: z.string().email("Email tidak valid").optional(),
|
||||
telepon: z.string().optional(),
|
||||
alamat: z.string().optional(),
|
||||
telepon: z.string().min(1, "Telepom wajib diisi"),
|
||||
alamat: z.string().min(1, "Alamat wajib diisi"),
|
||||
posisiId: z.string().min(1, "Posisi wajib diisi"),
|
||||
isActive: z.boolean().default(true),
|
||||
});
|
||||
@@ -267,9 +487,9 @@ const pegawai = proxy({
|
||||
|
||||
try {
|
||||
pegawai.create.loading = true;
|
||||
const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
|
||||
"pegawai"
|
||||
]["create"].post(pegawai.create.form);
|
||||
const res = await ApiFetch.api.ekonomi['struktur-organisasi'].pegawai['create'].post(
|
||||
pegawai.create.form
|
||||
);
|
||||
if (res.status === 200) {
|
||||
toast.success("Pegawai berhasil ditambahkan");
|
||||
await pegawai.findMany.load();
|
||||
@@ -286,45 +506,56 @@ const pegawai = proxy({
|
||||
},
|
||||
|
||||
// In struktur-organisasi.ts
|
||||
findMany: {
|
||||
data: null as any[] | null,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
total: 0,
|
||||
loading: false,
|
||||
load: async (page = 1, limit = 10) => { // Change to arrow function
|
||||
pegawai.findMany.loading = true; // Use the full path to access the property
|
||||
pegawai.findMany.page = page;
|
||||
try {
|
||||
const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
|
||||
"pegawai"
|
||||
]["find-many"].get({
|
||||
query: { page, limit },
|
||||
});
|
||||
findMany: {
|
||||
data: null as
|
||||
| Prisma.PegawaiBumDesGetPayload<{
|
||||
include: {
|
||||
image: true;
|
||||
posisi: true;
|
||||
};
|
||||
}>[]
|
||||
| null,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
total: 0,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "") => {
|
||||
// Change to arrow function
|
||||
pegawai.findMany.loading = true; // Use the full path to access the property
|
||||
pegawai.findMany.page = page;
|
||||
pegawai.findMany.search = search;
|
||||
try {
|
||||
const query: any = { page, limit };
|
||||
if (search) query.search = search;
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
pegawai.findMany.data = res.data.data || [];
|
||||
pegawai.findMany.total = res.data.total || 0;
|
||||
pegawai.findMany.totalPages = res.data.totalPages || 1;
|
||||
} else {
|
||||
console.error("Failed to load pegawai:", res.data?.message);
|
||||
const res = await ApiFetch.api.ekonomi['struktur-organisasi'].pegawai['find-many'].get({
|
||||
query,
|
||||
});
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
pegawai.findMany.data = res.data.data || [];
|
||||
pegawai.findMany.total = res.data.total || 0;
|
||||
pegawai.findMany.totalPages = res.data.totalPages || 1;
|
||||
} else {
|
||||
console.error("Failed to load pegawai:", res.data?.message);
|
||||
pegawai.findMany.data = [];
|
||||
pegawai.findMany.total = 0;
|
||||
pegawai.findMany.totalPages = 1;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading pegawai:", error);
|
||||
pegawai.findMany.data = [];
|
||||
pegawai.findMany.total = 0;
|
||||
pegawai.findMany.totalPages = 1;
|
||||
} finally {
|
||||
pegawai.findMany.loading = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading pegawai:", error);
|
||||
pegawai.findMany.data = [];
|
||||
pegawai.findMany.total = 0;
|
||||
pegawai.findMany.totalPages = 1;
|
||||
} finally {
|
||||
pegawai.findMany.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
findUnique: {
|
||||
data: null as
|
||||
| (Prisma.PegawaiGetPayload<{
|
||||
| (Prisma.PegawaiBumDesGetPayload<{
|
||||
include: { posisi: true; image: true };
|
||||
}> & { isActive: boolean })
|
||||
| null,
|
||||
@@ -350,12 +581,9 @@ findMany: {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
try {
|
||||
pegawai.delete.loading = true;
|
||||
const res = await fetch(
|
||||
`/api/ekonomi/struktur-organisasi/pegawai/del/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
}
|
||||
);
|
||||
const res = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/del/${id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
const json = await res.json();
|
||||
if (res.ok) {
|
||||
toast.success(json.message ?? "Berhasil hapus pegawai");
|
||||
@@ -372,6 +600,31 @@ findMany: {
|
||||
},
|
||||
},
|
||||
|
||||
nonActive: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
try {
|
||||
pegawai.nonActive.loading = true;
|
||||
const res = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/non-active/${id}`, {
|
||||
method: "DELETE", // biasanya nonActive pakai PATCH
|
||||
});
|
||||
const json = await res.json();
|
||||
if (res.ok) {
|
||||
toast.success(json.message ?? "Pegawai berhasil dinonaktifkan");
|
||||
await pegawai.findMany.load(); // refresh data
|
||||
} else {
|
||||
toast.error(json.message ?? "Gagal menonaktifkan pegawai");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal nonActive:", error);
|
||||
toast.error("Terjadi kesalahan saat menonaktifkan pegawai");
|
||||
} finally {
|
||||
pegawai.nonActive.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
edit: {
|
||||
id: "",
|
||||
form: { ...pegawaiDefaultForm },
|
||||
@@ -384,15 +637,12 @@ findMany: {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/ekonomi/struktur-organisasi/pegawai/${id}`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
const response = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/${id}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
@@ -503,299 +753,10 @@ findMany: {
|
||||
},
|
||||
});
|
||||
|
||||
// Schema Zod untuk form validasi
|
||||
const templateHubunganOrganisasiForm = z.object({
|
||||
atasanId: z.string().min(1, "Atasan wajib dipilih"),
|
||||
bawahanId: z.string().min(1, "Bawahan wajib dipilih"),
|
||||
tipe: z.string().optional(),
|
||||
});
|
||||
|
||||
// Default form state
|
||||
const defaultHubunganOrganisasiForm = {
|
||||
atasanId: "",
|
||||
bawahanId: "",
|
||||
tipe: "",
|
||||
};
|
||||
|
||||
// ====================== STATE ===========================
|
||||
const hubunganOrganisasi = proxy({
|
||||
create: {
|
||||
form: { ...defaultHubunganOrganisasiForm },
|
||||
loading: false,
|
||||
async create() {
|
||||
const cek = templateHubunganOrganisasiForm.safeParse(
|
||||
hubunganOrganisasi.create.form
|
||||
);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues
|
||||
.map((v) => `${v.path.join(".")}: ${v.message}`)
|
||||
.join("\n")}]`;
|
||||
return toast.error(err);
|
||||
}
|
||||
|
||||
try {
|
||||
hubunganOrganisasi.create.loading = true;
|
||||
const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
|
||||
"hubungan-organisasi"
|
||||
]["create"].post(hubunganOrganisasi.create.form);
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
hubunganOrganisasi.findMany.load();
|
||||
return toast.success("Berhasil menambahkan hubungan organisasi");
|
||||
} else {
|
||||
return toast.error(res.data?.message || "Gagal menambahkan data");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal create:", error);
|
||||
toast.error("Terjadi kesalahan saat menambahkan");
|
||||
} finally {
|
||||
hubunganOrganisasi.create.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
findMany: {
|
||||
data: null as Array<{
|
||||
id: string;
|
||||
atasanId: string;
|
||||
bawahanId: string;
|
||||
tipe?: string | null;
|
||||
atasan: {
|
||||
id: string;
|
||||
namaLengkap: string;
|
||||
gelarAkademik: string | null;
|
||||
imageId: string | null;
|
||||
tanggalMasuk: Date | null;
|
||||
email: string | null;
|
||||
telepon: string | null;
|
||||
alamat: string | null;
|
||||
posisiId: string;
|
||||
isActive: boolean;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
};
|
||||
bawahan: {
|
||||
id: string;
|
||||
namaLengkap: string;
|
||||
gelarAkademik: string | null;
|
||||
imageId: string | null;
|
||||
tanggalMasuk: Date | null;
|
||||
email: string | null;
|
||||
telepon: string | null;
|
||||
alamat: string | null;
|
||||
posisiId: string;
|
||||
isActive: boolean;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
};
|
||||
}> | null,
|
||||
|
||||
async load() {
|
||||
try {
|
||||
const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
|
||||
"hubungan-organisasi"
|
||||
]["find-many"].get();
|
||||
|
||||
if (res.status === 200) {
|
||||
hubunganOrganisasi.findMany.data = (res.data?.data ?? []).map(
|
||||
(item: any) => ({
|
||||
...item,
|
||||
atasan: item.atasan
|
||||
? {
|
||||
...item.atasan,
|
||||
isActive: item.atasan.isActive ?? item.atasan.aktif ?? true,
|
||||
}
|
||||
: null,
|
||||
bawahan: item.bawahan
|
||||
? {
|
||||
...item.bawahan,
|
||||
isActive:
|
||||
item.bawahan.isActive ?? item.bawahan.aktif ?? true,
|
||||
}
|
||||
: null,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
hubunganOrganisasi.findMany.data = [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fetch list error:", error);
|
||||
toast.error("Gagal memuat data hubungan organisasi");
|
||||
hubunganOrganisasi.findMany.data = [];
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
findUnique: {
|
||||
data: null as {
|
||||
id: string;
|
||||
atasanId: string;
|
||||
bawahanId: string;
|
||||
tipe?: string | null;
|
||||
atasan?: {
|
||||
id: string;
|
||||
namaLengkap: string;
|
||||
gelarAkademik: string | null;
|
||||
imageId: string;
|
||||
tanggalMasuk: Date | null;
|
||||
email: string | null;
|
||||
telepon: string | null;
|
||||
alamat: string | null;
|
||||
posisiId: string;
|
||||
aktif: boolean;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
};
|
||||
bawahan?: {
|
||||
id: string;
|
||||
namaLengkap: string;
|
||||
gelarAkademik: string | null;
|
||||
imageId: string;
|
||||
tanggalMasuk: Date | null;
|
||||
email: string | null;
|
||||
telepon: string | null;
|
||||
alamat: string | null;
|
||||
posisiId: string;
|
||||
aktif: boolean;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
};
|
||||
} | null,
|
||||
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`
|
||||
);
|
||||
const result = await res.json();
|
||||
|
||||
if (res.ok && result?.success) {
|
||||
hubunganOrganisasi.findUnique.data = result.data;
|
||||
} else {
|
||||
hubunganOrganisasi.findUnique.data = null;
|
||||
toast.error(result?.message || "Gagal mengambil data");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Find unique error:", error);
|
||||
hubunganOrganisasi.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
edit: {
|
||||
id: "",
|
||||
form: { ...defaultHubunganOrganisasiForm },
|
||||
loading: false,
|
||||
|
||||
async load(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`
|
||||
);
|
||||
const result = await res.json();
|
||||
|
||||
if (res.ok && result?.success) {
|
||||
const data = result.data;
|
||||
this.id = data.id;
|
||||
this.form = {
|
||||
atasanId: data.atasanId,
|
||||
bawahanId: data.bawahanId,
|
||||
tipe: data.tipe || "",
|
||||
};
|
||||
return data;
|
||||
} else {
|
||||
throw new Error(result?.message || "Gagal memuat data");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading:", error);
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : "Gagal memuat data"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
async update() {
|
||||
const cek = templateHubunganOrganisasiForm.safeParse(this.form);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues
|
||||
.map((v) => `${v.path.join(".")}: ${v.message}`)
|
||||
.join("\n")}]`;
|
||||
return toast.error(err);
|
||||
}
|
||||
|
||||
try {
|
||||
this.loading = true;
|
||||
const res = await fetch(
|
||||
`/api/ekonomi/struktur-organisasi/hubungan-organisasi/${this.id}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(this.form),
|
||||
}
|
||||
);
|
||||
|
||||
const result = await res.json();
|
||||
if (res.ok && result.success) {
|
||||
await hubunganOrganisasi.findMany.load();
|
||||
toast.success("Berhasil mengupdate hubungan organisasi");
|
||||
return true;
|
||||
} else {
|
||||
throw new Error(result?.message || "Gagal mengupdate");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Update error:", error);
|
||||
toast.error(error instanceof Error ? error.message : "Gagal update");
|
||||
return false;
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
reset() {
|
||||
hubunganOrganisasi.edit.id = "";
|
||||
hubunganOrganisasi.edit.form = { ...defaultHubunganOrganisasiForm };
|
||||
},
|
||||
},
|
||||
|
||||
delete: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
|
||||
try {
|
||||
hubunganOrganisasi.delete.loading = true;
|
||||
const res = await fetch(
|
||||
`/api/ekonomi/struktur-organisasi/hubungan-organisasi/del/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
}
|
||||
);
|
||||
|
||||
const result = await res.json();
|
||||
if (res.ok && result?.success) {
|
||||
toast.success("Hubungan organisasi berhasil dihapus");
|
||||
hubunganOrganisasi.findMany.load();
|
||||
} else {
|
||||
toast.error(result?.message || "Gagal menghapus hubungan organisasi");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Delete error:", error);
|
||||
toast.error("Terjadi kesalahan saat menghapus");
|
||||
} finally {
|
||||
hubunganOrganisasi.delete.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const strukturorganisasiState = proxy({
|
||||
const stateStrukturBumDes = proxy({
|
||||
stateStruktur,
|
||||
posisiOrganisasi,
|
||||
pegawai,
|
||||
hubunganOrganisasi,
|
||||
});
|
||||
|
||||
export default strukturorganisasiState;
|
||||
export default stateStrukturBumDes;
|
||||
|
||||
@@ -26,14 +26,6 @@ const templateForm = z.object({
|
||||
dokumenJadwalKegiatan: z.object({
|
||||
content: z.string().min(1, "Content minimal 1 karakter"),
|
||||
}),
|
||||
pendaftaranJadwalKegiatan: z.object({
|
||||
name: z.string().min(1, "Name minimal 1 karakter"),
|
||||
tanggal: z.string().min(1, "Tanggal minimal 1 karakter"),
|
||||
namaOrangtua: z.string().min(1, "Nama Orangtua minimal 1 karakter"),
|
||||
nomor: z.string().min(1, "Nomor minimal 1 karakter"),
|
||||
alamat: z.string().min(1, "Alamat minimal 1 karakter"),
|
||||
catatan: z.string().min(1, "Catatan minimal 1 karakter"),
|
||||
}),
|
||||
});
|
||||
|
||||
const defaultForm = {
|
||||
@@ -55,15 +47,7 @@ const defaultForm = {
|
||||
},
|
||||
dokumenJadwalKegiatan: {
|
||||
content: "",
|
||||
},
|
||||
pendaftaranJadwalKegiatan: {
|
||||
name: "",
|
||||
tanggal: "",
|
||||
namaOrangtua: "",
|
||||
nomor: "",
|
||||
alamat: "",
|
||||
catatan: "",
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
const jadwalkegiatanState = proxy({
|
||||
@@ -116,7 +100,6 @@ const jadwalkegiatanState = proxy({
|
||||
deskripsijadwalkegiatan: true;
|
||||
layananjadwalkegiatan: true;
|
||||
dokumenjadwalkegiatan: true;
|
||||
pendaftaranjadwalkegiatan: true;
|
||||
};
|
||||
}>[]
|
||||
| null,
|
||||
@@ -161,7 +144,6 @@ const jadwalkegiatanState = proxy({
|
||||
layananjadwalkegiatan: true;
|
||||
syaratketentuanjadwalkegiatan: true;
|
||||
dokumenjadwalkegiatan: true;
|
||||
pendaftaranjadwalkegiatan: true;
|
||||
};
|
||||
}> | null,
|
||||
loading: false,
|
||||
@@ -209,15 +191,7 @@ const jadwalkegiatanState = proxy({
|
||||
},
|
||||
dokumenJadwalKegiatan: {
|
||||
content: data.dokumenjadwalkegiatan.content,
|
||||
},
|
||||
pendaftaranJadwalKegiatan: {
|
||||
name: data.pendaftaranjadwalkegiatan.name,
|
||||
tanggal: data.pendaftaranjadwalkegiatan.tanggal,
|
||||
namaOrangtua: data.pendaftaranjadwalkegiatan.namaOrangtua,
|
||||
nomor: data.pendaftaranjadwalkegiatan.nomor,
|
||||
alamat: data.pendaftaranjadwalkegiatan.alamat,
|
||||
catatan: data.pendaftaranjadwalkegiatan.catatan,
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
async submit() {
|
||||
@@ -259,20 +233,6 @@ const jadwalkegiatanState = proxy({
|
||||
content:
|
||||
jadwalkegiatanState.edit.form.dokumenJadwalKegiatan.content,
|
||||
},
|
||||
pendaftaranJadwalKegiatan: {
|
||||
name: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.name,
|
||||
tanggal:
|
||||
jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.tanggal,
|
||||
namaOrangtua:
|
||||
jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan
|
||||
.namaOrangtua,
|
||||
nomor:
|
||||
jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.nomor,
|
||||
alamat:
|
||||
jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.alamat,
|
||||
catatan:
|
||||
jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.catatan,
|
||||
},
|
||||
};
|
||||
|
||||
const res = await fetch(
|
||||
|
||||
@@ -9,12 +9,14 @@ const templateForm = z.object({
|
||||
name: z.string().min(3, "Judul minimal 3 karakter"),
|
||||
deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
|
||||
imageId: z.string().nonempty(),
|
||||
whatsapp: z.string().min(10, "Whatsapp minimal 10 karakter"),
|
||||
});
|
||||
|
||||
const defaultForm = {
|
||||
name: "",
|
||||
deskripsi: "",
|
||||
imageId: "",
|
||||
whatsapp: "",
|
||||
};
|
||||
|
||||
const kontakDarurat = proxy({
|
||||
@@ -171,6 +173,7 @@ const kontakDarurat = proxy({
|
||||
name: data.name,
|
||||
deskripsi: data.deskripsi,
|
||||
imageId: data.imageId,
|
||||
whatsapp: data.whatsapp,
|
||||
};
|
||||
return data; // Return the loaded data
|
||||
} else {
|
||||
@@ -207,6 +210,7 @@ const kontakDarurat = proxy({
|
||||
name: this.form.name,
|
||||
deskripsi: this.form.deskripsi,
|
||||
imageId: this.form.imageId,
|
||||
whatsapp: this.form.whatsapp,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
@@ -388,16 +388,15 @@ const pejabatDesa = proxy({
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/landingpage/pejabatdesa/${this.id}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(this.form),
|
||||
}
|
||||
);
|
||||
// Ensure ID is properly encoded in the URL
|
||||
const url = new URL(`/api/landingpage/pejabatdesa/${encodeURIComponent(this.id)}`, window.location.origin);
|
||||
const response = await fetch(url.toString(), {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(this.form),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
|
||||
@@ -354,14 +354,39 @@ const kategoriKegiatan = proxy({
|
||||
id: string;
|
||||
nama: string;
|
||||
}> | null,
|
||||
async load() {
|
||||
const res = await ApiFetch.api.lingkungan.kategorikegiatan[
|
||||
"find-many"
|
||||
].get();
|
||||
if (res.status === 200) {
|
||||
kategoriKegiatan.findMany.data = res.data?.data ?? [];
|
||||
}
|
||||
},
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "") => {
|
||||
kategoriKegiatan.findMany.loading = true; // ✅ Akses langsung via nama path
|
||||
kategoriKegiatan.findMany.page = page;
|
||||
kategoriKegiatan.findMany.search = search;
|
||||
|
||||
try {
|
||||
const query: any = { page, limit };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res =
|
||||
await ApiFetch.api.lingkungan.kategorikegiatan[
|
||||
"find-many"
|
||||
].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
kategoriKegiatan.findMany.data = res.data.data ?? [];
|
||||
kategoriKegiatan.findMany.totalPages = res.data.totalPages ?? 1;
|
||||
} else {
|
||||
kategoriKegiatan.findMany.data = [];
|
||||
kategoriKegiatan.findMany.totalPages = 1;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch kategori kegiatan paginated:", err);
|
||||
kategoriKegiatan.findMany.data = [];
|
||||
kategoriKegiatan.findMany.totalPages = 1;
|
||||
} finally {
|
||||
kategoriKegiatan.findMany.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
findUnique: {
|
||||
data: null as Prisma.KategoriKegiatanGetPayload<{
|
||||
|
||||
@@ -112,7 +112,32 @@ const statepermohonanInformasiPublik = proxy({
|
||||
statepermohonanInformasiPublik.findMany.data = res.data?.data ?? [];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
findUnique: {
|
||||
data: null as Prisma.PermohonanInformasiPublikGetPayload<{
|
||||
include: {
|
||||
jenisInformasiDiminta: true,
|
||||
caraMemperolehInformasi: true,
|
||||
caraMemperolehSalinanInformasi: true,
|
||||
};
|
||||
}> | null,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/ppid/permohonaninformasipublik/${id}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
statepermohonanInformasiPublik.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch program inovasi:", res.statusText);
|
||||
statepermohonanInformasiPublik.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching program inovasi:", error);
|
||||
statepermohonanInformasiPublik.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
const statepermohonanInformasiPublikForm = proxy({
|
||||
|
||||
@@ -57,7 +57,29 @@ const permohonanKeberatanInformasi = proxy({
|
||||
permohonanKeberatanInformasi.findMany.data = res.data?.data ?? [];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
findUnique: {
|
||||
data: null as Prisma.FormulirPermohonanKeberatanGetPayload<{
|
||||
omit: {
|
||||
isActive: true;
|
||||
};
|
||||
}> | null,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(`/api/ppid/permohonankeberataninformasipublik/${id}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
permohonanKeberatanInformasi.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch permohonan keberatan informasi:", res.statusText);
|
||||
permohonanKeberatanInformasi.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching permohonan keberatan informasi:", error);
|
||||
permohonanKeberatanInformasi.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
export default permohonanKeberatanInformasi;
|
||||
|
||||
@@ -381,7 +381,44 @@ const posisiOrganisasi = proxy({
|
||||
}
|
||||
},
|
||||
},
|
||||
findManyAll: {
|
||||
data: [] as Array<{
|
||||
id: string;
|
||||
nama: string;
|
||||
deskripsi: string | null;
|
||||
hierarki: number;
|
||||
}>,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (search = "") => {
|
||||
// Change to arrow function
|
||||
posisiOrganisasi.findManyAll.loading = true; // Use the full path to access the property
|
||||
posisiOrganisasi.findManyAll.search = search;
|
||||
try {
|
||||
const query: any = { search };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi[
|
||||
"find-many-all"
|
||||
].get({
|
||||
query,
|
||||
});
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
posisiOrganisasi.findManyAll.data = res.data.data || [];
|
||||
|
||||
} else {
|
||||
console.error("Failed to load posisiOrganisasi:", res.data?.message);
|
||||
posisiOrganisasi.findManyAll.data = [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading posisiOrganisasi:", error);
|
||||
posisiOrganisasi.findManyAll.data = [];
|
||||
} finally {
|
||||
posisiOrganisasi.findManyAll.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
@@ -526,7 +563,7 @@ const pegawai = proxy({
|
||||
},
|
||||
findUnique: {
|
||||
data: null as
|
||||
| (Prisma.PegawaiGetPayload<{
|
||||
| (Prisma.PegawaiPPIDGetPayload<{
|
||||
include: { posisi: true; image: true };
|
||||
}> & { isActive: boolean })
|
||||
| null,
|
||||
@@ -571,6 +608,31 @@ const pegawai = proxy({
|
||||
},
|
||||
},
|
||||
|
||||
nonActive: {
|
||||
loading: false,
|
||||
async byId(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
try {
|
||||
pegawai.nonActive.loading = true;
|
||||
const res = await fetch(`/api/ppid/strukturppid/pegawai/non-active/${id}`, {
|
||||
method: "DELETE", // biasanya nonActive pakai PATCH
|
||||
});
|
||||
const json = await res.json();
|
||||
if (res.ok) {
|
||||
toast.success(json.message ?? "Pegawai berhasil dinonaktifkan");
|
||||
await pegawai.findMany.load(); // refresh data
|
||||
} else {
|
||||
toast.error(json.message ?? "Gagal menonaktifkan pegawai");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal nonActive:", error);
|
||||
toast.error("Terjadi kesalahan saat menonaktifkan pegawai");
|
||||
} finally {
|
||||
pegawai.nonActive.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
edit: {
|
||||
id: "",
|
||||
form: { ...pegawaiDefaultForm },
|
||||
|
||||
@@ -4,7 +4,7 @@ import colors from '@/con/colors';
|
||||
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { IconFileText, IconBuildingStore, IconSparkles, IconUsers } from '@tabler/icons-react';
|
||||
import { IconFileText, IconBuildingStore, IconSparkles, IconUsers, IconUsersPlus } from '@tabler/icons-react';
|
||||
|
||||
function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter()
|
||||
@@ -37,6 +37,13 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
|
||||
href: "/admin/desa/layanan/pelayanan_penduduk_non_permanent",
|
||||
icon: <IconUsers size={18} stroke={1.8} />,
|
||||
tooltip: "Pendataan penduduk non-permanent"
|
||||
},
|
||||
{
|
||||
label: "Ajukan Permohonan",
|
||||
value: "ajukanpermohonan",
|
||||
href: "/admin/desa/layanan/ajukan_permohonan",
|
||||
icon: <IconUsersPlus size={18} stroke={1.8} />,
|
||||
tooltip: "Ajukan permohonan"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
|
||||
import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
@@ -10,7 +11,7 @@ import {
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
@@ -24,7 +25,7 @@ function EditKategoriBerita() {
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: editState.update.form.name || '',
|
||||
name: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -48,8 +49,16 @@ function EditKategoriBerita() {
|
||||
loadKategori();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// update global state hanya saat submit
|
||||
editState.update.form = {
|
||||
...editState.update.form,
|
||||
name: formData.name,
|
||||
@@ -94,10 +103,11 @@ function EditKategoriBerita() {
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
name="name"
|
||||
label="Nama Kategori Berita"
|
||||
placeholder="Masukkan nama kategori berita"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
|
||||
|
||||
@@ -7,10 +7,9 @@ import {
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -62,9 +61,9 @@ function CreateKategoriBerita() {
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={<Text fw="bold" fz="sm">Nama Kategori Berita</Text>}
|
||||
label="Nama Kategori Berita"
|
||||
placeholder="Masukkan nama kategori berita"
|
||||
value={createState.create.form.name || ''}
|
||||
defaultValue={createState.create.form.name || ''}
|
||||
onChange={(e) => (createState.create.form.name = e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -19,7 +19,12 @@ import {
|
||||
Tooltip,
|
||||
} from "@mantine/core";
|
||||
import { Dropzone } from "@mantine/dropzone";
|
||||
import { IconArrowBack, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
|
||||
import {
|
||||
IconArrowBack,
|
||||
IconPhoto,
|
||||
IconUpload,
|
||||
IconX,
|
||||
} from "@tabler/icons-react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
@@ -33,16 +38,17 @@ function EditBerita() {
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
judul: beritaState.berita.edit.form.judul || "",
|
||||
deskripsi: beritaState.berita.edit.form.deskripsi || "",
|
||||
kategoriBeritaId: beritaState.berita.edit.form.kategoriBeritaId || "",
|
||||
content: beritaState.berita.edit.form.content || "",
|
||||
imageId: beritaState.berita.edit.form.imageId || "",
|
||||
judul: "",
|
||||
deskripsi: "",
|
||||
kategoriBeritaId: "",
|
||||
content: "",
|
||||
imageId: "",
|
||||
});
|
||||
|
||||
// Load berita by id saat pertama kali
|
||||
// Load kategori + berita
|
||||
useEffect(() => {
|
||||
beritaState.kategoriBerita.findMany.load();
|
||||
|
||||
const loadBerita = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
@@ -71,8 +77,13 @@ function EditBerita() {
|
||||
loadBerita();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// Update global state hanya sekali di sini
|
||||
beritaState.berita.edit.form = {
|
||||
...beritaState.berita.edit.form,
|
||||
...formData,
|
||||
@@ -103,6 +114,7 @@ function EditBerita() {
|
||||
|
||||
return (
|
||||
<Box px={{ base: "sm", md: "lg" }} py="md">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button
|
||||
@@ -119,6 +131,7 @@ function EditBerita() {
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form */}
|
||||
<Paper
|
||||
w={{ base: "100%", md: "50%" }}
|
||||
bg={colors["white-1"]}
|
||||
@@ -132,22 +145,41 @@ function EditBerita() {
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul"
|
||||
value={formData.judul}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, judul: e.target.value })
|
||||
}
|
||||
onChange={(e) => handleChange("judul", e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Deskripsi"
|
||||
placeholder="Masukkan deskripsi"
|
||||
value={formData.deskripsi}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, deskripsi: e.target.value })
|
||||
<Select
|
||||
value={formData.kategoriBeritaId}
|
||||
onChange={(val) => handleChange("kategoriBeritaId", val || "")}
|
||||
label="Kategori"
|
||||
placeholder="Pilih kategori"
|
||||
data={
|
||||
beritaState.kategoriBerita.findMany.data?.map((v) => ({
|
||||
value: v.id,
|
||||
label: v.name,
|
||||
})) || []
|
||||
}
|
||||
clearable
|
||||
searchable
|
||||
required
|
||||
error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) =>
|
||||
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
{/* Upload Gambar */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Gambar Berita
|
||||
@@ -160,7 +192,9 @@ function EditBerita() {
|
||||
setPreviewImage(URL.createObjectURL(selectedFile));
|
||||
}
|
||||
}}
|
||||
onReject={() => toast.error("File tidak valid, gunakan format gambar")}
|
||||
onReject={() =>
|
||||
toast.error("File tidak valid, gunakan format gambar")
|
||||
}
|
||||
maxSize={5 * 1024 ** 2}
|
||||
accept={{ "image/*": [] }}
|
||||
radius="md"
|
||||
@@ -168,7 +202,11 @@ function EditBerita() {
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
|
||||
<IconUpload
|
||||
size={48}
|
||||
color={colors["blue-button"]}
|
||||
stroke={1.5}
|
||||
/>
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={48} color="red" stroke={1.5} />
|
||||
@@ -204,38 +242,20 @@ function EditBerita() {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Konten */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">
|
||||
Konten
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.content}
|
||||
onChange={(htmlContent) => {
|
||||
setFormData((prev) => ({ ...prev, content: htmlContent }));
|
||||
beritaState.berita.edit.form.content = htmlContent;
|
||||
}}
|
||||
onChange={(htmlContent) =>
|
||||
setFormData((prev) => ({ ...prev, content: htmlContent }))
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Select
|
||||
value={formData.kategoriBeritaId}
|
||||
onChange={(val) =>
|
||||
setFormData({ ...formData, kategoriBeritaId: val || "" })
|
||||
}
|
||||
label="Kategori"
|
||||
placeholder="Pilih kategori"
|
||||
data={
|
||||
beritaState.kategoriBerita.findMany.data?.map((v) => ({
|
||||
value: v.id,
|
||||
label: v.name,
|
||||
})) || []
|
||||
}
|
||||
clearable
|
||||
searchable
|
||||
required
|
||||
error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
|
||||
/>
|
||||
|
||||
{/* Action */}
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
|
||||
@@ -80,7 +80,7 @@ function DetailBerita() {
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text fz="md" c="dimmed">{data.deskripsi || '-'}</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
|
||||
@@ -100,7 +100,7 @@ export default function CreateBerita() {
|
||||
<TextInput
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul berita"
|
||||
value={beritaState.berita.create.form.judul}
|
||||
defaultValue={beritaState.berita.create.form.judul}
|
||||
onChange={(e) => (beritaState.berita.create.form.judul = e.target.value)}
|
||||
required
|
||||
/>
|
||||
@@ -112,7 +112,7 @@ export default function CreateBerita() {
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}))}
|
||||
value={beritaState.berita.create.form.kategoriBeritaId || null}
|
||||
defaultValue={beritaState.berita.create.form.kategoriBeritaId || null}
|
||||
onChange={(val: string | null) => {
|
||||
if (val) {
|
||||
const selected = beritaState.kategoriBerita.findMany.data?.find(
|
||||
@@ -131,12 +131,17 @@ export default function CreateBerita() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi berita"
|
||||
value={beritaState.berita.create.form.deskripsi}
|
||||
onChange={(e) => (beritaState.berita.create.form.deskripsi = e.target.value)}
|
||||
/>
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<CreateEditor
|
||||
value={beritaState.berita.create.form.deskripsi}
|
||||
onChange={(htmlContent) => {
|
||||
beritaState.berita.create.form.deskripsi = htmlContent;
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
|
||||
@@ -5,7 +5,6 @@ import {
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Image,
|
||||
Pagination,
|
||||
Paper,
|
||||
Skeleton,
|
||||
@@ -18,7 +17,7 @@ import {
|
||||
TableTr,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
|
||||
@@ -87,7 +86,6 @@ function ListBerita({ search }: { search: string }) {
|
||||
<TableTr>
|
||||
<TableTh style={{ width: '30%' }}>Judul</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Kategori</TableTh>
|
||||
<TableTh style={{ width: '25%' }}>Gambar</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
@@ -96,7 +94,7 @@ function ListBerita({ search }: { search: string }) {
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd style={{ width: '30%' }}>
|
||||
<Box w={200}>
|
||||
<Box w={150}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.judul}
|
||||
</Text>
|
||||
@@ -107,19 +105,6 @@ function ListBerita({ search }: { search: string }) {
|
||||
{item.kategoriBerita?.name || '-'}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '25%' }}>
|
||||
<Box
|
||||
w={80}
|
||||
h={80}
|
||||
style={{ borderRadius: 8, overflow: 'hidden' }}
|
||||
>
|
||||
{item.image?.link ? (
|
||||
<Image loading='lazy' src={item.image.link} alt="gambar" fit="cover" />
|
||||
) : (
|
||||
<Box bg={colors['blue-button']} w="100%" h="100%" />
|
||||
)}
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '15%' }}>
|
||||
<Button
|
||||
variant="light"
|
||||
|
||||
@@ -1,31 +1,11 @@
|
||||
// export function convertYoutubeUrlToEmbed(url: string) {
|
||||
// const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
|
||||
// return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
|
||||
// }
|
||||
|
||||
export function convertYoutubeUrlToEmbed(url: string) {
|
||||
const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
|
||||
const videoIdMatch = url.match(
|
||||
/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
|
||||
);
|
||||
return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// (url: string): string | null {
|
||||
// const watchRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/;
|
||||
// const shortRegex = /(?:https?:\/\/)?youtu\.be\/([^?]+)/;
|
||||
|
||||
// const matchWatch = url.match(watchRegex);
|
||||
// const matchShort = url.match(shortRegex);
|
||||
|
||||
// if (matchWatch) {
|
||||
// return `https://www.youtube.com/embed/${matchWatch[1]}`;
|
||||
// }
|
||||
|
||||
// if (matchShort) {
|
||||
// return `https://www.youtube.com/embed/${matchShort[1]}`;
|
||||
// }
|
||||
|
||||
// return null;
|
||||
// }
|
||||
|
||||
}
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { convertYoutubeUrlToEmbed } from '../../../lib/youtube-utils';
|
||||
@@ -31,17 +31,19 @@ function EditVideo() {
|
||||
linkVideo: '',
|
||||
});
|
||||
|
||||
// load data video sekali saat id ada
|
||||
useEffect(() => {
|
||||
const loadVideo = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await videoState.update.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
name: data.name || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
linkVideo: data.linkVideo || '',
|
||||
name: data.name ?? '',
|
||||
deskripsi: data.deskripsi ?? '',
|
||||
linkVideo: data.linkVideo ?? '',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -49,10 +51,16 @@ function EditVideo() {
|
||||
toast.error('Gagal memuat data video');
|
||||
}
|
||||
};
|
||||
|
||||
loadVideo();
|
||||
}, [params?.id]);
|
||||
|
||||
const embedLink = convertYoutubeUrlToEmbed(formData.linkVideo);
|
||||
const handleChange = useCallback(
|
||||
(field: keyof typeof formData, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
|
||||
@@ -63,7 +71,6 @@ function EditVideo() {
|
||||
|
||||
try {
|
||||
videoState.update.form = {
|
||||
...videoState.update.form,
|
||||
name: formData.name,
|
||||
deskripsi: formData.deskripsi,
|
||||
linkVideo: formData.linkVideo,
|
||||
@@ -77,11 +84,18 @@ function EditVideo() {
|
||||
}
|
||||
};
|
||||
|
||||
const embedLink = convertYoutubeUrlToEmbed(formData.linkVideo);
|
||||
|
||||
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">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@@ -103,7 +117,7 @@ function EditVideo() {
|
||||
label="Judul Video"
|
||||
placeholder="Masukkan judul video"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
onChange={(e) => handleChange('name', e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -112,7 +126,7 @@ function EditVideo() {
|
||||
label="Link Video YouTube"
|
||||
placeholder="https://www.youtube.com/watch?v=abc123"
|
||||
value={formData.linkVideo}
|
||||
onChange={(e) => setFormData({ ...formData, linkVideo: e.currentTarget.value })}
|
||||
onChange={(e) => handleChange('linkVideo', e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
{embedLink && (
|
||||
@@ -135,7 +149,7 @@ function EditVideo() {
|
||||
</Title>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(val) => setFormData({ ...formData, deskripsi: val })}
|
||||
onChange={(val) => handleChange('deskripsi', val)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -102,6 +102,7 @@ function DetailVideo() {
|
||||
fz="md"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
/>
|
||||
) : (
|
||||
<Text fz="sm" c="dimmed">Tidak ada deskripsi</Text>
|
||||
|
||||
@@ -80,7 +80,7 @@ function CreateVideo() {
|
||||
<TextInput
|
||||
label="Judul Video"
|
||||
placeholder="Masukkan judul video"
|
||||
value={videoState.create.form.name}
|
||||
defaultValue={videoState.create.form.name}
|
||||
onChange={(e) => {
|
||||
videoState.create.form.name = e.currentTarget.value;
|
||||
}}
|
||||
@@ -91,7 +91,7 @@ function CreateVideo() {
|
||||
<TextInput
|
||||
label="Link Video YouTube"
|
||||
placeholder="https://www.youtube.com/watch?v=abc123"
|
||||
value={link}
|
||||
defaultValue={link}
|
||||
onChange={(e) => setLink(e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
|
||||
import colors from '@/con/colors';
|
||||
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';
|
||||
|
||||
function EditAjukanPermohonan() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const stateAjukan = useProxy(stateLayananDesa.ajukanPermohonan);
|
||||
|
||||
// State lokal form
|
||||
const [formData, setFormData] = useState({
|
||||
nama: '',
|
||||
nik: '',
|
||||
alamat: '',
|
||||
nomorKk: '',
|
||||
kategoriId: '',
|
||||
});
|
||||
|
||||
// Load data awal
|
||||
useEffect(() => {
|
||||
stateLayananDesa.suratKeterangan.findManyAll.load();
|
||||
|
||||
const loadAjukan = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await stateAjukan.edit.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
nama: data.nama || '',
|
||||
nik: data.nik || '',
|
||||
alamat: data.alamat || '',
|
||||
nomorKk: data.nomorKk || '',
|
||||
kategoriId: data.kategoriId || '',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading ajukan:', error);
|
||||
toast.error('Gagal memuat data ajukan');
|
||||
}
|
||||
};
|
||||
|
||||
loadAjukan();
|
||||
}, [params?.id]);
|
||||
|
||||
// Handler untuk input controlled
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
stateAjukan.edit.form = {
|
||||
...stateAjukan.edit.form,
|
||||
...formData,
|
||||
};
|
||||
toast.success('Ajukan berhasil diperbarui!');
|
||||
router.push('/admin/desa/layanan/ajukan_permohonan');
|
||||
} catch (error) {
|
||||
console.error('Error updating ajukan:', error);
|
||||
toast.error('Terjadi kesalahan saat memperbarui ajukan');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* 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">
|
||||
Edit Ajukan Permohonan
|
||||
</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"
|
||||
placeholder="Masukkan nama"
|
||||
value={formData.nama}
|
||||
onChange={(e) => handleChange('nama', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
type="number"
|
||||
label="NIK"
|
||||
placeholder="Masukkan NIK"
|
||||
value={formData.nik}
|
||||
onChange={(e) => handleChange('nik', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Alamat"
|
||||
placeholder="Masukkan alamat"
|
||||
value={formData.alamat}
|
||||
onChange={(e) => handleChange('alamat', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
type="number"
|
||||
label="Nomor KK"
|
||||
placeholder="Masukkan nomor KK"
|
||||
value={formData.nomorKk}
|
||||
onChange={(e) => handleChange('nomorKk', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Kategori"
|
||||
placeholder="Pilih kategori"
|
||||
data={stateLayananDesa.suratKeterangan.findManyAll.data?.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}))}
|
||||
value={formData.kategoriId || null}
|
||||
onChange={(val) => handleChange('kategoriId', val || '')}
|
||||
searchable
|
||||
clearable
|
||||
nothingFoundMessage="Tidak ditemukan"
|
||||
required
|
||||
/>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditAjukanPermohonan;
|
||||
@@ -0,0 +1,172 @@
|
||||
'use client'
|
||||
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
|
||||
import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
|
||||
import colors from '@/con/colors';
|
||||
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';
|
||||
|
||||
function DetailAjukanPermohonan() {
|
||||
const ajukanPermohonanState = useProxy(stateLayananDesa.ajukanPermohonan);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
|
||||
useShallowEffect(() => {
|
||||
ajukanPermohonanState.findUnique.load(params?.id as string);
|
||||
}, []);
|
||||
|
||||
const handleHapus = () => {
|
||||
if (selectedId) {
|
||||
ajukanPermohonanState.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
router.push('/admin/desa/layanan/ajukan_permohonan');
|
||||
}
|
||||
};
|
||||
|
||||
if (!ajukanPermohonanState.findUnique.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
const data = ajukanPermohonanState.findUnique.data;
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
{/* Tombol Kembali */}
|
||||
<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 Surat Keterangan
|
||||
</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" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
|
||||
{data?.nama || '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">
|
||||
NIK
|
||||
</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
{data?.nik || '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">
|
||||
Alamat
|
||||
</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
|
||||
{data?.alamat || '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">
|
||||
Nomor KK
|
||||
</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
{data?.nomorKk || '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">
|
||||
Kategori
|
||||
</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
{data?.kategori.name || '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Group gap="sm">
|
||||
<Tooltip label="Hapus Surat" withArrow position="top">
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
setSelectedId(data.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
disabled={ajukanPermohonanState.delete.loading}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="Edit Surat" withArrow position="top">
|
||||
<Button
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/admin/desa/layanan/ajukan_permohonan/${data.id}/edit`
|
||||
)
|
||||
}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text="Apakah Anda yakin ingin menghapus ajukan permohonan ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailAjukanPermohonan;
|
||||
@@ -0,0 +1,155 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
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 { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../../_com/header';
|
||||
import stateLayananDesa from '../../../_state/desa/layananDesa';
|
||||
|
||||
function AjukanPermohonan() {
|
||||
const [search, setSearch] = useState("");
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Pelayanan Ajukan Permohonan'
|
||||
placeholder='Cari nama atau deskripsi...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListAjukanPermohonan search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ListAjukanPermohonan({ search }: { search: string }) {
|
||||
const AjukanPermohonanState = useProxy(stateLayananDesa.ajukanPermohonan);
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = AjukanPermohonanState.findMany;
|
||||
|
||||
useEffect(() => {
|
||||
load(page, 10, search);
|
||||
}, [page, search]);
|
||||
|
||||
// Loading state
|
||||
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">
|
||||
<Title order={4}>List Ajukan Permohonan</Title>
|
||||
<Box style={{ overflowX: "auto" }}>
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh style={{ width: '30%' }}>Nama</TableTh>
|
||||
<TableTh style={{ width: '45%' }}>Alamat</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>NIK</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{data.length > 0 ? (
|
||||
data.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd style={{ width: '30%' }}>
|
||||
<Box w={200}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.nama}
|
||||
</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '45%' }}>
|
||||
<Box w={200}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.alamat}
|
||||
</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '45%' }}>
|
||||
<Box w={200}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.nik}
|
||||
</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '15%' }}>
|
||||
<Button
|
||||
size="xs"
|
||||
radius="md"
|
||||
variant="light"
|
||||
color="blue"
|
||||
leftSection={<IconDeviceImacCog size={16} />}
|
||||
onClick={() =>
|
||||
router.push(`/admin/desa/layanan/ajukan_permohonan/${item.id}`)
|
||||
}
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={3}>
|
||||
<Center py={20}>
|
||||
<Text color="dimmed">Tidak ada data ajukan permohonan 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>
|
||||
);
|
||||
}
|
||||
|
||||
export default AjukanPermohonan;
|
||||
@@ -1,9 +1,20 @@
|
||||
'use client'
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
|
||||
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
|
||||
import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
@@ -12,17 +23,22 @@ import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditPelayananPendudukNonPermanent() {
|
||||
const router = useRouter();
|
||||
const params = useParams()
|
||||
const statePendudukNonPermanent = useProxy(stateLayananDesa.pelayananPendudukNonPermanen)
|
||||
const [formData, setFormData] = useState({
|
||||
name: statePendudukNonPermanent.findById.data?.name || '',
|
||||
deskripsi: statePendudukNonPermanent.findById.data?.deskripsi || '',
|
||||
})
|
||||
const params = useParams();
|
||||
const statePendudukNonPermanent = useProxy(
|
||||
stateLayananDesa.pelayananPendudukNonPermanen
|
||||
);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
deskripsi: '',
|
||||
});
|
||||
|
||||
// Load data sekali dari backend
|
||||
useEffect(() => {
|
||||
const loadPelayananPerizinan = async () => {
|
||||
const loadData = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await statePendudukNonPermanent.update.load(id);
|
||||
if (data) {
|
||||
@@ -32,27 +48,48 @@ function EditPelayananPendudukNonPermanent() {
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading pelayanan perizinan berusaha:", error);
|
||||
toast.error("Gagal memuat data pelayanan perizinan berusaha");
|
||||
console.error('Error loading data:', error);
|
||||
toast.error('Gagal memuat data pelayanan penduduk non permanent');
|
||||
}
|
||||
};
|
||||
loadPelayananPerizinan();
|
||||
|
||||
loadData();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleChange =
|
||||
(field: keyof typeof formData) =>
|
||||
(value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (statePendudukNonPermanent.findById.data) {
|
||||
statePendudukNonPermanent.findById.data.name = formData.name;
|
||||
statePendudukNonPermanent.findById.data.deskripsi = formData.deskripsi;
|
||||
statePendudukNonPermanent.update.update(statePendudukNonPermanent.findById.data)
|
||||
}
|
||||
router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent')
|
||||
}
|
||||
if (!statePendudukNonPermanent.findById.data) return;
|
||||
|
||||
// Update global state hanya di submit
|
||||
const updated = {
|
||||
...statePendudukNonPermanent.findById.data,
|
||||
name: formData.name,
|
||||
deskripsi: formData.deskripsi,
|
||||
};
|
||||
|
||||
await statePendudukNonPermanent.update.update(updated);
|
||||
router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent');
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap="xs">
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@@ -62,7 +99,7 @@ function EditPelayananPendudukNonPermanent() {
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: "100%", md: "50%" }}
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
@@ -77,22 +114,18 @@ function EditPelayananPendudukNonPermanent() {
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul"
|
||||
value={formData.name}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, name: e.target.value })
|
||||
}
|
||||
onChange={(e) => handleChange('name')(e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Posisi Field */}
|
||||
{/* Deskripsi Field */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">
|
||||
Deskripsi
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) => {
|
||||
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
|
||||
}}
|
||||
onChange={handleChange('deskripsi')}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@@ -104,7 +137,9 @@ function EditPelayananPendudukNonPermanent() {
|
||||
loading={statePendudukNonPermanent.update.loading}
|
||||
disabled={!formData.name}
|
||||
>
|
||||
{statePendudukNonPermanent.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
{statePendudukNonPermanent.update.loading
|
||||
? 'Menyimpan...'
|
||||
: 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
@@ -59,7 +59,7 @@ function PelayananPendudukNonPermanent() {
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/desa/layanan/pelayanan_penduduk_non_permanent/edit'
|
||||
`/admin/desa/layanan/pelayanan_penduduk_non_permanent/${data.id}`
|
||||
)
|
||||
}
|
||||
>
|
||||
@@ -91,6 +91,7 @@ function PelayananPendudukNonPermanent() {
|
||||
ta="justify"
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
style={{wordBreak: "break-word", whiteSpace: "normal"}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -1,9 +1,20 @@
|
||||
'use client'
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
|
||||
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
|
||||
import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
@@ -12,53 +23,90 @@ import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditPelayananPerizinanBerusaha() {
|
||||
const router = useRouter();
|
||||
const params = useParams()
|
||||
const statePerizinanBerusaha = useProxy(stateLayananDesa.pelayananPerizinanBerusaha)
|
||||
const params = useParams<{ id: string }>();
|
||||
const id = params?.id; // ini langsung string
|
||||
const state = useProxy(stateLayananDesa.pelayananPerizinanBerusaha);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [formData, setFormData] = useState({
|
||||
name: statePerizinanBerusaha.findById.data?.name || '',
|
||||
deskripsi: statePerizinanBerusaha.findById.data?.deskripsi || '',
|
||||
link: statePerizinanBerusaha.findById.data?.link || '',
|
||||
})
|
||||
id: '',
|
||||
name: '',
|
||||
deskripsi: '',
|
||||
link: '',
|
||||
});
|
||||
|
||||
// Load data detail
|
||||
useEffect(() => {
|
||||
const loadPelayananPerizinan = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
if (!id) {
|
||||
toast.error("ID tidak valid");
|
||||
return;
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const data = await statePerizinanBerusaha.update.load(id);
|
||||
setLoading(true);
|
||||
const data = await state.findById.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
name: data.name || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
link: data.link || '',
|
||||
id: data.id,
|
||||
name: data.name || "",
|
||||
deskripsi: data.deskripsi || "",
|
||||
link: data.link || "",
|
||||
});
|
||||
} else {
|
||||
toast.error("Data tidak ditemukan");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading pelayanan perizinan berusaha:", error);
|
||||
toast.error("Gagal memuat data pelayanan perizinan berusaha");
|
||||
console.error("Error loading data:", error);
|
||||
toast.error("Gagal memuat data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
loadPelayananPerizinan();
|
||||
}, [params?.id]);
|
||||
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
|
||||
const handleChange =
|
||||
(field: keyof typeof formData) =>
|
||||
(value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (statePerizinanBerusaha.findById.data) {
|
||||
statePerizinanBerusaha.findById.data.name = formData.name;
|
||||
statePerizinanBerusaha.findById.data.deskripsi = formData.deskripsi;
|
||||
statePerizinanBerusaha.findById.data.link = formData.link;
|
||||
statePerizinanBerusaha.update.update(statePerizinanBerusaha.findById.data)
|
||||
try {
|
||||
await state.update.update(formData);
|
||||
router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha');
|
||||
} catch (error) {
|
||||
console.error('Error updating pelayanan perizinan berusaha:', error);
|
||||
toast.error('Terjadi kesalahan saat update data');
|
||||
}
|
||||
router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha')
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton height={800} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack gap="xs">
|
||||
{/* Header Section */}
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@@ -67,9 +115,9 @@ function EditPelayananPerizinanBerusaha() {
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Section */}
|
||||
{/* Form */}
|
||||
<Paper
|
||||
w={{ base: "100%", md: "50%" }}
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="md"
|
||||
radius="md"
|
||||
@@ -79,47 +127,43 @@ function EditPelayananPerizinanBerusaha() {
|
||||
<Stack gap="xs">
|
||||
<Title order={3}>Edit Pelayanan Perizinan Berusaha</Title>
|
||||
|
||||
{/* Nama Field */}
|
||||
<TextInput
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
onChange={(e) => handleChange('name')(e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Link Field */}
|
||||
<TextInput
|
||||
label="Link"
|
||||
placeholder="Masukkan link terkait"
|
||||
value={formData.link}
|
||||
onChange={(e) => setFormData({ ...formData, link: e.target.value })}
|
||||
onChange={(e) => handleChange('link')(e.target.value)}
|
||||
/>
|
||||
|
||||
{/* Deskripsi Field */}
|
||||
<Box>
|
||||
<Title order={6}>Deskripsi</Title>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(val) => setFormData({ ...formData, deskripsi: val })}
|
||||
onChange={handleChange('deskripsi')}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<Group>
|
||||
<Button
|
||||
bg={colors['blue-button']}
|
||||
onClick={handleSubmit}
|
||||
loading={statePerizinanBerusaha.update.loading}
|
||||
loading={state.update.loading}
|
||||
disabled={!formData.name}
|
||||
>
|
||||
{statePerizinanBerusaha.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
{state.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => router.back()}
|
||||
disabled={statePerizinanBerusaha.update.loading}
|
||||
disabled={state.update.loading}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
@@ -19,35 +20,58 @@ import {
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { IconEdit } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import stateLayananDesa from '../../../_state/desa/layananDesa';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
function PerizinanBerusaha() {
|
||||
const router = useRouter();
|
||||
const pelayananPerizinanBerusaha = useProxy(
|
||||
stateLayananDesa.pelayananPerizinanBerusaha
|
||||
);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [active, setActive] = useState(1);
|
||||
const nextStep = () =>
|
||||
setActive((current) => (current < 6 ? current + 1 : current));
|
||||
const prevStep = () =>
|
||||
setActive((current) => (current > 0 ? current - 1 : current));
|
||||
|
||||
useShallowEffect(() => {
|
||||
pelayananPerizinanBerusaha.findById.load('1');
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// You should get the ID from your router query or params
|
||||
const id = '1'; // Replace with actual ID or get from URL params
|
||||
await pelayananPerizinanBerusaha.findById.load(id);
|
||||
} catch (err) {
|
||||
setError('Gagal memuat data');
|
||||
console.error('Error:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
if (!pelayananPerizinanBerusaha.findById.data) {
|
||||
if (loading) {
|
||||
return (
|
||||
<Stack align="center" justify="center" py="xl">
|
||||
<Skeleton radius="md" height={800} />
|
||||
<Skeleton height={800} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !pelayananPerizinanBerusaha.findById.data) {
|
||||
return (
|
||||
<Center h={200}>
|
||||
<Text>{error || 'Data tidak ditemukan'}</Text>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
const data = pelayananPerizinanBerusaha.findById.data;
|
||||
|
||||
return (
|
||||
@@ -69,7 +93,7 @@ function PerizinanBerusaha() {
|
||||
radius="md"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/desa/layanan/pelayanan_perizinan_berusaha/edit'
|
||||
`/admin/desa/layanan/pelayanan_perizinan_berusaha/${data.id}`
|
||||
)
|
||||
}
|
||||
>
|
||||
@@ -101,6 +125,7 @@ function PerizinanBerusaha() {
|
||||
ta="justify"
|
||||
fz={{ base: '1rem', md: '1.2rem' }}
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi }}
|
||||
style={{wordBreak: "break-word", whiteSpace: "normal"}}
|
||||
/>
|
||||
|
||||
<Text
|
||||
@@ -182,3 +207,4 @@ function PerizinanBerusaha() {
|
||||
}
|
||||
|
||||
export default PerizinanBerusaha;
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
'use client'
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
|
||||
import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
|
||||
import colors from '@/con/colors';
|
||||
@@ -19,7 +18,7 @@ import {
|
||||
import { Dropzone } from '@mantine/dropzone';
|
||||
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
@@ -28,17 +27,23 @@ function EditSuratKeterangan() {
|
||||
const params = useParams();
|
||||
const stateSurat = useProxy(stateLayananDesa.suratKeterangan);
|
||||
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||||
const [previewImage2, setPreviewImage2] = useState<string | null>(null);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [file2, setFile2] = useState<File | null>(null);
|
||||
// state lokal untuk form
|
||||
const [formData, setFormData] = useState({
|
||||
name: stateSurat.edit.form.name,
|
||||
deskripsi: stateSurat.edit.form.deskripsi,
|
||||
imageId: stateSurat.edit.form.imageId,
|
||||
image2Id: stateSurat.edit.form.image2Id,
|
||||
name: '',
|
||||
deskripsi: '',
|
||||
imageId: '',
|
||||
image2Id: '',
|
||||
});
|
||||
|
||||
// state file upload
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [file2, setFile2] = useState<File | null>(null);
|
||||
|
||||
// state preview gambar
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||||
const [previewImage2, setPreviewImage2] = useState<string | null>(null);
|
||||
|
||||
// load data awal
|
||||
useEffect(() => {
|
||||
const loadSurat = async () => {
|
||||
const id = params?.id as string;
|
||||
@@ -46,33 +51,39 @@ function EditSuratKeterangan() {
|
||||
|
||||
try {
|
||||
const data = await stateSurat.edit.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
name: data.name || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
imageId: data.imageId || '',
|
||||
image2Id: data.image2Id || '',
|
||||
});
|
||||
if (!data) return;
|
||||
|
||||
setPreviewImage(data.image?.link || null);
|
||||
setPreviewImage2(data.image2?.link || null);
|
||||
}
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
...{
|
||||
name: prev.name || data.name || "",
|
||||
deskripsi: prev.deskripsi || data.deskripsi || "",
|
||||
imageId: prev.imageId || data.imageId || "",
|
||||
image2Id: prev.image2Id || data.image2Id || "",
|
||||
},
|
||||
}));
|
||||
|
||||
if (data.image?.link && !previewImage) setPreviewImage(data.image.link);
|
||||
if (data.image2?.link && !previewImage2) setPreviewImage2(data.image2.link);
|
||||
} catch (error) {
|
||||
console.error('Error loading surat:', error);
|
||||
toast.error('Gagal memuat data surat');
|
||||
console.error("Error loading surat:", error);
|
||||
toast.error("Gagal memuat data surat");
|
||||
}
|
||||
};
|
||||
|
||||
loadSurat();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [params?.id]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
stateSurat.edit.form = {
|
||||
...stateSurat.edit.form,
|
||||
...formData,
|
||||
};
|
||||
|
||||
|
||||
// handler untuk submit
|
||||
const handleSubmit = useCallback(async () => {
|
||||
try {
|
||||
// update form global hanya saat submit
|
||||
stateSurat.edit.form = { ...stateSurat.edit.form, ...formData };
|
||||
|
||||
// upload file 1
|
||||
if (file) {
|
||||
const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
|
||||
const uploaded = res.data?.data;
|
||||
@@ -80,6 +91,7 @@ function EditSuratKeterangan() {
|
||||
stateSurat.edit.form.imageId = uploaded.id;
|
||||
}
|
||||
|
||||
// upload file 2
|
||||
if (file2) {
|
||||
const res = await ApiFetch.api.fileStorage.create.post({ file: file2, name: file2.name });
|
||||
const uploaded = res.data?.data;
|
||||
@@ -94,7 +106,7 @@ function EditSuratKeterangan() {
|
||||
console.error('Error updating surat:', error);
|
||||
toast.error('Terjadi kesalahan saat memperbarui surat');
|
||||
}
|
||||
};
|
||||
}, [formData, file, file2, router, stateSurat.edit]);
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
@@ -119,28 +131,32 @@ function EditSuratKeterangan() {
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Input nama */}
|
||||
<TextInput
|
||||
label="Nama Surat Keterangan"
|
||||
placeholder="Masukkan nama surat keterangan"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Input deskripsi */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Konten
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) => setFormData({ ...formData, deskripsi: htmlContent })}
|
||||
onChange={(htmlContent) =>
|
||||
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Upload Gambar 1 */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Gambar Konten Pelayanan
|
||||
Gambar Konten Pelayanan
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
|
||||
@@ -95,6 +95,7 @@ function DetailSuratKeterangan() {
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: data?.deskripsi || '-',
|
||||
}}
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -106,9 +106,9 @@ function CreateSuratKeterangan() {
|
||||
<Stack gap="md">
|
||||
{/* Nama Surat */}
|
||||
<TextInput
|
||||
value={stateSurat.create.form.name}
|
||||
defaultValue={stateSurat.create.form.name}
|
||||
onChange={(val) => (stateSurat.create.form.name = val.target.value)}
|
||||
label={<Text fz="sm" fw="bold">Nama Surat Keterangan</Text>}
|
||||
label="Nama Surat Keterangan"
|
||||
placeholder="Masukkan nama surat keterangan"
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -119,6 +119,7 @@ function ListSuratKeterangan({ search }: { search: string }) {
|
||||
<Box w={200}>
|
||||
<Text truncate="end" lineClamp={1} fz="sm" c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
|
||||
style={{wordBreak: "break-word", whiteSpace: "normal"}}
|
||||
/>
|
||||
</Box>
|
||||
</TableTd>
|
||||
|
||||
@@ -8,17 +8,15 @@ import {
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
|
||||
|
||||
function EditPelayananTelunjukSakti() {
|
||||
const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
|
||||
@@ -26,22 +24,24 @@ function EditPelayananTelunjukSakti() {
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: stateTelunjukDesa.edit.form.name,
|
||||
deskripsi: stateTelunjukDesa.edit.form.deskripsi,
|
||||
link: stateTelunjukDesa.edit.form.link,
|
||||
name: '',
|
||||
deskripsi: '',
|
||||
link: '',
|
||||
});
|
||||
|
||||
// Load data awal hanya sekali (pas ada id)
|
||||
useEffect(() => {
|
||||
const loadPelayananTelunjukSakti = async () => {
|
||||
const loadData = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
const data = await stateTelunjukDesa.edit.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
name: data.name || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
link: data.link || '',
|
||||
name: data.name ?? '',
|
||||
deskripsi: data.deskripsi ?? '',
|
||||
link: data.link ?? '',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -49,9 +49,19 @@ function EditPelayananTelunjukSakti() {
|
||||
toast.error('Gagal memuat data pelayanan telunjuk sakti');
|
||||
}
|
||||
};
|
||||
loadPelayananTelunjukSakti();
|
||||
|
||||
loadData();
|
||||
}, [params?.id]);
|
||||
|
||||
// Handler input controlled
|
||||
const handleChange = useCallback(
|
||||
(field: keyof typeof formData, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// Submit: update global state hanya saat simpan
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
stateTelunjukDesa.edit.form = {
|
||||
@@ -95,27 +105,25 @@ function EditPelayananTelunjukSakti() {
|
||||
label="Nama Pelayanan"
|
||||
placeholder="Masukkan nama pelayanan"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
onChange={(e) => handleChange('name', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Deskripsi pakai editor */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) => setFormData({ ...formData, deskripsi: htmlContent })}
|
||||
/>
|
||||
</Box>
|
||||
{/* Deskripsi */}
|
||||
<TextInput
|
||||
value={formData.deskripsi}
|
||||
onChange={(e) => handleChange('deskripsi', e.target.value)}
|
||||
label="Judul Link"
|
||||
placeholder="Masukkan judul link"
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Link */}
|
||||
<TextInput
|
||||
label="Link"
|
||||
placeholder="Masukkan link terkait"
|
||||
placeholder="Masukkan alamat link"
|
||||
value={formData.link}
|
||||
onChange={(e) => setFormData({ ...formData, link: e.target.value })}
|
||||
onChange={(e) => handleChange('link', e.target.value)}
|
||||
/>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
|
||||
@@ -103,6 +103,7 @@ function DetailPelayananTelunjukSakti() {
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{data.link}
|
||||
@@ -124,6 +125,7 @@ function DetailPelayananTelunjukSakti() {
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: data?.deskripsi || '-',
|
||||
}}
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -8,15 +8,14 @@ import {
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function CreatePelayananTelunjukDesa() {
|
||||
const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
|
||||
@@ -68,33 +67,35 @@ function CreatePelayananTelunjukDesa() {
|
||||
<Stack gap="md">
|
||||
{/* Nama */}
|
||||
<TextInput
|
||||
value={stateTelunjukDesa.create.form.name}
|
||||
defaultValue={stateTelunjukDesa.create.form.name}
|
||||
onChange={(val) => {
|
||||
stateTelunjukDesa.create.form.name = val.target.value;
|
||||
}}
|
||||
label={<Text fz="sm" fw="bold">Nama Pelayanan</Text>}
|
||||
label="Nama Pelayanan"
|
||||
placeholder="Masukkan nama pelayanan telunjuk sakti desa"
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Deskripsi */}
|
||||
<TextInput
|
||||
value={stateTelunjukDesa.create.form.deskripsi}
|
||||
defaultValue={stateTelunjukDesa.create.form.deskripsi}
|
||||
onChange={(val) => {
|
||||
stateTelunjukDesa.create.form.deskripsi = val.target.value;
|
||||
}}
|
||||
label={<Text fz="sm" fw="bold">Deskripsi</Text>}
|
||||
placeholder="Masukkan deskripsi pelayanan"
|
||||
label="Judul Link"
|
||||
placeholder="Masukkan judul link"
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Link */}
|
||||
<TextInput
|
||||
value={stateTelunjukDesa.create.form.link}
|
||||
defaultValue={stateTelunjukDesa.create.form.link}
|
||||
onChange={(val) => {
|
||||
stateTelunjukDesa.create.form.link = val.target.value;
|
||||
}}
|
||||
label={<Text fz="sm" fw="bold">Link</Text>}
|
||||
label="Link"
|
||||
placeholder="Masukkan link pelayanan"
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Tombol Simpan */}
|
||||
|
||||
@@ -261,7 +261,7 @@ function ListPelayananTelunjukSakti({ search }: { search: string }) {
|
||||
<TableTd>
|
||||
<Box w={200}>
|
||||
<a href={item.link} target="_blank" rel="noopener noreferrer">
|
||||
<Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} truncate="end" fz={"sm"} />
|
||||
<Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} style={{wordBreak: "break-word", whiteSpace: "normal"}} truncate="end" fz={"sm"} />
|
||||
</a>
|
||||
</Box>
|
||||
</TableTd>
|
||||
|
||||
@@ -24,18 +24,22 @@ import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditPenghargaan() {
|
||||
const statePenghargaan = useProxy(penghargaanState)
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null)
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [formData, setFormData] = useState({
|
||||
name: statePenghargaan.findUnique.data?.name || '',
|
||||
juara: statePenghargaan.findUnique.data?.juara || '',
|
||||
deskripsi: statePenghargaan.findUnique.data?.deskripsi || '',
|
||||
imageId: statePenghargaan.findUnique.data?.imageId || '',
|
||||
})
|
||||
const statePenghargaan = useProxy(penghargaanState);
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
|
||||
// Lokal formData
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
juara: '',
|
||||
deskripsi: '',
|
||||
imageId: '',
|
||||
});
|
||||
|
||||
// Load data pertama kali
|
||||
useEffect(() => {
|
||||
const loadPenghargaan = async () => {
|
||||
const id = params?.id as string;
|
||||
@@ -56,43 +60,43 @@ function EditPenghargaan() {
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading penghargaan:", error);
|
||||
toast.error("Gagal memuat data penghargaan");
|
||||
console.error('Error loading penghargaan:', error);
|
||||
toast.error('Gagal memuat data penghargaan');
|
||||
}
|
||||
};
|
||||
|
||||
loadPenghargaan();
|
||||
}, [params?.id]);
|
||||
|
||||
// Submit
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// Sync ke global state saat submit
|
||||
statePenghargaan.edit.form = {
|
||||
...statePenghargaan.edit.form,
|
||||
name: formData.name,
|
||||
juara: formData.juara,
|
||||
deskripsi: formData.deskripsi,
|
||||
imageId: formData.imageId,
|
||||
}
|
||||
...formData,
|
||||
};
|
||||
|
||||
// Upload file baru (kalau ada)
|
||||
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");
|
||||
return toast.error('Gagal upload gambar');
|
||||
}
|
||||
|
||||
statePenghargaan.edit.form.imageId = uploaded.id;
|
||||
}
|
||||
|
||||
await statePenghargaan.edit.update();
|
||||
toast.success("Penghargaan berhasil diperbarui!");
|
||||
router.push("/admin/desa/penghargaan");
|
||||
toast.success('Penghargaan berhasil diperbarui!');
|
||||
router.push('/admin/desa/penghargaan');
|
||||
} catch (error) {
|
||||
console.error("Error updating penghargaan:", error);
|
||||
toast.error("Terjadi kesalahan saat memperbarui penghargaan");
|
||||
console.error('Error updating penghargaan:', error);
|
||||
toast.error('Terjadi kesalahan saat memperbarui penghargaan');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
@@ -123,7 +127,7 @@ function EditPenghargaan() {
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul penghargaan"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -132,7 +136,7 @@ function EditPenghargaan() {
|
||||
label="Juara"
|
||||
placeholder="Masukkan juara"
|
||||
value={formData.juara}
|
||||
onChange={(e) => setFormData({ ...formData, juara: e.target.value })}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, juara: e.target.value }))}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -182,7 +186,11 @@ function EditPenghargaan() {
|
||||
src={previewImage}
|
||||
alt="Preview Gambar"
|
||||
radius="md"
|
||||
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
|
||||
style={{
|
||||
maxHeight: 220,
|
||||
objectFit: 'contain',
|
||||
border: `1px solid ${colors['blue-button']}`,
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
@@ -196,10 +204,9 @@ function EditPenghargaan() {
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) => {
|
||||
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
|
||||
statePenghargaan.edit.form.deskripsi = htmlContent;
|
||||
}}
|
||||
onChange={(htmlContent) =>
|
||||
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -122,6 +122,7 @@ function DetailPenghargaan() {
|
||||
fz="md"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -87,17 +87,17 @@ function CreatePenghargaan() {
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
value={statePenghargaan.create.form.name}
|
||||
defaultValue={statePenghargaan.create.form.name}
|
||||
onChange={(val) => (statePenghargaan.create.form.name = val.target.value)}
|
||||
label={<Text fz="sm" fw="bold">Nama Penghargaan</Text>}
|
||||
label="Nama Penghargaan"
|
||||
placeholder="Masukkan nama penghargaan"
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
value={statePenghargaan.create.form.juara}
|
||||
defaultValue={statePenghargaan.create.form.juara}
|
||||
onChange={(val) => (statePenghargaan.create.form.juara = val.target.value)}
|
||||
label={<Text fz="sm" fw="bold">Juara</Text>}
|
||||
label="Juara"
|
||||
placeholder="Masukkan juara"
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -108,6 +108,7 @@ function ListPenghargaan({ search }: { search: string }) {
|
||||
fz="sm"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
|
||||
style={{wordBreak: "break-word", whiteSpace: "normal"}}
|
||||
/>
|
||||
</Box>
|
||||
</TableTd>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client';
|
||||
|
||||
import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
@@ -11,7 +12,6 @@ import {
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
Text,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
@@ -24,10 +24,9 @@ function EditKategoriPengumuman() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: editState.update.form.name || '',
|
||||
});
|
||||
const [formData, setFormData] = useState({ name: '' });
|
||||
|
||||
// Load data awal sekali aja
|
||||
useEffect(() => {
|
||||
const loadKategori = async () => {
|
||||
const id = params?.id as string;
|
||||
@@ -36,9 +35,7 @@ function EditKategoriPengumuman() {
|
||||
try {
|
||||
const data = await editState.update.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
name: data.name || '',
|
||||
});
|
||||
setFormData({ name: data.name || '' });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading kategori Pengumuman:', error);
|
||||
@@ -49,8 +46,16 @@ function EditKategoriPengumuman() {
|
||||
loadKategori();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// Update global state hanya di sini
|
||||
editState.update.form = {
|
||||
...editState.update.form,
|
||||
name: formData.name,
|
||||
@@ -95,16 +100,10 @@ function EditKategoriPengumuman() {
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={
|
||||
<Text fz="sm" fw="bold">
|
||||
Nama Kategori Pengumuman
|
||||
</Text>
|
||||
}
|
||||
label="Nama Kategori Pengumuman"
|
||||
placeholder="Masukkan nama kategori Pengumuman"
|
||||
value={formData.name}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, name: e.target.value })
|
||||
}
|
||||
onChange={(e) => handleChange('name', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
|
||||
@@ -7,10 +7,9 @@ import {
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -62,9 +61,9 @@ function CreateKategoriPengumuman() {
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={<Text fw="bold" fz="sm">Nama Kategori Pengumuman</Text>}
|
||||
label="Nama Kategori Pengumuman"
|
||||
placeholder="Masukkan nama kategori pengumuman"
|
||||
value={createState.create.form.name || ''}
|
||||
defaultValue={createState.create.form.name || ''}
|
||||
onChange={(e) => (createState.create.form.name = e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -28,16 +28,16 @@ function EditPengumuman() {
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
judul: editState.pengumuman.edit.form.judul || "",
|
||||
deskripsi: editState.pengumuman.edit.form.deskripsi || "",
|
||||
categoryPengumumanId:
|
||||
editState.pengumuman.edit.form.categoryPengumumanId || "",
|
||||
content: editState.pengumuman.edit.form.content || "",
|
||||
judul: "",
|
||||
deskripsi: "",
|
||||
categoryPengumumanId: "",
|
||||
content: "",
|
||||
});
|
||||
|
||||
// Load pengumuman by id saat pertama kali
|
||||
// Load kategori & pengumuman by id saat pertama kali
|
||||
useEffect(() => {
|
||||
editState.category.findMany.load();
|
||||
|
||||
const loadpengumuman = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
@@ -61,9 +61,13 @@ function EditPengumuman() {
|
||||
loadpengumuman();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleChange = (field: keyof typeof formData, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// update global state
|
||||
// update global state hanya sekali pas submit
|
||||
editState.pengumuman.edit.form = {
|
||||
...editState.pengumuman.edit.form,
|
||||
...formData,
|
||||
@@ -109,7 +113,7 @@ function EditPengumuman() {
|
||||
label="Judul Pengumuman"
|
||||
placeholder="Masukkan judul"
|
||||
value={formData.judul}
|
||||
onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
|
||||
onChange={(e) => handleChange("judul", e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -117,17 +121,13 @@ function EditPengumuman() {
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi"
|
||||
value={formData.deskripsi}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, deskripsi: e.target.value })
|
||||
}
|
||||
onChange={(e) => handleChange("deskripsi", e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={formData.categoryPengumumanId}
|
||||
onChange={(val) =>
|
||||
setFormData({ ...formData, categoryPengumumanId: val || "" })
|
||||
}
|
||||
onChange={(val) => handleChange("categoryPengumumanId", val || "")}
|
||||
label="Kategori"
|
||||
placeholder="Pilih kategori"
|
||||
data={
|
||||
@@ -150,9 +150,7 @@ function EditPengumuman() {
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.content}
|
||||
onChange={(htmlContent) =>
|
||||
setFormData({ ...formData, content: htmlContent })
|
||||
}
|
||||
onChange={(htmlContent) => handleChange("content", htmlContent)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -97,7 +97,7 @@ export default function DetailPengumuman() {
|
||||
<Text fz="lg" fw="bold">
|
||||
Deskripsi
|
||||
</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
|
||||
{data?.deskripsi || '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
@@ -112,6 +112,7 @@ export default function DetailPengumuman() {
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: data?.content || '-',
|
||||
}}
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -68,16 +68,16 @@ function CreatePengumuman() {
|
||||
<Stack gap="md">
|
||||
{/* Judul */}
|
||||
<TextInput
|
||||
value={pengumumanState.pengumuman.create.form.judul}
|
||||
defaultValue={pengumumanState.pengumuman.create.form.judul}
|
||||
onChange={(val) => (pengumumanState.pengumuman.create.form.judul = val.target.value)}
|
||||
label={<Text fz="sm" fw="bold">Judul</Text>}
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul pengumuman"
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Kategori */}
|
||||
<Select
|
||||
label={<Text fz="sm" fw="bold">Kategori</Text>}
|
||||
label="Kategori"
|
||||
placeholder="Pilih kategori"
|
||||
value={pengumumanState.pengumuman.create.form.categoryPengumumanId || ""}
|
||||
onChange={(val) => {
|
||||
@@ -93,9 +93,9 @@ function CreatePengumuman() {
|
||||
|
||||
{/* Deskripsi Singkat */}
|
||||
<TextInput
|
||||
value={pengumumanState.pengumuman.create.form.deskripsi}
|
||||
defaultValue={pengumumanState.pengumuman.create.form.deskripsi}
|
||||
onChange={(val) => (pengumumanState.pengumuman.create.form.deskripsi = val.target.value)}
|
||||
label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi singkat"
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -94,9 +94,11 @@ function ListPengumuman({ search }: { search: string }) {
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.judul}
|
||||
</Text>
|
||||
<Box w={150}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.judul}
|
||||
</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text fz="sm" c="dimmed">
|
||||
|
||||
@@ -24,9 +24,10 @@ function EditKategoriPotensi() {
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
nama: editState.update.form.nama || '',
|
||||
nama: '',
|
||||
});
|
||||
|
||||
// Load data dari backend -> isi ke formData lokal
|
||||
useEffect(() => {
|
||||
const loadKategori = async () => {
|
||||
const id = params?.id as string;
|
||||
@@ -48,8 +49,16 @@ function EditKategoriPotensi() {
|
||||
loadKategori();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// Update global state hanya pas submit
|
||||
editState.update.form = {
|
||||
...editState.update.form,
|
||||
nama: formData.nama,
|
||||
@@ -68,7 +77,12 @@ function EditKategoriPotensi() {
|
||||
<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">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@@ -90,11 +104,11 @@ function EditKategoriPotensi() {
|
||||
label="Nama Kategori Potensi"
|
||||
placeholder="Masukkan nama kategori potensi"
|
||||
value={formData.nama}
|
||||
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
|
||||
onChange={(e) => handleChange('nama', e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Group justify="right">
|
||||
<Group justify="flex-end">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
|
||||
@@ -7,10 +7,9 @@ import {
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -62,9 +61,9 @@ function CreateKategoriPotensi() {
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={<Text fw="bold" fz="sm">Nama Kategori Potensi</Text>}
|
||||
label="Nama Kategori Potensi"
|
||||
placeholder="Masukkan nama kategori potensi"
|
||||
value={createState.create.form.nama || ''}
|
||||
defaultValue={createState.create.form.nama || ''}
|
||||
onChange={(e) => (createState.create.form.nama = e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip, Pagination } from '@mantine/core';
|
||||
import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip, Pagination, Group } from '@mantine/core';
|
||||
import { IconEdit, IconSearch, IconTrash, IconPlus } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
@@ -60,7 +60,7 @@ function ListKategoriPotensi({ search }: { search: string }) {
|
||||
<Box py={10}>
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Stack>
|
||||
<Box style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 }}>
|
||||
<Group justify="space-between">
|
||||
<Title order={4}>List Kategori Potensi</Title>
|
||||
<Tooltip label="Tambah Kategori Potensi" withArrow>
|
||||
<Button
|
||||
@@ -72,7 +72,7 @@ function ListKategoriPotensi({ search }: { search: string }) {
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Group>
|
||||
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
|
||||
|
||||
@@ -40,12 +40,18 @@ function EditPotensi() {
|
||||
imageId: "",
|
||||
});
|
||||
|
||||
// handle input changes
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
potensiDesaState.kategoriPotensi.findMany.load();
|
||||
|
||||
const loadPotensi = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
|
||||
try {
|
||||
const data = await potensiState.edit.load(id);
|
||||
if (data) {
|
||||
@@ -56,7 +62,17 @@ function EditPotensi() {
|
||||
content: data.content || "",
|
||||
imageId: data.imageId || "",
|
||||
});
|
||||
|
||||
|
||||
// // merge, bukan replace
|
||||
// setFormData((prev) => ({
|
||||
// ...prev,
|
||||
// name: data.name ?? prev.name,
|
||||
// deskripsi: data.deskripsi ?? prev.deskripsi,
|
||||
// kategoriId: data.kategoriId ?? prev.kategoriId,
|
||||
// content: data.content ?? prev.content,
|
||||
// imageId: data.imageId ?? prev.imageId,
|
||||
// }));
|
||||
|
||||
if (data?.image?.link) {
|
||||
setPreviewImage(data.image.link);
|
||||
}
|
||||
@@ -66,28 +82,34 @@ function EditPotensi() {
|
||||
toast.error("Gagal memuat data potensi");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
loadPotensi();
|
||||
}, [params?.id]);
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
potensiState.edit.form = {
|
||||
...potensiState.edit.form,
|
||||
...formData,
|
||||
};
|
||||
let imageId = formData.imageId;
|
||||
|
||||
if (file) {
|
||||
const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
|
||||
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");
|
||||
}
|
||||
|
||||
potensiState.edit.form.imageId = uploaded.id;
|
||||
imageId = uploaded.id;
|
||||
}
|
||||
|
||||
potensiState.edit.form = {
|
||||
...formData,
|
||||
imageId,
|
||||
};
|
||||
|
||||
await potensiState.edit.update();
|
||||
toast.success("Potensi berhasil diperbarui!");
|
||||
router.push("/admin/desa/potensi/list-potensi");
|
||||
@@ -101,7 +123,12 @@ function EditPotensi() {
|
||||
<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">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors["blue-button"]} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@@ -123,21 +150,25 @@ function EditPotensi() {
|
||||
label="Judul Potensi"
|
||||
placeholder="Masukkan judul"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
onChange={(e) => handleChange("name", e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi"
|
||||
value={formData.deskripsi}
|
||||
onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
|
||||
required
|
||||
/>
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) =>
|
||||
handleChange("deskripsi", htmlContent)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Select
|
||||
value={formData.kategoriId}
|
||||
onChange={(val) => setFormData({ ...formData, kategoriId: val || "" })}
|
||||
onChange={(val) => handleChange("kategoriId", val || "")}
|
||||
label="Kategori"
|
||||
placeholder="Pilih kategori"
|
||||
data={
|
||||
@@ -164,7 +195,9 @@ function EditPotensi() {
|
||||
setPreviewImage(URL.createObjectURL(selectedFile));
|
||||
}
|
||||
}}
|
||||
onReject={() => toast.error("File tidak valid, gunakan format gambar")}
|
||||
onReject={() =>
|
||||
toast.error("File tidak valid, gunakan format gambar")
|
||||
}
|
||||
maxSize={5 * 1024 ** 2}
|
||||
accept={{ "image/*": [] }}
|
||||
radius="md"
|
||||
@@ -172,7 +205,11 @@ function EditPotensi() {
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
|
||||
<IconUpload
|
||||
size={48}
|
||||
color={colors["blue-button"]}
|
||||
stroke={1.5}
|
||||
/>
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={48} color="red" stroke={1.5} />
|
||||
@@ -214,7 +251,9 @@ function EditPotensi() {
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.content}
|
||||
onChange={(htmlContent) => setFormData({ ...formData, content: htmlContent })}
|
||||
onChange={(htmlContent) =>
|
||||
handleChange("content", htmlContent)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@ export default function DetailPotensi() {
|
||||
potensiState.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
router.push("/admin/desa/potensi");
|
||||
router.push("/admin/desa/potensi/list-potensi");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -77,7 +77,7 @@ export default function DetailPotensi() {
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text fz="md" c="dimmed">{data.deskripsi || '-'}</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
@@ -103,6 +103,7 @@ export default function DetailPotensi() {
|
||||
fz="md"
|
||||
c="dimmed"
|
||||
dangerouslySetInnerHTML={{ __html: data.content || '-' }}
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
@@ -93,25 +93,29 @@ function CreatePotensi() {
|
||||
<Stack gap="md">
|
||||
{/* Judul */}
|
||||
<TextInput
|
||||
value={potensiState.create.form.name}
|
||||
defaultValue={potensiState.create.form.name}
|
||||
onChange={(val) => (potensiState.create.form.name = val.target.value)}
|
||||
label={<Text fz="sm" fw="bold">Judul</Text>}
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul potensi"
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Deskripsi */}
|
||||
<TextInput
|
||||
value={potensiState.create.form.deskripsi}
|
||||
onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
|
||||
label={<Text fz="sm" fw="bold">Deskripsi</Text>}
|
||||
placeholder="Masukkan deskripsi singkat"
|
||||
required
|
||||
/>
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<CreateEditor
|
||||
value={potensiState.create.form.deskripsi}
|
||||
onChange={(htmlContent) => {
|
||||
potensiState.create.form.deskripsi = htmlContent;
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Kategori */}
|
||||
<Select
|
||||
label={<Text fz="sm" fw="bold">Kategori</Text>}
|
||||
label="Kategori"
|
||||
placeholder="Pilih kategori"
|
||||
value={potensiState.create.form.kategoriId || ""}
|
||||
onChange={(val) => {
|
||||
|
||||
@@ -102,19 +102,25 @@ function ListPotensi({ search }: { search: string }) {
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.name}
|
||||
</Text>
|
||||
<Box w={200}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
|
||||
<Box w={200}>
|
||||
<Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Box w={300}>
|
||||
<Text
|
||||
lineClamp={1}
|
||||
truncate
|
||||
fz="sm"
|
||||
dangerouslySetInnerHTML={{ __html: item.deskripsi }}
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
/>
|
||||
</Box>
|
||||
</TableTd>
|
||||
|
||||
@@ -115,7 +115,7 @@ function Page() {
|
||||
<TextInput
|
||||
label={<Text fw="bold">Judul</Text>}
|
||||
placeholder="Judul lambang"
|
||||
value={lambangState.update.form.judul}
|
||||
defaultValue={lambangState.update.form.judul}
|
||||
onChange={(e) => lambangState.update.form.judul = e.currentTarget.value}
|
||||
error={!lambangState.update.form.judul && "Judul wajib diisi"}
|
||||
/>
|
||||
|
||||
@@ -18,7 +18,9 @@ function Page() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
const [images, setImages] = useState<Array<{ file: File | null; preview: string; label: string }>>([]);
|
||||
const [images, setImages] = useState<
|
||||
Array<{ file: File | null; preview: string; label: string; imageId?: string }>
|
||||
>([]);
|
||||
const [formData, setFormData] = useState({
|
||||
judul: '',
|
||||
deskripsi: '',
|
||||
@@ -55,6 +57,7 @@ function Page() {
|
||||
file: null,
|
||||
preview: img.image.link,
|
||||
label: img.label,
|
||||
imageId: img.image.id, // simpan id lama
|
||||
})));
|
||||
}
|
||||
}
|
||||
@@ -88,25 +91,24 @@ function Page() {
|
||||
// Upload semua gambar baru
|
||||
for (const img of images) {
|
||||
if (!img.file) {
|
||||
// Kalau gambar lama, skip upload
|
||||
if (!img.preview) continue;
|
||||
uploadedImages.push({ imageId: '', label: img.label });
|
||||
if (!img.imageId) continue; // kalau benar2 kosong, skip
|
||||
uploadedImages.push({ imageId: img.imageId, label: img.label });
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
// upload baru
|
||||
const res = await ApiFetch.api.fileStorage.create.post({
|
||||
file: img.file,
|
||||
name: img.file.name,
|
||||
});
|
||||
|
||||
const uploaded = res.data?.data;
|
||||
if (!uploaded?.id) {
|
||||
toast.error("Gagal upload salah satu gambar");
|
||||
return;
|
||||
}
|
||||
|
||||
uploadedImages.push({ imageId: uploaded.id, label: img.label || 'main' });
|
||||
uploadedImages.push({ imageId: uploaded.id, label: img.label || "main" });
|
||||
}
|
||||
|
||||
|
||||
// Update ke global state
|
||||
maskotState.update.updateField("judul", formData.judul);
|
||||
@@ -175,7 +177,7 @@ function Page() {
|
||||
<TextInput
|
||||
label={<Text fw="bold">Judul</Text>}
|
||||
placeholder="Masukkan judul maskot"
|
||||
value={formData.judul}
|
||||
defaultValue={formData.judul}
|
||||
onChange={(e) => setFormData({ ...formData, judul: e.currentTarget.value })}
|
||||
error={!formData.judul && "Judul wajib diisi"}
|
||||
/>
|
||||
|
||||
@@ -116,7 +116,7 @@ function Page() {
|
||||
<TextInput
|
||||
label={<Text fw="bold">Judul</Text>}
|
||||
placeholder="Judul sejarah"
|
||||
value={sejarahState.update.form.judul}
|
||||
defaultValue={sejarahState.update.form.judul}
|
||||
onChange={(e) => sejarahState.update.form.judul = e.currentTarget.value}
|
||||
error={!sejarahState.update.form.judul && "Judul wajib diisi"}
|
||||
/>
|
||||
|
||||
@@ -70,7 +70,7 @@ function Page() {
|
||||
</Paper>
|
||||
</Stack>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
<Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: sejarah.deskripsi }} />
|
||||
<Text fz={{ base: "md", md: "h3" }} style={{wordBreak: "break-word", whiteSpace: "normal"}} ta="justify" dangerouslySetInnerHTML={{ __html: sejarah.deskripsi }} />
|
||||
</Paper>
|
||||
</Box>
|
||||
</Paper>
|
||||
@@ -118,9 +118,9 @@ function Page() {
|
||||
</Stack>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
<Text fw="bold" fz={{ base: "lg", md: "h2" }}>Visi Desa</Text>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: visiMisi.visi }} />
|
||||
<Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: visiMisi.visi }} />
|
||||
<Text fw="bold" fz={{ base: "lg", md: "h2" }}>Misi Desa</Text>
|
||||
<Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: visiMisi.misi }} />
|
||||
<Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: visiMisi.misi }} />
|
||||
</Paper>
|
||||
</Box>
|
||||
</Paper>
|
||||
@@ -162,12 +162,12 @@ function Page() {
|
||||
style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
|
||||
>
|
||||
<Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
|
||||
Lambang Desa
|
||||
{lambang.judul}
|
||||
</Text>
|
||||
</Paper>
|
||||
</Stack>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
<Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: lambang.deskripsi }} />
|
||||
<Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: lambang.deskripsi }} />
|
||||
</Paper>
|
||||
</Box>
|
||||
</Paper>
|
||||
@@ -214,9 +214,9 @@ function Page() {
|
||||
</Paper>
|
||||
</Stack>
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
<Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: maskot.deskripsi }} />
|
||||
<Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: maskot.deskripsi }} />
|
||||
<Stack mt="md" gap="sm">
|
||||
<SimpleGrid cols={{ base: 2, md: 4 }} spacing="md">
|
||||
<SimpleGrid cols={{ base: 1, md: 4 }} spacing="md">
|
||||
{maskot.images.map((img, idx) => (
|
||||
<Card withBorder key={idx} p="xs" w={{ base: '100%', md: 180 }}>
|
||||
<Center>
|
||||
|
||||
@@ -26,15 +26,17 @@ function EditPerbekelDariMasaKeMasa() {
|
||||
const state = useProxy(stateProfileDesa.mantanPerbekel);
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
nama: state.update.form.nama || '',
|
||||
daerah: state.update.form.daerah || '',
|
||||
periode: state.update.form.periode || '',
|
||||
imageId: state.update.form.imageId || ''
|
||||
nama: '',
|
||||
daerah: '',
|
||||
periode: '',
|
||||
imageId: ''
|
||||
});
|
||||
|
||||
// load data pertama kali
|
||||
useEffect(() => {
|
||||
const loadFoto = async () => {
|
||||
const id = params?.id as string;
|
||||
@@ -48,7 +50,9 @@ function EditPerbekelDariMasaKeMasa() {
|
||||
periode: data.periode || '',
|
||||
imageId: data.imageId || ''
|
||||
});
|
||||
if (data?.imageGalleryFoto?.link) setPreviewImage(data.imageGalleryFoto.link);
|
||||
if (data?.imageGalleryFoto?.link) {
|
||||
setPreviewImage(data.imageGalleryFoto.link);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading foto:', error);
|
||||
@@ -58,8 +62,17 @@ function EditPerbekelDariMasaKeMasa() {
|
||||
loadFoto();
|
||||
}, [params?.id]);
|
||||
|
||||
// helper ubah state formData
|
||||
const handleChange = (field: keyof typeof formData, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// update global state hanya sekali pas submit
|
||||
state.update.form = { ...state.update.form, ...formData };
|
||||
|
||||
if (file) {
|
||||
@@ -107,7 +120,7 @@ function EditPerbekelDariMasaKeMasa() {
|
||||
label="Nama"
|
||||
placeholder="Masukkan nama"
|
||||
value={formData.nama}
|
||||
onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
|
||||
onChange={(e) => handleChange('nama', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -161,7 +174,7 @@ function EditPerbekelDariMasaKeMasa() {
|
||||
objectFit: 'contain',
|
||||
border: `1px solid ${colors['blue-button']}`,
|
||||
}}
|
||||
loading='lazy'
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
@@ -171,7 +184,7 @@ function EditPerbekelDariMasaKeMasa() {
|
||||
label="Daerah"
|
||||
placeholder="Masukkan daerah"
|
||||
value={formData.daerah}
|
||||
onChange={(e) => setFormData({ ...formData, daerah: e.target.value })}
|
||||
onChange={(e) => handleChange('daerah', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -179,7 +192,7 @@ function EditPerbekelDariMasaKeMasa() {
|
||||
label="Periode"
|
||||
placeholder="Masukkan periode"
|
||||
value={formData.periode}
|
||||
onChange={(e) => setFormData({ ...formData, periode: e.target.value })}
|
||||
onChange={(e) => handleChange('periode', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
|
||||
@@ -70,23 +70,23 @@ function CreatePerbekelDariMasaKeMasa() {
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
label={<Text fw="bold" fz="sm">Nama Perbekel</Text>}
|
||||
label="Nama Perbekel"
|
||||
placeholder="Masukkan nama perbekel"
|
||||
value={state.create.form.nama}
|
||||
defaultValue={state.create.form.nama}
|
||||
onChange={(e) => (state.create.form.nama = e.target.value)}
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw="bold" fz="sm">Daerah</Text>}
|
||||
label="Daerah"
|
||||
placeholder="Masukkan daerah"
|
||||
value={state.create.form.daerah}
|
||||
defaultValue={state.create.form.daerah}
|
||||
onChange={(e) => (state.create.form.daerah = e.target.value)}
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
label={<Text fw="bold" fz="sm">Periode</Text>}
|
||||
label="Periode"
|
||||
placeholder="Masukkan periode"
|
||||
value={state.create.form.periode}
|
||||
defaultValue={state.create.form.periode}
|
||||
onChange={(e) => (state.create.form.periode = e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -75,22 +75,28 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Text fw={500} lineClamp={1}>{item.nama}</Text>
|
||||
<Box w={200}>
|
||||
<Text fw={500} lineClamp={1}>{item.nama}</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text lineClamp={1}>{item.periode}</Text>
|
||||
<Box w={200}>
|
||||
<Text lineClamp={1}>{item.periode}</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
size="xs"
|
||||
radius="md"
|
||||
variant="light"
|
||||
color="blue"
|
||||
leftSection={<IconDeviceImacCog size={16} />}
|
||||
onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
<Box w={200}>
|
||||
<Button
|
||||
size="xs"
|
||||
radius="md"
|
||||
variant="light"
|
||||
color="blue"
|
||||
leftSection={<IconDeviceImacCog size={16} />}
|
||||
onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
</Box>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
|
||||
@@ -97,16 +97,16 @@ function Page() {
|
||||
{/* Biodata & Info */}
|
||||
<Box mt="lg">
|
||||
<Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mb={4}>Biodata</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.biodata }} />
|
||||
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.biodata }} />
|
||||
|
||||
<Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Pengalaman</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.pengalaman }} />
|
||||
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.pengalaman }} />
|
||||
|
||||
<Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Pengalaman Organisasi</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.pengalamanOrganisasi }} />
|
||||
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.pengalamanOrganisasi }} />
|
||||
|
||||
<Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Program Kerja Unggulan</Text>
|
||||
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.programUnggulan }} />
|
||||
<Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.programUnggulan }} />
|
||||
</Box>
|
||||
</Paper>
|
||||
</Stack>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
@@ -29,13 +29,13 @@ function EditAPBDesa() {
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
tahun: apbState.update.form.tahun || '',
|
||||
pendapatanIds: apbState.update.form.pendapatanIds || [],
|
||||
belanjaIds: apbState.update.form.belanjaIds || [],
|
||||
pembiayaanIds: apbState.update.form.pembiayaanIds || [],
|
||||
tahun: '',
|
||||
pendapatanIds: [] as string[],
|
||||
belanjaIds: [] as string[],
|
||||
pembiayaanIds: [] as string[],
|
||||
});
|
||||
|
||||
// Load APB desa by id
|
||||
// Load APB desa by id → hanya update formData, bukan global state
|
||||
useEffect(() => {
|
||||
const loadAPBdesa = async () => {
|
||||
const id = params?.id as string;
|
||||
@@ -45,7 +45,7 @@ function EditAPBDesa() {
|
||||
const data = await apbState.update.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
tahun: data.tahun || 0,
|
||||
tahun: String(data.tahun || ''),
|
||||
pendapatanIds: data.pendapatan?.map((p: any) => p.id) || [],
|
||||
belanjaIds: data.belanja?.map((b: any) => b.id) || [],
|
||||
pembiayaanIds: data.pembiayaan?.map((p: any) => p.id) || [],
|
||||
@@ -60,8 +60,13 @@ function EditAPBDesa() {
|
||||
loadAPBdesa();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleChange = (field: keyof typeof formData, value: any) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// update global state cuma pas submit
|
||||
apbState.update.form = {
|
||||
...apbState.update.form,
|
||||
tahun: Number(formData.tahun),
|
||||
@@ -112,9 +117,7 @@ function EditAPBDesa() {
|
||||
<TextInput
|
||||
type="number"
|
||||
value={formData.tahun}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, tahun: e.target.value })
|
||||
}
|
||||
onChange={(e) => handleChange("tahun", e.target.value)}
|
||||
label={<Text fz="sm" fw="bold">Tahun</Text>}
|
||||
placeholder="Masukkan tahun anggaran"
|
||||
required
|
||||
@@ -123,23 +126,17 @@ function EditAPBDesa() {
|
||||
{/* Selects */}
|
||||
<SelectPendapatan
|
||||
selectedIds={formData.pendapatanIds}
|
||||
onSelectionChange={(ids) =>
|
||||
setFormData({ ...formData, pendapatanIds: ids })
|
||||
}
|
||||
onSelectionChange={(ids) => handleChange("pendapatanIds", ids)}
|
||||
/>
|
||||
|
||||
<SelectBelanja
|
||||
selectedIds={formData.belanjaIds}
|
||||
onSelectionChange={(ids) =>
|
||||
setFormData({ ...formData, belanjaIds: ids })
|
||||
}
|
||||
onSelectionChange={(ids) => handleChange("belanjaIds", ids)}
|
||||
/>
|
||||
|
||||
<SelectPembiayaan
|
||||
selectedIds={formData.pembiayaanIds}
|
||||
onSelectionChange={(ids) =>
|
||||
setFormData({ ...formData, pembiayaanIds: ids })
|
||||
}
|
||||
onSelectionChange={(ids) => handleChange("pembiayaanIds", ids)}
|
||||
/>
|
||||
|
||||
{/* Save Button */}
|
||||
@@ -164,7 +161,13 @@ function EditAPBDesa() {
|
||||
|
||||
/* --- Sub Components --- */
|
||||
|
||||
function SelectPendapatan({ selectedIds, onSelectionChange }: { selectedIds: string[]; onSelectionChange: (ids: string[]) => void }) {
|
||||
function SelectPendapatan({
|
||||
selectedIds,
|
||||
onSelectionChange,
|
||||
}: {
|
||||
selectedIds: string[];
|
||||
onSelectionChange: (ids: string[]) => void;
|
||||
}) {
|
||||
const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan);
|
||||
|
||||
useShallowEffect(() => {
|
||||
@@ -192,7 +195,13 @@ function EditAPBDesa() {
|
||||
);
|
||||
}
|
||||
|
||||
function SelectBelanja({ selectedIds, onSelectionChange }: { selectedIds: string[]; onSelectionChange: (ids: string[]) => void }) {
|
||||
function SelectBelanja({
|
||||
selectedIds,
|
||||
onSelectionChange,
|
||||
}: {
|
||||
selectedIds: string[];
|
||||
onSelectionChange: (ids: string[]) => void;
|
||||
}) {
|
||||
const belanjaState = useProxy(PendapatanAsliDesa.belanja);
|
||||
|
||||
useShallowEffect(() => {
|
||||
@@ -220,7 +229,13 @@ function EditAPBDesa() {
|
||||
);
|
||||
}
|
||||
|
||||
function SelectPembiayaan({ selectedIds, onSelectionChange }: { selectedIds: string[]; onSelectionChange: (ids: string[]) => void }) {
|
||||
function SelectPembiayaan({
|
||||
selectedIds,
|
||||
onSelectionChange,
|
||||
}: {
|
||||
selectedIds: string[];
|
||||
onSelectionChange: (ids: string[]) => void;
|
||||
}) {
|
||||
const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);
|
||||
|
||||
useShallowEffect(() => {
|
||||
|
||||
@@ -65,7 +65,7 @@ function CreateAPBDesa() {
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
type="number"
|
||||
value={apbDesaState.create.form.tahun}
|
||||
defaultValue={apbDesaState.create.form.tahun}
|
||||
onChange={(val) => {
|
||||
apbDesaState.create.form.tahun = Number(val.target.value);
|
||||
}}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
|
||||
import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
@@ -24,12 +25,16 @@ function EditBelanja() {
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: belanjaState.update.form.name || '',
|
||||
value: belanjaState.update.form.value || '',
|
||||
name: '',
|
||||
value: '',
|
||||
});
|
||||
|
||||
// format angka ke rupiah
|
||||
const formatRupiah = (value: number | string) => {
|
||||
const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
|
||||
const number =
|
||||
typeof value === 'number'
|
||||
? value
|
||||
: Number(value.replace(/\D/g, '')) || 0;
|
||||
return new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
@@ -37,8 +42,9 @@ function EditBelanja() {
|
||||
}).format(number);
|
||||
};
|
||||
|
||||
// buang semua simbol jadi angka murni
|
||||
const unformatRupiah = (value: string) => {
|
||||
return Number(value.replace(/\D/g, ''));
|
||||
return Number(value.replace(/\D/g, '')) || 0;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -51,7 +57,7 @@ function EditBelanja() {
|
||||
if (data) {
|
||||
setFormData({
|
||||
name: data.name || '',
|
||||
value: data.value || '',
|
||||
value: String(data.value || ''),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -69,7 +75,7 @@ function EditBelanja() {
|
||||
...belanjaState.update.form,
|
||||
name: formData.name,
|
||||
value: Number(formData.value),
|
||||
}
|
||||
};
|
||||
|
||||
await belanjaState.update.update();
|
||||
toast.success("Jenis Belanja berhasil diperbarui!");
|
||||
@@ -78,7 +84,7 @@ function EditBelanja() {
|
||||
console.error("Error updating jenis belanja:", error);
|
||||
toast.error("Terjadi kesalahan saat memperbarui jenis belanja");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
@@ -113,18 +119,20 @@ function EditBelanja() {
|
||||
label="Nama Jenis Belanja"
|
||||
placeholder="Masukkan nama jenis belanja"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, name: e.target.value })
|
||||
}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Nilai"
|
||||
placeholder="Masukkan nilai"
|
||||
value={formatRupiah(formData.value)}
|
||||
value={formData.value ? formatRupiah(formData.value) : ''}
|
||||
onChange={(e) => {
|
||||
const raw = e.currentTarget.value;
|
||||
const cleanValue = unformatRupiah(raw);
|
||||
setFormData({ ...formData, value: cleanValue });
|
||||
setFormData({ ...formData, value: String(cleanValue) });
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -85,7 +85,7 @@ function CreateBelanja() {
|
||||
<TextInput
|
||||
label={<Text fw="bold" fz="sm">Nama Jenis Belanja</Text>}
|
||||
placeholder="Masukkan nama jenis belanja"
|
||||
value={belanjaState.create.form.name}
|
||||
defaultValue={belanjaState.create.form.name}
|
||||
onChange={(e) => (belanjaState.create.form.name = e.target.value)}
|
||||
required
|
||||
/>
|
||||
@@ -94,7 +94,7 @@ function CreateBelanja() {
|
||||
type="text"
|
||||
label={<Text fw="bold" fz="sm">Nilai</Text>}
|
||||
placeholder="Masukkan nilai belanja"
|
||||
value={formatRupiah(belanjaState.create.form.value)}
|
||||
defaultValue={formatRupiah(belanjaState.create.form.value)}
|
||||
onChange={(e) => {
|
||||
const raw = e.currentTarget.value;
|
||||
belanjaState.create.form.value = unformatRupiah(raw);
|
||||
|
||||
@@ -24,12 +24,15 @@ function EditPembiayaan() {
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: pembiayaanState.update.form.name || '',
|
||||
value: pembiayaanState.update.form.value || '',
|
||||
name: '',
|
||||
value: '',
|
||||
});
|
||||
|
||||
const formatRupiah = (value: number | string) => {
|
||||
const number = typeof value === 'number' ? value : Number(value.toString().replace(/\D/g, ''));
|
||||
const number =
|
||||
typeof value === 'number'
|
||||
? value
|
||||
: Number(value.toString().replace(/\D/g, '')) || 0;
|
||||
return new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
@@ -38,7 +41,7 @@ function EditPembiayaan() {
|
||||
};
|
||||
|
||||
const unformatRupiah = (value: string) => {
|
||||
return Number(value.replace(/\D/g, ''));
|
||||
return Number(value.replace(/\D/g, '')) || 0;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -51,7 +54,7 @@ function EditPembiayaan() {
|
||||
if (data) {
|
||||
setFormData({
|
||||
name: data.name || '',
|
||||
value: data.value || '',
|
||||
value: String(data.value || ''),
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -68,7 +71,7 @@ function EditPembiayaan() {
|
||||
pembiayaanState.update.form = {
|
||||
...pembiayaanState.update.form,
|
||||
name: formData.name,
|
||||
value: Number(formData.value),
|
||||
value: unformatRupiah(formData.value),
|
||||
};
|
||||
|
||||
await pembiayaanState.update.update();
|
||||
@@ -82,7 +85,7 @@ function EditPembiayaan() {
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header dengan Back Button */}
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button
|
||||
@@ -113,18 +116,20 @@ function EditPembiayaan() {
|
||||
label="Nama Jenis Pembiayaan"
|
||||
placeholder="Masukkan nama jenis pembiayaan"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({ ...prev, name: e.target.value }))
|
||||
}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Nilai"
|
||||
placeholder="Masukkan nilai"
|
||||
value={formatRupiah(formData.value)}
|
||||
value={formData.value ? formatRupiah(formData.value) : ''}
|
||||
onChange={(e) => {
|
||||
const raw = e.currentTarget.value;
|
||||
const cleanValue = unformatRupiah(raw);
|
||||
setFormData({ ...formData, value: cleanValue });
|
||||
setFormData((prev) => ({ ...prev, value: String(cleanValue) }));
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -85,7 +85,7 @@ function CreatePembiayaan() {
|
||||
<TextInput
|
||||
label={<Text fw="bold" fz="sm">Nama Jenis Pembiayaan</Text>}
|
||||
placeholder="Masukkan nama jenis pembiayaan"
|
||||
value={pembiayaanState.create.form.name}
|
||||
defaultValue={pembiayaanState.create.form.name}
|
||||
onChange={(e) => {
|
||||
pembiayaanState.create.form.name = e.currentTarget.value;
|
||||
}}
|
||||
@@ -96,7 +96,7 @@ function CreatePembiayaan() {
|
||||
type="text"
|
||||
label={<Text fw="bold" fz="sm">Nilai</Text>}
|
||||
placeholder="Masukkan nilai"
|
||||
value={formatRupiah(pembiayaanState.create.form.value)}
|
||||
defaultValue={formatRupiah(pembiayaanState.create.form.value)}
|
||||
onChange={(e) => {
|
||||
const raw = e.currentTarget.value;
|
||||
pembiayaanState.create.form.value = unformatRupiah(raw);
|
||||
|
||||
@@ -24,12 +24,16 @@ function EditPendapatan() {
|
||||
const params = useParams();
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: pendapatanState.update.form.name || '',
|
||||
value: pendapatanState.update.form.value || '',
|
||||
name: '',
|
||||
value: '',
|
||||
});
|
||||
|
||||
// helper format
|
||||
const formatRupiah = (value: number | string) => {
|
||||
const number = typeof value === 'number' ? value : Number(value.toString().replace(/\D/g, ''));
|
||||
const number = typeof value === 'number'
|
||||
? value
|
||||
: Number(value.toString().replace(/\D/g, ''));
|
||||
|
||||
return new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
@@ -39,6 +43,7 @@ function EditPendapatan() {
|
||||
|
||||
const unformatRupiah = (value: string) => Number(value.replace(/\D/g, ''));
|
||||
|
||||
// load data once
|
||||
useEffect(() => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
@@ -48,8 +53,8 @@ function EditPendapatan() {
|
||||
const data = await pendapatanState.update.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
name: data.name || '',
|
||||
value: data.value || '',
|
||||
name: data.name ?? '',
|
||||
value: data.value?.toString() ?? '',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -61,6 +66,13 @@ function EditPendapatan() {
|
||||
loadPendapatan();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
pendapatanState.update.form = {
|
||||
@@ -111,18 +123,18 @@ function EditPendapatan() {
|
||||
label="Nama Jenis Pendapatan"
|
||||
placeholder="Masukkan nama jenis pendapatan"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
onChange={(e) => handleChange('name', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Nilai"
|
||||
placeholder="Masukkan nilai"
|
||||
value={formatRupiah(formData.value)}
|
||||
value={formData.value ? formatRupiah(formData.value) : ''}
|
||||
onChange={(e) => {
|
||||
const raw = e.currentTarget.value;
|
||||
const cleanValue = unformatRupiah(raw);
|
||||
setFormData({ ...formData, value: cleanValue });
|
||||
const cleanValue = unformatRupiah(raw).toString();
|
||||
handleChange('value', cleanValue);
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -7,10 +7,9 @@ import {
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -76,32 +75,24 @@ function CreatePendapatan() {
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
value={pendapatanState.create.form.name}
|
||||
defaultValue={pendapatanState.create.form.name}
|
||||
onChange={(val) => {
|
||||
pendapatanState.create.form.name = val.target.value;
|
||||
}}
|
||||
label={
|
||||
<Text fw="bold" fz="sm">
|
||||
Nama Jenis Pendapatan
|
||||
</Text>
|
||||
}
|
||||
label="Nama Jenis Pendapatan"
|
||||
placeholder="Masukkan nama jenis pendapatan"
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
type="text"
|
||||
value={formatRupiah(pendapatanState.create.form.value)}
|
||||
defaultValue={formatRupiah(pendapatanState.create.form.value)}
|
||||
onChange={(val) => {
|
||||
const raw = val.currentTarget.value;
|
||||
const cleanValue = unformatRupiah(raw);
|
||||
pendapatanState.create.form.value = cleanValue;
|
||||
}}
|
||||
label={
|
||||
<Text fw="bold" fz="sm">
|
||||
Nilai
|
||||
</Text>
|
||||
}
|
||||
label="Nilai"
|
||||
placeholder="Masukkan nilai"
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -10,47 +10,80 @@ import {
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import demografiPekerjaan from '../../../_state/ekonomi/demografi-pekerjaan';
|
||||
|
||||
function EditDemografiPekerjaan() {
|
||||
interface FormData {
|
||||
pekerjaan: string;
|
||||
lakiLaki: number;
|
||||
perempuan: number;
|
||||
}
|
||||
|
||||
export default function EditDemografiPekerjaan() {
|
||||
const router = useRouter();
|
||||
const params = useParams() as { id: string };
|
||||
const { id } = useParams() as { id: string };
|
||||
const stateDemografi = useProxy(demografiPekerjaan);
|
||||
|
||||
const id = params.id;
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
pekerjaan: '',
|
||||
lakiLaki: 0,
|
||||
perempuan: 0,
|
||||
});
|
||||
|
||||
// ✅ Load data hanya sekali di awal (tidak reset form)
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
stateDemografi.update.id = id;
|
||||
stateDemografi.findUnique
|
||||
.load(id)
|
||||
.then(() => {
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
stateDemografi.update.id = id;
|
||||
await stateDemografi.findUnique.load(id);
|
||||
|
||||
const data = stateDemografi.findUnique.data;
|
||||
if (data) {
|
||||
stateDemografi.update.form = {
|
||||
pekerjaan: String(data.pekerjaan || ''),
|
||||
lakiLaki: Number(data.lakiLaki || 0),
|
||||
perempuan: Number(data.perempuan || 0),
|
||||
};
|
||||
setFormData({
|
||||
pekerjaan: data.pekerjaan ?? '',
|
||||
lakiLaki: Number(data.lakiLaki ?? 0),
|
||||
perempuan: Number(data.perempuan ?? 0),
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
} catch (error) {
|
||||
console.error('Error loading data:', error);
|
||||
toast.error('Gagal memuat data');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
// ✅ Handler input terkontrol (tidak buat re-render berlebihan)
|
||||
const handleChange = useCallback(
|
||||
(field: keyof FormData) =>
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value =
|
||||
field === 'lakiLaki' || field === 'perempuan'
|
||||
? Number(e.currentTarget.value)
|
||||
: e.currentTarget.value;
|
||||
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// ✅ Submit hanya update global state sekali
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
stateDemografi.update.id = id;
|
||||
stateDemografi.update.form = { ...formData };
|
||||
|
||||
await stateDemografi.update.submit();
|
||||
|
||||
toast.success('Data berhasil diperbarui');
|
||||
router.push('/admin/ekonomi/demografi-pekerjaan');
|
||||
} catch (error) {
|
||||
@@ -91,10 +124,8 @@ function EditDemografiPekerjaan() {
|
||||
<TextInput
|
||||
label="Pekerjaan"
|
||||
placeholder="Masukkan jenis pekerjaan"
|
||||
value={stateDemografi.update.form.pekerjaan}
|
||||
onChange={(e) =>
|
||||
(stateDemografi.update.form.pekerjaan = e.currentTarget.value)
|
||||
}
|
||||
value={formData.pekerjaan}
|
||||
onChange={handleChange('pekerjaan')}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -102,12 +133,8 @@ function EditDemografiPekerjaan() {
|
||||
label="Jumlah Pekerja Laki-laki"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah pekerja laki-laki"
|
||||
value={stateDemografi.update.form.lakiLaki}
|
||||
onChange={(e) =>
|
||||
(stateDemografi.update.form.lakiLaki = Number(
|
||||
e.currentTarget.value
|
||||
))
|
||||
}
|
||||
value={formData.lakiLaki}
|
||||
onChange={handleChange('lakiLaki')}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -115,12 +142,8 @@ function EditDemografiPekerjaan() {
|
||||
label="Jumlah Pekerja Perempuan"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah pekerja perempuan"
|
||||
value={stateDemografi.update.form.perempuan}
|
||||
onChange={(e) =>
|
||||
(stateDemografi.update.form.perempuan = Number(
|
||||
e.currentTarget.value
|
||||
))
|
||||
}
|
||||
value={formData.perempuan}
|
||||
onChange={handleChange('perempuan')}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -143,5 +166,3 @@ function EditDemografiPekerjaan() {
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditDemografiPekerjaan;
|
||||
|
||||
@@ -77,7 +77,7 @@ function CreateDemografiPekerjaan() {
|
||||
<TextInput
|
||||
label="Pekerjaan"
|
||||
type="text"
|
||||
value={stateDemografi.create.form.pekerjaan}
|
||||
defaultValue={stateDemografi.create.form.pekerjaan}
|
||||
placeholder="Masukkan pekerjaan"
|
||||
onChange={(val) => {
|
||||
stateDemografi.create.form.pekerjaan = val.currentTarget.value;
|
||||
@@ -87,7 +87,7 @@ function CreateDemografiPekerjaan() {
|
||||
<TextInput
|
||||
label="Jumlah Pekerja Laki-Laki"
|
||||
type="number"
|
||||
value={stateDemografi.create.form.lakiLaki}
|
||||
defaultValue={stateDemografi.create.form.lakiLaki}
|
||||
placeholder="Masukkan jumlah pekerja laki-laki"
|
||||
onChange={(val) => {
|
||||
stateDemografi.create.form.lakiLaki = Number(val.currentTarget.value);
|
||||
@@ -97,7 +97,7 @@ function CreateDemografiPekerjaan() {
|
||||
<TextInput
|
||||
label="Jumlah Pekerja Perempuan"
|
||||
type="number"
|
||||
value={stateDemografi.create.form.perempuan}
|
||||
defaultValue={stateDemografi.create.form.perempuan}
|
||||
placeholder="Masukkan jumlah pekerja perempuan"
|
||||
onChange={(val) => {
|
||||
stateDemografi.create.form.perempuan = Number(val.currentTarget.value);
|
||||
|
||||
@@ -126,9 +126,9 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Pekerjaan</TableTh>
|
||||
<TableTh>Laki - Laki</TableTh>
|
||||
<TableTh>Perempuan</TableTh>
|
||||
<TableTh style={{ minWidth: 200 }}>Pekerjaan</TableTh>
|
||||
<TableTh style={{ minWidth: 200 }}>Laki - Laki</TableTh>
|
||||
<TableTh style={{ minWidth: 200 }}>Perempuan</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Hapus</TableTh>
|
||||
</TableTr>
|
||||
@@ -137,9 +137,9 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.pekerjaan}</TableTd>
|
||||
<TableTd>{item.lakiLaki}</TableTd>
|
||||
<TableTd>{item.perempuan}</TableTd>
|
||||
<TableTd style={{ minWidth: 200 }}>{item.pekerjaan}</TableTd>
|
||||
<TableTd style={{ minWidth: 200 }}>{item.lakiLaki}</TableTd>
|
||||
<TableTd style={{ minWidth: 200 }}>{item.perempuan}</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
|
||||
@@ -3,10 +3,19 @@
|
||||
|
||||
import jumlahPendudukMiskin from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-penduduk-miskin';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, TextInput, Title, Group, Tooltip } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Paper,
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
Group,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
@@ -17,6 +26,13 @@ function EditJumlahPendudukMiskin() {
|
||||
|
||||
const id = params.id;
|
||||
|
||||
// 🔹 State lokal untuk form
|
||||
const [formData, setFormData] = useState({
|
||||
year: 0,
|
||||
totalPoorPopulation: 0,
|
||||
});
|
||||
|
||||
// 🔹 Load data awal dari backend
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
@@ -25,10 +41,10 @@ function EditJumlahPendudukMiskin() {
|
||||
await stateJPM.findUnique.load(id);
|
||||
const data = stateJPM.findUnique.data;
|
||||
if (data) {
|
||||
stateJPM.update.form = {
|
||||
setFormData({
|
||||
year: data.year || 0,
|
||||
totalPoorPopulation: data.totalPoorPopulation || 0,
|
||||
};
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Gagal memuat data:', error);
|
||||
@@ -39,9 +55,21 @@ function EditJumlahPendudukMiskin() {
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
// 🔹 Handler input controlled
|
||||
const handleChange = (field: keyof typeof formData, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: Number(value),
|
||||
}));
|
||||
};
|
||||
|
||||
// 🔹 Submit form
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
stateJPM.update.id = id;
|
||||
// update global state cuma saat submit
|
||||
stateJPM.update.form = { ...formData };
|
||||
|
||||
await stateJPM.update.submit();
|
||||
toast.success('Data jumlah penduduk miskin berhasil diperbarui!');
|
||||
router.push('/admin/ekonomi/jumlah-penduduk-miskin');
|
||||
@@ -55,7 +83,12 @@ function EditJumlahPendudukMiskin() {
|
||||
<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">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@@ -78,10 +111,8 @@ function EditJumlahPendudukMiskin() {
|
||||
placeholder="Masukkan tahun"
|
||||
type="number"
|
||||
required
|
||||
value={stateJPM.update.form.year}
|
||||
onChange={(val) => {
|
||||
stateJPM.update.form.year = Number(val.currentTarget.value);
|
||||
}}
|
||||
value={formData.year}
|
||||
onChange={(e) => handleChange('year', e.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
@@ -89,10 +120,10 @@ function EditJumlahPendudukMiskin() {
|
||||
placeholder="Masukkan jumlah penduduk miskin"
|
||||
type="number"
|
||||
required
|
||||
value={stateJPM.update.form.totalPoorPopulation}
|
||||
onChange={(val) => {
|
||||
stateJPM.update.form.totalPoorPopulation = Number(val.currentTarget.value);
|
||||
}}
|
||||
value={formData.totalPoorPopulation}
|
||||
onChange={(e) =>
|
||||
handleChange('totalPoorPopulation', e.currentTarget.value)
|
||||
}
|
||||
/>
|
||||
|
||||
<Group justify="right">
|
||||
|
||||
@@ -61,7 +61,7 @@ export default function CreateJumlahPendudukMiskin() {
|
||||
<TextInput
|
||||
label="Tahun"
|
||||
type="number"
|
||||
value={stateJPM.create.form.year || ''}
|
||||
defaultValue={stateJPM.create.form.year || ''}
|
||||
placeholder="Masukkan tahun"
|
||||
onChange={(e) => {
|
||||
const value = e.currentTarget.value;
|
||||
@@ -73,7 +73,7 @@ export default function CreateJumlahPendudukMiskin() {
|
||||
<TextInput
|
||||
label="Jumlah Penduduk Miskin"
|
||||
type="number"
|
||||
value={stateJPM.create.form.totalPoorPopulation}
|
||||
defaultValue={stateJPM.create.form.totalPoorPopulation}
|
||||
placeholder="Masukkan jumlah penduduk miskin"
|
||||
onChange={(e) => {
|
||||
stateJPM.create.form.totalPoorPopulation = Number(e.currentTarget.value);
|
||||
|
||||
@@ -1,23 +1,43 @@
|
||||
'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 { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import HeaderSearch from '../../_com/header';
|
||||
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, IconSearch, IconTrash, IconPlus } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useShallowEffect, useMediaQuery } from '@mantine/hooks';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import jumlahPendudukMiskin from '../../_state/ekonomi/jumlah-penduduk-miskin';
|
||||
import { Bar, BarChart, Legend, XAxis, YAxis, Tooltip as RechartsTooltip } from 'recharts';
|
||||
import HeaderSearch from '../../_com/header';
|
||||
import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
|
||||
import jumlahPendudukMiskin from '../../_state/ekonomi/jumlah-penduduk-miskin';
|
||||
|
||||
// ✅ BarChart Mantine
|
||||
import { BarChart } from '@mantine/charts';
|
||||
|
||||
function JumlahPendudukMiskin() {
|
||||
const [search, setSearch] = useState("");
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Jumlah Penduduk Miskin'
|
||||
placeholder='Cari tahun atau jumlah penduduk miskin...'
|
||||
title="Jumlah Penduduk Miskin"
|
||||
placeholder="Cari tahun atau jumlah penduduk miskin..."
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -28,7 +48,7 @@ function JumlahPendudukMiskin() {
|
||||
}
|
||||
|
||||
function ListJumlahPendudukMiskin({ search }: { search: string }) {
|
||||
type JPMGrafik = { id: string; year: number; totalPoorPopulation: number }
|
||||
type JPMGrafik = { year: number; totalPoorPopulation: number };
|
||||
const stateJPM = useProxy(jumlahPendudukMiskin);
|
||||
const [chartData, setChartData] = useState<JPMGrafik[]>([]);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
@@ -36,33 +56,27 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
const isTablet = useMediaQuery('(max-width:1024px)');
|
||||
const isMobile = useMediaQuery('(max-width:768px)');
|
||||
const { data, page, loading, load, totalPages } = stateJPM.findMany;
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
loading,
|
||||
load,
|
||||
totalPages,
|
||||
} = stateJPM.findMany;
|
||||
// Load data
|
||||
// Load data awal
|
||||
useShallowEffect(() => {
|
||||
setMounted(true);
|
||||
load(page, 10, search);
|
||||
}, [page, search]);
|
||||
|
||||
// Update chart data
|
||||
useEffect(() => {
|
||||
if (stateJPM.findMany.data) {
|
||||
setChartData(stateJPM.findMany.data.map(item => ({
|
||||
id: item.id,
|
||||
year: Number(item.year),
|
||||
totalPoorPopulation: Number(item.totalPoorPopulation)
|
||||
})));
|
||||
setChartData(
|
||||
stateJPM.findMany.data.map((item) => ({
|
||||
year: Number(item.year),
|
||||
totalPoorPopulation: Number(item.totalPoorPopulation),
|
||||
}))
|
||||
);
|
||||
}
|
||||
}, [stateJPM.findMany.data]);
|
||||
|
||||
const filteredData = data || []
|
||||
const filteredData = data || [];
|
||||
|
||||
const handleDelete = () => {
|
||||
if (selectedId) {
|
||||
@@ -71,7 +85,7 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
|
||||
setSelectedId(null);
|
||||
stateJPM.findMany.load();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
@@ -83,15 +97,18 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
{/* Tabel */}
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Jumlah Penduduk Miskin</Title>
|
||||
<Tooltip label="Tambah Data" withArrow>
|
||||
<Button
|
||||
leftSection={<IconEdit size={18} />}
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-miskin/create')}
|
||||
onClick={() =>
|
||||
router.push('/admin/ekonomi/jumlah-penduduk-miskin/create')
|
||||
}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
@@ -109,22 +126,38 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length > 0 ? filteredData.map(item => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.year}</TableTd>
|
||||
<TableTd>{item.totalPoorPopulation}</TableTd>
|
||||
<TableTd>
|
||||
<Button variant='light' color="green" onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-miskin/${item.id}`)}>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button variant='light' color="red" disabled={stateJPM.delete.loading} onClick={() => { setSelectedId(item.id); setModalHapus(true) }}>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
)) : (
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.year}</TableTd>
|
||||
<TableTd>{item.totalPoorPopulation}</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/ekonomi/jumlah-penduduk-miskin/${item.id}`)
|
||||
}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
disabled={stateJPM.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={4}>
|
||||
<Center py={20}>
|
||||
@@ -138,6 +171,7 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Pagination */}
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
@@ -153,33 +187,38 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
|
||||
/>
|
||||
</Center>
|
||||
|
||||
{/* Chart */}
|
||||
{/* Bar Chart */}
|
||||
<Paper bg={colors['white-1']} p="md" mt="lg" withBorder radius="md">
|
||||
<Stack>
|
||||
<Box mt="lg" style={{ width: '100%', minHeight: 350 }}>
|
||||
<Title order={4} mb="sm">Grafik Jumlah Penduduk Miskin</Title>
|
||||
{mounted && chartData.length > 0 ? (
|
||||
<BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData}>
|
||||
<XAxis dataKey="year" />
|
||||
<YAxis />
|
||||
<RechartsTooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="totalPoorPopulation" fill={colors['blue-button']} name="Jumlah Penduduk Miskin" />
|
||||
</BarChart>
|
||||
) : (
|
||||
<Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Title order={4} mb="sm">
|
||||
Grafik Jumlah Penduduk Miskin
|
||||
</Title>
|
||||
{mounted && chartData.length > 0 ? (
|
||||
<BarChart
|
||||
h={300}
|
||||
data={chartData.map((item) => ({
|
||||
name: item.year.toString(),
|
||||
value: item.totalPoorPopulation,
|
||||
}))}
|
||||
dataKey="name"
|
||||
series={[
|
||||
{ name: 'value', color: colors['blue-button'] },
|
||||
]}
|
||||
withTooltip
|
||||
valueFormatter={(v) => `${v.toLocaleString()} jiwa`}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
|
||||
{/* Modal Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text='Apakah anda yakin ingin menghapus data ini?'
|
||||
text="Apakah anda yakin ingin menghapus data ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client';
|
||||
import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import colors from '@/con/colors';
|
||||
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 { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditGrafikBerdasarkanPendidikan() {
|
||||
@@ -14,34 +14,59 @@ function EditGrafikBerdasarkanPendidikan() {
|
||||
const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan);
|
||||
const id = params.id;
|
||||
|
||||
// state lokal untuk form
|
||||
const [formData, setFormData] = useState({
|
||||
SD: '',
|
||||
SMP: '',
|
||||
SMA: '',
|
||||
D3: '',
|
||||
S1: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
stategrafik.findUnique.load(id).then(() => {
|
||||
const data = stategrafik.findUnique.data;
|
||||
if (data) {
|
||||
stategrafik.update.form = {
|
||||
setFormData({
|
||||
SD: data.SD || '',
|
||||
SMP: data.SMP || '',
|
||||
SMA: data.SMA || '',
|
||||
D3: data.D3 || '',
|
||||
S1: data.S1 || '',
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const handleChange = (field: keyof typeof formData) =>
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: e.currentTarget.value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
stategrafik.update.id = id;
|
||||
stategrafik.update.form = { ...formData }; // update global state pas submit aja
|
||||
await stategrafik.update.submit();
|
||||
router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan');
|
||||
router.push(
|
||||
'/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan'
|
||||
);
|
||||
};
|
||||
|
||||
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">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@@ -63,36 +88,36 @@ function EditGrafikBerdasarkanPendidikan() {
|
||||
label="SD"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.update.form.SD}
|
||||
onChange={(val) => (stategrafik.update.form.SD = val.currentTarget.value)}
|
||||
value={formData.SD}
|
||||
onChange={handleChange('SD')}
|
||||
/>
|
||||
<TextInput
|
||||
label="SMP"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.update.form.SMP}
|
||||
onChange={(val) => (stategrafik.update.form.SMP = val.currentTarget.value)}
|
||||
value={formData.SMP}
|
||||
onChange={handleChange('SMP')}
|
||||
/>
|
||||
<TextInput
|
||||
label="SMA"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.update.form.SMA}
|
||||
onChange={(val) => (stategrafik.update.form.SMA = val.currentTarget.value)}
|
||||
value={formData.SMA}
|
||||
onChange={handleChange('SMA')}
|
||||
/>
|
||||
<TextInput
|
||||
label="D3"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.update.form.D3}
|
||||
onChange={(val) => (stategrafik.update.form.D3 = val.currentTarget.value)}
|
||||
value={formData.D3}
|
||||
onChange={handleChange('D3')}
|
||||
/>
|
||||
<TextInput
|
||||
label="S1"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.update.form.S1}
|
||||
onChange={(val) => (stategrafik.update.form.S1 = val.currentTarget.value)}
|
||||
value={formData.S1}
|
||||
onChange={handleChange('S1')}
|
||||
/>
|
||||
|
||||
<Group justify="right">
|
||||
|
||||
@@ -67,7 +67,7 @@ function CreateGrafikBerdasarkanPendidikan() {
|
||||
label="SD"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.create.form.SD}
|
||||
defaultValue={stategrafik.create.form.SD}
|
||||
onChange={(val) => (stategrafik.create.form.SD = val.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
@@ -75,7 +75,7 @@ function CreateGrafikBerdasarkanPendidikan() {
|
||||
label="SMP"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.create.form.SMP}
|
||||
defaultValue={stategrafik.create.form.SMP}
|
||||
onChange={(val) => (stategrafik.create.form.SMP = val.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
@@ -83,7 +83,7 @@ function CreateGrafikBerdasarkanPendidikan() {
|
||||
label="SMA"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.create.form.SMA}
|
||||
defaultValue={stategrafik.create.form.SMA}
|
||||
onChange={(val) => (stategrafik.create.form.SMA = val.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
@@ -91,7 +91,7 @@ function CreateGrafikBerdasarkanPendidikan() {
|
||||
label="D3"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.create.form.D3}
|
||||
defaultValue={stategrafik.create.form.D3}
|
||||
onChange={(val) => (stategrafik.create.form.D3 = val.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
@@ -99,7 +99,7 @@ function CreateGrafikBerdasarkanPendidikan() {
|
||||
label="S1"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.create.form.S1}
|
||||
defaultValue={stategrafik.create.form.S1}
|
||||
onChange={(val) => (stategrafik.create.form.S1 = val.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -1,24 +1,42 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Center, Flex, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Flex,
|
||||
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, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Cell, Pie, PieChart } from 'recharts';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { DonutChart } from '@mantine/charts';
|
||||
import HeaderSearch from '../../../_com/header';
|
||||
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
|
||||
import grafikNganggur from '../../../_state/ekonomi/usia-kerja-nganggur';
|
||||
|
||||
function GrafikBerdasarkanPendidikan() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [search, setSearch] = useState('');
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Detail Data Pengangguran Berdasarkan Pendidikan'
|
||||
placeholder='Cari data pendidikan...'
|
||||
title="Detail Data Pengangguran Berdasarkan Pendidikan"
|
||||
placeholder="Cari data pendidikan..."
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -31,7 +49,6 @@ function GrafikBerdasarkanPendidikan() {
|
||||
function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
|
||||
const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan);
|
||||
const [donutData, setDonutData] = useState<any[]>([]);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const router = useRouter();
|
||||
@@ -45,37 +62,45 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = stategrafik.findMany;
|
||||
const { data, page, totalPages, loading, load } = stategrafik.findMany;
|
||||
|
||||
useShallowEffect(() => {
|
||||
setMounted(true);
|
||||
load(page, 10, search);
|
||||
}, [page, search]);
|
||||
|
||||
useEffect(() => {
|
||||
if (stategrafik.findMany.data) {
|
||||
const SD = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SD || 0), 0);
|
||||
const SMP = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SMP || 0), 0);
|
||||
const SMA = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SMA || 0), 0);
|
||||
const D3 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.D3 || 0), 0);
|
||||
const S1 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.S1 || 0), 0);
|
||||
const SD = stategrafik.findMany.data.reduce(
|
||||
(acc: number, cur: any) => acc + Number(cur.SD || 0),
|
||||
0,
|
||||
);
|
||||
const SMP = stategrafik.findMany.data.reduce(
|
||||
(acc: number, cur: any) => acc + Number(cur.SMP || 0),
|
||||
0,
|
||||
);
|
||||
const SMA = stategrafik.findMany.data.reduce(
|
||||
(acc: number, cur: any) => acc + Number(cur.SMA || 0),
|
||||
0,
|
||||
);
|
||||
const D3 = stategrafik.findMany.data.reduce(
|
||||
(acc: number, cur: any) => acc + Number(cur.D3 || 0),
|
||||
0,
|
||||
);
|
||||
const S1 = stategrafik.findMany.data.reduce(
|
||||
(acc: number, cur: any) => acc + Number(cur.S1 || 0),
|
||||
0,
|
||||
);
|
||||
setDonutData([
|
||||
{ name: 'SD', value: SD, color: '#4b6Ef5', key: 'SD' },
|
||||
{ name: 'SMP', value: SMP, color: '#14b885', key: 'SMP' },
|
||||
{ name: 'SMA', value: SMA, color: '#E6A03B', key: 'SMA' },
|
||||
{ name: 'D3', value: D3, color: '#DB524D', key: 'D3' },
|
||||
{ name: 'S1', value: S1, color: '#1018A8FF', key: 'S1' },
|
||||
{ name: 'SD', value: SD, color: '#4b6Ef5' },
|
||||
{ name: 'SMP', value: SMP, color: '#14b885' },
|
||||
{ name: 'SMA', value: SMA, color: '#E6A03B' },
|
||||
{ name: 'D3', value: D3, color: '#DB524D' },
|
||||
{ name: 'S1', value: S1, color: '#1018A8FF' },
|
||||
]);
|
||||
}
|
||||
}, [stategrafik.findMany.data]);
|
||||
|
||||
const filteredData = data || []
|
||||
const filteredData = data || [];
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
@@ -87,21 +112,26 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
{/* Table Data */}
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
{/* Header */}
|
||||
<Flex justify="space-between" align="center" mb="md">
|
||||
<Title order={4}>List Pengangguran Berdasarkan Usia Kerja</Title>
|
||||
<Title order={4}>List Pengangguran Berdasarkan Pendidikan</Title>
|
||||
<Tooltip label="Tambah Data" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create')}
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create',
|
||||
)
|
||||
}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
@@ -120,7 +150,9 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
|
||||
<TableTr>
|
||||
<TableTd colSpan={7}>
|
||||
<Center py={20}>
|
||||
<Text color="dimmed">Belum ada data grafik responden</Text>
|
||||
<Text color="dimmed">
|
||||
Belum ada data grafik responden
|
||||
</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
@@ -134,7 +166,15 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
|
||||
<TableTd>{item.S1}</TableTd>
|
||||
<TableTd>
|
||||
<Tooltip label="Edit Data" withArrow>
|
||||
<Button color="green" variant="light" onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/${item.id}`)}>
|
||||
<Button
|
||||
color="green"
|
||||
variant="light"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/${item.id}`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconEdit size={18} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@@ -148,7 +188,8 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<IconTrash size={18} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@@ -161,6 +202,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Pagination */}
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
@@ -176,51 +218,35 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
|
||||
/>
|
||||
</Center>
|
||||
|
||||
{/* Chart */}
|
||||
<Box mt="md">
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Stack>
|
||||
<Title order={3} pb={10}>Grafik Pengangguran Berdasarkan Pendidikan</Title>
|
||||
{mounted && donutData.length > 0 ? (
|
||||
<Box style={{ width: '100%', minHeight: 250 }}>
|
||||
<PieChart width={800} height={300} data={donutData}>
|
||||
<Pie
|
||||
dataKey="value"
|
||||
nameKey="name"
|
||||
data={donutData}
|
||||
cx={400}
|
||||
cy={150}
|
||||
innerRadius={60}
|
||||
outerRadius={115}
|
||||
label
|
||||
>
|
||||
{donutData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
</PieChart>
|
||||
<Stack gap="xs" mt="sm">
|
||||
{donutData.map((entry) => (
|
||||
<Flex key={entry.key} gap="sm" align="center">
|
||||
<Box w={20} h={20} bg={entry.color} />
|
||||
<Text>{entry.name} : {entry.value}</Text>
|
||||
</Flex>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
) : (
|
||||
<Text color="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
{/* Donut Chart */}
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md" mt="md">
|
||||
<Stack>
|
||||
<Title order={3} pb={10}>
|
||||
Grafik Pengangguran Berdasarkan Pendidikan
|
||||
</Title>
|
||||
{donutData.length > 0 ? (
|
||||
<DonutChart
|
||||
data={donutData}
|
||||
withLabels
|
||||
withTooltip
|
||||
tooltipDataSource="segment"
|
||||
size={260}
|
||||
thickness={40}
|
||||
/>
|
||||
) : (
|
||||
<Text color="dimmed">
|
||||
Belum ada data untuk ditampilkan dalam grafik
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
{/* Modal Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleDelete}
|
||||
text='Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan pendidikan ini?'
|
||||
text="Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan pendidikan ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -2,39 +2,70 @@
|
||||
'use client';
|
||||
import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, TextInput, Title, Group, Tooltip } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Paper,
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
Group,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
|
||||
const router = useRouter();
|
||||
const params = useParams() as { id: string };
|
||||
const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur);
|
||||
const stategrafik = useProxy(
|
||||
grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur
|
||||
);
|
||||
const id = params.id;
|
||||
|
||||
// ✅ state lokal, controlled
|
||||
const [formData, setFormData] = useState({
|
||||
usia18_25: '',
|
||||
usia26_35: '',
|
||||
usia36_45: '',
|
||||
usia46_keatas: '',
|
||||
});
|
||||
|
||||
// load data dari global state -> masukin ke local state
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
stategrafik.findUnique.load(id).then(() => {
|
||||
const data = stategrafik.findUnique.data;
|
||||
if (data) {
|
||||
stategrafik.update.form = {
|
||||
setFormData({
|
||||
usia18_25: data.usia18_25 || '',
|
||||
usia26_35: data.usia26_35 || '',
|
||||
usia36_45: data.usia36_45 || '',
|
||||
usia46_keatas: data.usia46_keatas || '',
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const handleChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// ✅ baru update global state pas submit
|
||||
stategrafik.update.id = id;
|
||||
stategrafik.update.form = { ...formData };
|
||||
|
||||
await stategrafik.update.submit();
|
||||
|
||||
toast.success('Data grafik berhasil diperbarui!');
|
||||
router.push(
|
||||
'/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia'
|
||||
@@ -49,7 +80,12 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
|
||||
<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">
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@@ -71,40 +107,32 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
|
||||
label="Usia 18 - 25"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.update.form.usia18_25}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.usia18_25 = val.currentTarget.value;
|
||||
}}
|
||||
value={formData.usia18_25}
|
||||
onChange={(e) => handleChange('usia18_25', e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
label="Usia 26 - 35"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.update.form.usia26_35}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.usia26_35 = val.currentTarget.value;
|
||||
}}
|
||||
value={formData.usia26_35}
|
||||
onChange={(e) => handleChange('usia26_35', e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
label="Usia 36 - 45"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.update.form.usia36_45}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.usia36_45 = val.currentTarget.value;
|
||||
}}
|
||||
value={formData.usia36_45}
|
||||
onChange={(e) => handleChange('usia36_45', e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
label="Usia 46 +"
|
||||
type="number"
|
||||
placeholder="Masukkan jumlah"
|
||||
value={stategrafik.update.form.usia46_keatas}
|
||||
onChange={(val) => {
|
||||
stategrafik.update.form.usia46_keatas = val.currentTarget.value;
|
||||
}}
|
||||
value={formData.usia46_keatas}
|
||||
onChange={(e) => handleChange('usia46_keatas', e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user