feat: add inbox section
This commit is contained in:
parent
39627c8ee8
commit
7a264a8e25
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 ? (
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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())}`;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue