Senin, 19 May 2025 :

Yang Sudah Di Kerjakan
- Tampilan UI Admin di menu kesehatan

Yang Akan Dikerjakan:
- API Di Menu Desa
- Tampilan UI Admin Di Menu Keamanan

package.json

@@ -48,14 +48,16 @@
     "elysia": "^1.2.12",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^7.1.0",
+    "form-data": "^4.0.2",
     "framer-motion": "^12.4.1",
     "get-port": "^7.1.0",
     "jotai": "^2.12.3",
     "lodash": "^4.17.21",
     "motion": "^12.4.1",
-    "nanoid": "^5.1.0",
+    "nanoid": "^5.1.5",
     "next": "15.1.6",
     "next-view-transitions": "^0.3.4",
+    "node-fetch": "^3.3.2",
     "p-limit": "^6.2.0",
     "prisma": "^6.3.1",
     "react": "^19.0.0",
@@ -65,6 +67,7 @@
     "readdirp": "^4.1.1",
     "recharts": "^2.15.3",
     "swr": "^2.3.2",
+    "uuid": "^11.1.0",
     "valtio": "^2.1.3",
     "zod": "^3.24.3"
   },

prisma/data/desa/profile/profil_perbekel.json

@@ -0,0 +1,9 @@
+[
+    {
+        "id": "1",
+        "biodata": "<p>I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis. Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</p>",
+        "pengalaman": "<ul><li>2021 - 2027: Perbekel Desa Darmasaba</li><li>2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</li><li>2020 - Sekarang: Founder Ugawa Record Music Studio</li><li>2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</li></ul>",
+        "pengalamanOrganisasi": "<ul> <li>1996 – 1997: Ketua OSIS SMP Negeri 1 Abiansemal</li><li>1999 – 2000: Ketua OSIS SMA Negeri 1 Mengwi</li> <li>2008 – 2009: Ketua BEM Universitas Mahasaraswati Denpasar</li> <li>2008 – 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</li> <li>2020 – Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</li> <li>2021 – Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</li> <li>2023 – 2028: Komite Tetap Advokasi – Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</li> </ul>",
+        "programUnggulan": "<h3>Pemberdayaan Ekonomi dan UMKM</h3> <ul> <li>Pelatihan dan pendampingan UMKM lokal</li> <li>Program bantuan modal usaha bagi pelaku usaha kecil</li><li>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</li></ul>"
+    }
+]

prisma/data/desa/profile/profile_desa.json

@@ -0,0 +1,11 @@
+[
+    {
+        "id": "1",
+        "sejarah" : "<p>Asal – usul nama Darmasaba tertuang dalam lontar Usada Bali. Seperti di tulis dalam monografi Desa Darmasaba tahun 1980 silam, nama Darmasaba berkaitan dengan keturunan Danghyang Nirarta diceritakan, Sang kawi-wiku asal Daha (Jawa Timur) itu memiliki cucu bernama Ida Pedanda Sakti Manuaba yang tigggal di Desa Kendran Tegalalang Gianyar. Merasa tidak disenangi sang ayah, Ida Pedanda Sakti Manuaba pergi mengembara bersama dua orang pengiringnya. Pengembaraan sang pendeta sampai di pura Sarin Buana di Jimbaran. Saat mengadakan semedi di tempat ini sang pendeta melihat sinar api. Yang sangat jauh di utara. Timbul keinginan Ida Pedanda Manuaba untuk mengunjungi tempat itu. Sampailah sang Pedanda di pura Batan Bila Peguyangan. Disini Ida Pedanda Manuaba singgah menghadap Ida Pedanda Budha yang tinggal disana. Selanjutnya, kedua pendeta bersama-sama menuju arah utara dan singgah di Taman Cang Ana, sebuah taman milik Arya Lanang Blusung. Di tempat ini kedua pendeta bersama-sama melaksanakan semedi dan menetap untuk sementara waktu.</p>",
+        "visi" : "<p>Mewujudkan Desa Darmasaba yang sejahtera, unggul, religius, berbudaya, dan aman dengan berlandaskan Tri Hita Karana</p>",
+        "misi" : "<ul><li>Memperkokoh kerukunan hidup masyarakat dalam jalinan adat, budaya, olahraga, dan agama.</li><li>Meningkatkan kualitas pelayanan publik dengan menerapkan teknologi informasi dan komunikasi terintegrasi.</li><li>Meningkatkan tata kelola pemerintah desa dengan menerapkan prinsip good governance dan good clean government.</li><li>Meningkatkan kualitas pendidikan, kesehatan, Keluarga Berencana serta pengelolaan kependudukan.</li><li>Memperkuat usaha mikro kecil dan menengah (UMKM) dan BUMDesa sebagai pilar ekonomi masyarakat.</li><li>Mewujudkan tatanan kehidupan bermasyarakat yang menjunjung tinggi penegakan hukum dan HAM.</li><li>Meningkatkan perlindungan dan pengelolaan terhadap sumber daya alam dan lingkungan hidup.</li><li>Memperkuat daya saing desa melalui peningkatan mutu sumber daya manusia dan infrastruktur desa berbasis potensi desa.</li><li>Meningkatkan sinergisitas potensi budaya, pertanian dalam arti luas dan pariwisata.</li></ul>",
+        "lambang" : "<ul><li>Memperkokoh kerukunan hidup masyarakat dalam jalinan adat, budaya, olahraga, dan agama.</li><li>Meningkatkan kualitas pelayanan publik dengan menerapkan teknologi informasi dan komunikasi terintegrasi.</li><li>Meningkatkan tata kelola pemerintah desa dengan menerapkan prinsip good governance dan good clean government.</li><li>Meningkatkan kualitas pendidikan, kesehatan, Keluarga Berencana serta pengelolaan kependudukan.</li><li>Memperkuat usaha mikro kecil dan menengah (UMKM) dan BUMDesa sebagai pilar ekonomi masyarakat.</li><li>Mewujudkan tatanan kehidupan bermasyarakat yang menjunjung tinggi penegakan hukum dan HAM.</li><li>Meningkatkan perlindungan dan pengelolaan terhadap sumber daya alam dan lingkungan hidup.</li><li>Memperkuat daya saing desa melalui peningkatan mutu sumber daya manusia dan infrastruktur desa berbasis potensi desa.</li><li>Meningkatkan sinergisitas potensi budaya, pertanian dalam arti luas dan pariwisata.</li><li>Memperkuat daya saing desa melalui peningkatan mutu sumber daya manusia dan infrastruktur desa berbasis potensi desa.</li><li>Meningkatkan sinergisitas potensi budaya, pertanian dalam arti luas dan pariwisata.</li></ul>",
+        "maskot" : "<p>Pudak adalah bunga dari tanaman sejenis pandan (Pandanaceae). Bentuk bunga ini tersusun dalam beberapa lapisan, terbungkus oleh kelopak warna putih (semacam daun lonjong) yang ujungnya meruncing.</p><p>Bunga Pudak berwarna kuning dan akan terlihat jika kelopak atau pelepahnya telah mekar. Kekhasan dari bunga pudak, yaitu mempunyai aroma wangi yang semerbak nan lembut (tidak menyengat), dan dapat menebar keharuman sepanjang pagi atau pun sore hari. Tanaman ini dapat tumbuh di sepanjang pantai, aliran sungai, di atas batu-batu karang, dan juga di tanah ladang.</p><p>Dalam Kamus Jawa Kuna- Indonesia kata “Pudak” berarti bunga pandan atau Pandanus Moschatus (Mardiwarsito: 1981: 442). Selain itu bunga pudak juga dapat disebut ketaka atau ketaki (Mardiwarsito, 1981: 276). Sedangkan kata “Sategal” berasal dari kata dasar “Tegal” yang berarti ladang (Mardiwarsito, 1981: 593). Jadi Pudak Sategal dapat diartikan sebagai satu ladang luas yang dipenuhi bunga pudak dan menabar keharuman.</p><p>Pada sebuah kesempatan, Ida Pedanda Putu Pemaron menjelaskan mengenai makna dari istilah Pudak Sategal dengan sebuah analogi bahwa, sekuntum bunga pudak memiliki aroma wangi atau keharuman yang sangat kuat, apalagi jika satu ladang penuh bunga pudak, maka dapat dipastikan aroma keharumannya akan membumbung menyebar ke segala penjuru (Wawancara, 18 Mei 2019 di Geria Putra Mandara Kenderan, Tegallalang). “Pudak” ialah sebuah bunga yang memiliki aroma wangi atau keharuman yang semerbak, lembut, dan khas.</p><p>Garapan Tari Maskot Desa Darmasaba Sekar Pudak diwujudkan ke dalam bentuk tari kreasi yang ditarikan secara berkelompok dengan jumlah lima orang penari perempuan (putri).</p><p>Pemilihan penari perempuan dimaksudkan untuk mempresentasikan keindahan, keluwesan, dan keharuman dari bunga pudak. Sedangkan penetapan jumlah penari lima orang didasarkan atas pertimbangan kebutuhan koreografi agar dapat membentuk desain-desain komposisi lantai yang menarik dan dinamis, baik ketika ditarikan di area panggung yang luas atau pun area panggung yang kecil. Penyajian tari maskot ini dirancang dengan durasi waktu 9 menit.</p>",
+        "profilPerbekelId" : "1"
+    }
+]

prisma/data/ppid/daftar-informasi-publik-desa-darmasaba/daftarInformasi.json

@@ -0,0 +1,8 @@
+[
+    {
+        "id": "1",
+        "jenisInformasi": "Peraturan Desa",
+        "deskripsi": "Dokumen yang berisi kebijakan dan regulasi desa",
+        "tanggal": "15 Januari 2024"
+    }
+]

prisma/schema.prisma

@@ -208,6 +208,35 @@ model GrafikBerdasarkanUmur {
 }
 
 // ========================================= MENU DESA ========================================= //
+// ========================================= PROFILE DESA ========================================= //
+model ProfileDesa {
+  id               String          @id @default(cuid())
+  sejarah          String          @db.Text
+  visi             String          @db.Text
+  misi             String          @db.Text
+  lambang          String          @db.Text
+  maskot           String          @db.Text
+  ProfilPerbekel   ProfilPerbekel? @relation(fields: [profilPerbekelId], references: [id])
+  profilPerbekelId String?
+  createdAt        DateTime        @default(now())
+  updatedAt        DateTime        @updatedAt
+  deletedAt        DateTime        @default(now())
+  isActive         Boolean         @default(true)
+}
+
+model ProfilPerbekel {
+  id                   String        @id @default(cuid())
+  biodata              String        @db.Text
+  pengalaman           String        @db.Text
+  pengalamanOrganisasi String        @db.Text
+  programUnggulan      String        @db.Text
+  ProfileDesa          ProfileDesa[]
+  createdAt            DateTime      @default(now())
+  updatedAt            DateTime      @updatedAt
+  deletedAt            DateTime      @default(now())
+  isActive             Boolean       @default(true)
+}
+
 // ========================================= BERITA ========================================= //
 model Berita {
   id               String          @id @default(cuid())
@@ -553,3 +582,18 @@ model DoctorSign {
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
 }
+
+// === BARU
+
+model FileStorage {
+  id        String    @id @default(cuid())
+  name      String    @unique
+  realName  String
+  path      String
+  mimeType  String
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+  deletedAt DateTime? // nullable agar bisa menandakan belum dihapus
+  isActive  Boolean   @default(true)
+  link      String
+}

prisma/seed.ts

@@ -6,9 +6,16 @@ import caraMemperolehSalinanInformasi from './data/list-caraMemperolehSalinanInf
 import jenisInformasiDiminta from './data/list-jenisInfromasi.json'
 import layanan from './data/list-layanan.json'
 import potensi from './data/list-potensi.json'
-import profilePPID from './data/ppid/profile-ppid/profilePPid.json'
 import visiMisiPPID from './data/ppid/visi-misi-ppid/visimisiPPID.json'
 import dasarHukumPPID from './data/ppid/dasar-hukum-ppid/dasarhukumPPID.json'
+import profileDesa from './data/desa/profile/profile_desa.json'
+import profilePerbekel from './data/desa/profile/profil_perbekel.json'
+import profilePPID from './data/ppid/profile-ppid/profilePPid.json'
+import path from 'path'
+import fs from 'fs'
+import { mkdir, writeFile } from 'fs/promises'
+import { v4 as uuid } from 'uuid'
+
 (async () => {
     for (const l of layanan) {
         await prisma.layanan.upsert({
@@ -119,31 +126,57 @@ import dasarHukumPPID from './data/ppid/dasar-hukum-ppid/dasarhukumPPID.json'
     }
     console.log("cara memperoleh salinan informasi success ...")
 
-    for (const c of profilePPID) {
-        await prisma.profilePPID.upsert({
-            where: {
-                id: c.id
-            },
+    const seedProfilePPID = async () => {
+        const targetDir = path.resolve("public", "assets", "images", "ppid", "profile-ppid")
+        await mkdir(targetDir, { recursive: true })
+      
+        for (const c of profilePPID) {
+          let finalImageUrl = c.imageUrl
+      
+          // kalau imageUrl diawali dengan "/assets/images", artinya kita harus copy file dari seed-images
+          if (c.imageUrl.startsWith("/assets/images/")) {
+            const filename = path.basename(c.imageUrl) // misal "perbekel.png"
+            const seedImagePath = path.resolve("prisma", "seed-images", filename)
+      
+            // Buat nama baru yang unik agar tidak bentrok
+            const targetFilename = `${uuid()}_${filename}`
+            const targetPath = path.join(targetDir, targetFilename)
+      
+            // Salin file dari prisma/seed-images ke public/
+            const buffer = fs.readFileSync(seedImagePath)
+            await writeFile(targetPath, buffer)
+      
+            finalImageUrl = `/assets/images/ppid/profile-ppid/${targetFilename}`
+          }
+      
+          // Upsert ke database
+          await prisma.profilePPID.upsert({
+            where: { id: c.id },
             update: {
-                name: c.name,
-                biodata: c.biodata,
-                riwayat: c.riwayat,
-                pengalaman: c.pengalaman,
-                unggulan: c.unggulan,
-                imageUrl: c.imageUrl
+              name: c.name,
+              biodata: c.biodata,
+              riwayat: c.riwayat,
+              pengalaman: c.pengalaman,
+              unggulan: c.unggulan,
+              imageUrl: finalImageUrl,
             },
             create: {
-                id: c.id,
-                name: c.name,
-                biodata: c.biodata,
-                riwayat: c.riwayat,
-                pengalaman: c.pengalaman,
-                unggulan: c.unggulan,
-                imageUrl: c.imageUrl
-            }
-        })
-    }
-    console.log("profile PPID success ...")
+              id: c.id,
+              name: c.name,
+              biodata: c.biodata,
+              riwayat: c.riwayat,
+              pengalaman: c.pengalaman,
+              unggulan: c.unggulan,
+              imageUrl: finalImageUrl,
+            },
+          })
+        }
+      
+        console.log("✅ profilePPID seeded from JSON with image copying")
+      }
+      
+      await seedProfilePPID()
+
     
     for (const v of visiMisiPPID) {
         await prisma.visiMisiPPID.upsert({
@@ -181,6 +214,54 @@ import dasarHukumPPID from './data/ppid/dasar-hukum-ppid/dasarhukumPPID.json'
     }
     console.log("dasar hukum PPID success ...")
 
+    for (const v of profileDesa) {
+        await prisma.profileDesa.upsert({
+            where: {
+                id: v.id,
+            },
+            update: {
+                sejarah: v.sejarah,
+                visi: v.visi,
+                misi: v.misi,
+                lambang: v.lambang,
+                maskot: v.maskot,
+                profilPerbekelId: v.profilPerbekelId
+            },
+            create: {
+                id: v.id,
+                sejarah: v.sejarah,
+                visi: v.visi,
+                misi: v.misi,
+                lambang: v.lambang,
+                maskot: v.maskot,
+                profilPerbekelId: v.profilPerbekelId
+            }
+        })
+    }
+    console.log("profile desa success ...")
+
+    for (const v of profilePerbekel) {
+        await prisma.profilPerbekel.upsert({
+            where: {
+                id: v.id,
+            },
+            update: {
+                biodata: v.biodata,
+                pengalaman: v.pengalaman,
+                pengalamanOrganisasi: v.pengalamanOrganisasi,
+                programUnggulan: v.programUnggulan
+            },
+            create: {
+                id: v.id,
+                biodata: v.biodata,
+                pengalaman: v.pengalaman,
+                pengalamanOrganisasi: v.pengalamanOrganisasi,
+                programUnggulan: v.programUnggulan
+            }
+        })
+    }
+    console.log("profile perbekel success ...")
+
 })().then(() => prisma.$disconnect()).catch((e) => {
     console.error(e)
     prisma.$disconnect()

src/app/admin/(dashboard)/_state/desa/profile.ts

@@ -0,0 +1,239 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+/* Sejarah */
+const templateFormSejarahForm = z.object({
+    sejarah: z.string().min(3, "Sejarah minimal 3 karakter"),
+})
+
+type SejarahForm = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        sejarah: true;
+    }
+}>
+
+const Sejarah = proxy({
+    findById: {
+        data: null as SejarahForm | null,
+        loading: false,
+        initialize() {
+            Sejarah.findById.data = {
+                id: "",
+                sejarah: "",
+            } as SejarahForm;
+        },
+        async load(id: string) {
+            try {
+                Sejarah.findById.loading = true;
+                const res = await ApiFetch.api.desa.profile["find-by-id"].get({
+                    query: { id },
+                });
+                if (res.status === 200) {
+                    Sejarah.findById.data = {
+                        id: id,
+                        sejarah: res.data?.data?.sejarah ?? ""
+                    };
+                } else {
+                    toast.error("Gagal mengambil data sejarah");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat mengambil data sejarah");
+            } finally {
+                Sejarah.findById.loading = false;
+            }
+        }
+    },
+    update: {
+        loading: false,
+        async save(data: SejarahForm) {
+            const cek = templateFormSejarahForm.safeParse(data);
+            if (!cek.success) {
+                const errors = cek.error.issues
+                .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+                .join(", ");
+                toast.error(`Form tidak valid: ${errors}`);
+                return;
+            }
+            try {
+                Sejarah.update.loading = true;
+                const res = await ApiFetch.api.desa.profile.sejarah["update"].post(data);
+                if (res.status === 200) {
+                    toast.success("Berhasil update sejarah");
+                    await Sejarah.findById.load(data.id);
+                } else {
+                    toast.error("Gagal update sejarah");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat update sejarah");
+            } finally {
+                Sejarah.update.loading = false;
+            }
+        }
+    }
+})
+
+/* Visi Misi Desa */
+const templateFormVisiForm = z.object({
+    visi: z.string().min(3, "Visi minimal 3 karakter"),
+    misi: z.string().min(3, "Misi minimal 3 karakter")
+})
+
+type VisiMisiDesaForm = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        visi: true;
+        misi: true;
+    }
+}>
+
+const VisiMisiDesa = proxy({
+    findById: {
+        data: null as VisiMisiDesaForm | null,
+        loading: false,
+        initialize() {
+            VisiMisiDesa.findById.data = {
+                id: "",
+                visi: "",
+                misi: ""
+            } as VisiMisiDesaForm;
+        },
+        async load(id: string) {
+            try {
+                VisiMisiDesa.findById.loading = true;
+                const res = await ApiFetch.api.desa.profile["find-by-id"].get({
+                    query: { id },
+                });
+                if (res.status === 200) {
+                    VisiMisiDesa.findById.data = {
+                        id: id,
+                        visi: res.data?.data?.visi ?? "",
+                        misi: res.data?.data?.misi ?? ""
+                    };
+                } else {
+                    toast.error("Gagal mengambil data visi misi");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat mengambil data visi misi");
+            } finally {
+                VisiMisiDesa.findById.loading = false;
+            }
+        }
+    },
+    update: {
+        loading: false,
+        async save(data: VisiMisiDesaForm) {
+            const cek = templateFormVisiForm.safeParse(data);
+            if (!cek.success) {
+                const errors = cek.error.issues
+                .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+                .join(", ");
+                toast.error(`Form tidak valid: ${errors}`);
+                return;
+            }
+            try {
+                VisiMisiDesa.update.loading = true;
+                const res = await ApiFetch.api.desa.profile.visimisiDesa["update"].post(data);
+                if (res.status === 200) {
+                    toast.success("Berhasil update visi misi");
+                    await VisiMisiDesa.findById.load(data.id);
+                } else {
+                    toast.error("Gagal update visi");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat update visi misi");
+            } finally {
+                VisiMisiDesa.update.loading = false;
+            }
+        }
+    }
+})
+/* Lambang Desa */
+const templateFormLambangDesaForm = z.object({
+    lambang: z.string().min(3, "Lambang minimal 3 karakter"),
+})
+
+type LambangDesaForm = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        lambang: true;
+    }
+}>
+
+const LambangDesa = proxy({
+    findById: {
+        data: null as LambangDesaForm | null,
+        loading: false,
+        initialize() {
+            LambangDesa.findById.data = {
+                id: "",
+                lambang: "",
+            } as LambangDesaForm;
+        },
+        async load(id: string) {
+            try {
+                LambangDesa.findById.loading = true;
+                const res = await ApiFetch.api.desa.profile["find-by-id"].get({
+                    query: { id },
+                });
+                if (res.status === 200) {
+                    LambangDesa.findById.data = {
+                        id: id,
+                        lambang: res.data?.data?.lambang ?? ""
+                    };
+                } else {
+                    toast.error("Gagal mengambil data lambang desa");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat mengambil data lambang desa");
+            } finally {
+                LambangDesa.findById.loading = false;
+            }
+        }
+    },
+    update: {
+        loading: false,
+        async save(data: LambangDesaForm) {
+            const cek = templateFormLambangDesaForm.safeParse(data);
+            if (!cek.success) {
+                const errors = cek.error.issues
+                .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+                .join(", ");
+                toast.error(`Form tidak valid: ${errors}`);
+                return;
+            }
+            try {
+                LambangDesa.update.loading = true;
+                const res = await ApiFetch.api.desa.profile.lambangDesa["update"].post(data);
+                if (res.status === 200) {
+                    toast.success("Berhasil update lambang desa");
+                    await LambangDesa.findById.load(data.id);
+                } else {
+                    toast.error("Gagal update lambang desa");
+                }
+            } catch (error) {
+                console.error((error as Error).message);
+                toast.error("Terjadi kesalahan saat update lambang desa");
+            } finally {
+                LambangDesa.update.loading = false;
+            }
+        }
+    }
+});
+
+const stateProfileDesa = {
+    Sejarah,
+    VisiMisiDesa,
+    LambangDesa,
+};
+
+
+export default stateProfileDesa;

src/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik.ts

@@ -56,6 +56,7 @@ const caraMemperolehSalinanInformasi = proxy({
         }
     }
 })
+console.log(caraMemperolehSalinanInformasi)
 
 type PermohonanInformasiPublikForm = Prisma.PermohonanInformasiPublikGetPayload<{
     select: {
@@ -70,12 +71,12 @@ type PermohonanInformasiPublikForm = Prisma.PermohonanInformasiPublikGetPayload<
     };
 }>;
 
-const permohonanInformasiPublikForm = proxy({
+const statepermohonanInformasiPublik = proxy({
     create: {
         form: {} as PermohonanInformasiPublikForm,
         loading: false,
         async create(){
-            const cek = templateForm.safeParse(permohonanInformasiPublikForm.create.form);
+            const cek = templateForm.safeParse(statepermohonanInformasiPublik.create.form);
             if(!cek.success) {
                 const err = `[${cek.error.issues
                     .map((v) => `${v.path.join(".")}`)
@@ -83,38 +84,42 @@ const permohonanInformasiPublikForm = proxy({
                 return toast.error(err);
             }
             try {
-                permohonanInformasiPublikForm.create.loading = true;
-                const res = await ApiFetch.api.ppid.permohonaninformasipublik["create"].post(permohonanInformasiPublikForm.create.form);
+                statepermohonanInformasiPublik.create.loading = true;
+                const res = await ApiFetch.api.ppid.permohonaninformasipublik["create"].post(statepermohonanInformasiPublik.create.form);
                 if (res.status === 200) {
-                    permohonanInformasiPublikForm.findMany.load();
+                    statepermohonanInformasiPublik.findMany.load();
                     return toast.success("success create");
                 }
                 return toast.error("failed create");
             } catch (error) {
                 console.log((error as Error).message);
             } finally {
-                permohonanInformasiPublikForm.create.loading = false;
+                statepermohonanInformasiPublik.create.loading = false;
             }
         }
     },
     findMany: {
         data: null as
-        | Prisma.PermohonanInformasiPublikGetPayload<{ omit: { isActive: true } }>[]
+        | Prisma.PermohonanInformasiPublikGetPayload<{ include: {
+            caraMemperolehSalinanInformasi: true,
+            jenisInformasiDiminta: true,
+            caraMemperolehInformasi: true,
+        } }>[]
         | null,
         async load() {
             const res = await ApiFetch.api.ppid.permohonaninformasipublik["find-many"].get();
             if (res.status === 200) {
-                permohonanInformasiPublikForm.findMany.data = res.data?.data ?? [];
+                statepermohonanInformasiPublik.findMany.data = res.data?.data ?? [];
             }
         }
     }
 })
 
-const statePermohonanInformasi = proxy({
-    permohonanInformasiPublikForm,
+const statepermohonanInformasiPublikForm = proxy({
+    statepermohonanInformasiPublik,
     jenisInformasiDiminta,
     caraMemperolehInformasi,
-    caraMemperolehSalinanInformasi
+    caraMemperolehSalinanInformasi,
 })
 
-export default statePermohonanInformasi;
+export default statepermohonanInformasiPublikForm;

src/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi.ts

@@ -20,12 +20,12 @@ type PermohonanKeberatanInformasiForm = Prisma.FormulirPermohonanKeberatanGetPay
     };
 }>;
 
-const permohonanKeberatanInformasiForm = proxy({
+const permohonanKeberatanInformasi = proxy({
     create: {
         form: {} as PermohonanKeberatanInformasiForm,
         loading: false,
         async create(){
-            const cek = templateForm.safeParse(permohonanKeberatanInformasiForm.create.form);
+            const cek = templateForm.safeParse(permohonanKeberatanInformasi.create.form);
             if(!cek.success) {
                 const err = `[${cek.error.issues
                     .map((v) => `${v.path.join(".")}`)
@@ -33,17 +33,17 @@ const permohonanKeberatanInformasiForm = proxy({
                 return toast.error(err);
             }
             try {
-                permohonanKeberatanInformasiForm.create.loading = true;
-                const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["create"].post(permohonanKeberatanInformasiForm.create.form);
+                permohonanKeberatanInformasi.create.loading = true;
+                const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["create"].post(permohonanKeberatanInformasi.create.form);
                 if (res.status === 200) {
-                    permohonanKeberatanInformasiForm.findMany.load();
+                    permohonanKeberatanInformasi.findMany.load();
                     return toast.success("success create");
                 }
                 return toast.error("failed create");
             } catch (error) {
                 console.log((error as Error).message);
             } finally {
-                permohonanKeberatanInformasiForm.create.loading = false;
+                permohonanKeberatanInformasi.create.loading = false;
             }
         },
     },
@@ -54,15 +54,11 @@ const permohonanKeberatanInformasiForm = proxy({
         async load() {
             const res = await ApiFetch.api.ppid.permohonankeberataninformasipublik["find-many"].get();
             if (res.status === 200) {
-                permohonanKeberatanInformasiForm.findMany.data = res.data?.data ?? [];
+                permohonanKeberatanInformasi.findMany.data = res.data?.data ?? [];
             }
         }
     }
 });
 
-const statePermohonanKeberatan = proxy({
-    permohonanKeberatanInformasiForm,
-})
-
-export default statePermohonanKeberatan;
+export default permohonanKeberatanInformasi;
 

src/app/admin/(dashboard)/_state/ppid/profile_ppid/profile_PPID.ts

@@ -4,7 +4,9 @@ import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 
-// Schema validasi form
+/**
+ * Schema validasi form ProfilePPID menggunakan Zod.
+ */
 const templateForm = z.object({
   name: z.string().min(3, "Nama minimal 3 karakter"),
   biodata: z.string().min(3, "Biodata minimal 3 karakter"),
@@ -13,7 +15,9 @@ const templateForm = z.object({
   unggulan: z.string().min(3, "Unggulan minimal 3 karakter"),
 });
 
-// Type ambil dari Prisma
+/**
+ * Tipe data ProfilePPID yang digunakan dalam form dan API, berdasarkan Prisma schema.
+ */
 type ProfilePPIDForm = Prisma.ProfilePPIDGetPayload<{
   select: {
     id: true;
@@ -26,11 +30,23 @@ type ProfilePPIDForm = Prisma.ProfilePPIDGetPayload<{
   };
 }>;
 
-// Proxy utama
+/**
+ * State utama ProfilePPID yang mencakup fitur:
+ * - Ambil data berdasarkan ID
+ * - Update data
+ * - Upload gambar
+ */
 const stateProfilePPID = proxy({
+  /**
+   * Bagian untuk ambil data berdasarkan ID
+   */
   findById: {
     data: null as ProfilePPIDForm | null,
     loading: false,
+
+    /**
+     * Inisialisasi data kosong ke dalam state.
+     */
     initialize() {
       stateProfilePPID.findById.data = {
         id: '',
@@ -39,15 +55,21 @@ const stateProfilePPID = proxy({
         riwayat: '',
         pengalaman: '',
         unggulan: '',
-        imageUrl:''
+        imageUrl: ''
       } as ProfilePPIDForm;
     },
+
+    /**
+     * Mengambil data profil berdasarkan ID.
+     * @param {string} id - ID dari profile yang ingin diambil.
+     */
     async load(id: string) {
       try {
         stateProfilePPID.findById.loading = true;
         const res = await ApiFetch.api.ppid.profileppid["find-by-id"].get({
           query: { id },
         });
+
         if (res.status === 200) {
           stateProfilePPID.findById.data = res.data?.data ?? null;
         } else {
@@ -62,10 +84,19 @@ const stateProfilePPID = proxy({
     },
   },
 
+  /**
+   * Bagian untuk update data profile
+   */
   update: {
     loading: false,
+
+    /**
+     * Melakukan validasi dan menyimpan perubahan data profile ke server.
+     * @param {ProfilePPIDForm} data - Data profil yang akan disimpan.
+     */
     async save(data: ProfilePPIDForm) {
       const cek = templateForm.safeParse(data);
+
       if (!cek.success) {
         const errors = cek.error.issues
           .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
@@ -77,6 +108,7 @@ const stateProfilePPID = proxy({
       try {
         stateProfilePPID.update.loading = true;
         const res = await ApiFetch.api.ppid.profileppid["update"].post(data);
+
         if (res.status === 200) {
           toast.success("Berhasil update profile");
           await stateProfilePPID.findById.load(data.id);
@@ -91,13 +123,24 @@ const stateProfilePPID = proxy({
       }
     },
   },
+
+  /**
+   * Bagian untuk upload gambar profil
+   */
   uploadImage: {
     loading: false,
+
+    /**
+     * Mengunggah gambar profil berdasarkan ID.
+     * @param {File} file - File gambar yang akan diunggah.
+     * @param {string} id - ID dari profil yang akan diperbarui gambarnya.
+     */
     async save(file: File, id: string) {
       if (!file || !id) {
         toast.error("File atau ID harus disertakan");
         return;
       }
+
       try {
         stateProfilePPID.uploadImage.loading = true;
 
@@ -106,6 +149,7 @@ const stateProfilePPID = proxy({
         form.append("id", id);
 
         const res = await ApiFetch.api.ppid.profileppid["edit-img"].post(form);
+
         if (res.status === 200) {
           toast.success("Berhasil mengunggah gambar");
           await stateProfilePPID.findById.load(id);
@@ -118,8 +162,11 @@ const stateProfilePPID = proxy({
       } finally {
         stateProfilePPID.uploadImage.loading = false;
       }
-    }
-  }
+    },
+  },
 });
 
+/**
+ * Ekspor state utama ProfilePPID untuk digunakan di komponen lain.
+ */
 export default stateProfilePPID;

src/app/admin/(dashboard)/desa/_com/desaEditor.tsx

@@ -0,0 +1,93 @@
+'use client'
+import colors from '@/con/colors';
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+
+const content =
+  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
+
+export function DesaEditor({showSubmit = true} : {
+  showSubmit: boolean
+}) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content,
+  });
+
+  return (
+    <Stack>
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button
+          mt={10}
+          bg={colors['blue-button']}
+        >
+          Submit
+        </Button>
+      )}
+    </Stack>
+  );
+}

src/app/admin/(dashboard)/desa/_com/desaEditorText.tsx

@@ -0,0 +1,95 @@
+'use client'
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+
+
+function DesaEditorText({ onSubmit, onChange, showSubmit = true, initialContent = '', }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean,
+  initialContent?: string }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content: initialContent,
+    onUpdate : ({editor}) => {
+      onChange(editor.getHTML())
+    }
+  });
+
+  return (
+    <Stack>
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button onClick={() => {
+          if (!editor) return
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
+    </Stack>
+  );
+}
+
+export default DesaEditorText;

src/app/admin/(dashboard)/desa/berita/page.tsx

@@ -1,62 +1,75 @@
 'use client'
-import { Center, Group, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Center, Group, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { Prisma } from '@prisma/client';
 import { IconImageInPicture } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
 import stateDashboardBerita from '../../_state/desa/berita';
 import { BeritaEditor } from './_com/BeritaEditor';
+import colors from '@/con/colors';
 
 function Page() {
   return (
-    <Stack>
-      <SimpleGrid cols={{base: 1, md: 2}}>
+    <Box>
+      <Title order={3}>Berita</Title>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
         <BeritaCreate />
         <BeritaList />
       </SimpleGrid>
-    </Stack>
+    </Box>
   );
 }
 
+function BeritaCreate() {
+  const beritaState = useProxy(stateDashboardBerita)
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <SelectCategory onChange={(val) => {
+            beritaState.berita.create.form.katagoryBeritaId = val.id
+          }} />
+          <TextInput onChange={(val) => {
+            beritaState.berita.create.form.judul = val.target.value
+          }} label={"Judul"} placeholder='masukkan judul' />
+          <TextInput onChange={(val) => {
+            beritaState.berita.create.form.deskripsi = val.target.value
+          }} label={"Deskripsi"} placeholder='masukkan deskripsi' />
+          <Center w={200} h={200} bg={"gray"}>
+            <IconImageInPicture />
+          </Center>
+          <BeritaEditor onSubmit={(val) => {
+
+            beritaState.berita.create.form.content = val
+            beritaState.berita.create.create()
+          }} />
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
 function BeritaList() {
   const beritaState = useProxy(stateDashboardBerita)
   useShallowEffect(() => {
     beritaState.berita.findMany.load()
   }, [])
 
-  if (!beritaState.berita.findMany.data) return <Stack>
+  if (!beritaState.berita.findMany.data) return <Stack py={10}>
     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
   </Stack>
-  return <Stack>
-    <Text>News List</Text>
-    {beritaState.berita.findMany.data?.map((item) => (
-      <Text key={item.id}>{item.judul}</Text>
-    ))}
-  </Stack>
-}
-
-function BeritaCreate() {
-  const beritaState = useProxy(stateDashboardBerita)
-  return <Stack gap={"md"}>
-    <Text>Create Some News</Text>
-    <SelectCategory onChange={(val) => {
-      beritaState.berita.create.form.katagoryBeritaId = val.id
-    }} />
-    <TextInput onChange={(val) => {
-      beritaState.berita.create.form.judul = val.target.value
-    }} label={"Judul"} placeholder='masukkan judul' />
-    <TextInput onChange={(val) => {
-      beritaState.berita.create.form.deskripsi = val.target.value
-    }} label={"Deskripsi"} placeholder='masukkan deskripsi' />
-    <Center w={200} h={200} bg={"gray"}>
-      <IconImageInPicture />
-    </Center>
-    <BeritaEditor onSubmit={(val) => {
-
-      beritaState.berita.create.form.content = val
-      beritaState.berita.create.create()
-    }} />
-  </Stack>
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>List Berita</Text>
+          {beritaState.berita.findMany.data?.map((item) => (
+            <Text key={item.id}>{item.judul}</Text>
+          ))}
+        </Stack>
+      </Paper>
+    </Box>
+  )
 }
 
 function SelectCategory({ onChange }: {
@@ -74,7 +87,7 @@ function SelectCategory({ onChange }: {
 
   if (!beritaState.category.findMany.data) return <Skeleton h={40} />
   return <Group>
-    <Select placeholder='pilih katagori' label={"select katagori"} data={beritaState.category.findMany.data.map((item) => ({
+    <Select placeholder='pilih katagori' label={<Text fz={"sm"} fw={"bold"}>Pilih Kategori</Text>} data={beritaState.category.findMany.data.map((item) => ({
       value: item.id,
       label: item.name
     }))} onChange={(v) => {

src/app/admin/(dashboard)/desa/gallery/page.tsx

@@ -1,11 +1,35 @@
-import React from 'react';
+import colors from '@/con/colors';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { IconPhoto, IconVideo } from '@tabler/icons-react';
+import Foto from './ui/foto/page';
+import Video from './ui/video/page';
 
-function Page() {
+function Gallery() {
   return (
-    <div>
-      Gallery
-    </div>
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={3}>Gallery</Title>
+        <Tabs color={colors['blue-button']} variant="pills" defaultValue="foto">
+          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+            <TabsTab value="foto" leftSection={<IconPhoto size={12} />}>
+              Foto
+            </TabsTab>
+            <TabsTab value="video" leftSection={<IconVideo size={12} />}>
+              Video
+            </TabsTab>
+          </TabsList>
+
+          <TabsPanel value="foto">
+            <Foto/>
+          </TabsPanel>
+
+          <TabsPanel value="video">
+            <Video/>
+          </TabsPanel>
+        </Tabs>
+      </Stack>
+    </Box>
   );
 }
 
-export default Page;
+export default Gallery;

src/app/admin/(dashboard)/desa/gallery/ui/foto/listPage.tsx

@@ -0,0 +1,17 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListFoto() {
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={3}>List Foto</Title>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ListFoto;

src/app/admin/(dashboard)/desa/gallery/ui/foto/page.tsx

@@ -0,0 +1,52 @@
+import colors from '@/con/colors';
+import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconUpload } from '@tabler/icons-react';
+import { DesaEditor } from '../../../_com/desaEditor';
+import ListFoto from './listPage';
+
+function Foto() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Foto</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Tanggal Foto</Text>}
+                placeholder="2022-01-01"
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Judul Foto</Text>}
+                placeholder="Judul Foto"
+              />
+              <Text fz={"sm"} fw={"bold"}>Upload Foto</Text>
+              <Box bg={colors['BG-trans']} p={"md"}>
+                <Center>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Center>
+              </Box>
+              <Box>
+                <Text fz={"sm"} fw={"bold"}>Deskripsi Foto</Text>
+                <DesaEditor
+                  showSubmit={false}
+                />
+              </Box>
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <ListFoto/>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default Foto;

src/app/admin/(dashboard)/desa/gallery/ui/video/listPage.tsx

@@ -0,0 +1,17 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListVideo() {
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={3}>List Video</Title>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ListVideo;

src/app/admin/(dashboard)/desa/gallery/ui/video/page.tsx

@@ -0,0 +1,52 @@
+import colors from '@/con/colors';
+import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconUpload } from '@tabler/icons-react';
+import { DesaEditor } from '../../../_com/desaEditor';
+import ListVideo from './listPage';
+
+function Video() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Video</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Tanggal Video</Text>}
+                placeholder="2022-01-01"
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Judul Video</Text>}
+                placeholder="Judul Video"
+              />
+              <Text fz={"sm"} fw={"bold"}>Upload Video</Text>
+              <Box bg={colors['BG-trans']} p={"md"}>
+                <Center>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Center>
+              </Box>
+              <Box>
+                <Text fz={"sm"} fw={"bold"}>Deskripsi Video</Text>
+                <DesaEditor
+                  showSubmit={false}
+                />
+              </Box>
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <ListVideo/>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default Video;

src/app/admin/(dashboard)/desa/layanan/page.tsx

@@ -1,11 +1,48 @@
-import React from 'react';
+import colors from '@/con/colors';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import SuratKeterangan from './ui/surat_keterangan/page';
+import PerizinanUsaha from './ui/perizinan_usaha/page';
+import TelunjukSaktiDesa from './ui/telunjuk_sakti_desa/page';
+import PendudukNonPermanent from './ui/penduduk_non_permanent/page';
 
 function Page() {
   return (
-    <div>
-      Layanan
-    </div>
+    <Box py={10}>
+      <Stack >
+        <Title order={3}>Layanan</Title>
+        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Pelayanan Surat Keterangan"}>
+          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+            <TabsTab value="Pelayanan Surat Keterangan">
+              Pelayanan Surat Keterangan
+            </TabsTab>
+            <TabsTab value="Pelayanan Perizinan Berusaha">
+              Pelayanan Perizinan Berusaha
+            </TabsTab>
+            <TabsTab value="Pelayanan Telunjuk Sakti Desa">
+              Pelayanan Telunjuk Sakti Desa
+            </TabsTab>
+            <TabsTab value="Pelayanan Penduduk Non-Permanent">
+              Pelayanan Penduduk Non-Permanent
+            </TabsTab>
+          </TabsList>
+
+          <TabsPanel value="Pelayanan Surat Keterangan">
+            <SuratKeterangan />
+          </TabsPanel>
+          <TabsPanel value="Pelayanan Perizinan Berusaha">
+            <PerizinanUsaha />
+          </TabsPanel>
+          <TabsPanel value="Pelayanan Telunjuk Sakti Desa">
+            <TelunjukSaktiDesa />
+          </TabsPanel>
+          <TabsPanel value="Pelayanan Penduduk Non-Permanent">
+            <PendudukNonPermanent />
+          </TabsPanel>
+        </Tabs>
+      </Stack>
+    </Box>
   );
 }
 
 export default Page;
+

src/app/admin/(dashboard)/desa/layanan/ui/penduduk_non_permanent/listPage.tsx

@@ -0,0 +1,17 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListPendudukNonPermanent() {
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Title order={3}>List Penduduk Non-Permanent</Title>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ListPendudukNonPermanent;

src/app/admin/(dashboard)/desa/layanan/ui/penduduk_non_permanent/page.tsx

@@ -0,0 +1,35 @@
+import colors from '@/con/colors';
+import { Box, SimpleGrid, Paper, Stack, Title, Group, Button, Text } from '@mantine/core';
+import React from 'react';
+import { DesaEditor } from '../../../_com/desaEditor';
+import ListPendudukNonPermanent from './listPage';
+
+function PendudukNonPermanent() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Penduduk Non-Permanent</Title>
+              <Text fw={"bold"}>Deskripsi Penduduk Non-Permanent</Text>
+              <DesaEditor showSubmit={false} />
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <ListPendudukNonPermanent />
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default PendudukNonPermanent;
+

src/app/admin/(dashboard)/desa/layanan/ui/perizinan_usaha/listPage.tsx

@@ -0,0 +1,17 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListPerizinanUsaha() {
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={3}>List Perizinan Usaha</Title>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ListPerizinanUsaha;

src/app/admin/(dashboard)/desa/layanan/ui/perizinan_usaha/page.tsx

@@ -0,0 +1,40 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import React from 'react';
+import ListPerizinanUsaha from './listPage';
+import { DesaEditor } from '../../../_com/desaEditor';
+
+function PerizinanUsaha() {
+  return (
+    <Box py={10}>
+      <Stack gap={"xs"}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Title order={3}>Pelayanan Perizinan Usaha</Title>
+                <Box>
+                  <Text fz={"sm"} fw={"bold"}>Deskripsi Perizinan Usaha</Text>
+                  <DesaEditor
+                    showSubmit={false}
+                  />
+                </Box>
+                <Group>
+                  <Button
+                    mt={10}
+                    bg={colors['blue-button']}
+                  >
+                    Submit
+                  </Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Box>
+         <ListPerizinanUsaha />
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default PerizinanUsaha;

src/app/admin/(dashboard)/desa/layanan/ui/surat_keterangan/listPage.tsx

@@ -0,0 +1,17 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListSuratKeterangan() {
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Title order={3}>List Surat Keterangan</Title>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ListSuratKeterangan;

src/app/admin/(dashboard)/desa/layanan/ui/surat_keterangan/page.tsx

@@ -0,0 +1,48 @@
+import colors from '@/con/colors';
+import { Box, SimpleGrid, Paper, Stack, Title, Button, Group, TextInput, Text, Center, Flex } from '@mantine/core';
+import { IconUpload } from '@tabler/icons-react';
+import React from 'react';
+import ListSuratKeterangan from './listPage';
+
+function SuratKeterangan() {
+  return (
+    <Box py={10}>
+      <Stack gap={"xs"}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Title order={3}>Pelayanan Surat Keterangan</Title>
+                <TextInput
+                  label={<Text fz={"sm"} fw={"bold"}>Nama Surat Keterangan</Text>}
+                  placeholder='masukkan nama surat keterangan'
+                />
+                <Text fz={"sm"} fw={"bold"}>Upload Gambar Surat Keterangan</Text>
+                <Box bg={colors['BG-trans']} p={"md"}>
+                  <Center>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Center>
+                </Box>
+                <Flex>
+                  <Text fz={"xs"} c={"red"}>*</Text>
+                  <Text fz={"xs"} c={"dimmed"} fw={"bold"}>Upload foto untuk konten surat keterangan</Text>
+                </Flex>
+                <Group>
+                  <Button
+                    mt={10}
+                    bg={colors['blue-button']}
+                  >
+                    Submit
+                  </Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Box>
+          <ListSuratKeterangan />
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default SuratKeterangan;

src/app/admin/(dashboard)/desa/layanan/ui/telunjuk_sakti_desa/listPage.tsx

@@ -0,0 +1,17 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListTelunjukSaktiDesa() {
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Title order={3}>List Telunjuk Sakti Desa</Title>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ListTelunjukSaktiDesa;

src/app/admin/(dashboard)/desa/layanan/ui/telunjuk_sakti_desa/page.tsx

@@ -0,0 +1,36 @@
+import colors from '@/con/colors';
+import { Box, SimpleGrid, Paper, Stack, Title, Group, Button, Text } from '@mantine/core';
+import React from 'react';
+import { DesaEditor } from '../../../_com/desaEditor';
+import ListTelunjukSaktiDesa from './listPage';
+
+function TelunjukSaktiDesa() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Telunjuk Sakti Desa</Title>
+              <Box>
+                <Text fz={"sm"} fw={"bold"}>Deskripsi Telunjuk Sakti Desa</Text>
+                <DesaEditor showSubmit={false} />
+              </Box>
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <ListTelunjukSaktiDesa />
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default TelunjukSaktiDesa;

src/app/admin/(dashboard)/desa/penghargaan/page.tsx

@@ -1,10 +1,33 @@
+import colors from '@/con/colors';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import React from 'react';
+import Penghargaan from './ui/penghargaan/page';
+import GambarPerhargaan from './ui/gambar_perhargaan/page';
 
 function Page() {
   return (
-    <div>
-      Penghargaan
-    </div>
+    <Box py={10}>
+      <Stack>
+        <Title order={3}>Penghargaan</Title>
+        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Penghargaan"}>
+          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+            <TabsTab value="Penghargaan">
+              Penghargaan
+            </TabsTab>
+            <TabsTab value="Gambar Penghargaan">
+              Gambar Penghargaan
+            </TabsTab>
+          </TabsList>
+
+          <TabsPanel value="Penghargaan">
+            <Penghargaan/>
+          </TabsPanel>
+          <TabsPanel value="Gambar Penghargaan">
+            <GambarPerhargaan/>
+          </TabsPanel>
+        </Tabs>
+      </Stack>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/desa/penghargaan/ui/gambar_perhargaan/listPage.tsx

@@ -0,0 +1,17 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListGambarPenghargaan() {
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Title order={3}>List Gambar Penghargaan</Title>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ListGambarPenghargaan;

src/app/admin/(dashboard)/desa/penghargaan/ui/gambar_perhargaan/page.tsx

@@ -0,0 +1,50 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Title, Text, Group, Button, TextInput, Center } from '@mantine/core';
+import React from 'react';
+import { DesaEditor } from '../../../_com/desaEditor';
+import ListGambarPenghargaan from './listPage';
+import { IconUpload } from '@tabler/icons-react';
+
+
+function GambarPerhargaan() {
+  return (
+    <Box py={10}>
+      <Stack gap={"xs"}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Title order={3}>Tambah Gambar Penghargaan</Title>
+                <TextInput
+                  label="Judul Gambar Penghargaan"
+                  placeholder='masukkan judul gambar penghargaan'
+                />
+                <Text fw={"bold"}>Deskripsi Gambar Penghargaan</Text>
+                <DesaEditor showSubmit={false} />
+                <Box>
+                  <Text fw={"bold"}>Upload Gambar Penghargaan</Text>
+                  <Box bg={colors['BG-trans']} p={"md"}>
+                    <Center>
+                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                    </Center>
+                  </Box>
+                </Box>
+                <Group>
+                  <Button
+                    mt={10}
+                    bg={colors['blue-button']}
+                  >
+                    Submit
+                  </Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Box>
+          <ListGambarPenghargaan />
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default GambarPerhargaan;

src/app/admin/(dashboard)/desa/penghargaan/ui/penghargaan/listPage.tsx

@@ -0,0 +1,17 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListPenghargaan() {
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Title order={3}>List Penghargaan</Title>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ListPenghargaan;

src/app/admin/(dashboard)/desa/penghargaan/ui/penghargaan/page.tsx

@@ -0,0 +1,40 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import React from 'react';
+import { DesaEditor } from '../../../_com/desaEditor';
+import ListPenghargaan from './listPage';
+
+function Penghargaan() {
+  return (
+    <Box py={10}>
+      <Stack>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Title order={3}>Penghargaan</Title>
+                <Box>
+                  <Text fz={"sm"} fw={"bold"}>Deskripsi Penghargaan</Text>
+                  <DesaEditor
+                    showSubmit={false}
+                  />
+                </Box>
+                <Group>
+                  <Button
+                    mt={10}
+                    bg={colors['blue-button']}
+                  >
+                    Submit
+                  </Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Box>
+          <ListPenghargaan/>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default Penghargaan;

src/app/admin/(dashboard)/desa/pengumuman/page.tsx

@@ -1,62 +1,75 @@
 'use client'
-import { Group, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Group, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
 import stateDesaPengumuman from '../../_state/desa/pengumuman';
 import { useShallowEffect } from '@mantine/hooks';
 import { Prisma } from '@prisma/client';
 import { BeritaEditor } from '../berita/_com/BeritaEditor';
+import colors from '@/con/colors';
 
 function Page() {
   return (
-    <Stack>
+    <Box>
+      <Title order={3}>Pengumuman</Title>
       <SimpleGrid cols={{
         base: 1, md: 2
       }}>
-        <PengumumanList />
         <PengumumanCreate />
+        <PengumumanList />
       </SimpleGrid>
-    </Stack>
+    </Box>
   );
 }
 
+function PengumumanCreate() {
+  const pengumumanState = useProxy(stateDesaPengumuman)
+
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <SelectCategory onChange={(val) => {
+            pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id
+          }} />
+          <TextInput onChange={(val) => {
+            pengumumanState.pengumuman.create.form.judul = val.target.value
+          }} label={<Text fz={"sm"} fw={"bold"}>Judul</Text>} placeholder='masukkan judul' />
+          <TextInput onChange={(val) => {
+            pengumumanState.pengumuman.create.form.deskripsi = val.target.value
+          }} label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>} placeholder='masukkan deskripsi' />
+          <BeritaEditor onSubmit={(val) => {
+            pengumumanState.pengumuman.create.form.content = val
+            pengumumanState.pengumuman.create.create()
+          }} />
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
 function PengumumanList() {
   const pengumumanState = useProxy(stateDesaPengumuman)
   useShallowEffect(() => {
     pengumumanState.pengumuman.findMany.load()
   }, [])
 
-  if (!pengumumanState.pengumuman.findMany.data) return <Stack>
+  if (!pengumumanState.pengumuman.findMany.data) return <Stack py={10}>
     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
   </Stack>
-  return <Stack>
-    <Text>Announcement List</Text>
-    {pengumumanState.pengumuman.findMany.data?.map((item) => (
-      <Text key={item.id}>{item.judul}</Text>
-    ))}
-  </Stack>;
-}
-
-function PengumumanCreate() {
-  const pengumumanState = useProxy(stateDesaPengumuman)
-
-
-  return <Stack gap={"md"}>
-    <Text>Create Some Announcement</Text>
-    <SelectCategory onChange={(val) => {
-      pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id
-    }} />
-    <TextInput onChange={(val) => {
-      pengumumanState.pengumuman.create.form.judul = val.target.value
-    }} label={"Judul"} placeholder='masukkan judul' />
-    <TextInput onChange={(val) => {
-      pengumumanState.pengumuman.create.form.deskripsi = val.target.value
-    }} label={"Deskripsi"} placeholder='masukkan deskripsi' />
-    <BeritaEditor onSubmit={(val) => {
-      pengumumanState.pengumuman.create.form.content = val
-      pengumumanState.pengumuman.create.create()
-    }} />
-  </Stack>
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text fz={"xl"} fw={"bold"}>List Pengumuman</Text>
+          {pengumumanState.pengumuman.findMany.data?.map((item) => (
+            <Text key={item.id}>{item.judul}</Text>
+          ))}
+        </Stack>
+      </Paper>
+    </Box>
+  )
 }
 
 function SelectCategory({ onChange }: {
@@ -75,7 +88,7 @@ function SelectCategory({ onChange }: {
   if (!pengumumanState.category.findMany.data) return <Skeleton h={40} />
   return <Group>
     {/* {JSON.stringify(pengumumanState.category.findMany.data)} */}
-    <Select placeholder='pilih kategori' label={"select katagori"} data={pengumumanState.category.findMany.data.map((item) => ({
+    <Select placeholder='pilih kategori' label={<Text fz={"sm"} fw={"bold"}>Pilih Kategori</Text>} data={pengumumanState.category.findMany.data.map((item) => ({
       value: item.id,
       label: item.name
     }))} onChange={(v) => {

src/app/admin/(dashboard)/desa/potensi/listPage.tsx

@@ -0,0 +1,17 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListPotensi() {
+  return (
+    <Box>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack>
+        <Title order={3}>List Potensi Desa</Title>
+      </Stack>
+    </Paper>
+  </Box>
+  );
+}
+
+export default ListPotensi;

src/app/admin/(dashboard)/desa/potensi/page.tsx

@@ -1,11 +1,40 @@
-import React from 'react';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, TextInput, Title } from '@mantine/core';
+import ListPotensi from './listPage';
 
-function Page() {
+function Potensi() {
   return (
-    <div>
-      Potensi
-    </div>
+    <Box py={10}>
+      <Stack gap={"xs"}>
+        <Title order={3}>Potensi Desa</Title>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Stack>
+                <TextInput
+                  label="Nama Potensi"
+                  placeholder='masukkan nama potensi'
+                />
+                <TextInput
+                  label="Kategori Potensi"
+                  placeholder='masukkan kategori potensi'
+                />
+                <Group>
+                  <Button
+                    mt={10}
+                    bg={colors['blue-button']}
+                  >
+                    Submit
+                  </Button>
+                </Group>
+              </Stack>
+            </Paper>
+          </Box>
+          <ListPotensi />
+        </SimpleGrid>
+      </Stack>
+    </Box>
   );
 }
 
-export default Page;
+export default Potensi;

src/app/admin/(dashboard)/desa/profile/page.tsx

@@ -1,10 +1,52 @@
+import colors from '@/con/colors';
+import { Stack, Title, Tabs, TabsList, TabsTab, TabsPanel } from '@mantine/core';
 import React from 'react';
+import SejarahDesa from './ui/sejarah_desa/page';
+import VisiMisiDesa from './ui/visi_misi_desa/page';
+import LambangDesa from './ui/lambang_desa/page';
+import MaskotDesa from './ui/maskot_desa/page';
+import ProfilePerbekel from './ui/profile_perbekel/page';
 
 function Page() {
   return (
-    <div>
-      Profile
-    </div>
+    <Stack >
+    <Title order={3}>Profile Desa</Title>
+    <Tabs  color={colors['blue-button']} variant='pills' defaultValue={"Sejarah Desa"}>
+      <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+        <TabsTab value="Sejarah Desa">
+          Sejarah Desa
+        </TabsTab>
+        <TabsTab value="Visi Misi Desa">
+          Visi Misi Desa
+        </TabsTab>
+        <TabsTab value="Lambang Desa">
+          Lambang Desa
+        </TabsTab>
+        <TabsTab value="Maskot Desa">
+          Maskot Desa
+        </TabsTab>
+        <TabsTab value="Profile Perbekel">
+          Profile Perbekel
+        </TabsTab>
+      </TabsList>
+
+      <TabsPanel value="Sejarah Desa">
+        <SejarahDesa/>
+      </TabsPanel>
+      <TabsPanel value="Visi Misi Desa">
+        <VisiMisiDesa/>
+      </TabsPanel>
+      <TabsPanel value="Lambang Desa">
+       <LambangDesa/>
+      </TabsPanel>
+      <TabsPanel value="Maskot Desa">
+       <MaskotDesa/>
+      </TabsPanel>
+      <TabsPanel value="Profile Perbekel">
+        <ProfilePerbekel/>
+      </TabsPanel>
+    </Tabs>
+  </Stack>
   );
 }
 

src/app/admin/(dashboard)/desa/profile/ui/lambang_desa/page.tsx

@@ -0,0 +1,39 @@
+import colors from '@/con/colors';
+import { Box, SimpleGrid, Paper, Stack, Title, Group, Button, Text } from '@mantine/core';
+import React from 'react';
+import { DesaEditor } from '../../../_com/desaEditor';
+
+function LambangDesa() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Lambang Desa</Title>
+              <Text fw={"bold"}>Deskripsi Lambang Desa</Text>
+              <DesaEditor showSubmit={false} />
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>List Lambang Desa</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default LambangDesa;

src/app/admin/(dashboard)/desa/profile/ui/maskot_desa/page.tsx

@@ -0,0 +1,39 @@
+import colors from '@/con/colors';
+import { Box, SimpleGrid, Paper, Stack, Title, Group, Button, Text } from '@mantine/core';
+import React from 'react';
+import { DesaEditor } from '../../../_com/desaEditor';
+
+function MaskotDesa() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Maskot Desa</Title>
+              <Text fw={"bold"}>Deskripsi Maskot Desa</Text>
+              <DesaEditor showSubmit={false} />
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>List Maskot Desa</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default MaskotDesa;

src/app/admin/(dashboard)/desa/profile/ui/profile_perbekel/page.tsx

@@ -0,0 +1,49 @@
+import colors from '@/con/colors';
+import { Box, SimpleGrid, Paper, Stack, Title, Group, Button, TextInput, Text } from '@mantine/core';
+import React from 'react';
+import { DesaEditor } from '../../../_com/desaEditor';
+
+function ProfilePerbekel() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Profil Perbekel</Title>
+              <TextInput
+              label="Nama Perbekel"
+              placeholder="masukkan nama perbekel"
+              />
+              <Text fz={"sm"} fw={"bold"}>Biodata</Text>
+              <DesaEditor showSubmit={false} />
+              <Text fz={"sm"} fw={"bold"}>Pengalaman</Text>
+              <DesaEditor showSubmit={false} />
+              <Text fz={"sm"} fw={"bold"}>Pengalaman Organisasi</Text>
+              <DesaEditor showSubmit={false} />
+              <Text fz={"sm"} fw={"bold"}>Program Unggulan</Text>
+              <DesaEditor showSubmit={false} />
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>List Profil Perbekel</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+      </Box>
+  );
+}
+
+export default ProfilePerbekel;

src/app/admin/(dashboard)/desa/profile/ui/sejarah_desa/listPage.tsx

@@ -0,0 +1,17 @@
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Title } from '@mantine/core';
+import React from 'react';
+
+function ListPage() {
+  return (
+    <Box>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack>
+        <Title order={3}>List Sejarah Desa</Title>
+      </Stack>
+    </Paper>
+  </Box>
+  );
+}
+
+export default ListPage;

src/app/admin/(dashboard)/desa/profile/ui/sejarah_desa/page.tsx

@@ -0,0 +1,65 @@
+'use client'
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import DesaEditorText from '../../../_com/desaEditorText';
+import ListPage from './listPage';
+import { useShallowEffect } from '@mantine/hooks';
+
+
+function SejarahDesa() {
+  const stateSejarah = useProxy(stateProfileDesa.Sejarah)
+
+  useShallowEffect(() => {
+    if (!stateSejarah.findById.data) {
+      stateSejarah.findById.initialize()
+    }
+  }, [])
+
+  const submit = () => {
+    if (stateSejarah.findById.data?.id && stateSejarah.findById.data.sejarah) {
+      stateSejarah.update.save({
+        id: stateSejarah.findById.data.id,
+        sejarah: stateSejarah.findById.data.sejarah
+      })
+    }
+  }
+
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Sejarah Desa</Title>
+              <Text fw={"bold"}>Deskripsi Sejarah Desa</Text>
+              <DesaEditorText
+                key={stateSejarah.findById.data?.id ?? 'new'}
+                showSubmit={false}
+                onChange={(val) => {
+                  if (stateSejarah.findById.data) {
+                    stateSejarah.findById.data.sejarah = val
+                  }
+                }}
+                initialContent={stateSejarah.findById.data?.sejarah ?? ""}
+              />
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <ListPage />
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default SejarahDesa;

src/app/admin/(dashboard)/desa/profile/ui/visi_misi_desa/page.tsx

@@ -0,0 +1,64 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import { DesaEditor } from '../../../_com/desaEditor';
+
+function VisiMisiDesa() {
+  return (
+    <Box py={10}>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Visi Desa</Title>
+              <Text fw={"bold"}>Deskripsi Visi Desa</Text>
+              <DesaEditor showSubmit={false} />
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>List Visi Desa</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+      <SimpleGrid py={30} cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>Misi Desa</Title>
+              <Text fw={"bold"}>Deskripsi Misi Desa</Text>
+              <DesaEditor showSubmit={false}/>
+              <Group>
+                <Button
+                  mt={10}
+                  bg={colors['blue-button']}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title order={3}>List Misi Desa</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+export default VisiMisiDesa;

src/app/admin/(dashboard)/kesehatan/_com/kesehatanEditor.tsx

@@ -0,0 +1,93 @@
+'use client'
+import colors from '@/con/colors';
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+
+const content =
+  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
+
+export function KesehatanEditor({showSubmit = true} : {
+  showSubmit: boolean
+}) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content,
+  });
+
+  return (
+    <Stack>
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button
+          mt={10}
+          bg={colors['blue-button']}
+        >
+          Submit
+        </Button>
+      )}
+    </Stack>
+  );
+}

src/app/admin/(dashboard)/kesehatan/_com/kesehatanEditorText.tsx

@@ -0,0 +1,95 @@
+'use client'
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+
+
+function KesehatanEditorText({ onSubmit, onChange, showSubmit = true, initialContent = '', }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean,
+  initialContent?: string }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content: initialContent,
+    onUpdate : ({editor}) => {
+      onChange(editor.getHTML())
+    }
+  });
+
+  return (
+    <Stack>
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button onClick={() => {
+          if (!editor) return
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
+    </Stack>
+  );
+}
+
+export default KesehatanEditorText;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/doctor_sign/page.tsx

@@ -1,21 +1,24 @@
 'use client'
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Text } from '@mantine/core';
 import React from 'react';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
 import { useProxy } from 'valtio/utils';
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import colors from '@/con/colors';
 
 function DoctorSignUI() {
   const doctorSign = useProxy(stateArtikelKesehatan.doctorSign)
   return (
     <Box>
-      <Text fw={"bold"}>Kapan Harus ke Dokter</Text>
-      <KesehatanEditor 
-      showSubmit={false}
-      onChange={(val) => {
-        doctorSign.create.form.content = val
-      }}
-      />
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Text fw={"bold"}>Kapan Harus ke Dokter</Text>
+        <KesehatanEditor
+          showSubmit={false}
+          onChange={(val) => {
+            doctorSign.create.form.content = val
+          }}
+        />
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/first_aid/page.tsx

@@ -1,27 +1,32 @@
 'use client'
-import { Box, Text, TextInput } from '@mantine/core';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function FirstAidUI() {
   const firstAidState = useProxy(stateArtikelKesehatan.firstAid)
   return (
     <Box>
-    <TextInput
-    label={<Text fw={"bold"}>Title Pertolongan Pertama</Text>}
-    placeholder="Masukkan title"
-    onChange={(val) => {
-      firstAidState.create.form.title = val.target.value
-    }}
-    /> 
-    <KesehatanEditor
-    showSubmit={false}
-    onChange={(val) => {
-      firstAidState.create.form.content = val
-    }}
-    />
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <TextInput
+            label={<Text fw={"bold"}>Judul Pertolongan Pertama</Text>}
+            placeholder="Masukkan judul"
+            onChange={(val) => {
+              firstAidState.create.form.title = val.target.value
+            }}
+          />
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              firstAidState.create.form.content = val
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/introduction/page.tsx

@@ -1,21 +1,26 @@
 'use client'
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Stack, Text } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
+import colors from '@/con/colors';
 
 function IntoductionUI() {
   const introduction = useProxy(stateArtikelKesehatan.introduction)
   return (
-    <Box py={10}>
-    <Text fw={"bold"}>Pendahuluan</Text>
-    <KesehatanEditor
-    showSubmit={false}
-    onChange={(val) => {
-      introduction.create.form.content = val;
-    }}
-    />
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text fw={"bold"}>Pendahuluan</Text>
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              introduction.create.form.content = val;
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/mythVsfact/page.tsx

@@ -1,33 +1,38 @@
 'use client'
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 
 function MythFactUI() {
   const mythFact = useProxy(stateArtikelKesehatan.mythFact)
   return (
-    <Box py={10}>
-      <TextInput
-      label={<Text fw={"bold"}>Title Pertolongan Pertama Penyakit</Text>}
-      placeholder="Masukkan title"
-      onChange={(val) => {
-        mythFact.create.form.title = val.target.value
-      }}
-      />
-      <TextInput
-      label={<Text fw={"bold"}>Mitos</Text>}
-      placeholder="Masukkan mitos"
-      onChange={(val) => {
-        mythFact.create.form.mitos = val.target.value
-      }}
-      />
-      <TextInput
-      label={<Text fw={"bold"}>Fakta</Text>}
-      placeholder="Masukkan fakta"
-      onChange={(val) => {
-        mythFact.create.form.fakta = val.target.value
-      }}
-      />
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <TextInput
+            label={<Text fw={"bold"}>Judul Pertolongan Pertama Penyakit</Text>}
+            placeholder="Masukkan judul"
+            onChange={(val) => {
+              mythFact.create.form.title = val.target.value
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"}>Mitos</Text>}
+            placeholder="Masukkan mitos"
+            onChange={(val) => {
+              mythFact.create.form.mitos = val.target.value
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"}>Fakta</Text>}
+            placeholder="Masukkan fakta"
+            onChange={(val) => {
+              mythFact.create.form.fakta = val.target.value
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Center, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Group, Paper, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import IntoductionUI from './introduction/page';
 import SymptomUI from './symptom/page';
 import PreventionUI from './prevention/page';
@@ -39,19 +39,25 @@ function ArtikelKesehatan() {
         base: 1, md: 2
       }}>
         <Box >
-          <Title order={3}>Artikel Kesehatan</Title>
-          <IntoductionUI />
-          <SymptomUI />
-          <PreventionUI />
-          <FirstAidUI />
-          <MythFactUI />
-          <DoctorSignUI />
-          <Button mt={10} onClick={submitAllForms}>Submit</Button>
+          <Stack gap={"xs"}>
+            <Title order={4}>Artikel Kesehatan</Title>
+            <IntoductionUI />
+            <SymptomUI />
+            <PreventionUI />
+            <FirstAidUI />
+            <MythFactUI />
+            <DoctorSignUI />
+            <Group>
+              <Button bg={colors['blue-button']} mt={10} onClick={submitAllForms}>Submit</Button>
+            </Group>
+          </Stack>
         </Box>
 
         <Box>
-          <Title order={3}>List Artikel Kesehatan</Title>
-          <AllList />
+          <Stack gap={"xs"}>
+            <Title order={4}>Data Artikel Kesehatan</Title>
+            <AllList />
+          </Stack>
         </Box>
       </SimpleGrid>
     </Stack>
@@ -78,71 +84,88 @@ function AllList() {
   ) return <Stack>
     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
   </Stack>
-  return <Stack>
-    <Title order={4}>Intoduction</Title>
-    {listState.introduction.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-      </Box>
-    ))}
+  return <Stack gap={"xs"}>
+    {/* Introduction */}
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Title order={4}>Pendahuluan</Title>
+      {listState.introduction.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+        </Box>
+      ))}
+    </Paper>
     {/* Symptom */}
-    {listState.symptom.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Title order={4}>{item.title}</Title>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Title order={4}>Gejala Penyakit</Title>
+      {listState.symptom.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Title order={4}>{item.title}</Title>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+        </Box>
+      ))}
+    </Paper>
     {/* Prevention */}
-    {listState.prevention.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Title order={4}>{item.title}</Title>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+    <Title order={4}>Pencegahan Penyakit</Title>
+      {listState.prevention.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Title order={4}>{item.title}</Title>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+        </Box>
+      ))}
+    </Paper>
     {/* First Aid */}
-    {listState.firstAid.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Title order={4}>{item.title}</Title>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+    <Title order={4}>Pertolongan Pertama</Title>
+      {listState.firstAid.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Title order={4}>{item.title}</Title>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
+        </Box>
+      ))}
+    </Paper>
     {/* Myth Fact */}
-    {listState.mythFact.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Title order={4}>{item.title}</Title>
-        <Table
-          striped
-          highlightOnHover
-          withTableBorder
-          withColumnBorders
-          bg={colors['white-1']}
-        >
-          <TableThead >
-            <TableTr >
-              <TableTh >
-                <Center>Mitos</Center>
-              </TableTh>
-              <TableTh >
-                <Center>Fakta</Center>
-              </TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody >
-            <TableTr>
-              <TableTd ta="center">{item.mitos}</TableTd>
-              <TableTd ta="center">{item.fakta}</TableTd>
-            </TableTr>
-          </TableTbody>
-        </Table>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+    <Title order={4}>Mitos vs Fakta</Title>
+      {listState.mythFact.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Title order={4}>{item.title}</Title>
+          <Table
+            striped
+            highlightOnHover
+            withTableBorder
+            withColumnBorders
+            bg={colors['white-1']}
+          >
+            <TableThead >
+              <TableTr >
+                <TableTh >
+                  <Center>Mitos</Center>
+                </TableTh>
+                <TableTh >
+                  <Center>Fakta</Center>
+                </TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody >
+              <TableTr>
+                <TableTd ta="center">{item.mitos}</TableTd>
+                <TableTd ta="center">{item.fakta}</TableTd>
+              </TableTr>
+            </TableTbody>
+          </Table>
+        </Box>
+      ))}
+    </Paper>
     {/* Doctor Sign */}
-    <Title order={4}>Kapan Harus Ke Dokter?</Title>
-    {listState.doctorSign.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}/>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Title order={4}>Kapan Harus Ke Dokter?</Title>
+      {listState.doctorSign.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+        </Box>
+      ))}
+    </Paper>
   </Stack>
 }
 

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/prevention/page.tsx

@@ -1,28 +1,33 @@
 'use client'
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function PreventionUI() {
   const preventionState = useProxy(stateArtikelKesehatan.prevention)
   return (
-    <Box py={10}>
-      <TextInput
-      mb={10}
-        label={<Text fw={"bold"}>Title Pencegahan Penyakit</Text>}
-        placeholder="Masukkan title"
-        onChange={(val) => {
-          preventionState.create.form.title = val.target.value
-        }}
-      />
-      <KesehatanEditor
-        showSubmit={false}
-        onChange={(val) => {
-          preventionState.create.form.content = val
-        }}
-      />
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <TextInput
+            mb={10}
+            label={<Text fw={"bold"}>Judul Pencegahan Penyakit</Text>}
+            placeholder="Masukkan judul"
+            onChange={(val) => {
+              preventionState.create.form.title = val.target.value
+            }}
+          />
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              preventionState.create.form.content = val
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/artikel_kesehatan/symptom/page.tsx

@@ -1,27 +1,32 @@
 'use client'
 import stateArtikelKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function SymptomUI() {
   const symptomState = useProxy(stateArtikelKesehatan.symptom)
   return (
-    <Box py={10}>
-      <TextInput
-      mb={10}
-        label={<Text fw={"bold"}>Title Gejala Penyakit</Text>}
-        placeholder='masukkan title'
-        onChange={(val) => {
-          symptomState.create.form.title = val.target.value
-        }}
-      />
-      <KesehatanEditor
-        showSubmit={false}
-        onChange={(val) => {
-          symptomState.create.form.content = val
-        }}
-      />
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <TextInput
+            mb={10}
+            label={<Text fw={"bold"}>Judul Gejala Penyakit</Text>}
+            placeholder='masukkan judul'
+            onChange={(val) => {
+              symptomState.create.form.title = val.target.value
+            }}
+          />
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              symptomState.create.form.content = val
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/dokterdantenagamedis/page.tsx

@@ -1,12 +1,15 @@
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 
 function DokterDanTenagaMedis() {
   const dokterdantenagamedisState = useProxy(stateFasilitasKesehatan.dokterdantenagamedis)
   return (
     <Box>
-      <Text fw={"bold"}>Dokter & Tenaga Medis</Text>
+      <Paper bg={colors['white-1']} p={"md"}>
+        <Stack gap={"xs"}>
+        <Text fw={"bold"}>Dokter & Tenaga Medis</Text>
       <TextInput
         label="Nama Dokter"
         placeholder='masukkan nama dokter'
@@ -29,6 +32,8 @@ function DokterDanTenagaMedis() {
           dokterdantenagamedisState.create.form.jadwal = val.target.value
         }}
       />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/fasilitas_pendukung/page.tsx

@@ -1,17 +1,20 @@
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function FasilitasPendukung() {
   const fasilitaspendukungState = useProxy(stateFasilitasKesehatan.fasilitaspendukung)
   return <Box>
-    <Text fw={"bold"}>Fasilitas Pendukung</Text>
-    <KesehatanEditor 
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Text fw={"bold"}>Fasilitas Pendukung</Text>
+      <KesehatanEditor
         showSubmit={false}
         onChange={(val) => {
           fasilitaspendukungState.create.form.content = val;
         }} />
+    </Paper>
   </Box>
 }
 

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/informasi_umum/page.tsx

@@ -1,35 +1,40 @@
 'use client'
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 
 function InformasiUmum() {
   const infromasiState = useProxy(stateFasilitasKesehatan.informasiumum)
-  return<Box>
-      <Text fw={"bold"}>Informasi Umum</Text>
-      <TextInput
-        label="Fasilitas"
-        placeholder='masukkan nama fasilitas kesehatan'
-        onChange={(val) => {
-          infromasiState.create.form.fasilitas = val.target.value
-        }}
-      />
-      <TextInput
-        label="Alamat"
-        placeholder='masukkan alamat'
-        onChange={(val) => {
-          infromasiState.create.form.alamat = val.target.value
-        }}
-      />
-      <TextInput
-        mb={10}
-        label="Jam Operasional"
-        placeholder='masukkan jam operasional'
-        onChange={(val) => {
-          infromasiState.create.form.jamOperasional = val.target.value
-        }}
-      />
-    </Box>
+  return <Box>
+    <Paper bg={colors['white-1']} p={'md'}>
+    <Text fw={"bold"}>Informasi Umum</Text>
+      <Stack gap={"xs"}>
+        <TextInput
+          label="Fasilitas"
+          placeholder='masukkan nama fasilitas kesehatan'
+          onChange={(val) => {
+            infromasiState.create.form.fasilitas = val.target.value
+          }}
+        />
+        <TextInput
+          label="Alamat"
+          placeholder='masukkan alamat'
+          onChange={(val) => {
+            infromasiState.create.form.alamat = val.target.value
+          }}
+        />
+        <TextInput
+          mb={10}
+          label="Jam Operasional"
+          placeholder='masukkan jam operasional'
+          onChange={(val) => {
+            infromasiState.create.form.jamOperasional = val.target.value
+          }}
+        />
+      </Stack>
+    </Paper>
+  </Box>
 }
 
 export default InformasiUmum;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/layanan_unggulan/page.tsx

@@ -1,18 +1,21 @@
 'use client'
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function LayananUnggulan() {
   const informasiumumState = useProxy(stateFasilitasKesehatan.layananunggulan)
   return <Box>
+    <Paper bg={colors['white-1']} p={'md'}>
     <Text fw={"bold"}>Layanan Unggulan</Text>
     <KesehatanEditor 
     showSubmit={false}
     onChange={(val) => {
       informasiumumState.create.form.content = val;
     }} />
+    </Paper>
   </Box>
     ;
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/page.tsx

@@ -2,7 +2,7 @@
 
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import colors from '@/con/colors';
-import { Box, Button, Center, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Paper, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import DokterDanTenagaMedis from './dokterdantenagamedis/page';
@@ -91,7 +91,7 @@ function FasilitasKesehatan() {
       }}>
         <Box>
           <Stack gap={'xs'}>
-            <Title order={3}>Fasilitas Kesehatan</Title>
+            <Title order={4}>Tambah Fasilitas Kesehatan</Title>
             {/* Informasi Umum */}
             <InformasiUmum />
             {/* Layanan Unggulan */}
@@ -110,7 +110,7 @@ function FasilitasKesehatan() {
 
         <Box>
           <Stack gap={"xs"}>
-            <Title order={3}>List Fasilitas Kesehatan</Title>
+            <Title order={4}>Data Fasilitas Kesehatan</Title>
             <AllList />
           </Stack>
         </Box>
@@ -141,100 +141,113 @@ function AllList() {
     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
   </Stack>
   return <Stack>
-    <Title order={4}>Informasi Umum</Title>
-    {allListState.informasiumum.findMany.data?.map((item) => (
-      <Box key={item.id}>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Title order={4}>Informasi Umum</Title>
+      {allListState.informasiumum.findMany.data?.map((item) => (
+        <Box key={item.id}>
 
-        <Text>{item.fasilitas}</Text>
-        <Text>{item.alamat}</Text>
-        <Text>{item.jamOperasional}</Text>
-      </Box>
-    ))}
+          <Text>{item.fasilitas}</Text>
+          <Text>{item.alamat}</Text>
+          <Text>{item.jamOperasional}</Text>
+        </Box>
+      ))}
+    </Paper>
 
-    <Title order={4}>Layanan Unggulan</Title>
-    {allListState.layananunggulan.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }} />
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Title order={4}>Layanan Unggulan</Title>
+      {allListState.layananunggulan.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+        </Box>
+      ))}
+    </Paper>
 
 
-    <Title order={4}>Dokter & Tenaga Medis</Title>
-    
-    <Table
-      striped
-      highlightOnHover
-      withTableBorder
-      withColumnBorders
-      bg={colors['white-1']}
-    >
-      <TableThead >
-        <TableTr >
-          <TableTh >
-            <Center>Nama</Center>
-          </TableTh>
-          <TableTh >
-            <Center>Specialist</Center>
-          </TableTh>
-          <TableTh >
-            <Center>Jadwal</Center>
-          </TableTh>
-        </TableTr>
-      </TableThead>
-      <TableTbody >
-        {allListState.dokterdantenagamedis.findMany.data?.map((item) => (
-          <TableTr key={item.id}>
-            <TableTd ta="center">{item.name}</TableTd>
-            <TableTd ta="center">Specialist {item.specialist}</TableTd>
-            <TableTd ta="center">{item.jadwal}</TableTd>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Title order={4}>Dokter & Tenaga Medis</Title>
+
+      <Table
+        striped
+        highlightOnHover
+        withTableBorder
+        withColumnBorders
+        bg={colors['white-1']}
+      >
+        <TableThead >
+          <TableTr >
+            <TableTh >
+              <Center>Nama</Center>
+            </TableTh>
+            <TableTh >
+              <Center>Specialist</Center>
+            </TableTh>
+            <TableTh >
+              <Center>Jadwal</Center>
+            </TableTh>
           </TableTr>
-        ))}
-      </TableTbody>
-    </Table>
+        </TableThead>
+        <TableTbody >
+          {allListState.dokterdantenagamedis.findMany.data?.map((item) => (
+            <TableTr key={item.id}>
+              <TableTd ta="center">{item.name}</TableTd>
+              <TableTd ta="center">Specialist {item.specialist}</TableTd>
+              <TableTd ta="center">{item.jadwal}</TableTd>
+            </TableTr>
+          ))}
+        </TableTbody>
+      </Table>
+    </Paper>
 
-    <Title order={4}>Fasilitas Pendukung</Title>
-    {allListState.fasilitaspendukung.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }} />
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
 
-    <Title order={4}>Tarif & Layanan</Title>
-    <Table
-      suppressHydrationWarning
-      striped
-      highlightOnHover
-      withTableBorder
-      withColumnBorders
-      bg={colors['white-1']}
-    >
-      <TableThead>
-        <TableTr>
-          <TableTh>
-            Layanan
-          </TableTh>
-          <TableTh>
-            Tarif
-          </TableTh>
-        </TableTr>
-      </TableThead>
-      <TableTbody>
-        {allListState.tarifdanlayanan.findMany.data?.map((item) => (
-          <TableTr key={item.id}>
-            <TableTd>{item.layanan}</TableTd>
-            <TableTd>Rp.{item.tarif}</TableTd>
+      <Title order={4}>Fasilitas Pendukung</Title>
+      {allListState.fasilitaspendukung.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+        </Box>
+      ))}
+    </Paper>
+
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Title order={4}>Tarif & Layanan</Title>
+      <Table
+        suppressHydrationWarning
+        striped
+        highlightOnHover
+        withTableBorder
+        withColumnBorders
+        bg={colors['white-1']}
+      >
+        <TableThead>
+          <TableTr>
+            <TableTh>
+              Layanan
+            </TableTh>
+            <TableTh>
+              Tarif
+            </TableTh>
           </TableTr>
-        ))}
-      </TableTbody>
-    </Table>
+        </TableThead>
+        <TableTbody>
+          {allListState.tarifdanlayanan.findMany.data?.map((item) => (
+            <TableTr key={item.id}>
+              <TableTd>{item.layanan}</TableTd>
+              <TableTd>Rp.{item.tarif}</TableTd>
+            </TableTr>
+          ))}
+        </TableTbody>
+      </Table>
+    </Paper>
 
-    <Title order={4}>Prosedur Pendaftaran</Title>
-    {allListState.prosedurpendaftaran.findMany.data?.map((item) => (
-      <Box key={item.id}>
-        <Text dangerouslySetInnerHTML={{__html: item.content}}/>
-      </Box>
-    ))}
+    <Paper bg={colors['white-1']} p={'md'}>
 
+      <Title order={4}>Prosedur Pendaftaran</Title>
+      {allListState.prosedurpendaftaran.findMany.data?.map((item) => (
+        <Box key={item.id}>
+          <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+        </Box>
+      ))}
+    </Paper>
   </Stack>
 }
 

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/prosedurpendaftaran/page.tsx

@@ -1,19 +1,22 @@
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text } from '@mantine/core';
+import { Box, Text, Paper } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function ProsedurPendaftaran() {
   const prosedurpendaftaranState = useProxy(stateFasilitasKesehatan.prosedurpendaftaran)
   return <Box>
+    <Paper bg={colors['white-1']} p={'md'}>
       <Text fw={"bold"}>Prosedur Pendaftaran</Text>
-      <KesehatanEditor 
-          showSubmit={false}
-          onChange={(val) => {
-            prosedurpendaftaranState.create.form.content = val;
-          }} />
-    </Box>
-  
+      <KesehatanEditor
+        showSubmit={false}
+        onChange={(val) => {
+          prosedurpendaftaranState.create.form.content = val;
+        }} />
+    </Paper>
+  </Box>
+
 }
 
 export default ProsedurPendaftaran;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/fasilitas_kesehatan/tarifdanlayanan/page.tsx

@@ -1,27 +1,32 @@
 import stateFasilitasKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 
 function TarifDanLayanan() {
   const tarifdanlayanan = useProxy(stateFasilitasKesehatan.tarifdanlayanan)
   return <Box>
-  <Text fw={"bold"}>Tarif & Layanan</Text>
-  <TextInput
-    label="Tarif"
-    placeholder='masukkan tarif'
-    onChange={(val) => {
-      tarifdanlayanan.create.form.tarif = val.target.value
-    }}
-  />
-  <TextInput
-  mb={10}
-    label="Layanan"
-    placeholder='masukkan layanan'
-    onChange={(val) => {
-      tarifdanlayanan.create.form.layanan = val.target.value
-    }}
-  />
-</Box>
+    <Paper bg={colors['white-1']} p={'md'}>
+    <Text fw={"bold"}>Tarif & Layanan</Text>
+      <Stack gap={"xs"}>
+        <TextInput
+          label="Tarif"
+          placeholder='masukkan tarif'
+          onChange={(val) => {
+            tarifdanlayanan.create.form.tarif = val.target.value
+          }}
+        />
+        <TextInput
+          mb={10}
+          label="Layanan"
+          placeholder='masukkan layanan'
+          onChange={(val) => {
+            tarifdanlayanan.create.form.layanan = val.target.value
+          }}
+        />
+      </Stack>
+    </Paper>
+  </Box>
 }
 
 export default TarifDanLayanan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/grafik_hasil_kepuasan/page.tsx

@@ -2,7 +2,7 @@
 'use client'
 import stategrafikKepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
 import colors from '@/con/colors';
-import { Box, Button, Group, Stack, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, TextInput, Title } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
 import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
@@ -35,54 +35,65 @@ function GrafikHasilKepuasan() {
 
 
   return (
-    <Stack gap={"xs"}>
-      <Title order={3}>Grafik Hasil Kepuasan</Title>
-      <Box>
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Label"
-          placeholder='Masukkan label yang diinginkan'
-          value={grafikkepuasan.create.form.label}
-          onChange={(val) => {
-            grafikkepuasan.create.form.label = val.currentTarget.value
-          }}
-        />
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Jumlah Penderita"
-          type='number'
-          placeholder='Masukkan jumlah penderita'
-          value={grafikkepuasan.create.form.jumlah}
-          onChange={(val) => {
-            grafikkepuasan.create.form.jumlah = val.currentTarget.value
-          }}
-        />
-      </Box>
-      <Group>
-        <Button mt={10}
-          onClick={async () => {
-            await grafikkepuasan.create.create();
-            await grafikkepuasan.findMany.load();
-            if (grafikkepuasan.findMany.data) {
-              setChartData(grafikkepuasan.findMany.data);
-            }
-          }}
-        >Submit</Button>
-      </Group>
-      <Box h={400} w={{ base: "100%", md: "80%" }}>
-        <Title py={15} order={3}>Data Kelahiran & Kematian</Title>
-        <BarChart
-          width={isMobile ? 450 : isTablet ? 600 : 900}
-          height={380}
-          data={chartData}
-        >
-          <XAxis dataKey="label" />
-          <YAxis />
-          <Tooltip />
-          <Legend />
-          <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah" />
-        </BarChart>
-      </Box>
+    <Stack py={10} gap={"xs"}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Tambah Grafik Hasil Kepuasan</Title>
+        <Stack gap={"xs"}>
+          <TextInput
+            label="Label"
+            placeholder='Masukkan label yang diinginkan'
+            value={grafikkepuasan.create.form.label}
+            onChange={(val) => {
+              grafikkepuasan.create.form.label = val.currentTarget.value
+            }}
+          />
+          <TextInput
+            label="Jumlah Penderita"
+            type='number'
+            placeholder='Masukkan jumlah penderita'
+            value={grafikkepuasan.create.form.jumlah}
+            onChange={(val) => {
+              grafikkepuasan.create.form.jumlah = val.currentTarget.value
+            }}
+          />
+          <Group>
+            <Button bg={colors['blue-button']} mt={10}
+              onClick={async () => {
+                await grafikkepuasan.create.create();
+                await grafikkepuasan.findMany.load();
+                if (grafikkepuasan.findMany.data) {
+                  setChartData(grafikkepuasan.findMany.data);
+                }
+              }}
+            >Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+      {!chartData ? (
+        <Box style={{ width: '100%', minWidth: 300, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Title py={15} order={4}>Data Hasil Kepuasan</Title>
+            <Skeleton h={400} />
+          </Paper>
+        </Box>
+      ) : (
+        <Box style={{ width: '100%', minWidth: 300, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Title py={15} order={4}>Data Hasil Kepuasan</Title>
+            <BarChart
+              width={isMobile ? 250 : isTablet ? 300 : 350}
+              height={380}
+              data={chartData}
+            >
+              <XAxis dataKey="label" />
+              <YAxis />
+              <Tooltip />
+              <Legend />
+              <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah" />
+            </BarChart>
+          </Paper>
+        </Box>
+      )}
     </Stack>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/deskripsi_kegiatan/page.tsx

@@ -1,19 +1,24 @@
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Stack, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function DeskripsiKegiatan() {
   const deskripsiKegiatanState = useProxy(stateJadwalKegiatan.deskripsiKegiatan)
   return (
     <Box>
-      <Text pt={10} fw={"bold"}>Deskripsi Kegiatan</Text>
-      <KesehatanEditor
-      showSubmit={false}
-      onChange={(val) => {
-        deskripsiKegiatanState.create.form.deskripsi = val
-      }}
-      />
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text pt={10} fw={"bold"}>Deskripsi Kegiatan</Text>
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              deskripsiKegiatanState.create.form.deskripsi = val
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/dokumen_yang_diperlukan/page.tsx

@@ -1,19 +1,24 @@
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Stack, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function DokumenYangDiperlukan() {
   const dokumenDiperlukan = useProxy(stateJadwalKegiatan.dokumenjadwalkegiatan)
   return (
     <Box>
-      <Text pt={10} fw={"bold"}>Dokumen Yang Diperlukan</Text>
-      <KesehatanEditor
-      showSubmit={false}
-      onChange={(val)=> {
-        dokumenDiperlukan.create.form.content = val;
-      }}
-      />
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text pt={10} fw={"bold"}>Dokumen Yang Diperlukan</Text>
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              dokumenDiperlukan.create.form.content = val;
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/informasi_kegiatan/page.tsx

@@ -1,12 +1,15 @@
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
-import { Box, Text, TextInput } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, TextInput, Title } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 
 function InformasiKegiatan() {
   const informasiKegiatanState = useProxy(stateJadwalKegiatan.informasiKegiatan)
   return (
     <Box>
-      <Text pt={10} fw={"bold"}>Informasi Kegiatan</Text>
+     <Paper bg={colors['white-1']} p={'md'}>
+     <Stack gap={"xs"}>
+      <Title order={4}>Informasi Kegiatan</Title>
       <TextInput
         label="Nama Kegiatan"
         placeholder="Masukkan nama kegiatan"
@@ -35,6 +38,8 @@ function InformasiKegiatan() {
           informasiKegiatanState.create.form.lokasi = val.target.value
         }}
       />
+     </Stack>
+     </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/layanan_yang_tersedia/page.tsx

@@ -1,19 +1,24 @@
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Stack, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function LayananTersedia() {
   const layananTersediaState = useProxy(stateJadwalKegiatan.layanantersedia)
   return (
     <Box>
-      <Text pt={10} fw={"bold"}>Layanan Yang Tersedia</Text>
-      <KesehatanEditor
-      showSubmit={false}
-      onChange={(val) => {
-        layananTersediaState.create.form.content = val;
-      }}
-      />
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text pt={10} fw={"bold"}>Layanan Yang Tersedia</Text>
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              layananTersediaState.create.form.content = val;
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
-import { Box, Button, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import DeskripsiKegiatan from './deskripsi_kegiatan/page';
@@ -9,6 +9,7 @@ import InformasiKegiatan from './informasi_kegiatan/page';
 import LayananTersedia from './layanan_yang_tersedia/page';
 import Pendaftaran from './pendaftaran/page';
 import SyaratDanKetentuan from './syarat_dan_ketentuan/page';
+import colors from '@/con/colors';
 
 function JadwalKegiatan() {
   const allState = useProxy(stateJadwalKegiatan)
@@ -54,21 +55,25 @@ function JadwalKegiatan() {
         base: 1, md: 2
       }}>
         <Box>
-          <Title order={3}>Jadwal Kegiatan</Title>
-          <InformasiKegiatan />
-          <DeskripsiKegiatan />
-          <LayananTersedia />
-          <SyaratDanKetentuan />
-          <DokumenYangDiperlukan />
-          <Pendaftaran />
-          <Button mt={10} onClick={submitAllForms}>
-            Submit
-          </Button>
+          <Stack gap={"xs"}>
+            <Title order={4}>Tambah Jadwal Kegiatan</Title>
+            <InformasiKegiatan />
+            <DeskripsiKegiatan />
+            <LayananTersedia />
+            <SyaratDanKetentuan />
+            <DokumenYangDiperlukan />
+            <Pendaftaran />
+            <Button mt={10} onClick={submitAllForms}>
+              Submit
+            </Button>
+          </Stack>
         </Box>
 
         <Box>
-          <Title order={3}>List Jadwal Kegiatan</Title>
-          <AllList />
+          <Stack gap={"xs"}>
+            <Title order={4}>Data Jadwal Kegiatan</Title>
+            <AllList />
+          </Stack>
         </Box>
       </SimpleGrid>
     </Stack>
@@ -103,68 +108,82 @@ function AllList() {
     );
   }
   return (
-    <Stack>
-      <Title order={4}>Informasi Kegiatan</Title>
-      {allList.informasiKegiatan.findMany.data?.map((item) => {
-        return (
-          <Box key={item.id}>
-            <Text>{item.name}</Text>
-            <Text>{item.tanggal}</Text>
-            <Text>{item.waktu}</Text>
-            <Text>{item.lokasi}</Text>
-          </Box>
-        )
-      })}
+    <Stack gap={"xs"}>
 
-      <Title order={4}>Deskripsi Kegiatan</Title>
-      {allList.deskripsiKegiatan.findMany.data?.map((item) => {
-        return (
-          <Box key={item.id}>
-            <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-          </Box>
-        )
-      })}
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Informasi Kegiatan</Title>
+        {allList.informasiKegiatan.findMany.data?.map((item) => {
+          return (
+            <Box key={item.id}>
+              <Text>{item.name}</Text>
+              <Text>{item.tanggal}</Text>
+              <Text>{item.waktu}</Text>
+              <Text>{item.lokasi}</Text>
+            </Box>
+          )
+        })}
+      </Paper>
 
-      <Title order={4}>Layanan Yang Tersedia</Title>
-      {allList.layanantersedia.findMany.data?.map((item) => {
-        return (
-          <Box key={item.id}>
-            <Text dangerouslySetInnerHTML={{ __html: item.content }} />
-          </Box>
-        )
-      })}
+      <Paper bg={colors['white-1']} p={'md'}>
 
-      <Title order={4}>Syarat dan Ketentuan</Title>
-      {allList.syaratketentuan.findMany.data?.map((item) => {
-        return (
-          <Box key={item.id}>
-            <Text dangerouslySetInnerHTML={{ __html: item.content }} />
-          </Box>
-        )
-      })}
+        <Title order={4}>Deskripsi Kegiatan</Title>
+        {allList.deskripsiKegiatan.findMany.data?.map((item) => {
+          return (
+            <Box key={item.id}>
+              <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+            </Box>
+          )
+        })}
+      </Paper>
 
-      <Title order={4}>Dokumen Yang Diperlukan</Title>
-      {allList.dokumenjadwalkegiatan.findMany.data?.map((item) => {
-        return (
-          <Box key={item.id}>
-            <Text dangerouslySetInnerHTML={{ __html: item.content }} />
-          </Box>
-        )
-      })}
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Layanan Yang Tersedia</Title>
+        {allList.layanantersedia.findMany.data?.map((item) => {
+          return (
+            <Box key={item.id}>
+              <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+            </Box>
+          )
+        })}
+      </Paper>
 
-      <Title order={4}>Pendaftaran</Title>
-      {allList.pendaftaranjadwal.findMany.data?.map((item) => {
-        return (
-          <Box key={item.id}>
-            <Text>{item.name}</Text>
-            <Text>{item.tanggal}</Text>
-            <Text>{item.namaOrangtua}</Text>
-            <Text>{item.nomor}</Text>
-            <Text>{item.alamat}</Text>
-            <Text>{item.catatan}</Text>
-          </Box>
-        )
-      })}
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Syarat dan Ketentuan</Title>
+        {allList.syaratketentuan.findMany.data?.map((item) => {
+          return (
+            <Box key={item.id}>
+              <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+            </Box>
+          )
+        })}
+      </Paper>
+
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Dokumen Yang Diperlukan</Title>
+        {allList.dokumenjadwalkegiatan.findMany.data?.map((item) => {
+          return (
+            <Box key={item.id}>
+              <Text dangerouslySetInnerHTML={{ __html: item.content }} />
+            </Box>
+          )
+        })}
+      </Paper>
+
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Title order={4}>Pendaftaran</Title>
+        {allList.pendaftaranjadwal.findMany.data?.map((item) => {
+          return (
+            <Box key={item.id}>
+              <Text>{item.name}</Text>
+              <Text>{item.tanggal}</Text>
+              <Text>{item.namaOrangtua}</Text>
+              <Text>{item.nomor}</Text>
+              <Text>{item.alamat}</Text>
+              <Text>{item.catatan}</Text>
+            </Box>
+          )
+        })}
+      </Paper>
     </Stack>
   )
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/pendaftaran/page.tsx

@@ -1,56 +1,61 @@
 'use client'
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
-import { Box, Text, Textarea, TextInput } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Paper, Stack, Text, Textarea, TextInput } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 
 function Pendaftaran() {
-    const pendaftaran = useProxy(stateJadwalKegiatan.pendaftaranjadwal)
+  const pendaftaran = useProxy(stateJadwalKegiatan.pendaftaranjadwal)
 
   return (
     <Box>
-      <Text pt={10} fw={"bold"}>Pendaftaran</Text>
-      <TextInput
-      label='Nama Balita'
-      placeholder='Masukkan nama balita'
-      onChange={(val) => {
-        pendaftaran.create.form.name = val.target.value
-      }}
-      />
-      <TextInput
-      label='Tanggal'
-      placeholder='Masukkan tanggal'
-      onChange={(val) => {
-        pendaftaran.create.form.tanggal = val.target.value
-      }}
-      />
-      <TextInput
-      label='Nama Orang Tua / Wali'
-      placeholder='Masukkan nama orang tua / wali'
-      onChange={(val) => {
-        pendaftaran.create.form.namaOrangtua = val.target.value
-      }}
-      />
-      <TextInput
-      label='No. Telepon'
-      placeholder='Masukkan no. telepon'
-      onChange={(val) => {
-        pendaftaran.create.form.nomor = val.target.value
-      }}
-      />
-      <TextInput
-      label='Alamat'
-      placeholder='Masukkan alamat'
-      onChange={(val) => {
-        pendaftaran.create.form.alamat = val.target.value
-      }}
-      />
-      <Textarea
-      label='Catatan Khusus (Opsional)'
-      placeholder='Masukkan catatan khusus'
-      onChange={(val) => {
-        pendaftaran.create.form.catatan = val.target.value
-      }}
-      />
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text pt={10} fw={"bold"}>Pendaftaran</Text>
+          <TextInput
+            label='Nama Balita'
+            placeholder='Masukkan nama balita'
+            onChange={(val) => {
+              pendaftaran.create.form.name = val.target.value
+            }}
+          />
+          <TextInput
+            label='Tanggal'
+            placeholder='Masukkan tanggal'
+            onChange={(val) => {
+              pendaftaran.create.form.tanggal = val.target.value
+            }}
+          />
+          <TextInput
+            label='Nama Orang Tua / Wali'
+            placeholder='Masukkan nama orang tua / wali'
+            onChange={(val) => {
+              pendaftaran.create.form.namaOrangtua = val.target.value
+            }}
+          />
+          <TextInput
+            label='No. Telepon'
+            placeholder='Masukkan no. telepon'
+            onChange={(val) => {
+              pendaftaran.create.form.nomor = val.target.value
+            }}
+          />
+          <TextInput
+            label='Alamat'
+            placeholder='Masukkan alamat'
+            onChange={(val) => {
+              pendaftaran.create.form.alamat = val.target.value
+            }}
+          />
+          <Textarea
+            label='Catatan Khusus (Opsional)'
+            placeholder='Masukkan catatan khusus'
+            onChange={(val) => {
+              pendaftaran.create.form.catatan = val.target.value
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/jadwal_kegiatan/syarat_dan_ketentuan/page.tsx

@@ -1,19 +1,24 @@
 import stateJadwalKegiatan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
-import { Box, Text } from '@mantine/core';
+import { Box, Paper, Stack, Text } from '@mantine/core';
 import { useProxy } from 'valtio/utils';
 import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+import colors from '@/con/colors';
 
 function SyaratDanKetentuan() {
   const syaratKetentuan = useProxy(stateJadwalKegiatan.syaratketentuan)
   return (
     <Box>
-      <Text pt={10} fw={"bold"}>Syarat dan Ketentuan</Text>
-      <KesehatanEditor
-      showSubmit={false}
-      onChange={(val) => {
-        syaratKetentuan.create.form.content = val;
-      }}
-      />
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Text pt={10} fw={"bold"}>Syarat dan Ketentuan</Text>
+          <KesehatanEditor
+            showSubmit={false}
+            onChange={(val) => {
+              syaratKetentuan.create.form.content = val;
+            }}
+          />
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_ui/persentase_data_kelahiran_kematian/page.tsx

@@ -1,7 +1,8 @@
 'use client'
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import statePersentase from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
-import { Box, Button, Stack, TextInput, Title } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Skeleton, Stack, TextInput, Title } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
 import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
@@ -32,76 +33,90 @@ function PersentaseDataKelahiranKematian() {
     <Stack py={10}>
       {/* Form Input */}
       <Box>
-        <Title order={3}>Persentase Data Kelahiran & Kematian</Title>
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Tahun"
-          type="number"
-          value={persentase.create.form.tahun}
-          placeholder="Masukkan tahun"
-          onChange={(val) => {
-            persentase.create.form.tahun = val.currentTarget.value;
-          }}
-        />
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Kematian Kasar"
-          type="number"
-          value={persentase.create.form.kematianKasar}
-          placeholder="Masukkan kematian kasar"
-          onChange={(val) => {
-            persentase.create.form.kematianKasar = val.currentTarget.value;
-          }}
-        />
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Kematian Bayi"
-          type="number"
-          value={persentase.create.form.kematianBayi}
-          placeholder="Masukkan kematian bayi"
-          onChange={(val) => {
-            persentase.create.form.kematianBayi = val.currentTarget.value;
-          }}
-        />
-        <TextInput
-          w={{ base: '100%', md: '50%' }}
-          label="Kelahiran Kasar"
-          type="number"
-          value={persentase.create.form.kelahiranKasar}
-          placeholder="Masukkan kelahiran kasar"
-          onChange={(val) => {
-            persentase.create.form.kelahiranKasar = val.currentTarget.value;
-          }}
-        />
-        <Button
-          mt={10}
-          onClick={async () => {
-            await persentase.create.create();
-            await persentase.findMany.load();
-            if (persentase.findMany.data) {
-              setChartData(persentase.findMany.data);
-            }
-          }}
-        >
-          Submit
-        </Button>
+        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+          <Title order={4}>Tambah Persentase Data Kelahiran & Kematian</Title>
+          <Stack gap={"xs"}>
+            <TextInput
+              label="Tahun"
+              type="number"
+              value={persentase.create.form.tahun}
+              placeholder="Masukkan tahun"
+              onChange={(val) => {
+                persentase.create.form.tahun = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Kematian Kasar"
+              type="number"
+              value={persentase.create.form.kematianKasar}
+              placeholder="Masukkan kematian kasar"
+              onChange={(val) => {
+                persentase.create.form.kematianKasar = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Kematian Bayi"
+              type="number"
+              value={persentase.create.form.kematianBayi}
+              placeholder="Masukkan kematian bayi"
+              onChange={(val) => {
+                persentase.create.form.kematianBayi = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Kelahiran Kasar"
+              type="number"
+              value={persentase.create.form.kelahiranKasar}
+              placeholder="Masukkan kelahiran kasar"
+              onChange={(val) => {
+                persentase.create.form.kelahiranKasar = val.currentTarget.value;
+              }}
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                mt={10}
+                onClick={async () => {
+                  await persentase.create.create();
+                  await persentase.findMany.load();
+                  if (persentase.findMany.data) {
+                    setChartData(persentase.findMany.data);
+                  }
+                }}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Box>
 
       {/* Chart */}
-      <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-        <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
-        {mounted && chartData.length > 0 && (
-          <BarChart width={isMobile ? 450 : isTablet ? 600 : 900} height={380} data={chartData} >
-            <XAxis dataKey="tahun" />
-            <YAxis />
-            <Tooltip />
-            <Legend />
-            <Bar dataKey="kematianKasar" fill="#f03e3e" name="Kematian Kasar" />
-            <Bar dataKey="kematianBayi" fill="#ff922b" name="Kematian Bayi" />
-            <Bar dataKey="kelahiranKasar" fill="#4dabf7" name="Kelahiran Kasar" />
-          </BarChart>
-        )}
-      </Box>
+      {!mounted && !chartData ? (
+        <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
+            <Skeleton h={400} />
+          </Paper>
+        </Box>
+      ) : (
+        <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Title pb={10} order={4}>Data Kelahiran & Kematian</Title>
+            {mounted && chartData.length > 0 && (
+              <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
+                <XAxis dataKey="tahun" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Bar dataKey="kematianKasar" fill="#f03e3e" name="Kematian Kasar" />
+                <Bar dataKey="kematianBayi" fill="#ff922b" name="Kematian Bayi" />
+                <Bar dataKey="kelahiranKasar" fill="#4dabf7" name="Kelahiran Kasar" />
+              </BarChart>
+            )}
+          </Paper>
+        </Box>
+      )}
     </Stack>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/page.tsx

@@ -1,5 +1,5 @@
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import ArtikelKesehatan from './_ui/artikel_kesehatan/page';
 import FasilitasKesehatan from './_ui/fasilitas_kesehatan/page';
 import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan/page';
@@ -10,8 +10,9 @@ import PersentaseDataKelahiranKematian from './_ui/persentase_data_kelahiran_kem
 function Page() {
   return (
     <Stack>
+      <Title order={3}>Data Kesehatan Warga</Title>
       <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Persentase Kelahiran & Kematian"}>
-        <TabsList >
+        <TabsList bg={colors['BG-trans']} p={'xs'}>
           <TabsTab value="Persentase Kelahiran & Kematian">
             Persentase Kelahiran & Kematian
           </TabsTab>

src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx

@@ -1,11 +1,54 @@
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
 import React from 'react';
+import { KesehatanEditor } from '../_com/kesehatanEditor';
 
-function Page() {
+function Posyandu() {
   return (
-    <div>
-      Posyandu
-    </div>
+    <Box>
+      <Title order={3}>Kesehatan</Title>
+      <SimpleGrid py={10} cols={{ base: 1, md: 2 }}>
+        <Box>
+          <Paper bg={colors['white-1']} p={"md"}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Posyandu</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Nama Posyandu</Text>}
+                placeholder='masukkan nama posyandu'
+              />
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Nomor Telepon Posyandu</Text>}
+                placeholder='masukkan nomor telepon posyandu'
+              />
+              <Box>
+              <Text fz={"sm"} fw={"bold"}>Deskripsi Posyandu</Text>
+              <KesehatanEditor
+                showSubmit={false}
+                />
+                </Box>
+                <Box>
+              <Text fz={"sm"} fw={"bold"}>Pelayanan Posyandu</Text>
+              <KesehatanEditor
+                showSubmit={false}
+                />
+                </Box>
+              <Group>
+                <Button bg={colors['blue-button']}>Submit</Button>
+              </Group>
+
+            </Stack>
+          </Paper>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={"md"}>
+            <Stack>
+              <Title order={3}>Preview Data Posyandu</Title>
+            </Stack>
+          </Paper>
+        </Box>
+      </SimpleGrid>
+    </Box>
   );
 }
 
-export default Page;
+export default Posyandu;

src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx

@@ -1,11 +1,34 @@
-import React from 'react';
+import colors from '@/con/colors';
+import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import UpdatePuskesmas from './ui/Edit-Puskesmas/updatePuskesmas';
+import CreatePuskesmas from './ui/Tambah-Puskesmas/createPuskesmas';
 
-function Page() {
+function Puskesmas() {
   return (
-    <div>
-      Puskesmas
-    </div>
+    <Stack gap={"xs"}>
+      <Box>
+        <Title order={3}>Puskesmas</Title>
+        <Tabs defaultValue="create" color={colors['blue-button']} variant='pills'>
+          <TabsList mb={10} bg={colors['BG-trans']} p={'xs'}>
+            <TabsTab value="create" >
+              Tambah Puskesmas
+            </TabsTab>
+            <TabsTab value="update" >
+              Edit Puskesmas
+            </TabsTab>
+          </TabsList>
+
+          <TabsPanel value="create">
+            <CreatePuskesmas />
+          </TabsPanel>
+
+          <TabsPanel value="update">
+            <UpdatePuskesmas />
+          </TabsPanel>
+        </Tabs>
+      </Box>
+    </Stack>
   );
 }
 
-export default Page;
+export default Puskesmas;

src/app/admin/(dashboard)/kesehatan/puskesmas/ui/Edit-Puskesmas/updatePuskesmas.tsx

@@ -0,0 +1,55 @@
+import colors from '@/con/colors';
+import { Box, Stack, SimpleGrid, Paper, Title, TextInput, Text } from '@mantine/core';
+import React from 'react';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function UpdatePuskesmas() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={"md"}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Edit Puskesmas</Title>
+                <TextInput
+                  label={<Text fw={"bold"} fz={"sm"}>Nama Puskesmas</Text>}
+                  placeholder='Masukkan nama puskesmas'
+                />
+                <TextInput
+                  label={<Text fw={"bold"} fz={"sm"}>No Telp Puskesmas</Text>}
+                  placeholder='Masukkan no telp puskesmas'
+                />
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+                  <KesehatanEditor
+                    showSubmit={false}
+                  />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
+                  <KesehatanEditor
+                    showSubmit={false}
+                  />
+                </Box>
+              </Stack>
+            </Paper>
+          </Box>
+          <Box>
+            <Paper bg={colors['white-1']} p={"md"}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Preview Data Puskesmas</Title>
+                <Text fw={"bold"} fz={"sm"}>Nama Puskesmas</Text>
+                <Text fw={"bold"} fz={"sm"}>No Telp Puskesmas</Text>
+                <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+                <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
+              </Stack>
+            </Paper>
+          </Box>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default UpdatePuskesmas;

src/app/admin/(dashboard)/kesehatan/puskesmas/ui/Tambah-Puskesmas/createPuskesmas.tsx

@@ -0,0 +1,55 @@
+import colors from '@/con/colors';
+import { Box, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import React from 'react';
+import { KesehatanEditor } from '../../../_com/kesehatanEditor';
+
+function CreatePuskesmas() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <SimpleGrid cols={{ base: 1, md: 2 }}>
+          <Box>
+            <Paper bg={colors['white-1']} p={"md"}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Tambah Puskesmas</Title>
+                <TextInput
+                  label={<Text fw={"bold"} fz={"sm"}>Nama Puskesmas</Text>}
+                  placeholder='Masukkan nama puskesmas'
+                />
+                <TextInput
+                  label={<Text fw={"bold"} fz={"sm"}>No Telp Puskesmas</Text>}
+                  placeholder='Masukkan no telp puskesmas'
+                />
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+                  <KesehatanEditor
+                    showSubmit={false}
+                  />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
+                  <KesehatanEditor
+                    showSubmit={false}
+                  />
+                </Box>
+              </Stack>
+            </Paper>
+          </Box>
+          <Box>
+            <Paper bg={colors['white-1']} p={"md"}>
+              <Stack gap={"xs"}>
+                <Title order={4}>Preview Data Puskesmas</Title>
+                <Text fw={"bold"} fz={"sm"}>Nama Puskesmas</Text>
+                <Text fw={"bold"} fz={"sm"}>No Telp Puskesmas</Text>
+                <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+                <Text fw={"bold"} fz={"sm"}>Pelayanan Posyandu</Text>
+              </Stack>
+            </Paper>
+          </Box>
+        </SimpleGrid>
+      </Stack>
+    </Box>
+  );
+}
+
+export default CreatePuskesmas;

src/app/admin/(dashboard)/ppid/_com/ppid_Editor.tsx

@@ -10,7 +10,7 @@ import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 
 const content =
-  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
+  '<p>Dokumen yang berisi kebijakan dan regulasi desa</p>';
 
 export function PPIDEditor({ onSubmit, onChange, showSubmit = true }: { 
   onSubmit?: (val: string) => void, 

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -1,11 +1,10 @@
 'use client'
+import colors from '@/con/colors';
 import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, TextInput, Title } from '@mantine/core';
-import React from 'react';
+import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import stateDaftarInformasiPublik from '../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
-import { PPIDEditor } from '../_com/ppid_Editor';
-import colors from '@/con/colors';
-import { useShallowEffect } from '@mantine/hooks';
+import { PPIDTextEditor } from '../_com/PPIDTextEditor';
 
 function Page() {
   const daftarInformasi = useProxy(stateDaftarInformasiPublik.daftarInformasi)
@@ -30,7 +29,7 @@ function Page() {
                   daftarInformasi.create.form.jenisInformasi = val.target.value
                 }}
               />
-              <PPIDEditor
+              <PPIDTextEditor
                 showSubmit={false}
                 onChange={(val) => {
                   daftarInformasi.create.form.deskripsi = val
@@ -68,46 +67,50 @@ function ListDaftarInformasi() {
   if (!listData.findMany.data) return <Stack>
     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
   </Stack>
-  return <Paper bg={colors['white-1']} p={'md'}>
-    <Stack gap={"xs"}>
-      <Title fw={"bold"} order={3}>List Daftar Informasi Publik Desa Darmasaba</Title>
-      <Table
-        suppressHydrationWarning
-        striped
-        highlightOnHover
-        withTableBorder
-        withColumnBorders
-        bg={colors['white-1']}
-      >
-        <TableThead>
-          <TableTr>
-            <TableTh>
-              No
-            </TableTh>
-            <TableTh>
-              Jenis Informasi
-            </TableTh>
-            <TableTh>
-              Deskripsi
-            </TableTh>
-            <TableTh>
-              Tanggal Publikasi
-            </TableTh>
-          </TableTr>
-        </TableThead>
-        <TableTbody>
-          {listData.findMany.data?.map((item) => (
-            <TableTr key={item.id}>
-              <TableTd>{item.nomor}</TableTd>
-              <TableTd>{item.jenisInformasi}</TableTd>
-              <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
-              <TableTd>{item.tanggal}</TableTd>
-            </TableTr>
-          ))}
-        </TableTbody>
-      </Table>
-    </Stack>
-  </Paper>
+  return (
+    <Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title fw={"bold"} order={3}>List Daftar Informasi Publik Desa Darmasaba</Title>
+          <Table
+            suppressHydrationWarning
+            striped
+            highlightOnHover
+            withTableBorder
+            withColumnBorders
+            bg={colors['white-1']}
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh>
+                  No
+                </TableTh>
+                <TableTh>
+                  Jenis Informasi
+                </TableTh>
+                <TableTh>
+                  Deskripsi
+                </TableTh>
+                <TableTh>
+                  Tanggal Publikasi
+                </TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {listData.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.nomor}</TableTd>
+                  <TableTd>{item.jenisInformasi}</TableTd>
+                  <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
+                  <TableTd>{item.tanggal}</TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Stack>
+      </Paper>
+    </Box>
+  )
 }
 
 export default Page;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/page.tsx

@@ -1,4 +1,4 @@
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import React from 'react';
 import colors from '@/con/colors';
 import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan_masyarakat/page';
@@ -8,9 +8,10 @@ import GrafikBerdasarakanUmur from './_ui/grafik_berdasarkan_umur/page';
 
 function Page() {
   return (
-    <Stack>
-      <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik"}>
-        <TabsList>
+    <Stack >
+      <Title order={3}>Indeks Kepuasan Masyarakat (IKM) Desa Darmasaba</Title>
+      <Tabs  color={colors['blue-button']} variant='pills' defaultValue={"Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik"}>
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
           <TabsTab value="Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik">
             Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
           </TabsTab>

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/jenisInformasi.tsx

@@ -1,41 +0,0 @@
-import { Prisma } from '@prisma/client';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-import { useShallowEffect } from '@mantine/hooks';
-import { Group, Select, Skeleton } from '@mantine/core';
-
-function JenisInformasi({ onChange }: {
-  onChange: (value: Prisma.JenisInformasiDimintaGetPayload<{
-    select: {
-      id: true,
-      name: true
-    }
-  }>) => void
-}) {
-  const jenisInformasiState = useProxy(statePermohonanInformasi.jenisInformasiDiminta)
-  useShallowEffect(() => {
-    jenisInformasiState.findMany.load()
-  }, [])
-
-  if (!jenisInformasiState.findMany.data) return <Skeleton h={40} />
-  return (
-    <Group>
-      <Select
-        placeholder='pilih jenis informasi'
-        label={'select jenis informasi'}
-        data={jenisInformasiState.findMany.data.map((item) => ({
-          value: item.id,
-          label: item.name
-        }))}
-        onChange={(v) => {
-          const data = jenisInformasiState.findMany.data?.find((item) => item.id === v)
-          if (!data) return
-          onChange(data)
-        }}
-      />
-    </Group>
-  );
-}
-
-export default JenisInformasi;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/memperolehInformasi.tsx

@@ -1,38 +0,0 @@
-import { Group, Select } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-
-function MemperolehInformasi({ onChange }: {
-  onChange: (value: Prisma.CaraMemperolehInformasiGetPayload<{
-    select: {
-      id: true,
-      name: true
-    }
-  }>) => void
-}) {
-  const memperolehInformasiState = useProxy(statePermohonanInformasi.caraMemperolehInformasi)
-  
-  useShallowEffect(() => {
-    memperolehInformasiState.findMany.load()
-  }, [])
-  return (
-    <Group>
-      <Select
-        placeholder='pilih katagori'
-        label={"select katagori"}
-        data={memperolehInformasiState.findMany.data?.map((item) => ({
-          value: item.id,
-          label: item.name
-        }))} onChange={(v) => {
-          const data = memperolehInformasiState.findMany.data?.find((item) => item.id === v)
-          if (!data) return
-          onChange(data)
-        }} />
-    </Group>
-  );
-}
-
-export default MemperolehInformasi;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/memperolehSalinan.tsx

@@ -1,45 +0,0 @@
-import { Group, Select, Skeleton } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-
-function MemperolehSalinan({ onChange }: {
-  onChange: (value: Prisma.CaraMemperolehSalinanInformasiGetPayload<{
-    select: {
-      id: true,
-      name: true
-    }
-  }>) => void
-}) {
-  const memperolehSalinanInformasiState = useProxy(statePermohonanInformasi.caraMemperolehSalinanInformasi)
-  useShallowEffect(() => {
-    memperolehSalinanInformasiState.findMany.load()
-  }, [])
-
-  if (!memperolehSalinanInformasiState.findMany.data) return <Skeleton h={40} />
-  return (
-    <Group>
-      <Select
-        placeholder='pilih salinan informasi'
-        label={'select salinan informasi'}
-        data={memperolehSalinanInformasiState.findMany.data.map((item) => ({
-          value: item.id,
-          label: item.name
-        }))}
-        onChange={(v) => {
-          if (!v) return
-          const selectedItem = memperolehSalinanInformasiState.findMany.data?.find(item => item.id === v)
-          if (selectedItem) {
-            onChange({
-              id: selectedItem.id,
-              name: selectedItem.name
-            })
-          }
-        }}
-      />
-    </Group>
-  );
-}
-export default MemperolehSalinan;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx

@@ -1,115 +1,57 @@
 'use client'
-import { Box, Button, Group, Paper, SimpleGrid, Stack, TextInput, Title } from '@mantine/core';
-import { useProxy } from 'valtio/utils';
-import statePermohonanInformasi from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
-import JenisInformasi from './jenisInformasi';
-import MemperolehInformasi from './memperolehInformasi';
-import MemperolehSalinan from './memperolehSalinan';
 import colors from '@/con/colors';
+import { Box, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import statepermohonanInformasiPublikForm from '../../_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik';
 
 function Page() {
+  const permohonanInformasiPublikState = useProxy(statepermohonanInformasiPublikForm)
+  useShallowEffect(() => {
+    permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.load()
+  }, [])
+  if (!permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data) return <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+
   return (
-    <Box>
-      <Stack>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <PermohonanInformasiPublikCreate />
-        </SimpleGrid>
-      </Stack>
+    <Box py={5}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Permohonan Informasi Publik</Title>
+          <Box p={"xl"}>
+            <Table striped withRowBorders withColumnBorders withTableBorder>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>NIK</TableTh>
+                  <TableTh>Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Jenis Informasi</TableTh>
+                  <TableTh>Cara Memperoleh Informasi</TableTh>
+                  <TableTh>Cara Memperoleh Salinan Informasi</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data?.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{index + 1}</TableTd>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>{item.nik}</TableTd>
+                    <TableTd>{item.notelp}</TableTd>
+                    <TableTd>{item.email}</TableTd>
+                    <TableTd>{item.jenisInformasiDiminta?.name}</TableTd>
+                    <TableTd>{item.caraMemperolehInformasi?.name}</TableTd>
+                    <TableTd>{item.caraMemperolehSalinanInformasi?.name}</TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table> </Box>
+        </Stack>
+      </Paper>
     </Box>
   );
 }
 
-function PermohonanInformasiPublikCreate() {
-  const permohonanInformasiPublikState = useProxy(statePermohonanInformasi)
-  const submitForms = () => {
-    // Tambahkan log untuk debugging
-    console.log("Form data sebelum submit:", {
-      name: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.name,
-      nik: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.nik,
-      notelp: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.notelp,
-      alamat: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.alamat,
-      email: permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.email,
-      jenisInformasiDimintaId: permohonanInformasiPublikState.jenisInformasiDiminta,
-      caraMemperolehInformasiId: permohonanInformasiPublikState.caraMemperolehInformasi,
-      caraMemperolehSalinanInformasiId: permohonanInformasiPublikState.caraMemperolehSalinanInformasi
-    });
-
-    if (permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.name &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.nik &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.notelp &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.alamat &&
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.email &&
-      permohonanInformasiPublikState.jenisInformasiDiminta &&
-      permohonanInformasiPublikState.caraMemperolehInformasi &&
-      permohonanInformasiPublikState.caraMemperolehSalinanInformasi) {
-      permohonanInformasiPublikState.permohonanInformasiPublikForm.create.create()
-    } else {
-      console.log("Validasi gagal, form tidak lengkap");
-      // Tampilkan pesan error ke pengguna di sini
-    }
-  }
-  return (
-    <Box py={5}>
-      <Paper bg={colors['white-1']} p={'md'}>
-      <Stack gap={"10"}>
-        <Title order={3}>Permohonan Informasi Publik</Title>
-        <TextInput
-          label="Nama Lengkap"
-          placeholder="masukkan nama lengkap"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.name = val.target.value
-          }}
-        />
-        <TextInput
-          label="NIK"
-          placeholder="masukkan NIK"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.nik = val.target.value
-          }}
-        />
-        <TextInput
-          label="No.Telp"
-          placeholder="masukkan no telp"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.notelp = val.target.value
-          }}
-        />
-        <TextInput
-          label="Alamat"
-          placeholder="masukkan alamat"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.alamat = val.target.value
-          }}
-        />
-        <TextInput
-          label="Email"
-          placeholder="masukkan email"
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.email = val.target.value
-          }}
-        />
-        <JenisInformasi
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.jenisInformasiDimintaId = val.id
-          }}
-        />
-        <MemperolehInformasi
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.caraMemperolehInformasiId = val.id
-          }}
-        />
-        <MemperolehSalinan
-          onChange={(val) => {
-            permohonanInformasiPublikState.permohonanInformasiPublikForm.create.form.caraMemperolehSalinanInformasiId = val.id
-          }}
-        />
-        <Group>
-          <Button onClick={submitForms}>Submit</Button>
-        </Group>
-      </Stack>
-    </Paper>
-    </Box >
-  )
-}
-
 export default Page;

src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx

@@ -1,73 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
+import { Box, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import statePermohonanKeberatan from '../../_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi';
-import { useShallowEffect } from '@mantine/hooks';
 
 function Page() {
-  return (
-    <Box>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <PermohonanKeberatanInformasiCreate />
-        <PermohonanKeberatanInformasiList />
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-function PermohonanKeberatanInformasiCreate() {
-  const state = useProxy(statePermohonanKeberatan.permohonanKeberatanInformasiForm)
-  const submit = () => {
-    if (state.create.form.name && state.create.form.email && state.create.form.notelp && state.create.form.alasan) {
-      state.create.create()
-    }
-  }
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Permohonan Keberatan Informasi Publik</Title>
-          <TextInput
-            label="Nama"
-            placeholder="masukkan nama lengkap"
-            onChange={(val) => {
-              state.create.form.name = val.target.value
-            }}
-          />
-          <TextInput
-            label="Email"
-            placeholder="masukkan email"
-            onChange={(val) => {
-              state.create.form.email = val.target.value
-            }}
-          />
-          <TextInput
-            label="Nomor Telepon"
-            placeholder="masukkan nomor telepon"
-            onChange={(val) => {
-              state.create.form.notelp = val.target.value
-            }}
-          />
-          <TextInput
-            label="Alasan Keberatan"
-            placeholder="masukkan alasan keberatan"
-            onChange={(val) => {
-              state.create.form.alasan = val.target.value
-            }}
-          />
-          <Group>
-            <Button onClick={submit} bg={colors['blue-button']}>Kirim Permohonan</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-function PermohonanKeberatanInformasiList() {
-  const listState = useProxy(statePermohonanKeberatan.permohonanKeberatanInformasiForm)
+  const listState = useProxy(statePermohonanKeberatan)
   useShallowEffect(() => {
     listState.findMany.load()
   }, [])
@@ -75,24 +14,36 @@ function PermohonanKeberatanInformasiList() {
   if (!listState.findMany.data) return <Stack>
     {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
   </Stack>
-
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={3}>Permohonan Keberatan Informasi Publik</Title>
-          {listState.findMany.data?.map((item) => (
-            <Box key={item.id}>
-              <Text>Nama: {item.name}</Text>
-              <Text>Email: {item.email}</Text>
-              <Text>Telepon: {item.notelp}</Text>
-              <Text>Alasan: {item.alasan}</Text>
-            </Box>
-          ))}
+          <Table striped withRowBorders withColumnBorders withTableBorder>
+            <TableThead>
+              <TableTr>
+                <TableTh>No</TableTh>
+                <TableTh>Nama</TableTh>
+                <TableTh>Email</TableTh>
+                <TableTh>Telepon</TableTh>
+                <TableTh>Alasan</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {listState.findMany.data?.map((item, index) => (
+                <TableTr key={item.id}>
+                  <TableTd>{index + 1}</TableTd>
+                  <TableTd>{item.name}</TableTd>
+                  <TableTd>{item.email}</TableTd>
+                  <TableTd>{item.notelp}</TableTd>
+                  <TableTd dangerouslySetInnerHTML={{ __html: item.alasan }} />
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
         </Stack>
       </Paper>
     </Box>
-  )
+  );
 }
-
 export default Page;

src/app/admin/(dashboard)/ppid/profile-ppid/biodata/page.tsx

@@ -1,18 +1,18 @@
 'use client'
 import { Box, Group, Text } from '@mantine/core';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
+import ApiFetch from '@/lib/api-fetch';
+import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
+import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
 import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
 import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
-import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
-import { IconUpload, IconX, IconPhoto } from '@tabler/icons-react';
-import ApiFetch from '@/lib/api-fetch';
-
 
 function Biodata() {
   const biodataState = useProxy(stateProfilePPID)
   const [loading, setLoading] = useState(false);
+  
   return (<Box>
     <Text fw={"bold"}>Biodata</Text>
     <Dropzone
@@ -55,6 +55,9 @@ function Biodata() {
         </div>
       </Group>
     </Dropzone>
+    
+    
+    
     <PPIDTextEditor
       key={biodataState.findById.data?.id ?? 'new'}
       showSubmit={false}
@@ -67,8 +70,7 @@ function Biodata() {
     />
    
   </Box>
-
   );
 }
 
-export default Biodata;
+export default Biodata;

src/app/admin/(dashboard)/ppid/profile-ppid/listPage.tsx

@@ -25,19 +25,16 @@ function ProfileList() {
         <Title order={3}>List Profile PPID</Title>
         {dataArray.map((item) => (
           <Box key={item.id}>
-            <Box>
-              <Text fw={"bold"}>Gambar</Text>
-              {item.imageUrl ? (
+            {item.imageUrl && (
+              <Box mb={20}>
+                <Text fw={"bold"} mb={5}>Preview Gambar:</Text>
                 <Image
-                  src={item.imageUrl}
-                  alt="Foto Profil"
+                  src={item.imageUrl ?? '/perbekel.png'}
+                  alt="Profile"
                   w={200}
-                  radius="md"
                 />
-              ) : (
-                <Text c="dimmed">Belum ada foto</Text>
-              )}
-            </Box>
+              </Box>
+            )}
             <Box>
               <Text fw={"bold"}>Nama</Text>
               <Text dangerouslySetInnerHTML={{ __html: item.name }}></Text>

src/app/admin/(dashboard)/ppid/profile-ppid/page.tsx

@@ -9,6 +9,8 @@ import { useProxy } from 'valtio/utils';
 import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
 import { useShallowEffect } from '@mantine/hooks';
 import ProfileList from './listPage';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
 
 
 function Page() {
@@ -23,14 +25,16 @@ function Page() {
 }
 
 function ProfileCreate() {
+  const [isLoading, setIsLoading] = useState(false)
   const allState = useProxy(stateProfilePPID)
-  
+
   // Initialize data if it doesn't exist
   useShallowEffect(() => {
-    if (!allState.findById.data) {
+    if (!allState.findById.data && isLoading) {
       allState.findById.initialize()
+      setIsLoading(false)
     }
-  }, [])
+  }, [isLoading])
 
   const submit = () => {
     if (
@@ -41,6 +45,12 @@ function ProfileCreate() {
       allState.findById.data?.unggulan
     ) {
       allState.update.save(allState.findById.data)
+      setIsLoading(true)
+      toast.success("success")
+      console.log("[SUBMIT SUCCESS]", JSON.stringify(allState.findById.data, null, 2))
+      allState.findById.initialize()
+    } else {
+      toast.error("error")
     }
   }
 
@@ -63,8 +73,8 @@ function ProfileCreate() {
         <PengalamanOrganisasi />
         <ProgramKerjaUnggulan />
         <Group>
-          <Button 
-            bg={colors['blue-button']} 
+          <Button
+            bg={colors['blue-button']}
             onClick={submit}
             loading={allState.update.loading}
           >

src/app/admin/layout.tsx

@@ -1,6 +1,19 @@
 'use client'
+
 import colors from "@/con/colors";
-import { ActionIcon, AppShell, AppShellHeader, AppShellMain, AppShellNavbar, Burger, Group, Image, NavLink, ScrollArea, Text } from "@mantine/core";
+import {
+  ActionIcon,
+  AppShell,
+  AppShellHeader,
+  AppShellMain,
+  AppShellNavbar,
+  Burger,
+  Group,
+  Image,
+  NavLink,
+  ScrollArea,
+  Text
+} from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import _ from 'lodash';
@@ -10,75 +23,106 @@ import { navBar } from "./_com/list_PageAdmin";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   const [opened, { toggle }] = useDisclosure();
-  const [desktopOpened, { toggle: toggleDesktop }] =
-    useDisclosure(true);
+  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
 
+  // Normalisasi semua segmen jadi lowercase
+  const segments = useSelectedLayoutSegments().map(s => _.lowerCase(s));
 
-  const segments = useSelectedLayoutSegments()
   return (
     <AppShell
       suppressHydrationWarning
       header={{ height: 60 }}
       navbar={{
-        width: 300, breakpoint: 'sm', collapsed: { mobile: !opened, desktop: !desktopOpened }
+        width: 300,
+        breakpoint: 'sm',
+        collapsed: {
+          mobile: !opened,
+          desktop: !desktopOpened,
+        },
       }}
       padding={'md'}
     >
       <AppShellHeader bg={colors["white-trans-1"]}>
         <Group px={10} align="center">
-          {!desktopOpened && <ActionIcon variant="light" onClick={toggleDesktop}><IconChevronRight /></ActionIcon>}
-          <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size={'sm'} />
-          <ActionIcon w={50} h={50} variant="transparent" component={Link} href="/admin">
-            <Image py={5} src={'/assets/images/darmasaba-icon.png'} alt="" width={50} height={50} />
+          {!desktopOpened && (
+            <ActionIcon variant="light" onClick={toggleDesktop}>
+              <IconChevronRight />
+            </ActionIcon>
+          )}
+          <Burger
+            opened={opened}
+            onClick={toggle}
+            hiddenFrom="sm"
+            size={'sm'}
+          />
+          <ActionIcon
+            w={50}
+            h={50}
+            variant="transparent"
+            component={Link}
+            href="/admin"
+          >
+            <Image
+              py={5}
+              src={'/assets/images/darmasaba-icon.png'}
+              alt=""
+              width={50}
+              height={50}
+            />
           </ActionIcon>
-          <Text fw={'bold'} c={colors["blue-button"]} fz={'lg'}>Dashboard Admin</Text>
+          <Text fw={'bold'} c={colors["blue-button"]} fz={'lg'}>
+            Dashboard Admin
+          </Text>
         </Group>
       </AppShellHeader>
-      <AppShellNavbar
 
-        c={colors["blue-button"]}
-        component={ScrollArea}
-      >
-        <AppShell.Section >
+      <AppShellNavbar c={colors["blue-button"]} component={ScrollArea}>
+        <AppShell.Section>
           {navBar.map((v, k) => {
+            const isParentActive = segments.includes(_.lowerCase(v.name));
+
             return (
               <NavLink
-                c={_.lowerCase(v.name) == segments[1] ? colors["blue-button"] : "grey"}
                 key={k}
-                defaultOpened={_.lowerCase(v.name) == segments[1]}
-                // onClick={() => setActive(k)}
-                label={<Text
-                  style={{ fontWeight: _.lowerCase(v.name) == segments[1] ? "bold" : "normal" }}
-                >{v.name}</Text>}
+                defaultOpened={isParentActive}
+                c={isParentActive ? colors["blue-button"] : "grey"}
+                label={
+                  <Text style={{ fontWeight: isParentActive ? "bold" : "normal" }}>
+                    {v.name}
+                  </Text>
+                }
               >
                 {v.children.map((child, key) => {
+                  const isChildActive = segments.includes(_.lowerCase(child.name));
+
                   return (
                     <NavLink
-                      c={_.lowerCase(child.name) == _.lowerCase(segments[2]) ? colors["blue-button"] : "grey"}
                       key={key}
                       href={child.path}
-                      // active={isClient && Number(child.id) === active}
-                      // onClick={() => setActive(Number(child.id))}
-                      label={<Text
-                        style={{ fontWeight: _.lowerCase(child.name) == _.lowerCase(segments[2]) ? "bold" : "normal" }}
-                      >{child.name}</Text>}
+                      c={isChildActive ? colors["blue-button"] : "grey"}
+                      label={
+                        <Text style={{ fontWeight: isChildActive ? "bold" : "normal" }}>
+                          {child.name}
+                        </Text>
+                      }
                     />
-                  )
+                  );
                 })}
               </NavLink>
-            )
+            );
           })}
         </AppShell.Section>
 
         <AppShell.Section py={20}>
           <Group justify="end">
-            <ActionIcon variant="light" onClick={toggleDesktop}><IconChevronLeft /></ActionIcon>
+            <ActionIcon variant="light" onClick={toggleDesktop}>
+              <IconChevronLeft />
+            </ActionIcon>
           </Group>
         </AppShell.Section>
       </AppShellNavbar>
-      <AppShellMain bg={colors.Bg}>
-        {children}
-      </AppShellMain>
+
+      <AppShellMain bg={colors.Bg}>{children}</AppShellMain>
     </AppShell>
   );
-}
+}

src/app/api/[[...slugs]]/_lib/desa/index.ts

@@ -1,9 +1,11 @@
 import Elysia from "elysia";
 import Berita from "./berita";
 import Pengumuman from "./pengumuman";
+import ProfileDesa from "./profile/profile_desa";
 
 const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
   .use(Berita)
   .use(Pengumuman)
+  .use(ProfileDesa)
 
 export default Desa;

src/app/api/[[...slugs]]/_lib/desa/profile/profilePerbekel/update.ts

@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.ProfilPerbekelGetPayload<{
+    select: {
+        id: true;
+        biodata: true;
+        pengalaman: true;
+        pengalamanOrganisasi: true;
+        programUnggulan: true;
+    }
+}>
+export default async function profilePerbekelUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.profilPerbekel.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            biodata: body.biodata,
+            pengalaman: body.pengalaman,
+            pengalamanOrganisasi: body.pengalamanOrganisasi,
+            programUnggulan: body.programUnggulan,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Profile Perbekel Berhasil Diupdate",
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/find-by-id.ts

@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function profileDesaFindById(context: Context) {
+  try {
+    const id = context?.params?.slugs?.[0];
+
+    // If no ID provided, get the first profile
+    if (!id) {
+      const data = await prisma.profileDesa.findFirst();
+      return {
+        success: true,
+        data,
+      };
+    }
+
+    const data = await prisma.profileDesa.findUniqueOrThrow({
+      where: { id },
+    });
+
+    return {
+      success: true,
+      data,
+    };
+  } catch (error) {
+    console.error("Error fetching profileDesa:", error);
+
+    return {
+      success: false,
+      message: error instanceof Error ? error.message : "Unknown error",
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/index.ts

@@ -0,0 +1,51 @@
+import Elysia, { t } from "elysia";
+import lambangDesaUpdate from "./lambangDesa/update";
+import maskotDesaUpdate from "./maskotDesa/update";
+import profilePerbekelUpdate from "../profilePerbekel/update";
+import sejarahDesaUpdate from "./sejarah/update";
+import visimisiDesaUpdate from "./visimisiDesa/update";
+import profileDesaFindById from "./find-by-id";
+
+const ProfileDesa = new Elysia({
+    prefix: "/profile",
+    tags: ["Desa/Profile"]
+})
+.get("/find-by-id", profileDesaFindById)
+.post("/profilePerbekel/update", profilePerbekelUpdate, {
+    body: t.Object({
+        id: t.String(),
+        biodata: t.String(),
+        pengalaman: t.String(),
+        pengalamanOrganisasi: t.String(),
+        programUnggulan: t.String(),
+    })
+})
+.post("/visimisiDesa/update", visimisiDesaUpdate, {
+    body: t.Object({
+        id: t.String(),
+        visi: t.String(),
+        misi: t.String(),
+    })
+})
+.post("/sejarah/update", sejarahDesaUpdate, {
+    body: t.Object({
+        id: t.String(),
+        sejarah: t.String(),
+    })
+})
+.post("/lambangDesa/update", lambangDesaUpdate, {
+    body: t.Object({
+        id: t.String(),
+        lambang: t.String(),
+    })
+})
+.post("/maskotDesa/update", maskotDesaUpdate, {
+    body: t.Object({
+        id: t.String(),
+        maskot: t.String(),
+    })
+})
+
+
+
+export default ProfileDesa

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/lambangDesa/update.ts

@@ -0,0 +1,28 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        lambang: true;
+    }
+}>
+
+export default async function lambangDesaUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.profileDesa.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            lambang: body.lambang,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Profile Desa Berhasil Diupdate",
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/maskotDesa/update.ts

@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        maskot: true;
+    }
+}>
+
+export default async function maskotDesaUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.profileDesa.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            maskot: body.maskot,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Profile Desa Berhasil Diupdate",
+    }
+}
+        

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/sejarah/update.ts

@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        sejarah: true;
+    }
+}>
+
+export default async function sejarahDesaUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.profileDesa.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            sejarah: body.sejarah,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Profile Desa Berhasil Diupdate",
+    }
+}
+    

src/app/api/[[...slugs]]/_lib/desa/profile/profile_desa/visimisiDesa/update.ts

@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.ProfileDesaGetPayload<{
+    select: {
+        id: true;
+        visi: true;
+        misi: true;
+    }
+}>
+export default async function visimisiDesaUpdate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.profileDesa.update({
+        where: {
+            id: body.id
+        },
+        data: {
+            visi: body.visi,
+            misi: body.misi,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Profile Desa Berhasil Diupdate",
+    }
+}

src/app/api/[[...slugs]]/_lib/fileStorage/_lib/create.ts

@@ -0,0 +1,63 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+import { nanoid } from "nanoid";
+
+const UPLOAD_DIR = process.env.WIBU_UPLOAD_DIR;
+
+const fileStorageCreate = async (context: Context) => {
+  const body = (await context.body) as {
+    name: string;
+    file: File;
+  };
+  const file = body.file;
+  const name = body.name;
+
+  if (!file) {
+    return {
+      status: 400,
+      body: "No file uploaded",
+    };
+  }
+
+  if (!name) {
+    return {
+      status: 400,
+      body: "No name provided",
+    };
+  }
+
+  if (!UPLOAD_DIR) {
+    return {
+      status: 500,
+      body: "UPLOAD_DIR is not defined",
+    };
+  }
+  const pathName = "desa/ppid/profile-ppid";
+  const rootPath = path.join(UPLOAD_DIR, pathName);
+  await fs.mkdir(rootPath, { recursive: true });
+
+  const ext = file.name.split(".").pop();
+  const newName = nanoid() + "." + ext;
+
+  const data = await prisma.fileStorage.create({
+    data: {
+      name: newName,
+      path: rootPath,
+      mimeType: file.type,
+      link: `/api/fileStorage/findUnique/${newName}`,
+    },
+  });
+
+  await fs.writeFile(
+    path.join(rootPath, newName),
+    Buffer.from(await file.arrayBuffer())
+  );
+
+  return {
+    data,
+  };
+};
+
+export default fileStorageCreate;

src/app/api/[[...slugs]]/_lib/fileStorage/_lib/findMany.ts

@@ -0,0 +1,6 @@
+import prisma from "@/lib/prisma";
+
+export const fileStorageFindMany = async () => {
+  const data = await prisma.fileStorage.findMany();
+  return data;
+};

src/app/api/[[...slugs]]/_lib/fileStorage/_lib/findUniq.ts

@@ -0,0 +1,34 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+
+const fileStorageFindUnique = async (context: Context) => {
+  const { name } = context.params;
+
+  const data = await prisma.fileStorage.findUnique({
+    where: {
+      name,
+    },
+  });
+
+  if (!data) {
+    context.set.status = "No Content";
+    return {
+      status: 404,
+      message: "File not found",
+    };
+  }
+
+  console.log(data);
+
+  const file = await fs.readFile(path.join(data.path, data.name));
+  context.set.headers = {
+    "Content-Type": data.mimeType,
+    "Content-Length": file.length,
+  };
+
+  return file;
+};
+
+export default fileStorageFindUnique;