fix landing banner article

components/landing/HeaderNews.tsx

@@ -45,6 +45,7 @@ export default function HeaderNews() {
       search: "",
       limit: "10",
       sort: "desc",
+      isPublish: true,
     };
     const response = await getListArticle(req);
     setArticle(response?.data?.data);
@@ -57,6 +58,7 @@ export default function HeaderNews() {
       limit: "10",
       sortBy: "view_count",
       sort: "desc",
+      category: "586",
       isPublish: true,
     };
     const response = await getListArticle(req);

components/landing/banner-new.tsx

@@ -207,6 +207,15 @@ export default function BannerHumasNew() {
       </Accordion>
     );
   };
+
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
   return (
     <div className="h-fit relative text-white overflow-hidden">
       <div

components/main/dashboard/chart/suggestions-line-chart.tsx

@@ -3,6 +3,7 @@ import React, { Component, useEffect, useState } from "react";
 import ReactApexChart from "react-apexcharts";
 import dummyData from "../../../../const/dummy.json";
 import { getStatisticMonthly } from "@/service/article";
+import { get } from "http";
 
 type WeekData = {
   week: number;
@@ -43,8 +44,12 @@ function processMonthlyData(count: number[]): {
   };
 }
 
-const SuggestionsChart = (props: { type: string; date: string }) => {
-  const { date, type } = props;
+const SuggestionsChart = (props: {
+  type: string;
+  date: string;
+  totals: (data: number) => void;
+}) => {
+  const { date, type, totals } = props;
   const [categories, setCategories] = useState<string[]>([]);
   const [seriesSuggestions, setSeriesSuggestions] = useState<number[]>([]);
 
@@ -69,15 +74,17 @@ const SuggestionsChart = (props: { type: string; date: string }) => {
     ];
     const category = [];
     const temp = [];
+    let totalData = 0;
     for (let i = 0; i < data.length; i++) {
       const total = data[i].suggestions.reduce(
         (sum: number, list: number) => sum + list,
         0
       );
       temp.push(total);
+      totalData += total;
       category.push(months[data[i].month - 1]);
     }
-    return { categories: category, series: temp };
+    return { categories: category, series: temp, total: totalData };
   }
 
   const initFetch = async () => {
@@ -86,16 +93,17 @@ const SuggestionsChart = (props: { type: string; date: string }) => {
     // const data = res?.data?.data;
     const data = dummyData.data;
     if (type === "monthly") {
-      const getDatas = data?.filter(
-        (a: any) => a.year === Number(splitDate[1])
-      );
+      const getDatas = data?.filter((a) => a.year === Number(splitDate[1]));
+      console.log("teemp,tota", getDatas);
+
       if (getDatas) {
         const temp = processYearlyData(getDatas);
-        console.log("temp", temp);
         setSeriesSuggestions(temp.series);
         setCategories(temp.categories);
+        totals(temp.total);
       } else {
         setSeriesSuggestions([]);
+        totals(0);
       }
     } else {
       const getDatas = data?.find(
@@ -104,24 +112,25 @@ const SuggestionsChart = (props: { type: string; date: string }) => {
       );
       if (getDatas) {
         const temp = processMonthlyData(getDatas?.suggestions);
+        const sum = getDatas.suggestions.reduce((acc, curr) => acc + curr, 0);
+        totals(sum);
         if (type == "weekly") {
           setSeriesSuggestions(
             temp.weeks.map((list) => {
               return list.total;
             })
           );
-        } else {
-          setSeriesSuggestions(getDatas.suggestions);
-        }
-        if (type === "weekly") {
           const category = [];
           for (let i = 1; i <= temp.weeks.length; i++) {
             category.push(`Minggu ke-${i}`);
           }
           setCategories(category);
+        } else {
+          setSeriesSuggestions(getDatas.suggestions);
         }
       } else {
         setSeriesSuggestions([]);
+        totals(0);
       }
     }
   };

components/main/detail/list-news.tsx

@@ -20,16 +20,25 @@ import { useEffect, useRef, useState } from "react";
 import { getListArticle } from "@/service/article";
 import { formatMonthString, htmlToString, textEllipsis } from "@/utils/global";
 import Image from "next/image";
-import { useParams } from "next/navigation";
+import {
+  useParams,
+  usePathname,
+  useRouter,
+  useSearchParams,
+} from "next/navigation";
 
 export default function ListNews() {
   const [article, setArticle] = useState<any>([]);
-  const [search, setSearch] = useState("");
   const [page, setPage] = useState(1);
+  const router = useRouter();
+  const pathname = usePathname();
   const [totalPage, setTotalPage] = useState(1);
   const topRef = useRef<HTMLDivElement>(null);
   const params = useParams();
   const category = params?.name;
+  const searchParams = useSearchParams();
+  const search = searchParams.get("search");
+  const [searchValue, setSearchValue] = useState(search || "");
 
   useEffect(() => {
     getArticle();
@@ -41,9 +50,10 @@ export default function ListNews() {
 
     const req = {
       page: page,
-      search: search,
+      search: searchValue || "",
       limit: "9",
       category: String(category),
+      isPublish: true,
     };
     const response = await getListArticle(req);
     setArticle(response?.data?.data);
@@ -52,7 +62,7 @@ export default function ListNews() {
   }
 
   return (
-    <div className="bg-white" ref={topRef}>
+    <div className="bg-white border-b-1" ref={topRef}>
       <div className="text-black py-5 px-3 lg:w-[75vw] mx-auto bg-white">
         <div className="flex flex-row gap-4">
           <Link href="/" className="text-black font-semibold">
@@ -69,13 +79,22 @@ export default function ListNews() {
               inputWrapper: "bg-white hover:!bg-gray-100 border-1",
               input: "text-sm !text-black",
             }}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                router.push(pathname + `?search=${searchValue}`);
+                getArticle();
+              }
+            }}
             labelPlacement="outside"
             placeholder="Search..."
-            value={search}
-            onValueChange={setSearch}
+            value={searchValue || ""}
+            onValueChange={setSearchValue}
             endContent={
               <Button
-                onPress={getArticle}
+                onPress={() => {
+                  router.push(pathname + `?search=${searchValue}`);
+                  getArticle();
+                }}
                 size="sm"
                 className="bg-red-500 font-semibold"
               >

components/table/suggestions/suggestions-table.tsx

@@ -100,6 +100,7 @@ export default function SuggestionsTable() {
   const [search, setSearch] = useState("");
   const [isReply, setIsReply] = useState(false);
   const [replyValue, setReplyValue] = useState("");
+  const [totalData, setTotalData] = useState(0);
 
   const formOptions = {
     resolver: zodResolver(createArticleSchema),
@@ -302,7 +303,7 @@ export default function SuggestionsTable() {
 
   return (
     <>
-      <div className="flex flex-row gap-2">
+      <div className="flex flex-row gap-2 items-center">
         <Button
           color="primary"
           variant={typeDate === "monthly" ? "solid" : "bordered"}
@@ -342,18 +343,22 @@ export default function SuggestionsTable() {
             </PopoverContent>
           </Popover>
         </div>
+        <p className="font-semibold">
+          Total : <span className="font-bold">{totalData}</span>
+        </p>
       </div>
       <div className="flex flex-row w-full h-full">
         <div className="w-full h-[30vh] lg:h-[300px] text-black">
           <SuggestionsChart
             type={typeDate}
             date={`${startDateValue.month} ${startDateValue.year}`}
+            totals={(data) => setTotalData(data)}
           />
         </div>
       </div>
       <div className="py-3">
         <div className="flex flex-col items-start rounded-2xl gap-3">
-          <div className="flex flex-col md:flex-row gap-3 w-full">
+          <div className="flex flex-col md:flex-row gap-3 w-full lg:items-end">
             <div className="flex flex-col gap-1 w-full lg:w-1/3">
               <p className="font-semibold text-sm">Pencarian</p>
               <Input
@@ -394,6 +399,9 @@ export default function SuggestionsTable() {
                 </SelectItem>
               </Select>
             </div>
+            <Button color="primary" className="text-white">
+              Export
+            </Button>
           </div>
           <Table
             aria-label="micro issue table"

package.json

@@ -67,6 +67,7 @@
     "tailwind-variants": "^0.1.18",
     "tailwindcss": "3.3.5",
     "typescript": "5.0.4",
+    "xlsx": "^0.18.5",
     "zod": "^3.23.8",
     "zustand": "^5.0.1"
   }

service/article.ts

@@ -28,7 +28,7 @@ export async function getListArticle(props: PaginationRequest) {
       isPublish === undefined ? "" : isPublish
     }&title=${search}&startDate=${startDate || ""}&endDate=${
       endDate || ""
-    }&category=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
+    }&categoryId=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
       sort || "asc"
     }`,
     headers
@@ -93,7 +93,7 @@ export async function getArticleByCategory() {
     "content-type": "application/json",
     Authorization: `Bearer ${token}`,
   };
-  return await httpGet(`/article-categories?limit=200`, headers);
+  return await httpGet(`/article-categories?limit=1000`, headers);
 }
 export async function getCategoryPagination(data: any) {
   const headers = {