268 lines
11 KiB
React
268 lines
11 KiB
React
import React from "react";
|
|
import { Link, Outlet, useNavigate } from "react-router-dom";
|
|
import { BsThreeDotsVertical } from "react-icons/bs";
|
|
import { RiLogoutBoxLine } from "react-icons/ri";
|
|
import { IoMdSettings } from "react-icons/io";
|
|
import { FaHome } from "react-icons/fa";
|
|
import { useSelector } from "react-redux";
|
|
import { IoIosNotifications } from "react-icons/io";
|
|
import { MdFeedback } from "react-icons/md";
|
|
import { MdOutlineSupportAgent } from "react-icons/md";
|
|
import { IoSettings } from "react-icons/io5";
|
|
import { RiCalendarScheduleLine } from "react-icons/ri";
|
|
import { IoIosHome } from "react-icons/io";
|
|
import { BACKEND_URL } from "../../constants";
|
|
import { IoMdStats } from "react-icons/io";
|
|
|
|
const MainUserPanel = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogOut = async () => {
|
|
const responce = await fetch(`${BACKEND_URL}/api/v1/logout`, {
|
|
method: "Get",
|
|
credentials: "include",
|
|
});
|
|
|
|
const data = await responce.json();
|
|
|
|
//console.log("User Logged out data is : ", data);
|
|
|
|
if (data.success === true) {
|
|
navigate("/user/login");
|
|
}
|
|
};
|
|
|
|
const user = useSelector((store) => store.user);
|
|
return (
|
|
<>
|
|
<div className="container mx-auto p-4">
|
|
<div className="flex items-center mb-4 md:hidden">
|
|
<img
|
|
src={`${user.avatar}`}
|
|
alt="Profile Picture"
|
|
className="rounded-full w-10 h-10 mr-2"
|
|
/>
|
|
<span className="text-lg font-medium">Hello, {user.name}</span>
|
|
</div>
|
|
<div className="flex flex-row gap-4">
|
|
{/* Updated Sidebar */}
|
|
<div className="w-full md:w-1/4 bg-gradient-to-br from-white/30 to-gray-50/30 rounded-xl shadow-lg p-6 backdrop-blur-lg">
|
|
<div className="hidden md:flex items-center mb-6">
|
|
<img
|
|
src={`${user.avatar}`}
|
|
alt="Profile Picture"
|
|
className="w-12 h-12 rounded-full mr-3 border-2 border-green-500"
|
|
/>
|
|
<span className="text-xl font-semibold text-gray-800">
|
|
Hello, {user.name}
|
|
</span>
|
|
</div>
|
|
<ul className="space-y-4">
|
|
<li>
|
|
<Link
|
|
to={"/user/dashboard"}
|
|
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
|
|
>
|
|
<IoIosHome className="text-2xl text-green-600" />
|
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
|
Dashboard
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
{/* <li>
|
|
<Link
|
|
to={"/user/dashboard/scheduledmeetings"}
|
|
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
|
|
>
|
|
<RiCalendarScheduleLine className="text-2xl text-green-600" />
|
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
|
Scheduled Meeting
|
|
</span>
|
|
</Link>
|
|
</li> */}
|
|
<li>
|
|
<Link
|
|
to={"/user/dashboard/monitoring"}
|
|
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
|
|
>
|
|
<IoMdStats className="text-2xl text-green-600" />
|
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
|
Monitor
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
{/* <li>
|
|
<Link
|
|
to={"/user/dashboard/notifications"}
|
|
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
|
|
>
|
|
<IoIosNotifications className="text-2xl text-green-600" />
|
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
|
Notifications
|
|
</span>
|
|
</Link>
|
|
</li> */}
|
|
{/* <li>
|
|
<Link
|
|
to={"/user/dashboard/feedback"}
|
|
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
|
|
>
|
|
<MdFeedback className="text-2xl text-green-600" />
|
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
|
Feedback and Ratings
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
*/}
|
|
{/* <li>
|
|
<Link
|
|
to={"/user/dashboard/support"}
|
|
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
|
|
>
|
|
<MdOutlineSupportAgent className="text-2xl text-green-600" />
|
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
|
Support
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
*/}
|
|
<li>
|
|
<Link
|
|
to={"/user/dashboard/settings"}
|
|
className="flex items-center p-2 rounded-md hover:bg-green-100/30 transition-colors backdrop-blur-md"
|
|
>
|
|
<IoSettings className="text-2xl text-green-600" />
|
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
|
Settings
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<Outlet />
|
|
<div className="hidden md:block w-3/12 bg-white rounded-lg shadow p-4 h-96">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-lg font-medium">My Profile</h3>
|
|
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
|
<button
|
|
type="button"
|
|
className="flex text-sm rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
|
|
id="user-menu-button"
|
|
aria-expanded="false"
|
|
data-dropdown-toggle="user-dropdown"
|
|
data-dropdown-placement="bottom"
|
|
>
|
|
<span className="sr-only">Open user menu</span>
|
|
<BsThreeDotsVertical className="text-lg" />
|
|
</button>
|
|
{/* Dropdown menu */}
|
|
<div
|
|
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
|
|
id="user-dropdown"
|
|
>
|
|
<div className="px-4 py-3">
|
|
<span className="block text-sm text-gray-900 dark:text-white">
|
|
Bonnie Green
|
|
</span>
|
|
<span className="block text-sm text-gray-500 truncate dark:text-gray-400">
|
|
name@flowbite.com
|
|
</span>
|
|
</div>
|
|
<ul className="py-2" aria-labelledby="user-menu-button">
|
|
<li>
|
|
<Link
|
|
to={"/user/dashboard"}
|
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
>
|
|
Dashboard
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
>
|
|
Settings
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
>
|
|
Earnings
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
onClick={handleLogOut}
|
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
>
|
|
Sign out
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<button
|
|
data-collapse-toggle="navbar-user"
|
|
type="button"
|
|
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
|
aria-controls="navbar-user"
|
|
aria-expanded="false"
|
|
>
|
|
<span className="sr-only">Open main menu</span>
|
|
<svg
|
|
className="w-5 h-5"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 17 14"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M1 1h15M1 7h15M1 13h15"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="mb-4">
|
|
<img
|
|
src={`${user.avatar}`}
|
|
alt="Profile Picture"
|
|
className="rounded-full w-24 h-24 mx-auto"
|
|
/>
|
|
<h4 className="text-lg font-medium mt-2">{user.name}</h4>
|
|
<p className="text-gray-500 text-sm mt-2">
|
|
Join on {user.createdAt && user.createdAt.substring(0, 10)}
|
|
</p>
|
|
<p className="text-gray-500 text-sm mt-2">
|
|
{user.address == null && "Maharashtra, Pune"}
|
|
</p>
|
|
<div className="flex justify-center mt-4">
|
|
<button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
|
|
<FaHome className="text-lg font-extrabold" />
|
|
</button>
|
|
<button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
|
|
<IoMdSettings className="text-lg font-extrabold" />
|
|
</button>
|
|
<button
|
|
className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
|
|
onClick={handleLogOut}
|
|
>
|
|
<RiLogoutBoxLine className="text-lg font-extrabold" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MainUserPanel;
|