diff --git a/components/form/login.tsx b/components/form/login.tsx
index ac0abb9..9cf441f 100644
--- a/components/form/login.tsx
+++ b/components/form/login.tsx
@@ -258,6 +258,9 @@ export default function Login() {
     Cookies.set("urie", profile?.userRoleId, {
       expires: 1,
     });
+    // Cookies.set("roleName", profile?.roleName, {
+    //   expires: 1,
+    // });
     // Cookies.set("masterPoldaId", profile?.masterPoldaId, {
     //   expires: 1,
     // });
diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index e6d18cd..9a97ec5 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -296,7 +296,7 @@ export default function HeaderNews() {
                         className={`!object-cover !rounded-none ${
                           portraitMap[index]
                             ? "!w-auto object-cover mx-auto"
-                            : "w-full"
+                            : "!w-full"
                         } !h-[500px]`}
                       />
 
diff --git a/components/landing/banner-new.tsx b/components/landing/banner-new.tsx
index 054b0af..b169213 100644
--- a/components/landing/banner-new.tsx
+++ b/components/landing/banner-new.tsx
@@ -220,7 +220,7 @@ export default function BannerHumasNew() {
   return (
     <div className="h-fit relative text-white overflow-hidden">
       <div
-        className="flex w-full h-[45vh] lg:h-[93vh] transition-transform duration-700 ease-in-out"
+        className="flex w-full h-[60vh] lg:h-[93vh] transition-transform duration-700 ease-in-out"
         style={{ transform: `translateX(-${currentIndex * 100}%)` }}
       >
         {jumbotronList?.length > 0 ? (
@@ -237,7 +237,9 @@ export default function BannerHumasNew() {
                     : img?.contentFileUrl
                 }
                 alt={`humasbanner-${index}`}
-                className="w-screen h-[45vh] lg:h-[93vh] object-cover object-center opacity-[25] dark:opacity-70 rounded-none"
+                width={1960}
+                height={1080}
+                className="w-screen h-[60vh] lg:h-[93vh] object-cover object-center opacity-[25] dark:opacity-70 rounded-none"
               />
             </Link>
           ))
diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx
index cf2c406..1b3c8cb 100644
--- a/components/main/dashboard/dashboard-container.tsx
+++ b/components/main/dashboard/dashboard-container.tsx
@@ -9,6 +9,8 @@ import {
 } from "@/components/icons/dashboard-icon";
 import { Submenu1Icon } from "@/components/icons/sidebar-icon";
 import {
+  Accordion,
+  AccordionItem,
   Button,
   Calendar,
   Checkbox,
@@ -21,6 +23,7 @@ import {
   Select,
   SelectItem,
   SelectSection,
+  Skeleton,
 } from "@heroui/react";
 import ApexChartColumn from "./chart/column-chart";
 import ApexChartDonut from "./chart/donut-chart";
@@ -104,6 +107,10 @@ export default function DashboardContainer() {
 
   const [topPages, setTopPages] = useState<TopPages[]>([]);
   const [postCount, setPostCount] = useState<PostCount[]>([]);
+  const [polresData, setPolresData] = useState<any>({});
+  const [selectedAccordion, setSelectedAccordion] = useState<any>(new Set([]));
+
+  const roleId = Cookies.get("urie");
 
   useEffect(() => {
     fetchSummary();
@@ -176,7 +183,7 @@ export default function DashboardContainer() {
       getDate(postContentDate.endDate),
       getUnixTimestamp()
     );
-    setPostCount(getTableNumber(10, res?.data?.data));
+    setPostCount(getTableNumberStats(res?.data?.data));
   }
 
   const getTableNumber = (limit: number, data: any) => {
@@ -192,6 +199,23 @@ export default function DashboardContainer() {
     }
   };
 
+  const getTableNumberStats = (data: any) => {
+    if (data) {
+      let iterate = 0;
+      const newData = data
+        .filter(
+          (value: any) =>
+            value.userLevelName !== "SATWIL" && value.userLevelName !== "SATKER"
+        )
+        .map((value: any) => {
+          iterate++;
+          value.no = iterate;
+          return value;
+        });
+      return newData;
+    }
+  };
+
   const getMonthYear = (date: any) => {
     return date.month + " " + date.year;
   };
@@ -218,6 +242,50 @@ export default function DashboardContainer() {
     return month + " " + year;
   };
 
+  useEffect(() => {
+    const temp = Array.from(selectedAccordion);
+    console.log("selecette", temp);
+    if (temp.length > 0) {
+      for (const element of temp) {
+        getPolresData(Number(element));
+      }
+    }
+  }, [postContentDate]);
+
+  const getPolresData = async (id: number) => {
+    const getDate = (data: any) => {
+      return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${
+        data.day < 10 ? `0${data.day}` : data.day
+      }`;
+    };
+    const res = await getUserLevelDataStat(
+      getDate(postContentDate.startDate),
+      getDate(postContentDate.endDate),
+      id
+    );
+    const polresNowData = getTableNumberStats(res?.data?.data);
+
+    setPolresData((prev: any) => ({
+      ...prev,
+      [id]: polresNowData,
+    }));
+  };
+
+  const handleSelectionChange = (e: any) => {
+    const prev = selectedAccordion;
+    const current = e;
+
+    const currentArray = Array.from(current);
+
+    const added = Number(currentArray.filter((item) => !prev.has(item))[0]);
+
+    setSelectedAccordion(current);
+
+    if (added) {
+      getPolresData(added);
+    }
+  };
+
   return (
     <div className="px-2 lg:p-8 flex justify-center">
       <div className="w-full flex flex-col gap-6">
@@ -335,22 +403,86 @@ export default function DashboardContainer() {
               </div>
             </div>
             <div className="flex flex-col gap-1 lg:h-[500px] overflow-y-auto">
-              {postCount?.map((list) => (
-                <div
-                  key={list.userLevelId}
-                  className="flex flex-row border-b-1 gap-1 py-1"
+              {roleId && Number(roleId) < 3 ? (
+                <Accordion
+                  selectedKeys={selectedAccordion}
+                  onSelectionChange={(e) => handleSelectionChange(e)}
+                  selectionMode="multiple"
+                  className="w-full"
                 >
-                  <div className="w-[5%]">{list?.no}</div>
-                  <div className="w-[85%]">{list?.userLevelName}</div>
+                  {postCount?.map((list) => (
+                    <AccordionItem
+                      key={list.userLevelId}
+                      aria-label={list.userLevelName}
+                      title={
+                        <div
+                          key={list.userLevelId}
+                          className="flex flex-row gap-1 py-1"
+                        >
+                          <div className="w-[5%]">{list?.no}</div>
+                          <div className="w-[85%]">{list?.userLevelName}</div>
+                          <div
+                            className={`w-[10%] text-center ${
+                              list?.totalArticle === 0 &&
+                              "bg-red-600 text-white"
+                            }`}
+                          >
+                            {list?.totalArticle}
+                          </div>
+                        </div>
+                      }
+                    >
+                      {polresData[list?.userLevelId] ? (
+                        polresData[list?.userLevelId]?.map(
+                          (child: any, index: number) => (
+                            <div
+                              key={child.userLevelId}
+                              className={`flex flex-row gap-1 py-1 ${
+                                index ===
+                                polresData[list?.userLevelId].length - 1
+                                  ? ""
+                                  : "border-b-1"
+                              }`}
+                            >
+                              <div className="w-[5%]"></div>
+                              <div className="w-[85%]">
+                                {child?.userLevelName}
+                              </div>
+                              <div
+                                className={`w-[10%] text-start ${
+                                  list?.totalArticle === 0 &&
+                                  "bg-red-600 text-white"
+                                }`}
+                              >
+                                {child?.totalArticle}
+                              </div>
+                            </div>
+                          )
+                        )
+                      ) : (
+                        <Skeleton className="h-3 w-full rounded-lg" />
+                      )}
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+              ) : (
+                postCount?.map((list) => (
                   <div
-                    className={`w-[10%] text-center ${
-                      list?.totalArticle === 0 && "bg-red-600 text-white"
-                    }`}
+                    key={list.userLevelId}
+                    className="flex flex-row border-b-1 gap-1 py-1"
                   >
-                    {list?.totalArticle}
+                    <div className="w-[5%]">{list?.no}</div>
+                    <div className="w-[85%]">{list?.userLevelName}</div>
+                    <div
+                      className={`w-[10%] text-center ${
+                        list?.totalArticle === 0 && "bg-red-600 text-white"
+                      }`}
+                    >
+                      {list?.totalArticle}
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))
+              )}
             </div>
           </div>
           <div className="flex flex-col w-full lg:w-[45%] gap-6 shadow-md bg-white dark:bg-[#18181b] rounded-lg p-8 text-sm">
diff --git a/services/article.ts b/services/article.ts
index 0f7d1c4..f7cb2ed 100644
--- a/services/article.ts
+++ b/services/article.ts
@@ -2,10 +2,9 @@ import { PaginationRequest } from "@/types/globals";
 import { httpGet, httpPost, httpPut } from "./http-config/axios-base-service";
 import Cookies from "js-cookie";
 import { stat } from "fs";
-import axiosInterceptorInstanceHumas from "./http-config/konten-humas-base-service";
 import {
-  httpDeleteInterceptor,
   httpGetInterceptor,
+  httpPostInterceptor,
 } from "./http-config/http-interceptor-services";
 
 const token = Cookies.get("access_token");
@@ -191,14 +190,16 @@ export async function deleteArticleFiles(id: number) {
 export async function getUserLevelDataStat(
   startDate: string,
   endDate: string,
-  timeStamp: number
+  levelId?: number
 ) {
-  const headers = {
-    "content-type": "application/json",
-    Authorization: `Bearer ${token}`,
-  };
+  // const headers = {
+  //   "content-type": "application/json",
+  //   Authorization: `Bearer ${token}`,
+  // };
   return await httpGetInterceptor(
-    `/articles/statistic/user-levels?startDate=${startDate}&endDate=${endDate}&timeStamp=${timeStamp}`
+    `/articles/statistic/user-levels?startDate=${startDate}&endDate=${endDate}&userLevelId=${
+      levelId || ""
+    }`
   );
 }
 export async function getStatisticMonthly(year: string, timeStamp: number) {