Merge pull request 'nico/17-jan-26' (#49) from nico/17-jan-26 into staggingweb

Reviewed-on: http://wibugit.wibudev.com/wibu/desa-darmasaba/pulls/49
> Add Layanan Polsek submenu polsek terdekat
> Seeder menu keamanan -> menu ekonomi submenu : demografi pekerjaan, junlah pengangguran, lowongan kerja lokal, pasar desa, program kemiskinan, sektor unggulan, struktur organisasi

src/app/admin/(dashboard)/_com/iconMap.tsx

@@ -27,8 +27,25 @@ import {
   IconFiretruck,
   IconBuilding,
   IconAlertTriangle,
+
+  // ===== Tambahan =====
+  IconLifebuoy,
+  IconRun,
+  IconShield,
+  IconPhoneCall,
+  IconFirstAidKit,
+  IconStethoscope,
+  IconBuildingCommunity,
+  IconFileText,
+  IconInfoCircle,
+  IconMessageReport,
+  IconUsers,
+  IconQuestionMark,
 } from '@tabler/icons-react'
 
+/* =======================
+   Icon Keys (DB Safe)
+======================= */
 export type IconKey =
   | 'ekowisata'
   | 'kompetisi'
@@ -50,14 +67,33 @@ export type IconKey =
   | 'pelatihan'
   | 'subsidi'
   | 'layananKesehatan'
+
+  // ===== Keamanan & Darurat =====
   | 'polisi'
   | 'ambulans'
   | 'pemadam'
-  | 'rumahSakit'
-  | 'bangunan'
   | 'darurat'
+  | 'sar'
+  | 'evakuasi'
+  | 'keamanan'
+  | 'teleponDarurat'
 
+  // ===== Kesehatan =====
+  | 'rumahSakit'
+  | 'puskesmas'
+  | 'klinik'
 
+  // ===== Pemerintahan =====
+  | 'bangunan'
+  | 'kantorDesa'
+  | 'administrasi'
+  | 'informasi'
+  | 'pengaduan'
+  | 'layananPublik'
+
+/* =======================
+   Icon Map
+======================= */
 const iconMap: Record<IconKey, React.FC<any>> = {
   ekowisata: IconLeaf,
   kompetisi: IconTrophy,
@@ -79,22 +115,45 @@ const iconMap: Record<IconKey, React.FC<any>> = {
   pelatihan: IconSchool,
   subsidi: IconShoppingCart,
   layananKesehatan: IconHospital,
+
+  // ===== Keamanan & Darurat =====
   polisi: IconShieldFilled,
   ambulans: IconAmbulance,
   pemadam: IconFiretruck,
+  darurat: IconAlertTriangle,
+  sar: IconLifebuoy,
+  evakuasi: IconRun,
+  keamanan: IconShield,
+  teleponDarurat: IconPhoneCall,
+
+  // ===== Kesehatan =====
   rumahSakit: IconHospital,
+  puskesmas: IconFirstAidKit,
+  klinik: IconStethoscope,
+
+  // ===== Pemerintahan =====
   bangunan: IconBuilding,
-  darurat: IconAlertTriangle
+  kantorDesa: IconBuildingCommunity,
+  administrasi: IconFileText,
+  informasi: IconInfoCircle,
+  pengaduan: IconMessageReport,
+  layananPublik: IconUsers,
 }
 
+/* =======================
+   Icon Mapper Component
+======================= */
 type Props = {
   name: IconKey
   size?: number
   color?: string
 }
 
-export const IconMapper: React.FC<Props> = ({ name, size = 24, color }) => {
-  const IconComponent = iconMap[name]
-  if (!IconComponent) return null
+export const IconMapper: React.FC<Props> = ({
+  name,
+  size = 24,
+  color,
+}) => {
+  const IconComponent = iconMap[name] ?? IconQuestionMark
   return <IconComponent size={size} color={color} />
 }

src/app/admin/(dashboard)/_com/selectIcon.tsx

@@ -6,27 +6,38 @@ import {
   IconAlertTriangle,
   IconAmbulance,
   IconBuilding,
+  IconBuildingCommunity,
   IconCash,
   IconChartLine,
   IconChristmasTreeFilled,
   IconClipboardTextFilled,
   IconDroplet,
+  IconFileText,
   IconFiretruck,
+  IconFirstAidKit,
   IconHome,
   IconHomeEco,
   IconHospital,
+  IconInfoCircle,
   IconLeaf,
+  IconLifebuoy,
+  IconMessageReport,
+  IconPhoneCall,
   IconRecycle,
+  IconRun,
   IconScale,
   IconSchool,
+  IconShield,
   IconShieldFilled,
   IconShoppingCart,
+  IconStethoscope,
   IconTent,
   IconTrashFilled,
   IconTree,
   IconTrendingUp,
   IconTrophy,
   IconTruckFilled,
+  IconUsers,
 } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 
@@ -51,15 +62,32 @@ const iconMap = {
   pelatihan: { label: 'Pelatihan', icon: IconSchool },
   subsidi: { label: 'Subsidi', icon: IconShoppingCart },
   layananKesehatan: { label: 'Layanan Kesehatan', icon: IconHospital },
+
+  // ===== Keamanan & Darurat =====
   polisi: { label: 'Polisi', icon: IconShieldFilled },
   ambulans: { label: 'Ambulans', icon: IconAmbulance },
-  pemadam: { label: 'Pemadam', icon: IconFiretruck },
-  rumahSakit: { label: 'Rumah Sakit', icon: IconHospital },
-  bangunan: { label: 'Bangunan', icon: IconBuilding },
+  pemadam: { label: 'Pemadam Kebakaran', icon: IconFiretruck },
   darurat: { label: 'Darurat', icon: IconAlertTriangle },
+  sar: { label: 'SAR / Basarnas', icon: IconLifebuoy },
+  evakuasi: { label: 'Evakuasi', icon: IconRun },
+  keamanan: { label: 'Keamanan', icon: IconShield },
+  teleponDarurat: { label: 'Telepon Darurat', icon: IconPhoneCall },
 
+  // ===== Kesehatan =====
+  rumahSakit: { label: 'Rumah Sakit', icon: IconHospital },
+  puskesmas: { label: 'Puskesmas', icon: IconFirstAidKit },
+  klinik: { label: 'Klinik', icon: IconStethoscope },
+
+  // ===== Pemerintahan & Fasilitas =====
+  bangunan: { label: 'Bangunan', icon: IconBuilding },
+  kantorDesa: { label: 'Kantor Desa', icon: IconBuildingCommunity },
+  administrasi: { label: 'Administrasi', icon: IconFileText },
+  informasi: { label: 'Informasi', icon: IconInfoCircle },
+  pengaduan: { label: 'Pengaduan', icon: IconMessageReport },
+  layananPublik: { label: 'Layanan Publik', icon: IconUsers },
 };
 
+
 type IconKey = keyof typeof iconMap;
 
 const iconList = Object.entries(iconMap).map(([value, data]) => ({

src/app/admin/(dashboard)/_com/selectIconEdit.tsx

@@ -26,6 +26,17 @@ import {
   IconTruckFilled,
   IconBuilding,
   IconAlertTriangle,
+  IconBuildingCommunity,
+  IconFileText,
+  IconFirstAidKit,
+  IconInfoCircle,
+  IconLifebuoy,
+  IconMessageReport,
+  IconPhoneCall,
+  IconRun,
+  IconShield,
+  IconStethoscope,
+  IconUsers,
 } from '@tabler/icons-react';
 
 const iconMap = {
@@ -49,12 +60,29 @@ const iconMap = {
   pelatihan: { label: 'Pelatihan', icon: IconSchool },
   subsidi: { label: 'Subsidi', icon: IconShoppingCart },
   layananKesehatan: { label: 'Layanan Kesehatan', icon: IconHospital },
+
+  // ===== Keamanan & Darurat =====
   polisi: { label: 'Polisi', icon: IconShieldFilled },
   ambulans: { label: 'Ambulans', icon: IconAmbulance },
-  pemadam: { label: 'Pemadam', icon: IconFiretruck },
-  rumahSakit: { label: 'Rumah Sakit', icon: IconHospital },
-  bangunan: { label: 'Bangunan', icon: IconBuilding },
+  pemadam: { label: 'Pemadam Kebakaran', icon: IconFiretruck },
   darurat: { label: 'Darurat', icon: IconAlertTriangle },
+  sar: { label: 'SAR / Basarnas', icon: IconLifebuoy },
+  evakuasi: { label: 'Evakuasi', icon: IconRun },
+  keamanan: { label: 'Keamanan', icon: IconShield },
+  teleponDarurat: { label: 'Telepon Darurat', icon: IconPhoneCall },
+
+  // ===== Kesehatan =====
+  rumahSakit: { label: 'Rumah Sakit', icon: IconHospital },
+  puskesmas: { label: 'Puskesmas', icon: IconFirstAidKit },
+  klinik: { label: 'Klinik', icon: IconStethoscope },
+
+  // ===== Pemerintahan & Fasilitas =====
+  bangunan: { label: 'Bangunan', icon: IconBuilding },
+  kantorDesa: { label: 'Kantor Desa', icon: IconBuildingCommunity },
+  administrasi: { label: 'Administrasi', icon: IconFileText },
+  informasi: { label: 'Informasi', icon: IconInfoCircle },
+  pengaduan: { label: 'Pengaduan', icon: IconMessageReport },
+  layananPublik: { label: 'Layanan Publik', icon: IconUsers },
 };
 
 export type IconKey = keyof typeof iconMap;

src/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa.ts

@@ -13,6 +13,7 @@ const templatePasarDesaForm = z.object({
   rating: z.number().min(1, "Rating minimal 1"),
   kategoriId: z.array(z.string()).min(1, "Minimal pilih satu kategori"),
   kontak: z.string().min(1, "Kontak wajib diisi"),
+  deskripsi: z.string().min(1, "Deskripsi wajib diisi"),
 });
 
 const defaultPasarDesaForm = {
@@ -23,6 +24,7 @@ const defaultPasarDesaForm = {
   rating: 0,
   kategoriId: [] as string[],
   kontak: "",
+  deskripsi: ""
 };
 
 const pasarDesa = proxy({
@@ -191,6 +193,7 @@ const pasarDesa = proxy({
             rating: data.rating,
             kategoriId: data.kategoriId,
             kontak: data.kontak,
+            deskripsi: data.deskripsi
           };
           return data;
         } else {
@@ -229,6 +232,7 @@ const pasarDesa = proxy({
             rating: this.form.rating,
             kategoriId: this.form.kategoriId,
             kontak: this.form.kontak,
+            deskripsi: this.form.deskripsi
           }),
         });
         if (!response.ok) {

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

@@ -15,7 +15,7 @@ const templateForm = z.object({
   namaTempatMaps: z.string().min(1, "Nama Tempat Maps minimal 1 karakter"),
   alamatMaps: z.string().min(1, "Alamat Maps minimal 1 karakter"),
   linkPetunjukArah: z.string().min(1, "Link Petunjuk Arah minimal 1 karakter"),
-  layananPolsekId: z.string().min(1, "Layanan Polsek Id minimal 1 karakter"),
+  layananPolsekId: z.array(z.string()).min(1, "Pilih minimal 1 layanan polsek"),
 });
 
 const defaultForm = {
@@ -28,7 +28,7 @@ const defaultForm = {
   namaTempatMaps: "",
   alamatMaps: "",
   linkPetunjukArah: "",
-  layananPolsekId: "",
+  layananPolsekId: [] as string[],
 };
 
 const polsekTerdekatState = proxy({
@@ -66,6 +66,11 @@ const polsekTerdekatState = proxy({
       | Prisma.PolsekTerdekatGetPayload<{
           include: {
             layananPolsek: true;
+            LayananToPolsek: {
+              include: {
+                layanan: true;
+              }
+            }
           };
         }>[]
       | null,
@@ -104,7 +109,14 @@ const polsekTerdekatState = proxy({
   },
   findUnique: {
     data: null as Prisma.PolsekTerdekatGetPayload<{
-      include: { layananPolsek: true };
+      include: { 
+        layananPolsek: true;
+        LayananToPolsek: {
+          include: {
+            layanan: true;
+          }
+        }
+       };
     }> | null,
     async load(id: string) {
       try {
@@ -117,7 +129,7 @@ const polsekTerdekatState = proxy({
           polsekTerdekatState.findUnique.data = null;
         }
       } catch (error) {
-        console.error("Error fetching data:", error);
+        console.error("Gagal fetch detail polsek terdekat:", error);
         polsekTerdekatState.findUnique.data = null;
       }
     },
@@ -273,10 +285,13 @@ const polsekTerdekatState = proxy({
       };
     }> | null,
     loading: false,
-    load: async () => {  // Changed to arrow function
+    load: async () => {
+      // Changed to arrow function
       polsekTerdekatState.findFirst.loading = true;
       try {
-        const res = await ApiFetch.api.keamanan.polsekterdekat["find-first"].get();
+        const res = await ApiFetch.api.keamanan.polsekterdekat[
+          "find-first"
+        ].get();
         if (res.status === 200 && res.data?.success) {
           polsekTerdekatState.findFirst.data = res.data.data || null;
         } else {
@@ -287,8 +302,284 @@ const polsekTerdekatState = proxy({
       } finally {
         polsekTerdekatState.findFirst.loading = false;
       }
-    }
-  }
+    },
+  },
 });
 
-export default polsekTerdekatState;
+const templateFormLayananPolsek = z.object({
+  nama: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultFormLayananPolsek = {
+  nama: "",
+};
+
+const layananPolsek = proxy({
+  create: {
+    form: { ...defaultFormLayananPolsek },
+    loading: false,
+    async create() {
+      const cek = templateFormLayananPolsek.safeParse(
+        layananPolsek.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        layananPolsek.create.loading = true;
+        const res = await ApiFetch.api.keamanan["layananpolsek"][
+          "create"
+        ].post(layananPolsek.create.form);
+        if (res.status === 200) {
+          layananPolsek.findManyAll.load();
+          return toast.success("Data Kategori Berita Berhasil Dibuat");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        layananPolsek.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+      data: null as
+        | Prisma.LayananPolsekGetPayload<{
+            omit: {
+              isActive: true;
+            };
+          }>[]
+        | null,
+      page: 1,
+      totalPages: 1,
+      loading: false,
+      search: "",
+     load: async (page = 1, limit = 10, search = "") => {
+        layananPolsek.findMany.loading = true; // ✅ Akses langsung via nama path
+        layananPolsek.findMany.page = page;
+        layananPolsek.findMany.search = search;
+    
+        try {
+          const query: any = { page, limit };
+          if (search) query.search = search;
+      
+          const res = await ApiFetch.api.keamanan["layananpolsek"]["findMany"].get({ query });
+      
+          if (res.status === 200 && res.data?.success) {
+            layananPolsek.findMany.data = res.data.data ?? [];
+            layananPolsek.findMany.totalPages = res.data.totalPages ?? 1;
+          } else {
+            layananPolsek.findMany.data = [];
+            layananPolsek.findMany.totalPages = 1;
+          }
+        } catch (err) {
+          console.error("Gagal fetch layanan polsek paginated:", err);
+          layananPolsek.findMany.data = [];
+          layananPolsek.findMany.totalPages = 1;
+        } finally {
+          layananPolsek.findMany.loading = false;
+        }
+      },
+    },
+  findManyAll: {
+    data: [] as Prisma.LayananPolsekGetPayload<{ omit: { isActive: true } }>[],
+    loading: false,
+
+    async load() {
+      this.loading = true;
+      try {
+        const res = await ApiFetch.api.keamanan["layananpolsek"][
+          "findManyAll"
+        ].get();
+
+        if (res.status === 200 && res.data?.success) {
+          this.data = (res.data.data ?? []).map((item: any) => ({
+            id: String(item.id),
+            nama: String(item.nama || ""),
+            createdAt: item.createdAt ? new Date(item.createdAt) : new Date(),
+            updatedAt: item.updatedAt ? new Date(item.updatedAt) : new Date(),
+            deletedAt: item.deletedAt ? new Date(item.deletedAt) : null,
+          }));
+        } else {
+          this.data = [];
+        }
+      } catch (error) {
+        console.error("Gagal fetch layanan polsek:", error);
+        this.data = [];
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.LayananPolsekGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/keamanan/layananpolsek/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          layananPolsek.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          layananPolsek.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        layananPolsek.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        layananPolsek.delete.loading = true;
+
+        const response = await fetch(`/api/keamanan/layananpolsek/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Data layanan polsek berhasil dihapus"
+          );
+          await layananPolsek.findManyAll.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus Data layanan polsek");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Data layanan polsek");
+      } finally {
+        layananPolsek.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormLayananPolsek },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/keamanan/layananpolsek/${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,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading layanan polsek:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateFormLayananPolsek.safeParse(
+        layananPolsek.update.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        layananPolsek.update.loading = true;
+
+        const response = await fetch(
+          `/api/keamanan/layananpolsek/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: this.form.nama,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data layanan polsek");
+          await layananPolsek.findManyAll.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update data layanan polsek");
+        }
+      } catch (error) {
+        console.error("Error updating data layanan polsek:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data layanan polsek"
+        );
+        return false;
+      } finally {
+        layananPolsek.update.loading = false;
+      }
+    },
+    reset() {
+      layananPolsek.update.id = "";
+      layananPolsek.update.form = { ...defaultFormLayananPolsek };
+    },
+  },
+});
+
+const statePolsekTerdekat = proxy({
+  polsekTerdekatState,
+  layananPolsek,
+});
+
+export default statePolsekTerdekat;

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

@@ -102,8 +102,10 @@ function ListKategoriBerita({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={0}>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0}>
             <TableThead>
               <TableTr>
                 <TableTh w="50%">

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

@@ -79,8 +79,10 @@ function ListBerita({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={0}>
+        <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover
+            layout="fixed" // 🔥 PENTING
+            withColumnBorders={false} miw={0}>
             <TableThead>
               <TableTr>
                 <TableTh w="50%">Judul</TableTh>

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

@@ -85,8 +85,10 @@ function ListFoto({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh>Judul Foto</TableTh>

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

@@ -87,66 +87,66 @@ function ListVideo({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Box style={{ overflowX: 'auto' }}>
-           <Table highlightOnHover striped verticalSpacing="sm">
-              <TableThead>
-                <TableTr>
-                  <TableTh>Judul Video</TableTh>
-                  <TableTh>Tanggal</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Aksi</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.length > 0 ? (
-                  filteredData.map((item) => (
-                    <TableTr key={item.id}>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Text fz="md" fw={500} lh={1.45} truncate="end" lineClamp={1}>
-                          {item.name}
-                        </Text>
-                      </TableTd>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Text fz="sm" c="dimmed" lh={1.45}>
-                          {new Date(item.createdAt).toLocaleDateString('id-ID', {
-                            day: 'numeric',
-                            month: 'long',
-                            year: 'numeric',
-                          })}
-                        </Text>
-                      </TableTd>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Text fz="sm" lh={1.45} truncate="end" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                      </TableTd>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Button
-                          variant="light"
-                          color="blue"
-                          onClick={() => router.push(`/admin/desa/gallery/video/${item.id}`)}
-                          fz="sm"
-                          px="xs"
-                        >
-                          <IconDeviceImac size={18} />
-                          <Text ml={5}>Detail</Text>
-                        </Button>
-                      </TableTd>
-                    </TableTr>
-                  ))
-                ) : (
-                  <TableTr>
-                    <TableTd colSpan={4}>
-                      <Center py={24}>
-                        <Text c="dimmed" fz="sm" lh={1.4}>
-                          Tidak ada video yang cocok
-                        </Text>
-                      </Center>
+        <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped verticalSpacing="sm">
+            <TableThead>
+              <TableTr>
+                <TableTh>Judul Video</TableTh>
+                <TableTh>Tanggal</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Text fz="md" fw={500} lh={1.45} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Text fz="sm" c="dimmed" lh={1.45}>
+                        {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                          day: 'numeric',
+                          month: 'long',
+                          year: 'numeric',
+                        })}
+                      </Text>
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Text fz="sm" lh={1.45} truncate="end" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/desa/gallery/video/${item.id}`)}
+                        fz="sm"
+                        px="xs"
+                      >
+                        <IconDeviceImac size={18} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
                     </TableTd>
                   </TableTr>
-                )}
-              </TableTbody>
-            </Table>
-          </Box>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={24}>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada video yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
         </Box>
 
         {/* Mobile Cards */}
@@ -200,20 +200,19 @@ function ListVideo({ search }: { search: string }) {
         </Stack>
       </Paper>
 
-      {totalPages > 1 && (
-        <Center mt="xl">
-          <Pagination
-            value={page}
-            onChange={(newPage) => {
-              load(newPage, 10)
-              window.scrollTo({ top: 0, behavior: 'smooth' })
-            }}
-            total={totalPages}
-            color="blue"
-            radius="md"
-          />
-        </Center>
-      )}
+
+      <Center mt="xl">
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10)
+            window.scrollTo({ top: 0, behavior: 'smooth' })
+          }}
+          total={totalPages}
+          color="blue"
+          radius="md"
+        />
+      </Center>
     </Box>
   );
 }

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

@@ -76,8 +76,10 @@ function ListAjukanPermohonan({ search }: { search: string }) {
         </Title>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={0}>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0}>
             <TableThead>
               <TableTr>
                 <TableTh fz="sm" fw={600} lh={1.4}>Nama</TableTh>

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

@@ -98,8 +98,10 @@ function ListSuratKeterangan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+        <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh fz="sm" fw={600} ta="left">
@@ -108,59 +110,61 @@ function ListSuratKeterangan({ search }: { search: string }) {
                 <TableTh fz="sm" fw={600} ta="left">
                   Deskripsi
                 </TableTh>
-                <TableTh fz="sm" fw={600} ta="left">
-                  Aksi
-                </TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.length > 0 ? (
-                filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Text fz="md" fw={500} lh={1.5} truncate="end">
-                        {item.name}
-                      </Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text
-                        fz="sm"
-                        lh={1.5}
-                        dangerouslySetInnerHTML={{ __html: item.deskripsi || '' }}
-                        style={{ wordBreak: 'break-word' }}
-                      />
-                    </TableTd>
-                    <TableTd>
-                      <Button
-                        size="xs"
-                        radius="md"
-                        variant="light"
-                        color="blue"
-                        leftSection={<IconDeviceImacCog size={16} />}
-                        onClick={() =>
-                          router.push(
-                            `/admin/desa/layanan/pelayanan_surat_keterangan/${item.id}`
-                          )
-                        }
-                      >
-                        Detail
-                      </Button>
+                  <TableTh fz="sm" fw={600} ta="left">
+                    Aksi
+                  </TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.length > 0 ? (
+                  filteredData.map((item) => (
+                    <TableTr key={item.id}>
+                       <TableTd style={{ maxWidth: 250 }}>
+                        <Text fz="md" fw={500} lh={1.5} truncate="end">
+                          {item.name}
+                        </Text>
+                      </TableTd>
+                       <TableTd style={{ maxWidth: 250 }}>
+                        <Text
+                          fz="sm"
+                          lh={1.5}
+                          dangerouslySetInnerHTML={{ __html: item.deskripsi || '' }}
+                          style={{ wordBreak: 'break-word' }}
+                          lineClamp={1}
+                          truncate="end"
+                        />
+                      </TableTd>
+                       <TableTd style={{ maxWidth: 250 }}>
+                        <Button
+                          size="xs"
+                          radius="md"
+                          variant="light"
+                          color="blue"
+                          leftSection={<IconDeviceImacCog size={16} />}
+                          onClick={() =>
+                            router.push(
+                              `/admin/desa/layanan/pelayanan_surat_keterangan/${item.id}`
+                            )
+                          }
+                        >
+                          Detail
+                        </Button>
+                      </TableTd>
+                    </TableTr>
+                  ))
+                ) : (
+                  <TableTr>
+                    <TableTd colSpan={3}>
+                      <Center py="xl">
+                        <Text c="dimmed" fz="sm" ta="center">
+                          Tidak ada data surat keterangan yang cocok
+                        </Text>
+                      </Center>
                     </TableTd>
                   </TableTr>
-                ))
-              ) : (
-                <TableTr>
-                  <TableTd colSpan={3}>
-                    <Center py="xl">
-                      <Text c="dimmed" fz="sm" ta="center">
-                        Tidak ada data surat keterangan yang cocok
-                      </Text>
-                    </Center>
-                  </TableTd>
-                </TableTr>
-              )}
-            </TableTbody>
-          </Table>
+                )}
+              </TableTbody>
+            </Table>
         </Box>
 
         {/* Mobile Cards */}

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

@@ -85,8 +85,10 @@ function ListPelayananTelunjukSakti({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh fz="sm" fw={600} ta="left" c="gray.8" w="30%">

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

@@ -81,8 +81,10 @@ function ListPenghargaan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh w="35%">Nama</TableTh>

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

@@ -116,8 +116,10 @@ function ListKategoriPengumuman({ search }: { search: string }) {
             </Stack>
           </Box>
 
-          <Box visibleFrom="md">
-            <Table highlightOnHover striped withRowBorders>
+         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+           <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped withRowBorders>
               <TableThead>
                 <TableTr>
                   <TableTh w="60%">

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

@@ -83,8 +83,10 @@ function ListPengumuman({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh fz="sm" fw={600} ta="left">

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

@@ -96,8 +96,10 @@ function ListKategoriPotensi({ search }: { search: string }) {
           </Group>
 
           {/* Desktop Table */}
-          <Box visibleFrom="md">
-            <Table highlightOnHover striped withRowBorders miw={700}>
+         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+           <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped withRowBorders miw={700}>
               <TableThead>
                 <TableTr>
                   <TableTh w="60%">

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

@@ -90,8 +90,10 @@ function ListPotensi({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={700}>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={700}>
             <TableThead>
               <TableTr>
                 <TableTh w="20%">

src/app/admin/(dashboard)/desa/profil/profil-perbekel-dari-masa-ke-masa/page.tsx

@@ -80,8 +80,10 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={0}>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0}>
             <TableThead>
               <TableTr>
                 <TableTh fz="sm" fw={600} ta="left" c="dark.9">Nama Perbekel</TableTh>

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/page.tsx

@@ -98,7 +98,7 @@ function ListAPBDesa({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/page.tsx

@@ -114,7 +114,7 @@ function ListBelanja({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/page.tsx

@@ -108,7 +108,7 @@ function ListPembiayaan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             striped

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/page.tsx

@@ -111,7 +111,7 @@ function ListPendapatan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/page.tsx

@@ -104,7 +104,7 @@ function ListPegawaiBumdes({ search }: { search: string }) {
         </Group>
 
         {/* Desktop: Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/page.tsx

@@ -105,7 +105,7 @@ function ListPosisiOrganisasiBumDes({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx

@@ -129,7 +129,7 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/page.tsx

@@ -112,7 +112,7 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx

@@ -152,7 +152,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/page.tsx

@@ -133,7 +133,7 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
           </Group>
 
           {/* Desktop Table */}
-          <Box visibleFrom="md">
+         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
             <Table
               highlightOnHover
               miw={0}

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/page.tsx

@@ -99,7 +99,7 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/page.tsx

@@ -82,7 +82,7 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/page.tsx

@@ -94,7 +94,7 @@ function ListKategoriProduk({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/edit/page.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
@@ -33,6 +34,7 @@ type FormData = {
   rating: number;
   kategoriId: string[];
   kontak: string;
+  deskripsi: string;
 };
 
 function EditPasarDesa() {
@@ -51,6 +53,7 @@ function EditPasarDesa() {
     rating: 0,
     kategoriId: [],
     kontak: '',
+    deskripsi: ''
   });
 
   const [originalData, setOriginalData] = useState({
@@ -62,6 +65,7 @@ function EditPasarDesa() {
     rating: 0,
     kategoriId: [],
     kontak: '',
+    deskripsi: ''
   });
 
   // load data awal
@@ -83,6 +87,7 @@ function EditPasarDesa() {
             rating: data.rating || 0,
             kategoriId: data.KategoriToPasar?.map((k: any) => k.kategoriId) || [],
             kontak: data.kontak || '',
+            deskripsi: data.deskripsi || ''
           });
           setOriginalData({
             nama: data.nama || '',
@@ -93,6 +98,7 @@ function EditPasarDesa() {
             rating: data.rating || 0,
             kategoriId: data.KategoriToPasar?.map((k: any) => k.kategoriId) || [],
             kontak: data.kontak || '',
+            deskripsi: data.deskripsi || ''
           });
           if (data.image?.link) setPreviewImage(data.image.link);
         }
@@ -120,12 +126,13 @@ function EditPasarDesa() {
       rating: originalData.rating,
       kategoriId: (originalData as any)?.KategoriToPasar?.map((k: any) => k.kategoriId) || [],
       kontak: originalData.kontak,
+      deskripsi: originalData.deskripsi
     });
     setPreviewImage(originalData.imageUrl || null);
     setFile(null);
     toast.info("Form dikembalikan ke data awal");
   };
-    
+
 
   const handleSubmit = async () => {
     try {
@@ -157,7 +164,7 @@ function EditPasarDesa() {
   };
 
   return (
-     <Box px={{ base: 0, md: 'xs' }} py="xs">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />
@@ -316,6 +323,19 @@ function EditPasarDesa() {
             error={!formData.kategoriId.length ? 'Pilih minimal satu kategori' : undefined}
           />
 
+          {/* Input Deskripsi */}
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi
+            </Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
+              }
+            />
+          </Box>
+
           <Group justify="right">
             <Button
               variant="outline"

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/create/page.tsx

@@ -23,6 +23,7 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import pasarDesaState from '../../../../_state/ekonomi/pasar-desa/pasar-desa';
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 
 export default function CreatePasarDesa() {
   const router = useRouter();
@@ -44,6 +45,7 @@ export default function CreatePasarDesa() {
       rating: 0,
       kategoriId: [],
       kontak: '',
+      deskripsi: ''
     };
     setPreviewImage(null);
     setFile(null);
@@ -80,7 +82,7 @@ export default function CreatePasarDesa() {
   };
 
   return (
-     <Box px={{ base: 0, md: 'xs' }} py="xs">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header dengan tombol kembali */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
@@ -234,6 +236,18 @@ export default function CreatePasarDesa() {
             }
           />
 
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi Produk
+            </Text>
+            <CreateEditor
+              value={statePasar.pasarDesa.create.form.deskripsi}
+              onChange={(val) => {
+                statePasar.pasarDesa.create.form.deskripsi = val;
+              }}
+            />
+          </Box>
+
           {/* Tombol Submit */}
           <Group justify="right">
             <Button

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/page.tsx

@@ -81,7 +81,7 @@ function ListPasarDesa({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx

@@ -109,7 +109,7 @@ function ListProgramKemiskinan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/page.tsx

@@ -106,7 +106,7 @@ function ListSektorUnggulanDesa({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx

@@ -73,7 +73,9 @@ function ListAjukanIdeInovatif({ search }: { search: string }) {
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Title order={4}>Daftar Ide Inovatif</Title>
         <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh style={{ width: '20%' }}>Nama</TableTh>

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -83,7 +83,7 @@ function ListInfoTeknologiTepatGuna({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/page.tsx

@@ -84,7 +84,7 @@ function ListKolaborasiInovasi({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/page.tsx

@@ -103,7 +103,7 @@ function ListMitraKolaborasi({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/inovasi/layanan-online-desa/administrasi-online/page.tsx

@@ -70,7 +70,7 @@ function ListAdministrasiOnline({ search }: { search: string }) {
         </Title>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-layanan/page.tsx

@@ -90,7 +90,7 @@ function ListJenisLayanan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-pengaduan/page.tsx

@@ -96,7 +96,7 @@ function ListJenisPengaduan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/inovasi/layanan-online-desa/pengaduan-masyarakat/page.tsx

@@ -79,7 +79,7 @@ function ListPengaduanMasyarakat({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx

@@ -132,7 +132,7 @@ function ListProgramKreatifDesa({ search }: { search: string }) {
               </Button>
             </Group>
 
-            <Box visibleFrom="md">
+           <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
               <Table
                 highlightOnHover
                 miw={0}

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

@@ -93,8 +93,10 @@ function ListKeamananLingkungan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}
             miw={0}
             style={{ tableLayout: 'fixed', width: '100%' }}>
             <TableThead>

src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/page.tsx

@@ -93,7 +93,7 @@ function ListKontakItem({ search }: { search: string }) {
         </Group>
 
         {/* Desktop: Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -92,7 +92,7 @@ function ListKontakDaruratKeamanan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -88,7 +88,7 @@ function ListLaporanPublik({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -92,7 +92,7 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -1,457 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-"use client";
-
-import polsekTerdekat from "@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat";
-import colors from "@/con/colors";
-import {
-  Box,
-  Button,
-  Card,
-  Group,
-  Loader,
-  Modal,
-  Paper,
-  Select,
-  Stack,
-  Text,
-  TextInput,
-  Title
-} from "@mantine/core";
-import { IconArrowBack } from "@tabler/icons-react";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { toast } from "react-toastify";
-import { useProxy } from "valtio/utils";
-
-function EditPolsekTerdekat() {
-  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 [isSubmitting, setIsSubmitting] = useState(false);
-  const [formData, setFormData] = useState({
-    nama: "",
-    jarakKeDesa: "",
-    alamat: "",
-    nomorTelepon: "",
-    jamOperasional: "",
-    embedMapUrl: "",
-    namaTempatMaps: "",
-    alamatMaps: "",
-    linkPetunjukArah: "",
-    layananPolsekId: "",
-  });
-
-  const [originalData, setOriginalData] = useState({
-    nama: "",
-    jarakKeDesa: "",
-    alamat: "",
-    nomorTelepon: "",
-    jamOperasional: "",
-    embedMapUrl: "",
-    namaTempatMaps: "",
-    alamatMaps: "",
-    linkPetunjukArah: "",
-    layananPolsekId: "",
-  });
-
-  // load data untuk form edit
-  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 || "",
-          });
-
-          setOriginalData({
-            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 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) => ({
-          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();
-
-      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();
-
-      if (data.success) {
-        await fetchLayanan();
-        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();
-
-      if (data.success) {
-        await fetchLayanan();
-        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();
-  }, []);
-
-  const handleChange = (field: string, value: string) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-  };
-
-  const handleResetForm = () => {
-    setFormData({
-      nama: originalData.nama,
-      jarakKeDesa: originalData.jarakKeDesa,
-      alamat: originalData.alamat,
-      nomorTelepon: originalData.nomorTelepon,
-      jamOperasional: originalData.jamOperasional,
-      embedMapUrl: originalData.embedMapUrl,
-      namaTempatMaps: originalData.namaTempatMaps,
-      alamatMaps: originalData.alamatMaps,
-      linkPetunjukArah: originalData.linkPetunjukArah,
-      layananPolsekId: originalData.layananPolsekId,
-    });
-    toast.info("Form dikembalikan ke data awal");
-  };
-
-  const handleSubmit = async () => {
-    try {
-      setIsSubmitting(true);
-      polsekState.edit.form = { ...formData }; // update global state hanya di sini
-      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 memperbarui data polsek terdekat");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-     <Box px={{ base: 0, md: 'xs' }} py="xs">
-      {/* Modal Tambah */}
-      <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 Update */}
-      <Modal
-        opened={modalUpdateOpen}
-        onClose={() => setModalUpdateOpen(false)}
-        title="Update 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>
-
-      {/* Header */}
-      <Group mb="md">
-        <Button
-          variant="subtle"
-          onClick={() => router.back()}
-          p="xs"
-          radius="md"
-        >
-          <IconArrowBack color={colors["blue-button"]} size={24} />
-        </Button>
-        <Title order={4} ml="sm" c="dark">
-          Edit Polsek Terdekat
-        </Title>
-      </Group>
-
-      {/* Form utama */}
-      <Paper
-        w={{ base: "100%", md: "50%" }}
-        bg={colors["white-1"]}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: "1px solid #e0e0e0" }}
-      >
-        <Stack gap="md">
-          {/* Input fields */}
-          <TextInput
-            value={formData.nama}
-            onChange={(e) => handleChange("nama", e.currentTarget.value)}
-            label="Nama Polsek Terdekat"
-            placeholder="Masukkan nama Polsek Terdekat"
-            required
-          />
-          <TextInput
-            value={formData.jarakKeDesa}
-            onChange={(e) => handleChange("jarakKeDesa", e.currentTarget.value)}
-            label="Jarak Polsek Terdekat"
-          />
-          <TextInput
-            value={formData.alamat}
-            onChange={(e) => handleChange("alamat", e.currentTarget.value)}
-            label="Alamat Polsek Terdekat"
-          />
-          <TextInput
-            value={formData.nomorTelepon}
-            onChange={(e) => handleChange("nomorTelepon", e.currentTarget.value)}
-            label="Nomor Telepon"
-          />
-          <TextInput
-            value={formData.jamOperasional}
-            onChange={(e) => handleChange("jamOperasional", e.currentTarget.value)}
-            label="Jam Operasional"
-          />
-          <TextInput
-            value={formData.embedMapUrl}
-            onChange={(e) => handleChange("embedMapUrl", e.currentTarget.value)}
-            label="Embed Map URL"
-          />
-          <TextInput
-            value={formData.namaTempatMaps}
-            onChange={(e) => handleChange("namaTempatMaps", e.currentTarget.value)}
-            label="Nama Tempat Maps"
-          />
-          <TextInput
-            value={formData.alamatMaps}
-            onChange={(e) => handleChange("alamatMaps", e.currentTarget.value)}
-            label="Alamat Maps"
-          />
-          <TextInput
-            value={formData.linkPetunjukArah}
-            onChange={(e) => handleChange("linkPetunjukArah", e.currentTarget.value)}
-            label="Link Petunjuk Arah"
-          />
-
-          <Select
-            label="Layanan Polsek"
-            placeholder="Pilih layanan polsek"
-            data={layananOptions}
-            value={formData.layananPolsekId}
-            onChange={(val) => handleChange("layananPolsekId", val || "")}
-          />
-          <Button
-            variant="light"
-            size="xs"
-            onClick={() => setModalOpen(true)}
-          >
-            + Tambah Layanan Baru
-          </Button>
-
-          {/* List layanan */}
-          <Text fw="bold" fz="sm">
-            Daftar Layanan Polsek
-          </Text>
-          {layananOptions.map((item) => (
-            <Card
-              key={item.value}
-              style={{ border: "1px solid #ccc" }}
-              bg={colors["white-1"]}
-              p="md"
-              radius="md"
-              shadow="sm"
-            >
-              <Group justify="space-between">
-                <Text>{item.label}</Text>
-                <Group>
-                  <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>
-              </Group>
-            </Card>
-          ))}
-
-          {/* Submit */}
-          <Group justify="right">
-            {/* Tombol Batal */}
-            <Button
-              variant="outline"
-              color="gray"
-              radius="md"
-              size="md"
-              onClick={handleResetForm}
-            >
-              Batal
-            </Button>
-
-            {/* Tombol Simpan */}
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
-            </Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default EditPolsekTerdekat;

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

@@ -0,0 +1,150 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { IconBuilding, IconTool } from '@tabler/icons-react';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutPolsek({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const tabs = [
+    {
+      label: "Daftar Polsek Terdekat",
+      value: "daftar-polsek-terdekat",
+      href: "/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat",
+      icon: <IconBuilding size={18} stroke={1.8} />
+    },
+    {
+      label: "Layanan Polsek",
+      value: "layanan-polsek",
+      href: "/admin/keamanan/polsek-terdekat/layanan-polsek",
+      icon: <IconTool size={18} stroke={1.8} />
+    }
+  ];
+
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
+
+  const handleTabChange = (value: string | null) => {
+    const tab = tabs.find(t => t.value === value);
+    if (tab) {
+      router.push(tab.href);
+    }
+    setActiveTab(value);
+  };
+
+  useEffect(() => {
+    const match = tabs.find(tab => tab.href === pathname);
+    if (match) {
+      setActiveTab(match.value);
+    }
+  }, [pathname]);
+
+  return (
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Polsek Terdekat
+      </Title>
+      <Tabs
+        color={colors["blue-button"]}
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        {/* ✅ Scroll horizontal wrapper */}
+        <Box visibleFrom='md' pb={10}>
+          <ScrollArea type="auto" offsetScrollbars>
+            <TabsList
+              p="sm"
+              style={{
+                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                borderRadius: "1rem",
+                boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: "0.5rem",
+                paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+              }}
+            >
+              {tabs.map((tab, i) => (
+                <TabsTab
+                  key={i}
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    transition: "all 0.2s ease",
+                    flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              ))}
+            </TabsList>
+          </ScrollArea>
+        </Box>
+
+        <Box hiddenFrom='md' pb={10}>
+          <ScrollArea
+            type="auto"
+            offsetScrollbars={false}
+            w="100%"
+          >
+
+            <TabsList
+              p="xs" // lebih kecil
+              style={{
+                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                borderRadius: "1rem",
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: "0.5rem",
+                width: "max-content", // ⬅️ kunci
+                maxWidth: "100%",     // ⬅️ penting
+              }}
+            >
+              {tabs.map((tab, i) => (
+                <TabsTab
+                  key={i}
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    paddingInline: "0.75rem", // ⬅️ lebih ramping
+                    flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              ))}
+            </TabsList>
+          </ScrollArea>
+        </Box>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+            }}
+          >
+            {children}
+          </TabsPanel>
+        ))}
+      </Tabs>
+    </Stack>
+  );
+}
+
+export default LayoutPolsek;

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

@@ -0,0 +1,279 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import statePolsekTerdekat from "@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat";
+import colors from "@/con/colors";
+import {
+  Box,
+  Button,
+  Group,
+  Loader,
+  MultiSelect,
+  Paper,
+  Stack,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { IconArrowBack } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { useProxy } from "valtio/utils";
+
+
+type FormData = {
+  nama: string;
+  jarakKeDesa: string;
+  alamat: string;
+  nomorTelepon: string;
+  jamOperasional: string;
+  embedMapUrl: string;
+  namaTempatMaps: string;
+  alamatMaps: string;
+  linkPetunjukArah: string;
+  layananPolsekId: string[];
+};
+
+function EditPolsekTerdekat() {
+  const polsekState = useProxy(statePolsekTerdekat.polsekTerdekatState);
+  const params = useParams();
+  const router = useRouter();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState<FormData>({
+    nama: "",
+    jarakKeDesa: "",
+    alamat: "",
+    nomorTelepon: "",
+    jamOperasional: "",
+    embedMapUrl: "",
+    namaTempatMaps: "",
+    alamatMaps: "",
+    linkPetunjukArah: "",
+    layananPolsekId: []
+  });
+
+  const [originalData, setOriginalData] = useState({
+    nama: "",
+    jarakKeDesa: "",
+    alamat: "",
+    nomorTelepon: "",
+    jamOperasional: "",
+    embedMapUrl: "",
+    namaTempatMaps: "",
+    alamatMaps: "",
+    linkPetunjukArah: "",
+    layananPolsekId: []
+  });
+
+    useEffect(() => {
+    statePolsekTerdekat.layananPolsek.findManyAll.load();
+  }, []);
+
+  // load data untuk form edit
+  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.LayananToPolsek?.map((l: any) => l.layananId) || [],
+          });
+
+          setOriginalData({
+            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.LayananToPolsek?.map((l: any) => l.layananId) || [],
+          });
+        }
+      } catch (error) {
+        console.error("Error loading polsek terdekat:", error);
+        toast.error("Gagal memuat data polsek terdekat");
+      }
+    };
+
+    loadPolsekTerdekat();
+  }, [params?.id]);
+
+
+  const handleChange = (key: keyof FormData, value: any) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleResetForm = () => {
+    setFormData({
+      nama: originalData.nama,
+      jarakKeDesa: originalData.jarakKeDesa,
+      alamat: originalData.alamat,
+      nomorTelepon: originalData.nomorTelepon,
+      jamOperasional: originalData.jamOperasional,
+      embedMapUrl: originalData.embedMapUrl,
+      namaTempatMaps: originalData.namaTempatMaps,
+      alamatMaps: originalData.alamatMaps,
+      linkPetunjukArah: originalData.linkPetunjukArah,
+      layananPolsekId: (originalData as any)?.LayananToPolsek?.map((l: any) => l.layananId) || [],
+    });
+    toast.info("Form dikembalikan ke data awal");
+  };
+
+ const handleSubmit = async () => {
+  try {
+    setIsSubmitting(true);
+    await polsekState.edit.update();
+    toast.success("Polsek terdekat berhasil diperbarui!");
+    router.push("/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat");
+  } catch (error) {
+    console.error("Error updating polsek terdekat:", error);
+    toast.error("Gagal memperbarui data polsek terdekat");
+  } finally {
+    setIsSubmitting(false);
+  }
+};
+
+  return (
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
+      {/* Header */}
+      <Group mb="md">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors["blue-button"]} size={24} />
+        </Button>
+        <Title order={4} ml="sm" c="dark">
+          Edit Polsek Terdekat
+        </Title>
+      </Group>
+
+      {/* Form utama */}
+      <Paper
+        w={{ base: "100%", md: "50%" }}
+        bg={colors["white-1"]}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: "1px solid #e0e0e0" }}
+      >
+        <Stack gap="md">
+          {/* Input fields */}
+          <TextInput
+            value={formData.nama}
+            onChange={(e) => handleChange("nama", e.currentTarget.value)}
+            label="Nama Polsek Terdekat"
+            placeholder="Masukkan nama Polsek Terdekat"
+            required
+          />
+          <TextInput
+            value={formData.jarakKeDesa}
+            onChange={(e) => handleChange("jarakKeDesa", e.currentTarget.value)}
+            label="Jarak Polsek Terdekat"
+          />
+          <TextInput
+            value={formData.alamat}
+            onChange={(e) => handleChange("alamat", e.currentTarget.value)}
+            label="Alamat Polsek Terdekat"
+          />
+          <TextInput
+            value={formData.nomorTelepon}
+            onChange={(e) => handleChange("nomorTelepon", e.currentTarget.value)}
+            label="Nomor Telepon"
+          />
+          <TextInput
+            value={formData.jamOperasional}
+            onChange={(e) => handleChange("jamOperasional", e.currentTarget.value)}
+            label="Jam Operasional"
+          />
+          <TextInput
+            value={formData.embedMapUrl}
+            onChange={(e) => handleChange("embedMapUrl", e.currentTarget.value)}
+            label="Embed Map URL"
+          />
+          <TextInput
+            value={formData.namaTempatMaps}
+            onChange={(e) => handleChange("namaTempatMaps", e.currentTarget.value)}
+            label="Nama Tempat Maps"
+          />
+          <TextInput
+            value={formData.alamatMaps}
+            onChange={(e) => handleChange("alamatMaps", e.currentTarget.value)}
+            label="Alamat Maps"
+          />
+          <TextInput
+            value={formData.linkPetunjukArah}
+            onChange={(e) => handleChange("linkPetunjukArah", e.currentTarget.value)}
+            label="Link Petunjuk Arah"
+          />
+
+          <MultiSelect
+            label="Layanan Polsekl"
+            placeholder="Pilih layanan polsek"
+            value={formData.layananPolsekId}
+            onChange={(val) => handleChange('layananPolsekId', val)}
+            data={
+              statePolsekTerdekat.layananPolsek.findManyAll.data?.map((v) => ({
+                value: v.id,
+                label: v.nama,
+              })) || []
+            }
+            clearable
+            searchable
+            required
+            error={!formData.layananPolsekId.length ? 'Pilih minimal satu layanan polsek' : undefined}
+          />
+
+          {/* Submit */}
+          <Group justify="right">
+            {/* Tombol Batal */}
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPolsekTerdekat;

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

@@ -6,12 +6,12 @@ import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-import polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
+import { ModalKonfirmasiHapus } from '../../../../_com/modalKonfirmasiHapus';
+import statePolsekTerdekat from '../../../../_state/keamanan/polsek-terdekat';
 
 function DetailPolsekTerdekat() {
   const router = useRouter();
-  const polsekState = useProxy(polsekTerdekat);
+  const polsekState = useProxy(statePolsekTerdekat.polsekTerdekatState);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [modalHapus, setModalHapus] = useState(false);
   const params = useParams();
@@ -25,7 +25,7 @@ function DetailPolsekTerdekat() {
       polsekState.delete.byId(selectedId);
       setModalHapus(false);
       setSelectedId(null);
-      router.push("/admin/keamanan/polsek-terdekat");
+      router.push("/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat");
     }
   };
 
@@ -40,7 +40,7 @@ function DetailPolsekTerdekat() {
   const data = polsekState.findUnique.data;
 
   return (
-     <Box px={{ base: 0, md: 'xs' }} py="xs">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Tombol Back */}
       <Button
         variant="subtle"
@@ -149,10 +149,20 @@ function DetailPolsekTerdekat() {
                 </Text>
               </Box>
 
-              {/* Layanan Polsek */}
+
               <Box>
                 <Text fz="lg" fw="bold">Layanan Polsek</Text>
-                <Text fz="md" c="dimmed">{data?.layananPolsek?.nama || "-"}</Text>
+                <Stack gap={4}>
+                  {data.LayananToPolsek && data.LayananToPolsek.length > 0 ? (
+                    data.LayananToPolsek.map((layanan) => (
+                      <Text fz="md" c="dimmed" key={layanan.id}>
+                        • {layanan.layanan.nama}
+                      </Text>
+                    ))
+                  ) : (
+                    <Text fz="sm" c="dimmed">Tidak ada layanan polsek</Text>
+                  )}
+                </Stack>
               </Box>
 
               {/* Aksi */}
@@ -172,7 +182,7 @@ function DetailPolsekTerdekat() {
 
                 <Button
                   color="green"
-                  onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${data.id}/edit`)}
+                  onClick={() => router.push(`/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat/${data.id}/edit`)}
                   variant="light"
                   radius="md"
                   size="md"

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

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
 import {
@@ -6,9 +5,8 @@ import {
   Button,
   Group,
   Loader,
-  Modal,
+  MultiSelect,
   Paper,
-  Select,
   Stack,
   Text,
   TextInput,
@@ -19,16 +17,17 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
-import polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
+import statePolsekTerdekat from '../../../../_state/keamanan/polsek-terdekat';
 
 function CreatePolsekTerdekat() {
-  const polsekState = useProxy(polsekTerdekat);
+  const polsekState = useProxy(statePolsekTerdekat.polsekTerdekatState);
   const router = useRouter();
-  const [layananOptions, setLayananOptions] = useState<{ value: string; label: string }[]>([]);
-  const [modalOpen, setModalOpen] = useState(false);
-  const [namaLayananBaru, setNamaLayananBaru] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  useEffect(() => {
+    statePolsekTerdekat.layananPolsek.findManyAll.load();
+  }, []);
+
   const resetForm = () => {
     polsekState.create.form = {
       nama: "",
@@ -40,44 +39,44 @@ function CreatePolsekTerdekat() {
       namaTempatMaps: "",
       alamatMaps: "",
       linkPetunjukArah: "",
-      layananPolsekId: "",
+      layananPolsekId: [],
     };
   };
 
   const isValidGoogleMapsEmbed = (url: string): boolean => {
-  try {
-    const u = new URL(url);
-    return (
-      u.hostname === 'www.google.com' &&
-      u.pathname === '/maps/embed' &&
-      u.searchParams.has('pb')
-    );
-  } catch {
-    return false;
-  }
-};
+    try {
+      const u = new URL(url);
+      return (
+        u.hostname === 'www.google.com' &&
+        u.pathname === '/maps/embed' &&
+        u.searchParams.has('pb')
+      );
+    } catch {
+      return false;
+    }
+  };
 
   const handleSubmit = async () => {
-  const { embedMapUrl } = polsekState.create.form;
+    const { embedMapUrl } = polsekState.create.form;
 
-  // ✅ Validasi Google Maps Embed URL (jika diisi)
-  if (embedMapUrl && !isValidGoogleMapsEmbed(embedMapUrl)) {
-    toast.error("URL embed peta tidak valid. Harap paste iframe dari Google Maps.");
-    return;
-  }
+    // ✅ Validasi Google Maps Embed URL (jika diisi)
+    if (embedMapUrl && !isValidGoogleMapsEmbed(embedMapUrl)) {
+      toast.error("URL embed peta tidak valid. Harap paste iframe dari Google Maps.");
+      return;
+    }
 
-  try {
-    setIsSubmitting(true);
-    await polsekState.create.create();
-    resetForm();
-    router.push("/admin/keamanan/polsek-terdekat");
-  } catch (error) {
-    console.error(error);
-    toast.error("Gagal menambah polsek terdekat");
-  } finally {
-    setIsSubmitting(false);
-  }
-};
+    try {
+      setIsSubmitting(true);
+      await polsekState.create.create();
+      resetForm();
+      router.push("/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat");
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal menambah polsek terdekat");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
 
   const extractEmbedUrl = (input: string): string => {
     // Jika sudah berupa URL embed yang valid
@@ -96,77 +95,8 @@ function CreatePolsekTerdekat() {
     return input.trim();
   };
 
-  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) => ({
-          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();
-
-      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 px={{ base: 0, md: 'xs' }} py="xs">
-      {/* Modal Tambah Layanan */}
-      <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 px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button
@@ -255,36 +185,23 @@ function CreatePolsekTerdekat() {
             label={<Text fw="bold" fz="sm">Link Petunjuk Arah</Text>}
             placeholder="Masukkan link petunjuk arah"
           />
-          <Select
+          <MultiSelect
             label="Layanan Polsek"
-            placeholder="Pilih layanan polsek"
-            data={layananOptions}
-            value={polsekState.create.form.layananPolsekId || null}
-            onChange={(val: string | null) => {
-              if (val) {
-                const selected = layananOptions.find(
-                  (item) => item.value === val
-                );
-                if (selected) {
-                  polsekState.create.form.layananPolsekId = selected.value;
-                }
-              } else {
-                polsekState.create.form.layananPolsekId = '';
-              }
+            placeholder="Pilih layanan polsek (bisa lebih dari satu)"
+            data={statePolsekTerdekat.layananPolsek.findManyAll.data?.map((v) => ({
+              value: v.id,
+              label: v.nama,
+            })) || []}
+            value={polsekState.create.form.layananPolsekId}
+            onChange={(val) => {
+              polsekState.create.form.layananPolsekId = val;
             }}
             searchable
             clearable
-            nothingFoundMessage="Tidak ditemukan"
+            nothingFoundMessage="Tidak ada layanan ditemukan"
             required
+            error={polsekState.create.form.layananPolsekId?.length === 0 ? "Pilih minimal 1 layanan polsek" : undefined}
           />
-          <Button
-            variant="light"
-            size="xs"
-            onClick={() => setModalOpen(true)}
-          >
-            + Tambah Layanan Baru
-          </Button>
-
           {/* Tombol Submit */}
           <Group justify="right">
             <Button

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

@@ -23,8 +23,9 @@ import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../_com/header';
-import polsekTerdekat from '../../_state/keamanan/polsek-terdekat';
+import HeaderSearch from '../../../_com/header';
+import statePolsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
+
 
 function PolsekTerdekat() {
   const [search, setSearch] = useState("");
@@ -45,7 +46,7 @@ function PolsekTerdekat() {
 }
 
 function ListPolsekTerdekat({ search }: { search: string }) {
-  const polsekState = useProxy(polsekTerdekat);
+  const polsekState = useProxy(statePolsekTerdekat.polsekTerdekatState);
   const router = useRouter();
   const [debouncedSearch] = useDebouncedValue(search, 1000);
 
@@ -82,14 +83,14 @@ function ListPolsekTerdekat({ search }: { search: string }) {
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/keamanan/polsek-terdekat/create')}
+            onClick={() => router.push('/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat/create')}
           >
             Tambah Baru
           </Button>
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}
@@ -145,7 +146,7 @@ function ListPolsekTerdekat({ search }: { search: string }) {
                       <Button
                         variant="light"
                         color="blue"
-                        onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}
+                        onClick={() => router.push(`/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat/${item.id}`)}
                         w="100%"
                       >
                         <IconDeviceImac size={18} />
@@ -207,7 +208,7 @@ function ListPolsekTerdekat({ search }: { search: string }) {
                         variant="light"
                         color="blue"
                         fullWidth
-                        onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}
+                        onClick={() => router.push(`/admin/keamanan/polsek-terdekat/daftar-polsek-terdekat/${item.id}`)}
                       >
                         <IconDeviceImac size={18} />
                         <Text ml={5} fz="sm" fw={500} lh={1.4}>

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

@@ -0,0 +1,161 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import statePolsekTerdekat from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
+import colors from '@/con/colors';
+import {
+  Box,
+  Button,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  TextInput,
+  Title
+} from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditLayananPolsek() {
+  const editState = useProxy(statePolsekTerdekat.layananPolsek);
+  const router = useRouter();
+  const params = useParams();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [originalData, setOriginalData] = useState({
+    nama: '',
+  });
+
+  const [formData, setFormData] = useState({
+    nama: '',
+  });
+
+  useEffect(() => {
+    const loadLayananPolsek = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await editState.update.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+          });
+          setOriginalData({
+            nama: data.nama || '',
+          });
+        }
+      } catch (error) {
+        console.error('Error loading layanan polsek:', error);
+        toast.error('Gagal memuat data layanan polsek');
+      }
+    };
+
+    loadLayananPolsek();
+  }, [params?.id]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  const handleResetForm = () => {
+    setFormData({
+      nama: originalData.nama,
+    });
+    toast.info('Form dikembalikan ke data awal');
+  };
+
+  const handleSubmit = async () => {
+    try {
+      setIsSubmitting(true);
+      // update global state hanya saat submit
+      editState.update.form = {
+        ...editState.update.form,
+        nama: formData.nama,
+      };
+
+      await editState.update.update();
+      toast.success('Layanan Polsek berhasil diperbarui!');
+      router.push('/admin/keamanan/polsek-terdekat/layanan-polsek');
+    } catch (error) {
+      console.error('Error updating layanan polsek:', error);
+      toast.error('Terjadi kesalahan saat memperbarui layanan polsek');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
+      {/* Back Button + Title */}
+      <Group mb="md">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        <Title order={4} ml="sm" c="dark">
+          Edit Layanan Polsek
+        </Title>
+      </Group>
+
+      {/* Form Wrapper */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}  
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            name="nama"
+            label="Nama Layanan Polsek"
+            placeholder="Masukkan nama layanan polsek"
+            value={formData.nama}
+            onChange={handleChange}
+            required
+          />
+
+          <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={handleResetForm}
+            >
+              Batal
+            </Button>
+
+            {/* Tombol Simpan */}
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditLayananPolsek;

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

@@ -0,0 +1,111 @@
+'use client';
+import statePolsekTerdekat from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
+import colors from '@/con/colors';
+import {
+  Box,
+  Button,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  TextInput,
+  Title
+} from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function CreateLayananPolsek() {
+  const createState = useProxy(statePolsekTerdekat.layananPolsek);
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const resetForm = () => {
+    createState.create.form = {
+      nama: '',
+    };
+  };
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    try {
+      await createState.create.create();
+      resetForm();
+      router.push('/admin/keamanan/polsek-terdekat/layanan-polsek');
+    } catch (error) {
+      console.error('Error creating layanan polsek:', error);
+      toast.error('Gagal menambahkan layanan polsek');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
+      {/* Header dengan back button */}
+      <Group mb="md">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Layanan Polsek
+        </Title>
+      </Group>
+
+      {/* Form utama */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Nama Layanan Polsek"
+            placeholder="Masukkan nama layanan polsek"
+            value={createState.create.form.nama || ''}
+            onChange={(e) => (createState.create.form.nama = e.target.value)}
+            required
+          />
+
+          <Group justify="right">
+            <Button
+              variant="outline"
+              color="gray"
+              radius="md"
+              size="md"
+              onClick={resetForm}
+            >
+              Reset
+            </Button>
+
+            {/* Tombol Simpan */}
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              {isSubmitting ? <Loader size="sm" color="white" /> : 'Simpan'}
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateLayananPolsek;

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

@@ -0,0 +1,265 @@
+'use client'
+import colors from '@/con/colors';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import statePolsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
+
+
+function LayananPolsek() {
+  const [search, setSearch] = useState("");
+
+  return (
+    <Box>
+      <HeaderSearch
+        title='Layanan Polsek'
+        placeholder='Cari layanan polsek...'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+
+      <ListLayananPolsek search={search} />
+    </Box>
+  );
+}
+
+function ListLayananPolsek({ search }: { search: string }) {
+  const layananState = useProxy(statePolsekTerdekat.layananPolsek);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = layananState.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
+
+  const handleDelete = () => {
+    if (selectedId) {
+      layananState.delete.delete(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      load(page, 10, search);
+    }
+  };
+
+  const filteredData = data || [];
+
+  if (loading || !data) {
+    return (
+      <Stack py={{ base: 'sm', md: 'lg' }}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
+  }
+
+  return (
+    <Box py={{ base: 'sm', md: 'lg' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'md', md: 'lg' }}>
+          <Title order={4} lh={{ base: 1.2, md: 1.2 }}>
+            Daftar Layanan Polsek
+          </Title>
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() => router.push('/admin/keamanan/polsek-terdekat/layanan-polsek/create')}
+          >
+            Tambah Baru
+          </Button>
+        </Group>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Nama Layanan Polsek
+                  </Text>
+                </TableTh>
+                <TableTh w="20%">
+                  <Text fz="sm" fw={600} lh={1.4} ta="center">Edit</Text>
+                </TableTh>
+                <TableTh w="20%">
+                  <Text fz="sm" fw={600} lh={1.4} ta="center">Hapus</Text>
+                </TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
+                        {item.nama}
+                      </Text>
+                    </TableTd>
+                    <TableTd ta="center">
+                      <Button
+                        variant="light"
+                        color="green"
+                        onClick={() =>
+                          router.push(
+                            `/admin/keamanan/polsek-terdekat/layanan-polsek/${item.id}`
+                          )
+                        }
+                        size="compact-sm"
+                      >
+                        <IconEdit size={16} />
+                      </Button>
+                    </TableTd>
+                    <TableTd ta="center">
+                      <Button
+                        variant="light"
+                        color="red"
+                        disabled={layananState.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                        size="compact-sm"
+                      >
+                        <IconTrash size={16} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={24}>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data Polsek yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="sm">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="sm" radius="sm">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Layanan Polsek
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.45}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Group mt="sm" justify="flex-end" gap="xs">
+                      <Button
+                        variant="light"
+                        color="green"
+                        size="compact-xs"
+                        onClick={() =>
+                          router.push(
+                            `/admin/keamanan/polsek-terdekat/layanan-polsek/${item.id}`
+                          )
+                        }
+                      >
+                        <IconEdit size={14} />
+                      </Button>
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="compact-xs"
+                        disabled={layananState.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        <IconTrash size={14} />
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py={24}>
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data Layanan Polsek yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
+      </Paper>
+
+      {/* Pagination */}
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt={{ base: 'lg', md: 'xl' }}
+          mb={{ base: 'lg', md: 'xl' }}
+          color="blue"
+          radius="md"
+        />
+      </Center>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text="Apakah anda yakin ingin menghapus layanan polsek ini?"
+      />
+    </Box>
+  );
+}
+
+export default LayananPolsek;

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

@@ -0,0 +1,34 @@
+'use client'
+import React from 'react';
+import LayoutPolsek from './_com/layoutPolsek';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
+
+function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  // Contoh path:
+  // - /darmasaba/desa/berita/semua → panjang 5 → list
+  // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+  // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+
+  const segments = pathname.split('/').filter(Boolean);
+  const isDetailPage = segments.length >= 5;
+
+  if (isDetailPage) {
+    // Tampilkan tanpa tab menu
+    return (
+      <Box>
+        {children}
+      </Box>
+    );
+  }
+
+  return (
+    <LayoutPolsek>
+      {children}
+    </LayoutPolsek>
+  );
+}
+
+export default Layout;

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

@@ -85,7 +85,7 @@ function ListTipsKeamanan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -84,7 +84,9 @@ function ListArtikelKesehatan({ search }: { search: string }) {
 
         {/* Tabel */}
         <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh style={{ minWidth: 200 }}>Judul</TableTh>

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/page.tsx

@@ -81,8 +81,10 @@ function ListDokterTenagaMedis({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh><Text fz="sm" fw={600} lh={1.4}>Nama Dokter</Text></TableTh>

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

@@ -170,8 +170,10 @@ function ListFasilitasKesehatan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh>Fasilitas Kesehatan</TableTh>

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

@@ -94,8 +94,10 @@ function ListTarifLayanan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh>

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

@@ -85,8 +85,10 @@ function ListJadwalKegiatan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh fz="sm" fw={600} lh={1.2}>Nama</TableTh>

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

@@ -147,8 +147,10 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh>Nama</TableTh>

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

@@ -99,8 +99,10 @@ function ListKelahiran({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover fz="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} fz="md">
             <TableThead>
               <TableTr>
                 <TableTh><Text fz="sm" fw={600} lh={1.4}>Nama</Text></TableTh>

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

@@ -95,8 +95,10 @@ function ListKematian({ search }: { search: string }) {
         </Group>
 
         {/* Tabel untuk desktop */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh><Text fz="sm" fw={600} lh={1.2}>Nama</Text></TableTh>

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

@@ -234,7 +234,7 @@ function GrafikPersentaseKelahiranKematian() {
 
 
                 {/* Desktop: Table */}
-                <Box visibleFrom="md">
+               <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
                   <Table striped withTableBorder highlightOnHover>
                     <Table.Thead>
                       <Table.Tr>

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx

@@ -93,7 +93,9 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
 
         {/* Desktop Table */}
         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh>Judul</TableTh>

src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/edit/page.tsx

@@ -159,8 +159,8 @@ function EditKontakDarurat() {
           <TextInput
             value={formData.whatsapp}
             onChange={(e) => setFormData(prev => ({ ...prev, whatsapp: e.target.value }))}
-            label="Whatsapp"
-            placeholder="Masukkan whatsapp"
+            label="Telepon"
+            placeholder="Masukkan telepon"
             required
           />
 

src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/page.tsx

@@ -73,7 +73,7 @@ function DetailKontakDarurat() {
               </Box>
 
               <Box>
-                <Text fz="lg" fw="bold">Whatsapp</Text>
+                <Text fz="lg" fw="bold">Telepon</Text>
                 <Text fz="md" c="dimmed">{data.whatsapp || '-'}</Text>
               </Box>
 

src/app/admin/(dashboard)/kesehatan/kontak-darurat/create/page.tsx

@@ -120,8 +120,8 @@ function CreateKontakDarurat() {
             onChange={(val) => {
               kontakDaruratState.create.form.whatsapp = val.target.value;
             }}
-            label={<Text fz="sm" fw="bold">Whatsapp</Text>}
-            placeholder="Masukkan whatsapp"
+            label={<Text fz="sm" fw="bold">Telepon</Text>}
+            placeholder="Masukkan telepon"
             required
           />
 

src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx

@@ -83,8 +83,10 @@ function ListKontakDarurat({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh>Judul</TableTh>

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx

@@ -87,8 +87,10 @@ function ListPenangananDarurat({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh fz="sm" fw={600} lh={1.4}>Judul</TableTh>

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

@@ -87,31 +87,34 @@ function ListPosyandu({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}
+    >
             <TableThead>
               <TableTr>
-                <TableTh fz="sm" fw={600} ta="left" lh={1.4}>Nama Posyandu</TableTh>
-                <TableTh fz="sm" fw={600} ta="left" lh={1.4}>Nomor Posyandu</TableTh>
-                <TableTh fz="sm" fw={600} ta="left" lh={1.4}>Deskripsi</TableTh>
-                <TableTh fz="sm" fw={600} ta="left" lh={1.4}>Aksi</TableTh>
+                <TableTh w={220} fz="sm" fw={600} ta="left" lh={1.4}>Nama Posyandu</TableTh>
+                <TableTh w={220} fz="sm" fw={600} ta="left" lh={1.4}>Nomor Posyandu</TableTh>
+                <TableTh w={220} fz="sm" fw={600} ta="left" lh={1.4}>Deskripsi</TableTh>
+                <TableTh w={150} fz="sm" fw={600} ta="left" lh={1.4}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>
+                    <TableTd w={220}>
                       <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
                         {item.name}
                       </Text>
                     </TableTd>
-                    <TableTd>
+                    <TableTd w={220}>
                       <Text fz="sm" c="dimmed" lh={1.5}>
                         {item.nomor || '-'}
                       </Text>
                     </TableTd>
-                    <TableTd>
+                    <TableTd w={220}>
                       <Text
                         fz="sm"
                         lh={1.5}
@@ -120,7 +123,7 @@ function ListPosyandu({ search }: { search: string }) {
                         dangerouslySetInnerHTML={{ __html: item.deskripsi }}
                       />
                     </TableTd>
-                    <TableTd>
+                    <TableTd w={220}>
                       <Button
                         size="xs"
                         radius="md"

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

@@ -83,8 +83,10 @@ function ListProgramKesehatan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh>

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

@@ -82,8 +82,10 @@ function ListPuskesmas({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
             <TableThead>
               <TableTr>
                 <TableTh>

src/app/admin/(dashboard)/landing-page/SDGs/page.tsx

@@ -74,8 +74,10 @@ function ListSdgsDesa({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover striped verticalSpacing="sm">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped verticalSpacing="sm">
             <TableThead>
               <TableTr>
                 <TableTh style={{ width: '60%' }}>

src/app/admin/(dashboard)/landing-page/apbdes/page.tsx

@@ -66,7 +66,7 @@ function ListAPBDes({ search }: { search: string }) {
   return (
     <Box py={{ base: 'md', md: 'lg' }}>
       {/* Desktop Table */}
-      <Box visibleFrom="md">
+     <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
         <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
           <Group justify="space-between" mb="md">
             <Title order={4} size="lg" lh={1.2}>
@@ -83,7 +83,9 @@ function ListAPBDes({ search }: { search: string }) {
           </Group>
 
           <Box>
-            <Table highlightOnHover miw={0}>
+           <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0}>
               <TableThead>
                 <TableTr>
                   <TableTh fz="md" fw={600} ta="left" w="25%">

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx

@@ -123,7 +123,9 @@ function ListKategoriKegiatan({ search }: { search: string }) {
   // Desktop table
   const renderDesktopTable = () => (
     <Box>
-      <Table highlightOnHover striped verticalSpacing="sm" miw={300}>
+     <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped verticalSpacing="sm" miw={300}>
         <TableThead>
           <TableTr>
             <TableTh>
@@ -208,7 +210,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box visibleFrom="md">{renderDesktopTable()}</Box>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>{renderDesktopTable()}</Box>
         <Box hiddenFrom="md">{renderMobileCards()}</Box>
       </Paper>
 

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx

@@ -83,7 +83,7 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
           </Group>
 
           {/* Desktop Table */}
-          <Box visibleFrom="md">
+         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
             <Table
               striped
               highlightOnHover

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/responden/page.tsx

@@ -85,7 +85,7 @@ function ListResponden({ search }: ListRespondenProps) {
     <Box>
       <Stack gap={'lg'}>
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Paper p="lg" radius="lg" shadow="md" withBorder>
             <Title order={4} size="lg" mb="md" lh={1.2}>
               Daftar Responden

src/app/admin/(dashboard)/landing-page/prestasi-desa/kategori-prestasi-desa/page.tsx

@@ -79,7 +79,7 @@ function ListKategoriPrestasi({ search }: { search: string }) {
             Tambah Baru
           </Button>
         </Group>
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table verticalSpacing="sm" highlightOnHover>
             <TableThead>
               <TableTr>

src/app/admin/(dashboard)/landing-page/prestasi-desa/list-prestasi-desa/page.tsx

@@ -73,7 +73,9 @@ function ListPrestasi({ search }: { search: string }) {
 
         {/* Desktop Table */}
         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover striped verticalSpacing="sm" miw={800}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped verticalSpacing="sm" miw={800}>
             <TableThead>
               <TableTr>
                 <TableTh>Nama Prestasi</TableTh>

src/app/admin/(dashboard)/landing-page/profil/media-sosial/page.tsx

@@ -100,8 +100,10 @@ function ListMediaSosial({ search }: { search: string }) {
 
         <Box>
           {/* Desktop: Table | Mobile: Card-based vertical layout */}
-          <Box visibleFrom="md">
-            <Table highlightOnHover>
+         <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+           <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false}>
               <TableThead>
                 <TableTr>
                   <TableTh style={{ width: '25%' }}>

src/app/admin/(dashboard)/landing-page/profil/program-inovasi/page.tsx

@@ -13,7 +13,7 @@ function ProgramInovasi() {
   const [search, setSearch] = useState("");
 
   return (
-    <Box px={{base: 0, md: "md"}} py="lg">
+    <Box px={{ base: 0, md: "md" }} py="lg">
       <HeaderSearch
         title="Program Inovasi"
         placeholder="Cari program inovasi..."
@@ -34,8 +34,8 @@ function ListProgramInovasi({ search }: { search: string }) {
   const { data, page, totalPages, loading, load } = stateProgramInovasi.findMany;
 
   useShallowEffect(() => {
-      load(page, 10, debouncedSearch);
-    }, [page, debouncedSearch]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
@@ -62,67 +62,67 @@ function ListProgramInovasi({ search }: { search: string }) {
             Tambah Program
           </Button>
         </Group>
-        <Box visibleFrom='md'>
-          <Box style={{ overflowX: 'auto' }}>
-            <Table highlightOnHover striped verticalSpacing="sm">
-              <TableThead>
+        <Box visibleFrom='md' style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} striped verticalSpacing="sm">
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Program</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Link</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length === 0 ? (
                 <TableTr>
-                  <TableTh>Nama Program</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Link</TableTh>
-                  <TableTh>Aksi</TableTh>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Belum ada data program inovasi</Text>
+                    </Center>
+                  </TableTd>
                 </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.length === 0 ? (
-                  <TableTr>
-                    <TableTd colSpan={4}>
-                      <Center py={20}>
-                        <Text color="dimmed">Belum ada data program inovasi</Text>
-                      </Center>
+              ) : (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500}>{item.name}</Text>
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Text fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.description || '-' }}></Text>
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Tooltip label="Buka tautan program" position="top" withArrow>
+                        <a
+                          href={item.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          style={{ color: colors['blue-button'], textDecoration: 'underline' }}
+                        >
+                          <Text truncate fz="sm">{item.link}</Text>
+                        </a>
+                      </Tooltip>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImacCog size={16} />}
+                        onClick={() =>
+                          router.push(`/admin/landing-page/profil/program-inovasi/${item.id}`)
+                        }
+                      >
+                        Detail
+                      </Button>
                     </TableTd>
                   </TableTr>
-                ) : (
-                  filteredData.map((item) => (
-                    <TableTr key={item.id}>
-                      <TableTd>
-                        <Text fw={500}>{item.name}</Text>
-                      </TableTd>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Text fz="sm" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.description || '-' }}></Text>
-                      </TableTd>
-                      <TableTd style={{ maxWidth: 250 }}>
-                        <Tooltip label="Buka tautan program" position="top" withArrow>
-                          <a
-                            href={item.link}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            style={{ color: colors['blue-button'], textDecoration: 'underline' }}
-                          >
-                            <Text truncate fz="sm">{item.link}</Text>
-                          </a>
-                        </Tooltip>
-                      </TableTd>
-                      <TableTd>
-                        <Button
-                          size="xs"
-                          radius="md"
-                          variant="light"
-                          color="blue"
-                          leftSection={<IconDeviceImacCog size={16} />}
-                          onClick={() =>
-                            router.push(`/admin/landing-page/profil/program-inovasi/${item.id}`)
-                          }
-                        >
-                          Detail
-                        </Button>
-                      </TableTd>
-                    </TableTr>
-                  ))
-                )}
-              </TableTbody>
-            </Table>
-          </Box>
+                ))
+              )}
+            </TableTbody>
+          </Table>
         </Box>
         <Box hiddenFrom="md" pt={20}>
           <Stack gap="sm">

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

@@ -139,8 +139,10 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
                 Tambah Baru
               </Button>
             </Group>
-            <Box visibleFrom="md">
-              <Table highlightOnHover miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
+           <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+             <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
                 <TableThead>
                   <TableTr>
                     <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
@@ -181,8 +183,10 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
-          <Table highlightOnHover miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
+         <Table highlightOnHover
+    layout="fixed" // 🔥 PENTING
+    withColumnBorders={false} miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
             <TableThead>
               <TableTr>
                 <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>

src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/page.tsx

@@ -100,7 +100,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/page.tsx

@@ -89,7 +89,7 @@ function ListKegiatanDesa({ search }: { search: string }) {
         </Group>
 
         {/* Desktop: Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/page.tsx

@@ -70,7 +70,7 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
         </Group>
         
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/page.tsx

@@ -119,7 +119,7 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -74,7 +74,7 @@ function ListBeasiswaPendaftar({ search }: { search: string }) {
         </Group>
 
         {/* Desktop: Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -94,7 +94,7 @@ function ListKeunggulanProgram({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -99,7 +99,7 @@ function ListJenjangPendidikan() {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -89,7 +89,7 @@ function ListLembaga({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -74,7 +74,7 @@ function ListPengajar({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -82,7 +82,7 @@ function ListSiswa({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             highlightOnHover
             miw={0}

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

@@ -86,7 +86,7 @@ function ListDataPerpustakaan({ search }: { search: string }) {
         </Group>
 
         {/* Desktop Table */}
-        <Box visibleFrom="md">
+       <Box visibleFrom="md" style={{ overflowX: 'auto' }}>
           <Table
             striped
             highlightOnHover