From 1e60384a47b7dd90bf8545029b408dbda299a628 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Mon, 17 Feb 2025 17:01:58 +0700
Subject: [PATCH] fix landing

---
 components/landing/CategorySatker.tsx    |   4 +-
 components/landing/Footer.tsx            |   4 +-
 components/landing/HeaderNews.tsx        |  83 +++++++++---
 components/landing/MedolUpdate.tsx       |  26 ++--
 components/landing/NewsTicker.tsx        |   8 +-
 components/landing/PolriApps.tsx         |   7 +-
 components/landing/RegionalNews.tsx      |   4 +-
 components/layout/navbar/NavbarHumas.tsx | 164 +++++++++++------------
 config/site.ts                           |  84 ++++++------
 messages/en.json                         |   4 +-
 messages/id.json                         |   3 +-
 service/article.ts                       |  17 ++-
 types/globals.tsx                        |   2 +
 13 files changed, 230 insertions(+), 180 deletions(-)

diff --git a/components/landing/CategorySatker.tsx b/components/landing/CategorySatker.tsx
index 5d3d25a..b9b2316 100644
--- a/components/landing/CategorySatker.tsx
+++ b/components/landing/CategorySatker.tsx
@@ -322,9 +322,9 @@ export default function CategorySatker() {
   };
 
   return (
-    <div className="text-center bg-[#DD8306] rounded-md h-auto lg:h-[338px] space-y-0 py-4 md:space-y-7 flex flex-col justify-center">
+    <div className="text-center bg-gradient-to-b from-red-900 via-red-700 to-[#bb3523] rounded-md h-auto lg:h-[338px] space-y-0 py-4 md:space-y-7 flex flex-col justify-center">
       <div className="text-xl text-white w-full justify-center flex">
-        <p className="border-b-3 border-[#C3170F] py-2 w-fit">
+        <p className="border-b-3 border-white py-2 w-fit">
           {" "}
           {t("kategoriSatker")}
         </p>
diff --git a/components/landing/Footer.tsx b/components/landing/Footer.tsx
index 6425f89..24d8c84 100644
--- a/components/landing/Footer.tsx
+++ b/components/landing/Footer.tsx
@@ -133,7 +133,7 @@ export default function Footer() {
             </div>
           </div>
           <Link href={`/auth`}>
-            <Button className="mt-1 bg-[#DD8306] text-white">
+            <Button className="mt-1 bg-[#bb3523] text-white">
               Kontributor Wilayah
             </Button>
           </Link>
@@ -255,7 +255,7 @@ export default function Footer() {
               </div>
             </div>
             <Link href={`/auth`}>
-              <Button className="mt-1 bg-[#DD8306] text-white">
+              <Button className="mt-1 bg-[#bb3523] text-white ">
                 Kontributor Wilayah
               </Button>
             </Link>
diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index 135e943..ea686c9 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -27,16 +27,37 @@ export default function HeaderNews() {
   const [article, setArticle] = useState<any>([]);
   const t = useTranslations("Landing");
   const [selectedTab, setSelectedTab] = useState("media");
+  const [hotNews, setHotNews] = useState<any>([]);
+
+  // useEffect(() => {
+
+  // }, []);
 
   useEffect(() => {
-    async function getArticle() {
-      const req = { page: 1, search: "", limit: "10" };
-      const response = await getListArticle(req);
-      setArticle(response?.data?.data);
-    }
     getArticle();
+
+    getHotNews();
   }, []);
 
+  async function getArticle() {
+    const req = { page: 1, search: "", limit: "10", sort: "desc" };
+    const response = await getListArticle(req);
+    setArticle(response?.data?.data);
+  }
+
+  async function getHotNews() {
+    const req = {
+      page: 1,
+      search: "",
+      limit: "10",
+      sortBy: "view_count",
+      sort: "desc",
+    };
+    const response = await getListArticle(req);
+    setHotNews(response?.data?.data);
+    console.log("sadadasdasd", response?.data?.data);
+  }
+
   return (
     <div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white  p-1 lg:p-8 lg:h-[70vh]">
       <div className="lg:hidden w-full h-full">
@@ -113,7 +134,7 @@ export default function HeaderNews() {
           {t("berita")}
         </p>
         <ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] ">
-          {article?.map((data: any, index: number) => (
+          {hotNews?.map((data: any, index: number) => (
             <div
               className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
               key={data?.id}
@@ -159,7 +180,7 @@ export default function HeaderNews() {
         <div className="m-2">
           <Link href="/news/all">
             <Button
-              className="w-full bg-[#DD8306] text-white font-bold rounded-md focus:outline-none"
+              className="w-full bg-gradient-to-r from-red-700  to-[#bb3523] text-white font-bold rounded-md focus:outline-none"
               radius="none"
             >
               {t("semua")}
@@ -254,7 +275,7 @@ export default function HeaderNews() {
                 : "text-slate-300 cursor-pointer py-2"
             }
           >
-            Media Update
+            {t("terkini")}
           </a>
           <a
             onClick={() => setSelectedTab("video")}
@@ -291,24 +312,46 @@ export default function HeaderNews() {
               ))}
             </ScrollShadow>
             <Button
-              className="w-full bg-[#DD8306] text-white font-bold rounded-md focus:outline-none"
+              className="w-full bg-gradient-to-r from-red-700  to-[#bb3523] text-white font-bold rounded-md focus:outline-none"
               radius="none"
             >
               Lihat Semua
             </Button>
           </div>
         ) : (
-          <div className="w-full">
-            <iframe
-              width="100%"
-              height="410"
-              src="https://www.youtube.com/embed/7oRcWfl9lxE?si=G_CZfXak_AiHjGzG"
-              title="YouTube video player"
-              frameBorder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              referrerPolicy="strict-origin-when-cross-origin"
-              allowFullScreen
-            ></iframe>
+          <div className="lg:!h-[62vh] dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg flex flex-col p-2 lg:p-8 gap-2 lg:gap-5">
+            <Link
+              target="_blank"
+              href="https://www.youtube.com/watch?v=6_g_PyiFcNo"
+              className="border-b-2 py-2 lg:py-4"
+            >
+              IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - POLRI PRESISI UNTUK
+              INDONESIA
+            </Link>
+            <Link
+              target="_blank"
+              href="https://www.youtube.com/watch?v=p0AJEwvJ7gU"
+              className="border-b-2 py-2 lg:py-4"
+            >
+              ILM DIVHUMAS POLRI - POLRI PRESISI MENGAWAL PROSES VAKSINASI UNTUK
+              MENGATASI PANDEMI COVID 19
+            </Link>
+            <Link
+              target="_blank"
+              href="https://www.youtube.com/watch?v=jaihQPjxcy4"
+              className="border-b-2 py-2 lg:py-4"
+            >
+              IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - INDONESIA MENOLAK
+              RADIKALISME
+            </Link>
+            <Link
+              target="_blank"
+              href="https://www.youtube.com/watch?v=umPEo0FYTQk"
+              className="border-b-2 py-2 lg:py-4"
+            >
+              IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS SAHABAT
+              MASYARAKAT
+            </Link>
           </div>
         )}
       </div>
diff --git a/components/landing/MedolUpdate.tsx b/components/landing/MedolUpdate.tsx
index 4b7a280..37f28d8 100644
--- a/components/landing/MedolUpdate.tsx
+++ b/components/landing/MedolUpdate.tsx
@@ -85,11 +85,15 @@ export default function MedolUpdate() {
       <div className="bg-white text-black p-1 md:p-5 space-y-5">
         <Tabs
           classNames={{
-            tabList: "bg-white shadow-lg border",
-            tabContent: "group-data-[selected=true]:text-[white] text-warning",
+            tabList: "bg-white shadow-lg border p-2 rounded-md",
+            tab: "group-data-[selected=true]:bg-[#bb3523] bg-white p-0 mx-2",
+            tabContent: [
+              "group-data-[selected=true]:text-[white] text-[#bb3523]",
+              "group-data-[selected=true]:bg-[#bb3523] bg-white rounded-md p-2",
+            ],
           }}
           aria-label="Options"
-          color="warning"
+          // color="[#bb3523]"
           className="flex justify-center"
           selectedKey={selectedTab}
           onSelectionChange={setSelectedTab}
@@ -156,9 +160,9 @@ export default function MedolUpdate() {
             <div className="text-center pt-6">
               <Link href="https://mediahub.polri.go.id" target="_blank">
                 <Button
-                  className="bg-white text-[#DD8306] font-bold w-56"
+                  className="bg-white text-[#bb3523] font-bold w-56"
                   size="sm"
-                  color="warning"
+                  color="danger"
                   variant="bordered"
                 >
                   {t("lebihBanyak")}
@@ -226,9 +230,9 @@ export default function MedolUpdate() {
             <div className="text-center pt-6">
               <Link href="https://tribratanews.polri.go.id" target="_blank">
                 <Button
-                  className="bg-white text-[#DD8306] font-bold w-56"
+                  className="bg-white text-[#bb3523] font-bold w-56"
                   size="sm"
-                  color="warning"
+                  color="danger"
                   variant="bordered"
                 >
                   {t("lebihBanyak")}
@@ -299,9 +303,9 @@ export default function MedolUpdate() {
             <div className="text-center pt-6">
               <a href="https://inp.polri.go.id/" target="_blank">
                 <Button
-                  className="bg-white text-[#DD8306] font-bold w-56"
+                  className="bg-white text-[#bb3523] font-bold w-56"
                   size="sm"
-                  color="warning"
+                  color="danger"
                   variant="bordered"
                 >
                   {t("lebihBanyak")}
@@ -321,9 +325,9 @@ export default function MedolUpdate() {
                 target="_blank"
               >
                 <Button
-                  className="bg-white text-[#DD8306] font-bold w-56"
+                  className="bg-white text-[#bb3523] font-bold w-56"
                   size="sm"
-                  color="warning"
+                  color="danger"
                   variant="bordered"
                 >
                   {t("lebihBanyak")}
diff --git a/components/landing/NewsTicker.tsx b/components/landing/NewsTicker.tsx
index 353ba7f..f1d52cd 100644
--- a/components/landing/NewsTicker.tsx
+++ b/components/landing/NewsTicker.tsx
@@ -47,9 +47,9 @@ export default function NewsTicker() {
 
   return (
     <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">
-      <div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-amber-500 text-white w-[30%] lg:w-[10%]">
+      <div className="relative px-4 py-2 font-semibold text-xs lg:text-sm flex items-center bg-[#bb3523] text-white w-[30%] lg:w-[10%]">
         <span className="mr-2"></span> BREAKING NEWS
-        <div className="absolute right-0 top-0 h-full w-4 bg-amber-500 transform translate-x-full clipPath-triangle"></div>
+        <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clipPath-triangle"></div>
       </div>
       <div
         className={`w-full  px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
@@ -78,13 +78,13 @@ export default function NewsTicker() {
       </div>
       <div className="flex flex-row text-white h-full gap-[1px]">
         <a
-          className="bg-amber-500 h-full flex items-center"
+          className="bg-[#bb3523] h-full flex items-center"
           onClick={() => handlePrev()}
         >
           <ChevronLeftIcon />
         </a>
         <a
-          className="bg-amber-500 h-full flex items-center"
+          className="bg-[#bb3523] h-full flex items-center"
           onClick={() => handleNext()}
         >
           <ChevronRightIcon />
diff --git a/components/landing/PolriApps.tsx b/components/landing/PolriApps.tsx
index 08ebd83..72f2b8b 100644
--- a/components/landing/PolriApps.tsx
+++ b/components/landing/PolriApps.tsx
@@ -193,12 +193,9 @@ export default function PolriApps() {
   };
 
   return (
-    <div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-[#DD8306]">
+    <div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-gradient-to-b from-red-900 via-red-700 to-[#bb3523]">
       <div className="text-xl text-white w-full justify-center flex">
-        <p className="border-b-3 border-[#C3170F] py-2 w-fit">
-          {" "}
-          {t("aplikasi")}
-        </p>
+        <p className="border-b-3 border-white py-2 w-fit"> {t("aplikasi")}</p>
       </div>
       <div className="flex items-center justify-around py-10">
         {/* <div>
diff --git a/components/landing/RegionalNews.tsx b/components/landing/RegionalNews.tsx
index 489aeb8..883147b 100644
--- a/components/landing/RegionalNews.tsx
+++ b/components/landing/RegionalNews.tsx
@@ -305,9 +305,9 @@ export default function RegionalNews() {
   };
 
   return (
-    <div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-[#DD8306]">
+    <div className="text-center rounded-md lg:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-gradient-to-b from-red-900 via-red-700 to-[#bb3523]">
       <div className="text-xl text-white w-full justify-center flex">
-        <p className="border-b-3 border-[#C3170F] py-2 w-fit">
+        <p className="border-b-3 border-white py-2 w-fit">
           {" "}
           {t("beritaWilayah")}
         </p>
diff --git a/components/layout/navbar/NavbarHumas.tsx b/components/layout/navbar/NavbarHumas.tsx
index 593151e..252761d 100644
--- a/components/layout/navbar/NavbarHumas.tsx
+++ b/components/layout/navbar/NavbarHumas.tsx
@@ -412,91 +412,7 @@ export default function NavbarHumas(props: { size: string }) {
             >
               E-PPID
             </Link>
-            <Dropdown
-              className=" dark:bg-[#1F1A17]"
-              onOpenChange={(state) => setIsOpen(state)}
-            >
-              <NavbarItem>
-                <DropdownTrigger>
-                  <Button
-                    disableRipple
-                    className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
-                    radius="sm"
-                    variant="light"
-                    endContent={<ChevronDownIcon className="pt-1" />}
-                  >
-                    {t("informasi_publik")}
-                  </Button>
-                </DropdownTrigger>
-              </NavbarItem>
-              <DropdownMenu
-                // aria-label="tentang"
-                title={t("tentang")}
-                className="pt-4"
-                classNames={{
-                  // base: "flex",
-                  // list: "border-2 gap-2 flex flex-row flex-wrap"
-                  list: "gap-2 flex flex-row flex-wrap",
-                }}
-                itemClasses={{
-                  // base: "border border-red-700 w-[350px]"
-                  base: "w-[350px]",
-                }}
-              >
-                <DropdownItem key={"humas"}>
-                  <Link
-                    href="/static/humas-polri"
-                    className="flex  justify-between"
-                  >
-                    {t("tentang")} Humas POLRI
-                    <ChevronRightIcon />
-                  </Link>
-                </DropdownItem>
-                <DropdownItem key={"profil"}>
-                  <Link
-                    href="/static/profile-kapolri"
-                    className="flex  justify-between"
-                  >
-                    {t("profilPimpinan")}
-                    <ChevronRightIcon />
-                  </Link>
-                </DropdownItem>
-                <DropdownItem key={"struktur"}>
-                  <Link
-                    href="/static/struktur-mabes"
-                    className="flex  justify-between"
-                  >
-                    {t("strukturOrganisasi")}
-                    <ChevronRightIcon />
-                  </Link>
-                </DropdownItem>
-                <DropdownItem key={"visimisi"}>
-                  <Link
-                    href="/static/visi-misi-polri"
-                    className="flex  justify-between"
-                  >
-                    {t("visi")} & {t("misi")}
-                    <ChevronRightIcon />
-                  </Link>
-                </DropdownItem>
-                <DropdownItem key={"fungsi"}>
-                  <Link
-                    href="/static/tugas-dan-fungsi-polri"
-                    className="flex  justify-between"
-                  >
-                    {t("tugas")} & {t("fungsi")}
-                    <ChevronRightIcon />
-                  </Link>
-                </DropdownItem>
-                <DropdownItem key={"logo"}>
-                  <Link href="/static/logo" className="flex  justify-between">
-                    Logo
-                    <ChevronRightIcon />
-                  </Link>
-                </DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-            <Dropdown
+            {/* <Dropdown
               className=" dark:bg-[#1F1A17]"
               onOpenChange={(state) => setIsOpen(state)}
             >
@@ -579,6 +495,84 @@ export default function NavbarHumas(props: { size: string }) {
                   </Link>
                 </DropdownItem>
               </DropdownMenu>
+            </Dropdown> */}
+            <Dropdown
+              className=" dark:bg-[#1F1A17]"
+              onOpenChange={(state) => setIsOpen(state)}
+            >
+              <NavbarItem>
+                <DropdownTrigger>
+                  <Button
+                    disableRipple
+                    className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
+                    radius="sm"
+                    variant="light"
+                    endContent={<ChevronDownIcon className="pt-1" />}
+                  >
+                    {t("informasi_publik")}
+                  </Button>
+                </DropdownTrigger>
+              </NavbarItem>
+              <DropdownMenu
+                // aria-label="tentang"
+                title={t("tentang")}
+                className="pt-4"
+                classNames={{
+                  // base: "flex",
+                  // list: "border-2 gap-2 flex flex-row flex-wrap"
+                  list: "gap-2 flex flex-row flex-wrap",
+                }}
+                itemClasses={{
+                  // base: "border border-red-700 w-[350px]"
+                  base: "w-[350px]",
+                }}
+              >
+                <DropdownItem key={"humas"}>
+                  <Link
+                    href="https://eppid.polri.go.id/informasi-publik/informasi-berkala"
+                    className="flex  justify-between"
+                  >
+                    Informasi Berkala
+                    <ChevronRightIcon />
+                  </Link>
+                </DropdownItem>
+                <DropdownItem key={"profil"}>
+                  <Link
+                    href="https://eppid.polri.go.id/informasi-publik/informasi-serta-merta"
+                    className="flex  justify-between"
+                  >
+                    Informasi Serta Merta
+                    <ChevronRightIcon />
+                  </Link>
+                </DropdownItem>
+                <DropdownItem key={"struktur"}>
+                  <Link
+                    href="https://eppid.polri.go.id/informasi-publik/informasi-setiap-saat"
+                    className="flex  justify-between"
+                  >
+                    Informasi Setiap Saat
+                    <ChevronRightIcon />
+                  </Link>
+                </DropdownItem>
+                <DropdownItem key={"visimisi"}>
+                  <Link
+                    href="https://eppid.polri.go.id/informasi-publik/informasi-dikecualikan"
+                    className="flex  justify-between"
+                  >
+                    Informasi Dikecualikan
+                    <ChevronRightIcon />
+                  </Link>
+                </DropdownItem>
+                <DropdownItem key={"fungsi"}>
+                  <Link
+                    href="https://sisdivkum.id/library/peraturan-kepolisian"
+                    className="flex  justify-between"
+                  >
+                    UU & Peraturan
+                    <ChevronRightIcon />
+                  </Link>
+                </DropdownItem>
+              </DropdownMenu>
             </Dropdown>
             <Dropdown
               className=" dark:bg-[#1F1A17]"
diff --git a/config/site.ts b/config/site.ts
index bf6523c..c334b08 100644
--- a/config/site.ts
+++ b/config/site.ts
@@ -112,61 +112,57 @@ export const siteConfig = {
       label: "informasi_publik",
       submenu: [
         {
-          label: "Humas Polri",
-          href: "/static/humas-polri",
+          label: "Informasi Berkala",
+          href: "https://eppid.polri.go.id/informasi-publik/informasi-berkala",
         },
         {
-          label: "Profil Pimpinan Polri",
-          href: "/static/profile-kapolri",
+          label: "Informasi Serta Merta",
+          href: "https://eppid.polri.go.id/informasi-publik/informasi-serta-merta",
         },
         {
-          label: "Struktur Organisasi",
-          href: "/static/struktur-mabes",
+          label: "Informasi Setiap Saat",
+          href: "https://eppid.polri.go.id/informasi-publik/informasi-setiap-saat",
         },
         {
-          label: "Visi & Misi",
-          href: "/static/visi-misi-polri",
+          label: "Informasi Dikecualikan",
+          href: "https://eppid.polri.go.id/informasi-publik/informasi-dikecualikan",
         },
         {
-          label: "Tugas & Fungsi",
-          href: "/static/tugas-dan-fungsi-polri",
-        },
-        {
-          label: "Logo",
-          href: "/static/logo",
-        },
-      ],
-    },
-    {
-      key: "publication",
-      label: "publikasi",
-      submenu: [
-        {
-          label: "Humas Polri",
-          href: "/static/humas-polri",
-        },
-        {
-          label: "Profil Pimpinan Polri",
-          href: "/static/profile-kapolri",
-        },
-        {
-          label: "Struktur Organisasi",
-          href: "/static/struktur-mabes",
-        },
-        {
-          label: "Visi & Misi",
-          href: "/static/visi-misi-polri",
-        },
-        {
-          label: "Tugas & Fungsi",
-          href: "/static/tugas-dan-fungsi-polri",
-        },
-        {
-          label: "Logo",
-          href: "/static/logo",
+          label: "UU & Peraturan",
+          href: "https://sisdivkum.id/library/peraturan-kepolisian",
         },
       ],
     },
+    // {
+    //   key: "publication",
+    //   label: "publikasi",
+    //   submenu: [
+    //     {
+    //       label: "Humas Polri",
+    //       href: "/static/humas-polri",
+    //     },
+    //     {
+    //       label: "Profil Pimpinan Polri",
+    //       href: "/static/profile-kapolri",
+    //     },
+    //     {
+    //       label: "Struktur Organisasi",
+    //       href: "/static/struktur-mabes",
+    //     },
+    //     {
+    //       label: "Visi & Misi",
+    //       href: "/static/visi-misi-polri",
+    //     },
+    //     {
+    //       label: "Tugas & Fungsi",
+    //       href: "/static/tugas-dan-fungsi-polri",
+    //     },
+    //     {
+    //       label: "Logo",
+    //       href: "/static/logo",
+    //     },
+    //   ],
+    // },
     {
       key: "about",
       label: "tentang",
diff --git a/messages/en.json b/messages/en.json
index 9cb17a1..2372fdf 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -33,7 +33,9 @@
     "SatuData": "Satu Data"
   },
   "Landing": {
-    "berita": "Breaking News",
+    "berita": "Hot Topic",
+    "terkini": "Breaking News",
+
     "semua": "See All",
     "lebihBanyak": "See More",
     "kategoriSatker": "Satker Cateogry",
diff --git a/messages/id.json b/messages/id.json
index 007bde3..7a991ec 100644
--- a/messages/id.json
+++ b/messages/id.json
@@ -32,7 +32,8 @@
     "SatuData": "Satu Data"
   },
   "Landing": {
-    "berita": "Berita Terkini",
+    "berita": "Hot Topik",
+    "terkini": "Berita Terkini",
     "semua": "Lihat Semua",
     "lebihBanyak": "Lihat Lebih Banyak",
     "kategoriSatker": "Kategori Satker",
diff --git a/service/article.ts b/service/article.ts
index 96bc034..9e45c0c 100644
--- a/service/article.ts
+++ b/service/article.ts
@@ -9,8 +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, category } =
-    props;
+  const {
+    page,
+    limit,
+    search,
+    startDate,
+    endDate,
+    isPublish,
+    category,
+    sortBy,
+    sort,
+  } = props;
   const headers = {
     "content-type": "application/json",
   };
@@ -19,7 +28,9 @@ export async function getListArticle(props: PaginationRequest) {
       isPublish === undefined ? "" : isPublish
     }&title=${search}&startDate=${startDate || ""}&endDate=${
       endDate || ""
-    }&category=${category || ""}`,
+    }&category=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
+      sort || "asc"
+    }`,
     headers
   );
 }
diff --git a/types/globals.tsx b/types/globals.tsx
index f42c55c..092d25f 100644
--- a/types/globals.tsx
+++ b/types/globals.tsx
@@ -63,4 +63,6 @@ export type PaginationRequest = {
   endDate?: string;
   isPublish?: boolean;
   category?: string;
+  sortBy?: string;
+  sort?: string;
 };