Add Guard Profile detail page with document section

app-backend/src/controllers/auth.controller.js

@@ -155,19 +155,11 @@ export const login = async (req, res) => {
     user.otpExpiresAt = expiry;
     await user.save();
 
-    let emailSent = false;
-    try {
-      await sendOTP(user.email, otp, user.name);
-      emailSent = true;
-      console.log(`✅ OTP email sent successfully to ${user.email}`);
-    } catch (emailError) {
-      console.error('⚠️  Email sending failed, but OTP is saved to database');
-      console.error('   OTP Code:', otp);
-      console.error('   Users can still verify using the OTP via /api/v1/auth/verify-otp endpoint');
-      console.error('   Email error:', emailError.message);
-    }
+    console.log("DEV_MODE otp: ", otp)
+    // sendOTP(email,otp);
 
-    await req.audit.log(user._id, ACTIONS.LOGIN_SUCCESS, { step: "OTP_SENT", emailSent });
+
+    await req.audit.log(user._id, ACTIONS.LOGIN_SUCCESS, { step: "OTP_SENT" });
 
     if (emailSent) {
       res.status(200).json({ message: 'OTP sent to your email' });

app-frontend/employer-panel/src/App.js

@@ -6,6 +6,10 @@ import EmployerDashboard from './pages/EmployerDashboard';
 import CreateShift from './pages/createShift';
 import ManageShift from './pages/ManageShift';
 import GuardProfiles from './pages/GuardProfile';
+
+//guard profile page
+import GuardProfilePage from './pages/GuardProfilePage';
+
 import SubmissionConfirmation from './pages/SubmissionConfirmation';
 import CompanyProfile from './pages/CompanyProfile';
 import EmailSettings from './pages/EmailSettings';
@@ -53,7 +57,27 @@ function App() {
   return (
     <Router>
       <PageTitleHandler />
-      <AppContent />
+      <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+        <Header />
+        <main style={{ flex: 1, paddingBottom: '20px' }}>
+          <Routes>
+            <Route path="/" element={<Login />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/2fa" element={<TwoFA />} /> {/* ✅ new 2FA route */}
+            <Route path="/employer-dashboard" element={<EmployerDashboard />} />
+            <Route path="/create-shift" element={<CreateShift />} />
+            <Route path="/manage-shift" element={<ManageShift />} />
+            <Route path="/guard-profiles" element={<GuardProfiles />} />
+
+            <Route path="/guard-profiles/:guardId" element={<GuardProfilePage />} />
+
+            <Route path="/company-profile" element={<CompanyProfile />} />
+            <Route path="/submission" element={<SubmissionConfirmation />} />
+            <Route path="/expression-of-interest" element={<ExpressionOfInterest />} />
+          </Routes>
+        </main>
+        <Footer />
+      </div>
     </Router>
   );
 }

app-frontend/employer-panel/src/pages/GuardProfilePage.jsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import http from "../lib/http";
+
+export default function GuardProfilePage() {
+  const { guardId } = useParams();
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        const res = await http.get(`/guards/${guardId}/profile`);
+        setData(res.data);
+      } catch (err) {
+        setError("Failed to load guard profile");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    if (guardId) fetchData();
+  }, [guardId]);
+
+  if (loading) return <div>Loading…</div>;
+  if (error) return <div>{error}</div>;
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <h1>Guard Profile</h1>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+}