From 7a264a8e25679ff0b4c3825df889871a740e4562 Mon Sep 17 00:00:00 2001
From: sabdayagra <msabdayagra@gmail.com>
Date: Fri, 10 Jan 2025 18:29:00 +0700
Subject: [PATCH] feat: add inbox section

---
 app/[locale]/(public)/inbox/layout.tsx      |  22 +++
 app/[locale]/(public)/inbox/page.tsx        | 151 +++++++++++++++++++
 app/[locale]/(public)/inbox/update/page.tsx | 151 +++++++++++++++++++
 components/landing-page/navbar.tsx          | 159 +++++++++++---------
 service/landing/landing.ts                  |   2 +-
 utils/globals.tsx                           |   6 +
 6 files changed, 420 insertions(+), 71 deletions(-)
 create mode 100644 app/[locale]/(public)/inbox/layout.tsx
 create mode 100644 app/[locale]/(public)/inbox/page.tsx
 create mode 100644 app/[locale]/(public)/inbox/update/page.tsx

diff --git a/app/[locale]/(public)/inbox/layout.tsx b/app/[locale]/(public)/inbox/layout.tsx
new file mode 100644
index 00000000..fab820cf
--- /dev/null
+++ b/app/[locale]/(public)/inbox/layout.tsx
@@ -0,0 +1,22 @@
+import LayoutProvider from "@/providers/layout.provider";
+import LayoutContentProvider from "@/providers/content.provider";
+import DashCodeSidebar from "@/components/partials/sidebar";
+import DashCodeFooter from "@/components/partials/footer";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeHeader from "@/components/partials/header";
+
+import { redirect } from "@/components/navigation";
+import Footer from "@/components/landing-page/footer";
+import Navbar from "@/components/landing-page/navbar";
+
+const layout = async ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
+    </>
+  );
+};
+
+export default layout;
diff --git a/app/[locale]/(public)/inbox/page.tsx b/app/[locale]/(public)/inbox/page.tsx
new file mode 100644
index 00000000..8f330796
--- /dev/null
+++ b/app/[locale]/(public)/inbox/page.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { Link, usePathname } from "@/i18n/routing";
+import { getUserNotifications } from "@/service/landing/landing";
+import { getTimestamp } from "@/utils/globals";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+
+const InboxSection = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const isUpdate = pathname.includes("update");
+  const searchParams = useSearchParams();
+
+  const page: any = searchParams?.get("page");
+
+  const pages = page ? page - 1 : 0;
+
+  const [notifications, setNotifications] = useState([]);
+  const [getTotalData, setGetTotalData] = useState();
+  const [, setGetTotalPage] = useState();
+
+  useEffect(() => {
+    async function getNotif() {
+      const response = await getUserNotifications(page, 2);
+      setNotifications(response?.data?.data?.content);
+      setGetTotalData(response?.data?.data?.totalElements);
+      setGetTotalPage(response?.data?.data?.totalPage);
+    }
+
+    async function getNotifUpdate() {
+      const response = await getUserNotifications(page, 3);
+      setNotifications(response?.data?.data?.content);
+      setGetTotalData(response?.data?.data?.totalElements);
+      setGetTotalPage(response?.data?.data?.totalPage);
+    }
+
+    if (isUpdate) {
+      getNotifUpdate();
+    } else {
+      getNotif();
+    }
+  }, [page]);
+
+  return (
+    <div className="max-w-6xl h-screen flex flex-col mx-auto p-4 lg:p-24 gap-5">
+      <div className="flex items-center justify-center mb-6">
+        <svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 24 24">
+          <g fill="#bb3523" fill-rule="evenodd" clip-rule="evenodd">
+            <path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" />
+            <path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21" />
+          </g>
+        </svg>{" "}
+        <h2 className="ml-4 text-[15px] lg:text-[32px] font-semibold text-gray-800">Pesan Masuk</h2>
+      </div>
+
+      <div className="flex flex-col justify-center items-center gap-3">
+        <div className="flex justify-center">
+          <div className="flex flex-row gap-10 items-center justify-center">
+            <div>
+              <p className="bg-[#bb3523] py-1 px-3 rounded-full">Pesan Masuk</p>
+            </div>
+            <Link href={`/inbox/update`}>Update</Link>
+          </div>
+        </div>
+        <div className="flex justify-center items-center py-20 px-36 max-w-lg mt-3 border border-black rounded-lg ">
+          <h1 className="flex text-left">List Notifikasi</h1>
+          {notifications?.map((list: any) => (
+            <a href={"/" + list.redirectUrl}>
+              {(() => {
+                switch (Number(list.notificationTypeId)) {
+                  case 2:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="fa:comment" />{" "}
+                      </div>
+                    );
+
+                  case 3:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="fa:upload" />{" "}
+                      </div>
+                    );
+
+                  case 4:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="la:check-double" />{" "}
+                      </div>
+                    );
+
+                  case 5:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="fa:comments" />{" "}
+                      </div>
+                    );
+
+                  case 6:
+                    return (
+                      <div className="notif-icon notif-danger">
+                        {" "}
+                        <Icon icon="fa:tasks" />{" "}
+                      </div>
+                    );
+
+                  case 7:
+                    return (
+                      <div className="notif-icon notif-primary">
+                        {" "}
+                        <Icon icon="fa:pencil-square" />{" "}
+                      </div>
+                    );
+
+                  case 8:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="fa:times-circle" />{" "}
+                      </div>
+                    );
+
+                  default:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="fa:info-circle" />{" "}
+                      </div>
+                    );
+                }
+              })()}
+              <div className="">
+                <span className="block">{list.message}</span>
+                <span className="">{getTimestamp(new Date(list.createdAt))}</span>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InboxSection;
diff --git a/app/[locale]/(public)/inbox/update/page.tsx b/app/[locale]/(public)/inbox/update/page.tsx
new file mode 100644
index 00000000..1ce6f763
--- /dev/null
+++ b/app/[locale]/(public)/inbox/update/page.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { Link, usePathname } from "@/i18n/routing";
+import { getUserNotifications } from "@/service/landing/landing";
+import { getTimestamp } from "@/utils/globals";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+
+const UpdateSection = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const isUpdate = pathname.includes("update");
+  const searchParams = useSearchParams();
+
+  const page: any = searchParams?.get("page");
+
+  const pages = page ? page - 1 : 0;
+
+  const [notifications, setNotifications] = useState([]);
+  const [getTotalData, setGetTotalData] = useState();
+  const [, setGetTotalPage] = useState();
+
+  useEffect(() => {
+    async function getNotif() {
+      const response = await getUserNotifications(page, 2);
+      setNotifications(response?.data?.data?.content);
+      setGetTotalData(response?.data?.data?.totalElements);
+      setGetTotalPage(response?.data?.data?.totalPage);
+    }
+
+    async function getNotifUpdate() {
+      const response = await getUserNotifications(page, 3);
+      setNotifications(response?.data?.data?.content);
+      setGetTotalData(response?.data?.data?.totalElements);
+      setGetTotalPage(response?.data?.data?.totalPage);
+    }
+
+    if (isUpdate) {
+      getNotifUpdate();
+    } else {
+      getNotif();
+    }
+  }, [page]);
+
+  return (
+    <div className="max-w-6xl h-screen flex flex-col mx-auto p-4 lg:p-24 gap-5">
+      <div className="flex items-center justify-center mb-6">
+        <svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 24 24">
+          <g fill="#bb3523" fill-rule="evenodd" clip-rule="evenodd">
+            <path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" />
+            <path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21" />
+          </g>
+        </svg>{" "}
+        <h2 className="ml-4 text-[15px] lg:text-[32px] font-semibold text-gray-800">Update</h2>
+      </div>
+
+      <div className="flex flex-col justify-center items-center gap-3">
+        <div className="flex justify-center">
+          <div className="flex flex-row gap-10 items-center justify-center">
+            <div>
+              <Link href={`/inbox`}>Pesan Masuk</Link>
+            </div>
+            <div className="bg-[#bb3523] py-1 px-3 rounded-full">Update</div>
+          </div>
+        </div>
+        <div className="py-20 px-36 max-w-lg mt-3 border border-black rounded-lg flex justify-center">
+          <h1>List Notifikasi</h1>
+          {notifications?.map((list: any) => (
+            <a href={"/" + list.redirectUrl}>
+              {(() => {
+                switch (Number(list.notificationTypeId)) {
+                  case 2:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="fa:comment" />{" "}
+                      </div>
+                    );
+
+                  case 3:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="fa:upload" />{" "}
+                      </div>
+                    );
+
+                  case 4:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="la:check-double" />{" "}
+                      </div>
+                    );
+
+                  case 5:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="fa:comments" />{" "}
+                      </div>
+                    );
+
+                  case 6:
+                    return (
+                      <div className="notif-icon notif-danger">
+                        {" "}
+                        <Icon icon="fa:tasks" />{" "}
+                      </div>
+                    );
+
+                  case 7:
+                    return (
+                      <div className="notif-icon notif-primary">
+                        {" "}
+                        <Icon icon="fa:pencil-square" />{" "}
+                      </div>
+                    );
+
+                  case 8:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="fa:times-circle" />{" "}
+                      </div>
+                    );
+
+                  default:
+                    return (
+                      <div className="text-red-500">
+                        {" "}
+                        <Icon icon="fa:info-circle" />{" "}
+                      </div>
+                    );
+                }
+              })()}
+              <div className="">
+                <span className="block">{list.message}</span>
+                <span className="">{getTimestamp(new Date(list.createdAt))}</span>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateSection;
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 180f34ea..4b426162 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -20,7 +20,7 @@ import LocalSwitcher from "../partials/header/locale-switcher";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { getUserNotifications, listRole } from "@/service/landing/landing";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 
 type Detail = {
   id: number;
@@ -327,77 +327,96 @@ const Navbar = () => {
             </span>
           </div>
 
-          <div>
-            <Popover>
-              <PopoverTrigger>
-                <a onClick={() => test()}>
-                  {" "}
-                  <Icon icon="basil:envelope-outline" color="black" width="30" />
-                </a>
-              </PopoverTrigger>
-              <PopoverContent className=" p-0 h-32 flex flex-col mt-2" align="end">
-                <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-row">
-                  <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
-                    <TabsTrigger value="notif-tab">
-                      <a
-                        className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${isMessageActive ? "active" : ""}`}
-                        id="notif-tab"
-                        data-toggle="tab"
-                        role="tab"
-                        aria-controls="notif"
-                        aria-selected="true"
-                        onClick={() => setIsMessageActive(true)}
-                      >
-                        Pesan Masuk
-                      </a>
-                    </TabsTrigger>
-                    <TabsTrigger value="notifupdate-tab">
-                      <a
-                        className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${isMessageActive ? "" : "active"}`}
-                        id="notifupdate-tab"
-                        data-toggle="tab"
-                        role="tab"
-                        aria-controls="notifupdate"
-                        aria-selected="false"
-                        onClick={() => setIsMessageActive(false)}
-                      >
-                        Update(
-                        {notificationsUpdate?.length})
-                      </a>
-                    </TabsTrigger>
-                  </TabsList>
-                </Tabs>
-              </PopoverContent>
-              <PopoverContent>
-                <div className={`tab-pane fade ${isMessageActive ? "active" : ""}`}>
-                  <div>
-                    {notifications?.map((list: any) => (
-                      <a className="" href={list.redirectUrl} key={list.id}>
-                        <div className="">
-                          <img src="/assets/img/avatar-profile.png" alt="..." className="" />
+          {/* Inbox */}
+          <Popover>
+            <PopoverTrigger asChild>
+              <a className="cursor-pointer" onClick={() => test()}>
+                {" "}
+                <Icon icon="basil:envelope-outline" color="black" width="30" />
+              </a>
+            </PopoverTrigger>
+            <PopoverContent className=" p-0 h-32 flex flex-col mt-2" align="end">
+              <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-row">
+                <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
+                  <TabsTrigger value="notif-tab">
+                    <a
+                      className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${isMessageActive ? "active" : ""}`}
+                      id="notif-tab"
+                      data-toggle="tab"
+                      role="tab"
+                      aria-controls="notif"
+                      aria-selected="true"
+                      onClick={() => setIsMessageActive(true)}
+                    >
+                      Pesan Masuk
+                    </a>
+                  </TabsTrigger>
+                  <TabsTrigger value="notifupdate-tab">
+                    <a
+                      className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${isMessageActive ? "" : "active"}`}
+                      id="notifupdate-tab"
+                      data-toggle="tab"
+                      role="tab"
+                      aria-controls="notifupdate"
+                      aria-selected="false"
+                      onClick={() => setIsMessageActive(false)}
+                    >
+                      Update(
+                      {notificationsUpdate?.length})
+                    </a>
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
+              <div className={`flex justify-center my-3 ${isMessageActive ? "active" : ""}`}>
+                {notifications?.map((list: any) => (
+                  <a className="" href={list.redirectUrl} key={list.id}>
+                    <div className="">
+                      <img src="/assets/img/avatar-profile.png" alt="..." className="" />
+                    </div>
+                    <div className="">
+                      <div className="text-wrap text-left">{list?.message}</div>
+                      <div>
+                        <small>
+                          {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
+                        </small>
+                      </div>
+                    </div>
+                  </a>
+                ))}
+                <Link href="/inbox" legacyBehavior>
+                  <p className="text-[15px] py-2" role="button">
+                    Lihat semua
+                  </p>
+                </Link>
+              </div>
+            </PopoverContent>
+            {/* <PopoverContent>
+              <div className={`tab-pane fade ${isMessageActive ? "active" : ""}`}>
+                <div>
+                  {notifications?.map((list: any) => (
+                    <a className="" href={list.redirectUrl} key={list.id}>
+                      <div className="">
+                        <img src="/assets/img/avatar-profile.png" alt="..." className="" />
+                      </div>
+                      <div className="">
+                        <div className="text-wrap text-left">{list?.message}</div>
+                        <div>
+                          <small>
+                            {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
+                          </small>
                         </div>
-                        <div className="">
-                          <div className="text-wrap text-left">{list?.message}</div>
-                          <div>
-                            <small>
-                              {`${new Date(list?.createdAt).getDate()}/${new Date(list?.createdAt).getMonth() + 1}/${new Date(list?.createdAt).getFullYear()} ${new Date(list?.createdAt).getHours()}:${new Date(
-                                list?.createdAt
-                              ).getMinutes()}`}{" "}
-                            </small>
-                          </div>
-                        </div>
-                      </a>
-                    ))}
-                    <Link href="/inbox" legacyBehavior>
-                      <p className="text-[15px] py-2" role="button">
-                        Lihat semua
-                      </p>
-                    </Link>
-                  </div>
+                      </div>
+                    </a>
+                  ))}
+                  <Link href="/inbox" legacyBehavior>
+                    <p className="text-[15px] py-2" role="button">
+                      Lihat semua
+                    </p>
+                  </Link>
                 </div>
-              </PopoverContent>
-            </Popover>
-          </div>
+              </div>
+            </PopoverContent> */}
+          </Popover>
 
           {/* <div className="flex items-center space-x-2">
             {fullName ? (
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index f2b68e33..96159ff3 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -127,4 +127,4 @@ export async function requestOTP(data: any) {
 export async function getUserNotifications(page = 0, typeId: any) {
   const url = `notification/public/list?enablePage=1&page=${page}&typeId=${typeId}`;
   return httpGetInterceptor(url);
-}
+}
\ No newline at end of file
diff --git a/utils/globals.tsx b/utils/globals.tsx
index 9493c266..55e340de 100644
--- a/utils/globals.tsx
+++ b/utils/globals.tsx
@@ -100,3 +100,9 @@ export function getLocaleTime(d: Date) {
   const pad = (n: number, s = 2) => `${new Array(s).fill(0)}${n}`.slice(-s);
   return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
 }
+export function getTimestamp(d: Date) {
+  const pad = (n: any, s = 2) => `${new Array(s).fill(0)}${n}`.slice(-s);
+  return `${pad(d.getFullYear(), 4)}-${pad(d.getMonth() + 1)}-${pad(
+    d.getDate()
+  )} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}