Iman_AMS/asm_app/src/App.tsx

// import React from 'react';
// import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
// import Test from './pages/Test';
// import Login from './pages/Login';

// const App: React.FC = () => {
//   return (
//     <Router basename="/react_ui">
//       <Routes>
//         <Route path="/test" element={<Test />} />
//         <Route path="/login" element={<Login />} />
//         <Route path="*" element={<Navigate to="/test" replace />} />

//       </Routes>
//     </Router>
//   );
// };

// export default App;

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import ModernDashboard from './pages/ModernDashboard';
import UsersList from './pages/UsersList';
import EventsList from './pages/EventsList';
import AssetList from './pages/AssetList';
import AssetDetail from './pages/AssetDetail';
import WorkOrderList from './pages/WorkOrderList';
import WorkOrderDetail from './pages/WorkOrderDetail';
import AssetMaintenanceList from './pages/AssetMaintenanceList';
import AssetMaintenanceDetail from './pages/AssetMaintenanceDetail';
import PPMList from './pages/PPMList';
import PPMDetail from './pages/PPMDetail';
import PPMPlanner from './pages/PPMPlanner';
import PPMPlannerList from './pages/PPMPlannerList';
import PPMPlannerDetail from './pages/PPMPlannerDetail';
import MaintenanceCalendarPage from './pages/MaintenanceCalendarPage';
import YearlyPPMPlannerPage from './pages/YearlyPPMPlannerPage';
import ActiveMap from './pages/ActiveMap';
import ItemList from './pages/ItemList';
import ItemDetail from './pages/ItemDetail';
import ComingSoon from './pages/ComingSoon';
import Sidebar from './components/Sidebar';
import Header from './components/Header';
import IssueList from './pages/IssueList';
import IssueDetail from './pages/IssueDetail';
import MaintenanceTeamList from './pages/MaintenanceTeamList';
import MaintenanceTeamDetail from './pages/MaintenanceTeamDetail';
import UserProfilePage from './pages/UserProfilePage';

// Layout with Sidebar and Header
const LayoutWithSidebar: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const user = localStorage.getItem('user');
  const userEmail = user ? JSON.parse(user).email : '';

  return (
    <div className="flex h-screen overflow-hidden bg-gray-50 dark:bg-gray-900">
      <Sidebar userEmail={userEmail} />
      <div className="flex-1 flex flex-col overflow-hidden">
        <Header userEmail={userEmail} />
        <div className="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-900">
          {children}
        </div>
      </div>
    </div>
  );
};

// Protected Route Component
const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const user = localStorage.getItem('user');
  return user ? <>{children}</> : <Navigate to="/login" replace />;
};

const App: React.FC = () => {
  return (
    <Router basename="/asm_app">
      <Routes>
        <Route path="/login" element={<Login />} />
        
        <Route path="/dashboard" element={
          <ProtectedRoute>
            <LayoutWithSidebar><ModernDashboard /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/assets" element={
          <ProtectedRoute>
            <LayoutWithSidebar><AssetList /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/assets/:assetName" element={
          <ProtectedRoute>
            <LayoutWithSidebar><AssetDetail /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/work-orders" element={
          <ProtectedRoute>
            <LayoutWithSidebar><WorkOrderList /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/work-orders/:workOrderName" element={
          <ProtectedRoute>
            <LayoutWithSidebar><WorkOrderDetail /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/maintenance" element={
          <ProtectedRoute>
            <LayoutWithSidebar><AssetMaintenanceList /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/maintenance/:logName" element={
          <ProtectedRoute>
            <LayoutWithSidebar><AssetMaintenanceDetail /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/ppm" element={
          <ProtectedRoute>
            <LayoutWithSidebar><PPMList /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/ppm/:ppmName" element={
          <ProtectedRoute>
            <LayoutWithSidebar><PPMDetail /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/ppm-planner" element={
          <ProtectedRoute>
            <LayoutWithSidebar><PPMPlannerList /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/ppm-planner/new" element={
          <ProtectedRoute>
            <LayoutWithSidebar><PPMPlanner /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/ppm-planner/:scheduleName" element={
          <ProtectedRoute>
            <LayoutWithSidebar><PPMPlannerDetail /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/maintenance-calendar" element={
          <ProtectedRoute>
            <LayoutWithSidebar><YearlyPPMPlannerPage /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/maintenance-calendar/month-view" element={
          <ProtectedRoute>
            <LayoutWithSidebar><MaintenanceCalendarPage /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/yearly-ppm-planner" element={
          <ProtectedRoute>
            <LayoutWithSidebar><YearlyPPMPlannerPage /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/active-map" element={
          <ProtectedRoute>
            <LayoutWithSidebar><ActiveMap /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/inventory" element={
          <ProtectedRoute>
            <LayoutWithSidebar><ItemList /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/inventory/:itemName" element={
          <ProtectedRoute>
            <LayoutWithSidebar><ItemDetail /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/users" element={
          <ProtectedRoute>
            <LayoutWithSidebar><UsersList /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/events" element={
          <ProtectedRoute>
            <LayoutWithSidebar><EventsList /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/old-dashboard" element={
          <ProtectedRoute>
            <LayoutWithSidebar><Dashboard /></LayoutWithSidebar>
          </ProtectedRoute>
        } />

        {/* <Route path="/maintenance-team" element={
          <ProtectedRoute>
            <LayoutWithSidebar><ComingSoon title="Maintenance Team" /></LayoutWithSidebar>
          </ProtectedRoute>
        } /> */}
        <Route path="/maintenance-teams" element={
          <ProtectedRoute>
            <LayoutWithSidebar><MaintenanceTeamList /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/maintenance-teams/:teamName" element={
          <ProtectedRoute>
            <LayoutWithSidebar><MaintenanceTeamDetail /></LayoutWithSidebar>
          </ProtectedRoute>
        } />

        <Route path="/procurement" element={
          <ProtectedRoute>
            <LayoutWithSidebar><ComingSoon title="Procurement" /></LayoutWithSidebar>
          </ProtectedRoute>
        } />

        <Route path="/sla" element={
          <ProtectedRoute>
            <LayoutWithSidebar><ComingSoon title="Service Level Agreement (SLA)" /></LayoutWithSidebar>
          </ProtectedRoute>
        } />

        {/* <Route path="/support" element={
          <ProtectedRoute>
            <LayoutWithSidebar><ComingSoon title="Support" /></LayoutWithSidebar>
          </ProtectedRoute>
        } /> */}
        <Route path="/support" element={
          <ProtectedRoute>
            <LayoutWithSidebar><IssueList /></LayoutWithSidebar>
          </ProtectedRoute>
        } />
        
        <Route path="/support/:issueName" element={
          <ProtectedRoute>
            <LayoutWithSidebar><IssueDetail /></LayoutWithSidebar>
          </ProtectedRoute>
        } />

        <Route path="/user-profile" element={
          <ProtectedRoute>
            <LayoutWithSidebar><UserProfilePage /></LayoutWithSidebar>
          </ProtectedRoute>
        } />


        {/* Default redirect */}
        <Route path="/" element={<Navigate to="/login" replace />} />
        <Route path="*" element={<Navigate to="/login" replace />} />
      </Routes>
    </Router>
  );
};

export default App;