From b38b72f7085abc89dc79361c416b4c7c38b0e0be Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Fri, 23 May 2025 00:24:14 +0700
Subject: [PATCH] fix:conten detail image, feat:author, date filter

---
 components/page/detail-news.tsx    |  10 +-
 components/table/article-table.tsx | 189 +++++++++++++++++++++--------
 2 files changed, 145 insertions(+), 54 deletions(-)

diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx
index d8a2eef..4056688 100644
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@@ -4,7 +4,6 @@ import {
   formatMonthString,
   formatTextToHtmlTag,
 } from "@/utils/global";
-import Image from "next/image";
 import {
   CalendarIcon,
   ChevronLeftIcon,
@@ -26,6 +25,7 @@ import { useEffect, useState } from "react";
 import { image } from "@heroui/theme";
 import Cookies from "js-cookie";
 import { saveActivity } from "@/services/activity-log";
+import { Image } from "@heroui/react";
 
 const token = Cookies.get("access_token");
 const uid = Cookies.get("uie");
@@ -155,8 +155,10 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
       <div className="flex justify-center my-2 lg:my-5">
         {data?.files?.length > 0 && (
           <Image
-            width={1440}
-            height={1080}
+            classNames={{
+              wrapper: "!w-full !max-w-full",
+              img: "!w-full",
+            }}
             alt="Main Image"
             src={data?.files[imageNow]?.file_url}
             className="object-cover w-[100%] rounded-md"
@@ -172,8 +174,6 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
               className="cursor-pointer"
             >
               <Image
-                width={480}
-                height={480}
                 alt="NextUI hero Image"
                 src={file?.file_url}
                 className="object-cover w-[75px] lg:w-[150px] h-[50px] lg:h-[100px] rounded-md"
diff --git a/components/table/article-table.tsx b/components/table/article-table.tsx
index fd89b98..4453313 100644
--- a/components/table/article-table.tsx
+++ b/components/table/article-table.tsx
@@ -16,9 +16,16 @@ import {
   updateIsBannerArticle,
 } from "@/services/article";
 import { Article } from "@/types/globals";
-import { convertDateFormat } from "@/utils/global";
+import {
+  convertDateFormat,
+  convertDateFormatNoTime,
+  convertDateFormatNoTimeV2,
+} from "@/utils/global";
 import { Button } from "@heroui/button";
 import {
+  Autocomplete,
+  AutocompleteItem,
+  Calendar,
   Chip,
   ChipProps,
   Dropdown,
@@ -27,6 +34,9 @@ import {
   DropdownTrigger,
   Input,
   Pagination,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   Select,
   SelectItem,
   Spinner,
@@ -43,6 +53,7 @@ import Datepicker from "react-tailwindcss-datepicker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import Cookies from "js-cookie";
+import { parseDate } from "@internationalized/date";
 
 const columns = [
   { name: "No", uid: "no" },
@@ -86,15 +97,24 @@ export default function ArticleTable() {
   const [showData, setShowData] = useState("10");
   const [search, setSearch] = useState("");
   const [categories, setCategories] = useState<any>([]);
-  const [selectedCategories, setSelectedCategories] = useState<any>([]);
+  const [selectedCategories, setSelectedCategories] = useState<string>("");
   const [startDateValue, setStartDateValue] = useState({
     startDate: null,
     endDate: null,
   });
 
+  const [articleDate, setArticleDate] = useState({
+    startDate: parseDate(
+      convertDateFormatNoTimeV2(
+        new Date(new Date().setDate(new Date().getDate() - 7))
+      )
+    ),
+    endDate: parseDate(convertDateFormatNoTimeV2(new Date())),
+  });
+
   useEffect(() => {
     initState();
-  }, [page, showData, startDateValue, selectedCategories]);
+  }, [page, showData, startDateValue, selectedCategories, articleDate]);
 
   useEffect(() => {
     getCategories();
@@ -106,16 +126,26 @@ export default function ArticleTable() {
     setCategories(data);
   }
 
+  const onSelectionChange = (id: Key | null) => {
+    setSelectedCategories(String(id));
+  };
+
+  const getDate = (data: any) => {
+    return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${
+      data.day < 10 ? `0${data.day}` : data.day
+    }`;
+  };
+
   async function initState() {
     loading();
+    console.log("test", selectedCategories);
     const req = {
       limit: showData,
       page: page,
       search: search,
-      // startDate:
-      //   startDateValue.startDate === null ? "" : startDateValue.startDate,
-      // endDate: startDateValue.endDate === null ? "" : startDateValue.endDate,
-      categorySlug: Array.from(selectedCategories).join(","),
+      startDate: getDate(articleDate.startDate),
+      endDate: getDate(articleDate.endDate),
+      category: selectedCategories,
       sort: "desc",
       sortBy: "created_at",
     };
@@ -248,13 +278,13 @@ export default function ArticleTable() {
                   <DropdownItem
                     key="edit"
                     className={
-                      username === "admin-mabes" ||
+                      username?.includes("mabes") ||
                       Number(userId) === article.createdById
                         ? ""
                         : "hidden"
                     }
                   >
-                    {(username === "admin-mabes" ||
+                    {(username?.includes("mabes") ||
                       Number(userId) === article.createdById) && (
                       <Link href={`/admin/article/edit/${article.id}`}>
                         <CreateIconIon className="inline mr-2 mb-1" />
@@ -267,9 +297,9 @@ export default function ArticleTable() {
                     onPress={() =>
                       handleBanner(article?.id, !article?.isBanner)
                     }
-                    className={username === "admin-mabes" ? "" : "hidden"}
+                    className={username?.includes("mabes") ? "" : "hidden"}
                   >
-                    {username === "admin-mabes" && (
+                    {username?.includes("mabes") && (
                       <>
                         <BannerIcon size={24} className="inline mr-2 mb-1" />
                         {article?.isBanner
@@ -282,13 +312,13 @@ export default function ArticleTable() {
                     key="delete"
                     onPress={() => handleDelete(article.id)}
                     className={
-                      username === "admin-mabes" ||
+                      username?.includes("mabes") ||
                       Number(userId) === article.createdById
                         ? ""
                         : "hidden"
                     }
                   >
-                    {(username === "admin-mabes" ||
+                    {(username?.includes("mabes") ||
                       Number(userId) === article.createdById) && (
                       <>
                         {" "}
@@ -330,6 +360,15 @@ export default function ArticleTable() {
     initState();
   }
 
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
+
   return (
     <>
       <div className="py-3">
@@ -375,44 +414,96 @@ export default function ArticleTable() {
             </div>
             <div className="flex flex-col gap-1 w-full lg:w-[230px]">
               <p className="font-semibold text-sm">Kategori</p>
-              <Select
-                label=""
-                variant="bordered"
-                labelPlacement="outside"
-                placeholder="Kategori"
-                selectionMode="single"
-                selectedKeys={selectedCategories}
+
+              <Autocomplete
                 className="w-full"
-                items={categories}
-                classNames={{ trigger: "border-1" }}
-                onSelectionChange={setSelectedCategories}
-                renderValue={(items) => {
-                  return items.map((item) => (
-                    <span
-                      key={item.props?.value}
-                      className="text-black dark:text-white text-xs"
-                    >
-                      {item.textValue}
-                    </span>
-                  ));
-                }}
+                defaultItems={categories}
+                label=""
+                labelPlacement="outside"
+                variant="bordered"
+                inputProps={{ classNames: { inputWrapper: "border-1" } }}
+                onSelectionChange={onSelectionChange}
               >
-                {categories?.map((category: any) => (
-                  <SelectItem key={category?.slug}>
-                    {category?.title}
-                  </SelectItem>
-                ))}
-              </Select>
+                {(item: any) => (
+                  <AutocompleteItem key={item.id}>
+                    {item.title}
+                  </AutocompleteItem>
+                )}
+              </Autocomplete>
+            </div>
+            {username?.includes("mabes") && (
+              <div className="flex flex-col gap-1 w-full lg:w-[230px]">
+                <p className="font-semibold text-sm">Author</p>
+
+                <Autocomplete
+                  className="w-full"
+                  inputProps={{ classNames: { inputWrapper: "border-1" } }}
+                  defaultItems={categories}
+                  label=""
+                  labelPlacement="outside"
+                  variant="bordered"
+                  onSelectionChange={onSelectionChange}
+                >
+                  {(item: any) => (
+                    <AutocompleteItem key={item.id}>
+                      {item.title}
+                    </AutocompleteItem>
+                  )}
+                </Autocomplete>
+              </div>
+            )}
+            <div className="flex flex-col gap-1 w-full lg:w-[120px]">
+              <p className="font-semibold text-sm">Start Date</p>
+
+              <Popover
+                placement="bottom"
+                classNames={{ content: ["!bg-transparent", "p-0"] }}
+              >
+                <PopoverTrigger>
+                  <a className="cursor-pointer border-1 px-2 py-2 rounded-xl">
+                    {convertDateFormatNoTime(articleDate.startDate)}
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent className="bg-transparent">
+                  <Calendar
+                    value={articleDate.startDate}
+                    onChange={(e) =>
+                      setArticleDate({
+                        startDate: e,
+                        endDate: articleDate.endDate,
+                      })
+                    }
+                    maxValue={articleDate.endDate}
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+            <div className="flex flex-col gap-1 w-full lg:w-[120px]">
+              <p className="font-semibold text-sm">End Date</p>
+
+              <Popover
+                placement="bottom"
+                classNames={{ content: ["!bg-transparent", "p-0"] }}
+              >
+                <PopoverTrigger>
+                  <a className="cursor-pointer border-1 px-2 py-2 rounded-xl">
+                    {convertDateFormatNoTime(articleDate.endDate)}
+                  </a>
+                </PopoverTrigger>
+                <PopoverContent className="bg-transparent">
+                  <Calendar
+                    value={articleDate.endDate}
+                    onChange={(e) =>
+                      setArticleDate({
+                        startDate: articleDate.startDate,
+                        endDate: e,
+                      })
+                    }
+                    minValue={articleDate.startDate}
+                  />
+                </PopoverContent>
+              </Popover>
             </div>
-            {/* <div className="flex flex-col gap-1 w-full lg:w-[240px]">
-              <p className="font-semibold text-sm">Tanggal</p>
-              <Datepicker
-                value={startDateValue}
-                displayFormat="DD/MM/YYYY"
-                onChange={(e: any) => setStartDateValue(e)}
-                inputClassName="z-50 w-full text-sm bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl h-[40px] text-gray-600 dark:text-gray-300"
-              />
-            </div> */}
           </div>
           <Table
             aria-label="micro issue table"
@@ -425,7 +516,7 @@ export default function ArticleTable() {
             }}
           >
             <TableHeader
-              columns={username === "admin-mabes" ? columns : columnsOtherRole}
+              columns={username?.includes("mabes") ? columns : columnsOtherRole}
             >
               {(column) => (
                 <TableColumn key={column.uid}>{column.name}</TableColumn>