327 lines
9.8 KiB
JavaScript
327 lines
9.8 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import "./AdminPanel.scss";
|
|
import {
|
|
FaTh,
|
|
FaUser,
|
|
FaUsers,
|
|
FaCalendarAlt,
|
|
FaBullseye,
|
|
FaVideo,
|
|
FaChevronRight,
|
|
FaPlus,
|
|
FaList,
|
|
FaSortDown,
|
|
FaArrowLeft,
|
|
FaRedo,
|
|
FaSignOutAlt,
|
|
FaCog,
|
|
FaGift,
|
|
FaGlobe,
|
|
FaImage,
|
|
FaMobile,
|
|
FaQuestionCircle,
|
|
FaBullhorn,
|
|
FaFootballBall,
|
|
FaBars,
|
|
FaTimes,
|
|
FaCalendar,
|
|
} from "react-icons/fa";
|
|
import { BsPostcardFill } from "react-icons/bs";
|
|
import { HiOutlineHome } from "react-icons/hi2";
|
|
|
|
import { useAdminPanel } from "./AdminPanelContext";
|
|
import BannerSectionForm from "./AdminPanelForms/BannerSectionForm";
|
|
import CTASectionForm from "./AdminPanelForms/CTASectionForm";
|
|
import EcosystemForm from "./AdminPanelForms/EcosystemForm";
|
|
import FaqSectionForm from "./AdminPanelForms/FaqSectionForm";
|
|
import FooterForm from "./AdminPanelForms/FooterForm";
|
|
import HeroSectionForm from "./AdminPanelForms/HeroSectionForm";
|
|
import OfferingsForm from "./AdminPanelForms/OfferingsForm";
|
|
import TrendingAppsForm from "./AdminPanelForms/TrendingAppsForm";
|
|
import AppDemo from "./AdminPanelForms/AppDemo";
|
|
import BlogForm from "./AdminPanelForms/BlogForm";
|
|
import SeoForm from "./AdminPanelForms/SeoForm";
|
|
import WebinarSubmissionsViewer from "./AdminPanelForms/WebinarSubmissionsViewer";
|
|
import SpeakersAdminForm from "../Pages/Webinar/SpeakersAdminForm";
|
|
import SEO from "../Components/SEO/SEO";
|
|
import DemoRequestsList from "../Pages/DemoRequests/DemoRequestsList";
|
|
import { clearSession, getSession } from "../Services/others";
|
|
import { GenerateLogout } from "../features/signInPage/signInPage";
|
|
import { useDispatch } from "react-redux";
|
|
const subDirectory = import.meta.env.BASE_URL;
|
|
|
|
const AdminPanel = () => {
|
|
// Default to first option (HeroSectionForm)
|
|
const [selectedId, setSelectedId] = useState(0);
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
|
|
const UserType = getSession("UserType");
|
|
console.log(UserType, "UserTypeUserType")
|
|
|
|
const sidebarOptions = [
|
|
// { id: 1, title: "Dashboard", subtitle: "Overview", icon: <FaTh /> },
|
|
{
|
|
id: 0,
|
|
title: "Blog",
|
|
subtitle: "Post Content Control",
|
|
icon: <BsPostcardFill size={25} />,
|
|
component: BlogForm,
|
|
key: "BlogSection",
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "Demo Requests",
|
|
subtitle: "Manage Demo Bookings",
|
|
icon: <FaCalendar />,
|
|
component: DemoRequestsList,
|
|
key: "DemoRequests",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Webinar Submissions",
|
|
subtitle: "View Registrations & Leads",
|
|
icon: <FaCalendarAlt />,
|
|
component: WebinarSubmissionsViewer,
|
|
key: "WebinarSubmissions",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Webinar Speakers",
|
|
subtitle: "Manage Speakers",
|
|
icon: <FaUsers />,
|
|
component: SpeakersAdminForm,
|
|
key: "WebinarSpeakers",
|
|
},
|
|
{
|
|
id: 10,
|
|
title: "SEO",
|
|
subtitle: "Content Management",
|
|
icon: <FaUser />,
|
|
component: SeoForm,
|
|
key: "SEOForm",
|
|
},
|
|
// {
|
|
// id: 1,
|
|
// title: "HeroSection",
|
|
// subtitle: "Hero Section Management",
|
|
// icon: <FaUser />,
|
|
// component: HeroSectionForm,
|
|
// key: "HeroSection",
|
|
// },
|
|
// {
|
|
// id: 2,
|
|
// title: "Offerings",
|
|
// subtitle: "Offering Section Management",
|
|
// icon: <FaGift />,
|
|
// component: OfferingsForm,
|
|
// key: "OfferingSection",
|
|
// },
|
|
// {
|
|
// id: 3,
|
|
// title: "Industries",
|
|
// subtitle: "Ecosystem Management",
|
|
// icon: <FaGlobe />,
|
|
// component: EcosystemForm,
|
|
// key: "Industries",
|
|
// },
|
|
// {
|
|
// id: 4,
|
|
// title: "AppDemo",
|
|
// subtitle: "Video Section Management",
|
|
// icon: <FaVideo />,
|
|
// component: AppDemo,
|
|
// key: "VideoDemo",
|
|
// },
|
|
// {
|
|
// id: 5,
|
|
// title: "BannerSection",
|
|
// subtitle: "Banner Section Management",
|
|
// icon: <FaImage />,
|
|
// component: BannerSectionForm,
|
|
// key: "BannerSection",
|
|
// },
|
|
// {
|
|
// id: 6,
|
|
// title: "TrendingApps",
|
|
// subtitle: "Trending Apps Management",
|
|
// icon: <FaMobile />,
|
|
// component: TrendingAppsForm,
|
|
// key: "TrendingApps",
|
|
// },
|
|
// {
|
|
// id: 7,
|
|
// title: "FaqSection",
|
|
// subtitle: "FAQ Management",
|
|
// icon: <FaQuestionCircle />,
|
|
// component: FaqSectionForm,
|
|
// key: "FAQSection",
|
|
// },
|
|
// {
|
|
// id: 8,
|
|
// title: "CTASection",
|
|
// subtitle: "Call-to-Action Management",
|
|
// icon: <FaBullhorn />,
|
|
// component: CTASectionForm,
|
|
// key: "CTASection",
|
|
// },
|
|
// {
|
|
// id: 9,
|
|
// title: "Footer",
|
|
// subtitle: "Footer Management",
|
|
// icon: <FaFootballBall />,
|
|
// component: FooterForm,
|
|
// key: "FooterSection",
|
|
// },
|
|
];
|
|
|
|
const currentSection = sidebarOptions.find(
|
|
(option) => option.id === selectedId
|
|
);
|
|
|
|
const handleSideBarSelect = (option) => {
|
|
setSelectedId(option?.id);
|
|
setIsMobileMenuOpen(false); // Close mobile menu on selection
|
|
};
|
|
|
|
const handleSignOut = async () => {
|
|
const UserId = getSession("UserId");
|
|
const status = "N";
|
|
const res = await dispatch(GenerateLogout({ UserId, status })).unwrap();
|
|
if (res?.data?.statusCode === 1) {
|
|
clearSession();
|
|
navigate(`${subDirectory}`);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
title="PozoApp Admin Panel - Manage Your Business Settings"
|
|
description="Access PozoApp's comprehensive admin panel to configure your business settings, manage users, and customize your experience."
|
|
keywords="admin panel, business settings, user management, configuration"
|
|
url={`${subDirectory}admin-panel`}
|
|
image="/og/admin-og.jpg"
|
|
type="website"
|
|
noindex={true}
|
|
/>
|
|
<div className="admin-panel-container">
|
|
{/* Mobile Menu Toggle */}
|
|
<div className="admin-panel-mobile-header">
|
|
<div className="admin-panel-mobile-logo">
|
|
<FaCog /> Admin Panel
|
|
</div>
|
|
<button
|
|
className="admin-panel-mobile-toggle"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
>
|
|
{isMobileMenuOpen ? <FaTimes /> : <FaBars />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Sidebar Navigation */}
|
|
<div
|
|
className={`admin-panel-sidebar ${isMobileMenuOpen ? "mobile-open" : ""
|
|
}`}
|
|
>
|
|
<div className="admin-panel-sidebar-header">
|
|
<div className="admin-panel-logo">
|
|
<FaCog />
|
|
<h1>Admin Panel</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="admin-panel-sidebar-nav">
|
|
{sidebarOptions.map((option) => (
|
|
<div
|
|
key={option.id}
|
|
className={`admin-panel-nav-item ${selectedId === option.id ? "active" : ""
|
|
}`}
|
|
onClick={() => handleSideBarSelect(option)}
|
|
>
|
|
<div className="admin-panel-nav-icon">{option.icon}</div>
|
|
<div className="admin-panel-nav-content">
|
|
<span className="admin-panel-nav-title">{option.title}</span>
|
|
<span className="admin-panel-nav-subtitle">
|
|
{option.subtitle}
|
|
</span>
|
|
</div>
|
|
{selectedId === option.id && (
|
|
<div className="admin-panel-active-indicator"></div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="admin-panel-sidebar-footer">
|
|
<div className="admin-panel-user-profile">
|
|
<div className="admin-panel-user-avatar">SA</div>
|
|
<div className="admin-panel-user-info">
|
|
<span className="admin-panel-user-name">
|
|
Marketing Administrator
|
|
</span>
|
|
<span className="admin-panel-user-role">Super Admin</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
className="admin-panel-signout-btn"
|
|
onClick={handleSignOut}
|
|
>
|
|
<FaSignOutAlt /> Sign Out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Overlay */}
|
|
{isMobileMenuOpen && (
|
|
<div
|
|
className="admin-panel-mobile-overlay"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
></div>
|
|
)}
|
|
|
|
{/* Main Content */}
|
|
<div className="admin-panel-main-content">
|
|
{/* Top Header with Breadcrumbs */}
|
|
<div className="admin-panel-top-header">
|
|
<div className="admin-panel-breadcrumbs">
|
|
<span>Dashboard</span>
|
|
{currentSection && (
|
|
<>
|
|
<FaChevronRight className="admin-panel-breadcrumb-arrow" />
|
|
<span>{currentSection.title} Management</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="backtohomefromAdminpanel"
|
|
onClick={() => UserType === "Super Admin" ? navigate(`${subDirectory}landing-page/home`) : navigate(`${subDirectory}`)}
|
|
>
|
|
Back to Home <HiOutlineHome size={18} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Area */}
|
|
<div className="admin-panel-content-area">
|
|
{currentSection?.component ? (
|
|
<currentSection.component sectionKey={currentSection.key} />
|
|
) : (
|
|
<div className="admin-panel-placeholder-content">
|
|
<div className="admin-panel-placeholder-icon">
|
|
<FaTh />
|
|
</div>
|
|
<h2>Welcome to Admin Panel</h2>
|
|
<p>Select a section from the sidebar to get started</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default AdminPanel;
|