Tambah seeder di bagian landing page

FIx QC Kak Ayu Mobile Admin Done
Fix Tampilan Admin Mobile Device All Menu Done

prisma/data/fetchWithRetry.ts

@@ -0,0 +1,30 @@
+export default async function fetchWithRetry(
+  url: string,
+  retries = 3,
+  timeoutMs = 20000
+) {
+  for (let attempt = 1; attempt <= retries; attempt++) {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), timeoutMs);
+
+    try {
+      const res = await fetch(url, { signal: controller.signal });
+
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status} ${res.statusText}`);
+      }
+
+      return res;
+    } catch (err) {
+      console.warn(`⚠️ Download attempt ${attempt} failed`);
+
+      if (attempt === retries) {
+        throw err;
+      }
+    } finally {
+      clearTimeout(timeout);
+    }
+  }
+
+  throw new Error("Unreachable");
+}

prisma/data/file-storage.json

@@ -1,137 +1,120 @@
 [
   {
-    "id": "cmff0rr4z0002vn0twp333m2",
-    "name": "S6RIjFaPvdQm3oq4rM4X9-desktop.webp",
-    "realName": "bares.png",
-    "path": "uploads/images",
-    "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/S6RIjFaPvdQm3oq4rM4X9-desktop.webp",
-    "category": "image"
-  },
-  {
-    "id": "cmff0tnf00003vn0t3kgzi0u0",
-    "name": "_pVNEmThU5ICGa8gv3gh_-desktop.webp",
-    "realName": "bicara-darma.png",
-    "path": "uploads/images",
-    "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/_pVNEmThU5ICGa8gv3gh_-desktop.webp",
-    "category": "image"
-  },
-  {
-    "id": "cmff0uykf0004vn0trmmxpgfh",
-    "name": "bv6rdKvjxkkjUSGLQ0lvB-desktop.webp",
-    "realName": "daves.png",
-    "path": "uploads/images",
-    "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/bv6rdKvjxkkjUSGLQ0lvB-desktop.webp",
-    "category": "image"
-  },
-  {
-    "id": "cmff0z34f0005vn0tjtvq519p",
-    "name": "Z4hWaV04CvoE20MjccQsV-desktop.webp",
-    "realName": "mangan.png",
-    "path": "uploads/images",
-    "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/Z4hWaV04CvoE20MjccQsV-desktop.webp",
-    "category": "image"
-  },
-  {
-    "id": "cmff38cyq000bvn0t9f01cz3f",
-    "name": "LvLAtOqWojx4sn6NjJWB9-desktop.webp",
-    "realName": "gelah-melah.png",
-    "path": "uploads/images",
-    "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/LvLAtOqWojx4sn6NjJWB9-desktop.webp",
-    "category": "image"
-  },
-  {
-    "id": "cmff0zqvd0007vn0tv6o5hjcq",
-    "name": "gR2mcvAQVgJ2-rM5coYJj-desktop.webp",
-    "realName": "inovasi-desa-darmasaba.png",
-    "path": "uploads/images",
-    "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/gR2mcvAQVgJ2-rM5coYJj-desktop.webp",
-    "category": "image"
-  },
-  {
-    "id": "cmff1013m0008vn0th7t0d64d",
-    "name": "JpL-9F8-IGztMn8E2ce02-desktop.webp",
-    "realName": "pdkt.png",
-    "path": "uploads/images",
-    "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/JpL-9F8-IGztMn8E2ce02-desktop.webp",
-    "category": "image"
-  },
-  {
-    "id": "cmff10cwq0009vn0tse8dzu3j",
-    "name": "bxAk4AsGbJTC705_IVdes-desktop.webp",
-    "realName": "sajjiana-dharma-raksaka.png",
-    "path": "uploads/images",
-    "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/bxAk4AsGbJTC705_IVdes-desktop.webp",
-    "category": "image"
-  },
-  {
-    "id": "cmff2w5ly000avn0telhct71k",
-    "name": "Vbj_osnMJUkGEQGDTLwV--desktop.webp",
+    "id": "cmk27746i0000vnso2aspwf9g",
+    "name": "Eqlrr1W-pK8ShMGqgPGL3-desktop.webp",
     "realName": "perbekel.png",
     "path": "uploads/images",
     "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/Vbj_osnMJUkGEQGDTLwV--desktop.webp",
+    "link": "/api/fileStorage/findUnique/Eqlrr1W-pK8ShMGqgPGL3-desktop.webp",
+    "category": "image"
+  }
+  ,
+  {
+    "id": "cmk20mg320000vnevxy0k73fr",
+    "name": "thpgPSJkBxUIRajZt3AVo-desktop.webp",
+    "realName": "bares.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/thpgPSJkBxUIRajZt3AVo-desktop.webp",
     "category": "image"
   },
   {
-    "id": "cmff3joae0000vn6h8sgs0ilg",
-    "name": "7hox9spUxj56hY_EBYLnj-desktop.webp",
+    "id": "cmk20nqmu0001vnevfte29rk0",
+    "name": "ubna9N6r7RgVWN5plO5mq-desktop.webp",
+    "realName": "bicara-darma.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/ubna9N6r7RgVWN5plO5mq-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmk228urs0007vnevi5b66bqn",
+    "name": "Z4i2RRnnlHq2iWj94ldyo-desktop.webp",
+    "realName": "daves.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/Z4i2RRnnlHq2iWj94ldyo-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmk20nyen0002vnevd0hfr3u8",
+    "name": "y4yaE4XdUP1TSUGhWPW9h-desktop.webp",
+    "realName": "mangan.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/y4yaE4XdUP1TSUGhWPW9h-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmk20o7mf0003vnevohrksm1d",
+    "name": "Vr7CoaYDpk2dIkHx9PxRj-desktop.webp",
+    "realName": "gelah-melah.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/Vr7CoaYDpk2dIkHx9PxRj-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmk20of8m0004vnev9ujy5o0l",
+    "name": "ceoB_sg-HOzljN8j_2nZA-desktop.webp",
+    "realName": "inovasi-desa-darmasaba.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/ceoB_sg-HOzljN8j_2nZA-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmk20omzq0005vnevgi6f4edu",
+    "name": "vOy5YVUXfHXfiFOHylIN7-desktop.webp",
+    "realName": "pdkt.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/vOy5YVUXfHXfiFOHylIN7-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmk20pf3d0006vnev3mkoqpyy",
+    "name": "gE_qcqIbY0mqI6FV9V4CL-desktop.webp",
+    "realName": "sajjiana-dharma-raksaka.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/gE_qcqIbY0mqI6FV9V4CL-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmk2cgqgm0003vn96jun52pik",
+    "name": "q1G995W7cLkC_qquLTlKN-desktop.webp",
     "realName": "youtube.png",
     "path": "uploads/images",
     "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/7hox9spUxj56hY_EBYLnj-desktop.webp",
+    "link": "/api/fileStorage/findUnique/q1G995W7cLkC_qquLTlKN-desktop.webp",
     "category": "image"
   },
   {
-    "id": "cmff3ll130001vn6hkhls3f5y",
-    "name": "ChihV7_1eS-AGtSg9UwMv-desktop.webp",
-    "realName": "gmail.png",
-    "path": "uploads/images",
-    "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/ChihV7_1eS-AGtSg9UwMv-desktop.webp",
-    "category": "image"
-  },
-  {
-    "id": "cmff3mtat0002vn6hs8vyyhdd",
-    "name": "z8v9ZREwOJHKGIRYauROt-desktop.webp",
+    "id": "cmk2cmr000006vn96qepq6gvl",
+    "name": "I6mlQ4nRmPX26gm79C_rM-desktop.webp",
     "realName": "facebook.png",
     "path": "uploads/images",
     "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/z8v9ZREwOJHKGIRYauROt-desktop.webp",
+    "link": "/api/fileStorage/findUnique/I6mlQ4nRmPX26gm79C_rM-desktop.webp",
     "category": "image"
   },
   {
-    "id": "cmff3nv180003vn6h5jvedidq",
-    "name": "BLjMxTKoCNE31uOURR3IU-desktop.webp",
-    "realName": "telephone-call.png",
-    "path": "uploads/images",
-    "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/BLjMxTKoCNE31uOURR3IU-desktop.webp",
-    "category": "image"
-  },
-  {
-    "id": "cmff3oouh0004vn6hd94brzv9",
-    "name": "hkJYAeTNWK_vYaYS20w3I-desktop.webp",
+    "id": "cmk2cpeba0009vn966jcrpf3u",
+    "name": "WArLC_yvU33MjoqEnQeQ1-desktop.webp",
     "realName": "instagram.png",
     "path": "uploads/images",
     "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/hkJYAeTNWK_vYaYS20w3I-desktop.webp",
+    "link": "/api/fileStorage/findUnique/WArLC_yvU33MjoqEnQeQ1-desktop.webp",
     "category": "image"
   },
   {
-    "id": "cmff3q12g0005vn6h5ojov2qa",
-    "name": "6XEoZ9SFu59COpil03Gya-desktop.webp",
+    "id": "cmk2crcl1000cvn96j8pmgmo5",
+    "name": "D3RPbNiaNSCjacLjeR_qO-desktop.webp",
     "realName": "tiktok.png",
     "path": "uploads/images",
     "mimeType": "image/webp",
-    "link": "/api/fileStorage/findUnique/6XEoZ9SFu59COpil03Gya-desktop.webp",
+    "link": "/api/fileStorage/findUnique/D3RPbNiaNSCjacLjeR_qO-desktop.webp",
     "category": "image"
   }
 ]

prisma/data/landing-page/profile/mediaSosial.json

@@ -3,24 +3,24 @@
     "id": "cmds9023u0008vnbe3oxmhwyf",
     "name": "Desa Darmasaba",
     "iconUrl": "https://www.youtube.com/channel/UCtPw9WOQO7d2HIKzKgel4Xg",
-    "imageId": "cmff3joae0000vn6h8sgs0ilg"
+    "imageId": "cmk2cgqgm0003vn96jun52pik"
   },
   {
     "id": "cmds90oul000bvnbe2bqkptoi",
     "name": "Pemerintah Desa Darmasaba",
     "iconUrl": "https://www.facebook.com/DarmasabaDesaku",
-    "imageId": "cmff3mtat0002vn6hs8vyyhdd"
+    "imageId": "cmk2cmr000006vn96qepq6gvl"
   },
   {
     "id": "cmds91i4e000evnbe8gtf1gub",
     "name": "ddarmasaba",
     "iconUrl": "https://www.instagram.com/ddarmasaba/",
-    "imageId": "cmff3oouh0004vn6hd94brzv9"
+    "imageId": "cmk2cpeba0009vn966jcrpf3u"
   },
   {
     "id": "cmds92de5000hvnbemlu6sq5x",
     "name": "desa.darmasaba",
     "iconUrl": "https://www.tiktok.com/@desa.darmasaba?is_from_webapp=1&sender_device=pc",
-    "imageId": "cmff3q12g0005vn6h5ojov2qa"
+    "imageId": "cmk2crcl1000cvn96j8pmgmo5"
   }
 ]

prisma/data/landing-page/profile/profile.json

@@ -3,6 +3,6 @@
     "id": "edit",
     "name": "I.B Surya Prabhawa Manuaba, S.H., M.H.",
     "position": "Perbekel Darmasaba periode 2021-2027",
-    "imageId": "cmff2w5ly000avn0telhct71k"
+    "imageId": "cmk2a2dl6001nvngck1n0k8qc"
   }
 ]

prisma/data/landing-page/profile/programInovasi.json

@@ -4,48 +4,55 @@
     "name": "Dmangan",
     "description": "Darmasaba Aman Pangan",
     "link": "https://darmasaba.desa.id/berita/61452-kader-d-mangan-berhasil-meraih-prestasi-dalam-ajang-lomba-banjar-bali-quis-bbq-tahun-2024",
-    "imageId" : "cmff0z34f0005vn0tjtvq519p"
+    "imageId" : "cmk20nyen0002vnevd0hfr3u8"
   },
   {
     "id": "cmdr76nqk0008vn5rdddvcxnr",
     "name": "Bicara Darmasaba",
     "description": "Bicara Darmasaba",
     "link": "https://darmasaba.desa.id/berita/42506-bicara-darmasaba",
-    "imageId" : "cmff0tnf00003vn0t3kgzi0u0"
+    "imageId" : "cmk20nqmu0001vnevfte29rk0"
   },
   {
     "id": "cmdr77vbw000bvn5rvpmoq31s",
     "name": "Bares",
     "description": "Darmasaba Recycling Stock/Exchange",
     "link": "http://darmasaba.desa.id/berita/56722-bares",
-    "imageId" : "cmff0rr4z0002vn0twp333m2"
+    "imageId" : "cmk20mg320000vnevxy0k73fr"
   },
   {
     "id": "cmdr7bxtp000evn5rmy85wihx",
     "name": "Sajjana Dharma Raksaka",
     "description": "Sajjana Dharma Raksaka",
     "link": "https://ppid.badungkab.go.id/storage/dokumen/5RS9dldGkrgzMQq6bKdZsqsVRHI8gffWv4PGfb3r.pdf",
-    "imageId" : "cmff10cwq0009vn0tse8dzu3j"
+    "imageId" : "cmk20pf3d0006vnev3mkoqpyy"
   },
   {
     "id": "cmdr7dlnk000hvn5r9lur3z35",
     "name": "PDKT",
     "description": "Perangkat Desa Kuat Teknologi",
     "link": "https://darmasaba.desa.id/berita/53752-p-d-k-t",
-    "imageId" : "cmff1013m0008vn0th7t0d64d"
+    "imageId" : "cmk20omzq0005vnevgi6f4edu"
   },
   {
     "id": "cmdr7ftob000mvn5rfhgdtg8v",
     "name": "GM",
     "description": "Galah Melah",
     "link": "https://darmasaba.desa.id/berita/52880-galah-melah",
-    "imageId" : "cmff38cyq000bvn0t9f01cz3f"
+    "imageId" : "cmk20o7mf0003vnevohrksm1d"
   },
   {
     "id": "cmdr7glue000pvn5r6onzslju",
     "name": "Inovasi Desa Darmasaba",
     "description": "Inovasi Desa Darmasaba",
     "link": "https://darmasaba.desa.id/produk-lokal-desa",
-    "imageId" : "cmff0zqvd0007vn0tv6o5hjcq"
+    "imageId" : "cmk20of8m0004vnev9ujy5o0l"
+  },
+  {
+    "id": "cmk228ust0009vnev5p8i377o",
+    "name": "Davest",
+    "description": "<p>DAVEST (Darmasaba Investment) merupakan program inovasi Desa Darmasaba yang bertujuan mempromosikan potensi investasi desa secara terintegrasi melalui media digital dan pendampingan langsung. Program ini menjadi sarana penghubung antara pemerintah desa, pelaku usaha, dan investor dalam rangka mendorong pertumbuhan ekonomi desa yang berkelanjutan.</p><p>DAVEST menyajikan informasi potensi unggulan desa seperti sektor UMKM, pariwisata, ekonomi kreatif, serta peluang investasi berbasis sumber daya lokal dengan prinsip transparansi dan kemudahan akses informasi.</p><p>Di tahun 2024 ini Davest (Darmasaba Village Festival) akan diadakan lagi, dengan berbagai kegiatan pemerdayaan, edukasi dan hiburan yang tentunya lebih waahhhh dari dua tahun lalu. Untuk memantapkan hal tersebut, Pemdes Darmasaba melakukan rapat koordinasi (rakor) Davest 2024 yang dipimpin langsung oleh Perbekel Darmasaba I. B. Surya Prabhawa Manuaba, S.H.,M.H. pada hari Senin (22/1/2024) bertempat di Ruang Shanti Gosana Kantor Perbekel Darmasaba.</p><hr><h3>Tujuan Program</h3><ul><li><p>Meningkatkan daya tarik investasi di Desa Darmasaba</p></li><li><p>Mempromosikan potensi unggulan desa secara profesional</p></li><li><p>Mendorong pertumbuhan ekonomi dan penciptaan lapangan kerja</p></li><li><p>Mendukung visi Desa Darmasaba sebagai desa inovatif dan berdaya saing</p></li></ul><hr><h3>Sasaran Program</h3><ul><li><p>Calon investor lokal dan regional</p></li><li><p>Pelaku UMKM dan kelompok usaha desa</p></li><li><p>Masyarakat Desa Darmasaba</p></li></ul><hr><h3>Bentuk Inovasi</h3><ul><li><p>Inovasi ekonomi desa</p></li><li><p>Inovasi digital</p></li><li><p>Inovasi tata kelola pelayanan investasi</p></li></ul><hr><h3>Ruang Lingkup Kegiatan</h3><ul><li><p>Penyusunan profil potensi investasi desa</p></li><li><p>Digitalisasi informasi investasi desa</p></li><li><p>Promosi peluang investasi melalui media online</p></li><li><p>Fasilitasi komunikasi antara investor dan desa</p></li><li><p>Pendampingan awal investasi berbasis desa</p></li></ul>",
+    "link": "https://darmasaba.desa.id/berita/55862-rakor-davest-2024",
+    "imageId" : "cmk228urs0007vnevi5b66bqn"
   }
 ]

prisma/data/resolveImageId.ts

@@ -0,0 +1,11 @@
+import safeImageId from "./safeImageId";
+
+export default async function resolveImageIdForSeed(
+  existingImageId: string | null | undefined,
+  seedImageId: string | null | undefined
+) {
+  if (existingImageId) return existingImageId;
+  
+  // ✅ Skip validasi saat seed
+  return await safeImageId(seedImageId, true);
+}

prisma/data/safeImageId.ts

@@ -0,0 +1,24 @@
+import prisma from "@/lib/prisma";
+
+export default async function safeImageId(
+  imageId?: string | null,
+  skipValidation = false // ✅ tambah param
+) {
+  if (!imageId) return null;
+  
+  if (skipValidation) {
+    console.log(`⚠️ Skipping validation for ${imageId} (seed mode)`);
+    return imageId; // langsung return tanpa cek DB
+  }
+
+  const exists = await prisma.fileStorage.findUnique({
+    where: { id: imageId },
+  });
+
+  if (!exists) {
+    console.warn(`⚠️ imageId ${imageId} not found in FileStorage`);
+    return null;
+  }
+
+  return imageId;
+}

prisma/migrations/20260106072549_nico_6_jan2025/migration.sql

@@ -0,0 +1,142 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `dokterdanTenagaMedisId` on the `FasilitasKesehatan` table. All the data in the column will be lost.
+  - You are about to drop the column `tarifDanLayananId` on the `FasilitasKesehatan` table. All the data in the column will be lost.
+  - You are about to drop the `User` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `UserSession` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `permissions` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "FasilitasKesehatan" DROP CONSTRAINT "FasilitasKesehatan_dokterdanTenagaMedisId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "FasilitasKesehatan" DROP CONSTRAINT "FasilitasKesehatan_tarifDanLayananId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "User" DROP CONSTRAINT "User_roleId_fkey";
+
+-- DropForeignKey
+ALTER TABLE "UserSession" DROP CONSTRAINT "UserSession_userId_fkey";
+
+-- AlterTable
+ALTER TABLE "DokterdanTenagaMedis" ADD COLUMN     "jadwalLibur" TEXT,
+ADD COLUMN     "jamBukaLibur" TEXT,
+ADD COLUMN     "jamBukaOperasional" TEXT,
+ADD COLUMN     "jamTutupLibur" TEXT,
+ADD COLUMN     "jamTutupOperasional" TEXT;
+
+-- AlterTable
+ALTER TABLE "FasilitasKesehatan" DROP COLUMN "dokterdanTenagaMedisId",
+DROP COLUMN "tarifDanLayananId";
+
+-- AlterTable
+ALTER TABLE "MediaSosial" ADD COLUMN     "icon" TEXT;
+
+-- AlterTable
+ALTER TABLE "roles" ALTER COLUMN "permissions" DROP NOT NULL;
+
+-- DropTable
+DROP TABLE "User";
+
+-- DropTable
+DROP TABLE "UserSession";
+
+-- DropTable
+DROP TABLE "permissions";
+
+-- CreateTable
+CREATE TABLE "users" (
+    "id" TEXT NOT NULL,
+    "username" TEXT NOT NULL,
+    "nomor" TEXT NOT NULL,
+    "roleId" TEXT NOT NULL DEFAULT '2',
+    "isActive" BOOLEAN NOT NULL DEFAULT false,
+    "sessionInvalid" BOOLEAN NOT NULL DEFAULT false,
+    "lastLogin" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "permissions" JSONB,
+
+    CONSTRAINT "users_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "user_sessions" (
+    "id" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expiresAt" TIMESTAMP(3) NOT NULL,
+    "active" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "userId" TEXT NOT NULL,
+
+    CONSTRAINT "user_sessions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "UserMenuAccess" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "menuId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "UserMenuAccess_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_Tarif" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_Tarif_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateTable
+CREATE TABLE "_Dokter" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL,
+
+    CONSTRAINT "_Dokter_AB_pkey" PRIMARY KEY ("A","B")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "users_nomor_key" ON "users"("nomor");
+
+-- CreateIndex
+CREATE INDEX "user_sessions_userId_idx" ON "user_sessions"("userId");
+
+-- CreateIndex
+CREATE INDEX "user_sessions_token_idx" ON "user_sessions"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserMenuAccess_userId_menuId_key" ON "UserMenuAccess"("userId", "menuId");
+
+-- CreateIndex
+CREATE INDEX "_Tarif_B_index" ON "_Tarif"("B");
+
+-- CreateIndex
+CREATE INDEX "_Dokter_B_index" ON "_Dokter"("B");
+
+-- AddForeignKey
+ALTER TABLE "users" ADD CONSTRAINT "users_roleId_fkey" FOREIGN KEY ("roleId") REFERENCES "roles"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "user_sessions" ADD CONSTRAINT "user_sessions_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserMenuAccess" ADD CONSTRAINT "UserMenuAccess_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_Tarif" ADD CONSTRAINT "_Tarif_A_fkey" FOREIGN KEY ("A") REFERENCES "FasilitasKesehatan"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_Tarif" ADD CONSTRAINT "_Tarif_B_fkey" FOREIGN KEY ("B") REFERENCES "TarifDanLayanan"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_Dokter" ADD CONSTRAINT "_Dokter_A_fkey" FOREIGN KEY ("A") REFERENCES "DokterdanTenagaMedis"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_Dokter" ADD CONSTRAINT "_Dokter_B_fkey" FOREIGN KEY ("B") REFERENCES "FasilitasKesehatan"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/safeseedUnique.ts

@@ -1,30 +1,63 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-// helpers/safeSeedUnique.ts
+import prisma from "@/lib/prisma";
 import { PrismaClient } from "@prisma/client";
 
-const prisma = new PrismaClient();
+type SafeSeedOptions = {
+  skipUpdate?: boolean;
+};
 
-/**
- * Helper generic buat seed dengan upsert aman
- */
+// prisma/safeseedUnique.ts
 export async function safeSeedUnique<T extends keyof PrismaClient>(
   model: T,
   where: Record<string, any>,
-  data: Record<string, any>
+  data: Record<string, any>,
+  options: SafeSeedOptions = {}
 ) {
-  const m = prisma[model];
-
-  if (!m) throw new Error(`Model ${String(model)} tidak ditemukan di PrismaClient`);
+  const m = prisma[model] as any;
+  if (!m) throw new Error(`Model ${String(model)} tidak ditemukan`);
 
   try {
-    // @ts-expect-error upsert dynamic
-    await m.upsert({
+    // Pastikan `where` berisi field yang benar-benar unique (misal: `id`)
+    const result = await m.upsert({
       where,
-      update: data,
-      create: { ...where, ...data },
+      update: options.skipUpdate ? {} : data,
+      create: data, // ✅ Jangan duplikasi `where` ke `create`
     });
-    console.log(`✅ Seeded ${String(model)} -> ${JSON.stringify(where)}`);
+    console.log(`✅ Seed ${String(model)}:`, where);
+    return result;
   } catch (err) {
-    console.error(`❌ Gagal seed ${String(model)} -> ${JSON.stringify(where)}`, err);
+    console.error(`❌ Gagal seed ${String(model)}:`, where, err);
+    throw err; // ✅ Rethrow agar seeding berhenti jika kritis
   }
 }
+
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// import { PrismaClient } from "@prisma/client";
+
+// const prisma = new PrismaClient();
+
+// type SafeSeedOptions = {
+//   skipUpdate?: boolean;
+// };
+
+// export async function safeSeedUnique<T extends keyof PrismaClient>(
+//   model: T,
+//   where: Record<string, any>,
+//   data: Record<string, any>,
+//   options: SafeSeedOptions = {}
+// ) {
+//   const m = prisma[model] as any;
+//   if (!m) throw new Error(`Model ${String(model)} tidak ditemukan`);
+
+//   try {
+//     await m.upsert({
+//       where,
+//       update: options.skipUpdate ? {} : data,
+//       create: { ...where, ...data },
+//     });
+
+//     console.log(`✅ Seed ${String(model)}:`, where);
+//   } catch (err) {
+//     console.error(`❌ Gagal seed ${String(model)}:`, where, err);
+//   }
+// }

prisma/seed.ts

@@ -60,8 +60,37 @@ import jenjangPendidikan from "./data/pendidikan/info-sekolah/jenjang-pendidikan
 import seedAssets from "./seed_assets";
 import users from "./data/user/users.json";
 import { safeSeedUnique } from "./safeseedUnique";
+import safeImageId from "./data/safeImageId";
+import resolveImageIdForSeed from "./data/resolveImageId";
 
 (async () => {
+  // seed assets
+  await prisma.fileStorage.deleteMany();
+  console.log("🗑️ Cleared existing fileStorage records");
+  await seedAssets();
+
+  // // =========== FILE STORAGE ===========
+  console.log("🔄 Seeding file storage...");
+  for (const f of fileStorage) {
+    await safeSeedUnique(
+      "fileStorage",
+      { name: f.name },
+      {
+        id: f.id,
+        name: f.name,
+        realName: f.realName,
+        path: f.path,
+        mimeType: f.mimeType,
+        link: f.link,
+        category: f.category,
+        deletedAt: null,
+        isActive: true,
+      }
+    );
+  }
+
+  console.log("✅ File storage seeded");
+
   console.log("🔄 Seeding roles...");
 
   for (const r of roles) {
@@ -131,112 +160,119 @@ import { safeSeedUnique } from "./safeseedUnique";
     }
   }
   console.log("✅ Users seeding completed");
-
-  // =========== FILE STORAGE ===========
-  console.log("🔄 Seeding file storage...");
-  for (const f of fileStorage) {
-    try {
-      await prisma.fileStorage.upsert({
-        where: { id: f.id },
-        update: {
-          name: f.name,
-          realName: f.realName,
-          path: f.path,
-          mimeType: f.mimeType,
-          link: f.link,
-          category: f.category,
-        },
-        create: {
-          id: f.id,
-          name: f.name,
-          realName: f.realName,
-          path: f.path,
-          mimeType: f.mimeType,
-          link: f.link,
-          category: f.category,
-        },
-      });
-    } catch (error: any) {
-      console.error(`❌ Failed to seed file storage ${f.name}:`, error.message);
-    }
-  }
-  console.log("✅ File storage seeded");
   // =========== LANDING PAGE ===========
   // =========== SUBMENU PROFILE ===========
   // =========== PROFILE PEJABAT DESA ===========
+  // In your seed.ts file, update the PejabatDesa seeding section to:
+  console.log("🔄 Seeding Pejabat Desa...");
   for (const p of profilePejabatDesa) {
-    await prisma.pejabatDesa.upsert({
-      where: { id: p.id },
-      update: {
-        name: p.name,
-        position: p.position,
-        imageId: p.imageId,
-      },
-      create: {
-        id: p.id,
-        name: p.name,
-        position: p.position,
-        imageId: p.imageId,
-      },
-    });
+    try {
+      // First, verify the image exists
+      if (p.imageId) {
+        const imageExists = await prisma.fileStorage.findUnique({
+          where: { id: p.imageId },
+        });
+
+        if (!imageExists) {
+          console.warn(
+            `⚠️ Image not found for PejabatDesa ${p.name}, skipping...`
+          );
+          continue;
+        }
+      }
+
+      await safeSeedUnique(
+        "pejabatDesa",
+        { id: p.id },
+        {
+          id: p.id,
+          name: p.name,
+          position: p.position,
+          imageId: p.imageId,
+        }
+      );
+      console.log(`✅ Seeded Pejabat Desa -> ${p.name}`);
+    } catch (error: any) {
+      console.error(`❌ Failed to seed Pejabat Desa ${p.name}:`, error.message);
+    }
   }
-  console.log(
-    "✅ profilePejabatDesa seeded without imageId (editable later via UI)"
-  );
+  console.log("✅ Pejabat Desa seeding completed");
 
   // =========== PROGRAM INOVASI ===========
-  for (const p of programInovasi) {
-    let imageId: string | null = null;
+  // Add this section after the other seed operations in seed.ts
+  console.log("🔄 Seeding Program Inovasi...");
 
-    if (p.imageId) {
-      const imageExists = await prisma.fileStorage.findUnique({
+  for (const p of programInovasi) {
+    const existing = await prisma.programInovasi.findUnique({
+      where: { id: p.id },
+      select: { imageId: true },
+    });
+
+    let imageId = existing?.imageId; // Pertahankan existing
+
+    // Kalau belum ada imageId, cari berdasarkan name/realName
+    if (!imageId && p.imageId) {
+      // ✅ Cari langsung berdasarkan ID yang ada di p.imageId
+      const fileRecord = await prisma.fileStorage.findUnique({
         where: { id: p.imageId },
+        select: { id: true, name: true },
       });
 
-      if (imageExists) {
-        imageId = p.imageId;
-      } else {
-        console.warn(
-          `⚠️ imageId ${p.imageId} tidak ditemukan untuk ProgramInovasi ${p.name}`
+      if (fileRecord) {
+        imageId = fileRecord.id;
+        console.log(
+          `✅ Found file by ID: ${fileRecord.name} (${fileRecord.id})`
         );
+      } else {
+        console.warn(`⚠️ File with ID ${p.imageId} not found for ${p.name}`);
+        imageId = null;
       }
     }
+
     await prisma.programInovasi.upsert({
       where: { id: p.id },
       update: {
         name: p.name,
         description: p.description,
         link: p.link,
-        imageId: p.imageId,
+        imageId,
       },
       create: {
         id: p.id,
         name: p.name,
         description: p.description,
         link: p.link,
-        imageId: p.imageId,
+        imageId,
       },
     });
   }
-  console.log("program inovasi success ...");
 
   // =========== MEDIA SOSIAL ===========
-  for (const p of mediaSosial) {
+  for (const m of mediaSosial) {
+    const existing = await prisma.mediaSosial.findUnique({
+      where: { id: m.id },
+      select: { imageId: true },
+    });
+
+    const imageId = await resolveImageIdForSeed(existing?.imageId, m.imageId);
+
     await prisma.mediaSosial.upsert({
-      where: { id: p.id },
+      where: { id: m.id },
       update: {
-        name: p.name,
-        iconUrl: p.iconUrl,
-        imageId: p.imageId,
+        name: m.name,
+        iconUrl: m.iconUrl,
+        // ⛔ JANGAN overwrite imageId sembarangan
+        imageId,
       },
       create: {
-        id: p.id,
-        name: p.name,
-        iconUrl: p.iconUrl,
-        imageId: p.imageId,
+        id: m.id,
+        name: m.name,
+        iconUrl: m.iconUrl,
+        imageId,
       },
     });
   }
+
   console.log("media sosial success ...");
 
   // =========== SUBMENU DESA ANTI KORUPSI ===========
@@ -1245,9 +1281,6 @@ import { safeSeedUnique } from "./safeseedUnique";
   }
 
   console.log("✅ Jenjang Pendidikan seeded successfully");
-
-  // seed assets
-  await seedAssets();
 })()
   .then(() => prisma.$disconnect())
   .catch((e) => {

prisma/seed_assets.ts

@@ -1,10 +1,11 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 // prisma/seedAssets.ts
+import prisma from "@/lib/prisma";
+import AdmZip from "adm-zip";
 import fs from "fs/promises";
 import path from "path";
 import sharp from "sharp";
-import fetch from "node-fetch";
-import AdmZip from "adm-zip";
-import prisma from "@/lib/prisma";
+import fetchWithRetry from "./data/fetchWithRetry";
 
 const UPLOADS_DIR =
   process.env.WIBU_UPLOAD_DIR || path.join(process.cwd(), "uploads");
@@ -18,7 +19,10 @@ function detectCategory(filename: string): "image" | "document" | "other" {
 }
 
 // --- Helper: recursive walk dir ---
-async function walkDir(dir: string, fileList: string[] = []): Promise<string[]> {
+async function walkDir(
+  dir: string,
+  fileList: string[] = []
+): Promise<string[]> {
   const entries = await fs.readdir(dir, { withFileTypes: true });
 
   for (const entry of entries) {
@@ -41,18 +45,45 @@ export default async function seedAssets() {
 
   // 1. Download zip
   const url =
-    "https://cld-dkr-makuro-seafile.wibudev.com/f/ffd5a548a04f47939474/?dl=1";
-  const res = await fetch(url);
-  if (!res.ok) throw new Error(`Gagal download assets: ${res.statusText}`);
+    "https://cld-dkr-makuro-seafile.wibudev.com/f/90dd12c9713e42379fcd/?dl=1";
+  const res = await fetchWithRetry(url, 3, 20000);
+
+  // Validasi content-type
+  const contentType = res.headers.get("content-type");
+  if (!contentType?.includes("zip")) {
+    throw new Error(`Invalid content-type (${contentType}). Expected ZIP file`);
+  }
+
   const buffer = Buffer.from(await res.arrayBuffer());
 
+  // Validasi ukuran file
+  if (buffer.length < 100) {
+    throw new Error("Downloaded ZIP is empty or corrupted");
+  }
+
+  // Validasi signature ZIP ("PK")
+  if (buffer.toString("utf8", 0, 2) !== "PK") {
+    throw new Error("Invalid ZIP signature (PK not found)");
+  }
+
   // 2. Extract zip ke folder tmp
   const extractDir = path.join(process.cwd(), "tmp_assets");
   await fs.rm(extractDir, { recursive: true, force: true });
   await fs.mkdir(extractDir, { recursive: true });
 
-  const zip = new AdmZip(buffer);
-  zip.extractAllTo(extractDir, true);
+  let zip: AdmZip;
+
+  try {
+    zip = new AdmZip(buffer);
+  } catch (err) {
+    throw new Error("Failed to parse ZIP file (corrupted or invalid)");
+  }
+
+  try {
+    zip.extractAllTo(extractDir, true);
+  } catch (err) {
+    throw new Error("Failed to extract ZIP contents");
+  }
 
   // 3. Cari semua file valid (recursive)
   const files = await walkDir(extractDir);
@@ -84,18 +115,41 @@ export default async function seedAssets() {
       await fs.copyFile(filePath, targetPath);
     }
 
-    // 5. Simpan ke DB
-    await prisma.fileStorage.create({
-      data: {
-        name: finalName,
-        realName: entryName,
-        path: targetPath,
-        mimeType,
-        link: `/uploads/${category}/${finalName}`,
-        category,
-      },
+    const existing = await prisma.fileStorage.findUnique({
+      where: { name: finalName },
     });
 
+    if (existing) {
+      // Restore kalau soft deleted
+      await prisma.fileStorage.update({
+        where: { name: finalName },
+        data: {
+          path: targetPath,
+          realName: entryName,
+          mimeType,
+          link: `/uploads/${category}/${finalName}`,
+          category,
+          deletedAt: null,
+          isActive: true,
+        },
+      });
+
+      console.log(`♻️ restored: ${category}/${finalName}`);
+    } else {
+      await prisma.fileStorage.create({
+        data: {
+          name: finalName,
+          realName: entryName,
+          path: targetPath,
+          mimeType,
+          link: `/uploads/${category}/${finalName}`,
+          category,
+        },
+      });
+
+      console.log(`📂 created: ${category}/${finalName}`);
+    }
+
     console.log(`📂 saved: ${category}/${finalName}`);
   }
 
@@ -103,6 +157,8 @@ export default async function seedAssets() {
   await fs.rm(extractDir, { recursive: true, force: true });
 
   console.log("✅ Selesai seed assets!");
+  console.log("DB URL (asset):", process.env.DATABASE_URL);
+
 }
 
 // --- Auto run kalau dipanggil langsung ---

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

@@ -0,0 +1,36 @@
+// components/modal/ModalKonfirmasiHapus.tsx
+import colors from "@/con/colors"
+import { Modal, Text, Button, Flex } from "@mantine/core"
+
+interface ModalKonfirmasiNonAktifProps {
+  opened: boolean
+  loading?: boolean
+  onClose: () => void
+  onConfirm: () => void
+  text: string
+}
+
+export function ModalKonfirmasiNonAktif({
+  opened,
+  loading = false,
+  onClose,
+  onConfirm,
+  text,
+}: ModalKonfirmasiNonAktifProps) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={<Text fw={"bold"} fz={"xl"}>Konfirmasi Non Aktif</Text>}
+      centered
+    >
+      <Text mb="md">{text}</Text>
+      <Flex justify="flex-end" gap="sm">
+        <Button style={{color: "white"}} bg={colors['blue-button']} variant="default" onClick={onClose}>Batal</Button>
+        <Button color="red" onClick={onConfirm} loading={loading}>
+          Yakin Non Aktif
+        </Button>
+      </Flex>
+    </Modal>
+  )
+}

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

@@ -68,7 +68,7 @@ const category = proxy({
         const res = await ApiFetch.api.desa.kategoripengumuman[
           "findMany"
         ].get({
-          query: { page, limit },
+          query: { page, limit, search },
         });
   
         if (res.status === 200 && res.data?.success) {

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

@@ -65,7 +65,7 @@ const potensiDesa = proxy({
         const res = await ApiFetch.api.desa.potensi[
           "find-many"
         ].get({
-          query: { page, limit },
+          query: { page, limit, search },
         });
   
         if (res.status === 200 && res.data?.success) {

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

@@ -312,15 +312,15 @@ const kategoriProduk = proxy({
     page: 1,
     totalPages: 1,
     loading: false,
-    search2: "",
-   load: async (page = 1, limit = 10, search2 = "") => {
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
       kategoriProduk.findMany.loading = true; // ✅ Akses langsung via nama path
       kategoriProduk.findMany.page = page;
-      kategoriProduk.findMany.search2 = search2;
+      kategoriProduk.findMany.search = search;
   
       try {
         const query: any = { page, limit };
-        if (search2) query.search2 = search2;
+        if (search) query.search = search;
     
         const res = await ApiFetch.api.ekonomi.kategoriproduk["find-many"].get({ query });
     

src/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi.ts

@@ -194,7 +194,7 @@ const posisiOrganisasi = proxy({
 
       try {
         this.loading = true;
-        const res = await ApiFetch.api.ekonomi['struktur-organisasi']['posisi-organisasi']['create'].post(this.form);
+        const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["posisi-organisasi"]["create"].post(this.form);
         if (res.status === 200) {
           toast.success("Berhasil menambahkan posisi organisasi");
           posisiOrganisasi.findMany.load();

src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan.ts

@@ -60,13 +60,18 @@ const responden = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
       // Change to arrow function
       responden.findMany.loading = true; // Use the full path to access the property
       responden.findMany.page = page;
+      responden.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        
         const res = await ApiFetch.api.landingpage.responden["findMany"].get({
-          query: { page, limit },
+          query,
         });
 
         if (res.status === 200 && res.data?.success) {

src/app/admin/(dashboard)/_state/pendidikan/data-pendidikan.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -65,13 +66,46 @@ const dataPendidikan = proxy({
           select: { id: true; name: true; jumlah: true };
         }>[]
       | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.pendidikan.datapendidikan[
-        "findMany"
-      ].get();
-      if (res.status === 200) {
-        dataPendidikan.findMany.data = res.data?.data ?? [];
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      dataPendidikan.findMany.loading = true; // Use the full path to access the property
+      dataPendidikan.findMany.page = page;
+      dataPendidikan.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.pendidikan.datapendidikan[
+          "findMany"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          dataPendidikan.findMany.data = res.data.data || [];
+          dataPendidikan.findMany.total = res.data.total || 0;
+          dataPendidikan.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load data pendidikan:",
+            res.data?.message
+          );
+          dataPendidikan.findMany.data = [];
+          dataPendidikan.findMany.total = 0;
+          dataPendidikan.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading data pendidikan:", error);
+        dataPendidikan.findMany.data = [];
+        dataPendidikan.findMany.total = 0;
+        dataPendidikan.findMany.totalPages = 1;
+      } finally {
+        dataPendidikan.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/user/user-state.ts

@@ -220,11 +220,34 @@ const roleState = proxy({
         isActive: true;
       };
     }>[],
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.role["findMany"].get();
-      if (res.status === 200) {
-        roleState.findMany.data = res.data?.data ?? [];
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      roleState.findMany.loading = true; // ✅ Akses langsung via nama path
+      roleState.findMany.page = page;
+      roleState.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.role["findMany"].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          roleState.findMany.data = res.data.data ?? [];
+          roleState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          roleState.findMany.data = [];
+          roleState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch role paginated:", err);
+        roleState.findMany.data = [];
+        roleState.findMany.totalPages = 1;
+      } finally {
+        roleState.findMany.loading = false;
       }
     },
   },

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

@@ -73,17 +73,17 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
             >
                 {/* ✅ Scroll horizontal wrapper */}
                 <Box visibleFrom='md' pb={10}>
-                    <ScrollArea type="auto" offsetScrollbars>
+                    <ScrollArea type="auto" offsetScrollbars w="100%">
                         <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
+                                width: "max-content", // ⬅️ kunci
+                                maxWidth: "100%",   
                             }}
                         >
                             {tabs.map((tab, i) => (

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

@@ -86,7 +86,7 @@ function ListKategoriBerita({ search }: { search: string }) {
     <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={2} lh={1.2}>
+          <Title order={4} lh={1.2}>
             Daftar Kategori Berita
           </Title>
           <Button

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

@@ -1,8 +1,30 @@
 'use client'
 import React from 'react';
 import LayoutTabsBerita from './_com/layoutTabs';
+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 (
     <LayoutTabsBerita>
       {children}

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

@@ -67,8 +67,7 @@ function ListBerita({ search }: { search: string }) {
     <Box py="md">
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={2} visibleFrom="md">Daftar Berita</Title>
-          <Title order={3} hiddenFrom="md">Daftar Berita</Title>
+          <Title order={4}>Daftar Berita</Title>
           <Button
             leftSection={<IconCircleDashedPlus size={18} />}
             color="blue"
@@ -140,7 +139,7 @@ function ListBerita({ search }: { search: string }) {
           {filteredData.length > 0 ? (
             filteredData.map((item) => (
               <Paper key={item.id} withBorder p="md" radius="md">
-                <Stack gap={4}>
+                <Stack gap={"xs"}>
                   <Text fz="sm" fw={600} lh={1.4} c="dimmed">
                     Judul
                   </Text>

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

@@ -73,7 +73,7 @@ function ListFoto({ search }: { search: string }) {
     <Box py={{ base: 'md', md: 'lg' }}>
       <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={2} lh={1.2}>Daftar Foto</Title>
+          <Title order={4} lh={1.2}>Daftar Foto</Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"

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

@@ -1,7 +1,29 @@
 'use client'
+import { usePathname } from "next/navigation";
 import LayoutTabsGallery from "./lib/layoutTabs"
+import { Box } from "@mantine/core";
 
 export default 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 (
         <LayoutTabsGallery>
             {children}

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

@@ -73,7 +73,7 @@ function ListVideo({ search }: { search: string }) {
     <Box py={20}>
       <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
         <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={2} lh={1.2}>
+          <Title order={4} lh={1.2}>
             Daftar Video
           </Title>
           <Button
@@ -88,63 +88,65 @@ function ListVideo({ search }: { search: string }) {
 
         {/* Desktop Table */}
         <Box visibleFrom="md">
-          <Table highlightOnHover w="100%">
-            <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>
-                      <Text fz="md" fw={500} lh={1.45} truncate="end" lineClamp={1}>
-                        {item.name}
-                      </Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text fz="sm" c="dimmed" lh={1.45}>
-                        {new Date(item.createdAt).toLocaleDateString('id-ID', {
-                          day: 'numeric',
-                          month: 'long',
-                          year: 'numeric',
-                        })}
-                      </Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text fz="sm" lh={1.45} truncate="end" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                    </TableTd>
-                    <TableTd>
-                      <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>
+          <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>
                     </TableTd>
                   </TableTr>
-                ))
-              ) : (
-                <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>
+                )}
+              </TableTbody>
+            </Table>
+          </Box>
         </Box>
 
         {/* Mobile Cards */}
@@ -152,7 +154,7 @@ function ListVideo({ search }: { search: string }) {
           {filteredData.length > 0 ? (
             filteredData.map((item) => (
               <Paper key={item.id} p="sm" withBorder radius="sm">
-                <Stack gap={4}>
+                <Stack gap={"xs"}>
                   <Box>
                     <Text fz="xs" fw={600} lh={1.4}>Judul Video</Text>
                     <Text fz="sm" fw={500} lh={1.45}>

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

@@ -142,7 +142,7 @@ function ListAjukanPermohonan({ search }: { search: string }) {
             {data.length > 0 ? (
               data.map((item) => (
                 <Paper key={item.id} withBorder p="md" radius="md" shadow="xs">
-                  <Stack gap={4}>
+                  <Stack gap={'xs'}>
                     <Box>
                       <Text fz="sm" fw={600} lh={1.4}>Nama</Text>
                       <Text fz="sm" fw={500} lh={1.5}>{item.nama}</Text>

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

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

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

@@ -5,8 +5,7 @@ import {
   Button,
   Center,
   Divider,
-  Grid,
-  GridCol,
+  Group,
   Paper,
   Skeleton,
   Stack,
@@ -43,32 +42,29 @@ function PelayananPendudukNonPermanent() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title
-              order={3}
-              lh={1.2}
-              c={colors['blue-button']}
-            >
-              Preview Pelayanan Penduduk Non Permanen
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              c="green"
-              variant="light"
-              leftSection={<IconEdit size={18} stroke={2} />}
-              radius="md"
-              onClick={() =>
-                router.push(
-                  `/admin/desa/layanan/pelayanan_penduduk_non_permanent/${data.id}`
-                )
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify='space-between' align="center">
+
+          <Title
+            order={3}
+            lh={1.2}
+            c={colors['blue-button']}
+          >
+            Preview Pelayanan Penduduk Non Permanen
+          </Title>
+          <Button
+            c="green"
+            variant="light"
+            leftSection={<IconEdit size={18} stroke={2} />}
+            radius="md"
+            onClick={() =>
+              router.push(
+                `/admin/desa/layanan/pelayanan_penduduk_non_permanent/${data.id}`
+              )
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Content */}
         <Paper p="xl" bg={'white'} withBorder radius="md" shadow="xs">

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

@@ -6,8 +6,6 @@ import {
   Button,
   Center,
   Divider,
-  Grid,
-  GridCol,
   Group,
   Paper,
   Skeleton,
@@ -76,28 +74,24 @@ function PerizinanBerusaha() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']} lh={1.2}>
-              Preview Pelayanan Perizinan Berusaha
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              c="green"
-              variant="light"
-              leftSection={<IconEdit size={18} stroke={2} />}
-              radius="md"
-              onClick={() =>
-                router.push(
-                  `/admin/desa/layanan/pelayanan_perizinan_berusaha/${data.id}`
-                )
-              }
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify='space-between' align="center">
+          <Title order={3} c={colors['blue-button']} lh={1.2}>
+            Preview Pelayanan Perizinan Berusaha
+          </Title>
+          <Button
+            c="green"
+            variant="light"
+            leftSection={<IconEdit size={18} stroke={2} />}
+            radius="md"
+            onClick={() =>
+              router.push(
+                `/admin/desa/layanan/pelayanan_perizinan_berusaha/${data.id}`
+              )
+            }
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Content */}
         <Paper p="xl" bg={'white'} withBorder radius="md" shadow="xs">
@@ -136,7 +130,7 @@ function PerizinanBerusaha() {
                 umum:
               </Text>
 
-               <Box p="xl" w="100%" visibleFrom='md'>
+              <Box p="xl" w="100%" visibleFrom='md'>
                 <Stepper
                   active={active}
                   onStepClick={setActive}
@@ -221,37 +215,37 @@ function PerizinanBerusaha() {
                 >
                   <StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
                     <Text fz="sm" lh={1.5}>
-                      
+
                     </Text>
                   </StepperStep>
                   <StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
                     <Text fz="sm" lh={1.5}>
-                      
+
                     </Text>
                   </StepperStep>
                   <StepperStep label="Langkah Ketiga" description="Pemilihan KBLI">
                     <Text fz="sm" lh={1.5}>
-                      
+
                     </Text>
                   </StepperStep>
                   <StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
                     <Text fz="sm" lh={1.5}>
-                      
+
                     </Text>
                   </StepperStep>
                   <StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
                     <Text fz="sm" lh={1.5}>
-                      
+
                     </Text>
                   </StepperStep>
                   <StepperStep label="Langkah Keenam" description="Penerimaan NIB">
                     <Text fz="sm" lh={1.5}>
-                      
+
                     </Text>
                   </StepperStep>
                   <StepperCompleted>
                     <Text fz="sm" lh={1.5}>
-                      
+
                     </Text>
                   </StepperCompleted>
                 </Stepper>

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

@@ -75,20 +75,21 @@ function DetailSuratKeterangan() {
 
           <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
             <Stack gap="sm">
-              <Box>
+              <Stack gap={"xs"}>
                 <Text fz="lg" fw="bold">
                   Nama
                 </Text>
                 <Text fz="md" c="dimmed">
                   {data?.name || '-'}
                 </Text>
-              </Box>
+              </Stack>
 
-              <Box>
+              <Stack gap={"xs"}>
                 <Text fz="lg" fw="bold">
                   Deskripsi
                 </Text>
-                <Text
+                <Box pl={10}>
+                  <Text
                   fz="md"
                   c="dimmed"
                   dangerouslySetInnerHTML={{
@@ -96,9 +97,10 @@ function DetailSuratKeterangan() {
                   }}
                   style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
-              </Box>
+                </Box>
+              </Stack>
 
-              <Box>
+              <Stack gap={"xs"}>
                 <Text fz="lg" fw="bold">
                 Gambar Konten Pelayanan
                 </Text>
@@ -117,7 +119,7 @@ function DetailSuratKeterangan() {
                     Tidak ada gambar
                   </Text>
                 )}
-              </Box>
+              </Stack>
 
               <Box>
                 <Text fz="lg" fw="bold">

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

@@ -82,7 +82,7 @@ function ListSuratKeterangan({ search }: { search: string }) {
     <Box py={{ base: 'sm', md: 'md' }}>
       <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
         <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={2} lh={1.2}>
+          <Title order={4} lh={1.2}>
             List Surat Keterangan
           </Title>
           <Button
@@ -169,7 +169,7 @@ function ListSuratKeterangan({ search }: { search: string }) {
             {filteredData.length > 0 ? (
               filteredData.map((item) => (
                 <Paper key={item.id} withBorder p="sm" radius="md">
-                  <Stack gap={4}>
+                  <Stack gap={'xs'}>
                     <Box>
                       <Text fz="sm" fw={600} lh={1.4}>
                         Nama

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

@@ -69,7 +69,7 @@ function ListPelayananTelunjukSakti({ search }: { search: string }) {
     <Box py={{ base: 'sm', md: 'md' }}>
       <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={2} lh={1.2}>
+          <Title order={4} lh={1.2}>
             Daftar Pelayanan Telunjuk Sakti
           </Title>
           <Button

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

@@ -69,8 +69,7 @@ function ListPenghargaan({ search }: { search: string }) {
     <Box py="md">
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="lg">
-          <Title order={2} visibleFrom="md">List Penghargaan</Title>
-          <Title order={3} hiddenFrom="md">List Penghargaan</Title>
+          <Title order={4}>List Penghargaan</Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"

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

@@ -82,7 +82,7 @@ function ListKategoriPengumuman({ search }: { search: string }) {
             visibleFrom="md"
             style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
           >
-            <Title order={2} lh={1.1}>
+            <Title order={4} lh={1.1}>
               List Kategori Pengumuman
             </Title>
             <Button

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

@@ -1,7 +1,29 @@
+'use client'
 import React from 'react';
 import LayoutTabs from './_com/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  // Contoh path:
+  // - /darmasaba/desa/pengumuman/semua → panjang 5 → list
+  // - /darmasaba/desa/pengumuman/Pemerintahan → panjang 5 → list
+  // - /darmasaba/desa/pengumuman/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 (
     <LayoutTabs>
       {children}

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

@@ -68,7 +68,7 @@ function ListPengumuman({ search }: { search: string }) {
     <Box py={{ base: 'sm', md: 'md' }}>
       <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={2} lh={1.2}>
+          <Title order={4} lh={1.2}>
             Daftar Pengumuman
           </Title>
           <Button

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

@@ -80,7 +80,7 @@ function ListKategoriPotensi({ search }: { search: string }) {
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Stack gap="xl">
           <Group justify="space-between" align="center">
-            <Title order={2} lh={1.2}>
+            <Title order={4} lh={1.2}>
               List Kategori Potensi
             </Title>
             <Button
@@ -174,7 +174,7 @@ function ListKategoriPotensi({ search }: { search: string }) {
             {filteredData.length > 0 ? (
               filteredData.map((item, index) => (
                 <Paper key={item.id} withBorder p="sm" radius="md">
-                  <Stack gap={4}>
+                  <Stack gap={'xs'}>
                     <Box>
                       <Text fz="xs" fw={600} lh={1.4}>
                         No

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

@@ -1,8 +1,29 @@
 'use client'
 import React from 'react';
 import LayoutTabsPotensi from './_lib/layoutTabs';
+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 (
     <LayoutTabsPotensi>
       {children}

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

@@ -76,7 +76,7 @@ function ListPotensi({ search }: { search: string }) {
     <Box py="lg">
       <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={2} lh={1.2}>
+          <Title order={4} lh={1.2}>
             Daftar Potensi Desa
           </Title>
           <Button

src/app/admin/(dashboard)/desa/profil/layout.tsx

@@ -1,8 +1,30 @@
 'use client'
 
+import { usePathname } from "next/navigation";
 import LayoutTabsDetail from "./_lib/layoutTabsDetail"
+import { Box } from "@mantine/core";
 
 export default 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 (
         <LayoutTabsDetail>
             {children}

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

@@ -66,7 +66,7 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
     <Box py={{ base: 'sm', md: 'md' }}>
       <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         <Group justify='space-between' mb={{ base: 'sm', md: 'md' }}>
-          <Title order={2} lh={1.2}>
+          <Title order={4} lh={1.2}>
             List Perbekel Dari Masa Ke Masa
           </Title>
           <Button
@@ -134,7 +134,7 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
             {filteredData.length > 0 ? (
               filteredData.map((item) => (
                 <Paper key={item.id} withBorder p="sm" radius="md">
-                  <Stack gap={4}>
+                  <Stack gap={'xs'}>
                     <Box>
                       <Text fz="xs" fw={600} lh={1.4} c="dark.9">Nama Perbekel</Text>
                       <Text fz="sm" fw={500} lh={1.5}>{item.nama}</Text>

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

@@ -1,7 +1,7 @@
 'use client'
 
 import colors from '@/con/colors';
-import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Divider, Grid, GridCol, Group, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
@@ -31,22 +31,18 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header + tombol edit */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2} c={colors['blue-button']} lh={1.2} />
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button
-              c="green"
-              variant="light"
-              leftSection={<IconEdit size={18} stroke={2} />}
-              radius="md"
-              onClick={() => router.push(`/admin/desa/profil/profil-perbekel/${perbekel.id}`)}
-            >
-              Edit
-            </Button>
-          </GridCol>
-        </Grid>
+        <Group justify="space-between">
+          <Title order={2} c={colors['blue-button']} lh={1.2}>Profil Perbekel</Title>
+          <Button
+            c="green"
+            variant="light"
+            leftSection={<IconEdit size={18} stroke={2} />}
+            radius="md"
+            onClick={() => router.push(`/admin/desa/profil/profil-perbekel/${perbekel.id}`)}
+          >
+            Edit
+          </Button>
+        </Group>
 
         {/* Card Profil */}
         <Paper p="xl" bg={colors['white-1']} withBorder radius="md" shadow="xs">
@@ -60,7 +56,7 @@ function Page() {
               <GridCol span={12}>
                 <Text
                   ta="center"
-                  fz={{ base: 'sm', md: 'md' }}
+                  fz={{ base: 'sm', md: 'xl' }}
                   fw="bold"
                   c={colors['blue-button']}
                   lh={{ base: 1.45, md: 1.45 }}

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

@@ -2,6 +2,7 @@
 'use client'
 import colors from '@/con/colors';
 import {
+  Box,
   ScrollArea,
   Stack,
   Tabs,
@@ -85,36 +86,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         keepMounted={false}
       >
         {/* ✅ Scroll horizontal wrapper */}
-        <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",
-            }}
+        <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%"
           >
-            {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,
-                }}
-              >
-                {tab.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+
+            <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

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

@@ -139,7 +139,7 @@ function EditAPBDesa() {
   }
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

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

@@ -57,7 +57,7 @@ function DetailAPBDesa() {
   const data = apbState.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}

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

@@ -51,7 +51,7 @@ function CreateAPBDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -15,13 +15,14 @@ import {
   TableTh,
   TableThead,
   TableTr,
-  Text
+  Text,
+  Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
+  import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import PendapatanAsliDesa from '../../../_state/ekonomi/PADesa';
 
@@ -44,6 +45,7 @@ function APBDesa() {
 function ListAPBDesa({ search }: { search: string }) {
   const apbDesaState = useProxy(PendapatanAsliDesa.ApbDesa);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -61,26 +63,26 @@ function ListAPBDesa({ search }: { search: string }) {
     }).format(value);
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={500} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors["white-1"]} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Text fw={600} fz="lg">
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors["white-1"]} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
             List APB Desa
-          </Text>
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -94,58 +96,88 @@ function ListAPBDesa({ search }: { search: string }) {
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: "15%" }}>Tahun</TableTh>
-                <TableTh style={{ width: "25%" }}>Pembiayaan</TableTh>
-                <TableTh style={{ width: "25%" }}>Belanja</TableTh>
-                <TableTh style={{ width: "25%" }}>Pendapatan</TableTh>
-                <TableTh style={{ width: "10%" }}>Aksi</TableTh>
+                <TableTh style={{ width: "15%" }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">Tahun</Text>
+                </TableTh>
+                <TableTh style={{ width: "25%" }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">Pembiayaan</Text>
+                </TableTh>
+                <TableTh style={{ width: "25%" }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">Belanja</Text>
+                </TableTh>
+                <TableTh style={{ width: "25%" }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">Pendapatan</Text>
+                </TableTh>
+                <TableTh style={{ width: "10%" }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">Aksi</Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.tahun}</TableTd>
                     <TableTd>
-                      {formatRupiah(
-                        item.pembiayaan.reduce(
-                          (sum, val) => sum + Number(val.value),
-                          0
-                        )
-                      )}
+                      <Text fz="md" fw={500} lh={1.5} ta="left">{item.tahun}</Text>
                     </TableTd>
                     <TableTd>
-                      {formatRupiah(
-                        item.belanja.reduce(
-                          (sum, val) => sum + Number(val.value),
-                          0
-                        )
-                      )}
+                      <Text fz="md" fw={500} lh={1.5} ta="left">
+                        {formatRupiah(
+                          item.pembiayaan.reduce(
+                            (sum, val) => sum + Number(val.value),
+                            0
+                          )
+                        )}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      {formatRupiah(
-                        item.pendapatan.reduce(
-                          (sum, val) => sum + Number(val.value),
-                          0
-                        )
-                      )}
+                      <Text fz="md" fw={500} lh={1.5} ta="left">
+                        {formatRupiah(
+                          item.belanja.reduce(
+                            (sum, val) => sum + Number(val.value),
+                            0
+                          )
+                        )}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5} ta="left">
+                        {formatRupiah(
+                          item.pendapatan.reduce(
+                            (sum, val) => sum + Number(val.value),
+                            0
+                          )
+                        )}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
                         variant="light"
-                        color="green"
+                        color="blue"
                         onClick={() =>
                           router.push(
                             `/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/${item.id}`
                           )
                         }
+                        size="compact-sm"
                       >
-                        <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <IconDeviceImacCog size={16} />
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -154,7 +186,7 @@ function ListAPBDesa({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={5}>
                     <Center py={20}>
-                      <Text color="dimmed">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
                         Tidak ada data APB Desa yang cocok
                       </Text>
                     </Center>
@@ -164,7 +196,81 @@ function ListAPBDesa({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="sm">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="md" radius="sm">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>Tahun</Text>
+                      <Text fz="sm" fw={500} lh={1.4}>{item.tahun}</Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>Pembiayaan</Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {formatRupiah(
+                          item.pembiayaan.reduce(
+                            (sum, val) => sum + Number(val.value),
+                            0
+                          )
+                        )}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>Belanja</Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {formatRupiah(
+                          item.belanja.reduce(
+                            (sum, val) => sum + Number(val.value),
+                            0
+                          )
+                        )}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>Pendapatan</Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {formatRupiah(
+                          item.pendapatan.reduce(
+                            (sum, val) => sum + Number(val.value),
+                            0
+                          )
+                        )}
+                      </Text>
+                    </Box>
+                    <Button
+                      variant="light"
+                      color="blue"
+                      fullWidth
+                      onClick={() =>
+                        router.push(
+                          `/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/${item.id}`
+                        )
+                      }
+                      size="sm"
+                    >
+                      <IconDeviceImacCog size={16} />
+                      <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                        Detail
+                      </Text>
+                    </Button>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py={20}>
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data APB Desa yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
+
       <Center>
         <Pagination
           value={page}
@@ -183,4 +289,4 @@ function ListAPBDesa({ search }: { search: string }) {
   );
 }
 
-export default APBDesa;
+export default APBDesa;

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

@@ -108,7 +108,7 @@ function EditBelanja() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

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

@@ -64,7 +64,7 @@ function CreateBelanja() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header dengan back button */}
       <Group mb="md">
         <Button

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

@@ -19,7 +19,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -31,7 +31,7 @@ import PendapatanAsliDesa from '../../../_state/ekonomi/PADesa';
 function Belanja() {
   const [search, setSearch] = useState("");
   return (
-    <Box>
+    <Stack gap="xl">
       <HeaderSearch
         title="Belanja"
         placeholder="Cari belanja berdasarkan nama atau nilai..."
@@ -40,7 +40,7 @@ function Belanja() {
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
       <ListBelanja search={search} />
-    </Box>
+    </Stack>
   );
 }
 
@@ -49,6 +49,7 @@ function ListBelanja({ search }: { search: string }) {
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -72,29 +73,35 @@ function ListBelanja({ search }: { search: string }) {
       belanjaState.delete.byId(selectedId);
       setModalHapus(false);
       setSelectedId(null);
-      load(page, 10, search);
+      load(page, 10, debouncedSearch);
     }
   };
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
+    <Stack gap="xl">
+      {/* Desktop Table */}
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Belanja</Title>
+          <Title
+            order={4}
+            lh={{ base: 1.2, md: 1.1 }}
+          >
+            Daftar Belanja
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -107,14 +114,32 @@ function ListBelanja({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover striped withTableBorder withRowBorders>
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            striped
+            withTableBorder
+            withRowBorders
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Nama</TableTh>
-                <TableTh>Nilai</TableTh>
-                <TableTh>Persentase</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh style={{ width: '40%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Nama</Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Nilai</Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Edit</Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Delete</Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -123,15 +148,19 @@ function ListBelanja({ search }: { search: string }) {
                   {filteredData.map((item) => (
                     <TableTr key={item.id}>
                       <TableTd>
-                        <Text fw={500} truncate="end" lineClamp={1}>
+                        <Text fz="md" fw={500} lh={1.45} truncate="end" lineClamp={1}>
                           {item.name}
                         </Text>
                       </TableTd>
-                      <TableTd>{formatRupiah(item.value)}</TableTd>
                       <TableTd>
-                        {totalBelanja > 0
-                          ? ((item.value / totalBelanja) * 100).toFixed(0) + '%'
-                          : '0%'}
+                        <Text fz="md" lh={1.45}>{formatRupiah(item.value)}</Text>
+                      </TableTd>
+                      <TableTd>
+                        <Text fz="md" lh={1.45}>
+                          {totalBelanja > 0
+                            ? ((item.value / totalBelanja) * 100).toFixed(0) + '%'
+                            : '0%'}
+                        </Text>
                       </TableTd>
                       <TableTd>
                         <Group gap="xs">
@@ -165,18 +194,20 @@ function ListBelanja({ search }: { search: string }) {
                   ))}
                   <TableTr>
                     <TableTd colSpan={2}>
-                      <Text fw="bold">Total</Text>
+                      <Text fz="md" fw={600} lh={1.45}>Total</Text>
                     </TableTd>
                     <TableTd colSpan={2}>
-                      <Text fw="bold">{formatRupiah(totalBelanja)}</Text>
+                      <Text fz="md" fw={600} lh={1.45}>{formatRupiah(totalBelanja)}</Text>
                     </TableTd>
                   </TableTr>
                 </>
               ) : (
                 <TableTr>
                   <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text c="dimmed">Tidak ada data belanja yang cocok</Text>
+                    <Center py="xl">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data belanja yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -186,21 +217,107 @@ function ListBelanja({ search }: { search: string }) {
         </Box>
       </Paper>
 
+      {/* Mobile Cards */}
+      <Stack visibleFrom="xs" hiddenFrom="md" gap="sm">
+        {filteredData.length > 0 ? (
+          filteredData.map((item) => (
+            <Paper key={item.id} withBorder p="md" radius="md">
+              <Stack gap={'xs'}>
+                <Box>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Nama
+                  </Text>
+                  <Text fz="sm" fw={500} lh={1.4} truncate="end">
+                    {item.name}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Nilai
+                  </Text>
+                  <Text fz="sm" fw={500} lh={1.4}>
+                    {formatRupiah(item.value)}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Persentase
+                  </Text>
+                  <Text fz="sm" fw={500} lh={1.4}>
+                    {totalBelanja > 0
+                      ? ((item.value / totalBelanja) * 100).toFixed(0) + '%'
+                      : '0%'}
+                  </Text>
+                </Box>
+                <Group justify="flex-end" mt="xs">
+                  <Button
+                    size="xs"
+                    variant="light"
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/ekonomi/PADesa-pendapatan-asli-desa/belanja/${item.id}`
+                      )
+                    }
+                  >
+                    <IconEdit size={16} />
+                  </Button>
+                  <Button
+                    size="xs"
+                    variant="light"
+                    color="red"
+                    disabled={belanjaState.delete.loading}
+                    onClick={() => {
+                      setSelectedId(item.id);
+                      setModalHapus(true);
+                    }}
+                  >
+                    <IconTrash size={16} />
+                  </Button>
+                </Group>
+              </Stack>
+            </Paper>
+          ))
+        ) : (
+          <Paper withBorder p="xl" radius="md">
+            <Center>
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data belanja yang cocok
+              </Text>
+            </Center>
+          </Paper>
+        )}
+
+        {filteredData.length > 0 && (
+          <Paper withBorder p="md" radius="md">
+            <Group justify="space-between">
+              <Text fz="sm" fw={600} lh={1.4}>
+                Total
+              </Text>
+              <Text fz="sm" fw={500} lh={1.4}>
+                {formatRupiah(totalBelanja)}
+              </Text>
+            </Group>
+          </Paper>
+        )}
+      </Stack>
+
       {/* Pagination */}
-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10, search);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-          total={totalPages}
-          mt="md"
-          mb="md"
-          color="blue"
-          radius="md"
-        />
-      </Center>
+      {(totalPages > 1 || page > 1) && (
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10, search);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            mt="md"
+            color="blue"
+            radius="md"
+          />
+        </Center>
+      )}
 
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
@@ -209,8 +326,8 @@ function ListBelanja({ search }: { search: string }) {
         onConfirm={handleDelete}
         text="Apakah anda yakin ingin menghapus belanja ini?"
       />
-    </Box>
+    </Stack>
   );
 }
 
-export default Belanja;
+export default Belanja;

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

@@ -1,7 +1,30 @@
+'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+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 (
     <LayoutTabs>
       {children}

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

@@ -105,7 +105,7 @@ function EditPembiayaan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

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

@@ -63,7 +63,7 @@ function CreatePembiayaan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

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

@@ -16,9 +16,9 @@ import {
   TableThead,
   TableTr,
   Text,
-  Title
+  Title,
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -48,6 +48,7 @@ function ListPembiayaan({ search }: { search: string }) {
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -71,17 +72,17 @@ function ListPembiayaan({ search }: { search: string }) {
       pembiayaanState.delete.byId(selectedId);
       setModalHapus(false);
       setSelectedId(null);
-      load(page, 10, search);
+      load(page, 10, debouncedSearch);
     }
   };
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="lg">
         <Skeleton height={500} radius="md" />
       </Stack>
     );
@@ -90,10 +91,10 @@ function ListPembiayaan({ search }: { search: string }) {
   const filteredData = data || [];
 
   return (
-    <Box py={10}>
+    <Stack gap="xl" py="lg">
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Pembiayaan</Title>
+          <Title order={4} lh={1.2}>Daftar Pembiayaan</Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -106,14 +107,33 @@ function ListPembiayaan({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover striped withTableBorder withRowBorders>
-            <TableThead>
-              <TableTr>
-                <TableTh>Nama</TableTh>
-                <TableTh>Nilai</TableTh>
-                <TableTh>Persentase</TableTh>
-                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            striped
+            withTableBorder
+            withRowBorders
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
+            <TableThead>       
+               <TableTr>
+                <TableTh style={{ width: '40%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Nama</Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Nilai</Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Edit</Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Delete</Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -122,15 +142,19 @@ function ListPembiayaan({ search }: { search: string }) {
                   {filteredData.map((item) => (
                     <TableTr key={item.id}>
                       <TableTd>
-                        <Text fw={500} truncate="end" lineClamp={1}>
+                        <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
                           {item.name}
                         </Text>
                       </TableTd>
-                      <TableTd>{formatRupiah(item.value)}</TableTd>
                       <TableTd>
-                        {totalPembiayaan > 0
-                          ? ((item.value / totalPembiayaan) * 100).toFixed(0) + '%'
-                          : '0%'}
+                        <Text fz="md" fw={500} lh={1.5}>{formatRupiah(item.value)}</Text>
+                      </TableTd>
+                      <TableTd>
+                        <Text fz="md" fw={500} lh={1.5}>
+                          {totalPembiayaan > 0
+                            ? ((item.value / totalPembiayaan) * 100).toFixed(0) + '%'
+                            : '0%'}
+                        </Text>
                       </TableTd>
                       <TableTd>
                         <Group gap="xs">
@@ -163,16 +187,20 @@ function ListPembiayaan({ search }: { search: string }) {
                   {/* Total Row */}
                   <TableTr>
                     <TableTd colSpan={2}>
-                      <Text fw="bold">Total</Text>
+                      <Text fz="md" fw={600} lh={1.5}>Total</Text>
+                    </TableTd>
+                    <TableTd colSpan={2}>
+                      <Text fz="md" fw={600} lh={1.5}>{formatRupiah(totalPembiayaan)}</Text>
                     </TableTd>
-                    <TableTd colSpan={2}>{formatRupiah(totalPembiayaan)}</TableTd>
                   </TableTr>
                 </>
               ) : (
                 <TableTr>
                   <TableTd colSpan={4}>
                     <Center py={20}>
-                      <Text c="dimmed">Tidak ada data pembiayaan yang cocok</Text>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data pembiayaan yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -180,6 +208,79 @@ function ListPembiayaan({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Stack gap="sm" hiddenFrom="md">
+          {filteredData.length > 0 ? (
+            filteredData.map((item) => (
+              <Paper key={item.id} withBorder p="md" radius="md">
+                <Stack gap={"xs"}>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Nama</Text>
+                    <Text fz="sm" fw={500} lh={1.4} truncate="end">
+                      {item.name}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Nilai</Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {formatRupiah(item.value)}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Persentase</Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {totalPembiayaan > 0
+                        ? ((item.value / totalPembiayaan) * 100).toFixed(0) + '%'
+                        : '0%'}
+                    </Text>
+                  </Box>
+                  <Group justify="flex-end" mt="xs">
+                    <Button
+                      color="green"
+                      variant="light"
+                      size="xs"
+                      onClick={() =>
+                        router.push(
+                          `/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/${item.id}`
+                        )
+                      }
+                    >
+                      <IconEdit size={16} />
+                    </Button>
+                    <Button
+                      color="red"
+                      variant="light"
+                      size="xs"
+                      disabled={pembiayaanState.delete.loading}
+                      onClick={() => {
+                        setSelectedId(item.id);
+                        setModalHapus(true);
+                      }}
+                    >
+                      <IconTrash size={16} />
+                    </Button>
+                  </Group>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py={20}>
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data pembiayaan yang cocok
+              </Text>
+            </Center>
+          )}
+
+          {filteredData.length > 0 && (
+            <Paper withBorder p="md" radius="md">
+              <Stack gap={4}>
+                <Text fz="sm" fw={600} lh={1.4}>Total</Text>
+                <Text fz="sm" fw={500} lh={1.4}>{formatRupiah(totalPembiayaan)}</Text>
+              </Stack>
+            </Paper>
+          )}
+        </Stack>
       </Paper>
 
       {/* Pagination */}
@@ -205,8 +306,8 @@ function ListPembiayaan({ search }: { search: string }) {
         onConfirm={handleDelete}
         text="Apakah anda yakin ingin menghapus pembiayaan ini?"
       />
-    </Box>
+    </Stack>
   );
 }
 
-export default Pembiayaan;
+export default Pembiayaan;

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

@@ -114,7 +114,7 @@ function EditPendapatan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header with Back Button */}
       <Group mb="md">
         <Button

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

@@ -57,7 +57,7 @@ function CreatePendapatan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header dengan tombol back + judul */}
       <Group mb="md">
         <Button

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

@@ -19,7 +19,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -49,6 +49,7 @@ function ListPendapatan({ search }: { search: string }) {
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -70,19 +71,19 @@ function ListPendapatan({ search }: { search: string }) {
       pendapatanState.delete.byId(selectedId);
       setModalHapus(false);
       setSelectedId(null);
-      load(page, 10, search);
+      load(page, 10, debouncedSearch);
     }
   };
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
     );
@@ -91,10 +92,12 @@ function ListPendapatan({ search }: { search: string }) {
   const totalValue = filteredData.reduce((total, item) => total + item.value, 0);
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Pendapatan</Title>
+          <Title order={2} lh={1.2}>
+          Daftar Pendapatan
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -107,14 +110,30 @@ function ListPendapatan({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover striped withTableBorder withRowBorders>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '40%' }}>Nama</TableTh>
-                <TableTh style={{ width: '25%' }}>Nilai</TableTh>
-                <TableTh style={{ width: '15%' }}>Edit</TableTh>
-                <TableTh style={{ width: '15%' }}>Delete</TableTh>
+                <TableTh style={{ width: '40%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Nama</Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Nilai</Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Edit</Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>Delete</Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -123,11 +142,13 @@ function ListPendapatan({ search }: { search: string }) {
                   {filteredData.map((item) => (
                     <TableTr key={item.id}>
                       <TableTd>
-                        <Text fw={500} truncate="end" lineClamp={1}>
+                        <Text fz="md" fw={500} lh={1.5} truncate="end">
                           {item.name}
                         </Text>
                       </TableTd>
-                      <TableTd>{formatRupiah(item.value)}</TableTd>
+                      <TableTd>
+                        <Text fz="md" fw={500} lh={1.5}>{formatRupiah(item.value)}</Text>
+                      </TableTd>
                       <TableTd>
                         <Button
                           variant="light"
@@ -135,9 +156,10 @@ function ListPendapatan({ search }: { search: string }) {
                           onClick={() =>
                             router.push(`/admin/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/${item.id}`)
                           }
+                          fz="sm"
+                          px="xs"
                         >
-                          <IconEdit size={18} />
-                          <Text ml={5}>Edit</Text>
+                          <IconEdit size={16} />
                         </Button>
                       </TableTd>
                       <TableTd>
@@ -149,9 +171,10 @@ function ListPendapatan({ search }: { search: string }) {
                             setSelectedId(item.id);
                             setModalHapus(true);
                           }}
+                          fz="sm"
+                          px="xs"
                         >
-                          <IconTrash size={18} />
-                          <Text ml={5}>Hapus</Text>
+                          <IconTrash size={16} />
                         </Button>
                       </TableTd>
                     </TableTr>
@@ -159,19 +182,21 @@ function ListPendapatan({ search }: { search: string }) {
 
                   {/* Row total */}
                   <TableTr>
-                    <TableTd colSpan={1}>
-                      <Text fw={'bold'}>Total</Text>
+                    <TableTd>
+                      <Text fz="md" fw={700} lh={1.5}>Total</Text>
                     </TableTd>
                     <TableTd colSpan={3}>
-                      <Text fw={'bold'}>{formatRupiah(totalValue)}</Text>
+                      <Text fz="md" fw={700} lh={1.5}>{formatRupiah(totalValue)}</Text>
                     </TableTd>
                   </TableTr>
                 </>
               ) : (
                 <TableTr>
                   <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text color="dimmed">Tidak ada data pendapatan yang cocok</Text>
+                    <Center py={24}>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data pendapatan yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -179,23 +204,85 @@ function ListPendapatan({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Stack gap="xs" hiddenFrom="md">
+          {filteredData.length > 0 ? (
+            filteredData.map((item) => (
+              <Paper key={item.id} withBorder radius="md" p="md">
+                <Stack gap={4}>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Nama</Text>
+                    <Text fz="sm" fw={500} lh={1.4}>{item.name}</Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Nilai</Text>
+                    <Text fz="sm" fw={500} lh={1.4}>{formatRupiah(item.value)}</Text>
+                  </Box>
+                  <Group justify="flex-end" mt="xs">
+                    <Button
+                      variant="light"
+                      color="green"
+                      size="xs"
+                      onClick={() =>
+                        router.push(`/admin/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/${item.id}`)
+                      }
+                    >
+                      <IconEdit size={14} />
+                      <Text ml={4}>Edit</Text>
+                    </Button>
+                    <Button
+                      variant="light"
+                      color="red"
+                      size="xs"
+                      disabled={pendapatanState.delete.loading}
+                      onClick={() => {
+                        setSelectedId(item.id);
+                        setModalHapus(true);
+                      }}
+                    >
+                      <IconTrash size={14} />
+                      <Text ml={4}>Hapus</Text>
+                    </Button>
+                  </Group>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py={24}>
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data pendapatan yang cocok
+              </Text>
+            </Center>
+          )}
+
+          {filteredData.length > 0 && (
+            <Paper withBorder radius="md" p="md">
+              <Box>
+                <Text fz="xs" fw={600} lh={1.4}>Total</Text>
+                <Text fz="sm" fw={700} lh={1.4}>{formatRupiah(totalValue)}</Text>
+              </Box>
+            </Paper>
+          )}
+        </Stack>
       </Paper>
 
       {/* Pagination */}
-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10, search);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-          total={totalPages}
-          mt="md"
-          mb="md"
-          color="blue"
-          radius="md"
-        />
-      </Center>
+      {totalPages > 1 && (
+        <Center mt={{ base: 'sm', md: 'md' }} mb={{ base: 'sm', md: 'md' }}>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10, search);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            color="blue"
+            radius="md"
+            size="sm"
+          />
+        </Center>
+      )}
 
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
@@ -208,4 +295,4 @@ function ListPendapatan({ search }: { search: string }) {
   );
 }
 
-export default Pendapatan;
+export default Pendapatan;

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

@@ -0,0 +1,171 @@
+/* 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 {
+  IconBuildingCommunity,
+  IconHierarchy,
+  IconUsers
+} from '@tabler/icons-react';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const tabs = [
+    {
+      label: "Pegawai",
+      value: "pegawai",
+      href: "/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai",
+      icon: <IconUsers size={18} stroke={1.8} />
+    },
+    {
+      label: "Posisi Organisasi",
+      value: "posisiorganisasi",
+      href: "/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi",
+      icon: <IconHierarchy size={18} stroke={1.8} />
+    },
+    {
+      label: "Struktur Organisasi",
+      value: "strukturorganisasi",
+      href: "/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/struktur-organisasi",
+      icon: <IconBuildingCommunity 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" }}>
+        Struktur Organisasi & SK Pengurus BUMDes
+      </Title>
+
+      <Tabs
+        color={colors["blue-button"]}
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        {/* ✅ Scroll horizontal biar rapi kalau label panjang */}
+        <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 LayoutTabs;

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

@@ -0,0 +1,33 @@
+'use client'
+
+import { usePathname } from "next/navigation";
+import LayoutTabs from "./_lib/layoutTabs"
+import { Box } from "@mantine/core";
+
+
+export default 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 (
+    <LayoutTabs>
+      {children}
+    </LayoutTabs>
+  )
+}

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

@@ -143,7 +143,7 @@ export default function EditPegawaiBumDes() {
       if (id && !stateOrganisasi.edit.id) stateOrganisasi.edit.id = id;
 
       const success = await stateOrganisasi.edit.submit();
-      if (success) router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai');
+      if (success) router.push('/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai');
     } catch (error) {
       console.error('Error updating pegawai:', error);
       toast.error(error instanceof Error ? error.message : 'Gagal memperbarui data pegawai');
@@ -153,12 +153,12 @@ export default function EditPegawaiBumDes() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     <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} />
         </Button>
-        <Title order={4} ml="sm" c="dark">Edit Data Pegawai PPID</Title>
+        <Title order={4} ml="sm" c="dark">Edit Data Pegawai BumDes</Title>
       </Group>
 
       <Paper

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

@@ -1,5 +1,6 @@
 'use client'
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import { ModalKonfirmasiNonAktif } from '@/app/admin/(dashboard)/_com/modalNonaktif';
 import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
 
 import colors from '@/con/colors';
@@ -28,7 +29,7 @@ function DetailPegawai() {
       statePegawai.delete.byId(selectedId);
       setModalHapus(false);
       setSelectedId(null);
-      router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
+      router.push("/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai");
     }
   };
 
@@ -37,7 +38,7 @@ function DetailPegawai() {
       statePegawai.nonActive.byId(selectedId);
       setModalNonActive(false);
       setSelectedId(null);
-      router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
+      router.push("/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai");
     }
   };
 
@@ -52,7 +53,7 @@ function DetailPegawai() {
   const data = statePegawai.findUnique.data;
 
   return (
-    <Box>
+     <Box px={{ base: 0, md: 'xs' }} py="xs">
       <Box mb={10}>
         <Button variant="subtle" onClick={() => router.back()}>
           <IconArrowBack color={colors['blue-button']} size={25} />
@@ -60,7 +61,7 @@ function DetailPegawai() {
       </Box>
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
@@ -68,7 +69,7 @@ function DetailPegawai() {
       >
         <Stack gap="md">
           <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail Pegawai PPID
+            Detail Pegawai BumDes
           </Text>
 
           <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
@@ -165,7 +166,7 @@ function DetailPegawai() {
 
                 <Button
                   color="green"
-                  onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${data.id}/edit`)}
+                  onClick={() => router.push(`/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/${data.id}/edit`)}
                   variant="light"
                   radius="md"
                   size="md"
@@ -187,7 +188,7 @@ function DetailPegawai() {
       />
 
       {/* Modal NonActive */}
-      <ModalKonfirmasiHapus
+      <ModalKonfirmasiNonAktif
         opened={modalNonActive}
         onClose={() => setModalNonActive(false)}
         onConfirm={handleNonActive}

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

@@ -72,7 +72,7 @@ function CreatePegawaiBumDes() {
       // Reset form dan redirect
       resetForm();
       toast.success("Data pegawai berhasil ditambahkan");
-      router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
+      router.push("/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai");
     } catch (error) {
       console.error("Error creating pegawai:", error);
       toast.error("Terjadi kesalahan saat menambahkan pegawai");
@@ -82,13 +82,13 @@ function CreatePegawaiBumDes() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <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} />
         </Button>
         <Title order={4} ml="sm" c="dark">
-          Tambah Pegawai BUMDesa
+          Tambah Pegawai BUMDes
         </Title>
       </Group>
 

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

@@ -0,0 +1,232 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Badge, Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title } from '@mantine/core';
+import { IconCheck, IconDeviceImacCog, IconPlus, IconSearch, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import stateStrukturBumDes from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import { useDebouncedValue } from '@mantine/hooks';
+
+function PegawaiBumDes() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Pegawai BUMDes'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPegawaiBumdes search={search} />
+    </Box>
+  );
+}
+
+function ListPegawaiBumdes({ search }: { search: string }) {
+  const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai);
+  const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateOrganisasi.findMany;
+
+  useEffect(() => {
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
+
+  const filteredData = data || [];
+
+  // Handle loading state
+  if (loading || !data) {
+    return (
+      <Stack py="md">
+        <Skeleton height={300} />
+      </Stack>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Box py="md">
+        <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+          <Group justify="space-between" mb="md">
+            <Title order={2} visibleFrom="md">Daftar Pegawai BUMDes</Title>
+            <Title order={3} hiddenFrom="md">Daftar Pegawai BUMDes</Title>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Group>
+          <Center py="xl">
+            <Text c="dimmed" fz={{ base: 'sm', md: 'md' }} ta="center">
+              Tidak ada data pegawai yang ditemukan
+            </Text>
+          </Center>
+        </Paper>
+      </Box>
+    );
+  }
+
+  const sortedData = [...filteredData].sort((a, b) => {
+    if (a.isActive === b.isActive) {
+      return a.namaLengkap.localeCompare(b.namaLengkap);
+    }
+    return Number(b.isActive) - Number(a.isActive);
+  });
+
+  return (
+    <Box py="md">
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={2} visibleFrom="md">Daftar Pegawai BUMDes</Title>
+          <Title order={3} hiddenFrom="md">Daftar Pegawai BUMDes</Title>
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() => router.push('/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/create')}
+          >
+            Tambah Baru
+          </Button>
+        </Group>
+
+        {/* Desktop: Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '35%' }}>Nama Lengkap</TableTh>
+                <TableTh style={{ width: '30%' }}>Posisi</TableTh>
+                <TableTh style={{ width: '20%' }}>Status</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {sortedData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>
+                    <Text fw={500} fz="md" lh={1.45} truncate="end">
+                      {item.namaLengkap}
+                    </Text>
+                  </TableTd>
+                  <TableTd>
+                    <Badge variant="light" color="blue" fz="sm" lh={1.4}>
+                      {item.posisi?.nama || 'Belum diatur'}
+                    </Badge>
+                  </TableTd>
+                  <TableTd>
+                    <Badge color={item.isActive ? "green" : "red"} fz="sm" lh={1.4}>
+                      {item.isActive ? "Aktif" : "Tidak Aktif"}
+                    </Badge>
+                  </TableTd>
+                  <TableTd>
+                    <Button
+                      size="xs"
+                      radius="md"
+                      variant="light"
+                      color="blue"
+                      leftSection={<IconDeviceImacCog size={16} />}
+                      onClick={() => router.push(`/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/${item.id}`)}
+                    >
+                      Detail
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Box>
+
+        {/* Mobile: Card List */}
+        <Stack gap="sm" hiddenFrom="md">
+          {sortedData.map((item) => (
+            <Paper key={item.id} withBorder p="md" radius="md">
+              <Stack gap="xs">
+                <Box>
+                  <Text fz="sm" fw={600} lh={1.4}>Nama Lengkap</Text>
+                  <Text fz="sm" fw={500} lh={1.4}>
+                    {item.namaLengkap}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text fz="sm" fw={600} lh={1.4}>Posisi</Text>
+                  <Text fz="sm" fw={500} lh={1.4}>
+                    {item.posisi?.nama || 'Belum diatur'}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text fz="sm" fw={600} lh={1.4}>Status</Text>
+                  <Group gap="xs">
+                    {item.isActive ? (
+                      <Group gap="xs">
+                        <ThemeIcon color="green" variant="light" size="sm">
+                          <IconCheck size={14} />
+                        </ThemeIcon>
+                        <Text fz="sm" fw={500} c="green">Aktif</Text>
+                      </Group>
+                    ) : (
+                      <Group gap="xs">
+                        <ThemeIcon color="red" variant="light" size="sm">
+                          <IconX size={14} />
+                        </ThemeIcon>
+                        <Text fz="sm" fw={500} c="red">Tidak Aktif</Text>
+                      </Group>
+                    )}
+                  </Group>
+                </Box>
+                <Box>
+                  <Button
+                    size="xs"
+                    radius="md"
+                    variant="light"
+                    color="blue"
+                    leftSection={<IconDeviceImacCog size={16} />}
+                    onClick={() => router.push(`/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/pegawai/${item.id}`)}
+                  >
+                    Detail
+                  </Button>
+                </Box>
+              </Stack>
+            </Paper>
+          ))}
+        </Stack>
+
+        <Center mt="lg">
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            withEdges
+            withControls
+            radius="md"
+          />
+        </Center>
+      </Paper>
+    </Box>
+  );
+}
+
+export default PegawaiBumDes;

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

@@ -95,7 +95,7 @@ function EditPosisiOrganisasiBumDes() {
       const success = await stateOrganisasi.edit.update();
 
       if (success) {
-        router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi');
+        router.push('/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi');
       }
     } catch (err) {
       console.error('Error updating posisi organisasi:', err);
@@ -106,7 +106,7 @@ function EditPosisiOrganisasiBumDes() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <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} />

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

@@ -36,7 +36,7 @@ function CreatePosisiOrganisasiBumDes() {
 
       await stateOrganisasi.create.submit();
       toast.success('Posisi organisasi berhasil ditambahkan');
-      router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi');
+      router.push('/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi');
     } catch (error) {
       toast.error('Gagal menambahkan posisi organisasi');
       console.error('Error:', error);
@@ -46,7 +46,7 @@ function CreatePosisiOrganisasiBumDes() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     <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} />

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

@@ -0,0 +1,315 @@
+'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 stateStrukturBumDes from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
+
+function PosisiOrganisasiBumDes() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Posisi Organisasi BUMDes'
+        placeholder='Cari posisi organisasi...'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPosisiOrganisasiBumDes search={search} />
+    </Box>
+  );
+}
+
+function ListPosisiOrganisasiBumDes({ search }: { search: string }) {
+  const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi);
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateOrganisasi.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
+
+  const handleHapus = async () => {
+    if (selectedId) {
+      await stateOrganisasi.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+    }
+  };
+
+  const filteredData = data || [];
+
+  if (loading || !data) {
+    return (
+      <Stack py={{ base: 'sm', md: 'md' }}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
+  }
+
+  return (
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title
+            order={4}
+            lh={{ base: 1.2, md: 1.1 }}
+          >
+            Daftar Posisi Organisasi BumDes
+          </Title>
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() =>
+              router.push(
+                '/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/create'
+              )
+            }
+          >
+            Tambah Baru
+          </Button>
+        </Group>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Nama Posisi
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Deskripsi
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Hierarki
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="center">
+                    Edit
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <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.45} truncate="end" lineClamp={1}>
+                        {item.nama}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text 
+                        fz="sm" 
+                        fw={500} 
+                        lh={1.45} 
+                        c="dimmed" 
+                        lineClamp={2} 
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }}
+                      />
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.45}>{item.hierarki || '-'}</Text>
+                    </TableTd>
+                    <TableTd ta="center">
+                      <Button
+                        variant="light"
+                        color="green"
+                        size="xs"
+                        onClick={() =>
+                          router.push(
+                            `/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/${item.id}`
+                          )
+                        }
+                      >
+                        <IconEdit size={16} />
+                      </Button>
+                    </TableTd>
+                    <TableTd ta="center">
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="xs"
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        <IconTrash size={16} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={5}>
+                    <Center py={{ base: 'sm', md: 'md' }}>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data posisi organisasi yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="sm" radius="md">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Posisi
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Deskripsi
+                      </Text>
+                      <Text 
+                        fz="sm" 
+                        fw={500} 
+                        lh={1.45} 
+                        c="dimmed" 
+                        lineClamp={2} 
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }}
+                      />
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Hierarki
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.hierarki || '-'}
+                      </Text>
+                    </Box>
+                    <Group justify="flex-end" gap="xs" mt="xs">
+                      <Button
+                        variant="light"
+                        color="green"
+                        size="xs"
+                        onClick={() =>
+                          router.push(
+                            `/admin/ekonomi/Struktur-Organisasi-Dan-Sk-Pengurus-BumDes/posisi-organisasi/${item.id}`
+                          )
+                        }
+                      >
+                        <IconEdit size={16} />
+                      </Button>
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="xs"
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        <IconTrash size={16} />
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="sm">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data posisi organisasi yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
+      </Paper>
+
+      {totalPages > 1 && (
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10, search);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+            color="blue"
+            radius="md"
+          />
+        </Center>
+      )}
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus posisi organisasi BumDes ini?"
+      />
+    </Box>
+  );
+}
+
+export default PosisiOrganisasiBumDes;

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

@@ -118,7 +118,7 @@ export default function EditDemografiPekerjaan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

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

@@ -55,7 +55,7 @@ function CreateDemografiPekerjaan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

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

@@ -21,7 +21,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -59,6 +59,8 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
   const [chartData, setChartData] = useState<DemografiPekerjaan[]>([]);
   const [mounted, setMounted] = useState(false);
   const [modalHapus, setModalHapus] = useState(false);
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
+  
   const [selectedId, setSelectedId] = useState<string | null>(null);
 
   const {
@@ -79,8 +81,8 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
 
   useShallowEffect(() => {
     setMounted(true);
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   useEffect(() => {
     if (data) {
@@ -106,38 +108,52 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>List Demografi Pekerjaan</Title>
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title
+            order={4}
+            lh={{ base: 1.2, md: 1.15 }}
+          >
+            List Demografi Pekerjaan
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
             onClick={() => router.push('/admin/ekonomi/demografi-pekerjaan/create')}
+            fz={{ base: 'sm', md: 'md' }}
           >
             Tambah Baru
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ minWidth: 200 }}>Pekerjaan</TableTh>
-                <TableTh style={{ minWidth: 200 }}>Laki - Laki</TableTh>
-                <TableTh style={{ minWidth: 200 }}>Perempuan</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Hapus</TableTh>
+                <TableTh style={{ width: '40%' }}>Pekerjaan</TableTh>
+                <TableTh style={{ width: '20%' }}>Laki - Laki</TableTh>
+                <TableTh style={{ width: '20%' }}>Perempuan</TableTh>
+                <TableTh style={{ width: '10%' }}>Edit</TableTh>
+                <TableTh style={{ width: '10%' }}>Hapus</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ minWidth: 200 }}>{item.pekerjaan}</TableTd>
-                    <TableTd style={{ minWidth: 200 }}>{item.lakiLaki}</TableTd>
-                    <TableTd style={{ minWidth: 200 }}>{item.perempuan}</TableTd>
+                    <TableTd>{item.pekerjaan}</TableTd>
+                    <TableTd>{item.lakiLaki}</TableTd>
+                    <TableTd>{item.perempuan}</TableTd>
                     <TableTd>
                       <Button
                         variant="light"
@@ -145,8 +161,11 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
                         onClick={() =>
                           router.push(`/admin/ekonomi/demografi-pekerjaan/${item.id}`)
                         }
+                        fz="sm"
+                        px="xs"
+                        py="xs"
                       >
-                        <IconEdit size={18} />
+                        <IconEdit size={16} />
                       </Button>
                     </TableTd>
                     <TableTd>
@@ -158,17 +177,22 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
                           setSelectedId(item.id);
                           setModalHapus(true);
                         }}
+                        fz="sm"
+                        px="xs"
+                        py="xs"
                       >
-                        <IconTrash size={18} />
+                        <IconTrash size={16} />
                       </Button>
                     </TableTd>
                   </TableTr>
                 ))
               ) : (
                 <TableTr>
-                  <TableTd colSpan={4}>
+                  <TableTd colSpan={5}>
                     <Center py={20}>
-                      <Text color="dimmed">Tidak ada data demografi pekerjaan yang cocok</Text>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data demografi pekerjaan yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -176,6 +200,78 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {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}>
+                        Pekerjaan
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.pekerjaan}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Laki - Laki
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.lakiLaki}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Perempuan
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.perempuan}
+                      </Text>
+                    </Box>
+                    <Group justify="flex-end" gap="xs">
+                      <Button
+                        variant="light"
+                        color="green"
+                        onClick={() =>
+                          router.push(`/admin/ekonomi/demografi-pekerjaan/${item.id}`)
+                        }
+                        fz="xs"
+                        px="xs"
+                        py="xs"
+                      >
+                        <IconEdit size={14} />
+                      </Button>
+                      <Button
+                        variant="light"
+                        color="red"
+                        disabled={stateDemografi.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                        fz="xs"
+                        px="xs"
+                        py="xs"
+                      >
+                        <IconTrash size={14} />
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py={20}>
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data demografi pekerjaan yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       {/* Pagination */}
@@ -195,10 +291,13 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
       </Center>
 
       {/* Chart */}
-      <Box mt={30} style={{ width: '100%', minHeight: 400 }}>
-        <Paper bg={colors['white-1']} p="md" radius="md" withBorder>
-          <Stack gap={"xs"}>
-            <Title pb={10} order={4}>
+      <Box mt={{ base: 'lg', md: 'xl' }}>
+        <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} radius="md" withBorder>
+          <Stack gap="xs">
+            <Title
+              order={4}
+              lh={{ base: 1.2, md: 1.15 }}
+            >
               Grafik Demografi Pekerjaan
             </Title>
             {mounted && chartData.length > 0 ? (
@@ -213,17 +312,23 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
                 ]}
               />
             ) : (
-              <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+              <Text c="dimmed" fz={{ base: 'sm', md: 'md' }} lh={1.4}>
+                Belum ada data untuk ditampilkan dalam grafik
+              </Text>
             )}
-            <Box py={10}>
-              <Group justify='center'>
-                <Flex align="center" gap={10}>
-                  <Box bg="#5082EE" w={20} h={20} />
-                  <Text>Laki - Laki</Text>
+            <Box py={{ base: 'sm', md: 'md' }}>
+              <Group justify="center" gap='md'>
+                <Flex align="center" gap={8}>
+                  <Box bg="#5082EE" w={16} h={16} />
+                  <Text fz={{ base: 'xs', md: 'sm' }} lh={1.4}>
+                    Laki - Laki
+                  </Text>
                 </Flex>
-                <Flex align="center" gap={10}>
-                  <Box bg="#6EDF9C" w={20} h={20} />
-                  <Text>Perempuan</Text>
+                <Flex align="center" gap={8}>
+                  <Box bg="#6EDF9C" w={16} h={16} />
+                  <Text fz={{ base: 'xs', md: 'sm' }} lh={1.4}>
+                    Perempuan
+                  </Text>
                 </Flex>
               </Group>
             </Box>
@@ -242,4 +347,4 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
   );
 }
 
-export default DemografiPekerjaan;
+export default DemografiPekerjaan;

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

@@ -100,7 +100,7 @@ function EditJumlahPendudukMiskin() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button
           variant="subtle"

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

@@ -45,7 +45,7 @@ export default function CreateJumlahPendudukMiskin() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -1,4 +1,4 @@
-'use client'
+'use client';
 import colors from '@/con/colors';
 import {
   Box,
@@ -16,9 +16,9 @@ import {
   TableThead,
   TableTr,
   Text,
-  Title
+  Title,
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -26,12 +26,10 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
 import jumlahPendudukMiskin from '../../_state/ekonomi/jumlah-penduduk-miskin';
-
-// ✅ BarChart Mantine
 import { BarChart } from '@mantine/charts';
 
 function JumlahPendudukMiskin() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
@@ -54,16 +52,15 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, loading, load, totalPages } = stateJPM.findMany;
 
-  // Load data awal
   useShallowEffect(() => {
     setMounted(true);
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
-  // Update chart data
   useEffect(() => {
     if (stateJPM.findMany.data) {
       setChartData(
@@ -88,18 +85,20 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={500} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
-      {/* Tabel */}
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Jumlah Penduduk Miskin</Title>
+    <Stack py={{ base: 'sm', md: 'md' }} gap='lg'>
+      {/* Main Table/Card Section */}
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Jumlah Penduduk Miskin
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -112,22 +111,54 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '25%' }}>Tahun</TableTh>
-                <TableTh style={{ width: '35%' }}>Jumlah Penduduk Miskin</TableTh>
-                <TableTh style={{ width: '20%' }}>Edit</TableTh>
-                <TableTh style={{ width: '20%' }}>Delete</TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Tahun
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '35%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Jumlah Penduduk Miskin
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Edit
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Delete
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.year}</TableTd>
-                    <TableTd>{item.totalPoorPopulation}</TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.year}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.totalPoorPopulation}
+                      </Text>
+                    </TableTd>
                     <TableTd>
                       <Button
                         variant="light"
@@ -158,7 +189,9 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={4}>
                     <Center py={20}>
-                      <Text color="dimmed">Tidak ada data yang cocok</Text>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -166,6 +199,64 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Stack hiddenFrom="md" gap="xs">
+          {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}>
+                      Tahun
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {item.year}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Jumlah Penduduk Miskin
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {item.totalPoorPopulation}
+                    </Text>
+                  </Box>
+                  <Group justify="flex-end" mt="xs">
+                    <Button
+                      variant="light"
+                      color="green"
+                      size="xs"
+                      onClick={() =>
+                        router.push(`/admin/ekonomi/jumlah-penduduk-miskin/${item.id}`)
+                      }
+                    >
+                      <IconEdit size={16} />
+                    </Button>
+                    <Button
+                      variant="light"
+                      color="red"
+                      size="xs"
+                      disabled={stateJPM.delete.loading}
+                      onClick={() => {
+                        setSelectedId(item.id);
+                        setModalHapus(true);
+                      }}
+                    >
+                      <IconTrash size={16} />
+                    </Button>
+                  </Group>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py={20}>
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data yang cocok
+              </Text>
+            </Center>
+          )}
+        </Stack>
       </Paper>
 
       {/* Pagination */}
@@ -185,9 +276,9 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
       </Center>
 
       {/* Bar Chart */}
-      <Paper bg={colors['white-1']} p="md" mt="lg" withBorder radius="md">
-        <Stack>
-          <Title order={4} mb="sm">
+      <Paper bg={colors['white-1']} p={{ base: 'sm', md: 'md' }} mt="lg" withBorder radius="md">
+        <Stack gap="xs">
+          <Title order={4} lh={1.2} mb="sm">
             Grafik Jumlah Penduduk Miskin
           </Title>
           {mounted && chartData.length > 0 ? (
@@ -198,14 +289,14 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
                 value: item.totalPoorPopulation,
               }))}
               dataKey="name"
-              series={[
-                { name: 'value', color: colors['blue-button'] },
-              ]}
+              series={[{ name: 'value', color: colors['blue-button'] }]}
               withTooltip
               valueFormatter={(v) => `${v.toLocaleString()} jiwa`}
             />
           ) : (
-            <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+            <Text c="dimmed" fz={{ base: 'xs', md: 'sm' }} lh={1.4}>
+              Belum ada data untuk ditampilkan dalam grafik
+            </Text>
           )}
         </Stack>
       </Paper>
@@ -217,8 +308,8 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
         onConfirm={handleDelete}
         text="Apakah anda yakin ingin menghapus data ini?"
       />
-    </Box>
+    </Stack>
   );
 }
 
-export default JumlahPendudukMiskin;
+export default JumlahPendudukMiskin;

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

@@ -2,6 +2,7 @@
 'use client'
 import colors from '@/con/colors';
 import {
+  Box,
   ScrollArea,
   Stack,
   Tabs,
@@ -61,36 +62,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
-        <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",
-            }}
+        <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%"
           >
-            {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,
-                }}
-              >
-                {tab.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+
+            <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

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

@@ -1,6 +1,28 @@
+'use client'
+import { usePathname } from "next/navigation";
 import LayoutTabs from "./_lib/layoutTabs";
+import { Box } from "@mantine/core";
 
 export default 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 (
     <LayoutTabs>
       {children}

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

@@ -93,7 +93,7 @@ function EditGrafikBerdasarkanPendidikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button
           variant="subtle"

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

@@ -51,7 +51,7 @@ function CreateGrafikBerdasarkanPendidikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />

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

@@ -7,6 +7,7 @@ import {
   Button,
   Center,
   Flex,
+  Group,
   Pagination,
   Paper,
   Skeleton,
@@ -20,7 +21,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -51,6 +52,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const handleDelete = async () => {
     if (selectedId) {
@@ -64,8 +66,8 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
   const { data, page, totalPages, loading, load } = stategrafik.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   useEffect(() => {
     if (stategrafik.findMany.data) {
@@ -103,18 +105,20 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'lg' }}>
         <Skeleton height={500} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
-      {/* Table Data */}
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Flex justify="space-between" align="center" mb="md">
-          <Title order={4}>List Pengangguran Berdasarkan Pendidikan</Title>
+    <Stack py={{ base: 'sm', md: 'lg' }} gap='md'>
+      {/* Section: List Table */}
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
+        <Flex visibleFrom='md' justify="space-between" align="center" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            List Pengangguran Berdasarkan Pendidikan
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -129,17 +133,43 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
           </Button>
         </Flex>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+        <Group hiddenFrom='md' align="center" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            List Pengangguran Berdasarkan Pendidikan
+          </Title>
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() =>
+              router.push(
+                '/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create',
+              )
+            }
+          >
+            Tambah Baru
+          </Button>
+        </Group>
+
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>SD</TableTh>
-                <TableTh>SMP</TableTh>
-                <TableTh>SMA</TableTh>
-                <TableTh>D3</TableTh>
-                <TableTh>S1</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '16%' }}>SD</TableTh>
+                <TableTh style={{ width: '16%' }}>SMP</TableTh>
+                <TableTh style={{ width: '16%' }}>SMA</TableTh>
+                <TableTh style={{ width: '16%' }}>D3</TableTh>
+                <TableTh style={{ width: '16%' }}>S1</TableTh>
+                <TableTh style={{ width: '10%' }}>Edit</TableTh>
+                <TableTh style={{ width: '10%' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -147,7 +177,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={7}>
                     <Center py={20}>
-                      <Text color="dimmed">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
                         Belum ada data grafik responden
                       </Text>
                     </Center>
@@ -156,11 +186,31 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
               ) : (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.SD}</TableTd>
-                    <TableTd>{item.SMP}</TableTd>
-                    <TableTd>{item.SMA}</TableTd>
-                    <TableTd>{item.D3}</TableTd>
-                    <TableTd>{item.S1}</TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.SD}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.SMP}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.SMA}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.D3}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.S1}
+                      </Text>
+                    </TableTd>
                     <TableTd>
                       <Button
                         color="green"
@@ -193,6 +243,92 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          {filteredData.length === 0 ? (
+            <Center py="sm">
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Belum ada data grafik responden
+              </Text>
+            </Center>
+          ) : (
+            <Stack gap="sm">
+              {filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="sm" radius="md">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        SD
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.SD}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        SMP
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.SMP}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        SMA
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.SMA}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        D3
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.D3}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        S1
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.S1}
+                      </Text>
+                    </Box>
+                    <Flex gap="xs" mt="xs">
+                      <Button
+                        size="compact-sm"
+                        color="green"
+                        variant="light"
+                        onClick={() =>
+                          router.push(
+                            `/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/${item.id}`,
+                          )
+                        }
+                      >
+                        <IconEdit size={16} />
+                      </Button>
+                      <Button
+                        size="compact-sm"
+                        color="red"
+                        variant="light"
+                        disabled={stategrafik.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        <IconTrash size={16} />
+                      </Button>
+                    </Flex>
+                  </Stack>
+                </Paper>
+              ))}
+            </Stack>
+          )}
+        </Box>
       </Paper>
 
       {/* Pagination */}
@@ -211,10 +347,10 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
         />
       </Center>
 
-      {/* Donut Chart */}
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md" mt="md">
-        <Stack>
-          <Title order={3} pb={10}>
+      {/* Section: Donut Chart */}
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
+        <Stack gap="md">
+          <Title order={4} lh={1.2}>
             Grafik Pengangguran Berdasarkan Pendidikan
           </Title>
           <Center>
@@ -228,7 +364,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
                 thickness={40}
               />
             ) : (
-              <Text color="dimmed">
+              <Text c="dimmed" fz={{ base: 'xs', md: 'sm' }} lh={1.4}>
                 Belum ada data untuk ditampilkan dalam grafik
               </Text>
             )}
@@ -243,8 +379,8 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
         onConfirm={handleDelete}
         text="Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan pendidikan ini?"
       />
-    </Box>
+    </Stack>
   );
 }
 
-export default GrafikBerdasarkanPendidikan;
+export default GrafikBerdasarkanPendidikan;

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

@@ -106,7 +106,7 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button
           variant="subtle"

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

@@ -49,7 +49,7 @@ function CreateGrafikBerdasarkanUsiaKerjaYangMenganggur() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
+'use client';
 import colors from '@/con/colors';
 import {
   Box,
   Button,
   Center,
   Flex,
+  Group,
   Pagination,
   Paper,
   Skeleton,
@@ -19,7 +20,7 @@ import {
   Text,
   Title,
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -51,6 +52,7 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const handleDelete = async () => {
     if (selectedId) {
@@ -64,8 +66,8 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
   const { data, page, totalPages, loading, load } = stategrafik.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   useEffect(() => {
     if (stategrafik.findMany.data) {
@@ -87,19 +89,21 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={500} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
-      {/* Table */}
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Stack>
-          <Flex justify="space-between" align="center" mb="md">
-            <Title order={4}>List Pengangguran Berdasarkan Usia Kerja</Title>
+    <Box py={{ base: 'sm', md: 'md' }}>
+      {/* Table - Desktop */}
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md" mb="lg">
+        <Stack gap="md">
+          <Flex justify="space-between" align="center" visibleFrom='md'>
+            <Title order={4} lh={1.2}>
+              List Pengangguran Berdasarkan Usia Kerja
+            </Title>
             <Button
               leftSection={<IconPlus size={18} />}
               color="blue"
@@ -112,26 +116,58 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
             </Button>
           </Flex>
 
-          <Box style={{ overflowX: 'auto' }}>
-            <Table highlightOnHover>
+          <Group align="center" hiddenFrom='md'>
+            <Title order={4} lh={1.2}>
+              List Pengangguran Berdasarkan Usia Kerja
+            </Title>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create')
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Group>
+
+          {/* Desktop Table */}
+          <Box visibleFrom="md">
+            <Table
+              highlightOnHover
+              miw={0}
+              style={{
+                tableLayout: 'fixed',
+                width: '100%',
+              }}
+            >
               <TableThead>
                 <TableTr>
-                  <TableTh>Usia 18-25</TableTh>
-                  <TableTh>Usia 26-35</TableTh>
-                  <TableTh>Usia 36-45</TableTh>
-                  <TableTh>Usia 46+</TableTh>
-                  <TableTh>Edit</TableTh>
-                  <TableTh>Delete</TableTh>
+                  <TableTh style={{ width: '20%' }}>Usia 18-25</TableTh>
+                  <TableTh style={{ width: '20%' }}>Usia 26-35</TableTh>
+                  <TableTh style={{ width: '20%' }}>Usia 36-45</TableTh>
+                  <TableTh style={{ width: '20%' }}>Usia 46+</TableTh>
+                  <TableTh style={{ width: '10%' }}>Edit</TableTh>
+                  <TableTh style={{ width: '10%' }}>Delete</TableTh>
                 </TableTr>
               </TableThead>
               <TableTbody>
                 {filteredData.length > 0 ? (
                   filteredData.map((item) => (
                     <TableTr key={item.id}>
-                      <TableTd>{item.usia18_25}</TableTd>
-                      <TableTd>{item.usia26_35}</TableTd>
-                      <TableTd>{item.usia36_45}</TableTd>
-                      <TableTd>{item.usia46_keatas}</TableTd>
+                      <TableTd fz="md" fw={500} lh={1.5}>
+                        {item.usia18_25}
+                      </TableTd>
+                      <TableTd fz="md" fw={500} lh={1.5}>
+                        {item.usia26_35}
+                      </TableTd>
+                      <TableTd fz="md" fw={500} lh={1.5}>
+                        {item.usia36_45}
+                      </TableTd>
+                      <TableTd fz="md" fw={500} lh={1.5}>
+                        {item.usia46_keatas}
+                      </TableTd>
                       <TableTd>
                         <Button
                           color="green"
@@ -160,7 +196,9 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
                   <TableTr>
                     <TableTd colSpan={6}>
                       <Center py={20}>
-                        <Text color="dimmed">Belum ada data grafik responden</Text>
+                        <Text c="dimmed" fz="sm" lh={1.4}>
+                          Belum ada data grafik responden
+                        </Text>
                       </Center>
                     </TableTd>
                   </TableTr>
@@ -168,6 +206,80 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
               </TableTbody>
             </Table>
           </Box>
+
+          {/* Mobile Card View */}
+          <Box hiddenFrom="md">
+            {filteredData.length > 0 ? (
+              <Stack gap="xs">
+                {filteredData.map((item) => (
+                  <Paper key={item.id} withBorder p="sm" radius="sm">
+                    <Stack gap={"xs"}>
+                      <Box>
+                        <Text fz="sm" fw={600} lh={1.4}>
+                          Usia 18-25
+                        </Text>
+                        <Text fz="sm" fw={500} lh={1.4}>
+                          {item.usia18_25}
+                        </Text>
+                      </Box>
+                      <Box>
+                        <Text fz="sm" fw={600} lh={1.4}>
+                          Usia 26-35
+                        </Text>
+                        <Text fz="sm" fw={500} lh={1.4}>
+                          {item.usia26_35}
+                        </Text>
+                      </Box>
+                      <Box>
+                        <Text fz="sm" fw={600} lh={1.4}>
+                          Usia 36-45
+                        </Text>
+                        <Text fz="sm" fw={500} lh={1.4}>
+                          {item.usia36_45}
+                        </Text>
+                      </Box>
+                      <Box>
+                        <Text fz="sm" fw={600} lh={1.4}>
+                          Usia 46+
+                        </Text>
+                        <Text fz="sm" fw={500} lh={1.4}>
+                          {item.usia46_keatas}
+                        </Text>
+                      </Box>
+                      <Flex gap="xs" mt="xs">
+                        <Button
+                          size="xs"
+                          color="green"
+                          onClick={() =>
+                            router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/${item.id}`)
+                          }
+                        >
+                          <IconEdit size={16} />
+                        </Button>
+                        <Button
+                          size="xs"
+                          color="red"
+                          disabled={stategrafik.delete.loading}
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
+                          <IconTrash size={16} />
+                        </Button>
+                      </Flex>
+                    </Stack>
+                  </Paper>
+                ))}
+              </Stack>
+            ) : (
+              <Center py={20}>
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Belum ada data grafik responden
+                </Text>
+              </Center>
+            )}
+          </Box>
         </Stack>
       </Paper>
 
@@ -189,8 +301,8 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
 
       {/* Donut Chart */}
       <Paper bg={colors['white-1']} p="md" mt="lg" withBorder radius="md">
-        <Stack>
-          <Title order={3} pb={10}>
+        <Stack gap="md">
+          <Title order={4} lh={1.2}>
             Grafik Pengangguran Berdasarkan Usia Kerja
           </Title>
           {donutData.length > 0 ? (
@@ -205,7 +317,9 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
               />
             </Center>
           ) : (
-            <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+            <Text c="dimmed" fz={{ base: 'xs', md: 'sm' }} lh={1.4}>
+              Belum ada data untuk ditampilkan dalam grafik
+            </Text>
           )}
         </Stack>
       </Paper>
@@ -221,4 +335,4 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
   );
 }
 
-export default GrafikBerdasarkanUsiaKerjaYangMenganggur;
+export default GrafikBerdasarkanUsiaKerjaYangMenganggur;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/edit/page.tsx

@@ -176,7 +176,7 @@ function EditDetailDataPengangguran() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <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} />

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

@@ -40,7 +40,7 @@ function DetailJumlahPengangguran() {
   const data = stateDetail.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Tombol Kembali */}
       <Button
         variant="subtle"
@@ -54,7 +54,7 @@ function DetailJumlahPengangguran() {
       {/* Paper Detail */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"

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

@@ -96,7 +96,7 @@ function CreateJumlahPengangguran() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

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

@@ -7,7 +7,7 @@ import {
   Table, TableTbody, TableTd, TableTh, TableThead, TableTr,
   Text, Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -20,7 +20,7 @@ function DetailDataPengangguran() {
   const [search, setSearch] = useState("");
 
   return (
-    <Box>
+    <Stack>
       <HeaderSearch
         title='Detail Data Pengangguran'
         placeholder='Cari bulan atau tahun...'
@@ -29,7 +29,7 @@ function DetailDataPengangguran() {
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
       <ListDetailDataPengangguran search={search} />
-    </Box>
+    </Stack>
   );
 }
 
@@ -38,6 +38,7 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
   const [mounted, setMounted] = useState(false);
   const stateDetail = useProxy(jumlahPengangguranState.jumlahPengangguran);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -49,8 +50,8 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
 
   useShallowEffect(() => {
     setMounted(true);
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   useEffect(() => {
     if (data) {
@@ -68,23 +69,25 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
     }
   }, [data]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   // Loading state
   if (loading || !data) {
     return (
-      <Stack py="md">
+      <Stack py={{ base: 'md', md: 'lg' }} gap="lg">
         <Skeleton h={500} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Stack py="md" gap="lg">
-      {/* Table Section */}
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Detail Data Pengangguran</Title>
+    <Stack py={{ base: 'md', md: 'lg' }} gap="lg">
+      {/* Table / Card Section */}
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Detail Data Pengangguran
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -95,23 +98,45 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover striped withTableBorder withRowBorders>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            withTableBorder
+            withRowBorders
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '25%' }}>Bulan</TableTh>
-                <TableTh style={{ width: '20%' }}>Terdidik</TableTh>
-                <TableTh style={{ width: '20%' }}>Tidak Terdidik</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+                <TableTh style={{ width: '30%' }}>Bulan</TableTh>
+                <TableTh style={{ width: '25%' }}>Terdidik</TableTh>
+                <TableTh style={{ width: '25%' }}>Tidak Terdidik</TableTh>
+                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.month} {item.year}</TableTd>
-                    <TableTd>{item.educatedUnemployment}</TableTd>
-                    <TableTd>{item.uneducatedUnemployment}</TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.month} {item.year}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.educatedUnemployment}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.uneducatedUnemployment}
+                      </Text>
+                    </TableTd>
                     <TableTd>
                       <Button
                         variant="light"
@@ -119,7 +144,9 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
                         onClick={() => router.push(`/admin/ekonomi/jumlah-pengangguran/${item.id}`)}
                       >
                         <IconDeviceImac size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -128,7 +155,9 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={4}>
                     <Center py={20}>
-                      <Text c="dimmed">Tidak ada data yang cocok</Text>
+                      <Text c="dimmed" fz="sm" fw={500} lh={1.4}>
+                        Tidak ada data yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -136,25 +165,85 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {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}>
+                        Bulan
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.month} {item.year}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Terdidik
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.educatedUnemployment}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Tidak Terdidik
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.uneducatedUnemployment}
+                      </Text>
+                    </Box>
+                    <Button
+                      variant="light"
+                      color="blue"
+                      fullWidth
+                      onClick={() => router.push(`/admin/ekonomi/jumlah-pengangguran/${item.id}`)}
+                      mt="xs"
+                    >
+                      <IconDeviceImac size={18} />
+                      <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                        Detail
+                      </Text>
+                    </Button>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py={20}>
+                <Text c="dimmed" fz="sm" fw={500} lh={1.4}>
+                  Tidak ada data yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-          total={totalPages}
-          mt="md"
-          mb="md"
-          color="blue"
-          radius="md"
-        />
-      </Center>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+            color="blue"
+            radius="md"
+          />
+        </Center>
+      )}
 
       {/* Chart Section */}
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Title order={4} mb="md">
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
+        <Title order={4} lh={1.2} mb={{ base: 'sm', md: 'md' }}>
           Data Pengangguran Terdidik & Tidak Terdidik
         </Title>
         {mounted && chartData.length > 0 ? (
@@ -170,11 +259,13 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
             />
           </Box>
         ) : (
-          <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+          <Text c="dimmed" fz={{ base: 'sm', md: 'md' }} fw={500} lh={1.5}>
+            Belum ada data untuk ditampilkan dalam grafik
+          </Text>
         )}
       </Paper>
     </Stack>
   );
 }
 
-export default DetailDataPengangguran;
+export default DetailDataPengangguran;

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/edit/page.tsx

@@ -125,7 +125,7 @@ function EditLowonganKerja() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <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} />

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

@@ -42,7 +42,7 @@ function DetailLowonganKerjaLokal() {
   const data = lowonganState.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}
@@ -99,12 +99,16 @@ function DetailLowonganKerjaLokal() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
+                <Box pl={8}>
+                  <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
+                </Box>
               </Box>
 
               <Box>
                 <Text fz="lg" fw="bold">Kualifikasi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.kualifikasi || '-' }} />
+                <Box pl={8}>
+                  <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.kualifikasi || '-' }} />
+                </Box>
               </Box>
 
               <Group gap="sm" mt="sm">

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

@@ -54,7 +54,7 @@ function CreateLowonganKerja() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       <Group mb="md">
         <Button
           variant="subtle"

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

@@ -18,7 +18,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -46,70 +46,87 @@ function LowonganKerjaLokal() {
 function ListLowonganKerjaLokal({ search }: { search: string }) {
   const stateLowongan = useProxy(lowonganKerjaState);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, totalPages, loading, load } = stateLowongan.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
+    <Box py="md">
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
+        <Group justify="space-between" mb="lg">
           <Title order={4}>Daftar Lowongan Kerja Lokal</Title>
-            <Button
-              leftSection={<IconPlus size={18} />}
-              color="blue"
-              variant="light"
-              onClick={() =>
-                router.push('/admin/ekonomi/lowongan-kerja-lokal/create')
-              }
-            >
-              Tambah Baru
-            </Button>
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() =>
+              router.push('/admin/ekonomi/lowongan-kerja-lokal/create')
+            }
+          >
+            Tambah Baru
+          </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '25%' }}>Pekerjaan</TableTh>
-                <TableTh style={{ width: '25%' }}>Nama Perusahaan</TableTh>
-                <TableTh style={{ width: '20%' }}>Lokasi</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.2} c="black">Pekerjaan</Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.2} c="black">Nama Perusahaan</Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.2} c="black">Lokasi</Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="sm" fw={600} lh={1.2} c="black">Aksi</Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ width: '25%' }}>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
                         {item.posisi}
                       </Text>
                     </TableTd>
-                    <TableTd style={{ width: '25%' }}>
-                      <Text truncate fz="sm" c="dimmed">
+                    <TableTd>
+                      <Text fz="sm" fw={500} lh={1.5} truncate="end">
                         {item.namaPerusahaan}
                       </Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
-                      <Text truncate fz="sm" c="dimmed">
+                    <TableTd>
+                      <Text fz="sm" fw={500} lh={1.5} truncate="end">
                         {item.lokasi}
                       </Text>
                     </TableTd>
-                    <TableTd style={{ width: '15%' }}>
+                    <TableTd>
                       <Button
                         variant="light"
                         color="blue"
@@ -118,9 +135,11 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
                             `/admin/ekonomi/lowongan-kerja-lokal/${item.id}`
                           )
                         }
+                        fullWidth
+                        radius="sm"
                       >
                         <IconDeviceImac size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml="xs">Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -128,8 +147,8 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text color="dimmed">
+                    <Center py="xl">
+                      <Text fz="sm" c="dimmed" lh={1.4}>
                         Tidak ada data lowongan kerja yang cocok
                       </Text>
                     </Center>
@@ -139,6 +158,57 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card List */}
+        <Stack gap="sm" hiddenFrom="md">
+          {filteredData.length > 0 ? (
+            filteredData.map((item) => (
+              <Paper key={item.id} withBorder p="md" radius="md">
+                <Stack gap={"xs"}>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Pekerjaan</Text>
+                    <Text fz="sm" fw={500} lh={1.5}>
+                      {item.posisi}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Nama Perusahaan</Text>
+                    <Text fz="sm" fw={500} lh={1.5}>
+                      {item.namaPerusahaan}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Lokasi</Text>
+                    <Text fz="sm" fw={500} lh={1.5}>
+                      {item.lokasi}
+                    </Text>
+                  </Box>
+                  <Button
+                    variant="light"
+                    color="blue"
+                    onClick={() =>
+                      router.push(
+                        `/admin/ekonomi/lowongan-kerja-lokal/${item.id}`
+                      )
+                    }
+                    fullWidth
+                    radius="sm"
+                    mt="xs"
+                  >
+                    <IconDeviceImac size={20} />
+                    <Text ml="xs">Detail</Text>
+                  </Button>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py="xl">
+              <Text fz="sm" c="dimmed" lh={1.4}>
+                Tidak ada data lowongan kerja yang cocok
+              </Text>
+            </Center>
+          )}
+        </Stack>
       </Paper>
 
       <Center>
@@ -159,4 +229,4 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
   );
 }
 
-export default LowonganKerjaLokal;
+export default LowonganKerjaLokal;

src/app/admin/(dashboard)/ekonomi/pasar-desa/_lib/layoutTabs.tsx

@@ -2,6 +2,7 @@
 'use client'
 import colors from '@/con/colors';
 import {
+  Box,
   ScrollArea,
   Stack,
   Tabs,
@@ -68,36 +69,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         keepMounted={false}
       >
         {/* ✅ Scroll horizontal wrapper */}
-        <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",
-            }}
-          >
-            {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,
-                }}
-              >
-                {tab.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+        <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

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

@@ -95,7 +95,7 @@ function EditKategoriProduk() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header dengan tombol back */}
       <Group mb="md">
         <Button

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

@@ -51,7 +51,7 @@ function CreateKategoriProduk() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header dengan tombol kembali */}
       <Group mb="md">
         <Button

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

@@ -1,7 +1,24 @@
 '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 { useShallowEffect } from '@mantine/hooks';
+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, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -10,81 +27,99 @@ import HeaderSearch from '../../../_com/header';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import pasarDesaState from '../../../_state/ekonomi/pasar-desa/pasar-desa';
 
-
 function KategoriProduk() {
-  const [search2, setSearch2] = useState("")
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
         title='Kategori Produk'
         placeholder='Cari nama kategori produk...'
         searchIcon={<IconSearch size={20} />}
-        value={search2}
-        onChange={(e) => setSearch2(e.currentTarget.value)}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListKategoriProduk search2={search2} />
+      <ListKategoriProduk search={search} />
     </Box>
   );
 }
 
-function ListKategoriProduk({ search2 }: { search2: string }) {
-  const statePasar = useProxy(pasarDesaState.kategoriProduk)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const router = useRouter()
+function ListKategoriProduk({ search }: { search: string }) {
+  const statePasar = useProxy(pasarDesaState.kategoriProduk);
+  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,
-  } = statePasar.findMany
+  const { data, page, totalPages, loading, load } = statePasar.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search2)
-  }, [page, search2])
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const handleHapus = () => {
     if (selectedId) {
-      statePasar.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
+      statePasar.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
     }
-  }
+  };
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
+    <Box py="md">
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Kategori Produk</Title>
-            <Button
-              leftSection={<IconPlus size={18} />}
-              color="blue"
-              variant="light"
-              onClick={() => router.push('/admin/ekonomi/pasar-desa/kategori-produk/create')}
-            >
-              Tambah Baru
-            </Button>
+          <Title order={4} lh={1.2}>
+            Daftar Kategori Produk
+          </Title>
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() =>
+              router.push('/admin/ekonomi/pasar-desa/kategori-produk/create')
+            }
+          >
+            Tambah Baru
+          </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '60%' }}>Nama Kategori</TableTh>
-                <TableTh style={{ width: '20%' }}>Edit</TableTh>
-                <TableTh style={{ width: '20%' }}>Delete</TableTh>
+                <TableTh style={{ width: '60%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Nama Kategori
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="center">
+                    Edit
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="center">
+                    Delete
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -92,38 +127,48 @@ function ListKategoriProduk({ search2 }: { search2: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
                         {item.nama}
                       </Text>
                     </TableTd>
                     <TableTd>
+                      <Center>
                         <Button
                           color="green"
                           variant="light"
-                          onClick={() => router.push(`/admin/ekonomi/pasar-desa/kategori-produk/${item.id}`)}
+                          onClick={() =>
+                            router.push(
+                              `/admin/ekonomi/pasar-desa/kategori-produk/${item.id}`
+                            )
+                          }
                         >
                           <IconEdit size={18} />
                         </Button>
+                      </Center>
                     </TableTd>
                     <TableTd>
+                      <Center>
                         <Button
                           color="red"
                           variant="light"
                           onClick={() => {
-                            setSelectedId(item.id)
-                            setModalHapus(true)
+                            setSelectedId(item.id);
+                            setModalHapus(true);
                           }}
                         >
                           <IconX size={18} />
                         </Button>
-                     </TableTd>
+                      </Center>
+                    </TableTd>
                   </TableTr>
                 ))
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
-                      <Text color="dimmed">Tidak ada data kategori produk yang cocok</Text>
+                    <Center py="xl">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data kategori produk yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -131,14 +176,69 @@ function ListKategoriProduk({ search2 }: { search2: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card */}
+        <Box hiddenFrom="md">
+          {filteredData.length > 0 ? (
+            <Stack gap="sm">
+              {filteredData.map((item) => (
+                <Paper
+                  key={item.id}
+                  withBorder
+                  p="md"
+                  radius="md"
+                  bg={colors['white-1']}
+                >
+                  <Box mb="xs">
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Nama Kategori
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {item.nama}
+                    </Text>
+                  </Box>
+                  <Group justify="flex-end" mt="md">
+                    <Button
+                      color="green"
+                      variant="light"
+                      onClick={() =>
+                        router.push(
+                          `/admin/ekonomi/pasar-desa/kategori-produk/${item.id}`
+                        )
+                      }
+                    >
+                      <IconEdit size={18} />
+                    </Button>
+                    <Button
+                      color="red"
+                      variant="light"
+                      onClick={() => {
+                        setSelectedId(item.id);
+                        setModalHapus(true);
+                      }}
+                    >
+                      <IconX size={18} />
+                    </Button>
+                  </Group>
+                </Paper>
+              ))}
+            </Stack>
+          ) : (
+            <Center py="xl">
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data kategori produk yang cocok
+              </Text>
+            </Center>
+          )}
+        </Box>
       </Paper>
 
       <Center>
         <Pagination
           value={page}
           onChange={(newPage) => {
-            load(newPage, 10)
-            window.scrollTo({ top: 0, behavior: 'smooth' })
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
@@ -156,7 +256,7 @@ function ListKategoriProduk({ search2 }: { search2: string }) {
         text='Apakah anda yakin ingin menghapus kategori produk ini?'
       />
     </Box>
-  )
+  );
 }
 
-export default KategoriProduk;
+export default KategoriProduk;

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

@@ -1,9 +1,29 @@
 'use client'
 
+import { usePathname } from "next/navigation";
 import LayoutTabs from "./_lib/layoutTabs"
+import { Box } from "@mantine/core";
 
 
-export default function Layout({children} : {children: React.ReactNode}) {
+export default 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 (
         <LayoutTabs>
             {children}

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

@@ -157,7 +157,7 @@ function EditPasarDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     <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} />

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

@@ -40,7 +40,7 @@ function DetailPasarDesa() {
   const data = statePasar.pasarDesa.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}
@@ -52,7 +52,7 @@ function DetailPasarDesa() {
 
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"

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

@@ -80,7 +80,7 @@ export default function CreatePasarDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     <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">

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

@@ -18,7 +18,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -45,28 +45,29 @@ function PasarDesa() {
 function ListPasarDesa({ search }: { search: string }) {
   const statePasar = useProxy(pasarDesaState.pasarDesa);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, totalPages, loading, load } = statePasar.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="lg">
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
+    <Box py="lg">
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Produk Pasar Desa</Title>
+          <Title order={4} lh={1.2}>Daftar Produk Pasar Desa</Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -79,15 +80,23 @@ function ListPasarDesa({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '25%' }}>Nama Produk</TableTh>
-                <TableTh style={{ width: '20%' }}>Harga Produk</TableTh>
-                <TableTh style={{ width: '15%' }}>Rating</TableTh>
-                <TableTh style={{ width: '25%' }}>Alamat Usaha</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+                <TableTh style={{ width: '25%' }}><Text fz="sm" fw={600} lh={1.4}>Nama Produk</Text></TableTh>
+                <TableTh style={{ width: '20%' }}><Text fz="sm" fw={600} lh={1.4}>Harga Produk</Text></TableTh>
+                <TableTh style={{ width: '15%' }}><Text fz="sm" fw={600} lh={1.4}>Rating</Text></TableTh>
+                <TableTh style={{ width: '25%' }}><Text fz="sm" fw={600} lh={1.4}>Alamat Usaha</Text></TableTh>
+                <TableTh style={{ width: '15%' }}><Text fz="sm" fw={600} lh={1.4}>Aksi</Text></TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -95,18 +104,18 @@ function ListPasarDesa({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
                         {item.nama}
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text>Rp.{item.harga}</Text>
+                      <Text fz="md" lh={1.5}>Rp.{item.harga}</Text>
                     </TableTd>
                     <TableTd>
-                      <Text>{item.rating || '-'}</Text>
+                      <Text fz="md" lh={1.5}>{item.rating || '-'}</Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate fz="sm" c="dimmed">
+                      <Text fz="sm" lh={1.5} c="dimmed">
                         {item.alamatUsaha || '-'}
                       </Text>
                     </TableTd>
@@ -121,7 +130,7 @@ function ListPasarDesa({ search }: { search: string }) {
                         }
                       >
                         <IconDeviceImac size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -129,8 +138,8 @@ function ListPasarDesa({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={5}>
-                    <Center py={20}>
-                      <Text color="dimmed">
+                    <Center py={32}>
+                      <Text c="dimmed" fz="sm" lh={1.5}>
                         Tidak ada produk pasar desa yang cocok
                       </Text>
                     </Center>
@@ -140,6 +149,57 @@ function ListPasarDesa({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Stack hiddenFrom="md" gap="sm">
+          {filteredData.length > 0 ? (
+            filteredData.map((item) => (
+              <Paper key={item.id} withBorder p="md" radius="md">
+                <Stack gap={'xs'}>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Nama Produk</Text>
+                    <Text fz="sm" fw={500} lh={1.4}>{item.nama}</Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Harga Produk</Text>
+                    <Text fz="sm" fw={500} lh={1.4}>Rp.{item.harga}</Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Rating</Text>
+                    <Text fz="sm" fw={500} lh={1.4}>{item.rating || '-'}</Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Alamat Usaha</Text>
+                    <Text fz="sm" fw={500} lh={1.4} c="dimmed">
+                      {item.alamatUsaha || '-'}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Button
+                      fullWidth
+                      variant="light"
+                      color="blue"
+                      onClick={() =>
+                        router.push(
+                          `/admin/ekonomi/pasar-desa/produk-pasar-desa/${item.id}`
+                        )
+                      }
+                    >
+                      <IconDeviceImac size={20} />
+                      <Text ml={5} fz="sm" fw={500} lh={1.4}>Detail</Text>
+                    </Button>
+                  </Box>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py={32}>
+              <Text c="dimmed" fz="sm" lh={1.5}>
+                Tidak ada produk pasar desa yang cocok
+              </Text>
+            </Center>
+          )}
+        </Stack>
       </Paper>
 
       <Center>
@@ -160,4 +220,4 @@ function ListPasarDesa({ search }: { search: string }) {
   );
 }
 
-export default PasarDesa;
+export default PasarDesa;

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/edit/page.tsx

@@ -142,7 +142,7 @@ function EditProgramKemiskinan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button