mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: inbox section

This commit is contained in:
sabdayagra 2025-01-10 15:34:25 +07:00
parent f2e3f0bb2b
commit ae40d615a5
3 changed files with 73 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/auth/registration/page.tsx
View File

@ -548,7 +548,7 @@ const page = () => {
<div className="flex flex-row justify-center py-10"> <div className="flex flex-row justify-center py-10">
<ul className="flex flex-row items-center text-center"> <ul className="flex flex-row items-center text-center">
<li> <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> <span>
<b className="items-center">1</b> <b className="items-center">1</b>
</span> </span>

106
components/landing-page/navbar.tsx
View File

@ -19,6 +19,8 @@ import { Button } from "@/components/ui/button";
import LocalSwitcher from "../partials/header/locale-switcher"; import LocalSwitcher from "../partials/header/locale-switcher";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { getUserNotifications, listRole } from "@/service/landing/landing"; import { getUserNotifications, listRole } from "@/service/landing/landing";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
type Detail = { type Detail = {
id: number; id: number;
@ -56,6 +58,7 @@ const Navbar = () => {
const [notifications, setNotifications] = useState([]); const [notifications, setNotifications] = useState([]);
const [isMessageActive, setIsMessageActive] = useState(true); const [isMessageActive, setIsMessageActive] = useState(true);
const [notificationsUpdate, setNotificationsUpdate] = useState([]); const [notificationsUpdate, setNotificationsUpdate] = useState([]);
const [selectedTab, setSelectedTab] = useState("image");
let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/"; let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
@ -285,10 +288,10 @@ const Navbar = () => {
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </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="w-2 h-2 bg-red-500 rounded-full"></span>
<span className="font-medium">{t("live")}</span> <span className="font-medium">{t("live")}</span>
</Link> </Link> */}
<div className="flex items-center space-x-1 "> <div className="flex items-center space-x-1 ">
<a href="https://tvradio.polri.go.id/"> <a href="https://tvradio.polri.go.id/">
<img src="/assets/polriTv.png" className="object-contain h-10 flex-auto " /> <img src="/assets/polriTv.png" className="object-contain h-10 flex-auto " />
@ -325,44 +328,75 @@ const Navbar = () => {
</div> </div>
<div> <div>
<DropdownMenu> <Popover>
<DropdownMenuTrigger> <PopoverTrigger>
<a onClick={() => test()}> <a onClick={() => test()}>
{" "} {" "}
<Icon icon="basil:envelope-outline" color="black" width="30" /> <Icon icon="basil:envelope-outline" color="black" width="30" />
</a> </a>
</DropdownMenuTrigger> </PopoverTrigger>
<DropdownMenuContent className="w-60 p-0 flex flex-row" align="end"> <PopoverContent className=" p-0 h-32 flex flex-col mt-2" align="end">
<DropdownMenuItem> <Tabs value={selectedTab} onValueChange={setSelectedTab} className="flex flex-row">
<a <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
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" : ""}`} <TabsTrigger value="notif-tab">
id="notif-tab" <a
data-toggle="tab" className={`flex items-center justify-center cursor-pointer bg-[#bb3523] text-white gap-4 rounded-lg p-3 text-sm mr-4 ${isMessageActive ? "active" : ""}`}
href="#pesan" id="notif-tab"
role="tab" data-toggle="tab"
aria-controls="notif" role="tab"
aria-selected="true" aria-controls="notif"
onClick={() => setIsMessageActive(true)} aria-selected="true"
> onClick={() => setIsMessageActive(true)}
Pesan Masuk >
</a> Pesan Masuk
</DropdownMenuItem> </a>
<DropdownMenuItem> </TabsTrigger>
<a <TabsTrigger value="notifupdate-tab">
className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${isMessageActive ? "" : "active"}`} <a
id="notifupdate-tab" className={`flex items-center cursor-pointer bg-[#bb3523] text-white text-sm gap-4 rounded-lg p-3 mr-4 ${isMessageActive ? "" : "active"}`}
data-toggle="tab" id="notifupdate-tab"
href="#update" data-toggle="tab"
role="tab" role="tab"
aria-controls="notifupdate" aria-controls="notifupdate"
aria-selected="false" aria-selected="false"
onClick={() => setIsMessageActive(false)} onClick={() => setIsMessageActive(false)}
> >
Update Update(
</a> {notificationsUpdate?.length})
</DropdownMenuItem> </a>
</DropdownMenuContent> </TabsTrigger>
</DropdownMenu> </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>
{/* <div className="flex items-center space-x-2"> {/* <div className="flex items-center space-x-2">

3
service/landing/landing.ts
View File

@ -1,3 +1,4 @@
import { httpPost } from "../http-config/http-base-service";
import { httpDeleteInterceptor, httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service"; import { httpDeleteInterceptor, httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
export async function getHeroData() { export async function getHeroData() {
@ -120,7 +121,7 @@ export async function verifyOTP(email: any, otp: any) {
export async function requestOTP(data: any) { export async function requestOTP(data: any) {
const url = "public/users/otp-request"; const url = "public/users/otp-request";
return httpPostInterceptor(url, data); return httpPost(url, data);
} }
export async function getUserNotifications(page = 0, typeId: any) { export async function getUserNotifications(page = 0, typeId: any) {