membership-fe/src/App.js

import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { Toaster } from './components/ui/sonner';
import Landing from './pages/Landing';
import Register from './pages/Register';
import Login from './pages/Login';
import VerifyEmail from './pages/VerifyEmail';
import ForgotPassword from './pages/ForgotPassword';
import ResetPassword from './pages/ResetPassword';
import ChangePasswordRequired from './pages/ChangePasswordRequired';
import Dashboard from './pages/Dashboard';
import Profile from './pages/Profile';
import Events from './pages/Events';
import EventDetails from './pages/EventDetails';
import Plans from './pages/Plans';
import BecomeMember from './pages/BecomeMember';
import PaymentSuccess from './pages/PaymentSuccess';
import PaymentCancel from './pages/PaymentCancel';
import AdminDashboard from './pages/admin/AdminDashboard';
import AdminUsers from './pages/admin/AdminUsers';
import AdminUserView from './pages/admin/AdminUserView';
import AdminStaff from './pages/admin/AdminStaff';
import AdminMembers from './pages/admin/AdminMembers';
import AdminEvents from './pages/admin/AdminEvents';
import AdminApprovals from './pages/admin/AdminApprovals';
import AdminPlans from './pages/admin/AdminPlans';
import AdminLayout from './layouts/AdminLayout';
import { AuthProvider, useAuth } from './context/AuthContext';
import MemberRoute from './components/MemberRoute';
import MemberCalendar from './pages/members/MemberCalendar';
import MemberProfile from './pages/members/MemberProfile';
import MembersDirectory from './pages/members/MembersDirectory';
import EventGallery from './pages/members/EventGallery';
import NewsletterArchive from './pages/members/NewsletterArchive';
import Financials from './pages/members/Financials';
import Bylaws from './pages/members/Bylaws';
import AdminGallery from './pages/admin/AdminGallery';
import AdminNewsletters from './pages/admin/AdminNewsletters';
import AdminFinancials from './pages/admin/AdminFinancials';
import AdminBylaws from './pages/admin/AdminBylaws';

const PrivateRoute = ({ children, adminOnly = false }) => {
  const { user, loading } = useAuth();
  
  if (loading) {
    return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
  }
  
  if (!user) {
    return <Navigate to="/login" />;
  }
  
  if (adminOnly && user.role !== 'admin') {
    return <Navigate to="/dashboard" />;
  }
  
  return children;
};

function App() {
  return (
    <AuthProvider>
      <BrowserRouter basename="/membership">
        <Routes>
          <Route path="/" element={<Landing />} />
          <Route path="/register" element={<Register />} />
          <Route path="/login" element={<Login />} />
          <Route path="/verify-email" element={<VerifyEmail />} />
          <Route path="/forgot-password" element={<ForgotPassword />} />
          <Route path="/reset-password" element={<ResetPassword />} />
          <Route path="/change-password-required" element={
            <PrivateRoute>
              <ChangePasswordRequired />
            </PrivateRoute>
          } />
          <Route path="/plans" element={<Plans />} />
          <Route path="/become-a-member" element={<BecomeMember />} />
          <Route path="/payment-success" element={<PaymentSuccess />} />
          <Route path="/payment-cancel" element={<PaymentCancel />} />

          <Route path="/dashboard" element={
            <PrivateRoute>
              <Dashboard />
            </PrivateRoute>
          } />
          <Route path="/profile" element={
            <PrivateRoute>
              <Profile />
            </PrivateRoute>
          } />
          <Route path="/events" element={
            <MemberRoute>
              <Events />
            </MemberRoute>
          } />
          <Route path="/events/:id" element={
            <MemberRoute>
              <EventDetails />
            </MemberRoute>
          } />

          {/* Members Only Routes */}
          <Route path="/members/calendar" element={
            <MemberRoute>
              <MemberCalendar />
            </MemberRoute>
          } />
          <Route path="/members/profile" element={
            <MemberRoute>
              <MemberProfile />
            </MemberRoute>
          } />
          <Route path="/members/directory" element={
            <MemberRoute>
              <MembersDirectory />
            </MemberRoute>
          } />
          <Route path="/members/gallery" element={
            <MemberRoute>
              <EventGallery />
            </MemberRoute>
          } />
          <Route path="/members/gallery/:eventId" element={
            <MemberRoute>
              <EventGallery />
            </MemberRoute>
          } />
          <Route path="/members/newsletters" element={
            <MemberRoute>
              <NewsletterArchive />
            </MemberRoute>
          } />
          <Route path="/members/financials" element={
            <MemberRoute>
              <Financials />
            </MemberRoute>
          } />
          <Route path="/members/bylaws" element={
            <MemberRoute>
              <Bylaws />
            </MemberRoute>
          } />

          <Route path="/admin" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminDashboard />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/staff" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminStaff />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/members" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminMembers />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/users" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminUsers />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/users/:userId" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminUserView />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/events" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminEvents />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/approvals" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminApprovals />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/plans" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminPlans />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/gallery" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminGallery />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/newsletters" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminNewsletters />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/financials" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminFinancials />
              </AdminLayout>
            </PrivateRoute>
          } />
          <Route path="/admin/bylaws" element={
            <PrivateRoute adminOnly>
              <AdminLayout>
                <AdminBylaws />
              </AdminLayout>
            </PrivateRoute>
          } />
        </Routes>
        <Toaster position="top-right" />
      </BrowserRouter>
    </AuthProvider>
  );
}

export default App;