Compare commits
22 Commits
nico/30-se
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| d66a952d4c | |||
| ed371bd0d9 | |||
| f82c7b86e0 | |||
| b5d6585cd5 | |||
| aa98359ef7 | |||
| 0ff0d5234a | |||
| 827c1c191a | |||
| fb596f9033 | |||
| 9055b40769 | |||
| bbf13c1cf7 | |||
| 75bf0652b1 | |||
| 0b574406e2 | |||
| ccf39bc778 | |||
| 3c21f7742c | |||
| a158241c0b | |||
| 80c5dc6361 | |||
| 8ad38fc907 | |||
| d601b2fee3 | |||
| cee0957e07 | |||
| 5c66eccf23 | |||
| f7fd9be255 | |||
| 8a6d8ed8db |
@@ -3,7 +3,7 @@
|
||||
"version": "0.1.5",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "bun --bun next dev --hostname 0.0.0.0",
|
||||
"dev": "bun --bun next dev",
|
||||
"build": "bun --bun next build",
|
||||
"start": "bun --bun next start"
|
||||
},
|
||||
@@ -43,6 +43,7 @@
|
||||
"@types/bun": "^1.2.2",
|
||||
"@types/leaflet": "^1.9.20",
|
||||
"@types/lodash": "^4.17.16",
|
||||
"@types/nodemailer": "^7.0.2",
|
||||
"add": "^2.0.6",
|
||||
"adm-zip": "^0.5.16",
|
||||
"animate.css": "^4.1.1",
|
||||
@@ -52,6 +53,7 @@
|
||||
"classnames": "^2.5.1",
|
||||
"colors": "^1.4.0",
|
||||
"dayjs": "^1.11.13",
|
||||
"dotenv": "^17.2.3",
|
||||
"elysia": "^1.3.5",
|
||||
"embla-carousel-autoplay": "^8.5.2",
|
||||
"embla-carousel-react": "^7.1.0",
|
||||
@@ -71,6 +73,7 @@
|
||||
"next": "^15.5.2",
|
||||
"next-view-transitions": "^0.3.4",
|
||||
"node-fetch": "^3.3.2",
|
||||
"nodemailer": "^7.0.10",
|
||||
"p-limit": "^6.2.0",
|
||||
"primeicons": "^7.0.0",
|
||||
"primereact": "^10.9.6",
|
||||
@@ -82,6 +85,7 @@
|
||||
"react-simple-toasts": "^6.1.0",
|
||||
"react-toastify": "^11.0.5",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"react-zoom-pan-pinch": "^3.7.0",
|
||||
"readdirp": "^4.1.1",
|
||||
"recharts": "^2.15.3",
|
||||
"sharp": "^0.34.3",
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
[
|
||||
{ "name": "Semua" },
|
||||
{ "name": "Pemerintahan" },
|
||||
{ "name": "Pembangunan" },
|
||||
{ "name": "Ekonomi" },
|
||||
@@ -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,16 +1,4 @@
|
||||
[
|
||||
{
|
||||
"id": "cmds8w2q60002vnbe6i8qhkuo",
|
||||
"name": "Telephone Desa Darmasaba",
|
||||
"iconUrl": "081239580000",
|
||||
"imageId": "cmff3nv180003vn6h5jvedidq"
|
||||
},
|
||||
{
|
||||
"id": "cmds8z7u20005vnbegyyvnbk0",
|
||||
"name": "Email Desa Darmasaba",
|
||||
"iconUrl": "desadarmasaba@badungkab.go.id",
|
||||
"imageId": "cmff3ll130001vn6hkhls3f5y"
|
||||
},
|
||||
{
|
||||
"id": "cmds9023u0008vnbe3oxmhwyf",
|
||||
"name": "Desa Darmasaba",
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
[
|
||||
{ "nama": "Kebersihan" },
|
||||
{ "nama": "Infrastruktur" },
|
||||
{ "nama": "Sosial" },
|
||||
{ "nama": "Lingkungan" }
|
||||
]
|
||||
@@ -0,0 +1,9 @@
|
||||
[
|
||||
{ "id": "cmghqwjs4000404l8c5uvc300", "nama": "PAUD" },
|
||||
{ "id": "cmghqwjs4000404l8c5uvc301", "nama": "TK" },
|
||||
{ "id": "cmghqwjs4000404l8c5uvc302", "nama": "SD" },
|
||||
{ "id": "cmghqwjs4000404l8c5uvc303", "nama": "SMP" },
|
||||
{ "id": "cmghqwjs4000404l8c5uvc304", "nama": "SMA" },
|
||||
{ "id": "cmghqwjs4000404l8c5uvc305", "nama": "SMK" }
|
||||
]
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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 ========================================= //
|
||||
@@ -142,7 +143,7 @@ model MediaSosial {
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
//========================================= PROFILE ========================================= //
|
||||
//========================================= DESA ANTI KORUPSI ========================================= //
|
||||
model DesaAntiKorupsi {
|
||||
id String @id @default(cuid())
|
||||
name String @unique
|
||||
@@ -298,6 +299,7 @@ model PosisiOrganisasiPPID {
|
||||
updatedAt DateTime @updatedAt
|
||||
parent PosisiOrganisasiPPID? @relation("Parent", fields: [parentId], references: [id])
|
||||
children PosisiOrganisasiPPID[] @relation("Parent")
|
||||
StrukturOrganisasiPPID StrukturOrganisasiPPID[]
|
||||
}
|
||||
|
||||
model PegawaiPPID {
|
||||
@@ -316,15 +318,16 @@ model PegawaiPPID {
|
||||
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])
|
||||
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?
|
||||
@@ -1167,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())
|
||||
@@ -1340,6 +1344,7 @@ model PasarDesa {
|
||||
harga Int
|
||||
rating Float
|
||||
alamatUsaha String
|
||||
kontak String
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
@@ -1382,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())
|
||||
@@ -1391,24 +1397,39 @@ model LowonganPekerjaan {
|
||||
|
||||
// ========================================= STRUKTUR ORGANISASI ========================================= //
|
||||
|
||||
model PosisiOrganisasi {
|
||||
id String @id @default(uuid()) @db.VarChar(50)
|
||||
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 PosisiOrganisasiBumDes {
|
||||
id String @id @default(cuid())
|
||||
nama String @db.VarChar(100)
|
||||
deskripsi String? @db.Text
|
||||
hierarki Int
|
||||
|
||||
pegawai Pegawai[]
|
||||
strukturOrganisasi StrukturOrganisasi[] // Relasi balik
|
||||
StrukturOrganisasiPPID StrukturOrganisasiPPID[]
|
||||
pegawai PegawaiBumDes[]
|
||||
strukturOrganisasi StrukturBumDes[] // Relasi balik
|
||||
parentId String?
|
||||
isActive Boolean @default(true)
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
|
||||
@@map("posisi_organisasi")
|
||||
parent PosisiOrganisasiBumDes? @relation("Parent", fields: [parentId], references: [id])
|
||||
children PosisiOrganisasiBumDes[] @relation("Parent")
|
||||
StrukturOrganisasiBumDes StrukturOrganisasiBumDes[]
|
||||
}
|
||||
|
||||
model Pegawai {
|
||||
id String @id @default(uuid()) @db.Uuid
|
||||
model PegawaiBumDes {
|
||||
id String @id @default(cuid())
|
||||
namaLengkap String @db.VarChar(255)
|
||||
gelarAkademik String? @db.VarChar(100)
|
||||
image FileStorage? @relation(fields: [imageId], references: [id])
|
||||
@@ -1421,49 +1442,22 @@ model Pegawai {
|
||||
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")
|
||||
posisi PosisiOrganisasiBumDes @relation(fields: [posisiId], references: [id])
|
||||
strukturOrganisasi StrukturBumDes[] // Relasi balik
|
||||
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 StrukturOrganisasi {
|
||||
model StrukturOrganisasiBumDes {
|
||||
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])
|
||||
|
||||
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)
|
||||
|
||||
@@map("struktur_organisasi")
|
||||
}
|
||||
|
||||
// ========================================= PROGRAM KEMISKINAN ========================================= //
|
||||
@@ -1612,7 +1606,7 @@ model Pembiayaan {
|
||||
ApbDesa ApbDesa[] @relation("ApbDesaPembiayaan")
|
||||
}
|
||||
|
||||
// ========================================= INOVASI ========================================= //
|
||||
// ========================================= MENU INOVASI ========================================= //
|
||||
// ========================================= DESA DIGITAL / SMART VILLAGE ========================================= //
|
||||
model DesaDigital {
|
||||
id String @id @default(cuid())
|
||||
@@ -2093,6 +2087,9 @@ model DataPerpustakaan {
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
|
||||
// relasi baru ke peminjaman
|
||||
peminjamanBuku PeminjamanBuku[]
|
||||
}
|
||||
|
||||
model KategoriBuku {
|
||||
@@ -2105,6 +2102,31 @@ model KategoriBuku {
|
||||
DataPerpustakaan DataPerpustakaan[]
|
||||
}
|
||||
|
||||
model PeminjamanBuku {
|
||||
id String @id @default(cuid())
|
||||
nama String
|
||||
noTelp String
|
||||
alamat String
|
||||
bukuId String
|
||||
tanggalPinjam DateTime @default(now())
|
||||
batasKembali DateTime // tenggat waktu pengembalian
|
||||
tanggalKembali DateTime? // diisi saat dikembalikan
|
||||
status StatusPeminjaman @default(Dipinjam)
|
||||
catatan String? // opsional, misal: kondisi buku
|
||||
buku DataPerpustakaan @relation(fields: [bukuId], references: [id])
|
||||
createdAt DateTime @default(now())
|
||||
updatedAt DateTime @updatedAt
|
||||
deletedAt DateTime @default(now())
|
||||
isActive Boolean @default(true)
|
||||
}
|
||||
|
||||
enum StatusPeminjaman {
|
||||
Dipinjam
|
||||
Dikembalikan
|
||||
Terlambat
|
||||
Dibatalkan
|
||||
}
|
||||
|
||||
// ========================================= USER ========================================= //
|
||||
|
||||
model User {
|
||||
|
||||
111
prisma/seed.ts
111
prisma/seed.ts
@@ -31,14 +31,14 @@ 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 kategoriBerita from "./data/kategori-berita.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/desa/berita/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";
|
||||
import tujuanEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan.json";
|
||||
import bentukKonservasiBerdasarkanAdat from "./data/lingkungan/konservasi-adat-bali/bentuk-konservasi.json";
|
||||
import kategoriKegiatanData from "./data/lingkungan/gotong-royong/kategori-gotong-royong.json";
|
||||
import filosofiTriHita from "./data/lingkungan/konservasi-adat-bali/filosofi-tri-hita.json";
|
||||
import nilaiKonservasiAdat from "./data/lingkungan/konservasi-adat-bali/nilai-konservasi-adat.json";
|
||||
import caraMemperolehInformasi from "./data/list-caraMemperolehInformasi.json";
|
||||
@@ -56,6 +56,7 @@ 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 jenjangPendidikan from "./data/pendidikan/info-sekolah/jenjang-pendidikan.json";
|
||||
import seedAssets from "./seed_assets";
|
||||
import { safeSeedUnique } from "./safeseedUnique";
|
||||
|
||||
@@ -807,28 +808,34 @@ import { safeSeedUnique } from "./safeseedUnique";
|
||||
}
|
||||
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,
|
||||
},
|
||||
@@ -857,26 +864,6 @@ import { safeSeedUnique } from "./safeseedUnique";
|
||||
}
|
||||
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: {
|
||||
@@ -900,6 +887,30 @@ import { safeSeedUnique } from "./safeseedUnique";
|
||||
}
|
||||
console.log("📊 detailDataPengangguran success ...");
|
||||
|
||||
// =========== KATEGORI GOTONG ROYONG ===========
|
||||
// Add IDs to the kategoriKegiatan data
|
||||
const kategoriKegiatan = kategoriKegiatanData.map((k, index) => ({
|
||||
...k,
|
||||
id: `kategori-${index + 1}`
|
||||
}));
|
||||
|
||||
for (const k of kategoriKegiatan) {
|
||||
await prisma.kategoriKegiatan.upsert({
|
||||
where: {
|
||||
id: k.id,
|
||||
},
|
||||
update: {
|
||||
nama: k.nama,
|
||||
},
|
||||
create: {
|
||||
id: k.id,
|
||||
nama: k.nama,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
console.log("kategori kegiatan success ...");
|
||||
|
||||
for (const e of tujuanEdukasiLingkungan) {
|
||||
await prisma.tujuanEdukasiLingkungan.upsert({
|
||||
where: {
|
||||
@@ -1154,6 +1165,22 @@ import { safeSeedUnique } from "./safeseedUnique";
|
||||
"✅ fasilitas bimbingan belajar desa seeded (editable later via UI)"
|
||||
);
|
||||
|
||||
for (const j of jenjangPendidikan) {
|
||||
await prisma.jenjangPendidikan.upsert({
|
||||
where: {
|
||||
id: j.id || undefined,
|
||||
},
|
||||
update: {
|
||||
nama: j.nama,
|
||||
},
|
||||
create: {
|
||||
nama: j.nama,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
console.log("✅ Jenjang Pendidikan seeded successfully");
|
||||
|
||||
// seed assets
|
||||
await seedAssets();
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 266 KiB After Width: | Height: | Size: 378 KiB |
@@ -75,7 +75,8 @@ const berita = proxy({
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "", kategori = "") => {
|
||||
berita.findMany.loading = true; // ✅ Akses langsung via nama path
|
||||
const startTime = Date.now();
|
||||
berita.findMany.loading = true;
|
||||
berita.findMany.page = page;
|
||||
berita.findMany.search = search;
|
||||
|
||||
@@ -98,7 +99,14 @@ const berita = proxy({
|
||||
berita.findMany.data = [];
|
||||
berita.findMany.totalPages = 1;
|
||||
} finally {
|
||||
// pastikan minimal 300ms sebelum loading = false (biar UX smooth)
|
||||
const elapsed = Date.now() - startTime;
|
||||
const minDelay = 300;
|
||||
const delay = elapsed < minDelay ? minDelay - elapsed : 0;
|
||||
|
||||
setTimeout(() => {
|
||||
berita.findMany.loading = false;
|
||||
}, delay);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@@ -581,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;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@@ -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,16 +350,16 @@ 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 ?? [];
|
||||
@@ -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,20 +506,31 @@ const pegawai = proxy({
|
||||
},
|
||||
|
||||
// In struktur-organisasi.ts
|
||||
findMany: {
|
||||
data: null as any[] | null,
|
||||
findMany: {
|
||||
data: null as
|
||||
| Prisma.PegawaiBumDesGetPayload<{
|
||||
include: {
|
||||
image: true;
|
||||
posisi: true;
|
||||
};
|
||||
}>[]
|
||||
| null,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
total: 0,
|
||||
loading: false,
|
||||
load: async (page = 1, limit = 10) => { // Change to arrow function
|
||||
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 res = await ApiFetch.api.ekonomi["struktur-organisasi"][
|
||||
"pegawai"
|
||||
]["find-many"].get({
|
||||
query: { page, limit },
|
||||
const query: any = { page, limit };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.ekonomi['struktur-organisasi'].pegawai['find-many'].get({
|
||||
query,
|
||||
});
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
@@ -321,10 +552,10 @@ findMany: {
|
||||
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}`,
|
||||
{
|
||||
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}`,
|
||||
{
|
||||
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;
|
||||
|
||||
@@ -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}`,
|
||||
{
|
||||
// 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(() => ({}));
|
||||
|
||||
@@ -332,7 +332,7 @@ const keunggulanProgram = proxy({
|
||||
].post(keunggulanProgram.create.form);
|
||||
if (res.status === 200) {
|
||||
keunggulanProgram.findMany.load();
|
||||
return toast.success("Data Berhasil Dibuat, Silahkan Menunggu Konfirmasi dari Admin di WhatsApp");
|
||||
return toast.success("Data Berhasil Dibuat");
|
||||
}
|
||||
console.log(res);
|
||||
return toast.error("failed create");
|
||||
|
||||
@@ -68,6 +68,7 @@ const dataPerpustakaan = proxy({
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "", kategori = "") => {
|
||||
const startTime = Date.now();
|
||||
dataPerpustakaan.findMany.loading = true; // ✅ Akses langsung via nama path
|
||||
dataPerpustakaan.findMany.page = page;
|
||||
dataPerpustakaan.findMany.search = search;
|
||||
@@ -77,7 +78,10 @@ const dataPerpustakaan = proxy({
|
||||
if (search) query.search = search;
|
||||
if (kategori) query.kategori = kategori;
|
||||
|
||||
const res = await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan["findMany"].get({ query });
|
||||
const res =
|
||||
await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan[
|
||||
"findMany"
|
||||
].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
dataPerpustakaan.findMany.data = res.data.data ?? [];
|
||||
@@ -91,7 +95,52 @@ const dataPerpustakaan = proxy({
|
||||
dataPerpustakaan.findMany.data = [];
|
||||
dataPerpustakaan.findMany.totalPages = 1;
|
||||
} finally {
|
||||
// pastikan minimal 300ms sebelum loading = false (biar UX smooth)
|
||||
const elapsed = Date.now() - startTime;
|
||||
const minDelay = 300;
|
||||
const delay = elapsed < minDelay ? minDelay - elapsed : 0;
|
||||
|
||||
setTimeout(() => {
|
||||
dataPerpustakaan.findMany.loading = false;
|
||||
}, delay);
|
||||
}
|
||||
},
|
||||
},
|
||||
findManyAll: {
|
||||
data: null as
|
||||
| Prisma.DataPerpustakaanGetPayload<{
|
||||
include: {
|
||||
image: true;
|
||||
kategori: true;
|
||||
};
|
||||
}>[]
|
||||
| null,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (search = "", kategori = "") => {
|
||||
dataPerpustakaan.findMany.loading = true; // ✅ Akses langsung via nama path
|
||||
dataPerpustakaan.findMany.search = search;
|
||||
|
||||
try {
|
||||
const query: any = {};
|
||||
if (search) query.search = search;
|
||||
if (kategori) query.kategori = kategori;
|
||||
|
||||
const res =
|
||||
await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan[
|
||||
"findManyAll"
|
||||
].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
dataPerpustakaan.findManyAll.data = res.data.data ?? [];
|
||||
} else {
|
||||
dataPerpustakaan.findManyAll.data = [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch data perpustakaan paginated:", err);
|
||||
dataPerpustakaan.findManyAll.data = [];
|
||||
} finally {
|
||||
dataPerpustakaan.findManyAll.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -330,7 +379,10 @@ const kategoriBuku = proxy({
|
||||
const query: any = { page, limit };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku["findMany"].get({ query });
|
||||
const res =
|
||||
await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku[
|
||||
"findMany"
|
||||
].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
kategoriBuku.findMany.data = res.data.data ?? [];
|
||||
@@ -514,9 +566,319 @@ const kategoriBuku = proxy({
|
||||
},
|
||||
});
|
||||
|
||||
const templatePeminjamanBuku = z.object({
|
||||
nama: z.string().min(1, "Nama harus diisi"),
|
||||
noTelp: z.string().min(1, "No Telp harus diisi"),
|
||||
alamat: z.string().min(1, "Alamat harus diisi"),
|
||||
bukuId: z.string().min(1, "Buku ID harus diisi"),
|
||||
tanggalPinjam: z.string().min(1, "Tanggal Pinjam harus diisi"),
|
||||
batasKembali: z.string().min(1, "Batas Kembali harus diisi"),
|
||||
tanggalKembali: z.string().min(1, "Tanggal Kembali harus diisi"),
|
||||
catatan: z.string().min(1, "Catatan harus diisi"),
|
||||
});
|
||||
|
||||
const defaultPeminjamanBuku = {
|
||||
nama: "",
|
||||
noTelp: "",
|
||||
alamat: "",
|
||||
bukuId: "",
|
||||
tanggalPinjam: "",
|
||||
batasKembali: "",
|
||||
tanggalKembali: "",
|
||||
catatan: "",
|
||||
};
|
||||
|
||||
interface FormEditData {
|
||||
nama: string;
|
||||
noTelp: string;
|
||||
alamat: string;
|
||||
bukuId: string;
|
||||
buku?: {
|
||||
id: string;
|
||||
judul: string;
|
||||
};
|
||||
tanggalPinjam: string;
|
||||
batasKembali: string;
|
||||
tanggalKembali: string;
|
||||
catatan: string;
|
||||
status: "Dipinjam" | "Dikembalikan" | "Terlambat" | "Dibatalkan";
|
||||
}
|
||||
|
||||
const editForm: FormEditData = {
|
||||
nama: "",
|
||||
noTelp: "",
|
||||
alamat: "",
|
||||
bukuId: "",
|
||||
tanggalPinjam: "",
|
||||
batasKembali: "",
|
||||
tanggalKembali: "",
|
||||
catatan: "",
|
||||
status: "Dipinjam",
|
||||
};
|
||||
|
||||
const peminjamanBuku = proxy({
|
||||
create: {
|
||||
form: { ...defaultPeminjamanBuku },
|
||||
loading: false,
|
||||
async create() {
|
||||
const cek = templatePeminjamanBuku.safeParse(peminjamanBuku.create.form);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues
|
||||
.map((v) => `${v.path.join(".")}`)
|
||||
.join("\n")}] required`;
|
||||
return toast.error(err);
|
||||
}
|
||||
|
||||
try {
|
||||
peminjamanBuku.create.loading = true;
|
||||
const res =
|
||||
await ApiFetch.api.pendidikan.perpustakaandigital.peminjamanbuku[
|
||||
"create"
|
||||
].post(peminjamanBuku.create.form);
|
||||
if (res.status === 200) {
|
||||
peminjamanBuku.findMany.load();
|
||||
return toast.success("Data Peminjaman Buku Berhasil Dibuat");
|
||||
}
|
||||
console.log(res);
|
||||
return toast.error("failed create");
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return toast.error("failed create");
|
||||
} finally {
|
||||
peminjamanBuku.create.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
findMany: {
|
||||
data: [] as Prisma.PeminjamanBukuGetPayload<{
|
||||
include: {
|
||||
buku: true;
|
||||
};
|
||||
}>[],
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (page = 1, limit = 10, search = "") => {
|
||||
peminjamanBuku.findMany.loading = true; // ✅ Akses langsung via nama path
|
||||
peminjamanBuku.findMany.page = page;
|
||||
peminjamanBuku.findMany.search = search;
|
||||
|
||||
try {
|
||||
const query: any = { page, limit };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res =
|
||||
await ApiFetch.api.pendidikan.perpustakaandigital.peminjamanbuku[
|
||||
"findMany"
|
||||
].get({ query });
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
peminjamanBuku.findMany.data = res.data.data ?? [];
|
||||
peminjamanBuku.findMany.totalPages = res.data.totalPages ?? 1;
|
||||
} else {
|
||||
peminjamanBuku.findMany.data = [];
|
||||
peminjamanBuku.findMany.totalPages = 1;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Gagal fetch data peminjaman buku paginated:", err);
|
||||
peminjamanBuku.findMany.data = [];
|
||||
peminjamanBuku.findMany.totalPages = 1;
|
||||
} finally {
|
||||
peminjamanBuku.findMany.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
findUnique: {
|
||||
data: null as Prisma.PeminjamanBukuGetPayload<{
|
||||
include: {
|
||||
buku: true;
|
||||
};
|
||||
}> | null,
|
||||
loading: false,
|
||||
async load(id: string) {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/pendidikan/perpustakaandigital/peminjamanbuku/${id}`
|
||||
);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
peminjamanBuku.findUnique.data = data.data ?? null;
|
||||
} else {
|
||||
console.error("Failed to fetch data", res.status, res.statusText);
|
||||
peminjamanBuku.findUnique.data = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
peminjamanBuku.findUnique.data = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
delete: {
|
||||
loading: false,
|
||||
async delete(id: string) {
|
||||
if (!id) return toast.warn("ID tidak valid");
|
||||
|
||||
try {
|
||||
peminjamanBuku.delete.loading = true;
|
||||
|
||||
const response = await fetch(
|
||||
`/api/pendidikan/perpustakaandigital/peminjamanbuku/del/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result?.success) {
|
||||
toast.success(
|
||||
result.message || "Data Peminjaman Buku berhasil dihapus"
|
||||
);
|
||||
await peminjamanBuku.findMany.load(); // refresh list
|
||||
} else {
|
||||
toast.error(
|
||||
result?.message || "Gagal menghapus Data Peminjaman Buku"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Gagal delete:", error);
|
||||
toast.error("Terjadi kesalahan saat menghapus Data Peminjaman Buku");
|
||||
} finally {
|
||||
peminjamanBuku.delete.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
update: {
|
||||
id: "",
|
||||
form: { ...editForm },
|
||||
loading: false,
|
||||
async load(id: string) {
|
||||
if (!id) {
|
||||
toast.warn("ID tidak valid");
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/pendidikan/perpustakaandigital/peminjamanbuku/${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,
|
||||
noTelp: data.noTelp,
|
||||
alamat: data.alamat,
|
||||
bukuId: data.bukuId,
|
||||
tanggalPinjam: data.tanggalPinjam,
|
||||
batasKembali: data.batasKembali,
|
||||
tanggalKembali: data.tanggalKembali,
|
||||
catatan: data.catatan,
|
||||
status: data.status,
|
||||
};
|
||||
return data; // Return the loaded data
|
||||
} else {
|
||||
throw new Error(result?.message || "Gagal memuat data");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading peminjaman buku:", error);
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : "Gagal memuat data"
|
||||
);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
async update() {
|
||||
const cek = templatePeminjamanBuku.safeParse(peminjamanBuku.update.form);
|
||||
if (!cek.success) {
|
||||
const err = `[${cek.error.issues
|
||||
.map((v) => `${v.path.join(".")}`)
|
||||
.join("\n")}] required`;
|
||||
toast.error(err);
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
peminjamanBuku.update.loading = true;
|
||||
|
||||
const response = await fetch(
|
||||
`/api/pendidikan/perpustakaandigital/peminjamanbuku/${this.id}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
nama: this.form.nama,
|
||||
noTelp: this.form.noTelp,
|
||||
alamat: this.form.alamat,
|
||||
bukuId: this.form.bukuId,
|
||||
tanggalPinjam: this.form.tanggalPinjam,
|
||||
batasKembali: this.form.batasKembali,
|
||||
tanggalKembali: this.form.tanggalKembali,
|
||||
catatan: this.form.catatan,
|
||||
status: this.form.status,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
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 data peminjaman buku");
|
||||
await peminjamanBuku.findMany.load(); // refresh list
|
||||
return true;
|
||||
} else {
|
||||
throw new Error(
|
||||
result.message || "Gagal update data peminjaman buku"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating data peminjaman buku:", error);
|
||||
toast.error(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Terjadi kesalahan saat update data peminjaman buku"
|
||||
);
|
||||
return false;
|
||||
} finally {
|
||||
peminjamanBuku.update.loading = false;
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
peminjamanBuku.update.id = "";
|
||||
peminjamanBuku.update.form = { ...editForm };
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const perpustakaanDigitalState = proxy({
|
||||
dataPerpustakaan,
|
||||
kategoriBuku,
|
||||
peminjamanBuku,
|
||||
});
|
||||
|
||||
export default perpustakaanDigitalState;
|
||||
|
||||
@@ -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,6 +57,28 @@ 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;
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -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) {
|
||||
@@ -524,9 +561,48 @@ const pegawai = proxy({
|
||||
}
|
||||
},
|
||||
},
|
||||
findManyAll: {
|
||||
data: null as
|
||||
| Prisma.PegawaiPPIDGetPayload<{
|
||||
include: {
|
||||
image: true;
|
||||
posisi: true;
|
||||
};
|
||||
}>[]
|
||||
| null,
|
||||
loading: false,
|
||||
search: "",
|
||||
load: async (search = "") => {
|
||||
// Change to arrow function
|
||||
pegawai.findManyAll.loading = true; // Use the full path to access the property
|
||||
pegawai.findManyAll.search = search;
|
||||
try {
|
||||
const query: any = { search };
|
||||
if (search) query.search = search;
|
||||
|
||||
const res = await ApiFetch.api.ppid.strukturppid.pegawai[
|
||||
"find-many-all"
|
||||
].get({
|
||||
query,
|
||||
});
|
||||
|
||||
if (res.status === 200 && res.data?.success) {
|
||||
pegawai.findManyAll.data = res.data.data || [];
|
||||
} else {
|
||||
console.error("Failed to load pegawai:", res.data?.message);
|
||||
pegawai.findManyAll.data = [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading pegawai:", error);
|
||||
pegawai.findManyAll.data = [];
|
||||
} finally {
|
||||
pegawai.findManyAll.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
findUnique: {
|
||||
data: null as
|
||||
| (Prisma.PegawaiGetPayload<{
|
||||
| (Prisma.PegawaiPPIDGetPayload<{
|
||||
include: { posisi: true; image: true };
|
||||
}> & { isActive: boolean })
|
||||
| null,
|
||||
@@ -571,6 +647,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 },
|
||||
|
||||
@@ -166,13 +166,18 @@ function EditBerita() {
|
||||
error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi singkat"
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(e) => handleChange("deskripsi", e.target.value)}
|
||||
required
|
||||
onChange={(htmlContent) =>
|
||||
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
{/* Upload Gambar */}
|
||||
<Box>
|
||||
|
||||
@@ -80,7 +80,7 @@ function DetailBerita() {
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
|
||||
@@ -131,13 +131,17 @@ export default function CreateBerita() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Deskripsi Singkat"
|
||||
required
|
||||
placeholder="Masukkan deskripsi berita"
|
||||
defaultValue={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}>
|
||||
|
||||
@@ -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;
|
||||
// }
|
||||
|
||||
@@ -27,7 +27,7 @@ function PelayananPendudukNonPermanent() {
|
||||
);
|
||||
|
||||
useShallowEffect(() => {
|
||||
pelayananPendudukNonPermanen.findById.load('1');
|
||||
pelayananPendudukNonPermanen.findById.load('edit');
|
||||
}, []);
|
||||
|
||||
if (!pelayananPendudukNonPermanen.findById.data) {
|
||||
@@ -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}`
|
||||
)
|
||||
}
|
||||
>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* 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';
|
||||
@@ -8,6 +9,7 @@ import {
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
TextInput,
|
||||
Title,
|
||||
@@ -21,38 +23,50 @@ 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({
|
||||
id: '',
|
||||
name: '',
|
||||
deskripsi: '',
|
||||
link: '',
|
||||
});
|
||||
|
||||
// load data pertama kali
|
||||
// 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) =>
|
||||
@@ -64,23 +78,27 @@ function EditPelayananPerizinanBerusaha() {
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const { name, deskripsi, link } = formData;
|
||||
if (statePerizinanBerusaha.findById.data) {
|
||||
const updatedData = {
|
||||
...statePerizinanBerusaha.findById.data,
|
||||
name,
|
||||
deskripsi,
|
||||
link,
|
||||
};
|
||||
await statePerizinanBerusaha.update.update(updatedData);
|
||||
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');
|
||||
}
|
||||
};
|
||||
|
||||
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
|
||||
@@ -97,7 +115,7 @@ function EditPelayananPerizinanBerusaha() {
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Section */}
|
||||
{/* Form */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
@@ -109,7 +127,6 @@ function EditPelayananPerizinanBerusaha() {
|
||||
<Stack gap="xs">
|
||||
<Title order={3}>Edit Pelayanan Perizinan Berusaha</Title>
|
||||
|
||||
{/* Nama Field */}
|
||||
<TextInput
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul"
|
||||
@@ -118,7 +135,6 @@ function EditPelayananPerizinanBerusaha() {
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Link Field */}
|
||||
<TextInput
|
||||
label="Link"
|
||||
placeholder="Masukkan link terkait"
|
||||
@@ -126,7 +142,6 @@ function EditPelayananPerizinanBerusaha() {
|
||||
onChange={(e) => handleChange('link')(e.target.value)}
|
||||
/>
|
||||
|
||||
{/* Deskripsi Field */}
|
||||
<Box>
|
||||
<Title order={6}>Deskripsi</Title>
|
||||
<EditEditor
|
||||
@@ -135,23 +150,20 @@ function EditPelayananPerizinanBerusaha() {
|
||||
/>
|
||||
</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 = 'edit'; // 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}`
|
||||
)
|
||||
}
|
||||
>
|
||||
@@ -183,3 +207,4 @@ function PerizinanBerusaha() {
|
||||
}
|
||||
|
||||
export default PerizinanBerusaha;
|
||||
|
||||
|
||||
@@ -51,25 +51,31 @@ 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();
|
||||
}, [params?.id, stateSurat.edit]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [params?.id]);
|
||||
|
||||
|
||||
|
||||
// handler untuk submit
|
||||
const handleSubmit = useCallback(async () => {
|
||||
|
||||
@@ -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, useCallback } 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);
|
||||
@@ -111,21 +109,19 @@ function EditPelayananTelunjukSakti() {
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Deskripsi pakai editor */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi
|
||||
</Text>
|
||||
<EditEditor
|
||||
{/* Deskripsi */}
|
||||
<TextInput
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) => handleChange('deskripsi', htmlContent)}
|
||||
onChange={(e) => handleChange('deskripsi', e.target.value)}
|
||||
label="Judul Link"
|
||||
placeholder="Masukkan judul link"
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Link */}
|
||||
<TextInput
|
||||
label="Link"
|
||||
placeholder="Masukkan link terkait"
|
||||
placeholder="Masukkan alamat link"
|
||||
value={formData.link}
|
||||
onChange={(e) => handleChange('link', e.target.value)}
|
||||
/>
|
||||
|
||||
@@ -82,8 +82,8 @@ function CreatePelayananTelunjukDesa() {
|
||||
onChange={(val) => {
|
||||
stateTelunjukDesa.create.form.deskripsi = val.target.value;
|
||||
}}
|
||||
label="Deskripsi"
|
||||
placeholder="Masukkan deskripsi pelayanan"
|
||||
label="Judul Link"
|
||||
placeholder="Masukkan judul link"
|
||||
required
|
||||
/>
|
||||
|
||||
|
||||
@@ -63,6 +63,16 @@ function EditPotensi() {
|
||||
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);
|
||||
}
|
||||
@@ -76,6 +86,7 @@ function EditPotensi() {
|
||||
loadPotensi();
|
||||
}, [params?.id]);
|
||||
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
let imageId = formData.imageId;
|
||||
@@ -143,13 +154,17 @@ function EditPotensi() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi"
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(e) => handleChange("deskripsi", e.target.value)}
|
||||
required
|
||||
onChange={(htmlContent) =>
|
||||
handleChange("deskripsi", htmlContent)
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Select
|
||||
value={formData.kategoriId}
|
||||
|
||||
@@ -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" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
|
||||
@@ -101,13 +101,17 @@ function CreatePotensi() {
|
||||
/>
|
||||
|
||||
{/* Deskripsi */}
|
||||
<TextInput
|
||||
defaultValue={potensiState.create.form.deskripsi}
|
||||
onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
|
||||
label="Deskripsi"
|
||||
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
|
||||
|
||||
@@ -102,20 +102,25 @@ function ListPotensi({ search }: { search: string }) {
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Box w={200}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<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"}}
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
/>
|
||||
</Box>
|
||||
</TableTd>
|
||||
|
||||
@@ -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,26 +91,25 @@ 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);
|
||||
maskotState.update.updateField("deskripsi", formData.deskripsi);
|
||||
|
||||
@@ -162,7 +162,7 @@ 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>
|
||||
@@ -216,7 +216,7 @@ function Page() {
|
||||
<Divider my="md" color={colors['blue-button']} />
|
||||
<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>
|
||||
|
||||
@@ -75,12 +75,17 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Box w={200}>
|
||||
<Text fw={500} lineClamp={1}>{item.nama}</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Box w={200}>
|
||||
<Text lineClamp={1}>{item.periode}</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Box w={200}>
|
||||
<Button
|
||||
size="xs"
|
||||
radius="md"
|
||||
@@ -91,6 +96,7 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
</Box>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))
|
||||
|
||||
@@ -14,7 +14,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 demografiPekerjaan from '../../../_state/ekonomi/demografi-pekerjaan';
|
||||
@@ -25,59 +25,65 @@ interface FormData {
|
||||
perempuan: number;
|
||||
}
|
||||
|
||||
function EditDemografiPekerjaan() {
|
||||
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 sekali waktu
|
||||
// ✅ 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) {
|
||||
setFormData({
|
||||
pekerjaan: String(data.pekerjaan || ''),
|
||||
lakiLaki: Number(data.lakiLaki || 0),
|
||||
perempuan: Number(data.perempuan || 0),
|
||||
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');
|
||||
});
|
||||
}, [id]);
|
||||
|
||||
const handleChange =
|
||||
(field: keyof FormData) =>
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]:
|
||||
field === 'lakiLaki' || field === 'perempuan'
|
||||
? Number(e.currentTarget.value)
|
||||
: e.currentTarget.value,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
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) {
|
||||
@@ -160,5 +166,3 @@ function EditDemografiPekerjaan() {
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditDemografiPekerjaan;
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
setChartData(
|
||||
stateJPM.findMany.data.map((item) => ({
|
||||
year: Number(item.year),
|
||||
totalPoorPopulation: Number(item.totalPoorPopulation)
|
||||
})));
|
||||
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 => (
|
||||
{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}`)}>
|
||||
<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) }}>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
)}
|
||||
</Box>
|
||||
</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,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_pendidikan/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">
|
||||
{/* 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>
|
||||
{mounted && donutData.length > 0 ? (
|
||||
<Box style={{ width: '100%', minHeight: 250 }}>
|
||||
<PieChart width={800} height={300} data={donutData}>
|
||||
<Pie
|
||||
dataKey="value"
|
||||
nameKey="name"
|
||||
<Title order={3} pb={10}>
|
||||
Grafik Pengangguran Berdasarkan Pendidikan
|
||||
</Title>
|
||||
{donutData.length > 0 ? (
|
||||
<DonutChart
|
||||
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>
|
||||
withLabels
|
||||
withTooltip
|
||||
tooltipDataSource="segment"
|
||||
size={260}
|
||||
thickness={40}
|
||||
/>
|
||||
) : (
|
||||
<Text color="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
|
||||
<Text color="dimmed">
|
||||
Belum ada data untuk ditampilkan dalam grafik
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
|
||||
@@ -1,13 +1,30 @@
|
||||
/* 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,
|
||||
} 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';
|
||||
@@ -17,8 +34,8 @@ function GrafikBerdasarkanUsiaKerjaYangMenganggur() {
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Detail Data Pengangguran'
|
||||
placeholder='Cari usia...'
|
||||
title="Detail Data Pengangguran"
|
||||
placeholder="Cari usia..."
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
@@ -31,7 +48,6 @@ function GrafikBerdasarkanUsiaKerjaYangMenganggur() {
|
||||
function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: string }) {
|
||||
const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur);
|
||||
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,17 +61,10 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
data,
|
||||
page,
|
||||
totalPages,
|
||||
loading,
|
||||
load,
|
||||
} = stategrafik.findMany;
|
||||
const { data, page, totalPages, loading, load } = stategrafik.findMany;
|
||||
|
||||
useShallowEffect(() => {
|
||||
setMounted(true);
|
||||
load(page, 10, search)
|
||||
load(page, 10, search);
|
||||
}, [page, search]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -64,16 +73,17 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
|
||||
const totalUsia26_35 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia26_35 || 0), 0);
|
||||
const totalUsia36_45 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia36_45 || 0), 0);
|
||||
const totalUsia46_keatas = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia46_keatas || 0), 0);
|
||||
|
||||
setDonutData([
|
||||
{ name: 'usia18_25', value: totalUsia18_25, color: colors['blue-button'], key: 'usia18_25' },
|
||||
{ name: 'usia26_35', value: totalUsia26_35, color: '#10A85AFF', key: 'usia26_35' },
|
||||
{ name: 'usia36_45', value: totalUsia36_45, color: '#C07B13FF', key: 'usia36_45' },
|
||||
{ name: 'usia46_keatas', value: totalUsia46_keatas, color: '#1094A8FF', key: 'usia46_keatas' },
|
||||
{ name: 'Usia 18-25', value: totalUsia18_25, color: colors['blue-button'] },
|
||||
{ name: 'Usia 26-35', value: totalUsia26_35, color: '#10A85AFF' },
|
||||
{ name: 'Usia 36-45', value: totalUsia36_45, color: '#C07B13FF' },
|
||||
{ name: 'Usia 46+', value: totalUsia46_keatas, color: '#1094A8FF' },
|
||||
]);
|
||||
}
|
||||
}, [stategrafik.findMany.data]);
|
||||
|
||||
const filteredData = data || []
|
||||
const filteredData = data || [];
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
@@ -85,24 +95,23 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
{/* Table */}
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Stack>
|
||||
{/* Header */}
|
||||
<Flex justify="space-between" align="center" mb="md">
|
||||
<Title order={4}>List Pengangguran Berdasarkan Usia Kerja</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_usia/create')
|
||||
}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
|
||||
{/* Table */}
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
@@ -110,26 +119,38 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
|
||||
<TableTh>Usia 18-25</TableTh>
|
||||
<TableTh>Usia 26-35</TableTh>
|
||||
<TableTh>Usia 36-45</TableTh>
|
||||
<TableTh>Usia 46 +</TableTh>
|
||||
<TableTh>Usia 46+</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Delete</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map(item => (
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.usia18_25}</TableTd>
|
||||
<TableTd>{item.usia26_35}</TableTd>
|
||||
<TableTd>{item.usia36_45}</TableTd>
|
||||
<TableTd>{item.usia46_keatas}</TableTd>
|
||||
<TableTd>
|
||||
<Button color="green" onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/${item.id}`)}>
|
||||
<Button
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/${item.id}`)
|
||||
}
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button color="red" disabled={stategrafik.delete.loading} onClick={() => { setSelectedId(item.id); setModalHapus(true); }}>
|
||||
<Button
|
||||
color="red"
|
||||
disabled={stategrafik.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
@@ -147,10 +168,10 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Pagination */}
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
@@ -166,48 +187,29 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
|
||||
/>
|
||||
</Center>
|
||||
|
||||
{/* Chart */}
|
||||
{/* Donut Chart */}
|
||||
<Paper bg={colors['white-1']} p="md" mt="lg" withBorder radius="md">
|
||||
<Stack>
|
||||
<Title order={3} pb={10}>Grafik Pengangguran Berdasarkan Usia Kerja</Title>
|
||||
{mounted && donutData.length > 0 ? (
|
||||
<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
|
||||
<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 mt="sm" gap="xs">
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={colors['blue-button']} w={20} h={20} />
|
||||
<Text>Usia 18-25 : {donutData.find((entry) => entry.name === 'usia18_25')?.value}</Text>
|
||||
</Flex>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={'#10A85AFF'} w={20} h={20} />
|
||||
<Text>Usia 26-35 : {donutData.find((entry) => entry.name === 'usia26_35')?.value}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={'#C07B13FF'} w={20} h={20} />
|
||||
<Text>Usia 36-45 : {donutData.find((entry) => entry.name === 'usia36_45')?.value}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex gap={"md"} align={"center"}>
|
||||
<Box bg={'#1094A8FF'} w={20} h={20} />
|
||||
<Text>Usia 46 + : {donutData.find((entry) => entry.name === 'usia46_keatas')?.value}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Title order={3} pb={10}>
|
||||
Grafik Pengangguran Berdasarkan Usia Kerja
|
||||
</Title>
|
||||
{donutData.length > 0 ? (
|
||||
<Center>
|
||||
<DonutChart
|
||||
data={donutData}
|
||||
withLabels
|
||||
withTooltip
|
||||
size={200}
|
||||
thickness={40}
|
||||
tooltipDataSource="segment"
|
||||
/>
|
||||
</Center>
|
||||
) : (
|
||||
<Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client';
|
||||
|
||||
import jumlahPengangguranState from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-pengangguran';
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
@@ -20,11 +21,18 @@ import { useEffect, useState, useCallback } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
// --- Helper konstanta
|
||||
const MONTHS = [
|
||||
'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
|
||||
'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des',
|
||||
];
|
||||
|
||||
function EditDetailDataPengangguran() {
|
||||
const stateDetail = useProxy(jumlahPengangguranState.jumlahPengangguran);
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
// --- state lokal form
|
||||
const [formData, setFormData] = useState({
|
||||
month: '',
|
||||
year: new Date().getFullYear(),
|
||||
@@ -34,18 +42,13 @@ function EditDetailDataPengangguran() {
|
||||
percentageChange: 0,
|
||||
});
|
||||
|
||||
// Hitung total & perubahan otomatis
|
||||
// --- hitung total + persentase perubahan
|
||||
const calculateTotalAndChange = useCallback(
|
||||
async (data: typeof formData) => {
|
||||
const total = data.educatedUnemployment + data.uneducatedUnemployment;
|
||||
|
||||
let percentageChange = 0;
|
||||
const monthOrder = [
|
||||
'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
|
||||
'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des',
|
||||
];
|
||||
const currentMonthIndex = monthOrder.indexOf(data.month);
|
||||
|
||||
const currentMonthIndex = MONTHS.indexOf(data.month);
|
||||
if (currentMonthIndex !== -1) {
|
||||
let prevMonthIndex = currentMonthIndex - 1;
|
||||
let prevYear = data.year;
|
||||
@@ -55,17 +58,15 @@ function EditDetailDataPengangguran() {
|
||||
prevYear--;
|
||||
}
|
||||
|
||||
const prevMonth = monthOrder[prevMonthIndex];
|
||||
const prevData = await stateDetail.findByMonthYear.load({
|
||||
month: prevMonth,
|
||||
month: MONTHS[prevMonthIndex],
|
||||
year: prevYear,
|
||||
});
|
||||
|
||||
if (prevData && prevData.totalUnemployment > 0) {
|
||||
const change =
|
||||
((total - prevData.totalUnemployment) /
|
||||
prevData.totalUnemployment) *
|
||||
100;
|
||||
prevData.totalUnemployment) * 100;
|
||||
percentageChange = parseFloat(change.toFixed(1));
|
||||
}
|
||||
}
|
||||
@@ -75,67 +76,66 @@ function EditDetailDataPengangguran() {
|
||||
[stateDetail.findByMonthYear]
|
||||
);
|
||||
|
||||
// --- update state lokal
|
||||
const updateFormData = async (updates: Partial<typeof formData>) => {
|
||||
const newData = { ...formData, ...updates };
|
||||
const { total, percentageChange } = await calculateTotalAndChange(newData);
|
||||
setFormData({
|
||||
...newData,
|
||||
totalUnemployment: total,
|
||||
percentageChange,
|
||||
});
|
||||
setFormData({ ...newData, totalUnemployment: total, percentageChange });
|
||||
};
|
||||
|
||||
// Load detail hanya sekali
|
||||
// --- load detail by ID (sekali)
|
||||
useEffect(() => {
|
||||
const loadDetail = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
await stateDetail.findUnique.load(id); // ambil by ID
|
||||
await stateDetail.findUnique.load(id);
|
||||
const data = stateDetail.findUnique.data;
|
||||
if (!data) return;
|
||||
|
||||
if (data) {
|
||||
const yearValue =
|
||||
data.year && typeof data.year === 'object' && 'getFullYear' in data.year
|
||||
? (data.year as Date).getFullYear()
|
||||
: Number(data.year);
|
||||
|
||||
stateDetail.update.id = id; // set ID untuk update
|
||||
stateDetail.update.id = id; // simpan id untuk update
|
||||
|
||||
setFormData({
|
||||
month: data.month,
|
||||
year: yearValue,
|
||||
totalUnemployment: data.totalUnemployment,
|
||||
educatedUnemployment: data.educatedUnemployment,
|
||||
uneducatedUnemployment: data.uneducatedUnemployment,
|
||||
totalUnemployment: data.totalUnemployment,
|
||||
percentageChange: data.percentageChange || 0,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading detail:', error);
|
||||
} catch (err) {
|
||||
console.error('Error loading detail:', err);
|
||||
toast.error('Gagal memuat data detail');
|
||||
}
|
||||
};
|
||||
|
||||
loadDetail();
|
||||
}, [params?.id, stateDetail.findUnique]);
|
||||
}, [params?.id]);
|
||||
|
||||
// --- submit form
|
||||
const handleSubmit = async () => {
|
||||
const { total, percentageChange } = await calculateTotalAndChange(formData);
|
||||
try {
|
||||
const { total, percentageChange } = await calculateTotalAndChange(formData);
|
||||
|
||||
stateDetail.update.form = {
|
||||
...formData,
|
||||
totalUnemployment: total,
|
||||
percentageChange,
|
||||
};
|
||||
|
||||
const success = await stateDetail.update.submit();
|
||||
if (success) {
|
||||
toast.success('Detail data pengangguran berhasil diperbarui!');
|
||||
router.push('/admin/ekonomi/jumlah-pengangguran');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating:', error);
|
||||
} catch (err) {
|
||||
console.error('Error updating:', err);
|
||||
toast.error('Terjadi kesalahan saat memperbarui data');
|
||||
}
|
||||
};
|
||||
@@ -143,12 +143,7 @@ function EditDetailDataPengangguran() {
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Group mb="md">
|
||||
<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>
|
||||
<Title order={4} ml="sm">
|
||||
@@ -167,10 +162,7 @@ function EditDetailDataPengangguran() {
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="Bulan"
|
||||
data={[
|
||||
'Jan','Feb','Mar','Apr','Mei','Jun',
|
||||
'Jul','Agu','Sep','Okt','Nov','Des',
|
||||
]}
|
||||
data={MONTHS}
|
||||
value={formData.month}
|
||||
onChange={(val) => updateFormData({ month: val || '' })}
|
||||
/>
|
||||
@@ -184,8 +176,10 @@ function EditDetailDataPengangguran() {
|
||||
label="Pengangguran Terdidik"
|
||||
type="number"
|
||||
value={formData.educatedUnemployment}
|
||||
onChange={(val) =>
|
||||
updateFormData({ educatedUnemployment: Number(val.currentTarget.value) || 0 })
|
||||
onChange={(e) =>
|
||||
updateFormData({
|
||||
educatedUnemployment: Number(e.currentTarget.value) || 0,
|
||||
})
|
||||
}
|
||||
required
|
||||
/>
|
||||
@@ -193,8 +187,10 @@ function EditDetailDataPengangguran() {
|
||||
label="Pengangguran Tidak Terdidik"
|
||||
type="number"
|
||||
value={formData.uneducatedUnemployment}
|
||||
onChange={(val) =>
|
||||
updateFormData({ uneducatedUnemployment: Number(val.currentTarget.value) || 0 })
|
||||
onChange={(e) =>
|
||||
updateFormData({
|
||||
uneducatedUnemployment: Number(e.currentTarget.value) || 0,
|
||||
})
|
||||
}
|
||||
required
|
||||
/>
|
||||
|
||||
@@ -33,6 +33,7 @@ function EditLowonganKerja() {
|
||||
gaji: '',
|
||||
deskripsi: '',
|
||||
kualifikasi: '',
|
||||
notelp: '',
|
||||
});
|
||||
|
||||
// load data sekali aja ketika mount / id berubah
|
||||
@@ -52,6 +53,7 @@ function EditLowonganKerja() {
|
||||
gaji: data.gaji || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
kualifikasi: data.kualifikasi || '',
|
||||
notelp: data.notelp || '',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -132,6 +134,14 @@ function EditLowonganKerja() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Nomor Yang Dapat Dihubungi"
|
||||
placeholder="Masukkan nomor yang dapat dihubungi"
|
||||
value={formData.notelp}
|
||||
onChange={(e) => handleChange("notelp", e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Tipe Pekerjaan"
|
||||
placeholder="Masukkan tipe pekerjaan"
|
||||
|
||||
@@ -82,6 +82,11 @@ function DetailLowonganKerjaLokal() {
|
||||
<Text fz="md" c="dimmed">{data.lokasi || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Nomor Yang Dapat Dihubungi</Text>
|
||||
<Text fz="md" c="dimmed">{data.notelp || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Tipe Pekerjaan</Text>
|
||||
<Text fz="md" c="dimmed">{data.tipePekerjaan || '-'}</Text>
|
||||
|
||||
@@ -30,6 +30,7 @@ function CreateLowonganKerja() {
|
||||
gaji: '',
|
||||
deskripsi: '',
|
||||
kualifikasi: '',
|
||||
notelp: '',
|
||||
};
|
||||
};
|
||||
|
||||
@@ -86,6 +87,15 @@ function CreateLowonganKerja() {
|
||||
placeholder="Masukkan nama perusahaan"
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
defaultValue={lowonganState.create.form.notelp}
|
||||
onChange={(val) =>
|
||||
(lowonganState.create.form.notelp = val.target.value)
|
||||
}
|
||||
label="Nomor Yang Dapat Dihubungi"
|
||||
placeholder="Masukkan nomor yang dapat dihubungi"
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
defaultValue={lowonganState.create.form.lokasi}
|
||||
onChange={(val) =>
|
||||
|
||||
@@ -31,6 +31,7 @@ type FormData = {
|
||||
imageId: string;
|
||||
rating: number;
|
||||
kategoriId: string[];
|
||||
kontak: string;
|
||||
};
|
||||
|
||||
function EditPasarDesa() {
|
||||
@@ -47,11 +48,12 @@ function EditPasarDesa() {
|
||||
imageId: '',
|
||||
rating: 0,
|
||||
kategoriId: [],
|
||||
kontak: '',
|
||||
});
|
||||
|
||||
// load data awal
|
||||
useEffect(() => {
|
||||
pasarState.kategoriProduk.findMany.load();
|
||||
pasarState.kategoriProduk.findManyAll.load();
|
||||
|
||||
const loadPasarDesa = async () => {
|
||||
const id = params?.id as string;
|
||||
@@ -67,6 +69,7 @@ function EditPasarDesa() {
|
||||
imageId: data.imageId || '',
|
||||
rating: data.rating || 0,
|
||||
kategoriId: data.KategoriToPasar?.map((k: any) => k.kategoriId) || [],
|
||||
kontak: data.kontak || '',
|
||||
});
|
||||
if (data.image?.link) setPreviewImage(data.image.link);
|
||||
}
|
||||
@@ -228,13 +231,21 @@ function EditPasarDesa() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Kontak"
|
||||
placeholder="Masukkan kontak"
|
||||
value={formData.kontak}
|
||||
onChange={(e) => handleChange('kontak', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<MultiSelect
|
||||
label="Kategori Produk"
|
||||
placeholder="Pilih kategori produk"
|
||||
value={formData.kategoriId}
|
||||
onChange={(val) => handleChange('kategoriId', val)}
|
||||
data={
|
||||
pasarState.kategoriProduk.findMany.data?.map((v) => ({
|
||||
pasarState.kategoriProduk.findManyAll.data?.map((v) => ({
|
||||
value: v.id,
|
||||
label: v.nama,
|
||||
})) || []
|
||||
|
||||
@@ -85,6 +85,11 @@ function DetailPasarDesa() {
|
||||
<Text fz="md" c="dimmed">{data.alamatUsaha || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Kontak</Text>
|
||||
<Text fz="md" c="dimmed">{data.kontak || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Gambar</Text>
|
||||
{data.image?.link ? (
|
||||
|
||||
@@ -30,7 +30,7 @@ export default function CreatePasarDesa() {
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
statePasar.kategoriProduk.findMany.load();
|
||||
statePasar.kategoriProduk.findManyAll.load();
|
||||
}, []);
|
||||
|
||||
const resetForm = () => {
|
||||
@@ -41,6 +41,7 @@ export default function CreatePasarDesa() {
|
||||
imageId: '',
|
||||
rating: 0,
|
||||
kategoriId: [],
|
||||
kontak: '',
|
||||
};
|
||||
setPreviewImage(null);
|
||||
setFile(null);
|
||||
@@ -184,6 +185,15 @@ export default function CreatePasarDesa() {
|
||||
onChange={(e) => (statePasar.pasarDesa.create.form.alamatUsaha = e.target.value)}
|
||||
/>
|
||||
|
||||
{/* Kontak */}
|
||||
<TextInput
|
||||
label="Kontak"
|
||||
type="number"
|
||||
placeholder="Masukkan kontak"
|
||||
defaultValue={statePasar.pasarDesa.create.form.kontak}
|
||||
onChange={(e) => (statePasar.pasarDesa.create.form.kontak = e.target.value)}
|
||||
/>
|
||||
|
||||
{/* Kategori Produk */}
|
||||
<MultiSelect
|
||||
label="Kategori Produk"
|
||||
@@ -191,7 +201,7 @@ export default function CreatePasarDesa() {
|
||||
value={statePasar.pasarDesa.create.form.kategoriId}
|
||||
onChange={(val) => (statePasar.pasarDesa.create.form.kategoriId = val)}
|
||||
data={
|
||||
statePasar.kategoriProduk.findMany.data?.map((v) => ({
|
||||
statePasar.kategoriProduk.findManyAll.data?.map((v) => ({
|
||||
value: v.id,
|
||||
label: v.nama,
|
||||
})) || []
|
||||
|
||||
@@ -18,27 +18,23 @@ 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 { useProxy } from 'valtio/utils';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
type Statistik = {
|
||||
tahun: string;
|
||||
jumlah: string;
|
||||
};
|
||||
|
||||
type FormData = {
|
||||
nama: string;
|
||||
deskripsi: string;
|
||||
icon: string;
|
||||
statistik: {
|
||||
tahun: string;
|
||||
jumlah: string;
|
||||
};
|
||||
statistik: Statistik;
|
||||
};
|
||||
|
||||
function EditProgramKemiskinan() {
|
||||
const router = useRouter();
|
||||
const params = useParams() as { id: string };
|
||||
const stateProgram = useProxy(programKemiskinanState);
|
||||
const id = params.id;
|
||||
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
const initialForm: FormData = {
|
||||
nama: '',
|
||||
deskripsi: '',
|
||||
icon: '',
|
||||
@@ -46,56 +42,70 @@ function EditProgramKemiskinan() {
|
||||
tahun: '',
|
||||
jumlah: '',
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// load data ke local state sekali aja
|
||||
function EditProgramKemiskinan() {
|
||||
const router = useRouter();
|
||||
const { id } = useParams() as { id: string };
|
||||
const stateProgram = useProxy(programKemiskinanState);
|
||||
|
||||
const [formData, setFormData] = useState<FormData>(initialForm);
|
||||
|
||||
// Load data 1x dari global state → isi local state
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
stateProgram.findUnique
|
||||
.load(id)
|
||||
.then(() => {
|
||||
if (!id) return;
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
await stateProgram.findUnique.load(id);
|
||||
const data = stateProgram.findUnique.data;
|
||||
if (data) {
|
||||
setFormData({
|
||||
nama: data.nama || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
icon: data.icon || '',
|
||||
nama: data.nama ?? '',
|
||||
deskripsi: data.deskripsi ?? '',
|
||||
icon: data.icon ?? '',
|
||||
statistik: {
|
||||
tahun: data.statistik?.tahun?.toString() || '',
|
||||
jumlah: data.statistik?.jumlah?.toString() || '',
|
||||
tahun: data.statistik?.tahun?.toString() ?? '',
|
||||
jumlah: data.statistik?.jumlah?.toString() ?? '',
|
||||
},
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
} catch (err) {
|
||||
console.error('Error load data:', err);
|
||||
toast.error('Gagal mengambil data program');
|
||||
});
|
||||
}
|
||||
}, [id, stateProgram.findUnique]);
|
||||
|
||||
const handleChange = (field: keyof FormData, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleStatistikChange = (field: keyof FormData['statistik'], value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
statistik: {
|
||||
...prev.statistik,
|
||||
[field]: value,
|
||||
loadData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [id]); // ✅ hanya trigger saat id berubah
|
||||
|
||||
|
||||
// generic handler untuk field top-level
|
||||
const handleChange = useCallback(
|
||||
(field: keyof FormData, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// khusus nested statistik
|
||||
const handleStatistikChange = useCallback(
|
||||
(field: keyof Statistik, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
statistik: { ...prev.statistik, [field]: value },
|
||||
}));
|
||||
};
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
stateProgram.update.id = id;
|
||||
stateProgram.update.form = formData;
|
||||
await stateProgram.update.update();
|
||||
|
||||
toast.success('Program berhasil diperbarui!');
|
||||
router.push('/admin/ekonomi/program-kemiskinan');
|
||||
} catch (error) {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
ScrollArea,
|
||||
Stack,
|
||||
Tabs,
|
||||
TabsList,
|
||||
@@ -9,28 +10,20 @@ import {
|
||||
TabsTab,
|
||||
Title,
|
||||
Tooltip,
|
||||
ScrollArea,
|
||||
} from '@mantine/core';
|
||||
import {
|
||||
IconBuildingCommunity,
|
||||
IconHierarchy,
|
||||
IconUsers
|
||||
} from '@tabler/icons-react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
IconHierarchy,
|
||||
IconUsers,
|
||||
IconGitBranch,
|
||||
} from '@tabler/icons-react';
|
||||
|
||||
function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
label: "Posisi Organisasi",
|
||||
value: "posisiorganisasi",
|
||||
href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi",
|
||||
icon: <IconHierarchy size={18} stroke={1.8} />,
|
||||
tooltip: "Kelola daftar posisi organisasi",
|
||||
},
|
||||
{
|
||||
label: "Pegawai",
|
||||
value: "pegawai",
|
||||
@@ -39,12 +32,19 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
tooltip: "Kelola data pegawai BUMDesa",
|
||||
},
|
||||
{
|
||||
label: "Hubungan Organisasi",
|
||||
value: "hubunganorganisasi",
|
||||
href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi",
|
||||
icon: <IconGitBranch size={18} stroke={1.8} />,
|
||||
tooltip: "Atur hubungan antar posisi organisasi",
|
||||
label: "Posisi Organisasi",
|
||||
value: "posisiorganisasi",
|
||||
href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi",
|
||||
icon: <IconHierarchy size={18} stroke={1.8} />,
|
||||
tooltip: "Kelola daftar posisi organisasi",
|
||||
},
|
||||
{
|
||||
label: "Struktur Organisasi",
|
||||
value: "strukturorganisasi",
|
||||
href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/struktur-organisasi",
|
||||
icon: <IconBuildingCommunity size={18} stroke={1.8} />,
|
||||
tooltip: "Kelola struktur organisasi BUMDesa"
|
||||
}
|
||||
];
|
||||
|
||||
const currentTab = tabs.find((tab) => tab.href === pathname);
|
||||
|
||||
@@ -1,116 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { Box, Button, Paper, Select, Stack, TextInput, Title } from '@mantine/core';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
|
||||
export default function EditHubunganOrganisasi() {
|
||||
const router = useRouter();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const state = useProxy(strukturorganisasiState.hubunganOrganisasi);
|
||||
const pegawaiList = strukturorganisasiState.pegawai.findMany.data;
|
||||
|
||||
const [form, setForm] = useState({
|
||||
atasanId: '',
|
||||
bawahanId: '',
|
||||
tipe: '',
|
||||
});
|
||||
|
||||
// load data awal sekali aja
|
||||
useEffect(() => {
|
||||
strukturorganisasiState.pegawai.findMany.load();
|
||||
|
||||
if (id) {
|
||||
(async () => {
|
||||
const data = await state.edit.load(id);
|
||||
if (data) {
|
||||
setForm({
|
||||
atasanId: data.atasanId ?? '',
|
||||
bawahanId: data.bawahanId ?? '',
|
||||
tipe: data.tipe ?? '',
|
||||
});
|
||||
}
|
||||
})();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [id]);
|
||||
|
||||
const handleChange = (field: keyof typeof form, value: string) => {
|
||||
setForm(prev => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.atasanId || !form.bawahanId) {
|
||||
toast.warn('Atasan dan bawahan harus diisi');
|
||||
return;
|
||||
}
|
||||
|
||||
// update global state cuma pas submit
|
||||
state.edit.id = id;
|
||||
state.edit.form = form;
|
||||
|
||||
const result = await state.edit.update();
|
||||
|
||||
if (result) {
|
||||
toast.success('Data berhasil diperbarui');
|
||||
router.push(
|
||||
'/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper p="md" w={{ base: '100%', md: '50%' }}>
|
||||
<Stack>
|
||||
<Title order={3}>Edit Hubungan Organisasi</Title>
|
||||
|
||||
<Select
|
||||
label="Atasan"
|
||||
placeholder="Pilih atasan"
|
||||
searchable
|
||||
data={
|
||||
pegawaiList?.map(p => ({
|
||||
value: p.id,
|
||||
label: p.namaLengkap,
|
||||
})) || []
|
||||
}
|
||||
value={form.atasanId}
|
||||
onChange={val => handleChange('atasanId', val || '')}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Bawahan"
|
||||
placeholder="Pilih bawahan"
|
||||
searchable
|
||||
data={
|
||||
pegawaiList?.map(p => ({
|
||||
value: p.id,
|
||||
label: p.namaLengkap,
|
||||
})) || []
|
||||
}
|
||||
value={form.bawahanId}
|
||||
onChange={val => handleChange('bawahanId', val || '')}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Tipe"
|
||||
placeholder="Contoh: langsung_melapor"
|
||||
value={form.tipe}
|
||||
onChange={e => handleChange('tipe', e.currentTarget.value)}
|
||||
/>
|
||||
|
||||
<Button onClick={handleSubmit} color="blue">
|
||||
Simpan
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Box, Button, Paper, Select, Stack, TextInput, Title } from '@mantine/core';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
|
||||
export default function CreateHubunganOrganisasi() {
|
||||
const router = useRouter();
|
||||
const state = useProxy(strukturorganisasiState.hubunganOrganisasi);
|
||||
const pegawaiList = strukturorganisasiState.pegawai.findMany.data;
|
||||
|
||||
const [form, setForm] = useState({
|
||||
atasanId: '',
|
||||
bawahanId: '',
|
||||
tipe: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
strukturorganisasiState.pegawai.findMany.load();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.atasanId || !form.bawahanId) {
|
||||
toast.warn("Atasan dan bawahan harus diisi");
|
||||
return;
|
||||
}
|
||||
|
||||
state.create.form = form;
|
||||
const result = await state.create.create();
|
||||
|
||||
if (result) {
|
||||
toast.success("Hubungan Organisasi berhasil ditambahkan");
|
||||
router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Paper p="md" w={{ base: '100%', md: '50%' }}>
|
||||
<Stack>
|
||||
<Title order={3}>Create Hubungan Organisasi</Title>
|
||||
<Select
|
||||
label="Atasan"
|
||||
placeholder="Pilih atasan"
|
||||
searchable
|
||||
data={pegawaiList?.map(p => ({
|
||||
value: p.id,
|
||||
label: p.namaLengkap,
|
||||
})) || []}
|
||||
value={form.atasanId}
|
||||
onChange={(val) => setForm({ ...form, atasanId: val || '' })}
|
||||
/>
|
||||
<Select
|
||||
label="Bawahan"
|
||||
placeholder="Pilih bawahan"
|
||||
searchable
|
||||
data={pegawaiList?.map(p => ({
|
||||
value: p.id,
|
||||
label: p.namaLengkap,
|
||||
})) || []}
|
||||
value={form.bawahanId}
|
||||
onChange={(val) => setForm({ ...form, bawahanId: val || '' })}
|
||||
/>
|
||||
<TextInput
|
||||
label="Tipe"
|
||||
placeholder="Contoh: langsung_melapor"
|
||||
defaultValue={form.tipe}
|
||||
onChange={(e) => setForm({ ...form, tipe: e.currentTarget.value })}
|
||||
/>
|
||||
<Button onClick={handleSubmit} color="blue">Simpan</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../../_com/header';
|
||||
import JudulList from '../../../_com/judulList';
|
||||
import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
import { useState } from 'react';
|
||||
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
|
||||
|
||||
function HubunganOrganisasi() {
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Hubungan Organisasi'
|
||||
placeholder='pencarian'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListHubunganOrganisasi search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function ListHubunganOrganisasi({ search }: { search: string }) {
|
||||
const stateOrganisasi = useProxy(strukturorganisasiState.hubunganOrganisasi);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
useShallowEffect(() => {
|
||||
stateOrganisasi.findMany.load();
|
||||
}, []);
|
||||
|
||||
const handleHapus = () => {
|
||||
if (selectedId) {
|
||||
stateOrganisasi.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const filteredData = (stateOrganisasi.findMany.data || []).filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.atasan?.namaLengkap?.toLowerCase().includes(keyword) ||
|
||||
item.bawahan?.namaLengkap?.toLowerCase().includes(keyword) ||
|
||||
item.tipe?.toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
|
||||
if (!stateOrganisasi.findMany.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<JudulList
|
||||
title='List Hubungan Organisasi'
|
||||
href='/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/create'
|
||||
/>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Atasan</TableTh>
|
||||
<TableTh>Bawahan</TableTh>
|
||||
<TableTh>Tipe</TableTh>
|
||||
<TableTh>Edit</TableTh>
|
||||
<TableTh>Hapus</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData
|
||||
.sort((a, b) =>
|
||||
a.atasan?.namaLengkap.localeCompare(b.atasan?.namaLengkap)
|
||||
)
|
||||
.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.atasan?.namaLengkap}</TableTd>
|
||||
<TableTd>{item.bawahan?.namaLengkap}</TableTd>
|
||||
<TableTd>{item.tipe}</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
bg="green"
|
||||
onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/${item.id}`)}
|
||||
>
|
||||
<IconEdit size={25} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
))}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Paper>
|
||||
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text='Apakah anda yakin ingin menghapus hubungan organisasi ini?'
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default HubunganOrganisasi;
|
||||
@@ -1,8 +1,9 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
|
||||
import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
import colors from '@/con/colors';
|
||||
import ApiFetch from '@/lib/api-fetch';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@@ -13,7 +14,8 @@ import {
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title
|
||||
Title,
|
||||
Tooltip
|
||||
} from '@mantine/core';
|
||||
import { Dropzone } from '@mantine/dropzone';
|
||||
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
|
||||
@@ -22,30 +24,12 @@ import { useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
interface PreviewImage {
|
||||
file?: File;
|
||||
preview: string;
|
||||
}
|
||||
|
||||
interface PegawaiFormData {
|
||||
namaLengkap: string;
|
||||
gelarAkademik: string;
|
||||
imageId: string | null;
|
||||
tanggalMasuk: string;
|
||||
email: string;
|
||||
telepon: string;
|
||||
alamat: string;
|
||||
posisiId: string;
|
||||
isActive: boolean;
|
||||
}
|
||||
|
||||
export default function EditPegawai() {
|
||||
export default function EditPegawaiBumDes() {
|
||||
const router = useRouter();
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const stateOrganisasi = useProxy(strukturorganisasiState.pegawai);
|
||||
const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai);
|
||||
|
||||
const [previewImage, setPreviewImage] = useState<PreviewImage | string | null>(null);
|
||||
const [formData, setFormData] = useState<PegawaiFormData>({
|
||||
const [formData, setFormData] = useState({
|
||||
namaLengkap: '',
|
||||
gelarAkademik: '',
|
||||
imageId: '',
|
||||
@@ -56,16 +40,10 @@ export default function EditPegawai() {
|
||||
posisiId: '',
|
||||
isActive: true,
|
||||
});
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
|
||||
// helper buat update state formData
|
||||
const updateForm = (field: keyof PegawaiFormData, value: any) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[field]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
// Format date to YYYY-MM-DD for date input
|
||||
// Format date for <input type="date">
|
||||
const formatDateForInput = (dateString: string) => {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
@@ -73,10 +51,10 @@ export default function EditPegawai() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
strukturorganisasiState.posisiOrganisasi.findMany.load();
|
||||
|
||||
const loadPegawai = async () => {
|
||||
try {
|
||||
await stateStrukturBumDes.posisiOrganisasi.findManyAll.load();
|
||||
|
||||
const data = await stateOrganisasi.edit.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
@@ -95,9 +73,7 @@ export default function EditPegawai() {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading pegawai:', error);
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : 'Gagal mengambil data pegawai'
|
||||
);
|
||||
toast.error(error instanceof Error ? error.message : 'Gagal mengambil data pegawai');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -107,204 +83,182 @@ export default function EditPegawai() {
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
if (!formData.namaLengkap.trim()) {
|
||||
toast.error('Nama lengkap tidak boleh kosong');
|
||||
return;
|
||||
return toast.error('Nama lengkap tidak boleh kosong');
|
||||
}
|
||||
|
||||
stateOrganisasi.edit.form = {
|
||||
...formData,
|
||||
namaLengkap: formData.namaLengkap.trim(),
|
||||
gelarAkademik: formData.gelarAkademik.trim(),
|
||||
imageId: formData.imageId ? formData.imageId.trim() : '',
|
||||
tanggalMasuk: formData.tanggalMasuk.trim(),
|
||||
email: formData.email.trim(),
|
||||
telepon: formData.telepon.trim(),
|
||||
alamat: formData.alamat.trim(),
|
||||
posisiId: formData.posisiId.trim(),
|
||||
};
|
||||
// Update global state only on submit
|
||||
const updatedForm = { ...formData };
|
||||
|
||||
if (id && !stateOrganisasi.edit.id) {
|
||||
stateOrganisasi.edit.id = id;
|
||||
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');
|
||||
updatedForm.imageId = uploaded.id;
|
||||
}
|
||||
|
||||
stateOrganisasi.edit.form = updatedForm;
|
||||
if (id && !stateOrganisasi.edit.id) stateOrganisasi.edit.id = id;
|
||||
|
||||
const success = await stateOrganisasi.edit.submit();
|
||||
|
||||
if (success) {
|
||||
router.push(
|
||||
'/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai'
|
||||
);
|
||||
}
|
||||
if (success) router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai');
|
||||
} catch (error) {
|
||||
console.error('Error updating pegawai:', error);
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : 'Gagal memperbarui data pegawai'
|
||||
);
|
||||
toast.error(error instanceof Error ? error.message : 'Gagal memperbarui data pegawai');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button onClick={() => router.back()} variant="subtle" color={'blue'}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack gap={'xs'}>
|
||||
<Title order={4}>Edit Data Pegawai</Title>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">Edit Data Pegawai PPID</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">
|
||||
{/* Nama Lengkap */}
|
||||
<TextInput
|
||||
label="Nama Lengkap"
|
||||
placeholder="Masukkan nama lengkap"
|
||||
value={formData.namaLengkap}
|
||||
onChange={(e) => updateForm('namaLengkap', e.target.value)}
|
||||
onChange={(e) => setFormData({ ...formData, namaLengkap: e.target.value })}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Gelar Akademik */}
|
||||
<TextInput
|
||||
label="Gelar Akademik"
|
||||
placeholder="Contoh: S.Kom"
|
||||
value={formData.gelarAkademik}
|
||||
onChange={(e) => updateForm('gelarAkademik', e.target.value)}
|
||||
onChange={(e) => setFormData({ ...formData, gelarAkademik: e.target.value })}
|
||||
/>
|
||||
|
||||
{/* Foto Profil */}
|
||||
<Box>
|
||||
<Text fz={'md'} fw={'bold'}>
|
||||
Gambar
|
||||
</Text>
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>Foto Profil</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
const file = files[0];
|
||||
if (file) {
|
||||
setPreviewImage({
|
||||
file,
|
||||
preview: URL.createObjectURL(file),
|
||||
});
|
||||
const selectedFile = files[0];
|
||||
if (selectedFile) {
|
||||
setFile(selectedFile);
|
||||
setPreviewImage(URL.createObjectURL(selectedFile));
|
||||
}
|
||||
}}
|
||||
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
|
||||
maxSize={5 * 1024 ** 2}
|
||||
accept={{
|
||||
'image/*': ['.jpeg', '.jpg', '.png', '.webp'],
|
||||
}}
|
||||
accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
|
||||
radius="md"
|
||||
p="xl"
|
||||
>
|
||||
<Group
|
||||
justify="center"
|
||||
gap="xl"
|
||||
mih={220}
|
||||
style={{ pointerEvents: 'none' }}
|
||||
>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload
|
||||
size={52}
|
||||
color="var(--mantine-color-blue-6)"
|
||||
stroke={1.5}
|
||||
/>
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX
|
||||
size={52}
|
||||
color="var(--mantine-color-red-6)"
|
||||
stroke={1.5}
|
||||
/>
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconPhoto
|
||||
size={52}
|
||||
color="var(--mantine-color-dimmed)"
|
||||
stroke={1.5}
|
||||
/>
|
||||
</Dropzone.Idle>
|
||||
|
||||
<div>
|
||||
<Text size="xl" inline>
|
||||
Drag images here or click to select files
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" inline mt={7}>
|
||||
Attach as many files as you like, each file should not
|
||||
exceed 5mb
|
||||
</Text>
|
||||
</div>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept><IconUpload size={48} color={colors['blue-button']} stroke={1.5} /></Dropzone.Accept>
|
||||
<Dropzone.Reject><IconX size={48} color="red" stroke={1.5} /></Dropzone.Reject>
|
||||
<Dropzone.Idle><IconPhoto size={48} color="#868e96" stroke={1.5} /></Dropzone.Idle>
|
||||
<Stack gap="xs" align="center">
|
||||
<Text size="md" fw={500}>Seret gambar atau klik untuk memilih file</Text>
|
||||
<Text size="sm" c="dimmed">Maksimal 5MB, format gambar wajib</Text>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Dropzone>
|
||||
|
||||
{previewImage && (
|
||||
<Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Image
|
||||
src={
|
||||
typeof previewImage === 'string'
|
||||
? previewImage
|
||||
: previewImage?.preview
|
||||
}
|
||||
alt="Preview"
|
||||
width={280}
|
||||
height={180}
|
||||
fit="cover"
|
||||
radius="sm"
|
||||
mt="md"
|
||||
src={previewImage}
|
||||
alt="Preview Gambar"
|
||||
radius="md"
|
||||
style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Tanggal Masuk */}
|
||||
<TextInput
|
||||
label="Tanggal Masuk"
|
||||
type="date"
|
||||
placeholder="Contoh: 2022-01-01"
|
||||
value={formatDateForInput(formData.tanggalMasuk)}
|
||||
onChange={(e) => updateForm('tanggalMasuk', e.target.value)}
|
||||
onChange={(e) => setFormData({ ...formData, tanggalMasuk: e.target.value })}
|
||||
/>
|
||||
|
||||
{/* Email */}
|
||||
<TextInput
|
||||
label="Email"
|
||||
placeholder="Contoh: email@example.com"
|
||||
type="email"
|
||||
placeholder="contoh@email.com"
|
||||
value={formData.email}
|
||||
onChange={(e) => updateForm('email', e.currentTarget.value)}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
/>
|
||||
|
||||
{/* Telepon */}
|
||||
<TextInput
|
||||
label="Telepon"
|
||||
placeholder="Contoh: 08123456789"
|
||||
placeholder="08123456789"
|
||||
value={formData.telepon}
|
||||
onChange={(e) => updateForm('telepon', e.currentTarget.value)}
|
||||
onChange={(e) => setFormData({ ...formData, telepon: e.target.value })}
|
||||
/>
|
||||
|
||||
{/* Alamat */}
|
||||
<TextInput
|
||||
label="Alamat"
|
||||
placeholder="Contoh: Jl. Contoh No. 1"
|
||||
placeholder="Jl. Contoh No. 123"
|
||||
value={formData.alamat}
|
||||
onChange={(e) => updateForm('alamat', e.currentTarget.value)}
|
||||
onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
|
||||
/>
|
||||
|
||||
{/* Posisi */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>Posisi</Text>
|
||||
<Select
|
||||
label="Posisi"
|
||||
placeholder="Pilih posisi"
|
||||
data={
|
||||
strukturorganisasiState.posisiOrganisasi.findMany.data?.map(
|
||||
(p) => ({
|
||||
value: p.id,
|
||||
label: p.nama,
|
||||
})
|
||||
) || []
|
||||
}
|
||||
data={stateStrukturBumDes.posisiOrganisasi.findManyAll.data?.map(p => ({ value: p.id, label: p.nama })) || []}
|
||||
value={formData.posisiId}
|
||||
onChange={(value) => {
|
||||
if (value !== null) updateForm('posisiId', value);
|
||||
}}
|
||||
onChange={(value) => value && setFormData({ ...formData, posisiId: value })}
|
||||
searchable
|
||||
clearable
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Status Pegawai */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>Status Pegawai</Text>
|
||||
<Select
|
||||
label="Status Pegawai"
|
||||
data={[
|
||||
{ value: 'true', label: 'Aktif' },
|
||||
{ value: 'false', label: 'Tidak Aktif' },
|
||||
]}
|
||||
value={String(formData.isActive)}
|
||||
onChange={(val) => updateForm('isActive', val === 'true')}
|
||||
onChange={(val) => setFormData({ ...formData, isActive: val === 'true' })}
|
||||
clearable
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Group>
|
||||
<Button onClick={handleSubmit} color="blue">
|
||||
{/* Submit Button */}
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
loading={stateOrganisasi.edit.loading}
|
||||
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>
|
||||
|
||||
@@ -1,42 +1,56 @@
|
||||
'use client'
|
||||
import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
|
||||
import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
|
||||
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function DetailPegawai() {
|
||||
const statePegawai = useProxy(strukturorganisasiState.pegawai)
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const params = useParams()
|
||||
const statePegawai = useProxy(stateStrukturBumDes.pegawai);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [modalNonActive, setModalNonActive] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
|
||||
useShallowEffect(() => {
|
||||
statePegawai.findUnique.load(params?.id as string)
|
||||
}, [])
|
||||
stateStrukturBumDes.posisiOrganisasi.findMany.load();
|
||||
statePegawai.findUnique.load(params?.id as string);
|
||||
}, []);
|
||||
|
||||
const handleHapus = () => {
|
||||
if (selectedId) {
|
||||
statePegawai.delete.byId(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai")
|
||||
statePegawai.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
|
||||
}
|
||||
};
|
||||
|
||||
const handleNonActive = () => {
|
||||
if (selectedId) {
|
||||
statePegawai.nonActive.byId(selectedId);
|
||||
setModalNonActive(false);
|
||||
setSelectedId(null);
|
||||
router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
|
||||
}
|
||||
};
|
||||
|
||||
if (!statePegawai.findUnique.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = statePegawai.findUnique.data;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
@@ -44,91 +58,125 @@ function DetailPegawai() {
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
|
||||
<Stack>
|
||||
<Text fz={"xl"} fw={"bold"}>Detail Pegawai</Text>
|
||||
<Paper bg={colors['BG-trans']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Nama Lengkap</Text>
|
||||
<Text fz={"lg"}>{statePegawai.findUnique.data?.namaLengkap}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Gelar Akademik</Text>
|
||||
<Text fz={"lg"}>{statePegawai.findUnique.data?.gelarAkademik}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Image</Text>
|
||||
{statePegawai.findUnique.data?.image?.link ? (
|
||||
<Image src={statePegawai.findUnique.data?.image?.link} alt='' loading="lazy" />
|
||||
) : (
|
||||
<Text fz={"md"} c="dimmed">Tidak ada gambar</Text>
|
||||
)}
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Tanggal Masuk</Text>
|
||||
<Text fz={"lg"}>
|
||||
{statePegawai.findUnique.data?.tanggalMasuk
|
||||
? new Date(statePegawai.findUnique.data.tanggalMasuk).toLocaleDateString()
|
||||
: "-"}
|
||||
<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 Pegawai PPID
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Email</Text>
|
||||
<Text fz={"lg"} style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{statePegawai.findUnique.data?.email}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Telepon</Text>
|
||||
<Text fz={"lg"}>{statePegawai.findUnique.data?.telepon}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Alamat</Text>
|
||||
<Text fz={"lg"} style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{statePegawai.findUnique.data?.alamat}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Posisi</Text>
|
||||
<Stack gap={4}>
|
||||
{statePegawai.findUnique.data?.posisi ? (
|
||||
<Text fz={"lg"}>
|
||||
{statePegawai.findUnique.data.posisi.nama}
|
||||
<Text fz="lg" fw="bold">Nama Lengkap</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
|
||||
{data.namaLengkap || '-'} {data.gelarAkademik || ''}
|
||||
</Text>
|
||||
) : (
|
||||
<Text fz={"lg"} c="dimmed">
|
||||
Tidak ada posisi
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={"lg"} fw={"bold"}>Aktif</Text>
|
||||
<Text fz={"lg"}>{statePegawai.findUnique.data?.isActive ? "Ya" : "Tidak"}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Flex gap={"xs"}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (statePegawai.findUnique.data) {
|
||||
setSelectedId(statePegawai.findUnique.data.id);
|
||||
setModalHapus(true);
|
||||
}
|
||||
<Text fz="lg" fw="bold">Posisi</Text>
|
||||
<Text fz="md" c="dimmed">{data.posisi?.nama || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Email</Text>
|
||||
<Text fz="md" c="dimmed">{data.email || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Telepon</Text>
|
||||
<Text fz="md" c="dimmed">{data.telepon || '-'}</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">Tanggal Masuk</Text>
|
||||
<Text fz="md" c="dimmed">
|
||||
{data.tanggalMasuk ? new Date(data.tanggalMasuk).toLocaleDateString() : '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Status</Text>
|
||||
<Text fz="md" c={data.isActive ? 'green' : 'red'}>
|
||||
{data.isActive ? 'Aktif' : 'Tidak Aktif'}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Foto Profil</Text>
|
||||
{data.image?.link ? (
|
||||
<Image
|
||||
src={data.image.link}
|
||||
alt={data.namaLengkap || 'Foto Profil'}
|
||||
w={200}
|
||||
h={200}
|
||||
radius="md"
|
||||
fit="cover"
|
||||
mt="sm"
|
||||
style={{
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
disabled={!statePegawai.findUnique.data}
|
||||
color="red">
|
||||
<IconX size={20} />
|
||||
loading='lazy'
|
||||
/>
|
||||
) : (
|
||||
<Text fz="sm" c="dimmed" mt="sm">Tidak ada foto profil</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
color={data.isActive ? "green" : "gray"}
|
||||
onClick={() => {
|
||||
setSelectedId(data.id || null);
|
||||
setModalNonActive(true);
|
||||
}}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
{data.isActive ? "Aktif" : "Nonaktif"}
|
||||
</Button>
|
||||
|
||||
<Group gap="sm" mt="md">
|
||||
<Tooltip label="Hapus Pegawai" withArrow position="top">
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
if (statePegawai.findUnique.data) {
|
||||
router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${statePegawai.findUnique.data.id}/edit`);
|
||||
}
|
||||
setSelectedId(data.id || null);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
disabled={!statePegawai.findUnique.data}
|
||||
color="green">
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="Edit Pegawai" withArrow position="top">
|
||||
<Button
|
||||
color="green"
|
||||
onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${data.id}/edit`)}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
@@ -139,7 +187,15 @@ function DetailPegawai() {
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text="Apakah anda yakin ingin menghapus produk ini?"
|
||||
text="Apakah Anda yakin ingin menghapus data pegawai ini?"
|
||||
/>
|
||||
|
||||
{/* Modal NonActive */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalNonActive}
|
||||
onClose={() => setModalNonActive(false)}
|
||||
onConfirm={handleNonActive}
|
||||
text="Apakah Anda yakin ingin menonaktifkan pegawai ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
|
||||
import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
import colors from '@/con/colors';
|
||||
import ApiFetch from '@/lib/api-fetch';
|
||||
import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
|
||||
import { Dropzone } from '@mantine/dropzone';
|
||||
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@@ -11,17 +12,17 @@ import { useEffect, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function CreatePegawai() {
|
||||
function CreatePegawaiBumDes() {
|
||||
const router = useRouter();
|
||||
const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
|
||||
const stateOrganisasi = useProxy(strukturorganisasiState)
|
||||
const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai)
|
||||
useEffect(() => {
|
||||
stateOrganisasi.posisiOrganisasi.findMany.load();
|
||||
stateStrukturBumDes.posisiOrganisasi.findManyAll.load();
|
||||
resetForm();
|
||||
}, []);
|
||||
|
||||
const resetForm = () => {
|
||||
stateOrganisasi.pegawai.create.form = {
|
||||
stateOrganisasi.create.form = {
|
||||
namaLengkap: "",
|
||||
gelarAkademik: "",
|
||||
imageId: "",
|
||||
@@ -52,13 +53,13 @@ function CreatePegawai() {
|
||||
}
|
||||
|
||||
// Set status aktif secara otomatis
|
||||
stateOrganisasi.pegawai.create.form.isActive = true;
|
||||
stateOrganisasi.create.form.isActive = true;
|
||||
|
||||
// Simpan ID gambar ke form
|
||||
stateOrganisasi.pegawai.create.form.imageId = uploaded.id;
|
||||
stateOrganisasi.create.form.imageId = uploaded.id;
|
||||
|
||||
// Submit form
|
||||
await stateOrganisasi.pegawai.create.submit();
|
||||
await stateOrganisasi.create.submit();
|
||||
|
||||
|
||||
// Reset form dan redirect
|
||||
@@ -72,33 +73,51 @@ function CreatePegawai() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Create Pegawai</Title>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Pegawai BUMDesa
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<TextInput
|
||||
label="Nama Lengkap"
|
||||
placeholder="Masukkan nama lengkap"
|
||||
defaultValue={stateOrganisasi.pegawai.create.form.namaLengkap}
|
||||
onChange={(e) => (stateOrganisasi.pegawai.create.form.namaLengkap = e.currentTarget.value)}
|
||||
defaultValue={stateOrganisasi.create.form.namaLengkap}
|
||||
onChange={(e) => (stateOrganisasi.create.form.namaLengkap = e.currentTarget.value)}
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextInput
|
||||
label="Gelar Akademik"
|
||||
placeholder="Contoh: S.Kom"
|
||||
defaultValue={stateOrganisasi.pegawai.create.form.gelarAkademik}
|
||||
onChange={(e) => (stateOrganisasi.pegawai.create.form.gelarAkademik = e.currentTarget.value)}
|
||||
defaultValue={stateOrganisasi.create.form.gelarAkademik}
|
||||
onChange={(e) => (stateOrganisasi.create.form.gelarAkademik = e.currentTarget.value)}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz={"md"} fw={"bold"}>Gambar</Text>
|
||||
<Box >
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Foto Profil
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
const file = files[0]; // Hanya ambil file pertama
|
||||
const file = files[0];
|
||||
if (file) {
|
||||
setPreviewImage({
|
||||
file,
|
||||
@@ -110,8 +129,20 @@ function CreatePegawai() {
|
||||
accept={{
|
||||
'image/*': ['.jpeg', '.jpg', '.png', '.webp']
|
||||
}}
|
||||
styles={{
|
||||
root: {
|
||||
border: '2px dashed #ced4da',
|
||||
borderRadius: '8px',
|
||||
padding: '20px',
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
borderColor: '#228be6',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
|
||||
<Group justify="center" gap="xl" mih={160} style={{ pointerEvents: 'none' }}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
@@ -123,79 +154,113 @@ function CreatePegawai() {
|
||||
</Dropzone.Idle>
|
||||
|
||||
<div>
|
||||
<Text size="xl" inline>
|
||||
Drag images here or click to select files
|
||||
<Text size="md" inline>
|
||||
Seret gambar ke sini atau klik untuk memilih file
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" inline mt={7}>
|
||||
Attach as many files as you like, each file should not exceed 5mb
|
||||
Format yang didukung: JPG, PNG, WebP. Maksimal 5MB
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</Dropzone>
|
||||
|
||||
{previewImage && (
|
||||
<Box mt="md">
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Preview Gambar
|
||||
</Text>
|
||||
<Image
|
||||
src={previewImage.preview}
|
||||
alt="Preview"
|
||||
width={280}
|
||||
height={180}
|
||||
width={200}
|
||||
height={200}
|
||||
fit="cover"
|
||||
radius="sm"
|
||||
mt="md"
|
||||
loading="lazy"
|
||||
radius="md"
|
||||
style={{
|
||||
border: '1px solid #e0e0e0',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
loading='lazy'
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextInput
|
||||
label="Tanggal Masuk"
|
||||
type="date"
|
||||
placeholder="Contoh: 2022-01-01"
|
||||
defaultValue={stateOrganisasi.pegawai.create.form.tanggalMasuk}
|
||||
onChange={(e) => (stateOrganisasi.pegawai.create.form.tanggalMasuk = e.currentTarget.value)}
|
||||
defaultValue={stateOrganisasi.create.form.tanggalMasuk}
|
||||
onChange={(e) => (stateOrganisasi.create.form.tanggalMasuk = e.currentTarget.value)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<TextInput
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="Contoh: email@example.com"
|
||||
defaultValue={stateOrganisasi.pegawai.create.form.email}
|
||||
onChange={(e) => (stateOrganisasi.pegawai.create.form.email = e.currentTarget.value)}
|
||||
defaultValue={stateOrganisasi.create.form.email}
|
||||
onChange={(e) => (stateOrganisasi.create.form.email = e.currentTarget.value)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<TextInput
|
||||
label="Telepon"
|
||||
label="Nomor Telepon"
|
||||
placeholder="Contoh: 08123456789"
|
||||
defaultValue={stateOrganisasi.pegawai.create.form.telepon}
|
||||
onChange={(e) => (stateOrganisasi.pegawai.create.form.telepon = e.currentTarget.value)}
|
||||
defaultValue={stateOrganisasi.create.form.telepon}
|
||||
onChange={(e) => (stateOrganisasi.create.form.telepon = e.currentTarget.value)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<TextInput
|
||||
label="Alamat"
|
||||
placeholder="Contoh: Jl. Contoh No. 1"
|
||||
defaultValue={stateOrganisasi.pegawai.create.form.alamat}
|
||||
onChange={(e) => (stateOrganisasi.pegawai.create.form.alamat = e.currentTarget.value)}
|
||||
defaultValue={stateOrganisasi.create.form.alamat}
|
||||
onChange={(e) => (stateOrganisasi.create.form.alamat = e.currentTarget.value)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Posisi
|
||||
</Text>
|
||||
<Select
|
||||
label="Posisi"
|
||||
placeholder="Pilih posisi"
|
||||
data={stateOrganisasi.posisiOrganisasi.findMany.data?.map(p => ({
|
||||
data={stateStrukturBumDes.posisiOrganisasi.findManyAll.data?.map(p => ({
|
||||
value: p.id,
|
||||
label: p.nama
|
||||
})) || []}
|
||||
defaultValue={stateOrganisasi.pegawai.create.form.posisiId}
|
||||
value={stateOrganisasi.create.form.posisiId}
|
||||
onChange={(value) => {
|
||||
if (value) stateOrganisasi.pegawai.create.form.posisiId = value;
|
||||
if (value) stateOrganisasi.create.form.posisiId = value;
|
||||
}}
|
||||
searchable
|
||||
clearable
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
color="blue"
|
||||
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 CreatePegawai;
|
||||
export default CreatePegawaiBumDes;
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Badge, Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, ThemeIcon } from '@mantine/core';
|
||||
import { IconCheck, IconDeviceImacCog, IconSearch, IconX } from '@tabler/icons-react';
|
||||
import { Badge, Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title, Tooltip } from '@mantine/core';
|
||||
import { IconCheck, IconDeviceImacCog, IconPlus, IconSearch, IconX } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../../_com/header';
|
||||
import JudulList from '../../../_com/judulList';
|
||||
import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
import stateStrukturBumDes from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
|
||||
function Pegawai() {
|
||||
|
||||
function PegawaiBumDes() {
|
||||
const [search, setSearch] = useState("");
|
||||
return (
|
||||
<Box>
|
||||
<HeaderSearch
|
||||
title='Pegawai'
|
||||
title='Pegawai BUMDesa'
|
||||
placeholder='pencarian'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<ListPegawai search={search} />
|
||||
<ListPegawaiBumdes search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ListPegawai({ search }: { search: string }) {
|
||||
const stateOrganisasi = useProxy(strukturorganisasiState.pegawai);
|
||||
function ListPegawaiBumdes({ search }: { search: string }) {
|
||||
const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai);
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
@@ -39,21 +39,10 @@ function ListPegawai({ search }: { search: string }) {
|
||||
} = stateOrganisasi.findMany;
|
||||
|
||||
useEffect(() => {
|
||||
load(page, 10);
|
||||
}, [page]);
|
||||
load(page, 10, search);
|
||||
}, [page, search]);
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
if (!data) return [];
|
||||
return data.filter(item => {
|
||||
const keyword = search.toLowerCase();
|
||||
return (
|
||||
item.namaLengkap?.toLowerCase().includes(keyword) ||
|
||||
item.gelarAkademik?.toLowerCase().includes(keyword) ||
|
||||
item.telepon?.toLowerCase().includes(keyword) ||
|
||||
item.posisi?.nama?.toLowerCase().includes(keyword)
|
||||
);
|
||||
});
|
||||
}, [data, search]);
|
||||
const filteredData = data || []
|
||||
|
||||
// Handle loading state
|
||||
if (loading || !data) {
|
||||
@@ -67,29 +56,51 @@ function ListPegawai({ search }: { search: string }) {
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper p="md" ta="center">
|
||||
<p>Tidak ada data pegawai yang tersedia</p>
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Pegawai BUMDesa</Title>
|
||||
<Tooltip label="Tambah Pegawai Baru" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<Center py="xl">
|
||||
<Text c="dimmed">Tidak ada data pegawai yang ditemukan</Text>
|
||||
</Center>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper bg={colors['white-1']} p={'md'} h={{base: 770, md: 650}}>
|
||||
<JudulList
|
||||
title='List Pegawai'
|
||||
href='/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create'
|
||||
/>
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Pegawai BUMDesa</Title>
|
||||
<Tooltip label="Tambah Pegawai Baru" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<Box style={{ overflowX: "auto" }}>
|
||||
<Table striped withTableBorder withRowBorders>
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Nama</TableTh>
|
||||
<TableTh>Gelar Akademik</TableTh>
|
||||
<TableTh>Telepon</TableTh>
|
||||
<TableTh>Posisi</TableTh>
|
||||
<TableTh>Aktif</TableTh>
|
||||
<TableTh>Detail</TableTh>
|
||||
<TableTh style={{ width: '25%' }}>Nama Lengkap</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Posisi</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Status</TableTh>
|
||||
<TableTh style={{ width: '10%' }}>Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
@@ -106,10 +117,20 @@ function ListPegawai({ search }: { search: string }) {
|
||||
}) // Aktif di atas
|
||||
).map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>{item.namaLengkap}</TableTd>
|
||||
<TableTd>{item.gelarAkademik}</TableTd>
|
||||
<TableTd>{item.telepon}</TableTd>
|
||||
<TableTd>{item.posisi?.nama}</TableTd>
|
||||
<TableTd>
|
||||
<Box w={150}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.namaLengkap}
|
||||
</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Box w={150}>
|
||||
<Badge variant="light" color="blue">
|
||||
{item.posisi?.nama || 'Belum diatur'}
|
||||
</Badge>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Box visibleFrom="sm">
|
||||
@@ -131,8 +152,15 @@ function ListPegawai({ search }: { search: string }) {
|
||||
</Group>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Button bg={"green"} onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${item.id}`)}>
|
||||
<IconDeviceImacCog size={25} />
|
||||
<Button
|
||||
size="xs"
|
||||
radius="md"
|
||||
variant="light"
|
||||
color="blue"
|
||||
leftSection={<IconDeviceImacCog size={16} />}
|
||||
onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${item.id}`)}
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
@@ -140,8 +168,7 @@ function ListPegawai({ search }: { search: string }) {
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Paper>
|
||||
<Center>
|
||||
<Center mt="lg">
|
||||
<Pagination
|
||||
value={page}
|
||||
onChange={(newPage) => {
|
||||
@@ -149,12 +176,14 @@ function ListPegawai({ search }: { search: string }) {
|
||||
window.scrollTo(0, 0);
|
||||
}}
|
||||
total={totalPages}
|
||||
mt="md"
|
||||
mb="md"
|
||||
withEdges
|
||||
withControls
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Pegawai;
|
||||
export default PegawaiBumDes;
|
||||
|
||||
@@ -1,30 +1,22 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
'use client';
|
||||
|
||||
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
|
||||
import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
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';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function EditPosisiOrganisasi() {
|
||||
function EditPosisiOrganisasiBumDes() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const id = params?.id as string;
|
||||
const stateOrganisasi = useProxy(strukturorganisasiState.posisiOrganisasi);
|
||||
const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
nama: '',
|
||||
@@ -32,24 +24,27 @@ function EditPosisiOrganisasi() {
|
||||
hierarki: 0,
|
||||
});
|
||||
|
||||
// Load data awal sekali saja
|
||||
// Fungsi generik untuk update formData
|
||||
const handleChange = (field: keyof typeof formData, value: any) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const loadPosisiOrganisasi = async () => {
|
||||
if (!id) return;
|
||||
|
||||
const loadPosisiOrganisasi = async () => {
|
||||
try {
|
||||
const data = await stateOrganisasi.edit.load(id);
|
||||
|
||||
if (data) {
|
||||
stateOrganisasi.edit.id = id;
|
||||
setFormData({
|
||||
nama: data.nama ?? '',
|
||||
deskripsi: data.deskripsi ?? '',
|
||||
hierarki: data.hierarki ?? 0,
|
||||
nama: data.nama || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
hierarki: data.hierarki || 0,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading posisi organisasi:', error);
|
||||
} catch (err) {
|
||||
console.error('Error loading posisi organisasi:', err);
|
||||
toast.error('Gagal memuat data posisi organisasi');
|
||||
}
|
||||
};
|
||||
@@ -57,18 +52,14 @@ function EditPosisiOrganisasi() {
|
||||
loadPosisiOrganisasi();
|
||||
}, [id]);
|
||||
|
||||
const handleChange = (field: string, value: string | number) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
if (!formData.nama.trim()) {
|
||||
toast.error('Nama posisi organisasi tidak boleh kosong');
|
||||
return;
|
||||
}
|
||||
|
||||
// update global state HANYA saat submit
|
||||
try {
|
||||
// Update global state hanya saat submit
|
||||
stateOrganisasi.edit.form = {
|
||||
nama: formData.nama.trim(),
|
||||
deskripsi: formData.deskripsi.trim(),
|
||||
@@ -76,19 +67,17 @@ function EditPosisiOrganisasi() {
|
||||
};
|
||||
|
||||
if (!stateOrganisasi.edit.id) {
|
||||
stateOrganisasi.edit.id = id; // fallback
|
||||
stateOrganisasi.edit.id = id;
|
||||
}
|
||||
|
||||
const success = await stateOrganisasi.edit.update();
|
||||
|
||||
if (success) {
|
||||
toast.success('Posisi organisasi berhasil diperbarui!');
|
||||
router.push(
|
||||
'/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi'
|
||||
);
|
||||
router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating posisi organisasi:', error);
|
||||
} catch (err) {
|
||||
console.error('Error updating posisi organisasi:', err);
|
||||
// toast error biasanya sudah ada di update
|
||||
}
|
||||
};
|
||||
|
||||
@@ -96,17 +85,12 @@ function EditPosisiOrganisasi() {
|
||||
<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>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Posisi Organisasi
|
||||
Edit Posisi Organisasi BUMDes
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
@@ -120,39 +104,40 @@ function EditPosisiOrganisasi() {
|
||||
>
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
value={formData.nama}
|
||||
onChange={(e) => handleChange('nama', e.target.value)}
|
||||
label="Nama Posisi Organisasi"
|
||||
placeholder="Masukkan nama posisi organisasi"
|
||||
value={formData.nama}
|
||||
onChange={(e) => handleChange('nama', e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" mb={6}>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Deskripsi
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) =>
|
||||
handleChange('deskripsi', htmlContent)
|
||||
}
|
||||
onChange={(html) => handleChange('deskripsi', html)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<TextInput
|
||||
type="number"
|
||||
value={formData.hierarki}
|
||||
onChange={(e) =>
|
||||
handleChange('hierarki', parseInt(e.target.value) || 0)
|
||||
}
|
||||
label="Hierarki"
|
||||
placeholder="Masukkan hierarki"
|
||||
type="number"
|
||||
min={0}
|
||||
placeholder="Contoh: 1 (Angka semakin kecil, posisi semakin tinggi)"
|
||||
value={formData.hierarki}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value, 10);
|
||||
handleChange('hierarki', isNaN(value) ? 0 : value);
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
<Group justify="right">
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
loading={stateOrganisasi.edit.loading}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
@@ -170,4 +155,4 @@ function EditPosisiOrganisasi() {
|
||||
);
|
||||
}
|
||||
|
||||
export default EditPosisiOrganisasi;
|
||||
export default EditPosisiOrganisasiBumDes;
|
||||
|
||||
@@ -1,68 +1,66 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client';
|
||||
import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
|
||||
import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
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 { useRouter } from 'next/navigation';
|
||||
import { useEffect } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
|
||||
function CreatePosisiOrganisasi() {
|
||||
function CreatePosisiOrganisasiBumDes() {
|
||||
const router = useRouter();
|
||||
const stateOrganisasi = useProxy(strukturorganisasiState.posisiOrganisasi);
|
||||
const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi);
|
||||
|
||||
useEffect(() => {
|
||||
stateOrganisasi.findMany.load();
|
||||
}, []);
|
||||
|
||||
const resetForm = () => {
|
||||
// Initialize form with default values
|
||||
stateOrganisasi.create.form = {
|
||||
nama: '',
|
||||
deskripsi: '',
|
||||
nama: "",
|
||||
deskripsi: "",
|
||||
hierarki: 0,
|
||||
};
|
||||
|
||||
return () => {
|
||||
// Clean up form on unmount
|
||||
stateOrganisasi.create.form = {
|
||||
nama: "",
|
||||
deskripsi: "",
|
||||
hierarki: 0,
|
||||
};
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
if (!stateOrganisasi.create.form.nama.trim()) {
|
||||
return toast.error('Nama posisi tidak boleh kosong');
|
||||
}
|
||||
|
||||
await stateOrganisasi.create.submit();
|
||||
resetForm();
|
||||
router.push(
|
||||
'/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi'
|
||||
);
|
||||
toast.success('Posisi organisasi berhasil ditambahkan');
|
||||
router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi');
|
||||
} catch (error) {
|
||||
toast.error('Gagal menambahkan posisi organisasi');
|
||||
console.error('Error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header Back + Title */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Tambah Posisi Organisasi
|
||||
Tambah Posisi Organisasi BUMDes
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Card */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '50%' }}
|
||||
bg={colors['white-1']}
|
||||
@@ -76,12 +74,14 @@ function CreatePosisiOrganisasi() {
|
||||
label="Nama Posisi"
|
||||
placeholder="Contoh: Kepala Desa"
|
||||
defaultValue={stateOrganisasi.create.form.nama}
|
||||
onChange={(e) => (stateOrganisasi.create.form.nama = e.currentTarget.value)}
|
||||
onChange={(e) => (stateOrganisasi.create.form.nama = e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Text fz={"sm"} mb={6}>Deskripsi</Text>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Deskripsi
|
||||
</Text>
|
||||
<CreateEditor
|
||||
value={stateOrganisasi.create.form.deskripsi}
|
||||
onChange={(htmlContent) => {
|
||||
@@ -93,21 +93,20 @@ function CreatePosisiOrganisasi() {
|
||||
<TextInput
|
||||
label="Hierarki"
|
||||
type="number"
|
||||
placeholder="Contoh: 1"
|
||||
defaultValue={stateOrganisasi.create.form.hierarki}
|
||||
min={0}
|
||||
placeholder="Contoh: 1 (Angka semakin kecil, posisi semakin tinggi)"
|
||||
defaultValue={stateOrganisasi.create.form.hierarki || ''}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.currentTarget.value, 10);
|
||||
if (!isNaN(value)) {
|
||||
stateOrganisasi.create.form.hierarki = value;
|
||||
}
|
||||
const value = parseInt(e.target.value, 10);
|
||||
stateOrganisasi.create.form.hierarki = isNaN(value) ? 0 : value;
|
||||
}}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Action Button */}
|
||||
<Group justify="right">
|
||||
<Group justify="flex-end" mt="md">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
loading={stateOrganisasi.create.loading}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
@@ -125,4 +124,4 @@ function CreatePosisiOrganisasi() {
|
||||
);
|
||||
}
|
||||
|
||||
export default CreatePosisiOrganisasi;
|
||||
export default CreatePosisiOrganisasiBumDes;
|
||||
|
||||
@@ -1,58 +1,37 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Paper,
|
||||
Pagination,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Table,
|
||||
TableTbody,
|
||||
TableTd,
|
||||
TableTh,
|
||||
TableThead,
|
||||
TableTr,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import HeaderSearch from '../../../_com/header';
|
||||
import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
|
||||
import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
import stateStrukturBumDes from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
|
||||
function PosisiOrganisasi() {
|
||||
|
||||
function PosisiOrganisasiBumDes() {
|
||||
const [search, setSearch] = useState("");
|
||||
return (
|
||||
<Box>
|
||||
{/* Search Bar */}
|
||||
<HeaderSearch
|
||||
title="Posisi Organisasi"
|
||||
placeholder="Cari nama, deskripsi, atau hierarki..."
|
||||
title='Posisi Organisasi BUMDes'
|
||||
placeholder='Cari posisi organisasi...'
|
||||
searchIcon={<IconSearch size={20} />}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
|
||||
{/* List Table */}
|
||||
<ListPosisiOrganisasi search={search} />
|
||||
<ListPosisiOrganisasiBumDes search={search} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ListPosisiOrganisasi({ search }: { search: string }) {
|
||||
const stateOrganisasi = useProxy(strukturorganisasiState.posisiOrganisasi);
|
||||
function ListPosisiOrganisasiBumDes({ search }: { search: string }) {
|
||||
const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi)
|
||||
const router = useRouter();
|
||||
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [modalHapus, setModalHapus] = useState(false)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
|
||||
const {
|
||||
data,
|
||||
@@ -66,21 +45,20 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
|
||||
load(page, 10, search);
|
||||
}, [page, search]);
|
||||
|
||||
const filteredData = data || [];
|
||||
|
||||
const handleHapus = async () => {
|
||||
if (selectedId) {
|
||||
await stateOrganisasi.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
load(page, 10, search); // refresh
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const filteredData = data || []
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton height={500} radius="md" />
|
||||
<Skeleton height={600} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -89,63 +67,62 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
|
||||
<Box py={10}>
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Posisi Organisasi</Title>
|
||||
<Tooltip label="Tambah Posisi Baru" withArrow>
|
||||
<Title order={4}>Daftar Posisi Organisasi BumDes</Title>
|
||||
<Tooltip label="Tambah Posisi Organisasi" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
'/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create'
|
||||
)
|
||||
}
|
||||
onClick={() => router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh style={{ width: '25%' }}>Nama Posisi</TableTh>
|
||||
<TableTh style={{ width: '15%' }}>Hierarki</TableTh>
|
||||
<TableTh style={{ width: '25%' }}>Edit</TableTh>
|
||||
<TableTh style={{ width: '25%' }}>Hapus</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Nama Posisi</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Deskripsi</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Hierarki</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Edit</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Hapus</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd style={{ width: '25%' }}>
|
||||
<TableTd style={{ width: '20%' }}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '15%' }}>
|
||||
<Text fz="sm">{item.hierarki ?? '-'}</Text>
|
||||
<TableTd style={{ width: '20%' }}>
|
||||
<Box w={200}>
|
||||
<Text lineClamp={1} fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }} />
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '25%' }}>
|
||||
<Tooltip label="Ubah Posisi Organisasi" withArrow>
|
||||
<TableTd style={{ width: '20%' }}>
|
||||
<Text>{item.hierarki || '-'}</Text>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '20%' }}>
|
||||
<Tooltip label="Edit" withArrow>
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/${item.id}`
|
||||
)
|
||||
}
|
||||
size="sm"
|
||||
onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/${item.id}`)}
|
||||
>
|
||||
<IconEdit size={18} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</TableTd>
|
||||
<TableTd style={{ width: '25%' }}>
|
||||
<Tooltip label="Hapus Posisi Organisasi" withArrow>
|
||||
<TableTd style={{ width: '20%' }}>
|
||||
<Tooltip label="Hapus" withArrow>
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
@@ -170,8 +147,6 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
|
||||
</Table>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Pagination */}
|
||||
<Center>
|
||||
<Pagination
|
||||
value={page}
|
||||
@@ -186,16 +161,15 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
|
||||
radius="md"
|
||||
/>
|
||||
</Center>
|
||||
|
||||
{/* Modal Hapus */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text="Apakah anda yakin ingin menghapus posisi organisasi ini?"
|
||||
text="Apakah anda yakin ingin menghapus posisi organisasi BumDes ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default PosisiOrganisasi;
|
||||
export default PosisiOrganisasiBumDes;
|
||||
|
||||
@@ -0,0 +1,133 @@
|
||||
/* eslint-disable prefer-const */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
'use client'
|
||||
import { Box, Center, Image, Loader, Paper, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { IconUsers } from '@tabler/icons-react';
|
||||
import { OrganizationChart } from 'primereact/organizationchart';
|
||||
import { useEffect } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
import stateStrukturBumDes from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
|
||||
|
||||
function StrukturOrganisasiBumDes() {
|
||||
return (
|
||||
<Box py="md">
|
||||
<ListStrukturOrganisasiBumDes />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function ListStrukturOrganisasiBumDes() {
|
||||
const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai);
|
||||
|
||||
useEffect(() => {
|
||||
stateOrganisasi.findMany.load();
|
||||
}, []);
|
||||
|
||||
if (stateOrganisasi.findMany.loading) {
|
||||
return (
|
||||
<Center py={40}>
|
||||
<Loader size="lg" />
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) {
|
||||
return (
|
||||
<Stack align="center" py={60} gap="sm">
|
||||
<IconUsers size={60} stroke={1.5} color="var(--mantine-color-gray-6)" />
|
||||
<Text fw={500} c="dimmed">Belum ada struktur organisasi yang ditambahkan</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
const posisiMap = new Map<string, any>();
|
||||
|
||||
const aktifPegawai = stateOrganisasi.findMany.data.filter(p => p.isActive);
|
||||
|
||||
for (const pegawai of aktifPegawai) {
|
||||
const posisiId = pegawai.posisi.id;
|
||||
if (!posisiMap.has(posisiId)) {
|
||||
posisiMap.set(posisiId, {
|
||||
...pegawai.posisi,
|
||||
pegawaiList: [],
|
||||
children: [],
|
||||
});
|
||||
}
|
||||
posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
|
||||
}
|
||||
|
||||
let root: any[] = [];
|
||||
posisiMap.forEach((posisi) => {
|
||||
if (posisi.parentId) {
|
||||
const parent = posisiMap.get(posisi.parentId);
|
||||
if (parent) {
|
||||
parent.children.push(posisi);
|
||||
}
|
||||
} else {
|
||||
root.push(posisi);
|
||||
}
|
||||
});
|
||||
|
||||
function toOrgChartFormat(node: any): any {
|
||||
return {
|
||||
expanded: true,
|
||||
type: 'person',
|
||||
styleClass: 'p-person',
|
||||
data: {
|
||||
name: node.pegawaiList?.[0]?.namaLengkap || 'Belum ada pegawai',
|
||||
status: node.nama,
|
||||
image: node.pegawaiList?.[0]?.image?.link || '/img/default.png',
|
||||
},
|
||||
children: node.children.map(toOrgChartFormat),
|
||||
};
|
||||
}
|
||||
|
||||
const chartData = root.map(toOrgChartFormat);
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper
|
||||
p="md"
|
||||
radius="lg"
|
||||
shadow="md"
|
||||
withBorder
|
||||
style={{
|
||||
overflowX: 'auto',
|
||||
background: 'linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%)',
|
||||
}}
|
||||
>
|
||||
<OrganizationChart value={chartData} nodeTemplate={nodeTemplate} />
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function nodeTemplate(node: any) {
|
||||
const imageSrc = node?.data?.image || '/img/default.png';
|
||||
const name = node?.data?.name || 'Tanpa Nama';
|
||||
const status = node?.data?.status || 'Tidak ada deskripsi';
|
||||
|
||||
return (
|
||||
<Stack align="center" gap={6} p="sm" style={{ minWidth: 160 }}>
|
||||
<Tooltip label={name} position="top" withArrow>
|
||||
<Image
|
||||
src={imageSrc}
|
||||
alt={name}
|
||||
radius="xl"
|
||||
w={100}
|
||||
h={100}
|
||||
fit="cover"
|
||||
style={{
|
||||
border: '1px solid #D3D1D1FF',
|
||||
}}
|
||||
loading='lazy'
|
||||
/>
|
||||
</Tooltip>
|
||||
<Text fw={600} ta="center" size="sm">{name}</Text>
|
||||
<Text size="xs" c="dimmed" ta="center">{status}</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default StrukturOrganisasiBumDes;
|
||||
@@ -4,7 +4,6 @@ import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Group,
|
||||
Pagination,
|
||||
Paper,
|
||||
Skeleton,
|
||||
@@ -16,11 +15,10 @@ import {
|
||||
TableThead,
|
||||
TableTr,
|
||||
Text,
|
||||
Title,
|
||||
Tooltip,
|
||||
Title
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconDeviceImac, IconSearch, IconPlus } from '@tabler/icons-react';
|
||||
import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
@@ -72,20 +70,7 @@ function ListAjukanIdeInovatif({ search }: { search: string }) {
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Ide Inovatif</Title>
|
||||
<Tooltip label="Ajukan Ide Baru" withArrow>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
variant="light"
|
||||
onClick={() => router.push('/admin/inovasi/ajukan-ide-inovatif/create')}
|
||||
>
|
||||
Tambah Baru
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
|
||||
<Box style={{ overflowX: "auto" }}>
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
|
||||
@@ -1,10 +1,21 @@
|
||||
'use client'
|
||||
'use client';
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
|
||||
import desaDigitalState from '@/app/admin/(dashboard)/_state/inovasi/desa-digital';
|
||||
import colors from '@/con/colors';
|
||||
import ApiFetch from '@/lib/api-fetch';
|
||||
import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { Dropzone } from '@mantine/dropzone';
|
||||
import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
@@ -20,16 +31,14 @@ function EditDigitalSmartVillage() {
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
|
||||
// ✅ hanya lokal state untuk form
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
deskripsi: '',
|
||||
imageId: '',
|
||||
});
|
||||
|
||||
// load data sekali saat mount
|
||||
useEffect(() => {
|
||||
const loadPenghargaan = async () => {
|
||||
const loadData = async () => {
|
||||
const id = params?.id as string;
|
||||
if (!id) return;
|
||||
|
||||
@@ -42,69 +51,67 @@ function EditDigitalSmartVillage() {
|
||||
imageId: data.imageId || '',
|
||||
});
|
||||
|
||||
if (data?.image?.link) {
|
||||
setPreviewImage(data.image.link);
|
||||
}
|
||||
if (data?.image?.link) setPreviewImage(data.image.link);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading desa digital smart village:", error);
|
||||
toast.error("Gagal memuat data desa digital smart village");
|
||||
console.error('Error loading data:', error);
|
||||
toast.error('Gagal memuat data desa digital smart village');
|
||||
}
|
||||
};
|
||||
|
||||
loadPenghargaan();
|
||||
loadData();
|
||||
}, [params?.id]);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// ✅ update global state hanya saat submit
|
||||
stateDesaDigital.edit.form = {
|
||||
...stateDesaDigital.edit.form,
|
||||
...formData,
|
||||
};
|
||||
stateDesaDigital.edit.form = { ...stateDesaDigital.edit.form, ...formData };
|
||||
|
||||
if (file) {
|
||||
const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
|
||||
const uploaded = res.data?.data;
|
||||
|
||||
if (!uploaded?.id) {
|
||||
return toast.error("Gagal upload gambar");
|
||||
}
|
||||
if (!uploaded?.id) return toast.error('Gagal upload gambar');
|
||||
|
||||
stateDesaDigital.edit.form.imageId = uploaded.id;
|
||||
}
|
||||
|
||||
await stateDesaDigital.edit.update();
|
||||
toast.success("Desa digital smart village berhasil diperbarui!");
|
||||
router.push("/admin/inovasi/desa-digital-smart-village");
|
||||
toast.success('Desa digital smart village berhasil diperbarui!');
|
||||
router.push('/admin/inovasi/desa-digital-smart-village');
|
||||
} catch (error) {
|
||||
console.error("Error updating desa digital smart village:", error);
|
||||
toast.error("Terjadi kesalahan saat memperbarui desa digital smart village");
|
||||
console.error('Error updating desa digital:', error);
|
||||
toast.error('Terjadi kesalahan saat memperbarui data');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors["blue-button"]} size={30} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
|
||||
<Stack gap={"xs"}>
|
||||
<Title order={3}>Edit Desa Digital Smart Village</Title>
|
||||
|
||||
{/* ✅ controlled input */}
|
||||
<TextInput
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
|
||||
placeholder="masukkan judul"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Desa Digital Smart Village
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Card */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '55%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Dropzone Upload */}
|
||||
<Box>
|
||||
<Text fz={"md"} fw={"bold"}>Gambar</Text>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Gambar Desa Digital
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
const selectedFile = files[0];
|
||||
@@ -113,43 +120,43 @@ function EditDigitalSmartVillage() {
|
||||
setPreviewImage(URL.createObjectURL(selectedFile));
|
||||
}
|
||||
}}
|
||||
onReject={() => toast.error('File tidak valid.')}
|
||||
onReject={() => toast.error('File tidak valid, gunakan format gambar')}
|
||||
maxSize={5 * 1024 ** 2}
|
||||
accept={{ 'image/*': [] }}
|
||||
radius="md"
|
||||
p="xl"
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept>
|
||||
<IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
|
||||
<IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
|
||||
</Dropzone.Accept>
|
||||
<Dropzone.Reject>
|
||||
<IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
|
||||
<IconX size={48} color="red" stroke={1.5} />
|
||||
</Dropzone.Reject>
|
||||
<Dropzone.Idle>
|
||||
<IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
|
||||
<IconPhoto size={48} color="#868e96" stroke={1.5} />
|
||||
</Dropzone.Idle>
|
||||
|
||||
<div>
|
||||
<Text size="xl" inline>
|
||||
Drag gambar ke sini atau klik untuk pilih file
|
||||
<Stack gap="xs" align="center">
|
||||
<Text size="md" fw={500}>
|
||||
Seret gambar atau klik untuk memilih file
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed" inline mt={7}>
|
||||
Maksimal 5MB dan harus format gambar
|
||||
<Text size="sm" c="dimmed">
|
||||
Maksimal 5MB, format gambar wajib
|
||||
</Text>
|
||||
</div>
|
||||
</Stack>
|
||||
</Group>
|
||||
</Dropzone>
|
||||
|
||||
{previewImage && (
|
||||
<Box mt="sm">
|
||||
<Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
|
||||
<Image
|
||||
src={previewImage}
|
||||
alt="Preview"
|
||||
alt="Preview Gambar"
|
||||
radius="md"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '200px',
|
||||
maxHeight: 220,
|
||||
objectFit: 'contain',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ddd',
|
||||
border: `1px solid ${colors['blue-button']}`,
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -157,18 +164,43 @@ function EditDigitalSmartVillage() {
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Input Judul */}
|
||||
<TextInput
|
||||
label="Judul"
|
||||
placeholder="Masukkan judul inovasi"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Editor Deskripsi */}
|
||||
<Box>
|
||||
<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
|
||||
{/* ✅ controlled editor */}
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Deskripsi
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) => {
|
||||
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
|
||||
}}
|
||||
onChange={(htmlContent) =>
|
||||
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Button onClick={handleSubmit}>Simpan</Button>
|
||||
{/* Tombol Simpan */}
|
||||
<Group justify="right">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
size="md"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
@@ -1,8 +1,18 @@
|
||||
'use client'
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Image,
|
||||
Paper,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
|
||||
import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useProxy } from 'valtio/utils';
|
||||
@@ -10,95 +20,136 @@ import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
|
||||
import desaDigitalState from '../../../_state/inovasi/desa-digital';
|
||||
|
||||
function DetailDesaDigital() {
|
||||
const stateDesaDigital = useProxy(desaDigitalState)
|
||||
const stateDesaDigital = useProxy(desaDigitalState);
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const router = useRouter()
|
||||
const params = useParams()
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
useShallowEffect(() => {
|
||||
stateDesaDigital.findUnique.load(params?.id as string)
|
||||
}, [])
|
||||
stateDesaDigital.findUnique.load(params?.id as string);
|
||||
}, []);
|
||||
|
||||
const handleHapus = () => {
|
||||
if (selectedId) {
|
||||
stateDesaDigital.delete.byId(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
router.push("/admin/inovasi/desa-digital-smart-village")
|
||||
}
|
||||
stateDesaDigital.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
router.push("/admin/inovasi/desa-digital-smart-village");
|
||||
}
|
||||
};
|
||||
|
||||
if (!stateDesaDigital.findUnique.data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Skeleton h={500} />
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
const data = stateDesaDigital.findUnique.data;
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
</Button>
|
||||
</Box>
|
||||
<Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
|
||||
<Stack>
|
||||
<Text fz={"xl"} fw={"bold"}>Detail Desa Digital Smart Village</Text>
|
||||
{stateDesaDigital.findUnique.data ? (
|
||||
<Paper key={stateDesaDigital.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
|
||||
<Stack gap={"xs"}>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Judul</Text>
|
||||
<Text fz={"lg"}>{stateDesaDigital.findUnique.data?.name}</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
|
||||
<Text fz={"lg"} style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: stateDesaDigital.findUnique.data?.deskripsi }} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fw={"bold"} fz={"lg"}>Gambar</Text>
|
||||
<Image w={{ base: 150, md: 150, lg: 150 }} src={stateDesaDigital.findUnique.data?.image?.link} alt="gambar" loading="lazy"/>
|
||||
</Box>
|
||||
<Flex gap={"xs"} mt={10}>
|
||||
<Box py={10}>
|
||||
{/* Tombol Kembali */}
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (stateDesaDigital.findUnique.data) {
|
||||
setSelectedId(stateDesaDigital.findUnique.data.id);
|
||||
setModalHapus(true);
|
||||
}
|
||||
}}
|
||||
disabled={stateDesaDigital.delete.loading || !stateDesaDigital.findUnique.data}
|
||||
color={"red"}
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
|
||||
mb={15}
|
||||
>
|
||||
<IconX size={20} />
|
||||
Kembali
|
||||
</Button>
|
||||
|
||||
{/* Card Utama */}
|
||||
<Paper
|
||||
withBorder
|
||||
w={{ base: "100%", md: "60%" }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
>
|
||||
<Stack gap="md">
|
||||
<Text fz="2xl" fw="bold" c={colors['blue-button']}>
|
||||
Detail Desa Digital Smart Village
|
||||
</Text>
|
||||
|
||||
{/* Sub Card Detail */}
|
||||
<Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
|
||||
<Stack gap="sm">
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Judul</Text>
|
||||
<Text fz="md" c="dimmed">{data?.name || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text
|
||||
fz="md"
|
||||
c="dimmed"
|
||||
style={{ wordBreak: "break-word", whiteSpace: "normal" }}
|
||||
dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Gambar</Text>
|
||||
{data?.image?.link ? (
|
||||
<Image
|
||||
src={data.image.link}
|
||||
alt={data.name || 'Gambar Desa Digital'}
|
||||
w={200}
|
||||
h={200}
|
||||
radius="md"
|
||||
fit="cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<Text fz="sm" c="dimmed">Tidak ada gambar</Text>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Tombol Aksi */}
|
||||
<Group gap="sm">
|
||||
<Tooltip label="Hapus Data" withArrow position="top">
|
||||
<Button
|
||||
color="red"
|
||||
onClick={() => {
|
||||
if (stateDesaDigital.findUnique.data) {
|
||||
router.push(`/admin/inovasi/desa-digital-smart-village/${stateDesaDigital.findUnique.data.id}/edit`);
|
||||
}
|
||||
setSelectedId(data.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
disabled={!stateDesaDigital.findUnique.data}
|
||||
color={"green"}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconTrash size={20} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="Edit Data" withArrow position="top">
|
||||
<Button
|
||||
color="green"
|
||||
onClick={() => router.push(`/admin/inovasi/desa-digital-smart-village/${data.id}/edit`)}
|
||||
variant="light"
|
||||
radius="md"
|
||||
size="md"
|
||||
>
|
||||
<IconEdit size={20} />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
) : null}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Modal Konfirmasi Hapus */}
|
||||
{/* Modal Konfirmasi */}
|
||||
<ModalKonfirmasiHapus
|
||||
opened={modalHapus}
|
||||
onClose={() => setModalHapus(false)}
|
||||
onConfirm={handleHapus}
|
||||
text='Apakah anda yakin ingin menghapus desa digital smart village ini?'
|
||||
text="Apakah Anda yakin ingin menghapus desa digital smart village ini?"
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -22,7 +22,7 @@ import CreateEditor from '../../../_com/createEditor';
|
||||
import desaDigitalState from '../../../_state/inovasi/desa-digital';
|
||||
import { Dropzone } from '@mantine/dropzone';
|
||||
|
||||
function CreateDesaDigital() {
|
||||
export default function CreateDesaDigital() {
|
||||
const stateDesaDigital = useProxy(desaDigitalState);
|
||||
const [previewImage, setPreviewImage] = useState<string | null>(null);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
@@ -44,7 +44,6 @@ function CreateDesaDigital() {
|
||||
}
|
||||
|
||||
try {
|
||||
// Upload gambar dulu
|
||||
const uploadRes = await ApiFetch.api.fileStorage.create.post({
|
||||
file,
|
||||
name: file.name,
|
||||
@@ -55,10 +54,8 @@ function CreateDesaDigital() {
|
||||
return toast.error('Gagal mengunggah gambar');
|
||||
}
|
||||
|
||||
// Set imageId ke form
|
||||
stateDesaDigital.create.form.imageId = uploaded.id;
|
||||
|
||||
// Submit form
|
||||
const success = await stateDesaDigital.create.create();
|
||||
if (success) {
|
||||
resetForm();
|
||||
@@ -72,10 +69,16 @@ function CreateDesaDigital() {
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
{/* Header dengan tombol kembali */}
|
||||
<Group mb="md" align="center">
|
||||
<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"
|
||||
style={{ transition: 'background 0.2s ease' }}
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
@@ -84,28 +87,32 @@ function CreateDesaDigital() {
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Card */}
|
||||
{/* Card Form */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '60%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
p={{ base: 'md', md: 'xl' }}
|
||||
radius="lg"
|
||||
shadow="md"
|
||||
style={{
|
||||
border: '1px solid #eaeaea',
|
||||
transition: 'box-shadow 0.3s ease',
|
||||
}}
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Nama */}
|
||||
<Stack gap="lg">
|
||||
{/* Input Nama */}
|
||||
<TextInput
|
||||
label="Nama Desa Digital Smart Village"
|
||||
placeholder="Masukkan nama desa digital smart village"
|
||||
label="Nama Desa Digital"
|
||||
placeholder="Masukkan nama desa digital"
|
||||
defaultValue={stateDesaDigital.create.form.name}
|
||||
onChange={(e) => (stateDesaDigital.create.form.name = e.target.value)}
|
||||
required
|
||||
radius="md"
|
||||
withAsterisk
|
||||
/>
|
||||
|
||||
{/* Deskripsi */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
<Text fw={500} fz="sm" mb={6}>
|
||||
Deskripsi
|
||||
</Text>
|
||||
<CreateEditor
|
||||
@@ -118,8 +125,8 @@ function CreateDesaDigital() {
|
||||
|
||||
{/* Upload Gambar */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Gambar
|
||||
<Text fw={500} fz="sm" mb={6}>
|
||||
Gambar Desa Digital
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
@@ -134,6 +141,11 @@ function CreateDesaDigital() {
|
||||
accept={{ 'image/*': [] }}
|
||||
radius="md"
|
||||
p="xl"
|
||||
style={{
|
||||
border: '2px dashed #cfd8dc',
|
||||
backgroundColor: '#fafafa',
|
||||
transition: 'background-color 0.2s ease, border-color 0.2s ease',
|
||||
}}
|
||||
>
|
||||
<Group justify="center" gap="xl" mih={180}>
|
||||
<Dropzone.Accept>
|
||||
@@ -153,15 +165,22 @@ function CreateDesaDigital() {
|
||||
|
||||
{/* Preview */}
|
||||
{previewImage && (
|
||||
<Box mt="sm" style={{ textAlign: 'center' }}>
|
||||
<Box
|
||||
mt="sm"
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={previewImage}
|
||||
alt="Preview"
|
||||
radius="md"
|
||||
style={{
|
||||
maxHeight: 200,
|
||||
objectFit: 'contain',
|
||||
border: '1px solid #ddd',
|
||||
maxHeight: 220,
|
||||
objectFit: 'cover',
|
||||
border: '1px solid #e0e0e0',
|
||||
}}
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -170,7 +189,7 @@ function CreateDesaDigital() {
|
||||
</Box>
|
||||
|
||||
{/* Tombol Submit */}
|
||||
<Group justify="right">
|
||||
<Group justify="flex-end" mt="sm">
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
radius="md"
|
||||
@@ -179,6 +198,17 @@ function CreateDesaDigital() {
|
||||
background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
|
||||
color: '#fff',
|
||||
boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
|
||||
transition: 'transform 0.2s ease, box-shadow 0.2s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget.style.transform = 'translateY(-2px)');
|
||||
(e.currentTarget.style.boxShadow =
|
||||
'0 6px 20px rgba(79, 172, 254, 0.5)');
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget.style.transform = 'translateY(0)');
|
||||
(e.currentTarget.style.boxShadow =
|
||||
'0 4px 15px rgba(79, 172, 254, 0.4)');
|
||||
}}
|
||||
>
|
||||
Simpan
|
||||
@@ -189,5 +219,3 @@ function CreateDesaDigital() {
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreateDesaDigital;
|
||||
|
||||
@@ -55,7 +55,7 @@ function DetailInfoTeknologiTepatGuna() {
|
||||
<Paper
|
||||
withBorder
|
||||
w={{ base: "100%", md: "70%", lg: "60%" }}
|
||||
bg={colors['white-1']}
|
||||
bg="#ECEEF8"
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
|
||||
@@ -1,9 +1,19 @@
|
||||
'use client'
|
||||
'use client';
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
|
||||
import layananonlineDesa from '@/app/admin/(dashboard)/_state/inovasi/layanan-online-desa';
|
||||
import colors from '@/con/colors';
|
||||
import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { IconArrowBack } from '@tabler/icons-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useEffect, useState } from 'react';
|
||||
@@ -15,13 +25,11 @@ function EditJenisLayanan() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
// state lokal untuk form
|
||||
const [formData, setFormData] = useState({
|
||||
nama: "",
|
||||
deskripsi: "",
|
||||
nama: '',
|
||||
deskripsi: '',
|
||||
});
|
||||
|
||||
// load data dari backend ke local state
|
||||
useEffect(() => {
|
||||
const loadJenisLayanan = async () => {
|
||||
const id = params?.id as string;
|
||||
@@ -31,20 +39,19 @@ function EditJenisLayanan() {
|
||||
const data = await state.edit.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
nama: data.nama ?? "",
|
||||
deskripsi: data.deskripsi ?? "",
|
||||
nama: data.nama ?? '',
|
||||
deskripsi: data.deskripsi ?? '',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading jenis layanan:", error);
|
||||
toast.error("Gagal memuat data jenis layanan");
|
||||
console.error('Error loading jenis layanan:', error);
|
||||
toast.error('Gagal memuat data jenis layanan');
|
||||
}
|
||||
};
|
||||
|
||||
loadJenisLayanan();
|
||||
}, [params?.id]);
|
||||
|
||||
// submit update → baru sync ke global state
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
state.edit.form = {
|
||||
@@ -53,48 +60,85 @@ function EditJenisLayanan() {
|
||||
};
|
||||
|
||||
await state.edit.update();
|
||||
toast.success("Jenis layanan berhasil diperbarui!");
|
||||
router.push("/admin/inovasi/layanan-online-desa/jenis-layanan");
|
||||
toast.success('Jenis layanan berhasil diperbarui!');
|
||||
router.push('/admin/inovasi/layanan-online-desa/jenis-layanan');
|
||||
} catch (error) {
|
||||
console.error("Error updating jenis layanan:", error);
|
||||
toast.error("Terjadi kesalahan saat memperbarui jenis layanan");
|
||||
console.error('Error updating jenis layanan:', error);
|
||||
toast.error('Terjadi kesalahan saat memperbarui jenis layanan');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mb={10}>
|
||||
<Button variant="subtle" onClick={() => router.back()}>
|
||||
<IconArrowBack color={colors['blue-button']} size={25} />
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Tooltip label="Kembali ke halaman sebelumnya" withArrow>
|
||||
<Button
|
||||
variant="subtle"
|
||||
onClick={() => router.back()}
|
||||
p="xs"
|
||||
radius="md"
|
||||
>
|
||||
<IconArrowBack color={colors['blue-button']} size={24} />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Paper bg={colors["white-1"]} p="md" w={{ base: "100%", md: "50%" }}>
|
||||
<Stack gap="xs">
|
||||
<Title order={3}>Edit Jenis Layanan</Title>
|
||||
</Tooltip>
|
||||
<Title order={4} ml="sm" c="dark">
|
||||
Edit Jenis Layanan
|
||||
</Title>
|
||||
</Group>
|
||||
|
||||
{/* Form Container */}
|
||||
<Paper
|
||||
w={{ base: '100%', md: '60%' }}
|
||||
bg={colors['white-1']}
|
||||
p="lg"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
style={{ border: '1px solid #e0e0e0' }}
|
||||
>
|
||||
<Stack gap="md">
|
||||
{/* Input: Nama Jenis Layanan */}
|
||||
<TextInput
|
||||
label="Nama Jenis Layanan"
|
||||
placeholder="Masukkan nama jenis layanan"
|
||||
value={formData.nama}
|
||||
onChange={(e) =>
|
||||
setFormData((prev) => ({ ...prev, nama: e.target.value }))
|
||||
}
|
||||
label={<Text fz="sm" fw="bold">Nama Jenis Layanan</Text>}
|
||||
placeholder="masukkan nama jenis layanan"
|
||||
required
|
||||
/>
|
||||
|
||||
{/* Input: Deskripsi (Rich Text Editor) */}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">Deskripsi</Text>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Deskripsi
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsi}
|
||||
onChange={(htmlContent) =>
|
||||
setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
deskripsi: htmlContent,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Button bg={colors['blue-button']} onClick={handleSubmit}>
|
||||
{/* Tombol Submit */}
|
||||
<Group justify="right" mt="sm">
|
||||
<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>
|
||||
|
||||
@@ -29,10 +29,11 @@ function EditKontakDaruratKeamanan() {
|
||||
const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
// Remove the dependency on data in the initial state
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
icon: "" as IconKey | "",
|
||||
kategoriId: [] as string[],
|
||||
kategoriId: [] as string[], // Initialize as empty array
|
||||
});
|
||||
|
||||
// Load data dari backend
|
||||
@@ -49,7 +50,7 @@ function EditKontakDaruratKeamanan() {
|
||||
setFormData({
|
||||
name: data.nama || "",
|
||||
icon: (data.icon as IconKey) || "",
|
||||
kategoriId: data.kategoriId || [],
|
||||
kategoriId: Array.isArray(data.kategoriId) ? data.kategoriId : [],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,17 +52,18 @@ function EditLaporanPublik() {
|
||||
try {
|
||||
const data = await stateLaporan.edit.load(id);
|
||||
if (data) {
|
||||
setFormData({
|
||||
judul: data.judul || '',
|
||||
lokasi: data.lokasi || '',
|
||||
tanggalWaktu: data.tanggalWaktu || '',
|
||||
status: data.status || '',
|
||||
penanganan: data.penanganan?.[0]?.deskripsi || '',
|
||||
kronologi: data.kronologi || '',
|
||||
});
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
judul: data.judul ?? prev.judul,
|
||||
lokasi: data.lokasi ?? prev.lokasi,
|
||||
tanggalWaktu: data.tanggalWaktu ?? prev.tanggalWaktu,
|
||||
status: (data.status as Status) ?? prev.status,
|
||||
penanganan: data.penanganan?.[0]?.deskripsi ?? prev.penanganan,
|
||||
kronologi: data.kronologi ?? prev.kronologi,
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading laporan publik:', error);
|
||||
console.error("Error loading laporan publik:", error);
|
||||
toast.error("Gagal mengambil data laporan publik");
|
||||
}
|
||||
};
|
||||
@@ -70,6 +71,7 @@ function EditLaporanPublik() {
|
||||
loadLaporanPublik();
|
||||
}, [params?.id, stateLaporan.edit]);
|
||||
|
||||
|
||||
const handleChange = (field: string, value: string | Status) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
Title,
|
||||
Tooltip,
|
||||
@@ -128,13 +129,17 @@ function EditPencegahanKriminalitas() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi singkat"
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Deskripsi
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsiSingkat}
|
||||
onChange={handleChange('deskripsiSingkat')}
|
||||
required
|
||||
onChange={(val) =>
|
||||
setFormData((prev) => ({ ...prev, deskripsiSingkat: val }))
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Title order={6} fw="bold" fz="sm" mb={6}>
|
||||
|
||||
@@ -90,15 +90,17 @@ function CreatePencegahanKriminalitas() {
|
||||
/>
|
||||
|
||||
{/* Deskripsi Singkat */}
|
||||
<TextInput
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi singkat"
|
||||
defaultValue={kriminalitasState.create.form.deskripsiSingkat}
|
||||
onChange={(e) => {
|
||||
kriminalitasState.create.form.deskripsiSingkat = e.currentTarget.value;
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<CreateEditor
|
||||
value={kriminalitasState.create.form.deskripsiSingkat}
|
||||
onChange={(val) => {
|
||||
kriminalitasState.create.form.deskripsiSingkat = val;
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Deskripsi Panjang */}
|
||||
<Box>
|
||||
|
||||
@@ -105,9 +105,11 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
|
||||
data.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<Box w={200}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.judul}
|
||||
</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Box w={200}>
|
||||
|
||||
@@ -183,7 +183,7 @@ function EditArtikelKesehatan() {
|
||||
{/* Gambar */}
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Gambar Berita
|
||||
Gambar Artikel Kesehatan
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={handleFileChange}
|
||||
@@ -240,15 +240,15 @@ function EditArtikelKesehatan() {
|
||||
/>
|
||||
|
||||
{/* Pendahuluan */}
|
||||
<InputText
|
||||
label="Pendahuluan"
|
||||
<Box>
|
||||
<Text fw="bold">Pendahuluan</Text>
|
||||
<EditEditor
|
||||
value={formData.introduction.content}
|
||||
onChange={(value) =>
|
||||
setFormData((prev) => ({ ...prev, introduction: { content: value } }))
|
||||
setFormData((prev) => ({ ...prev, introduction: { ...prev.introduction, content: value } }))
|
||||
}
|
||||
placeholder="Masukkan pendahuluan"
|
||||
/>
|
||||
|
||||
</Box>
|
||||
{/* Gejala */}
|
||||
<Box>
|
||||
<Text fw="bold">Gejala</Text>
|
||||
|
||||
@@ -115,7 +115,7 @@ function CreateArtikelKesehatan() {
|
||||
<Stack gap="md">
|
||||
<Box>
|
||||
<Text fw="bold" fz="sm" mb={6}>
|
||||
Gambar Berita
|
||||
Gambar Artikel Kesehatan
|
||||
</Text>
|
||||
<Dropzone
|
||||
onDrop={(files) => {
|
||||
@@ -182,16 +182,15 @@ function CreateArtikelKesehatan() {
|
||||
}}
|
||||
required
|
||||
/>
|
||||
<TextInput
|
||||
label={"Pendahuluan"}
|
||||
placeholder="Masukkan pendahuluan"
|
||||
required
|
||||
defaultValue={stateArtikelKesehatan.create.form.introduction.content}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">Pendahuluan</Text>
|
||||
<CreateEditor
|
||||
value={stateArtikelKesehatan.create.form.introduction.content}
|
||||
onChange={(e) => {
|
||||
stateArtikelKesehatan.create.form.introduction.content = e.target.value;
|
||||
stateArtikelKesehatan.create.form.introduction.content = e;
|
||||
}}
|
||||
/>
|
||||
|
||||
</Box>
|
||||
{/* Gejala */}
|
||||
<Box>
|
||||
<Text fz="md" fw="bold">Gejala</Text>
|
||||
|
||||
@@ -89,26 +89,26 @@ function ListArtikelKesehatan({ search }: { search: string }) {
|
||||
<Table highlightOnHover>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Judul</TableTh>
|
||||
<TableTh>Konten</TableTh>
|
||||
<TableTh>Aksi</TableTh>
|
||||
<TableTh style={{ minWidth: 200 }}>Judul</TableTh>
|
||||
<TableTh style={{ minWidth: 200 }}>Konten</TableTh>
|
||||
<TableTh style={{ minWidth: 200 }}>Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{filteredData.length > 0 ? (
|
||||
filteredData.map((item) => (
|
||||
<TableTr key={item.id}>
|
||||
<TableTd>
|
||||
<TableTd style={{ minWidth: 200 }}>
|
||||
<Text fw={500} truncate="end" lineClamp={1}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<TableTd style={{ minWidth: 200 }} >
|
||||
<Text truncate fz="sm" c="dimmed" lineClamp={1}>
|
||||
{item.content}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<TableTd style={{ minWidth: 200 }}>
|
||||
<Button
|
||||
variant="light"
|
||||
color="blue"
|
||||
|
||||
@@ -127,7 +127,9 @@ function ListFasilitasKesehatan({ search }: { search: string }) {
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Box w={150}>
|
||||
<Text truncate="end" lineClamp={1}>
|
||||
{item.tarifdanlayanan?.layanan || '-'}
|
||||
</Text>
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
|
||||
@@ -223,7 +223,7 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
|
||||
|
||||
{/* Chart */}
|
||||
<Box mt="lg" style={{ width: '100%', minWidth: 300, height: 420, minHeight: 300 }}>
|
||||
<Paper bg={colors['white-1']} p={'md'}>
|
||||
<Paper withBorder bg={colors['white-1']} p={'md'}>
|
||||
<Title pb={10} order={4}>Grafik Hasil Kepuasan Masyarakat</Title>
|
||||
{mounted && diseaseChartData.length > 0 ? (
|
||||
<Center>
|
||||
|
||||
@@ -140,15 +140,15 @@ function EditInfoWabahPenyakit() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsiSingkat}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
updateField('deskripsiSingkat', e.target.value)
|
||||
}
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi singkat"
|
||||
required
|
||||
onChange={(val) => updateField('deskripsiSingkat', val)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">
|
||||
|
||||
@@ -84,7 +84,7 @@ function DetailInfoWabahPenyakit() {
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi Singkat</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsiSingkat || '-'}</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsiSingkat }} />
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
|
||||
@@ -100,15 +100,15 @@ function CreateInfoWabahPenyakit() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
defaultValue={infoWabahPenyakitState.create.form.deskripsiSingkat}
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">Deskripsi Singkat</Text>
|
||||
<CreateEditor
|
||||
value={infoWabahPenyakitState.create.form.deskripsiSingkat}
|
||||
onChange={(val) => {
|
||||
infoWabahPenyakitState.create.form.deskripsiSingkat = val.target.value;
|
||||
infoWabahPenyakitState.create.form.deskripsiSingkat = val;
|
||||
}}
|
||||
label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
|
||||
placeholder="Masukkan deskripsi singkat"
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">Deskripsi</Text>
|
||||
|
||||
@@ -111,9 +111,7 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Box w={200}>
|
||||
<Text truncate fz="sm" c="dimmed">
|
||||
{item.deskripsiSingkat}
|
||||
</Text>
|
||||
<Text truncate="end" fz="sm" c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
|
||||
</Box>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
|
||||
@@ -33,6 +33,7 @@ function EditKontakDarurat() {
|
||||
name: '',
|
||||
deskripsi: '',
|
||||
imageId: '',
|
||||
whatsapp: '',
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
@@ -49,6 +50,7 @@ function EditKontakDarurat() {
|
||||
name: data.name || '',
|
||||
deskripsi: data.deskripsi || '',
|
||||
imageId: data.imageId || '',
|
||||
whatsapp: data.whatsapp || '',
|
||||
});
|
||||
if (data?.image?.link) setPreviewImage(data.image.link);
|
||||
}
|
||||
@@ -124,6 +126,14 @@ function EditKontakDarurat() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
value={formData.whatsapp}
|
||||
onChange={(e) => setFormData(prev => ({ ...prev, whatsapp: e.target.value }))}
|
||||
label="Whatsapp"
|
||||
placeholder="Masukkan whatsapp"
|
||||
required
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">Deskripsi</Text>
|
||||
<EditEditor
|
||||
|
||||
@@ -72,6 +72,11 @@ function DetailKontakDarurat() {
|
||||
<Text fz="md" c="dimmed">{data.name || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Whatsapp</Text>
|
||||
<Text fz="md" c="dimmed">{data.whatsapp || '-'}</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi</Text>
|
||||
<Text
|
||||
|
||||
@@ -38,6 +38,7 @@ function CreateKontakDarurat() {
|
||||
name: '',
|
||||
deskripsi: '',
|
||||
imageId: '',
|
||||
whatsapp: '',
|
||||
};
|
||||
setPreviewImage(null);
|
||||
setFile(null);
|
||||
@@ -105,6 +106,17 @@ function CreateKontakDarurat() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
type='number'
|
||||
defaultValue={kontakDaruratState.create.form.whatsapp}
|
||||
onChange={(val) => {
|
||||
kontakDaruratState.create.form.whatsapp = val.target.value;
|
||||
}}
|
||||
label={<Text fz="sm" fw="bold">Whatsapp</Text>}
|
||||
placeholder="Masukkan whatsapp"
|
||||
required
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold">Deskripsi</Text>
|
||||
<CreateEditor
|
||||
|
||||
@@ -117,7 +117,6 @@ function EditProgramKesehatan() {
|
||||
<Stack gap="md">
|
||||
{[
|
||||
{ label: 'Judul', key: 'name', placeholder: 'Masukkan judul' },
|
||||
{ label: 'Deskripsi Singkat', key: 'deskripsiSingkat', placeholder: 'Masukkan deskripsi singkat' },
|
||||
].map((field) => (
|
||||
<TextInput
|
||||
key={field.key}
|
||||
@@ -129,6 +128,16 @@ function EditProgramKesehatan() {
|
||||
/>
|
||||
))}
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi Singkat
|
||||
</Text>
|
||||
<EditEditor
|
||||
value={formData.deskripsiSingkat}
|
||||
onChange={(val) => handleChange('deskripsiSingkat', val)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text fz="sm" fw="bold" mb={6}>
|
||||
Deskripsi
|
||||
|
||||
@@ -73,7 +73,7 @@ function DetailProgramKesehatan() {
|
||||
|
||||
<Box>
|
||||
<Text fz="lg" fw="bold">Deskripsi Singkat</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data?.deskripsiSingkat || '-'}</Text>
|
||||
<Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data?.deskripsiSingkat || '-' }} />
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
|
||||
@@ -101,15 +101,17 @@ function CreateProgramKesehatan() {
|
||||
required
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
defaultValue={programKesehatanState.create.form.deskripsiSingkat}
|
||||
<Box>
|
||||
<Title order={6} mb={6}>
|
||||
Deskripsi Singkat
|
||||
</Title>
|
||||
<CreateEditor
|
||||
value={programKesehatanState.create.form.deskripsiSingkat}
|
||||
onChange={(val) => {
|
||||
programKesehatanState.create.form.deskripsiSingkat = val.target.value;
|
||||
programKesehatanState.create.form.deskripsiSingkat = val;
|
||||
}}
|
||||
label="Deskripsi Singkat"
|
||||
placeholder="Masukkan deskripsi singkat"
|
||||
required
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Title order={6} mb={6}>
|
||||
|
||||
@@ -26,7 +26,7 @@ export default function DetailResponden() {
|
||||
stateDetail.delete.byId(selectedId)
|
||||
setModalHapus(false)
|
||||
setSelectedId(null)
|
||||
router.push("/admin/ppid/ikm-desa-darmasaba/responden")
|
||||
router.push("/admin/landing-page/indeks-kepuasan-masyarakat/responden")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
'use client'
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
|
||||
import { IconCategory, IconListDetails } from '@tabler/icons-react';
|
||||
import colors from '@/con/colors';
|
||||
|
||||
@@ -58,6 +58,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
radius="lg"
|
||||
keepMounted={false}
|
||||
>
|
||||
<ScrollArea type="auto" offsetScrollbars>
|
||||
<TabsList
|
||||
p="sm"
|
||||
style={{
|
||||
@@ -82,6 +83,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
|
||||
</Tooltip>
|
||||
))}
|
||||
</TabsList>
|
||||
</ScrollArea>
|
||||
|
||||
{tabs.map((tab, i) => (
|
||||
<TabsPanel
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user