feat: inbox section
This commit is contained in:
parent
f2e3f0bb2b
commit
ae40d615a5
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue