From ae40d615a5fac37dd1db6033cdf2fc0e7562917c Mon Sep 17 00:00:00 2001
From: sabdayagra <msabdayagra@gmail.com>
Date: Fri, 10 Jan 2025 15:34:25 +0700
Subject: [PATCH] feat: inbox section

---
 app/[locale]/auth/registration/page.tsx |   2 +-
 components/landing-page/navbar.tsx      | 106 ++++++++++++++++--------
 service/landing/landing.ts              |   3 +-
 3 files changed, 73 insertions(+), 38 deletions(-)

diff --git a/app/[locale]/auth/registration/page.tsx b/app/[locale]/auth/registration/page.tsx
index 16d54e4c..be0dbe16 100644
--- a/app/[locale]/auth/registration/page.tsx
+++ b/app/[locale]/auth/registration/page.tsx
@@ -548,7 +548,7 @@ const page = () => {
           <div className="flex flex-row justify-center py-10">
             <ul className="flex flex-row items-center text-center">
               <li>
-                <div className={`text-center text-white bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepOneActive ? "active bg-white  border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}>
+                <div className={`text-center text-black bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepOneActive ? "active bg-white  border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}>
                   <span>
                     <b className="items-center">1</b>
                   </span>
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index e129cb72..180f34ea 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -19,6 +19,8 @@ import { Button } from "@/components/ui/button";
 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";
 
 type Detail = {
   id: number;
@@ -56,6 +58,7 @@ const Navbar = () => {
   const [notifications, setNotifications] = useState([]);
   const [isMessageActive, setIsMessageActive] = useState(true);
   const [notificationsUpdate, setNotificationsUpdate] = useState([]);
+  const [selectedTab, setSelectedTab] = useState("image");
 
   let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
 
@@ -285,10 +288,10 @@ const Navbar = () => {
             </NavigationMenuList>
           </NavigationMenu>
 
-          <Link href="#" className="flex items-center space-x-1 text-red-600">
+          {/* <Link href="#" className="flex items-center space-x-1 text-red-600">
             <span className="w-2 h-2 bg-red-500 rounded-full"></span>
             <span className="font-medium">{t("live")}</span>
-          </Link>
+          </Link> */}
           <div className="flex items-center space-x-1  ">
             <a href="https://tvradio.polri.go.id/">
               <img src="/assets/polriTv.png" className="object-contain h-10 flex-auto " />
@@ -325,44 +328,75 @@ const Navbar = () => {
           </div>
 
           <div>
-            <DropdownMenu>
-              <DropdownMenuTrigger>
+            <Popover>
+              <PopoverTrigger>
                 <a onClick={() => test()}>
                   {" "}
                   <Icon icon="basil:envelope-outline" color="black" width="30" />
                 </a>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-60 p-0 flex flex-row" align="end">
-                <DropdownMenuItem>
-                  <a
-                    className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white  gap-4 rounded-lg p-3 w-full text-sm mr-4 ${isMessageActive ? "active" : ""}`}
-                    id="notif-tab"
-                    data-toggle="tab"
-                    href="#pesan"
-                    role="tab"
-                    aria-controls="notif"
-                    aria-selected="true"
-                    onClick={() => setIsMessageActive(true)}
-                  >
-                    Pesan Masuk
-                  </a>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <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"
-                    href="#update"
-                    role="tab"
-                    aria-controls="notifupdate"
-                    aria-selected="false"
-                    onClick={() => setIsMessageActive(false)}
-                  >
-                    Update
-                  </a>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+              </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="" />
+                        </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>
+              </PopoverContent>
+            </Popover>
           </div>
 
           {/* <div className="flex items-center space-x-2">
diff --git a/service/landing/landing.ts b/service/landing/landing.ts
index f051b69e..f2b68e33 100644
--- a/service/landing/landing.ts
+++ b/service/landing/landing.ts
@@ -1,3 +1,4 @@
+import { httpPost } from "../http-config/http-base-service";
 import { httpDeleteInterceptor, httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
 
 export async function getHeroData() {
@@ -120,7 +121,7 @@ export async function verifyOTP(email: any, otp: any) {
 
 export async function requestOTP(data: any) {
   const url = "public/users/otp-request";
-  return httpPostInterceptor(url, data);
+  return httpPost(url, data);
 }
 
 export async function getUserNotifications(page = 0, typeId: any) {