Merge pull request #38 from bipproduction/nico/1-jul-25

UI & API Menu Keamanan baru 3 Menu : Keamanan Lingkungan, Polsek Terd

prisma/migrations/20250630081247_fix_layanan_polsek_deletedat/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "LayananPolsek" ALTER COLUMN "deletedAt" DROP NOT NULL,
+ALTER COLUMN "deletedAt" DROP DEFAULT;

prisma/schema.prisma

@@ -919,11 +919,13 @@ model LayananPolsek {
   nama           String // contoh: "Pelayanan SKCK", "Laporan Kriminal"
   createdAt      DateTime         @default(now())
   updatedAt      DateTime         @updatedAt
-  deletedAt      DateTime         @default(now())
+  deletedAt      DateTime?
   isActive       Boolean          @default(true)
   PolsekTerdekat PolsekTerdekat[]
 }
 
+
+
 // ========================================= KONTAK DARURAT ========================================= //
 model KontakDaruratKeamanan {
   id        String   @id @default(cuid())
@@ -984,22 +986,22 @@ model VideoKeamanan {
 
 // ========================================= LAPORAN PUBLIK ========================================= //
 model LaporanPublik {
-  id             String       @id @default(cuid())
+  id           String                    @id @default(cuid())
-  judul          String
+  judul        String
-  lokasi         String
+  lokasi       String
-  tanggalWaktu   DateTime
+  tanggalWaktu DateTime
-  status         StatusLaporan
+  status       StatusLaporan
-  penanganan     PenangananLaporanPublik[]
+  penanganan   PenangananLaporanPublik[]
-  kronologi      String?      // Optional, bisa diisi detail kronologi
+  kronologi    String? // Optional, bisa diisi detail kronologi
-  createdAt      DateTime     @default(now())
+  createdAt    DateTime                  @default(now())
-  updatedAt      DateTime     @updatedAt
+  updatedAt    DateTime                  @updatedAt
 }
 
 model PenangananLaporanPublik {
-  id              String           @id @default(cuid())
+  id        String        @id @default(cuid())
-  laporanId       String
+  laporanId String
-  deskripsi       String
+  deskripsi String
-  laporan         LaporanPublik @relation(fields: [laporanId], references: [id], onDelete: Cascade)
+  laporan   LaporanPublik @relation(fields: [laporanId], references: [id], onDelete: Cascade)
 }
 
 enum StatusLaporan {
@@ -1009,13 +1011,14 @@ enum StatusLaporan {
 }
 
 model Pelapor {
-  id             String       @id @default(cuid())
+  id           String      @id @default(cuid())
-  nama           String
+  nama         String
-  alamat         String
+  alamat       String
-  nomorTelepon   String
+  nomorTelepon String
-  image FileStorage @relation(fields: [imageId], references: [id])
+  image        FileStorage @relation(fields: [imageId], references: [id])
-  imageId String
+  imageId      String
 }
+
 // ========================================= TIPS KEAMANAN ========================================= //
 model MenuTipsKeamanan {
   id        String       @id @default(cuid())

src/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan.ts

@@ -0,0 +1,229 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  imageId: z.string().nonempty(),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  imageId: "",
+};
+
+const keamananLingkunganState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(keamananLingkunganState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        keamananLingkunganState.create.loading = true;
+        const res = await ApiFetch.api.keamanan.keamananlingkungan[
+          "create"
+        ].post(keamananLingkunganState.create.form);
+        if (res.status === 200) {
+          keamananLingkunganState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        keamananLingkunganState.create.loading = false;
+      }
+    },
+    resetForm() {
+      keamananLingkunganState.create.form = { ...defaultForm };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.KeamananLingkunganGetPayload<{
+          include: { image: true };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.keamanan.keamananlingkungan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        keamananLingkunganState.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KeamananLingkunganGetPayload<{
+      include: { image: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/keamanan/keamananlingkungan/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          keamananLingkunganState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          keamananLingkunganState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        keamananLingkunganState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        keamananLingkunganState.delete.loading = true;
+
+        const response = await fetch(
+          `/api/keamanan/keamananlingkungan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Keamanan ingkungan berhasil dihapus"
+          );
+          await keamananLingkunganState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus keamanan ingkungan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus keamanan ingkungan");
+      } finally {
+        keamananLingkunganState.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/keamanan/keamananlingkungan/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId || "",
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading keamanan lingkungan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(keamananLingkunganState.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        keamananLingkunganState.edit.loading = true;
+
+        const response = await fetch(`/api/keamanan/keamananlingkungan/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            deskripsi: this.form.deskripsi,
+            imageId: this.form.imageId,
+          }),
+        });
+
+        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 keamanan lingkungan");
+          await keamananLingkunganState.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update keamanan lingkungan");
+        }
+      } catch (error) {
+        console.error("Error updating keamanan lingkungan:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update keamanan lingkungan"
+        );
+        return false;
+      } finally {
+        keamananLingkunganState.edit.loading = false;
+      }
+    },
+    reset() {
+      keamananLingkunganState.edit.id = "";
+      keamananLingkunganState.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+export default keamananLingkunganState;

src/app/admin/(dashboard)/_state/keamanan/polsek-terdekat.ts

@@ -0,0 +1,242 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  nama: z.string().min(3, "Nama minimal 3 karakter"),
+  jarakKeDesa: z.string().min(3, "Jarak minimal 3 karakter"),
+  alamat: z.string().min(3, "Alamat minimal 3 karakter"),
+  nomorTelepon: z.string().min(3, "Nomor Telepon minimal 3 karakter"),
+  jamOperasional: z.string().min(3, "Jam Operasional minimal 3 karakter"),
+  embedMapUrl: z.string().min(3, "Embed Map Url minimal 3 karakter"),
+  namaTempatMaps: z.string().min(3, "Nama Tempat Maps minimal 3 karakter"),
+  alamatMaps: z.string().min(3, "Alamat Maps minimal 3 karakter"),
+  linkPetunjukArah: z.string().min(3, "Link Petunjuk Arah minimal 3 karakter"),
+  layananPolsekId: z.string().min(3, "Layanan Polsek Id minimal 3 karakter"),
+});
+
+const defaultForm = {
+  nama: "",
+  jarakKeDesa: "",
+  alamat: "",
+  nomorTelepon: "",
+  jamOperasional: "",
+  embedMapUrl: "",
+  namaTempatMaps: "",
+  alamatMaps: "",
+  linkPetunjukArah: "",
+  layananPolsekId: "",
+};
+
+const polsekTerdekatState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(polsekTerdekatState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        polsekTerdekatState.create.loading = true;
+        const res = await ApiFetch.api.keamanan.polsekterdekat["create"].post(
+          polsekTerdekatState.create.form
+        );
+        if (res.status === 200) {
+          polsekTerdekatState.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        polsekTerdekatState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.PolsekTerdekatGetPayload<{
+          include: { layananPolsek: true };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.keamanan.polsekterdekat["find-many"].get();
+      if (res.status === 200) {
+        polsekTerdekatState.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PolsekTerdekatGetPayload<{
+      include: { layananPolsek: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/keamanan/polsekterdekat/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          polsekTerdekatState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          polsekTerdekatState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        polsekTerdekatState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        polsekTerdekatState.delete.loading = true;
+
+        const response = await fetch(`/api/keamanan/polsekterdekat/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Polsek terdekat berhasil dihapus");
+          await polsekTerdekatState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus polsek terdekat");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus polsek terdekat");
+      } finally {
+        polsekTerdekatState.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/keamanan/polsekterdekat/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            jarakKeDesa: data.jarakKeDesa,
+            alamat: data.alamat,
+            nomorTelepon: data.nomorTelepon,
+            jamOperasional: data.jamOperasional,
+            embedMapUrl: data.embedMapUrl,
+            namaTempatMaps: data.namaTempatMaps,
+            alamatMaps: data.alamatMaps,
+            linkPetunjukArah: data.linkPetunjukArah,
+            layananPolsekId: data.layananPolsekId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading polsek terdekat:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(polsekTerdekatState.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        polsekTerdekatState.edit.loading = true;
+        const response = await fetch(
+          `/api/keamanan/polsekterdekat/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: this.form.nama,
+              jarakKeDesa: this.form.jarakKeDesa,
+              alamat: this.form.alamat,
+              nomorTelepon: this.form.nomorTelepon,
+              jamOperasional: this.form.jamOperasional,
+              embedMapUrl: this.form.embedMapUrl,
+              namaTempatMaps: this.form.namaTempatMaps,
+              alamatMaps: this.form.alamatMaps,
+              linkPetunjukArah: this.form.linkPetunjukArah,
+              layananPolsekId: this.form.layananPolsekId,
+            }),
+          }
+        );
+        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 polsek terdekat");
+          await polsekTerdekatState.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate polsek terdekat");
+        }
+      } catch (error) {
+        console.error("Error updating polsek terdekat:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate polsek terdekat"
+        );
+        return false;
+      } finally {
+        polsekTerdekatState.edit.loading = false;
+      }
+    },
+    reset() {
+      polsekTerdekatState.edit.id = "";
+      polsekTerdekatState.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+export default polsekTerdekatState;

src/app/admin/(dashboard)/_state/keamanan/tips-keamanan.ts

@@ -0,0 +1,212 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  judul: z.string().min(3, "Nama minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  imageId: z.string().nonempty(),
+});
+
+const defaultForm = {
+  judul: "",
+  deskripsi: "",
+  imageId: "",
+};
+
+const tipsKeamananState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(tipsKeamananState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        tipsKeamananState.create.loading = true;
+        const res = await ApiFetch.api.keamanan.menutipskeamanan["create"].post(
+          tipsKeamananState.create.form
+        );
+        if (res.status === 200) {
+          tipsKeamananState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        tipsKeamananState.create.loading = false;
+      }
+    },
+    resetForm() {
+      tipsKeamananState.create.form = { ...defaultForm };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.MenuTipsKeamananGetPayload<{
+          include: { image: true };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.keamanan.menutipskeamanan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        tipsKeamananState.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.MenuTipsKeamananGetPayload<{
+      include: { image: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/keamanan/menutipskeamanan/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          tipsKeamananState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          tipsKeamananState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        tipsKeamananState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        tipsKeamananState.delete.loading = true;
+        const response = await fetch(
+          `/api/keamanan/menutipskeamanan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        const result = await response.json();
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Tips keamanan berhasil dihapus");
+          await tipsKeamananState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus tips keamanan");
+        }
+      } catch (error) {
+        toast.error("Terjadi kesalahan saat menghapus tips keamanan");
+        console.error("Gagal delete:", error);
+      } finally {
+        tipsKeamananState.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    loading: false,
+    form: { ...defaultForm },
+
+    async load(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        tipsKeamananState.update.loading = true;
+        const response = await fetch(`/api/keamanan/menutipskeamanan/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId || "",
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        toast.error("Gagal memuat data");
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateForm.safeParse(tipsKeamananState.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        tipsKeamananState.update.loading = true;
+        const response = await fetch(
+          `/api/keamanan/menutipskeamanan/${tipsKeamananState.update.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              judul: this.form.judul,
+              deskripsi: this.form.deskripsi,
+              imageId: this.form.imageId,
+            }),
+          }
+        );
+        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 tips keamanan");
+          await tipsKeamananState.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update tips keamanan");
+        }
+      } catch (error) {
+        console.error("Error updating data:", error);
+        toast.error("Gagal update data");
+        return false;
+      } finally {
+        tipsKeamananState.update.loading = false;
+      }
+    },
+    reset() {
+      tipsKeamananState.update.id = "";
+      tipsKeamananState.update.form = { ...defaultForm };
+    },
+  },
+});
+export default tipsKeamananState;

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

@@ -35,9 +35,7 @@ function DetailBerita() {
   if (!beritaState.berita.findUnique.data) {
     return (
       <Stack py={10}>
-        {Array.from({ length: 10 }).map((_, k) => (
+        <Skeleton h={40} />
-          <Skeleton key={k} h={40} />
-        ))}
       </Stack>
     )
   }

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx

@@ -0,0 +1,179 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { useProxy } from "valtio/utils";
+
+
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import { Dropzone } from "@mantine/dropzone";
+import keamananLingkunganState from "../../../../_state/keamanan/keamanan-lingkungan";
+
+function EditKeamananLingkungan() {
+  const keamananState = useProxy(keamananLingkunganState);
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: keamananState.edit.form.name || '',
+    deskripsi: keamananState.edit.form.deskripsi || '',
+    imageId: keamananState.edit.form.imageId || ''
+  });
+
+  // Load berita by id saat pertama kali
+  useEffect(() => {
+    const loadBerita = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await keamananState.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading keamananLingkungan:", error);
+        toast.error("Gagal memuat data keamananLingkungan");
+      }
+    };
+
+    loadBerita();
+  }, [params?.id]); // ✅ hapus beritaState dari dependency
+
+  const handleSubmit = async () => {
+
+    try {
+      // Update global state with form data
+      keamananState.edit.form = {
+        ...keamananState.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file baru, upload
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        // Update imageId in global state
+        keamananState.edit.form.imageId = uploaded.id;
+      }
+
+      await keamananState.edit.update();
+      toast.success("Keamanan Lingkungan berhasil diperbarui!");
+      router.push("/admin/keamanan/keamanan-lingkungan-pecalang-patwal");
+    } catch (error) {
+      console.error("Error updating keamananLingkungan:", error);
+      toast.error("Terjadi kesalahan saat memperbarui keamananLingkungan");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Keamanan Lingkungan</Title>
+          <Dropzone
+            onDrop={(files) => {
+              const selectedFile = files[0]; // Ambil file pertama
+              if (selectedFile) {
+                setFile(selectedFile);
+                setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+              }
+            }}
+            onReject={() => toast.error('File tidak valid.')}
+            maxSize={5 * 1024 ** 2} // Maks 5MB
+            accept={{ 'image/*': [] }}
+          >
+            <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+              <Dropzone.Accept>
+                <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+              </Dropzone.Accept>
+              <Dropzone.Reject>
+                <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+              </Dropzone.Reject>
+              <Dropzone.Idle>
+                <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+              </Dropzone.Idle>
+
+              <div>
+                <Text size="xl" inline>
+                  Drag gambar ke sini atau klik untuk pilih file
+                </Text>
+                <Text size="sm" c="dimmed" inline mt={7}>
+                  Maksimal 5MB dan harus format gambar
+                </Text>
+              </div>
+            </Group>
+          </Dropzone>
+
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Judul Keamanan Lingkungan</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                keamananState.edit.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKeamananLingkungan;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx

@@ -0,0 +1,111 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import colors from '@/con/colors';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import keamananLingkunganState from '../../../_state/keamanan/keamanan-lingkungan';
+
+
+function DetailKeamananLingkungan() {
+  const keamananState = useProxy(keamananLingkunganState)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    keamananState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      keamananState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/keamanan/keamanan-lingkungan-pecalang-patwal")
+    }
+  }
+
+  if (!keamananState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Keamanan Lingkungan</Text>
+          {keamananState.findUnique.data ? (
+            <Paper key={keamananState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul Keamanan Lingkungan</Text>
+                  <Text fz={"lg"}>{keamananState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: keamananState.findUnique.data?.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={keamananState.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (keamananState.findUnique.data) {
+                        setSelectedId(keamananState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={keamananState.delete.loading || !keamananState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (keamananState.findUnique.data) {
+                        router.push(`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${keamananState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!keamananState.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus keamanan lingkungan ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailKeamananLingkungan;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx

@@ -1,43 +1,147 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import ApiFetch from '@/lib/api-fetch';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../_com/keamananEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import keamananLingkunganState from '../../../_state/keamanan/keamanan-lingkungan';
+
 
 function CreateKeamananLingkungan() {
+  const keamananState = useProxy(keamananLingkunganState)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
+
+  const resetForm = () => {
+    keamananState.create.form = {
+      name: "",
+      deskripsi: "",
+      imageId: "",
+    }
+    setPreviewImage(null);
+    setFile(null);
+  }
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    keamananState.create.form.imageId = uploaded.id;
+
+    await keamananState.create.create();
+
+    resetForm();
+    router.push("/admin/keamanan/keamanan-lingkungan-pecalang-patwal")
+  }
+
   return (
     <Box>
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Keamanan Lingkungan</Title>
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <IconImageInPicture size={50} />
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
           </Box>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Keamanan Lingkungan</Text>}
+            value={keamananState.create.form.name}
-          placeholder='Masukkan nama KeamananLingkungan'
+            onChange={(val) => {
+              keamananState.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Keamanan Lingkungan</Text>}
+            placeholder='Masukkan nama Keamanan Lingkungan'
           />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi KeamananLingkungan</Text>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Keamanan Lingkungan</Text>
-            <KeamananEditor
+            <CreateEditor
-              showSubmit={false}
+              value={keamananState.create.form.deskripsi}
+              onChange={(val) => {
+                keamananState.create.form.deskripsi = val;
+              }}
             />
           </Box>
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/detail/page.tsx

@@ -1,70 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailKeamananLingkungan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Keamanan Lingkungan</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Keamanan Lingkungan</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nomor Keamanan Lingkungan</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"}>Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Konten</Text>
-                <Text fz={"lg"} >Test Konten</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/keamanan/keamanan-lingkungan-pecalang-patwal/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailKeamananLingkungan;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/edit/page.tsx

@@ -1,44 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../_com/keamananEditor';
-
-function EditKeamananLingkungan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Keamanan Lingkungan</Title>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
-          </Box>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Keamanan Lingkungan</Text>}
-          placeholder='Masukkan nama Keamanan Lingkungan'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Keamanan Lingkungan</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditKeamananLingkungan;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import keamananLingkunganState from '../../_state/keamanan/keamanan-lingkungan';
+import { useShallowEffect } from '@mantine/hooks';
 
 function KeamananLingkungan() {
   return (
@@ -14,13 +17,26 @@ function KeamananLingkungan() {
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
       />
-      <ListKeamananLingkungan/>
+      <ListKeamananLingkungan />
     </Box>
   );
 }
 
 function ListKeamananLingkungan() {
+  const keamananState = useProxy(keamananLingkunganState)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    keamananState.findMany.load()
+  }, [])
+
+  if (!keamananState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -32,24 +48,26 @@ function ListKeamananLingkungan() {
           <TableThead>
             <TableTr>
               <TableTh>Nama Keamanan Lingkungan</TableTh>
-              <TableTh>Nomor Keamanan Lingkungan</TableTh>
               <TableTh>Deskripsi</TableTh>
               <TableTh>Detail</TableTh>
-              </TableTr>
+            </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
+            {keamananState.findMany.data?.map((item) => (
-              <TableTd>Keamanan Lingkungan 1</TableTd>
+              <TableTr key={item.id}>
-              <TableTd>0896232831883</TableTd>
+                <TableTd>{item.name}</TableTd>
-              <TableTd>Keamanan Lingkungan 1</TableTd>
+                <TableTd>
-              <TableTd>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                <Button onClick={() => router.push('/admin/keamanan/keamanan-lingkungan-pecalang-patwal/detail')}>
+                </TableTd>
-                  <IconDeviceImac size={20} />
+                <TableTd>
-                </Button>
+                  <Button onClick={() => router.push(`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${item.id}`)}>
-              </TableTd>
+                    <IconDeviceImac size={20} />
-            </TableTr>
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
-        </Table>  
+        </Table>
       </Paper>
     </Box>
   );

src/app/admin/(dashboard)/keamanan/polsek-terdekat/[id]/edit/page.tsx

@@ -0,0 +1,372 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Card, Group, Modal, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import polsekTerdekat from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
+
+function CreatePolsekTerdekat() {
+  const polsekState = useProxy(polsekTerdekat)
+  const params = useParams();
+  const router = useRouter();
+  const [layananOptions, setLayananOptions] = useState<{ value: string; label: string }[]>([]);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalUpdateOpen, setModalUpdateOpen] = useState(false);
+  const [namaLayananBaru, setNamaLayananBaru] = useState("");
+  const [selectedLayananId, setSelectedLayananId] = useState<string | null>(null);
+  const [namaLayananUpdate, setNamaLayananUpdate] = useState("");
+  const [formData, setFormData] = useState({
+    nama: "",
+    jarakKeDesa: "",
+    alamat: "",
+    nomorTelepon: "",
+    jamOperasional: "",
+    embedMapUrl: "",
+    namaTempatMaps: "",
+    alamatMaps: "",
+    linkPetunjukArah: "",
+    layananPolsekId: "",
+  })
+
+  useEffect(() => {
+    const loadPolsekTerdekat = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await polsekState.edit.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            jarakKeDesa: data.jarakKeDesa || '',
+            alamat: data.alamat || '',
+            nomorTelepon: data.nomorTelepon || '',
+            jamOperasional: data.jamOperasional || '',
+            embedMapUrl: data.embedMapUrl || '',
+            namaTempatMaps: data.namaTempatMaps || '',
+            alamatMaps: data.alamatMaps || '',
+            linkPetunjukArah: data.linkPetunjukArah || '',
+            layananPolsekId: data.layananPolsekId || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading polsek terdekat:", error);
+        toast.error("Gagal memuat data polsek terdekat");
+      }
+    };
+
+    loadPolsekTerdekat();
+  }, [params?.id]);
+
+
+  const handleSubmit = async () => {
+    try {
+      polsekState.edit.form = {
+        ...polsekState.edit.form,
+        nama: formData.nama,
+        jarakKeDesa: formData.jarakKeDesa,
+        alamat: formData.alamat,
+        nomorTelepon: formData.nomorTelepon,
+        jamOperasional: formData.jamOperasional,
+        embedMapUrl: formData.embedMapUrl,
+        namaTempatMaps: formData.namaTempatMaps,
+        alamatMaps: formData.alamatMaps,
+        linkPetunjukArah: formData.linkPetunjukArah,
+        layananPolsekId: formData.layananPolsekId,
+      }
+      await polsekState.edit.update()
+      toast.success("Polsek terdekat berhasil diperbarui!")
+      router.push("/admin/keamanan/polsek-terdekat")
+    } catch (error) {
+      console.error("Error updating polsek terdekat:", error);
+      toast.error("Gagal memuat data polsek terdekat");
+    }
+  }
+
+  const fetchLayanan = async () => {
+    try {
+      const res = await fetch("/api/keamanan/layanan-polsek/find-many")
+      const data = await res.json()
+
+      if (data.success) {
+        const options = data.data.map((item: any) => {
+          return {
+            value: item.id,
+            label: item.nama
+          }
+        })
+        setLayananOptions(options)
+      }
+    } catch {
+      toast.error("Gagal memuat layanan polsek")
+    }
+  }
+
+
+  const handleTambahLayanan = async () => {
+    if (!namaLayananBaru.trim()) return toast.warn("Nama layanan tidak boleh kosong");
+
+    try {
+      const res = await fetch("/api/keamanan/layanan-polsek/create", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ nama: namaLayananBaru }),
+      });
+      const data = await res.json();
+      console.log("data setelah create:", data);
+
+      if (data.success) {
+        const newLayanan = {
+          value: data.data.id,
+          label: data.data.nama,
+        };
+        setLayananOptions((prev) => [...prev, newLayanan]);
+        await fetchLayanan();
+        polsekState.create.form.layananPolsekId = data.data.id;
+        toast.success("Layanan baru ditambahkan!");
+        setModalOpen(false);
+        setNamaLayananBaru("");
+      } else {
+        toast.error(data.message || "Gagal menambah layanan");
+      }
+    } catch {
+      toast.error("Error menambah layanan");
+    }
+  };
+
+  const handleUpdateLayanan = async (id: string, namaBaru: string) => {
+    if (!namaBaru.trim()) return toast.warn("Nama layanan tidak boleh kosong");
+
+    try {
+      const res = await fetch(`/api/keamanan/layanan-polsek/update/${id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ nama: namaBaru }),
+      });
+      const data = await res.json();
+      console.log("data setelah update:", data);
+
+      if (data.success) {
+        await fetchLayanan(); // Refresh list
+        toast.success("Layanan berhasil diupdate!");
+        setModalUpdateOpen(false);
+        setNamaLayananUpdate("");
+      } else {
+        toast.error(data.message || "Gagal mengupdate layanan");
+      }
+    } catch {
+      toast.error("Error mengupdate layanan");
+    }
+  };
+
+  const handleDeleteLayanan = async (id: string) => {
+    const confirmDelete = confirm("Yakin ingin menghapus layanan ini?");
+    if (!confirmDelete) return;
+
+    try {
+      const res = await fetch(`/api/keamanan/layanan-polsek/del/${id}`, {
+        method: "DELETE",
+      });
+      const data = await res.json();
+      console.log("data setelah delete:", data);
+
+      if (data.success) {
+        await fetchLayanan(); // Refresh list
+        setLayananOptions((prev) => prev.filter((layanan) => layanan.value !== id));
+        toast.success("Layanan berhasil dihapus!");
+      } else {
+        toast.error(data.message || "Gagal menghapus layanan");
+      }
+    } catch {
+      toast.error("Error menghapus layanan");
+    }
+  };
+
+
+  useEffect(() => {
+    fetchLayanan();
+  }, []);
+
+  return (
+    <Box>
+      <Modal
+        opened={modalOpen}
+        onClose={() => setModalOpen(false)}
+        title="Tambah Layanan Polsek"
+        centered
+      >
+        <Stack>
+          <TextInput
+            label="Nama Layanan"
+            placeholder="Masukkan nama layanan"
+            value={namaLayananBaru}
+            onChange={(e) => setNamaLayananBaru(e.currentTarget.value)}
+          />
+          <Button onClick={handleTambahLayanan}>Simpan</Button>
+        </Stack>
+      </Modal>
+
+      <Modal
+        opened={modalUpdateOpen}
+        onClose={() => setModalUpdateOpen(false)}
+        title="Tambah Layanan Polsek"
+        centered
+      >
+        <Stack>
+          <TextInput
+            label="Nama Layanan"
+            placeholder="Masukkan nama layanan"
+            value={namaLayananUpdate}
+            onChange={(e) => setNamaLayananUpdate(e.currentTarget.value)}
+          />
+          <Button onClick={() => {
+            if (!selectedLayananId) return toast.warn("ID layanan tidak ditemukan");
+            handleUpdateLayanan(selectedLayananId, namaLayananUpdate);
+          }}>Simpan</Button>
+        </Stack>
+      </Modal>
+
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Polsek Terdekat</Title>
+          <TextInput
+            value={formData.nama}
+            onChange={(val) => {
+              formData.nama = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
+            placeholder='Masukkan nama Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.jarakKeDesa}
+            onChange={(val) => {
+              formData.jarakKeDesa = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Jarak Polsek Terdekat</Text>}
+            placeholder='Masukkan jarak Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.alamat}
+            onChange={(val) => {
+              formData.alamat = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Alamat Polsek Terdekat</Text>}
+            placeholder='Masukkan alamat Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.nomorTelepon}
+            onChange={(val) => {
+              formData.nomorTelepon = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Polsek Terdekat</Text>}
+            placeholder='Masukkan nomor telepon Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.jamOperasional}
+            onChange={(val) => {
+              formData.jamOperasional = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Jam Operasional Polsek Terdekat</Text>}
+            placeholder='Masukkan jam operasional Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.embedMapUrl}
+            onChange={(val) => {
+              formData.embedMapUrl = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Embed Map URL Polsek Terdekat</Text>}
+            placeholder='Masukkan embed map url Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.namaTempatMaps}
+            onChange={(val) => {
+              formData.namaTempatMaps = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Tempat Maps Polsek Terdekat</Text>}
+            placeholder='Masukkan nama tempat maps Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.alamatMaps}
+            onChange={(val) => {
+              formData.alamatMaps = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Alamat Maps Polsek Terdekat</Text>}
+            placeholder='Masukkan alamat maps Polsek Terdekat'
+          />
+          <TextInput
+            value={formData.linkPetunjukArah}
+            onChange={(val) => {
+              formData.linkPetunjukArah = val.target.value
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Link Petunjuk Arah Polsek Terdekat</Text>}
+            placeholder='Masukkan link petunjuk arah Polsek Terdekat'
+          />
+          {/* Tambah Dropdown Select */}
+          <Select
+
+            label="Layanan Polsek"
+            placeholder="Pilih layanan polsek"
+            data={layananOptions}
+
+            value={polsekState.create.form.layananPolsekId}
+            onChange={(val) => {
+              polsekState.create.form.layananPolsekId = val || "";
+            }}
+          />
+          <Button variant="light" size="xs" onClick={() => setModalOpen(true)}>
+            + Tambah Layanan Baru
+          </Button>
+
+          <Text>Daftar Layanan Polsek</Text>
+          {layananOptions.map((item) => (
+            <Card style={{border: '1px solid #ccc'}} bg={colors['white-1']} p={'md'} key={item.value}>
+              <Group>
+              <Text>{item.label}</Text>
+              <Button
+                variant="light"
+                size="xs"
+                onClick={() => {
+                  setSelectedLayananId(item.value);
+                  setNamaLayananUpdate(item.label);
+                  setModalUpdateOpen(true);
+                }}
+              >
+                Edit
+              </Button>
+              <Button
+                variant="outline"
+                color="red"
+                size="xs"
+                onClick={() => handleDeleteLayanan(item.value)}
+              >
+                Hapus
+              </Button>
+            </Group>
+            </Card>
+          ))}
+
+
+          {/* Tambah field lainnya di sini... */}
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box >
+  );
+
+}
+
+export default CreatePolsekTerdekat;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/[id]/page.tsx

@@ -0,0 +1,157 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPolsekTerdekat() {
+  const router = useRouter();
+  const polsekState = useProxy(polsekTerdekat)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [modalHapus, setModalHapus] = useState(false)
+  const params = useParams()
+
+  useShallowEffect(() => {
+    polsekState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      polsekState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/keamanan/polsek-terdekat")
+    }
+  }
+
+  if (!polsekState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Polsek Terdekat</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Polsek Terdekat</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.nama}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Jarak Polsek Ke Desa</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.jarakKeDesa}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Alamat Polsek </Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.alamat}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nomor Polsek</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.nomorTelepon}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Jam Operasional</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.jamOperasional}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Google Maps</Text>
+                {polsekState.findUnique.data?.embedMapUrl ? (
+                  <Box style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
+                    <iframe
+                      src={polsekState.findUnique.data.embedMapUrl}
+                      width="100%"
+                      height="100%"
+                      style={{
+                        border: 0,
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                      }}
+                      allowFullScreen
+                      loading="lazy"
+                      referrerPolicy="no-referrer-when-downgrade"
+                    />
+                  </Box>
+                ) : (
+                  <Text c="dimmed" fz="sm">Tidak ada maps</Text>
+                )}
+              </Box>
+
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Tempat Maps</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.namaTempatMaps}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Alamat Maps</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.alamatMaps}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Link Petunjuk Arah</Text>
+                <Text>
+                  <a
+                    href={polsekState.findUnique.data?.linkPetunjukArah || "#"}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ color: 'black', textDecoration: 'underline' }}
+                  >
+                    {polsekState.findUnique.data?.linkPetunjukArah || "Tidak ada link"}
+                  </a>
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Layanan Polsek</Text>
+                <Text fz={"lg"}>{polsekState.findUnique.data?.layananPolsek?.nama}</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button
+                    onClick={() => {
+                      if (polsekState.findUnique.data) {
+                        setSelectedId(polsekState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={polsekState.delete.loading || !polsekState.findUnique.data}
+                    color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${polsekState.findUnique.data?.id}/edit`)} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus polsek terdekat ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailPolsekTerdekat;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/_com/converttoEmbed.ts

@@ -0,0 +1,9 @@
+function convertGoogleMapsToEmbed(url: string): string | null {
+    const match = url.match(/https:\/\/www\.google\.com\/maps\/place\/([^/]+)/);
+  
+    if (!match) return null;
+  
+    const place = match[1]; // misal: Polsek+Denpasar+Selatan
+    return `https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=${place}`;
+  }
+export default convertGoogleMapsToEmbed

src/app/admin/(dashboard)/keamanan/polsek-terdekat/create/page.tsx

@@ -1,14 +1,116 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Modal, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../_com/keamananEditor';
+import { useProxy } from 'valtio/utils';
+import polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
 
 function CreatePolsekTerdekat() {
+  const polsekState = useProxy(polsekTerdekat)
   const router = useRouter();
+  const [layananOptions, setLayananOptions] = useState<{ value: string; label: string }[]>([]);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [namaLayananBaru, setNamaLayananBaru] = useState("");
+
+  const resetForm = () => {
+    polsekState.create.form = {
+      nama: "",
+      jarakKeDesa: "",
+      alamat: "",
+      nomorTelepon: "",
+      jamOperasional: "",
+      embedMapUrl: "",
+      namaTempatMaps: "",
+      alamatMaps: "",
+      linkPetunjukArah: "",
+      layananPolsekId: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    await polsekState.create.create()
+    resetForm()
+    router.push("/admin/keamanan/polsek-terdekat")
+  }
+
+  const fetchLayanan = async () => {
+    try {
+      const res = await fetch("/api/keamanan/layanan-polsek/find-many")
+      const data = await res.json()
+
+      if (data.success) {
+        const options = data.data.map((item: any) => {
+          return {
+            value: item.id,
+            label: item.nama
+          }
+        })
+        setLayananOptions(options)
+      }
+    } catch {
+      toast.error("Gagal memuat layanan polsek")
+    } 
+  }
+
+
+  const handleTambahLayanan = async () => {
+    if (!namaLayananBaru.trim()) return toast.warn("Nama layanan tidak boleh kosong");
+
+    try {
+      const res = await fetch("/api/keamanan/layanan-polsek/create", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ nama: namaLayananBaru }),
+      });
+      const data = await res.json();
+      console.log("data setelah create:", data);
+
+      if (data.success) {
+        const newLayanan = {
+          value: data.data.id,
+          label: data.data.nama,
+        };
+        setLayananOptions((prev) => [...prev, newLayanan]);
+        await fetchLayanan();
+        polsekState.create.form.layananPolsekId = data.data.id;
+        toast.success("Layanan baru ditambahkan!");
+        setModalOpen(false);
+        setNamaLayananBaru("");
+      } else {
+        toast.error(data.message || "Gagal menambah layanan");
+      }
+    } catch  {
+      toast.error("Error menambah layanan");
+    }
+  };
+
+  useEffect(() => {
+    fetchLayanan();
+  }, []);
+
   return (
     <Box>
+       <Modal
+        opened={modalOpen}
+        onClose={() => setModalOpen(false)}
+        title="Tambah Layanan Polsek"
+        centered
+      >
+        <Stack>
+          <TextInput
+            label="Nama Layanan"
+            placeholder="Masukkan nama layanan"
+            value={namaLayananBaru}
+            onChange={(e) => setNamaLayananBaru(e.currentTarget.value)}
+          />
+          <Button onClick={handleTambahLayanan}>Simpan</Button>
+        </Stack>
+      </Modal>
+
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
           <IconArrowBack color={colors['blue-button']} size={25}/>
@@ -18,27 +120,103 @@ function CreatePolsekTerdekat() {
       <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Polsek Terdekat</Title>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
-          </Box>
           <TextInput
+          value={polsekState.create.form.nama}
+          onChange={(val) => {
+            polsekState.create.form.nama = val.target.value
+          }}
           label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
           placeholder='Masukkan nama Polsek Terdekat'
           />
-          <Box>
+          <TextInput
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Polsek Terdekat</Text>
+          value={polsekState.create.form.jarakKeDesa}
-            <KeamananEditor
+          onChange={(val) => {
-              showSubmit={false}
+            polsekState.create.form.jarakKeDesa = val.target.value
-            />
+          }}
-          </Box>
+          label={<Text fw={"bold"} fz={"sm"}>Jarak Polsek Terdekat</Text>}
+          placeholder='Masukkan jarak Polsek Terdekat'
+          />
+           <TextInput
+          value={polsekState.create.form.alamat}
+          onChange={(val) => {
+            polsekState.create.form.alamat = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Alamat Polsek Terdekat</Text>}
+          placeholder='Masukkan alamat Polsek Terdekat'
+          />
+           <TextInput
+          value={polsekState.create.form.nomorTelepon}
+          onChange={(val) => {
+            polsekState.create.form.nomorTelepon = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Polsek Terdekat</Text>}
+          placeholder='Masukkan nomor telepon Polsek Terdekat'
+          />
+           <TextInput
+          value={polsekState.create.form.jamOperasional}
+          onChange={(val) => {
+            polsekState.create.form.jamOperasional = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Jam Operasional Polsek Terdekat</Text>}
+          placeholder='Masukkan jam operasional Polsek Terdekat'
+          />
+          <TextInput
+          value={polsekState.create.form.embedMapUrl}
+          onChange={(val) => {
+            polsekState.create.form.embedMapUrl = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Embed Map URL Polsek Terdekat</Text>}
+          placeholder='Masukkan embed map url Polsek Terdekat'
+          />
+          <TextInput
+          value={polsekState.create.form.namaTempatMaps}
+          onChange={(val) => {
+            polsekState.create.form.namaTempatMaps = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Nama Tempat Maps Polsek Terdekat</Text>}
+          placeholder='Masukkan nama tempat maps Polsek Terdekat'
+          />
+          <TextInput
+          value={polsekState.create.form.alamatMaps}
+          onChange={(val) => {
+            polsekState.create.form.alamatMaps = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Alamat Maps Polsek Terdekat</Text>}
+          placeholder='Masukkan alamat maps Polsek Terdekat'
+          />
+          <TextInput
+          value={polsekState.create.form.linkPetunjukArah}
+          onChange={(val) => {
+            polsekState.create.form.linkPetunjukArah = val.target.value
+          }}
+          label={<Text fw={"bold"} fz={"sm"}>Link Petunjuk Arah Polsek Terdekat</Text>}
+          placeholder='Masukkan link petunjuk arah Polsek Terdekat'
+          />
+         {/* Tambah Dropdown Select */}
+          <Select
+          
+            label="Layanan Polsek"
+            placeholder="Pilih layanan polsek"
+            data={layananOptions}
+            
+            value={polsekState.create.form.layananPolsekId}
+            onChange={(val) => {
+              polsekState.create.form.layananPolsekId = val || "";
+            }}
+          />
+          <Button variant="light" size="xs" onClick={() => setModalOpen(true)}>
+            + Tambah Layanan Baru
+          </Button>
+
+          {/* Tambah field lainnya di sini... */}
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>
        </Stack>
       </Paper>
    </Box>
   );
+
 }
 
 export default CreatePolsekTerdekat;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/detail/page.tsx

@@ -1,70 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailPolsekTerdekat() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Polsek Terdekat</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Polsek Terdekat</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nomor Polsek Terdekat</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"}>Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Konten</Text>
-                <Text fz={"lg"} >Test Konten</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/keamanan/polsek-terdekat/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailPolsekTerdekat;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/edit/page.tsx

@@ -1,44 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../_com/keamananEditor';
-
-function EditPolsekTerdekat() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Polsek Terdekat</Title>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
-          </Box>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
-          placeholder='Masukkan nama Polsek Terdekat'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Polsek Terdekat</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditPolsekTerdekat;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
+import polsekTerdekat from '../../_state/keamanan/polsek-terdekat';
 
 function PolsekTerdekat() {
   return (
@@ -20,7 +23,20 @@ function PolsekTerdekat() {
 }
 
 function ListPolsekTerdekat() {
+  const polsekState = useProxy(polsekTerdekat)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    polsekState.findMany.load()
+  }, [])
+
+  if (!polsekState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -32,22 +48,24 @@ function ListPolsekTerdekat() {
           <TableThead>
             <TableTr>
               <TableTh>Nama Polsek Terdekat</TableTh>
-              <TableTh>Nomor Polsek Terdekat</TableTh>
+              <TableTh>Jarak Polsek</TableTh>
-              <TableTh>Deskripsi</TableTh>
+              <TableTh>Alamat</TableTh>
               <TableTh>Detail</TableTh>
               </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
+            {polsekState.findMany.data?.map((item) => (
-              <TableTd>Polsek Terdekat 1</TableTd>
+              <TableTr key={item.id}>
-              <TableTd>0896232831883</TableTd>
+                <TableTd>{item.nama}</TableTd>
-              <TableTd>Polsek Terdekat 1</TableTd>
+                <TableTd>{item.jarakKeDesa}</TableTd>
-              <TableTd>
+                <TableTd>{item.alamat}</TableTd>
-                <Button onClick={() => router.push('/admin/keamanan/polsek-terdekat/detail')}>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}>
                   <IconDeviceImac size={20} />
                 </Button>
               </TableTd>
             </TableTr>
+          ))}
           </TableTbody>
         </Table>  
       </Paper>

src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx

@@ -0,0 +1,179 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { useProxy } from "valtio/utils";
+
+
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import { Dropzone } from "@mantine/dropzone";
+import tipsKeamananState from "../../../../_state/keamanan/tips-keamanan";
+
+function EditTipsKeamanan() {
+  const keamananState = useProxy(tipsKeamananState);
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    judul: keamananState.update.form.judul || '',
+    deskripsi: keamananState.update.form.deskripsi || '',
+    imageId: keamananState.update.form.imageId || ''
+  });
+
+  // Load berita by id saat pertama kali
+  useEffect(() => {
+    const loadBerita = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await keamananState.update.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            judul: data.judul || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading keamananLingkungan:", error);
+        toast.error("Gagal memuat data keamananLingkungan");
+      }
+    };
+
+    loadBerita();
+  }, [params?.id]); // ✅ hapus beritaState dari dependency
+
+  const handleSubmit = async () => {
+
+    try {
+      // Update global state with form data
+      keamananState.update.form = {
+        ...keamananState.update.form,
+        judul: formData.judul,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file baru, upload
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        // Update imageId in global state
+        keamananState.update.form.imageId = uploaded.id;
+      }
+
+      await keamananState.update.update();
+      toast.success("Tips Keamanan berhasil diperbarui!");
+      router.push("/admin/keamanan/tips-keamanan");
+    } catch (error) {
+      console.error("Error updating keamananLingkungan:", error);
+      toast.error("Terjadi kesalahan saat memperbarui keamananLingkungan");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Tips Keamanan</Title>
+          <Dropzone
+            onDrop={(files) => {
+              const selectedFile = files[0]; // Ambil file pertama
+              if (selectedFile) {
+                setFile(selectedFile);
+                setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+              }
+            }}
+            onReject={() => toast.error('File tidak valid.')}
+            maxSize={5 * 1024 ** 2} // Maks 5MB
+            accept={{ 'image/*': [] }}
+          >
+            <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+              <Dropzone.Accept>
+                <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+              </Dropzone.Accept>
+              <Dropzone.Reject>
+                <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+              </Dropzone.Reject>
+              <Dropzone.Idle>
+                <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+              </Dropzone.Idle>
+
+              <div>
+                <Text size="xl" inline>
+                  Drag gambar ke sini atau klik untuk pilih file
+                </Text>
+                <Text size="sm" c="dimmed" inline mt={7}>
+                  Maksimal 5MB dan harus format gambar
+                </Text>
+              </div>
+            </Group>
+          </Dropzone>
+
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <TextInput
+            value={formData.judul}
+            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Tips Keamanan</Text>}
+            placeholder="masukkan nama tips keamanan"
+          />
+
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                keamananState.update.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditTipsKeamanan;

src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/page.tsx

@@ -0,0 +1,111 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import colors from '@/con/colors';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import tipsKeamananState from '../../../_state/keamanan/tips-keamanan';
+
+
+function DetailTipsKeamanan() {
+  const stateKeamanan = useProxy(tipsKeamananState)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    stateKeamanan.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateKeamanan.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/keamanan/tips-keamanan")
+    }
+  }
+
+  if (!stateKeamanan.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Tips Keamanan</Text>
+          {stateKeamanan.findUnique.data ? (
+            <Paper key={stateKeamanan.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama Tips Keamanan</Text>
+                  <Text fz={"lg"}>{stateKeamanan.findUnique.data?.judul}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateKeamanan.findUnique.data?.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={stateKeamanan.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (stateKeamanan.findUnique.data) {
+                        setSelectedId(stateKeamanan.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={stateKeamanan.delete.loading || !stateKeamanan.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateKeamanan.findUnique.data) {
+                        router.push(`/admin/keamanan/tips-keamanan/${stateKeamanan.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateKeamanan.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus tips keamanan ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailTipsKeamanan;

src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx

@@ -1,44 +1,148 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import ApiFetch from '@/lib/api-fetch';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../_com/keamananEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import tipsKeamananState from '../../../_state/keamanan/tips-keamanan';
 
-function CreateTipsKeamanan() {
+
+function CreateKeamananLingkungan() {
+  const stateKeamanan = useProxy(tipsKeamananState)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
+
+  const resetForm = () => {
+    stateKeamanan.create.form = {
+      judul: "",
+      deskripsi: "",
+      imageId: "",
+    }
+    setPreviewImage(null);
+    setFile(null);
+  }
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    stateKeamanan.create.form.imageId = uploaded.id;
+
+    await stateKeamanan.create.create();
+
+    resetForm();
+    router.push("/admin/keamanan/tips-keamanan")
+  }
+
   return (
     <Box>
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Tips Keamanan</Title>
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <IconImageInPicture size={50} />
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
           </Box>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Tips Keamanan</Text>}
+            value={stateKeamanan.create.form.judul}
-          placeholder='Masukkan nama tips keamanan'
+            onChange={(val) => {
+              stateKeamanan.create.form.judul = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Tips Keamanan</Text>}
+            placeholder='Masukkan nama Tips Keamanan'
           />
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Tips Keamanan</Text>
-            <KeamananEditor
+            <CreateEditor
-              showSubmit={false}
+              value={stateKeamanan.create.form.deskripsi}
+              onChange={(val) => {
+                stateKeamanan.create.form.deskripsi = val;
+              }}
             />
           </Box>
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 
-export default CreateTipsKeamanan;
+export default CreateKeamananLingkungan;

src/app/admin/(dashboard)/keamanan/tips-keamanan/detail/page.tsx

@@ -1,70 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailTipsKeamanan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Tips Keamanan</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Tips Keamanan</Text>
-                <Text fz={"lg"}>Test Judul</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nomor Tips Keamanan</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"}>Test Deskripsi</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={"/"} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Konten</Text>
-                <Text fz={"lg"} >Test Konten</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/keamanan/tips-keamanan/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailTipsKeamanan;

src/app/admin/(dashboard)/keamanan/tips-keamanan/edit/page.tsx

@@ -1,44 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../_com/keamananEditor';
-
-function EditTipsKeamanan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Tips Keamanan</Title>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
-          </Box>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Tips Keamanan</Text>}
-          placeholder='Masukkan nama Tips Keamanan'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Tips Keamanan</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditTipsKeamanan;

src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx

@@ -1,10 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
+import tipsKeamananState from '../../_state/keamanan/tips-keamanan';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
 
 function TipsKeamanan() {
   return (
@@ -20,7 +23,20 @@ function TipsKeamanan() {
 }
 
 function ListTipsKeamanan() {
+  const stateKeamanan = useProxy(tipsKeamananState)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    stateKeamanan.findMany.load()
+  }, [])
+
+  if (!stateKeamanan.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -32,22 +48,24 @@ function ListTipsKeamanan() {
           <TableThead>
             <TableTr>
               <TableTh>Nama Tips Keamanan</TableTh>
-              <TableTh>Nomor Tips Keamanan</TableTh>
               <TableTh>Deskripsi</TableTh>
               <TableTh>Detail</TableTh>
               </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
+            {stateKeamanan.findMany.data?.map((item) => (
-              <TableTd>Tips Keamanan 1</TableTd>
+              <TableTr key={item.id}>
-              <TableTd>0896232831883</TableTd>
+                <TableTd>{item.judul}</TableTd>
-              <TableTd>Tips Keamanan 1</TableTd>
+                <TableTd>
-              <TableTd>
+                  <Text fz={"xs"} dangerouslySetInnerHTML={{__html: item.deskripsi}} />
-                <Button onClick={() => router.push('/admin/keamanan/tips-keamanan/detail')}>
+                </TableTd>
-                  <IconDeviceImac size={20} />
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/keamanan/tips-keamanan/${item.id}`)}>
+                    <IconDeviceImac size={20} />
                 </Button>
               </TableTd>
             </TableTr>
+          ))}
           </TableTbody>
         </Table>  
       </Paper>

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

@@ -5,6 +5,7 @@ import KontakDarurat from "./kontak-darurat";
 import PencegahanKriminalitas from "./pencegahan-kriminalitas";
 import MenuTipsKeamanan from "./tips-keamanan";
 import LaporanPublik from "./laporan-publik";
+import LayananPolsek from "./layanan-polsek";
 
 const Keamanan = new Elysia({ prefix: "/api/keamanan", tags: ["Keamanan"] })
 .use(KeamananLingkungan)
@@ -13,4 +14,5 @@ const Keamanan = new Elysia({ prefix: "/api/keamanan", tags: ["Keamanan"] })
 .use(PencegahanKriminalitas)
 .use(MenuTipsKeamanan)
 .use(LaporanPublik)
+.use(LayananPolsek)
 export default Keamanan;

src/app/api/[[...slugs]]/_lib/keamanan/keamanan-lingkungan/del.ts

@@ -47,6 +47,8 @@ const keamananLingkunganDelete = async (context: Context) => {
     return {
         status: 200,
         body: deleted,
+        success: true,
+        message: "Keamanan lingkungan berhasil dihapus",
     };
 };
 export default keamananLingkunganDelete;

src/app/api/[[...slugs]]/_lib/keamanan/keamanan-lingkungan/updt.ts

@@ -5,93 +5,106 @@ import fs from "fs/promises";
 import { Context } from "elysia";
 
 type FormUpdate = Prisma.KeamananLingkunganGetPayload<{
-    select: {
+  select: {
-        name: true;
+    id: true;
-        deskripsi: true;
+    name: true;
-        imageId: true;
+    deskripsi: true;
-    };
+    imageId: true;
+  };
 }>;
 export default async function updateKeamananLingkungan(context: Context) {
-    try {
+  try {
-        const id = context.params?.id;
+    const id = context.params?.id;
-        const body = (await context.body) as Omit<FormUpdate, "id">;
+    const body = (await context.body) as Omit<FormUpdate, "id">;
 
-        const { name, deskripsi, imageId } = body;
+    const { name, deskripsi, imageId } = body;
 
-        if (!id) {
+    if (!id) {
-            return new Response(JSON.stringify({
+      return new Response(
-                success: false,
+        JSON.stringify({
-                message: "ID tidak diberikan",
+          success: false,
-            }), {
+          message: "ID tidak diberikan",
-                status: 400,
+        }),
-                headers: {
+        {
-                    "Content-Type": "application/json",
+          status: 400,
-                },
+          headers: {
-            });
+            "Content-Type": "application/json",
+          },
         }
-        const existing = await prisma.keamananLingkungan.findUnique({
+      );
-            where: { id },
-            include: {
-                image: true,
-            }
-        });
-
-        if (!existing) {
-            return new Response(JSON.stringify({
-                success: false,
-                message: "Keamanan lingkungan tidak ditemukan",
-            }), {
-                status: 404,
-                headers: {
-                    "Content-Type": "application/json",
-                },
-            });
-        }
-
-        if (existing.imageId && 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 (err) {
-                    console.error("Gagal hapus gambar lama:", err);
-                }
-            }
-        }
-
-        const updated = await prisma.keamananLingkungan.update({
-            where: { id },
-            data: {
-                name,
-                deskripsi,
-                imageId,
-            },
-        })
-
-        return new Response(JSON.stringify({
-            success: true,
-            message: "Success update keamanan lingkungan",
-            data: updated,
-        }), {
-            status: 200,
-            headers: {
-                "Content-Type": "application/json",
-            },
-        });
-    } catch (error) {
-        console.error("Error updating keamanan lingkungan:", error);
-        return new Response(JSON.stringify({
-            success: false,
-            message: "Terjadi kesalahan saat mengupdate keamanan lingkungan",
-        }), {
-            status: 500,
-            headers: {
-                "Content-Type": "application/json",
-            },
-        });
     }
-}
+    const existing = await prisma.keamananLingkungan.findUnique({
+      where: { id },
+      include: {
+        image: true,
+      },
+    });
+
+    if (!existing) {
+      return new Response(
+        JSON.stringify({
+          success: false,
+          message: "Keamanan lingkungan tidak ditemukan",
+        }),
+        {
+          status: 404,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+    }
+
+    if (existing.imageId && 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 (err) {
+          console.error("Gagal hapus gambar lama:", err);
+        }
+      }
+    }
+
+    const updated = await prisma.keamananLingkungan.update({
+      where: { id },
+      data: {
+        name,
+        deskripsi,
+        imageId,
+      },
+    });
+
+    return new Response(
+      JSON.stringify({
+        success: true,
+        message: "Success update keamanan lingkungan",
+        data: updated,
+      }),
+      {
+        status: 200,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  } catch (error) {
+    console.error("Error updating keamanan lingkungan:", error);
+    return new Response(
+      JSON.stringify({
+        success: false,
+        message: "Terjadi kesalahan saat mengupdate keamanan lingkungan",
+      }),
+      {
+        status: 500,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+}

src/app/api/[[...slugs]]/_lib/keamanan/layanan-polsek/create.ts

@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function layananPolsekCreate(context: Context) {
+  const body = context.body as { nama: string };
+
+  if (!body.nama) {
+    return {
+      success: false,
+      message: "Nama is required",
+    };
+  }
+
+  const layanan = await prisma.layananPolsek.create({
+    data: {
+      nama: body.nama,
+      deletedAt: null, // pastikan ini ditambahkan kalau field-mu optional
+    },
+  });
+
+  return {
+    success: true,
+    message: "Success create layanan polsek",
+    data: layanan,
+  };
+}

src/app/api/[[...slugs]]/_lib/keamanan/layanan-polsek/del.ts

@@ -0,0 +1,31 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export const layananPolsekDelete = async (context: Context) => {
+    const id = context.params.id;
+    if (!id) {
+        return {
+            success: false,
+            message: "ID is required",
+        }
+    }
+
+    const layanan = await prisma.layananPolsek.delete({
+        where: {
+            id: id,
+        },
+    })
+
+    if(!layanan) {
+        return {
+            success: false,
+            message: "Layanan polsek tidak ditemukan",
+        }
+    }
+
+    return {
+        success: true,
+        message: "Success delete layanan polsek",
+        data: layanan,
+    }
+}

src/app/api/[[...slugs]]/_lib/keamanan/layanan-polsek/findMany.ts

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+
+ async function layananPolsekFindMany() {
+  const data = await prisma.layananPolsek.findMany();
+  return { 
+    success: true,
+    data: data.map((item: any) => {
+      return {
+        id: item.id,
+        nama: item.nama,
+      }
+    }),
+   };
+}
+
+export default layananPolsekFindMany
+

src/app/api/[[...slugs]]/_lib/keamanan/layanan-polsek/findUnique.ts

@@ -0,0 +1,48 @@
+import prisma from "@/lib/prisma";
+
+export default async function layananPolsekFindUnique(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.layananPolsek.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return Response.json({
+                success: false,
+                message: "Layanan polsek tidak ditemukan",
+            }, { status: 404 });
+        }
+
+        return Response.json({
+            success: true,
+            message: "Success fetch layanan polsek by ID",
+            data,
+        }, { status: 200 });
+    } catch (e) {
+        console.error("Find by ID error:", e);
+        return Response.json({
+            success: false,
+            message: "Gagal mengambil layanan polsek: " + (e instanceof Error ? e.message : 'Unknown error'),
+        }, {
+            status: 500,
+        });
+    }
+}

src/app/api/[[...slugs]]/_lib/keamanan/layanan-polsek/index.ts

@@ -0,0 +1,32 @@
+import Elysia from "elysia";
+import layananPolsekCreate from "./create";
+import layananPolsekFindMany from "./findMany";
+import { t } from "elysia";
+import layananPolsekUpdate from "./updt";
+import layananPolsekFindUnique from "./findUnique";
+import { layananPolsekDelete } from "./del";
+
+const LayananPolsek = new Elysia({
+  prefix: "/layanan-polsek",
+  tags: ["Keamanan/Polsek Terdekat/Layanan Polsek"],
+})
+  .get("/find-many", layananPolsekFindMany)
+  .get("/:id", async (context) => {
+    const response = await layananPolsekFindUnique(
+      new Request(context.request)
+    );
+    return response;
+  })
+  .delete("/del/:id", layananPolsekDelete)
+  .post("/create", layananPolsekCreate, {
+    body: t.Object({
+      nama: t.String(),
+    }),
+  })
+  .put("/:id", layananPolsekUpdate, {
+    body: t.Object({
+      nama: t.String(),
+    }),
+  });
+
+export default LayananPolsek;

src/app/api/[[...slugs]]/_lib/keamanan/layanan-polsek/updt.ts

@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+
+export default async function layananPolsekUpdate(context: Context) {
+    const body = await context.request.json()
+
+    if (!body.nama) {
+        return {
+            success: false,
+            message: "Nama is required",
+        }
+    }
+
+    const layanan = await prisma.layananPolsek.update({
+        where: {
+            id: body.id,
+        },
+        data: { 
+            nama: body.nama,
+        },
+    })
+
+    return {
+        success: true,
+        message: "Success update layanan polsek",
+        data: layanan,
+    }
+}

src/app/api/[[...slugs]]/_lib/keamanan/polsek-terdekat/del.ts

@@ -30,8 +30,9 @@ const polsekTerdekatDelete = async (context: Context) => {
     });
 
     return {
+        success: true,
         status: 200,
-        body: "Polsek terdekat berhasil dihapus",
+        message: "Polsek terdekat berhasil dihapus",
     };
 };
 

src/app/api/[[...slugs]]/_lib/keamanan/polsek-terdekat/index.ts

@@ -1,10 +1,11 @@
 import Elysia, { t } from "elysia";
+import polsekTerdekatCreate from "./create";
+import polsekTerdekatDelete from "./del";
 import polsekTerdekatFindMany from "./findMany";
 import polsekTerdekatFindUnique from "./findUnique";
-import polsekTerdekatDelete from "./del";
-import polsekTerdekatCreate from "./create";
 import polsekTerdekatUpdate from "./updt";
 
+
 const PolsekTerdekat = new Elysia({ prefix: "/polsekterdekat", tags: ["Keamanan/Polsek Terdekat"] })
 .get("/find-many", polsekTerdekatFindMany)
 .get("/:id", async (context) => {
@@ -44,4 +45,5 @@ const PolsekTerdekat = new Elysia({ prefix: "/polsekterdekat", tags: ["Keamanan/
         layananPolsekId: t.String(),
     }),
 })
+
 export default PolsekTerdekat;

src/app/api/[[...slugs]]/_lib/keamanan/tips-keamanan/index.ts

@@ -18,7 +18,7 @@ const MenuTipsKeamanan = new Elysia({
   })
   .post("/create", menuTipsKeamananCreate, {
     body: t.Object({
-      name: t.String(),
+      judul: t.String(),
       deskripsi: t.String(),
       imageId: t.String(),
     }),
@@ -32,7 +32,7 @@ const MenuTipsKeamanan = new Elysia({
     },
     {
       body: t.Object({
-        name: t.String(),
+        judul: t.String(),
         deskripsi: t.String(),
         imageId: t.String(),
       }),