catergory

app/news/[polda-name]/layout.tsx

@@ -1,9 +0,0 @@
-import { HumasLayout } from "@/components/layout/humas-layout";
-
-export default function PoldaNewsLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <HumasLayout>{children}</HumasLayout>;
-}

app/news/[polda-name]/page.tsx

@@ -1,6 +0,0 @@
-import ListNews from "@/components/main/detail/list-news";
-import React from "react";
-
-export default function PoldaNewsPage() {
-  return <ListNews />;
-}

app/news/polda/[name]/layout.tsx

@@ -0,0 +1,7 @@
+export default function PoldaNewsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

app/news/polda/[name]/page.tsx

@@ -0,0 +1,12 @@
+import ListNews from "@/components/main/detail/list-news";
+import React from "react";
+import { HumasLayout } from "@/components/layout/humas-layout";
+
+export default function PoldaNewsPage() {
+  // return <ListNews />;
+  return (
+    <HumasLayout>
+      <ListNews />
+    </HumasLayout>
+  );
+}

app/news/satker/[name]/layout.tsx

@@ -0,0 +1,7 @@
+export default function PoldaNewsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

app/news/satker/[name]/page.tsx

@@ -0,0 +1,12 @@
+import ListNews from "@/components/main/detail/list-news";
+import React from "react";
+import { HumasLayout } from "@/components/layout/humas-layout";
+
+export default function PoldaNewsPage() {
+  // return <ListNews />;
+  return (
+    <HumasLayout>
+      <ListNews />
+    </HumasLayout>
+  );
+}

components/landing/CategorySatker.tsx

@@ -333,7 +333,7 @@ export default function CategorySatker() {
         <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
           {list.map((item: any, index: any) => (
             <Link
-              href={`/news/all?satker=${changeNameToSlug(item.title)}`}
+              href={`/news/satker/${changeNameToSlug(item.title)}`}
               key={item.path}
             >
               <div
@@ -384,9 +384,7 @@ export default function CategorySatker() {
                       className="w-[140px] h-[115px] flex flex-col items-center justify-center  rounded-lg shadow-sm"
                     >
                       <Link
-                        href={`/news/all?satker=${changeNameToSlug(
+                        href={`/news/satker/${changeNameToSlug(item.title)}`}
-                          item.title
-                        )}`}
                       >
                         {" "}
                         <Image

components/landing/Footer.tsx

@@ -3,10 +3,12 @@ import { Input } from "@heroui/input";
 import { MailIcon, SendIcon } from "../icons";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
 
 export default function Footer() {
   const t2 = useTranslations("Navbar");
   const t3 = useTranslations("LandingInformasiPublik");
+
   return (
     <div className="relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold ">
       <div className="h-[500px] md:h-[720px] lg:h-auto  bg-black">

components/landing/RegionalNews.tsx

@@ -27,37 +27,37 @@ export default function RegionalNews() {
       id: 1,
       img: "/temp/poldametro.svg",
       title: "Polda Metro Jaya",
-      path: "/news/polda-metro-jaya",
+      path: "polda-metro-jaya",
     },
     {
       id: 2,
       img: "/temp/polda-sumut.svg",
       title: "Polda Sumatra Utara",
-      path: "/news/polda-sumatra-utara",
+      path: "polda-sumut",
     },
     {
       id: 3,
       img: "/temp/polda-banten.svg",
       title: "Polda Banten",
-      path: "/news/polda-banten",
+      path: "polda-banten",
     },
     {
       id: 4,
       img: "/temp/polda-jateng.svg",
       title: "Polda Jawa Tengah",
-      path: "/news/polda-jateng",
+      path: "polda-jateng",
     },
     {
       id: 5,
       img: "/temp/polda-jatim.svg",
       title: "Polda Jawa Timur",
-      path: "news/polda-jatim",
+      path: "polda-jatim",
     },
     {
       id: 6,
       img: "/assets/polda/polda-jawa-barat.svg",
       title: "Polda Jawa Barat",
-      path: "/news/polda-jawa-barat",
+      path: "polda-jabar",
     },
   ];
 
@@ -66,217 +66,217 @@ export default function RegionalNews() {
       id: 1,
       img: "/assets/polda/polda-metro-jaya.svg",
       title: "Polda Metro Jaya",
-      path: "/news/polda-metro-jaya",
+      path: "polda-metro-jaya",
     },
     {
       id: 2,
       img: "/assets/polda/polda-jawa-barat.svg",
       title: "Polda Jawa Barat",
-      path: "/news/polda-jawa-barat",
+      path: "polda-jabar",
     },
     {
       id: 3,
       img: "/assets/polda/polda-banten.svg",
       title: "Polda Banten",
-      path: "/news/polda-banten",
+      path: "polda-banten",
     },
     {
       id: 4,
       img: "/assets/polda/polda-jateng.svg",
       title: "Polda Jawa Tengah",
-      path: "/news/polda-jateng",
+      path: "polda-jateng",
     },
     {
       id: 5,
       img: "/assets/polda/polda-diy.svg",
       title: "Polda D.I Yogyakarta",
-      path: "/news/polda-daerah-istimewa-yogyakarta",
+      path: "polda-diy",
     },
     {
       id: 6,
       img: "/assets/polda/polda-jatim.svg",
       title: "Polda Jawa Timur",
-      path: "/news/polda-jawa-timur",
+      path: "polda-jatim",
     },
     {
       id: 7,
       img: "/assets/polda/polda-aceh.svg",
       title: "Polda Aceh",
-      path: "/news/polda-aceh",
+      path: "polda-aceh",
     },
     {
       id: 8,
       img: "/assets/polda/polda-sumut.svg",
       title: "Polda Sumatra Utara",
-      path: "/news/polda-sumatra-utara",
+      path: "polda-sumut",
     },
     {
       id: 9,
       img: "/assets/polda/polda-sumbar.svg",
       title: "Polda Sumatra Barat",
-      path: "/news/polda-sumatra-barat",
+      path: "polda-sumbar",
     },
     {
       id: 10,
       img: "/assets/polda/polda-riau.svg",
       title: "Polda Riau",
-      path: "/news/polda-riau",
+      path: "polda-riau",
     },
     {
       id: 11,
       img: "/assets/polda/polda-kepri.svg",
       title: "Polda Kep.Riau",
-      path: "/news/polda-kepulauan-riau",
+      path: "polda-kepri",
     },
     {
       id: 12,
       img: "/assets/polda/polda-jambi.svg",
       title: "Polda Jambi",
-      path: "/news/polda-jambi",
+      path: "polda-jambi",
     },
     {
       id: 13,
       img: "/assets/polda/polda-jambi.svg",
       title: "Polda Jambi",
-      path: "/news/polda-jambi",
+      path: "polda-jambi",
     },
     {
       id: 14,
       img: "/assets/polda/polda-sumsel.svg",
       title: "Polda Sumatra Selatan",
-      path: "/news/polda-sumatra-selatan",
+      path: "polda-sumsel",
     },
     {
       id: 15,
       img: "/assets/polda/polda-sumsel.svg",
       title: "Polda Kep.Bangka Belitung",
-      path: "/news/polda-bangka-belitung",
+      path: "polda-babel",
     },
     {
       id: 16,
       img: "/assets/polda/polda-bengkulu.svg",
       title: "Polda Bengkulu",
-      path: "/news/polda-bengkulu",
+      path: "polda-bengkulu",
     },
     {
       id: 17,
       img: "/assets/polda/polda-lampung.svg",
       title: "Polda Lampung",
-      path: "/news/polda-lampung",
+      path: "polda-lampung",
     },
     {
       id: 18,
       img: "/assets/polda/polda-ntb.svg",
       title: "Polda Nusa Tenggara Barat",
-      path: "/news/polda-ntb",
+      path: "polda-ntb",
     },
     {
       id: 19,
       img: "/assets/polda/polda-ntb.svg",
       title: "Polda Nusa Tenggara Barat",
-      path: "/news/polda-ntb",
+      path: "polda-ntb",
     },
     {
       id: 20,
       img: "/assets/polda/polda-ntt.svg",
       title: "Polda Nusa Tenggara Timur",
-      path: "/news/polda-ntt",
+      path: "polda-ntt",
     },
     {
       id: 21,
       img: "/assets/polda/polda-bali.svg",
       title: "Polda Bali",
-      path: "/news/polda-bali",
+      path: "polda-bali",
     },
     {
       id: 22,
       img: "/assets/polda/polda-kalbar.svg",
       title: "Polda Kalimantan Barat",
-      path: "/news/polda-kalimantan-barat",
+      path: "polda-kalbar",
     },
     {
       id: 23,
       img: "/assets/polda/polda-kalteng.svg",
       title: "Polda Kalimantan Tengah",
-      path: "/news/polda-kalimantan-tengah",
+      path: "polda-kalteng",
     },
     {
       id: 24,
       img: "/assets/polda/polda-kalsel.svg",
       title: "Polda Kalimantan Selatan",
-      path: "/news/polda-kalimantan-selatan",
+      path: "polda-kalsel",
     },
     {
       id: 25,
       img: "/assets/polda/polda-kaltim.svg",
       title: "Polda Kalimantan Timur",
-      path: "/news/polda-kalimantan-timur",
+      path: "polda-kaltim",
     },
     {
       id: 26,
       img: "/assets/polda/polda-kalut.svg",
       title: "Polda Kalimantan Utara",
-      path: "/news/polda-kalimantan-utara",
+      path: "polda-kaltara",
     },
     {
       id: 27,
       img: "/assets/polda/polda-sulteng.svg",
       title: "Polda Sulawesi Tengah",
-      path: "/news/polda-sulawesi-tengah",
+      path: "polda-sulteng",
     },
     {
       id: 28,
       img: "/assets/polda/polda-sulawesi-utara.svg",
       title: "Polda Sulawesi Utara",
-      path: "/news/polda-sulawesi-utara",
+      path: "polda-sulut",
     },
     {
       id: 29,
       img: "/assets/polda/polda-gorontalo.svg",
       title: "Polda Gorontalo",
-      path: "/news/polda-gorontalo",
+      path: "polda-gorontalo",
     },
     {
       id: 30,
       img: "/assets/polda/polda-sulbar.svg",
       title: "Polda Sulawesi Barat",
-      path: "/news/polda-sulawesi-barat",
+      path: "polda-sulbar",
     },
     {
       id: 31,
       img: "/assets/polda/polda-sulsel.svg",
       title: "Polda Sulawesi Selatan",
-      path: "/news/polda-sulawesi-selatan",
+      path: "polda-sulsel",
     },
     {
       id: 32,
       img: "/assets/polda/polda-sultenggara.svg",
       title: "Polda Sulawesi Tenggara",
-      path: "/news/polda-sulawesi-tenggara",
+      path: "polda-sultra",
     },
     {
       id: 33,
       img: "/assets/polda/polda-malut.svg",
       title: "Polda Maluku Utara",
-      path: "/news/polda-maluku-utara",
+      path: "polda-maluku-utara",
     },
     {
       id: 34,
       img: "/assets/polda/polda-maluku.svg",
       title: "Polda Maluku",
-      path: "/news/polda-maluku",
+      path: "polda-maluku",
     },
     {
       id: 35,
       img: "/assets/polda/polda-papuabarat.svg",
       title: "Polda Papua Barat",
-      path: "/news/polda-papua-barat",
+      path: "polda-papua-barat",
     },
     {
       id: 36,
       img: "/assets/polda/polda-papua.svg",
       title: "Polda Papua",
-      path: "/news/polda-papua",
+      path: "polda-papua",
     },
   ];
 
@@ -318,10 +318,7 @@ export default function RegionalNews() {
         </div> */}
         <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
           {listPolda.map((item: any, index: any) => (
-            <Link
+            <Link href={`/news/polda/${item.path}`} key={item.path}>
-              href={`/news/all?polda=${changeNameToSlug(item.title)}`}
-              key={item.path}
-            >
               <div
                 key={item.id}
                 className="w-[157px] h-[141px] flex flex-col items-center justify-evenly"
@@ -376,9 +373,7 @@ export default function RegionalNews() {
                     key={index.id}
                     className="w-[140px] h-[115px] flex flex-col items-center justify-center rounded-lg shadow-sm"
                   >
-                    <Link
+                    <Link href={`/news/polda/${item.path}`}>
-                      href={`/news/all?polda=${changeNameToSlug(item.title)}`}
-                    >
                       <div className="flex flex-col items-center ">
                         <Image
                           radius="lg"

components/layout/humas-layout.tsx

@@ -1,4 +1,6 @@
-import React from "react";
+"use client";
+
+import React, { Suspense, useEffect, useState } from "react";
 import NavbarHumas from "./navbar/NavbarHumas";
 import Footer from "../landing/Footer";
 import NewsTicker from "../landing/NewsTicker";
@@ -8,6 +10,14 @@ interface Props {
 }
 
 export const HumasLayout = ({ children }: Props) => {
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
   return (
     <section className="flex flex-col">
       <NavbarHumas size="sm" />
@@ -15,7 +25,9 @@ export const HumasLayout = ({ children }: Props) => {
       <NewsTicker />
 
       {children}
-      <Footer />
+      <Suspense>
+        <Footer />
+      </Suspense>
     </section>
   );
 };

components/main/detail/list-news.tsx

@@ -20,6 +20,7 @@ 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";
 
 export default function ListNews() {
   const [article, setArticle] = useState<any>([]);
@@ -27,16 +28,23 @@ export default function ListNews() {
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
   const topRef = useRef<HTMLDivElement>(null);
+  const params = useParams();
+  const category = params?.name;
 
   useEffect(() => {
     getArticle();
-  }, [page]);
+  }, [page, category]);
 
   async function getArticle() {
     // loading();
     topRef.current?.scrollIntoView({ behavior: "smooth" });
 
-    const req = { page: page, search: search, limit: "9" };
+    const req = {
+      page: page,
+      search: search,
+      limit: "9",
+      category: String(category),
+    };
     const response = await getListArticle(req);
     setArticle(response?.data?.data);
     setTotalPage(response?.data?.meta?.totalPage);
@@ -116,7 +124,7 @@ export default function ListNews() {
                   </div>
                   <div className="flex flex-row items-center gap-1">
                     <UserIcon size={14} />
-                    <p>DIVISI HUMAS POLRI</p>
+                    <p>{news?.createdByName}</p>
                   </div>
                 </div>
                 <div className="text-sm">

components/table/article-table.tsx

@@ -84,6 +84,7 @@ export default function ArticleTable() {
   }
 
   async function initState() {
+    console.log("seeecle", Array.from(selectedCategories));
     const req = {
       limit: showData,
       page: page,
@@ -91,6 +92,7 @@ export default function ArticleTable() {
       startDate:
         startDateValue.startDate === null ? "" : startDateValue.startDate,
       endDate: startDateValue.endDate === null ? "" : startDateValue.endDate,
+      category: Array.from(selectedCategories).join(","),
     };
     const res = await getListArticle(req);
     getTableNumber(parseInt(showData), res.data?.data);
@@ -287,7 +289,7 @@ export default function ArticleTable() {
                   return items.map((item) => (
                     <span
                       key={item.props?.value}
-                      className="text-black text-xs"
+                      className="text-black dark:text-white text-xs"
                     >
                       {item.textValue},
                     </span>
@@ -295,7 +297,7 @@ export default function ArticleTable() {
                 }}
               >
                 {categories?.map((category: any) => (
-                  <SelectItem key={category?.id} value={category?.id}>
+                  <SelectItem key={category?.slug} value={category?.id}>
                     {category?.title}
                   </SelectItem>
                 ))}

components/table/master-categories/categories-table.tsx

@@ -391,6 +391,12 @@ export default function CategoriesTable(props: { triggerRefresh: boolean }) {
                 <SelectItem key="10" value="10">
                   10
                 </SelectItem>
+                <SelectItem key="25" value="25">
+                  25
+                </SelectItem>
+                <SelectItem key="50" value="50">
+                  50
+                </SelectItem>
               </Select>
             </div>
           </div>

service/article.ts

@@ -9,14 +9,17 @@ import Cookies from "js-cookie";
 
 const token = Cookies.get("access_token");
 export async function getListArticle(props: PaginationRequest) {
-  const { page, limit, search, startDate, endDate, isPublish } = props;
+  const { page, limit, search, startDate, endDate, isPublish, category } =
+    props;
   const headers = {
     "content-type": "application/json",
   };
   return await httpGet(
     `/articles?limit=${limit}&page=${page}&isPublish=${
       isPublish === undefined ? "" : isPublish
-    }&title=${search}&startDate=${startDate || ""}&endDate=${endDate || ""}`,
+    }&title=${search}&startDate=${startDate || ""}&endDate=${
+      endDate || ""
+    }&category=${category || ""}`,
     headers
   );
 }

types/globals.tsx

@@ -62,4 +62,5 @@ export type PaginationRequest = {
   startDate?: string;
   endDate?: string;
   isPublish?: boolean;
+  category?: string;
 };