diff --git a/src/components/DesaSetting.tsx b/src/components/DesaSetting.tsx
index b5361b1..39bf3f4 100644
--- a/src/components/DesaSetting.tsx
+++ b/src/components/DesaSetting.tsx
@@ -207,7 +207,7 @@ export default function DesaSetting({
               </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
-              {list?.map((v: any) => (
+              {list.length > 0 && list?.map((v: any) => (
                 <Table.Tr key={v.id}>
                   <Table.Td>{v.name}</Table.Td>
                   <Table.Td>
diff --git a/src/components/KategoriPelayananSurat.tsx b/src/components/KategoriPelayananSurat.tsx
index f39ba3e..6c0b5a2 100644
--- a/src/components/KategoriPelayananSurat.tsx
+++ b/src/components/KategoriPelayananSurat.tsx
@@ -4,19 +4,17 @@ import {
   Button,
   Divider,
   Flex,
-  Grid,
   Group,
-  Input,
   List,
   Modal,
   Stack,
   Table,
   Text,
   Title,
-  Tooltip,
+  Tooltip
 } from "@mantine/core";
 import { useDisclosure, useShallowEffect } from "@mantine/hooks";
-import { IconEdit, IconEye, IconPlus, IconTrash } from "@tabler/icons-react";
+import { IconEye, IconTrash } from "@tabler/icons-react";
 import type { JsonValue } from "generated/prisma/runtime/library";
 import { useState } from "react";
 import useSWR from "swr";
@@ -625,7 +623,7 @@ export default function KategoriPelayananSurat({
               </Table.Tr>
             </Table.Thead>
             <Table.Tbody>
-              {list?.map((v: any) => (
+              {list.length > 0 && list?.map((v: any) => (
                 <Table.Tr key={v.id}>
                   <Table.Td>{v.name}</Table.Td>
                   <Table.Td>
diff --git a/src/pages/scr/dashboard/dashboard_layout.tsx b/src/pages/scr/dashboard/dashboard_layout.tsx
index 6e90d54..046c5ce 100644
--- a/src/pages/scr/dashboard/dashboard_layout.tsx
+++ b/src/pages/scr/dashboard/dashboard_layout.tsx
@@ -73,7 +73,7 @@ export default function DashboardLayout() {
     <AppShell
       padding="lg"
       navbar={{
-        width: 260,
+        width: 300,
         breakpoint: "sm",
         collapsed: { mobile: !opened, desktop: !opened },
       }}
@@ -215,8 +215,6 @@ function NavigationDashboard() {
   const location = useLocation();
   const [permissions, setPermissions] = useState<JsonValue[]>([]);
 
-  console.log(location)
-
   useEffect(() => {
     async function fetchPermissions() {
       const { data } = await apiFetch.api.user.find.get();
@@ -292,14 +290,19 @@ function NavigationDashboard() {
         .map((item) => (
           <NavLink
             key={item.path}
-            active={isActive(item.path as keyof typeof clientRoute)}
+            active={isActive(item.path as keyof typeof clientRoute) ||
+              (location.pathname == "/scr/dashboard/pelayanan-surat/detail-pelayanan" && item.path == "/scr/dashboard/pelayanan-surat/list-pelayanan") ||
+              (location.pathname == "/scr/dashboard/pengaduan/detail" && item.path == "/scr/dashboard/pengaduan/list") ||
+              (location.pathname == "/scr/dashboard/warga/detail-warga" && item.path == "/scr/dashboard/warga/list-warga")}
             leftSection={item.icon}
             label={
               <Flex align="center" gap={6}>
                 <Text fw={500}>{item.label}</Text>
-                {(isActive(item.path as keyof typeof clientRoute) ||
+                {(
+                  isActive(item.path as keyof typeof clientRoute) ||
                   (location.pathname == "/scr/dashboard/pelayanan-surat/detail-pelayanan" && item.path == "/scr/dashboard/pelayanan-surat/list-pelayanan") ||
-                  (location.pathname == "/scr/dashboard/pengaduan/detail" && item.path == "/scr/dashboard/pengaduan/list")
+                  (location.pathname == "/scr/dashboard/pengaduan/detail" && item.path == "/scr/dashboard/pengaduan/list") ||
+                  (location.pathname == "/scr/dashboard/warga/detail-warga" && item.path == "/scr/dashboard/warga/list-warga")
                 )
                   && (
                     <Badge
@@ -319,7 +322,10 @@ function NavigationDashboard() {
               navigate(clientRoutes[item.path as keyof typeof clientRoute])
             }
             style={{
-              backgroundColor: isActive(item.path as keyof typeof clientRoute)
+              backgroundColor: isActive(item.path as keyof typeof clientRoute) ||
+                (location.pathname == "/scr/dashboard/pelayanan-surat/detail-pelayanan" && item.path == "/scr/dashboard/pelayanan-surat/list-pelayanan") ||
+                (location.pathname == "/scr/dashboard/pengaduan/detail" && item.path == "/scr/dashboard/pengaduan/list") ||
+                (location.pathname == "/scr/dashboard/warga/detail-warga" && item.path == "/scr/dashboard/warga/list-warga")
                 ? "rgba(0,255,200,0.1)"
                 : "transparent",
               borderRadius: "8px",
diff --git a/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx b/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx
index 9970d37..c2a1e2d 100644
--- a/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx
+++ b/src/pages/scr/dashboard/pelayanan-surat/detail_pelayanan_page.tsx
@@ -275,6 +275,7 @@ function DetailDataPengajuan({
   }
 
   useShallowEffect(() => {
+    console.log('jalan', viewImg)
     if (viewImg) {
       setOpenedPreviewFile(true);
     }
@@ -374,6 +375,7 @@ function DetailDataPengajuan({
         open={openedPreviewFile && !_.isEmpty(viewImg.file)}
         onClose={() => {
           setOpenedPreviewFile(false);
+          setViewImg({ file: "", folder: "" })
         }}
         folder={viewImg.folder}
         fileName={viewImg.file}
diff --git a/src/pages/scr/dashboard/setting/detail_setting_page.tsx b/src/pages/scr/dashboard/setting/detail_setting_page.tsx
index b16fc8c..6434491 100644
--- a/src/pages/scr/dashboard/setting/detail_setting_page.tsx
+++ b/src/pages/scr/dashboard/setting/detail_setting_page.tsx
@@ -18,12 +18,13 @@ import {
 import type { JsonValue } from "generated/prisma/runtime/library";
 import _ from "lodash";
 import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 export default function DetailSettingPage() {
   const { search } = useLocation();
   const query = new URLSearchParams(search);
   const type = query.get("type");
+  const navigate = useNavigate();
   const [permissions, setPermissions] = useState<JsonValue[]>([]);
   const dataMenu = [
     { title: "Dashboard", link: "/scr/dashboard/dashboard-home", active: false },
@@ -114,7 +115,7 @@ export default function DetailSettingPage() {
               .map((item) => (
                 <NavLink
                   key={item.key}
-                  href={"?type=" + item.path}
+                  onClick={()=>{navigate("?type=" + item.path)}}
                   label={item.label}
                   leftSection={item.icon}
                   active={