[QUDO-221, 195] feat:new ui rekap admin dashboard, fix:landing mobile ver

2025-06-13 15:01:48 +07:00 · 2025-06-13 15:01:48 +07:00 · 581712953e
parent ace3decdaa
commit 581712953e
4 changed files with 165 additions and 25 deletions
--- a/components/landing/banner-new.tsx
+++ b/components/landing/banner-new.tsx
@ -222,7 +222,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 ? (
@ -241,7 +241,7 @@ export default function BannerHumasNew() {
                alt={`humasbanner-${index}`}
                width={1960}
                height={1080}
-                className="w-screen h-[45vh] lg:h-[93vh] object-cover object-center opacity-[25] dark:opacity-70 rounded-none"
+                className="w-screen h-[60vh] lg:h-[93vh] object-cover object-center opacity-[25] dark:opacity-70 rounded-none"
              />
            </Link>
          ))
--- 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";
@ -103,6 +106,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();
@ -171,7 +178,7 @@ export default function DashboardContainer() {
      getDate(postContentDate.startDate),
      getDate(postContentDate.endDate)
    );
-    setPostCount(getTableNumber(10, res?.data?.data));
+    setPostCount(getTableNumberStats(res?.data?.data));
  }

  const getTableNumber = (limit: number, data: any) => {
@ -187,6 +194,18 @@ export default function DashboardContainer() {
    }
  };

+  const getTableNumberStats = (data: any) => {
+    if (data) {
+      let iterate = 0;
+      const newData = data.map((value: any) => {
+        iterate++;
+        value.no = iterate;
+        return value;
+      });
+      return newData;
+    }
+  };
+
  const getMonthYear = (date: any) => {
    return date.month + " " + date.year;
  };
@ -213,6 +232,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">
@ -330,22 +393,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">
--- a/services/article.ts
+++ b/services/article.ts
@ -7,6 +7,10 @@ import {
 } from "./http-config/axios-base-service";
 import Cookies from "js-cookie";
 import { stat } from "fs";
+import {
+  httpGetInterceptor,
+  httpPostInterceptor,
+} from "./http-config/http-interceptor-services";

 const token = Cookies.get("access_token");
 export async function getListArticle(props: PaginationRequest) {
@ -184,14 +188,19 @@ export async function deleteArticleFiles(id: number) {
  return await httpPut(`article-files/delete/${id}`, headers);
 }

-export async function getUserLevelDataStat(startDate: string, endDate: string) {
-  const headers = {
-    "content-type": "application/json",
-    Authorization: `Bearer ${token}`,
-  };
-  return await httpGet(
-    `/articles/statistic/user-levels?startDate=${startDate}&endDate=${endDate}`,
-    headers
+export async function getUserLevelDataStat(
+  startDate: string,
+  endDate: string,
+  levelId?: number
+) {
+  // const headers = {
+  //   "content-type": "application/json",
+  //   Authorization: `Bearer ${token}`,
+  // };
+  return await httpGetInterceptor(
+    `/articles/statistic/user-levels?startDate=${startDate}&endDate=${endDate}&userLevelId=${
+      levelId || ""
+    }`
  );
 }
 export async function getStatisticMonthly(year: string) {
--- a/services/http-config/http-interceptor-services.ts
+++ b/services/http-config/http-interceptor-services.ts
@ -1,6 +1,6 @@
 import { useRouter } from "next/navigation";
-import axiosInterceptorInstance from "./axios-interceptor-instance";
 import Cookies from "js-cookie";
+import axiosInterceptorInstance from "./axios-interceptor-service";

 export async function httpGetInterceptor(pathUrl: any) {
  const response = await axiosInterceptorInstance
@ -28,7 +28,11 @@ export async function httpGetInterceptor(pathUrl: any) {
  }
 }

-export async function httpPostInterceptor(pathUrl: any, data: any, headers?: any) {
+export async function httpPostInterceptor(
+  pathUrl: any,
+  data: any,
+  headers?: any
+) {
  const response = await axiosInterceptorInstance
    .post(pathUrl, data, { headers })
    .catch((error) => error.response);