diff --git a/public/index.html b/public/index.html index e37fa3c..1445d14 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Channel Partner Dashboard + Cloudtopiaa reseller Dashboard diff --git a/src/App.tsx b/src/App.tsx index d898f96..1a2f5d7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -31,7 +31,7 @@ import ResellerBilling from './pages/reseller/Billing'; import ResellerSupport from './pages/reseller/Support'; import ResellerReports from './pages/reseller/Reports'; import ResellerTraining from './pages/reseller/Training'; -import ResellerLayout from './components/reseller/layout/ResellerLayout'; +import ResellerLayout from './components/Layout/ResellerLayout'; import CookieConsent from './components/CookieConsent'; import './index.css'; diff --git a/src/components/Layout/ResellerLayout.tsx b/src/components/Layout/ResellerLayout.tsx new file mode 100644 index 0000000..4f5f5ea --- /dev/null +++ b/src/components/Layout/ResellerLayout.tsx @@ -0,0 +1,92 @@ +import React from 'react'; +import ResellerSidebar from './ResellerSidebar'; + +interface ResellerLayoutProps { + children: React.ReactNode; +} + +const ResellerLayout: React.FC = ({ children }) => { + return ( +
+
+ {/* Sidebar */} +
+ +
+ + {/* Main Content */} +
+ {/* Top Navigation Bar */} +
+
+ {/* Left Side - Logo and Title */} +
+
+
+
+
+

+ Reseller Portal +

+

+ Cloud Services Management +

+
+
+ + {/* Right Side - Search, Notifications, User */} +
+ {/* Search Bar */} +
+ +
+ + + +
+
+ + {/* Notifications */} + + + {/* Divider */} +
+ + {/* User Menu */} +
+
+

John Reseller

+

Tech Solutions Inc

+
+
+ JR +
+
+
+
+
+ + {/* Page Content */} +
+
+
+ {children} +
+
+
+
+
+
+ ); +}; + +export default ResellerLayout; \ No newline at end of file diff --git a/src/components/Layout/ResellerSidebar.tsx b/src/components/Layout/ResellerSidebar.tsx new file mode 100644 index 0000000..7f633ca --- /dev/null +++ b/src/components/Layout/ResellerSidebar.tsx @@ -0,0 +1,163 @@ +import React, { useState } from 'react'; +import { Link, useLocation } from 'react-router-dom'; +import { useAppSelector, useAppDispatch } from '../../store/hooks'; +import { + Home, + Users, + Cloud, + CreditCard, + Headphones, + BarChart3, + Wallet, + BookOpen, + ShoppingBag, + Award, + HelpCircle, + Settings, + Menu, + X, + Sun, + Moon, + LogOut, + Building, + Target, + TrendingUp, + Package +} from 'lucide-react'; +import { RootState } from '../../store'; +import { toggleTheme } from '../../store/slices/themeSlice'; +import { logout } from '../../store/slices/authSlice'; +import { cn } from '../../utils/cn'; + +const resellerNavigation = [ + { name: 'Dashboard', href: '/reseller-dashboard', icon: Home }, + { name: 'Customers', href: '/reseller-dashboard/customers', icon: Users }, + { name: 'Cloud Instances', href: '/reseller-dashboard/instances', icon: Cloud }, + { name: 'Billing', href: '/reseller-dashboard/billing', icon: CreditCard }, + { name: 'Support', href: '/reseller-dashboard/support', icon: Headphones }, + { name: 'Reports', href: '/reseller-dashboard/reports', icon: BarChart3 }, + { name: 'Wallet', href: '/reseller-dashboard/wallet', icon: Wallet }, + { name: 'Training', href: '/reseller-dashboard/training', icon: BookOpen }, + { name: 'Marketplace', href: '/reseller-dashboard/marketplace', icon: ShoppingBag }, + { name: 'Certifications', href: '/reseller-dashboard/certifications', icon: Award }, + { name: 'Knowledge Base', href: '/reseller-dashboard/knowledge-base', icon: HelpCircle }, + { name: 'Settings', href: '/reseller-dashboard/settings', icon: Settings }, +]; + +const ResellerSidebar: React.FC = () => { + const [isCollapsed, setIsCollapsed] = useState(false); + const location = useLocation(); + const dispatch = useAppDispatch(); + const { theme } = useAppSelector((state: RootState) => state.theme); + const { user } = useAppSelector((state: RootState) => state.auth); + + const handleLogout = () => { + dispatch(logout()); + }; + + return ( +
+ {/* Header */} +
+ {!isCollapsed && ( +
+
+ +
+ + Reseller + +
+ )} + +
+ + {/* Navigation */} + + + {/* User Profile & Actions */} +
+ {/* Theme Toggle */} + + + {/* Logout */} + +
+
+ ); +}; + +export default ResellerSidebar; \ No newline at end of file diff --git a/src/components/Layout/Sidebar.tsx b/src/components/Layout/Sidebar.tsx index 197c9e0..5e995d7 100644 --- a/src/components/Layout/Sidebar.tsx +++ b/src/components/Layout/Sidebar.tsx @@ -82,7 +82,7 @@ const Sidebar: React.FC = () => { className="p-1 rounded-md hover:bg-secondary-100 dark:hover:bg-secondary-800 transition-colors" > {isCollapsed ? ( - + ) : ( )} @@ -90,7 +90,10 @@ const Sidebar: React.FC = () => { {/* Navigation */} -