API Struktur Admin PPID

Profile PPID clear

package.json

@@ -24,6 +24,7 @@
     "@mantine/core": "^7.17.4",
     "@mantine/dates": "^7.17.4",
     "@mantine/dropzone": "^7.17.0",
+    "@mantine/form": "^8.1.0",
     "@mantine/hooks": "^7.17.4",
     "@mantine/tiptap": "^7.17.4",
     "@paljs/types": "^8.1.0",

prisma/data/ppid/profile-ppid/profilePPid.json

@@ -5,7 +5,6 @@
     "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>",
     "riwayat": "<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>",
     "pengalaman": "<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>",
-    "unggulan": "<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>",
-    "imageUrl": "/uploads/seeded-images/profile-ppid/perbekel.png"
+    "unggulan": "<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/ppid/struktur-ppid/strukturPPID.json

@@ -0,0 +1,6 @@
+[
+    {
+        "id" : "1",
+        "name" : "Struktur PPID"
+    }
+]

prisma/schema.prisma

@@ -62,11 +62,24 @@ model FileStorage {
   link        String
   Berita      Berita[]
   PotensiDesa PotensiDesa[]
-
   Posyandu Posyandu[]
+  ProfilePPID ProfilePPID[]
+  StrukturPPID StrukturPPID[]
 }
 
 //========================================= MENU PPID ========================================= //
+
+//========================================= STRUKTUR PPID ========================================= //
+model StrukturPPID {
+  id        String   @id @default(cuid())
+  name      String   @db.Text
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}
 // ========================================= VISI MISI PPID ========================================= //
 model VisiMisiPPID {
   id        String   @id @default(cuid())
@@ -91,17 +104,18 @@ model DasarHukumPPID {
 
 // ========================================= PROFILE PPID ========================================= //
 model ProfilePPID {
-  id         String   @id @default(cuid())
-  name       String   @db.Text
-  biodata    String   @db.Text
-  riwayat    String   @db.Text
-  pengalaman String   @db.Text
-  unggulan   String   @db.Text
-  imageUrl   String?
-  createdAt  DateTime @default(now())
-  updatedAt  DateTime @updatedAt
-  deletedAt  DateTime @default(now())
-  isActive   Boolean  @default(true)
+  id         String      @id @default(cuid())
+  name       String      @db.Text
+  biodata    String      @db.Text
+  riwayat    String      @db.Text
+  pengalaman String      @db.Text
+  unggulan   String      @db.Text
+  image      FileStorage? @relation(fields: [imageId], references: [id])
+  imageId    String?
+  createdAt  DateTime    @default(now())
+  updatedAt  DateTime    @updatedAt
+  deletedAt  DateTime    @default(now())
+  isActive   Boolean     @default(true)
 }
 
 // ========================================= DAFTAR INFORMASI PUBLIK ========================================= //

prisma/seed.ts

@@ -6,13 +6,10 @@ 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 visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
 import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.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";
+import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
+import strukturPPID from "./data/ppid/struktur-ppid/strukturPPID.json";
 
 (async () => {
   for (const l of layanan) {
@@ -31,6 +28,22 @@ import { v4 as uuid } from "uuid";
 
   console.log("layanan success ...");
 
+  for (const s of strukturPPID) {
+    await prisma.strukturPPID.upsert({
+      where: {
+        id: s.id,
+      },
+      update: {
+        name: s.name,
+      },
+      create: {
+        id: s.id,
+        name: s.name,
+      },
+    });
+  }
+  console.log("struktur ppid success ...");
+
   for (const p of potensi) {
     await prisma.potensi.upsert({
       where: {
@@ -124,56 +137,29 @@ import { v4 as uuid } from "uuid";
   }
   console.log("cara memperoleh salinan informasi success ...");
 
-  const seedProfilePPID = async () => {
-    const targetDir = path.resolve("public", "uploads", "seeded-images", "profile-ppid")
-  
-    // Buat folder hanya jika belum ada
-    if (!fs.existsSync(targetDir)) {
-      await mkdir(targetDir, { recursive: true })
-    }
-  
-    for (const c of profilePPID) {
-      let finalImageUrl = c.imageUrl
-  
-      if (c.imageUrl.startsWith("/uploads/seeded-images/")) {
-        const filename = path.basename(c.imageUrl)
-        const seedImagePath = path.resolve("prisma", "seed-images", filename)
-  
-        const targetFilename = `${uuid()}_${filename}`
-        const targetPath = path.join(targetDir, targetFilename)
-  
-        const buffer = fs.readFileSync(seedImagePath)
-        await writeFile(targetPath, buffer)
-  
-        finalImageUrl = `/uploads/seeded-images/profile-ppid/${targetFilename}`
-      }
-  
-      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: finalImageUrl,
-        },
-        create: {
-          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")
+  for (const c of profilePPID) {
+    await prisma.profilePPID.upsert({
+      where: { id: c.id },
+      update: {
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        // imageId tidak di-update
+      },
+      create: {
+        id: c.id,
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        // imageId tidak di-create
+      },
+    });
   }
-  
-  await seedProfilePPID()
+  console.log("✅ profilePPID seeded without imageId (editable later via UI)");
 
   for (const v of visiMisiPPID) {
     await prisma.visiMisiPPID.upsert({
@@ -210,8 +196,6 @@ import { v4 as uuid } from "uuid";
     });
   }
   console.log("dasar hukum PPID success ...");
-
-
 })()
   .then(() => prisma.$disconnect())
   .catch((e) => {

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

@@ -1,4 +1,3 @@
-import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
 import { proxy } from "valtio";
@@ -13,11 +12,18 @@ const templateForm = z.object({
   riwayat: z.string().min(3, "Riwayat minimal 3 karakter"),
   pengalaman: z.string().min(3, "Pengalaman minimal 3 karakter"),
   unggulan: z.string().min(3, "Unggulan minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
 });
 
-/**
- * Tipe data ProfilePPID yang digunakan dalam form dan API, berdasarkan Prisma schema.
- */
+const defaultForm = {
+  name: "",
+  biodata: "",
+  riwayat: "",
+  pengalaman: "",
+  unggulan: "",
+  imageId: "",
+};
+
 type ProfilePPIDForm = Prisma.ProfilePPIDGetPayload<{
   select: {
     id: true;
@@ -26,147 +32,170 @@ type ProfilePPIDForm = Prisma.ProfilePPIDGetPayload<{
     riwayat: true;
     pengalaman: true;
     unggulan: true;
-    imageUrl: true;
+    imageId: true;
+    image?: {
+      select: {
+        link: true;
+      };
+    };
   };
 }>;
 
 /**
- * State utama ProfilePPID yang mencakup fitur:
- * - Ambil data berdasarkan ID
- * - Update data
- * - Upload gambar
+ * Improved State Management - Consolidated and more robust
  */
 const stateProfilePPID = proxy({
-  /**
-   * Bagian untuk ambil data berdasarkan ID
-   */
-  findById: {
+  // Consolidated data management
+  profile: {
     data: null as ProfilePPIDForm | null,
     loading: false,
+    error: null as string | null,
 
-    /**
-     * Inisialisasi data kosong ke dalam state.
-     */
-    initialize() {
-      stateProfilePPID.findById.data = {
-        id: '',
-        name: '',
-        biodata: '',
-        riwayat: '',
-        pengalaman: '',
-        unggulan: '',
-        imageUrl: ''
-      } as ProfilePPIDForm;
-    },
-
-    /**
-     * Mengambil data profil berdasarkan ID.
-     * @param {string} id - ID dari profile yang ingin diambil.
-     */
+    // Single method to load profile data
     async load(id: string) {
-      try {
-        stateProfilePPID.findById.loading = true;
-        const res = await ApiFetch.api.ppid.profileppid["find-by-id"].get({
-          query: { id },
-        });
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
 
-        if (res.status === 200) {
-          stateProfilePPID.findById.data = res.data?.data ?? null;
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await fetch(`/api/ppid/profileppid/${id}`);
+        
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+        
+        if (result.success) {
+          this.data = result.data;
+          return result.data;
         } else {
-          toast.error("Gagal mengambil data profile");
+          throw new Error(result.message || "Gagal mengambil data profile");
         }
       } catch (error) {
-        console.error((error as Error).message);
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Load profile error:", errorMessage);
         toast.error("Terjadi kesalahan saat mengambil data profile");
+        return null;
       } finally {
-        stateProfilePPID.findById.loading = false;
+        this.loading = false;
       }
     },
+
+    // Reset profile data
+    reset() {
+      this.data = null;
+      this.error = null;
+      this.loading = false;
+    }
   },
 
-  /**
-   * Bagian untuk update data profile
-   */
-  update: {
+  // Edit form management
+  editForm: {
+    id: "",
+    form: { ...defaultForm },
     loading: false,
+    error: null as string | null,
+    isReadOnly: false, // Flag untuk data yang tidak bisa diedit
 
-    /**
-     * 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);
+    // Initialize form with profile data
+    initialize(profileData: ProfilePPIDForm) {
+      this.id = profileData.id;
+      this.isReadOnly = false; // Semua data bisa diedit
+      this.form = {
+        name: profileData.name || "",
+        biodata: profileData.biodata || "",
+        riwayat: profileData.riwayat || "",
+        pengalaman: profileData.pengalaman || "",
+        unggulan: profileData.unggulan || "",
+        imageId: profileData.imageId || "",
+      };
+    },
 
-      if (!cek.success) {
-        const errors = cek.error.issues
+    // Update form field
+    updateField(field: keyof typeof defaultForm, value: string) {
+      this.form[field] = value;
+    },
+
+    // Submit form
+    async submit() {
+      // Validate form
+      const validation = templateForm.safeParse(this.form);
+      
+      if (!validation.success) {
+        const errors = validation.error.issues
           .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
           .join(", ");
         toast.error(`Form tidak valid: ${errors}`);
-        return;
+        return false;
       }
 
-      try {
-        stateProfilePPID.update.loading = true;
-        const res = await ApiFetch.api.ppid.profileppid["update"].post(data);
+      this.loading = true;
+      this.error = null;
 
-        if (res.status === 200) {
+      try {
+        const response = await fetch(`/api/ppid/profileppid/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
           toast.success("Berhasil update profile");
-          await stateProfilePPID.findById.load(data.id);
+          // Refresh profile data
+          await stateProfilePPID.profile.load(this.id);
+          return true;
         } else {
-          toast.error("Gagal update profile");
+          throw new Error(result.message || "Gagal update profile");
         }
       } catch (error) {
-        console.error((error as Error).message);
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Update profile error:", errorMessage);
         toast.error("Terjadi kesalahan saat update profile");
+        return false;
       } finally {
-        stateProfilePPID.update.loading = false;
+        this.loading = false;
       }
     },
+
+    // Reset form
+    reset() {
+      this.id = "";
+      this.form = { ...defaultForm };
+      this.error = null;
+      this.loading = false;
+      this.isReadOnly = false;
+    }
   },
 
-  /**
-   * 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;
-
-        const form = new FormData();
-        form.append("file", file);
-        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);
-        } else {
-          toast.error("Gagal mengunggah gambar");
-        }
-      } catch (error) {
-        console.error((error as Error).message);
-        toast.error("Terjadi kesalahan saat mengunggah gambar");
-      } finally {
-        stateProfilePPID.uploadImage.loading = false;
-      }
-    },
+  // Helper methods
+  async loadForEdit(id: string) {
+    const profileData = await this.profile.load(id);
+    if (profileData) {
+      this.editForm.initialize(profileData);
+    }
+    return profileData;
   },
+
+  reset() {
+    this.profile.reset();
+    this.editForm.reset();
+  }
 });
 
-/**
- * Ekspor state utama ProfilePPID untuk digunakan di komponen lain.
- */
-export default stateProfilePPID;
+export default stateProfilePPID;

src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts

@@ -0,0 +1,169 @@
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+    name: z.string().min(3, "Nama minimal 3 karakter"),
+    imageId: z.string().min(1, "Gambar wajib dipilih"),
+})
+
+const defaultForm = {
+    name: "",
+    imageId: "",
+};
+
+type StrukturPPIDForm = Prisma.StrukturPPIDGetPayload<{
+    select: {
+        id: true;
+        name: true;
+        imageId: true;
+        image?: {
+            select: {
+                link: true;
+            };
+        };
+    };
+}>;
+
+const stateStrukturPPID = proxy({
+    struktur: {
+        data: null as StrukturPPIDForm | null,
+        loading: false,
+        error: null as string | null,
+
+        async load(id: string) {
+            if(!id) {
+                toast.warn("ID tidak valid")
+                return null
+            }
+
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const response = await fetch(`/api/ppid/strukturppid/${id}`);
+                
+                if(!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`)
+                }
+
+                const result = await response.json();
+
+                if(result.success) {
+                    this.data = result.data;
+                    return result.data
+                } else {
+                    throw new Error(result.message || "Gagal mengambil data struktur")
+                }
+            } catch (error) {
+                const errorMessage = (error as Error).message;
+                this.error = errorMessage;
+                console.error("Load struktur error:", errorMessage);
+                toast.error("Terjadi kesalahan saat mengambil data struktur");
+                return null;
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        reset() {
+            this.data = null;
+            this.error = null;
+            this.loading = false;
+        }
+    },
+
+    editStruktur: {
+        id: "",
+        form: { ...defaultForm },
+        loading: false,
+        error: null as string | null,
+        isReadOnly: false,
+
+        initialize(strukturData: StrukturPPIDForm) {
+            this.id = strukturData.id;
+            this.isReadOnly = false;
+            this.form = {
+                name: strukturData.name || "",
+                imageId: strukturData.imageId || "",
+            };
+        },
+
+        updateField(field: keyof typeof defaultForm, value: string) {
+            this.form[field] = value;
+        },
+
+        async submit() {
+            const validation = templateForm.safeParse(this.form);
+
+            if (!validation.success) {
+                const errors = validation.error.issues
+                .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+                .join(", ");
+                toast.error(`Form tidak valid: ${errors}`);
+                return false;
+            }
+
+            this.loading = true;
+            this.error = null;
+            
+            try {
+               const response = await fetch(`/api/ppid/strukturppid/${this.id}`, {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(this.form),
+               }) 
+
+               if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+               }
+
+               const result = await response.json();
+
+               if (result.success) {
+                toast.success("Berhasil update struktur");
+                await stateStrukturPPID.struktur.load(this.id);
+                return true;
+               } else {
+                throw new Error(result.message || "Gagal update struktur");
+               }
+            } catch (error) {
+                const errorMessage = (error as Error).message;
+                this.error = errorMessage;
+                console.error("Update struktur error:", errorMessage);
+                toast.error("Terjadi kesalahan saat update struktur");
+                return false;
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        reset() {
+            this.id = "";
+            this.form = { ...defaultForm };
+            this.error = null;
+            this.loading = false;
+            this.isReadOnly = false;
+        }
+    },
+
+    async loadForEdit(id: string) {
+        const strukturData = await this.struktur.load(id);
+        if (strukturData) {
+            this.editStruktur.initialize(strukturData);
+        }
+        return strukturData;
+    },
+
+    reset() {
+        this.struktur.reset();
+        this.editStruktur.reset();
+    }
+})
+
+export default stateStrukturPPID;
+    

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/page.tsx

@@ -1,11 +1,70 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
 
-function Page() {
+function BeasiswaDesa() {
   return (
-    <div>
-      beasiswa-desa
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Beasiswa Desa'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListBeasiswaDesa/>
+    </Box>
   );
 }
 
-export default Page;
+function ListBeasiswaDesa() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+          <Title order={4}>List Beasiswa Desa</Title>
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/beasiswa-desa/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default BeasiswaDesa;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/page.tsx

@@ -1,11 +1,74 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function BimbinganBelajarDesa() {
   return (
-    <div>
-      bimbingan-belajar-desa
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Bimbingan Belajar Desa'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListBimbinganBelajarDesa/>
+    </Box>
   );
 }
 
-export default Page;
+function ListBimbinganBelajarDesa() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Bimbingan Belajar Desa'
+          href='/admin/pendidikan/bimbingan-belajar-desa/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default BimbinganBelajarDesa;

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

@@ -1,11 +1,74 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function DataPendidikan() {
   return (
-    <div>
-      data-pendidikan
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Data Pendidikan'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListDataPendidikan/>
+    </Box>
   );
 }
 
-export default Page;
+function ListDataPendidikan() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Data Pendidikan'
+          href='/admin/pendidikan/data-pendidikan/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/data-pendidikan/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default DataPendidikan;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/page.tsx

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

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/page.tsx

@@ -1,11 +1,74 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function PendidikanNonFormal() {
   return (
-    <div>
-     pendidikan-non-formal
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Pendidikan Non Formal'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListPendidikanNonFormal/>
+    </Box>
   );
 }
 
-export default Page;
+function ListPendidikanNonFormal() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Pendidikan Non Formal'
+          href='/admin/pendidikan/pendidikan-non-formal/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default PendidikanNonFormal;

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/page.tsx

@@ -1,11 +1,74 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function PerpustakaanDigital() {
   return (
-    <div>
-    perpustakaan-digital
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Perpustakaan Digital'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListPerpustakaanDigital/>
+    </Box>
   );
 }
 
-export default Page;
+function ListPerpustakaanDigital() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Perpustakaan Digital'
+          href='/admin/pendidikan/perpustakaan-digital/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/perpustakaan-digital/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default PerpustakaanDigital;

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/page.tsx

@@ -1,11 +1,74 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function ProgramPendidikanAnak() {
   return (
-    <div>
-      program-pendidikan-anak
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Program Pendidikan Anak'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListProgramPendidikanAnak/>
+    </Box>
   );
 }
 
-export default Page;
+function ListProgramPendidikanAnak() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Program Pendidikan Anak'
+          href='/admin/pendidikan/program-pendidikan-anak/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/program-pendidikan-anak/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default ProgramPendidikanAnak;

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

@@ -40,7 +40,7 @@ export function PPIDTextEditor({ onSubmit, onChange, showSubmit = true, initialC
   }, [initialContent, editor]);
 
   return (
-    <Stack>
+    <Stack >
       <RichTextEditor editor={editor}>
         <RichTextEditor.Toolbar sticky stickyOffset={60}>
           <RichTextEditor.ControlsGroup>

src/app/admin/(dashboard)/ppid/dasar-hukum/edit/page.tsx

@@ -38,6 +38,7 @@ function EditDasarHukum() {
       dasarHukumState.findById.data.content = content;
       dasarHukumState.update.save(dasarHukumState.findById.data)
     }
+    router.push('/admin/ppid/dasar-hukum')
   }
   return (
     <Box>

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

@@ -34,15 +34,13 @@ function Page() {
             </Button>
           </GridCol>
         </Grid>
-        <Box px={{ base: "md", md: 100 }}>
+        <Box>
           <Stack gap={'lg'}>
             <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 20, md: 50 }} pb={30}>
-                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
-                  {listDasarHukum.findById.data.judul}
-                </Text>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }} />
               </Box>
-              <Box px={{ base: 20, md: 50 }}>
+              <Box px={{ base: 0, md: 30 }}>
                 <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }} />
               </Box>
             </Paper>

src/app/admin/(dashboard)/ppid/profile-ppid/[id]/biodata/biodataForm.tsx

@@ -0,0 +1,28 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import EditPPIDEditor from '../../_com/editPPIDEditor';
+
+
+
+function Biodata({
+  value,
+  onChange,
+  error,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string;
+}) {
+  
+  return (<Box>
+    <Text fw={"bold"}>Biodata</Text>
+    <EditPPIDEditor
+      value={value}
+      onChange={onChange}
+    />
+    {error && <Text c="red" size="sm">{error}</Text>}
+  </Box>
+  );
+}
+
+export default Biodata;

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

@@ -0,0 +1,256 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import colors from '@/con/colors';
+import { Alert, Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
+
+import ApiFetch from '@/lib/api-fetch';
+import { IconAlertCircle, IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { toast } from 'react-toastify';
+import Biodata from './biodata/biodataForm';
+import PengalamanOrganisasi from './pengalaman_organisasi/pengalamanForm';
+import ProgramKerjaUnggulan from './program_kerja_unggulan/programKerjaForm';
+import RiwayatKarir from './riwayat_karir/riwayatKarirForm';
+
+function EditProfilePPID() {
+  const allState = useProxy(stateProfilePPID);
+  const params = useParams();
+  const router = useRouter();
+
+  // UI States
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Load data on mount
+  useEffect(() => {
+    const loadData = async () => {
+      const id = params?.id as string;
+      if (!id) {
+        toast.error("ID tidak valid");
+        router.push("/admin/ppid/profile-ppid");
+        return;
+      }
+
+      try {
+        const profileData = await stateProfilePPID.loadForEdit(id);
+
+        if (profileData && profileData.image?.link) {
+          setPreviewImage(profileData.image.link);
+        }
+      } catch (error) {
+        console.error("Error loading profile:", error);
+        toast.error("Gagal memuat data profile");
+      }
+    };
+
+    loadData();
+
+    return () => {
+      stateProfilePPID.editForm.reset(); // cleanup form
+    };
+  }, [params?.id, router]);
+
+  const handleFieldChange = (field: string, value: string) => {
+    stateProfilePPID.editForm.updateField(field as any, value);
+  };
+
+  const handleFileChange = (newFile: File | null) => {
+    if (!newFile) {
+      setFile(null);
+      return;
+    }
+
+    setFile(newFile);
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      setPreviewImage(event.target?.result as string);
+    };
+    reader.readAsDataURL(newFile);
+  };
+
+  const handleSubmit = async () => {
+    if (isSubmitting || !stateProfilePPID.editForm.form.name.trim()) {
+      toast.error("Nama wajib diisi");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      // Upload file jika ada
+      if (file) {
+        const uploadResponse = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = uploadResponse.data?.data;
+
+        if (!uploaded?.id) {
+          toast.error("Gagal upload gambar");
+          return;
+        }
+
+        stateProfilePPID.editForm.form.imageId = uploaded.id;
+      }
+
+      // Submit form
+      const success = await stateProfilePPID.editForm.submit();
+
+      if (success) {
+        toast.success("Berhasil menyimpan perubahan");
+        router.push("/admin/ppid/profile-ppid");
+      }
+    } catch (error) {
+      console.error("Error submitting form:", error);
+      toast.error("Gagal menyimpan profile");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => {
+    router.back();
+  };
+
+  // Loading state
+  if (allState.profile.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data profile...</Text>
+        </Center>
+      </Box>
+    );
+  }
+
+  // Error state
+  if (allState.profile.error) {
+    return (
+      <Box>
+        <Stack gap="md">
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+          <Alert icon={<IconAlertCircle size={16} />} color="red">
+            <Text fw="bold">Error</Text>
+            <Text>{allState.profile.error}</Text>
+          </Alert>
+        </Stack>
+      </Box>
+    );
+  }
+
+  // No data state
+  if (!allState.profile.data) {
+    return (
+      <Box>
+        <Stack gap="md">
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+          <Alert icon={<IconAlertCircle size={16} />} color="yellow">
+            <Text fw="bold">Data tidak ditemukan</Text>
+            <Text>Profile PPID tidak dapat ditemukan</Text>
+          </Alert>
+        </Stack>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Stack gap="xs">
+        <Box>
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+
+        <Box>
+          <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius={10}>
+            <Stack gap="xs">
+              <Title order={3}>Edit Profile PPID</Title>
+
+              {/* Nama Field */}
+              <TextInput
+                label={<Text fw="bold">Nama Perbekel</Text>}
+                placeholder="Masukkan nama perbekel"
+                value={allState.editForm.form.name}
+                onChange={(e) => handleFieldChange('name', e.currentTarget.value)}
+                error={!allState.editForm.form.name && "Nama wajib diisi"}
+              />
+
+              {/* File Upload */}
+              <FileInput
+                label={<Text fz="sm" fw="bold">Upload Gambar Baru (Opsional)</Text>}
+                value={file}
+                onChange={handleFileChange}
+                accept="image/*"
+              />
+
+              {/* Preview Gambar */}
+              <Box>
+                <Text fz="sm" fw="bold" mb="xs">Preview Gambar</Text>
+                {previewImage ? (
+                  <Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" />
+                ) : (
+                  <Center w={200} h={200} bg="gray.2">
+                    <Stack align="center" gap="xs">
+                      <IconImageInPicture size={48} color="gray" />
+                      <Text size="sm" c="gray">Tidak ada gambar</Text>
+                    </Stack>
+                  </Center>
+                )}
+              </Box>
+
+              {/* Rich Components */}
+              <Biodata
+                value={allState.editForm.form.biodata}
+                onChange={(val) => handleFieldChange('biodata', val)}
+              />
+
+              <RiwayatKarir
+                value={allState.editForm.form.riwayat}
+                onChange={(val) => handleFieldChange('riwayat', val)}
+              />
+
+              <PengalamanOrganisasi
+                value={allState.editForm.form.pengalaman}
+                onChange={(val) => handleFieldChange('pengalaman', val)}
+              />
+
+              <ProgramKerjaUnggulan
+                value={allState.editForm.form.unggulan}
+                onChange={(val) => handleFieldChange('unggulan', val)}
+              />
+
+              {/* Submit Button */}
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={handleSubmit}
+                  loading={isSubmitting || allState.editForm.loading}
+                  disabled={!allState.editForm.form.name}
+                >
+                  {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+                </Button>
+
+                <Button
+                  variant="outline"
+                  onClick={handleBack}
+                  disabled={isSubmitting || allState.editForm.loading}
+                >
+                  Batal
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditProfilePPID;

src/app/admin/(dashboard)/ppid/profile-ppid/[id]/pengalaman_organisasi/pengalamanForm.tsx

@@ -0,0 +1,26 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import EditPPIDEditor from '../../_com/editPPIDEditor';
+
+
+function PengalamanOrganisasi({
+  value,
+  onChange,
+  error,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string;
+}) {
+  return (<Box>
+    <Text fw={"bold"}>Pengalaman Organisasi</Text>
+    <EditPPIDEditor
+      value={value}
+      onChange={onChange}
+    />
+    {error && <Text c="red" size="sm">{error}</Text>}
+  </Box>
+  );
+}
+
+export default PengalamanOrganisasi;

src/app/admin/(dashboard)/ppid/profile-ppid/[id]/program_kerja_unggulan/programKerjaForm.tsx

@@ -0,0 +1,26 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import EditPPIDEditor from '../../_com/editPPIDEditor';
+
+function ProgramKerjaUnggulan({
+  value,
+  onChange,
+  error,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string;
+}) {
+  
+  return (<Box>
+    <Text fw={"bold"}>Program Kerja Unggulan</Text>
+    <EditPPIDEditor
+      value={value}
+      onChange={onChange}
+    />
+    {error && <Text c="red" size="sm">{error}</Text>}
+  </Box>
+  );
+}
+
+export default ProgramKerjaUnggulan;

src/app/admin/(dashboard)/ppid/profile-ppid/[id]/riwayat_karir/riwayatKarirForm.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { Box, Text } from '@mantine/core';
+import EditPPIDEditor from '../../_com/editPPIDEditor';
+
+
+
+function RiwayatKarir({
+  value,
+  onChange,
+  error,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string;
+}) {
+  return (
+    <Box>
+      <Text fw={"bold"}>Riwayat Karir</Text>
+      <EditPPIDEditor
+        value={value}
+        onChange={onChange}
+      />
+      {error && <Text c="red" size="sm">{error}</Text>}
+    </Box>
+  );
+}
+
+export default RiwayatKarir;

src/app/admin/(dashboard)/ppid/profile-ppid/_com/biodata.ts

@@ -1,10 +0,0 @@
-const biodata = {
-    id: "1",
-    name: "<p>I.B Surya Prabhawa Manuaba, S.H., M.H.</p>",
-    biodata: "<h2>Biodata</h2> <p>....</p>",
-    riwayat: "<h2>Riwayat Karir</h2> <ul>...</ul>",
-    pengalaman: "<h2>Pengalaman Organisasi</h2> <ul>...</ul>",
-    unggulan: "<h2>Program Kerja Unggulan</h2> <h3>...</h3>",
-}
-
-export default biodata

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

@@ -0,0 +1,101 @@
+'use client'
+import { RichTextEditor, Link } from '@mantine/tiptap';
+import { useEditor } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Superscript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+import { useEffect } from 'react';
+
+type EditEditorProps = {
+  value: string;
+  onChange: (content: string) => void;
+};
+
+export default function EditPPIDEditor({ value, onChange }: EditEditorProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    onUpdate({ editor }) {
+      onChange(editor.getHTML());
+    },
+  });
+  
+  useEffect(() => {
+    if (editor && value && value !== editor.getHTML()) {
+      editor.commands.setContent(value);
+    }
+  }, [editor, value]);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const updateHandler = () => onChange(editor.getHTML());
+    editor.on('update', updateHandler);
+
+    return () => {
+      editor.off('update', updateHandler);
+    };
+  }, [editor, onChange]);
+
+  return (
+    <RichTextEditor editor={editor}>
+      <RichTextEditor.Toolbar sticky stickyOffset="var(--docs-header-height)">
+        {/* Toolbar seperti sebelumnya */}
+        <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>
+  );
+}

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

@@ -1,76 +0,0 @@
-'use client'
-import { Box, Group, Text } from '@mantine/core';
-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';
-
-function Biodata() {
-  const biodataState = useProxy(stateProfilePPID)
-  const [loading, setLoading] = useState(false);
-  
-  return (<Box>
-    <Text fw={"bold"}>Biodata</Text>
-    <Dropzone
-    mb={20}
-      onDrop={async (droppedFiles) => {
-        setLoading(true);
-        for (const file of droppedFiles) {
-          await ApiFetch.api.ppid.profileppid["edit-img"].post({
-            file: file,
-            id: biodataState.findById.data?.id,
-          });
-        }
-
-        setLoading(false);
-        if (biodataState.findById.data?.id) {
-          biodataState.findById.load(biodataState.findById.data.id);
-        }
-      }}
-      accept={[MIME_TYPES.jpeg, MIME_TYPES.png, MIME_TYPES.webp]}
-      loading={loading}
-    >
-      <Group justify="center" gap="md" mih={150} style={{ pointerEvents: 'none' }}>
-        <Dropzone.Accept>
-          <IconUpload size={50} stroke={1.5} />
-        </Dropzone.Accept>
-        <Dropzone.Reject>
-          <IconX size={50} stroke={1.5} />
-        </Dropzone.Reject>
-        <Dropzone.Idle>
-          <IconPhoto size={50} stroke={1.5} />
-        </Dropzone.Idle>
-
-        <div>
-          <Text size="xl" inline>
-            Drag & drop gambar di sini atau klik untuk pilih file
-          </Text>
-          <Text size="sm" c="dimmed" inline mt={7}>
-            Maksimal ukuran file 5MB. Format: JPG, PNG, WebP
-          </Text>
-        </div>
-      </Group>
-    </Dropzone>
-    
-    
-    
-    <PPIDTextEditor
-      key={biodataState.findById.data?.id ?? 'new'}
-      showSubmit={false}
-      onChange={(val) => {
-        if (biodataState.findById.data) {
-          biodataState.findById.data.biodata = val;
-        }
-      }}
-      initialContent={biodataState.findById.data?.biodata ?? ''}
-    />
-   
-  </Box>
-  );
-}
-
-export default Biodata;

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

@@ -1,65 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Skeleton, Paper, Title, Box, Text, Image } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
-
-function ProfileList() {
-  const allList = useProxy(stateProfilePPID)
-  useShallowEffect(() => {
-    allList.findById.load("1") // Assuming "1" is your default ID, adjust as needed
-  }, [])
-
-  if (!allList.findById.data) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
-
-  const dataArray = Array.isArray(allList.findById.data)
-    ? allList.findById.data
-    : [allList.findById.data];
-
-  return (
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Profile PPID</Title>
-        {dataArray.map((item) => (
-          <Box key={item.id}>
-            {item.imageUrl && (
-              <Box mb={20}>
-                <Text fw={"bold"} mb={5}>Preview Gambar:</Text>
-                <Image
-                  src={item.imageUrl ?? '/perbekel.png'}
-                  alt="Profile"
-                  w={200}
-                />
-              </Box>
-            )}
-            <Box>
-              <Text fw={"bold"}>Nama</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.name }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Biodata</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.biodata }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Riwayat</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.riwayat }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Pengalaman</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.pengalaman }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Program Kerja Unggulan</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.unggulan }}></Text>
-            </Box>
-          </Box>
-        ))}
-      </Stack>
-    </Paper>
-  )
-}
-
-export default ProfileList;

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

@@ -1,89 +1,120 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import Biodata from './biodata/page';
-import PengalamanOrganisasi from './pengalaman_organisasi/page';
-import RiwayatKarir from './riwayat_karir/page';
-import ProgramKerjaUnggulan from './program_kerja_unggulan/page';
+import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
 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() {
-  return (
-    <Box>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <ProfileCreate />
-        <ProfileList />
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-function ProfileCreate() {
-  const [isLoading, setIsLoading] = useState(false)
-  const allState = useProxy(stateProfilePPID)
-
-  // Initialize data if it doesn't exist
+  const router = useRouter()
+  const allList = useProxy(stateProfilePPID)
   useShallowEffect(() => {
-    if (!allState.findById.data && isLoading) {
-      allState.findById.initialize()
-      setIsLoading(false)
-    }
-  }, [isLoading])
+    allList.profile.load("1") // Assuming "1" is your default ID, adjust as needed
+  }, [])
 
-  const submit = () => {
-    if (
-      allState.findById.data?.name &&
-      allState.findById.data?.biodata &&
-      allState.findById.data?.riwayat &&
-      allState.findById.data?.pengalaman &&
-      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")
-    }
+  if (!allList.profile.data) {
+    return <Stack>
+      <Skeleton radius={10} h={800} />
+    </Stack>
   }
 
+  const dataArray = Array.isArray(allList.profile.data)
+    ? allList.profile.data
+    : [allList.profile.data];
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+    <Paper bg={colors['white-1']} p={'md'}>
       <Stack gap={"xs"}>
-        <Title order={3}>Profile PPID</Title>
-        <TextInput
-          label={<Text fw={"bold"}>Nama Perbekel</Text>}
-          placeholder="masukkan nama perbekel"
-          value={allState.findById.data?.name || ''}
-          onChange={(val) => {
-            if (allState.findById.data) {
-              allState.findById.data.name = val.currentTarget.value
-            }
-          }}
-        />
-        <Biodata />
-        <RiwayatKarir />
-        <PengalamanOrganisasi />
-        <ProgramKerjaUnggulan />
-        <Group>
-          <Button
-            bg={colors['blue-button']}
-            onClick={submit}
-            loading={allState.update.loading}
-          >
-            Submit
-          </Button>
-        </Group>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={3}>Preview Profile PPID</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push(`/admin/ppid/profile-ppid/${allList.profile.data?.id}`)}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        {dataArray.map((item) => (
+          <Box key={item.id} >
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: "md", md: 100 }}>
+                <Grid>
+                  <GridCol span={{ base: 12, md: 12 }}>
+                    <Center>
+                      <Image src={"/api/img/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
+                    </Center>
+                  </GridCol>
+                  <GridCol span={{ base: 12, md: 12 }}>
+                    <Text ta={"center"} fz={{ base: "1.2rem", md: "1.8rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
+                  </GridCol>
+                </Grid>
+              </Box>
+              <Divider my={"md"} color={colors['blue-button']} />
+              {/* biodata perbekel */}
+              <Box px={{ base: 0, md: 50 }} pb={30}>
+                <Box pb={20} px={{ base: 0, md: 50 }}>
+                  <Paper bg={colors['BG-trans']} w={{ base: "100%", md: "100%" }}>
+                    <Stack gap={0}>
+                      <Center>
+                        <Image
+                          pt={{ base: 0, md: 90 }}
+                          src={item.image?.link}
+                          w={{ base: 250, md: 350 }}
+                          alt='Foto Profil PPID'
+                          onError={(e) => {
+                            e.currentTarget.src = "/perbekel.png";
+                          }}
+                        />
+                      </Center>
+                      <Paper
+                        bg={colors['blue-button']}
+                        py={20}
+                        className="glass3"
+                        px={{ base: 10, md: 10 }}
+
+                      >
+                        <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.2rem", md: "1.6rem" }}>
+                          {item.name}
+                        </Text>
+                      </Paper>
+                    </Stack>
+                  </Paper>
+                </Box>
+                <Box pt={10}>
+                  <Box>
+                    <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Biodata</Text>
+                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.biodata }} />
+                  </Box>
+                  <Box>
+                    <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Riwayat Karir</Text>
+                    <Text fz={{ base: "1rem", md: "1.5rem" }} dangerouslySetInnerHTML={{ __html: item.riwayat }} />
+                  </Box>
+                </Box>
+                <Box pb={30}>
+                  <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
+                  <Box px={20}>
+                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.pengalaman }} />
+                  </Box>
+                </Box>
+                <Box pb={20}>
+                  <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
+                  <Box px={20}>
+                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.unggulan }} />
+                  </Box>
+                </Box>
+              </Box>
+            </Paper>
+          </Box>
+        ))}
       </Stack>
     </Paper>
   )
 }
 
+
+
 export default Page;

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

@@ -1,26 +0,0 @@
-'use client'
-import { Box, Text } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
-import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
-
-function PengalamanOrganisasi() {
-  const pengalamanOrganisasiState = useProxy(stateProfilePPID)
-  return (<Box>
-    <Text fw={"bold"}>Pengalaman Organisasi</Text>
-    <PPIDTextEditor
-    key={pengalamanOrganisasiState.findById.data?.id ?? 'new'}
-    showSubmit={false}
-    onChange={(val) => {
-      if (pengalamanOrganisasiState.findById.data) {
-        pengalamanOrganisasiState.findById.data.pengalaman = val;
-      }
-    }}
-    initialContent={pengalamanOrganisasiState.findById.data?.pengalaman ?? ''}
-    />
-  </Box>
-  );
-}
-
-export default PengalamanOrganisasi;

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

@@ -1,26 +0,0 @@
-'use client'
-import { Box, Text } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
-import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
-
-function ProgramKerjaUnggulan() {
-  const programKerjaUnggulanState = useProxy(stateProfilePPID)
-  return (<Box>
-    <Text fw={"bold"}>Program Kerja Unggulan</Text>
-    <PPIDTextEditor
-    key={programKerjaUnggulanState.findById.data?.id ?? 'new'}
-    showSubmit={false}
-    onChange={(val) => {
-      if (programKerjaUnggulanState.findById.data) {
-        programKerjaUnggulanState.findById.data.unggulan = val;
-      }
-    }}
-    initialContent={programKerjaUnggulanState.findById.data?.unggulan ?? ''}
-    />
-  </Box>
-  );
-}
-
-export default ProgramKerjaUnggulan;

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

@@ -1,33 +0,0 @@
-'use client';
-
-import { Box, Text } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import dynamic from 'next/dynamic';
-import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
-
-// ini penting
-const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
-  ssr: false, // disable server side rendering
-});
-function RiwayatKarir() {
-  const riwayatKarirState = useProxy(stateProfilePPID);
-
-  return (
-    <Box>
-      <Text fw={"bold"}>Riwayat Karir</Text>
-      <PPIDTextEditor
-      key={riwayatKarirState.findById.data?.id ?? 'new'}
-        showSubmit={false}
-        onChange={(val) => {
-          if (riwayatKarirState.findById.data) {
-            riwayatKarirState.findById.data.riwayat = val;
-          }
-        }}
-        initialContent={riwayatKarirState.findById.data?.riwayat ?? ''}
-      />
-    </Box>
-  );
-}
-
-export default RiwayatKarir;

src/app/admin/(dashboard)/ppid/struktur-ppid/[id]/page.tsx

@@ -0,0 +1,225 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import colors from '@/con/colors';
+import {
+  Alert,
+  Box,
+  Button, Center, FileInput, Group, Image, Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from '@mantine/core';
+import { IconAlertCircle, IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateStrukturPPID from '../../../_state/ppid/struktur_ppid/struktur_PPID';
+import { toast } from 'react-toastify';
+import ApiFetch from '@/lib/api-fetch';
+
+
+function EditStrukturPPID() {
+  const strukturPPID = useProxy(stateStrukturPPID);
+  const params = useParams();
+  const router = useRouter()
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const id = params?.id as string;
+      if (!id) {
+        toast.error("ID tidak valid");
+        router.push("/admin/ppid/struktur-ppid");
+        return;
+      }
+
+      try {
+        const profileData = await strukturPPID.loadForEdit(id);
+
+        if (profileData && profileData.image?.link) {
+          setPreviewImage(profileData.image.link);
+        }
+      } catch (error) {
+        console.error("Error loading profile:", error);
+        toast.error("Gagal memuat data profile");
+      }
+    };
+
+    loadData();
+
+    return () => {
+      strukturPPID.editStruktur.reset(); // cleanup form
+    };
+  }, [params?.id, router]);
+
+  const handleFieldChange = (field: string, value: string) => {
+    strukturPPID.editStruktur.updateField(field as any, value);
+  };
+
+  const handleFileChange = (newFile: File | null) => {
+    if (!newFile) {
+      setFile(null);
+      return;
+    }
+
+    setFile(newFile);
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      setPreviewImage(event.target?.result as string);
+    };
+    reader.readAsDataURL(newFile);
+  };
+
+  const handleSubmit = async () => {
+    if (isSubmitting || !strukturPPID.editStruktur.form.name.trim()) {
+      toast.error("Nama wajib diisi");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      // Upload file jika ada
+      if (file) {
+        const uploadResponse = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = uploadResponse.data?.data;
+
+        if (!uploaded?.id) {
+          toast.error("Gagal upload gambar");
+          return;
+        }
+
+        strukturPPID.editStruktur.form.imageId = uploaded.id;
+      }
+
+      // Submit form
+      const success = await strukturPPID.editStruktur.submit();
+
+      if (success) {
+        toast.success("Berhasil menyimpan perubahan");
+        router.push("/admin/ppid/struktur-ppid");
+      }
+    } catch (error) {
+      console.error("Error submitting form:", error);
+      toast.error("Gagal menyimpan profile");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => {
+    router.back();
+  };
+
+  if (strukturPPID.struktur.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data struktur...</Text>
+        </Center>
+      </Box>
+    );
+  }
+
+   // Error state
+   if (strukturPPID.struktur.error) {
+    return (
+      <Box>
+        <Stack gap="md">
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+          <Alert icon={<IconAlertCircle size={16} />} color="red">
+            <Text fw="bold">Error</Text>
+            <Text>{strukturPPID.struktur.error}</Text>
+          </Alert>
+        </Stack>
+      </Box>
+    );
+  }
+
+  // No data state
+  if (!strukturPPID.struktur.data) {
+    return (
+      <Box>
+        <Stack gap="md">
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+          <Alert icon={<IconAlertCircle size={16} />} color="yellow">
+            <Text fw="bold">Data tidak ditemukan</Text>
+            <Text>Profile PPID tidak dapat ditemukan</Text>
+          </Alert>
+        </Stack>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={handleBack}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Struktur PPID</Title>
+              <TextInput
+                value={strukturPPID.editStruktur.form.name}
+                onChange={(e) => handleFieldChange('name', e.currentTarget.value)}
+                label={<Text fz="sm" fw="bold">Judul</Text>}
+                placeholder="Masukkan judul"
+              />
+              {/* File Upload */}
+              <FileInput
+                label={<Text fz="sm" fw="bold">Upload Gambar Baru (Opsional)</Text>}
+                value={file}
+                onChange={handleFileChange}
+                accept="image/*"
+              />
+
+              {/* Preview Gambar */}
+              <Box>
+                <Text fz="sm" fw="bold" mb="xs">Preview Gambar</Text>
+                {previewImage ? (
+                  <Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" />
+                ) : (
+                  <Center w={200} h={200} bg="gray.2">
+                    <Stack align="center" gap="xs">
+                      <IconImageInPicture size={48} color="gray" />
+                      <Text size="sm" c="gray">Tidak ada gambar</Text>
+                    </Stack>
+                  </Center>
+                )}
+              </Box>
+
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={handleSubmit}
+                  disabled={isSubmitting || strukturPPID.editStruktur.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditStrukturPPID;

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

@@ -1,10 +1,59 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateStrukturPPID from '../../_state/ppid/struktur_ppid/struktur_PPID';
+import { useShallowEffect } from '@mantine/hooks';
 
 function Page() {
+  const router = useRouter()
+  const strukturPPID = useProxy(stateStrukturPPID)
+  useShallowEffect(() => {
+    strukturPPID.struktur.load("1")
+  }, [])
+
+  if (!strukturPPID.struktur.data) {
+    return <Stack>
+      <Skeleton radius={10} h={800} />
+    </Stack>
+  }
+
+  const dataArray = Array.isArray(strukturPPID.struktur.data)
+    ? strukturPPID.struktur.data
+    : [strukturPPID.struktur.data];
+
   return (
-    <div>
-      struktur-ppid
-    </div>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack gap={"xs"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={3}>Preview Struktur PPID</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button onClick={() => router.push(`/admin/ppid/struktur-ppid/${strukturPPID.struktur.data?.id}`)} bg={colors['blue-button']}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        {dataArray.map((item) => (
+          <Paper key={item.id} p={"xl"} bg={colors['BG-trans']}>
+            <Box>
+              <Text fw={"bold"} fz={"h4"}>{item.name}</Text>
+              <Image 
+              w={{ base: "100%", md: "100%" }} 
+              src={item.image?.link}
+              alt=''
+              onError={(e) => {
+                e.currentTarget.src = "/struktur_ppid.png";
+              }}
+              />
+            </Box>
+          </Paper>
+        ))}
+      </Stack>
+    </Paper>
   );
 }
 

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

@@ -38,7 +38,7 @@ function VisiMisiPPIDList() {
       <Stack pos={"relative"} gap={"22"}>
         <Grid>
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Visi Misi PPID</Title>
+            <Title order={3}>Preview Visi Misi PPID</Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
             <Button bg={colors['blue-button']} onClick={() => router.push('/admin/ppid/visi-misi-ppid/edit')}>
@@ -46,7 +46,7 @@ function VisiMisiPPIDList() {
             </Button>
           </GridCol>
         </Grid>
-        <Box px={{ base: "md", md: 100 }}>
+        <Box>
           <Stack gap={'lg'}>
             <Paper p={"xl"} bg={colors['BG-trans']}>
               <Box pb={30}>

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

@@ -9,6 +9,7 @@ import PermohonanKeberatanInformasiPublik from "./permohonan_keberatan_informasi
 import ProfilePPID from "./profile_ppid";
 import VisiMisiPPID from "./visi_misi_ppid/visi_misi_ppid";
 import DasarHukumPPID from "./dasar_hukum";
+import StrukturPPID from "./struktur_ppid";
 
 
 
@@ -24,6 +25,7 @@ const PPID = new Elysia({ prefix: "/api/ppid", tags: ["PPID"] })
 .use(PermohonanKeberatanInformasiPublik)
 .use(VisiMisiPPID)
 .use(DasarHukumPPID)
+.use(StrukturPPID)
 
 
 

src/app/api/[[...slugs]]/_lib/ppid/profile_ppid/edit-img.ts

@@ -1,82 +0,0 @@
-import prisma from "@/lib/prisma";
-import { Context } from "elysia";
-import { writeFile, unlink } from "fs/promises";
-import path from "path";
-import fs from "fs";
-import { mkdir } from "fs/promises";
-
-interface ProfilePPIDBody {
-  id: string;
-  file: Blob & { name: string; type: string };
-}
-
-export default async function editImageProfilePPID(context: Context<{ body: ProfilePPIDBody }>) {
-  const { id, file } = context.body;
-
-  if (!file || !id) {
-    return {
-      success: false,
-      message: "File atau ID harus disertakan",
-    };
-  }
-
-  // Validasi ekstensi file
-  const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
-  if (!allowedTypes.includes(file.type)) {
-    return {
-      success: false,
-      message: "Tipe file tidak diizinkan. Hanya JPG, PNG, atau WEBP",
-    };
-  }
-
-  const bytes = await file.arrayBuffer();
-  const buffer = Buffer.from(bytes);
-  const filename = `${id}_${Date.now()}_${file.name}`;
-  const folderPath = path.resolve("public", "assets", "images", "ppid", "profile-ppid");
-  
-  try {
-    await mkdir(folderPath, { recursive: true });
-    
-    console.log('Folder path:', folderPath);
-    const filePath = path.join(folderPath, filename);
-    console.log('File path:', filePath);
-    
-    await writeFile(filePath, buffer);
-    
-    if (!fs.existsSync(filePath)) {
-      return {
-        success: false,
-        message: "Failed to write file to disk",
-      };
-    }
-    
-    const imageUrl = `/assets/images/ppid/profile-ppid/${filename}`;
-
-    // Hapus file lama (opsional, kalau mau bersih)
-    const oldData = await prisma.profilePPID.findUnique({ where: { id } });
-    if (oldData?.imageUrl) {
-      const oldPath = path.resolve("public", oldData.imageUrl.replace(/^\//, ""));
-      if (fs.existsSync(oldPath)) {
-        await unlink(oldPath).catch(() => {});
-      }
-    }
-
-    // Update DB
-    await prisma.profilePPID.update({
-      where: { id },
-      data: { imageUrl },
-    });
-
-    return {
-      success: true,
-      message: "Gambar berhasil diunggah",
-      url: imageUrl,
-    };
-  } catch (error) {
-    console.error('Error uploading file:', error);
-    return {
-      success: false,
-      message: "Gagal mengunggah gambar",
-    };
-  }
-}

src/app/api/[[...slugs]]/_lib/ppid/profile_ppid/find-by-id.ts

@@ -1,33 +1,51 @@
 import prisma from "@/lib/prisma";
-import { Context } from "elysia";
 
-export default async function profilePPIDFindById(context: Context) {
+export default async function handler(request: Request) {
+  const url = new URL(request.url);
+  const pathSegments = url.pathname.split('/');
+  const id = pathSegments[pathSegments.length - 1];
+
+  if (!id) {
+    return Response.json({
+      success: false,
+      message: "ID tidak boleh kosong",
+    }, { status: 400 });
+  }
+
   try {
-    const id = context?.params?.slugs?.[0];
-
-    // If no ID provided, get the first profile
-    if (!id) {
-      const data = await prisma.profilePPID.findFirst();
-      return {
-        success: true,
-        data,
-      };
+    if (typeof id !== 'string') {
+      return Response.json({
+        success: false,
+        message: "ID tidak valid",
+      }, { status: 400 });
     }
 
-    const data = await prisma.profilePPID.findUniqueOrThrow({
+    const data = await prisma.profilePPID.findUnique({
       where: { id },
+      include: {
+        image: true,
+      }
     });
 
-    return {
-      success: true,
-      data,
-    };
-  } catch (error) {
-    console.error("Error fetching profilePPID:", error);
+    if (!data) {
+      return Response.json({
+        success: false,
+        message: "Data tidak ditemukan",
+      }, { status: 404 });
+    }
 
-    return {
+    return Response.json({
+      success: true,
+      message: "Berhasil mengambil data berdasarkan ID",
+      data,
+    }, { status: 200 });
+  } catch (e) {
+    console.error("Find by ID error:", e);
+    return Response.json({
       success: false,
-      message: error instanceof Error ? error.message : "Unknown error",
-    };
+      message: "Gagal mengambil data: " + (e instanceof Error ? e.message : 'Unknown error'),
+    }, {
+      status: 500,
+    });
   }
 }

src/app/api/[[...slugs]]/_lib/ppid/profile_ppid/index.ts

@@ -1,24 +1,30 @@
 import Elysia, { t } from "elysia";
 import profilePPIDFindById from "./find-by-id";
 import profilePPIDUpdate from "./update";
-import editImageProfilePPID from "./edit-img";
 
 const ProfilePPID = new Elysia({
     prefix: "/profileppid",
     tags: ["PPID/Profile PPID"]
 })
-    .get("/find-by-id", profilePPIDFindById)
-    .post("/update", profilePPIDUpdate, {
+    .get("/:id", async (context) => {
+        const response = await profilePPIDFindById(new Request(context.request))
+        return response
+    })
+    .put("/:id", async (context) => {
+        const response = await profilePPIDUpdate(context)
+        return response
+    },
+    {
         body: t.Object({
-            id: t.String(),
             name: t.String(),
             biodata: t.String(),
             riwayat: t.String(),
             pengalaman: t.String(),
             unggulan: t.String(),
+            imageId: t.String(),
         })
-    })
-    .post("/edit-img", editImageProfilePPID)
+    }
+)
 
 
 export default ProfilePPID;

src/app/api/[[...slugs]]/_lib/ppid/profile_ppid/update.ts

@@ -1,38 +1,121 @@
 import prisma from "@/lib/prisma";
 import { Prisma } from "@prisma/client";
 import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
 
-type FormCreate = Prisma.ProfilePPIDGetPayload<{
-    select: {
-        id: true;
-        name: true;
-        biodata: true;
-        riwayat: true;
-        pengalaman: true;
-        unggulan: true;
-    }
-}>
+type FormUpdate = Prisma.ProfilePPIDGetPayload<{
+  select: {
+    id: true;
+    name: true;
+    biodata: true;
+    riwayat: true;
+    pengalaman: true;
+    unggulan: true;
+    imageId: true;
+  };
+}>;
 export default async function profilePPIDUpdate(context: Context) {
-    const body = context.body as FormCreate;
+  try {
+    const id = context.params?.id as string;
+    const body = (await context.body) as Omit<FormUpdate, "id">;
 
-    await prisma.profilePPID.update({
-        where: {
-            id: body.id
-        },
-        data: {
-            name: body.name,
-            biodata: body.biodata,
-            riwayat: body.riwayat,
-            pengalaman: body.pengalaman,
-            unggulan: body.unggulan,
+    const { name, biodata, riwayat, pengalaman, unggulan, imageId } = body;
+
+    if (!id) {
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: "ID tidak boleh kosong",
+        }),
+        {
+          status: 400,
+          headers: {
+            "Content-Type": "application/json",
+          },
         }
-    })
+      );
+    }
 
-    return {
+    const existing = await prisma.profilePPID.findUnique({
+      where: {
+        id,
+      },
+      include: {
+        image: true,
+      },
+    });
+
+    if (!existing) {
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: "Data tidak ditemukan",
+        }),
+        {
+          status: 404,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+    }
+
+    if (existing.imageId !== imageId) {
+      const oldImage = existing.image;
+      if (oldImage) {
+        try {
+          const filePath = path.join(oldImage.path, oldImage.name);
+          await fs.unlink(filePath);
+          await prisma.fileStorage.delete({
+            where: { id: oldImage.id },
+          });
+        } catch (error) {
+          console.error("Gagal hapus gambar lama:", error);
+        }
+      }
+    }
+
+    const updated = await prisma.profilePPID.update({
+      where: {
+        id,
+      },
+      data: {
+        name,
+        biodata,
+        riwayat,
+        pengalaman,
+        imageId,
+        unggulan,
+      },
+    });
+
+    return new Response(
+      JSON.stringify({
         success: true,
         message: "Profile PPID Berhasil Dibuat",
-        data: {
-            ...body,
-        }
-    }
-}
+        data: updated,
+      }),
+      {
+        status: 200,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  } catch (error) {
+    console.error("Error updating profile PPID:", error);
+    return new Response(
+      JSON.stringify({
+        success: false,
+        message: "Terjadi kesalahan saat mengupdate profile PPID",
+      }),
+      {
+        status: 500,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/find-by-id.ts

@@ -0,0 +1,51 @@
+import prisma from "@/lib/prisma";
+
+export default async function strukturPPIDFindById(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+
+    if (!id) {
+        return Response.json({
+            success: false,
+            message: "ID tidak boleh kosong",
+        }, { status: 400 });
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return Response.json({
+                success: false,
+                message: "ID tidak valid",
+            }, { status: 400 });
+        }
+
+        const data = await prisma.strukturPPID.findUnique({
+            where: { id },
+            include: {
+                image: true,
+            }
+        });
+
+        if (!data) {
+            return Response.json({
+                success: false,
+                message: "Data tidak ditemukan",
+            }, { status: 404 });
+        }
+
+        return Response.json({
+            success: true,
+            message: "Berhasil mengambil data berdasarkan ID",
+            data,
+        }, { status: 200 });
+    } catch (e) {
+        console.error("Find by ID error:", e);
+        return Response.json({
+            success: false,
+            message: "Gagal mengambil data: " + (e instanceof Error ? e.message : 'Unknown error'),
+        }, {
+            status: 500,
+        });
+    }
+}

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/index.ts

@@ -0,0 +1,23 @@
+import Elysia, { t } from "elysia";
+import strukturPPIDFindById from "./find-by-id";
+import strukturPPIDUpdate from "./update";
+
+const StrukturPPID = new Elysia({
+    prefix: "/strukturppid",
+    tags: ["PPID/Struktur PPID"]
+})
+.get("/:id", async (context) => {
+    const response = await strukturPPIDFindById(new Request(context.request))
+    return response
+})
+.put("/:id", async (context) => {
+    const response = await strukturPPIDUpdate(context)
+    return response
+}, {
+    body: t.Object({
+        name: t.String(),
+        imageId: t.String(),
+    })
+})
+
+export default StrukturPPID

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/update.ts

@@ -0,0 +1,116 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import path from "path";
+import fs from "fs/promises";
+import { Prisma } from "@prisma/client";
+
+type FormUpdate = Prisma.StrukturPPIDGetPayload<{
+    select: {
+        id: true;
+        name: true;
+        imageId: true;
+    };
+}>;
+
+export default async function strukturPPIDUpdate(context: Context) {
+try {
+    const id = context.params?.id as string;
+    const body = (await context.body) as Omit<FormUpdate, "id">;
+
+    const { name, imageId } = body;
+
+    if (!id) {
+        return new Response(
+            JSON.stringify({
+                success: false,
+                message: "ID tidak boleh kosong",
+            }),
+            {
+                status: 400,
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            }
+        )
+    }
+
+    const existing = await prisma.strukturPPID.findUnique({
+        where: {
+            id
+        },
+        include: {
+            image: true,
+        }
+    })
+
+    if (!existing) {
+        return new Response(
+            JSON.stringify({
+                success: false,
+                message: "Data tidak ditemukan",
+            }),
+            {
+                status: 404,
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            }
+        )
+    }
+
+    if (existing.imageId !== imageId) {
+       const oldImage = existing.image;
+       if (oldImage) {
+        try {
+            const filePath = path.join(oldImage.path, oldImage.name);
+            await fs.unlink(filePath);
+            await prisma.fileStorage.delete({
+                where: { id: oldImage.id },
+            })
+        } catch (error) {
+            console.error("Gagal hapus gambar lama:", error);
+        }
+       } 
+    }
+
+    const updated = await prisma.strukturPPID.update({
+        where: {
+            id
+        },
+        data: {
+            name,
+            imageId,
+        }
+    })
+
+    return new Response(
+        JSON.stringify({
+            success: true,
+            message: "Struktur PPID Berhasil Dibuat",
+            data: updated,
+        }),
+        {
+            status: 200,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        }
+    )
+
+} catch (error) {
+    console.error("Error updating struktur PPID:", error);
+    return new Response(
+        JSON.stringify({
+            success: false,
+            message: "Terjadi kesalahan saat mengupdate struktur PPID",
+        }),
+        {
+            status: 500,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        }
+    )
+}
+}
+    

src/app/darmasaba/(pages)/ppid/profile-ppid/page.tsx

@@ -9,10 +9,10 @@ import BackButton from '../../desa/layanan/_com/BackButto';
 function Page() {
   const allList = useProxy(stateProfilePPID)
   useShallowEffect(() => {
-    allList.findById.load("1") // Assuming "1" is your default ID, adjust as needed
+    allList.profile.load("1") // Assuming "1" is your default ID, adjust as needed
   }, [])
 
-  if (!allList.findById.data) return <Stack bg={colors.Bg} py={"xl"} gap={"22"}>
+  if (!allList.profile.data) return <Stack bg={colors.Bg} py={"xl"} gap={"22"}>
     <Box px={{ base: 'md', md: 100 }}>
       <Skeleton style={{backgroundColor: colors.Bg}} h={40} />
     </Box>
@@ -28,9 +28,9 @@ function Page() {
     </Box>
   </Stack>
 
-  const dataArray = Array.isArray(allList.findById.data)
-    ? allList.findById.data
-    : [allList.findById.data];
+  const dataArray = Array.isArray(allList.profile.data)
+    ? allList.profile.data
+    : [allList.profile.data];
 
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>

src/app/darmasaba/_com/main-page/landing-page/index.tsx

@@ -13,8 +13,63 @@ import {
 } from "@mantine/core";
 import ModuleView from "./ModuleView";
 import SosmedView from "./SosmedView";
+import { useEffect, useState } from "react";
+
+const getDayOfWeek = () => {
+  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+  const today = new Date();
+  return days[today.getDay()];
+}
+
+const getCurrentTime = () => {
+  const now = new Date();
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  return `${hours}:${minutes}`;
+}
+
+const isWorkingHours = (currentTime: string): boolean => {
+  const [openTime, closeTime] = ['08:00', '11:00'];
+
+  const compareTimes = (time1: string, time2: string) => {
+    const [hour1, minute1] = time1.split(':').map(Number);
+    const [hour2, minute2] = time2.split(':').map(Number);
+
+    if (hour1 < hour2) return true;
+    if (hour1 > hour2) return false;
+    return minute1 <= minute2;
+  };
+  return compareTimes(currentTime, closeTime) && !compareTimes(currentTime, openTime);
+}
+const getWorkStatus = (day: string, currentTime: string): { status: string; message: string } => {
+  const workingDays = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat'];
+
+  if (!workingDays.includes(day)) {
+    return {
+      status: 'Tutup',
+      message: 'Sabtu - Minggu'
+    }
+  }
+  const isOpen = isWorkingHours(currentTime)
+  return isOpen ? { status: 'Buka', message: '08:00 - 16:00' } : { status: 'Tutup', message: '08:00 - 16:00' };
+}
+
 
 function LandingPage() {
+  const [workStatus, setWorkStatus] = useState<{ status: string; message: string }>
+    ({ status: '', message: '' });
+
+  useEffect(() => {
+    const updateWorkStatus = () => {
+      const day = getDayOfWeek();
+      const time = getCurrentTime();
+      const status = getWorkStatus(day, time);
+      setWorkStatus(status);
+    }
+    updateWorkStatus();
+    const intervalId = setInterval(updateWorkStatus, 60 * 1000);
+    return () => clearInterval(intervalId);
+  }, []);
   return (
     <Stack bg={colors["Bg"]}>
       <Flex
@@ -135,61 +190,55 @@ function LandingPage() {
                           md: 6,
                         }}>
                           <Box>
-                          <Text c={colors["white-1"]} fz={"sm"}>
-                            Jadwal Kerja
-                          </Text>
-                          <Paper
-                            w={{ base: "100%", sm: "100%", md: "auto" }}
-                            p={5}
-                            bg={colors["white-1"]}
-                          >
-                            <Flex justify={"space-between"} align={"center"}>
-                              <Box>
-                                <Text fz={"sm"}>
-                                  Buka
-                                </Text>
-                                <Text fw={"bold"} fz={"lg"}>
-                                  08:00
-                                </Text>
-                              </Box>
-                              <Text fz={"lg"} fw={"bold"}>-</Text>
-                              <Box>
-                                <Text fz={"sm"}>
-                                  Tutup
-                                </Text>
-                                <Text fw={"bold"} fz={"lg"}>
-                                  16:00
-                                </Text>
-                              </Box>
-                            </Flex>
-                          </Paper>
-                        </Box>
+                            <Text c={colors["white-1"]} fz={"sm"}>
+                              Jadwal Kerja
+                            </Text>
+                            <Paper
+                              w={{ base: "100%", sm: "100%", md: "auto" }}
+                              p={5}
+                              bg={colors["white-1"]}
+                            >
+                              <Flex justify={"space-between"} align={"center"}>
+                                <Paper
+                                  w={{ base: "100%", sm: "100%", md: "auto" }}
+                                  p={5}
+                                  bg={colors["white-1"]}
+                                >
+
+                                  <Box>
+                                    <Text fw="bold" fz="sm" c={workStatus.status === 'Buka' ? "black" : "red"}>
+                                      {workStatus.status}
+                                    </Text>
+                                    <Text fw="bold" fz="lg" >
+                                      {workStatus.message}
+                                    </Text>
+                                  </Box>
+                                </Paper>
+                              </Flex>
+                            </Paper>
+                          </Box>
                         </GridCol>
-                        
-                        <GridCol span={{
-                          base: 12,
-                          lg: 6,
-                          md: 6,
-                        }}>
-                           <Box>
-                          <Text c={colors["white-1"]} fz={"sm"}>
-                            Rabu, 10 Maret 2025
-                          </Text>
-                          <Paper
-                            w={{ base: "100%", sm: "100%", md: "auto" }}
-                            p={5}
-                            bg={colors["white-1"]}
-                          >
-                            <Box>
-                              <Text fz={"sm"}>
-                                Buka
+                        {/* Edit yang ini */}
+                        <GridCol span={{ base: 12, lg: 6, md: 6 }}>
+                          <Box>
+                            <Text c={colors["white-1"]} fz={"sm"}>
+                              {new Intl.DateTimeFormat('id-ID', {
+                                weekday: 'long',
+                                year: 'numeric',
+                                month: 'long',
+                                day: 'numeric'
+                              }).format(new Date())}
+                            </Text>
+                            <Paper bg={colors["white-1"]} p={10}>
+                              <Text fz="sm" >
+                                Status
                               </Text>
-                              <Text fw={"bold"} fz={"lg"}>
-                                Sabtu - Minggu
+                              <Text fw="bold" fz="lg" >
+                                {workStatus.status === 'Buka' ? 'Operasional' : 'Tutup'}
                               </Text>
-                            </Box>
-                          </Paper>
-                        </Box>
+                            </Paper>
+
+                          </Box>
                         </GridCol>
                       </Grid>
                     </Paper>