fix:isBanneer true banner image, dashboard recap

2025-06-18 11:37:23 +07:00 · 2025-06-18 11:37:23 +07:00 · 3742907fd0
parent b3dcdb56ee c61e7d0adb
commit 3742907fd0
5 changed files with 163 additions and 105 deletions
--- a/app/(admin)/admin/comment/review/[id]/page.tsx
+++ b/app/(admin)/admin/comment/review/[id]/page.tsx
@ -21,6 +21,7 @@ import {
 import { getArticleById } from "@/services/article";
 import Link from "next/link";
 import { postArticleComment } from "@/services/master-user";
+import Cookies from "js-cookie";

 interface DetailComments {
  id: number;
@ -98,6 +99,8 @@ export default function ReviewComment() {

  const sendComment = async () => {
    const data = {
+      commentFromEmail: "ppid@polri.go.id",
+      commentFromName: "Mabes Polri",
      articleId: detailData?.articleId,
      isPublic: true,
      message: replyValue,
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@ -140,7 +140,7 @@ export default function HeaderNews() {
                        src={
                          newsItem?.thumbnailUrl === ""
                            ? "/no-image.jpg"
-                            : newsItem?.thumbnailUrl
+                            : newsItem?.thumbnailUrl + "?isBanner=true"
                        }
                        className={`!object-cover !rounded-none ${
                          portraitMap[index]
@ -291,7 +291,7 @@ export default function HeaderNews() {
                        src={
                          newsItem?.thumbnailUrl === ""
                            ? "/no-image.jpg"
-                            : newsItem?.thumbnailUrl
+                            : newsItem?.thumbnailUrl + "?isBanner=true"
                        }
                        className={`!object-cover !rounded-none ${
                          portraitMap[index]
--- a/components/main/dashboard/dashboard-container.tsx
+++ b/components/main/dashboard/dashboard-container.tsx
@ -16,6 +16,7 @@ import {
  Checkbox,
  CheckboxGroup,
  CheckboxIcon,
+  DateRangePicker,
  Image,
  Modal,
  ModalBody,
@ -40,6 +41,7 @@ import { Fragment, useEffect, useState } from "react";
 import {
  getListArticle,
  getListArticleAdminPage,
+  getRecapArticleData,
  getStatisticSummary,
  getTopArticles,
  getUserLevelDataStat,
@ -52,8 +54,14 @@ import {
  getUnixTimestamp,
  textEllipsis,
 } from "@/utils/global";
-import { parseDate, getLocalTimeZone } from "@internationalized/date";
+import {
+  parseDate,
+  getLocalTimeZone,
+  parseZonedDateTime,
+  parseAbsoluteToLocal,
+} from "@internationalized/date";
 import { Input } from "@heroui/input";
+import { EyeIconMdi } from "@/components/icons";

 type ArticleData = Article & {
  no: number;
@ -95,12 +103,14 @@ export default function DashboardContainer() {
  );

  const [postContentDate, setPostContentDate] = useState({
-    startDate: parseDate(
-      convertDateFormatNoTimeV2(
+    start: parseZonedDateTime(
+      `${convertDateFormatNoTimeV2(
        new Date(new Date().setDate(new Date().getDate() - 7))
-      )
+      )}T00:00[Asia/Jakarta]`
+    ),
+    end: parseZonedDateTime(
+      `${convertDateFormatNoTimeV2(new Date())}T23:59[Asia/Jakarta]`
    ),
-    endDate: parseDate(convertDateFormatNoTimeV2(new Date())),
  });

  const [topContentDate, setTopContentDate] = useState({
@ -120,10 +130,15 @@ export default function DashboardContainer() {
  const [polresData, setPolresData] = useState<any>({});
  const [selectedAccordion, setSelectedAccordion] = useState<any>(new Set([]));
  const [recapArticleList, setRecapArticleList] = useState<any>([]);
-  const [timeValue, setTimeValue] = useState("--:--");
-  const [selectedUnit, setSelectedUnit] = useState("");
+  const [selectedUnit, setSelectedUnit] = useState<{
+    id: number;
+    name: string;
+  }>();
  const roleId = Cookies.get("urie");

+  const [recapArticlePage, setRecapArticlePage] = useState(1);
+  const [recapArticleTotalPage, setRecapArticleTotalPage] = useState(1);
+
  useEffect(() => {
    fetchSummary();
  }, []);
@ -176,13 +191,13 @@ export default function DashboardContainer() {
      endDate: getDate(topContentDate.endDate),
    };
    const res = await getTopArticles(req);
-    setTopPages(getTableNumber(10, res.data?.data));
+    setTopPages(getTableNumber(10, res.data?.data, "topPages"));
    setTopPagesTotalPage(res?.data?.meta?.totalPage);
  }

  useEffect(() => {
    fetchPostCount();
-  }, [postContentDate]);
+  }, [postContentDate, selectedCategory]);

  async function fetchPostCount() {
    const getDate = (data: any) => {
@ -191,16 +206,24 @@ export default function DashboardContainer() {
      }`;
    };
    const res = await getUserLevelDataStat(
-      getDate(postContentDate.startDate),
-      getDate(postContentDate.endDate),
-      getUnixTimestamp()
+      getDate(postContentDate.start),
+      getDate(postContentDate.end),
+      getUnixTimestamp(),
+      `${getTime(postContentDate.start.hour)}:${getTime(
+        postContentDate.start.minute
+      )}:00`,
+      `${getTime(postContentDate.end.hour)}:${getTime(
+        postContentDate.end.minute
+      )}:00`,
+      selectedCategory === "polda" ? "" : selectedCategory
    );
    setPostCount(getTableNumberStats(res?.data?.data));
  }

-  const getTableNumber = (limit: number, data: any) => {
+  const getTableNumber = (limit: number, data: any, type: string) => {
    if (data) {
-      const startIndex = limit * (topPagespage - 1);
+      const startIndex =
+        limit * (type == "topPages" ? topPagespage - 1 : recapArticlePage - 1);
      let iterate = 0;
      const newData = data.map((value: any) => {
        iterate++;
@ -264,16 +287,28 @@ export default function DashboardContainer() {
    }
  }, [postContentDate]);

+  const getTime = (time: number) => {
+    return time < 10 ? `0${time}` : String(time);
+  };
+
  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),
+      getDate(postContentDate.start),
+      getDate(postContentDate.end),
      getUnixTimestamp(),
+      `${getTime(postContentDate.start.hour)}:${getTime(
+        postContentDate.start.minute
+      )}:00`,
+      `${getTime(postContentDate.end.hour)}:${getTime(
+        postContentDate.end.minute
+      )}:00`,
+      "",
      id
    );
    const polresNowData = getTableNumberStats(res?.data?.data);
@ -299,18 +334,31 @@ export default function DashboardContainer() {
    }
  };

-  const openModalArticle = async (limit: number) => {
+  useEffect(() => {
+    getRecapArticle();
+  }, [recapArticlePage]);
+
+  const getRecapArticle = async (userLevelId?: number) => {
    const req = {
-      limit: `${limit}`,
-      page: topPagespage,
-      search: "",
-      sort: "desc",
-      startDate: getDate(topContentDate.startDate),
-      endDate: getDate(topContentDate.endDate),
+      id: userLevelId || selectedUnit?.id,
+      page: recapArticlePage,
+      startDate: getDate(postContentDate.start),
+      endDate: getDate(postContentDate.end),
+      startTime: `${getTime(postContentDate.start.hour)}:${getTime(
+        postContentDate.start.minute
+      )}:00`,
+      endTime: `${getTime(postContentDate.end.hour)}:${getTime(
+        postContentDate.end.minute
+      )}:00`,
    };
-    const res = await getTopArticles(req);
-    setRecapArticleList(getTableNumber(10, res.data?.data));
-    // setTopPagesTotalPage(res?.data?.meta?.totalPage);
+    const res = await getRecapArticleData(req);
+    setRecapArticleList(getTableNumber(10, res.data?.data, "recapArticle"));
+    setRecapArticleTotalPage(res?.data?.meta?.totalPage);
+  };
+
+  const openModalArticle = async (userLevelId: number) => {
+    setRecapArticlePage(1);
+    getRecapArticle(userLevelId);
    onOpen();
  };

@ -371,75 +419,28 @@ export default function DashboardContainer() {
        </div>
        <div className="w-full flex flex-col lg:flex-row gap-6 justify-center ">
          <div className="border-1 shadow-sm w-screen rounded-lg lg:w-[55%] p-6 flex flex-col text-xs lg:text-sm">
-            <div className="flex justify-between mb-4 items-center">
-              <p className="font-semibold">
+            <div className="flex flex-col md:flex-row md:justify-between mb-4 items-center gap-2 md:gap-0">
+              <p className="font-semibold self-start">
                Rekapitulasi Post Berita Polda/Polres Pada Website
              </p>
-              <div className="w-[300px] flex flex-row gap-2 justify-between font-semibold items-center">
-                <Popover
-                  placement="bottom"
-                  classNames={{ content: ["!bg-transparent", "p-0"] }}
-                >
-                  <PopoverTrigger>
-                    <a className="cursor-pointer">
-                      {convertDateFormatNoTime(postContentDate.startDate)}
-                    </a>
-                  </PopoverTrigger>
-                  <PopoverContent className="bg-transparent">
-                    <Calendar
-                      value={postContentDate.startDate}
-                      onChange={(e) =>
-                        setPostContentDate({
-                          startDate: e,
-                          endDate: postContentDate.endDate,
-                        })
-                      }
-                      maxValue={postContentDate.endDate}
-                    />
-                  </PopoverContent>
-                </Popover>
-                -
-                <Popover
-                  placement="bottom"
-                  classNames={{ content: ["!bg-transparent", "p-0"] }}
-                >
-                  <PopoverTrigger>
-                    <a className="cursor-pointer ">
-                      {convertDateFormatNoTime(postContentDate.endDate)}
-                    </a>
-                  </PopoverTrigger>
-                  <PopoverContent className="bg-transparent">
-                    <Calendar
-                      value={postContentDate.endDate}
-                      onChange={(e) =>
-                        setPostContentDate({
-                          startDate: postContentDate.startDate,
-                          endDate: e,
-                        })
-                      }
-                      minValue={postContentDate.startDate}
-                    />
-                  </PopoverContent>
-                </Popover>
-                <Input
-                  type="time"
-                  variant="bordered"
-                  className="w-fit "
-                  value={timeValue}
-                  onValueChange={setTimeValue}
-                  endContent={
-                    <a>
-                      <CheckboxIcon />
-                    </a>
-                  }
-                  classNames={{
-                    inputWrapper: [
-                      "border-none rounded-lg !h-[30px] lg:h-[40px]",
-                      "dark:group-data-[focused=false]:bg-transparent border-none",
-                    ],
-                  }}
-                />
-              </div>
+              <DateRangePicker
+                hideTimeZone
+                value={postContentDate}
+                onChange={(e) => {
+                  e && setPostContentDate(e);
+                }}
+                label="Tanggal dan Waktu"
+                visibleMonths={2}
+                hourCycle={24}
+                className="w-fit text-sm self-end"
+                classNames={{
+                  timeInputLabel: "text-xs",
+                  innerWrapper: "text-xs",
+                  inputWrapper: "border-1",
+                }}
+                size="sm"
+                variant="bordered"
+              />
            </div>
            <div className="flex flex-row border-b-1 gap-1 py-1 items-center">
              <div className="w-[5%]">NO</div>
@ -474,7 +475,7 @@ export default function DashboardContainer() {
              </div>
            </div>
            <div className="flex flex-col gap-1 lg:h-[500px] overflow-y-auto">
-              {roleId && Number(roleId) < 3 ? (
+              {roleId && Number(roleId) < 3 && selectedCategory == "polda" ? (
                <Accordion
                  selectedKeys={selectedAccordion}
                  onSelectionChange={(e) => handleSelectionChange(e)}
@ -522,16 +523,20 @@ export default function DashboardContainer() {
                              <a
                                onClick={() => {
                                  if (list?.totalArticle !== 0) {
-                                    setSelectedUnit(child?.userLevelName);
-                                    // openModalArticle(list?.totalArticle);
+                                    setSelectedUnit({
+                                      name: child?.userLevelName,
+                                      id: child.userLevelId,
+                                    });
+                                    openModalArticle(child.userLevelId);
                                  }
                                }}
-                                className={`w-[10%] text-start cursor-pointer ${
+                                className={`w-[10%] text-start cursor-pointer flex flex-row gap-1 items-center justify-end ${
                                  list?.totalArticle === 0 &&
-                                  "bg-red-600 text-white cursor-default"
+                                  "bg-red-600 text-white cursor-default "
                                }`}
                              >
                                {child?.totalArticle}
+                                <EyeIconMdi size={12} />
                              </a>
                            </div>
                          )
@ -555,7 +560,24 @@ export default function DashboardContainer() {
                        list?.totalArticle === 0 && "bg-red-600 text-white"
                      }`}
                    >
-                      {list?.totalArticle}
+                      <a
+                        onClick={() => {
+                          if (list?.totalArticle !== 0) {
+                            setSelectedUnit({
+                              name: list?.userLevelName,
+                              id: list.userLevelId,
+                            });
+                            openModalArticle(list.userLevelId);
+                          }
+                        }}
+                        className={`w-[10%] text-start cursor-pointer flex flex-row gap-1 items-center justify-end ${
+                          list?.totalArticle === 0 &&
+                          "bg-red-600 text-white cursor-default "
+                        }`}
+                      >
+                        {list?.totalArticle}
+                        <EyeIconMdi />
+                      </a>
                    </div>
                  </div>
                ))
@ -792,9 +814,9 @@ export default function DashboardContainer() {
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">
-                {selectedUnit} List Content
+                {selectedUnit?.name} List Content
              </ModalHeader>
-              <ModalBody>
+              <ModalBody className="flex flex-col gap-2">
                <div className="grid grid-cols-12 text-xs ">
                  <div className="col-span-1 font-bold">No</div>
                  <div className="col-span-9 text-center font-bold">Judul</div>
@ -820,6 +842,25 @@ export default function DashboardContainer() {
                      ))}
                  </div>
                </div>
+                {recapArticleList?.length > 0 && (
+                  <div className="my-2 w-full flex justify-center">
+                    <Pagination
+                      isCompact
+                      showControls
+                      showShadow
+                      color="primary"
+                      classNames={{
+                        base: "bg-transparent",
+                        wrapper: "bg-transparent",
+                        item: "w-fit px-3",
+                        cursor: "w-fit px-3",
+                      }}
+                      page={recapArticlePage}
+                      total={recapArticleTotalPage}
+                      onChange={(page) => setRecapArticlePage(page)}
+                    />
+                  </div>
+                )}
              </ModalBody>
            </>
          )}
--- a/components/main/detail/comment.tsx
+++ b/components/main/detail/comment.tsx
@ -91,6 +91,8 @@ export default function Comment(props: { id: string | null }) {
      }

      const data = {
+        commentFromName: values.name,
+        commentFromEmail: values.email,
        articleId: Number(id),
        isPublic: false,
        message: values.comment,
--- a/services/article.ts
+++ b/services/article.ts
@ -126,6 +126,15 @@ export async function getArticleById(id: any) {
  };
  return await httpGet(`/articles/${id}`, headers);
 }
+export async function getRecapArticleData(data: any) {
+  const headers = {
+    "content-type": "application/json",
+  };
+  return await httpGet(
+    `/articles?page=${data.page}&userLevelId=${data.id}&startDate=${data.startDate}&endDate=${data.endDate}&startTime=${data.startTime}&endTime=${data.endTime}`,
+    headers
+  );
+}

 // export async function deleteArticle(id: string) {
 //   const headers = {
@ -191,6 +200,9 @@ export async function getUserLevelDataStat(
  startDate: string,
  endDate: string,
  timeStamp: number,
+  startTime: string,
+  endTime: string,
+  levelType: string,
  levelId?: number
 ) {
  // const headers = {
@ -198,9 +210,9 @@ export async function getUserLevelDataStat(
  //   Authorization: `Bearer ${token}`,
  // };
  return await httpGetInterceptor(
-    `/articles/statistic/user-levels?startDate=${startDate}&endDate=${endDate}&timeStamp=${timeStamp}&userLevelId=${
+    `/articles/statistic/user-levels?startDate=${startDate}&endDate=${endDate}&startTime=${startTime}&endTime=${endTime}&levelType=${levelType}&userLevelId=${
      levelId || ""
-    }`
+    }&timeStamp=${timeStamp}`
  );
 }
 export async function getStatisticMonthly(year: string, timeStamp: number) {