add parent pages

2026-04-23 02:24:05 -04:00
parent 9191fd32f0
commit 94700d4f0f
30 changed files with 8179 additions and 634 deletions
@@ -0,0 +1,104 @@
+import { useState } from 'react'
+import { Link, NavLink, Outlet, useNavigate } from 'react-router-dom'
+import { useAuth } from '../auth/AuthProvider'
+
+const parentNavItems = [
+  { to: '/app/parent/home', icon: 'bi bi-house-door', label: 'Dashboard' },
+  { to: '/app/parent/attendance', icon: 'bi bi-calendar-check', label: 'Attendance' },
+  { to: '/app/parent/calendar', icon: 'bi bi-calendar2-week', label: 'Calendar' },
+  { to: '/app/parent/progress', icon: 'bi bi-card-checklist', label: 'Class Progress' },
+  { to: '/app/parent/enroll-classes', icon: 'bi bi-pencil-square', label: 'Enroll in Classes' },
+  { to: '/app/parent/events', icon: 'bi bi-bell', label: 'Events' },
+  { to: '/app/parent/payment', icon: 'bi bi-credit-card', label: 'Invoice' },
+  { to: '/app/parent/register-student', icon: 'bi bi-person-plus', label: 'Register Students' },
+  { to: '/app/parent/report-attendance', icon: 'bi bi-megaphone', label: 'Report Absence' },
+  { to: '/app/parent/report-cards', icon: 'bi bi-file-earmark-text', label: 'Report Cards' },
+  { to: '/app/parent/scores', icon: 'bi bi-clipboard-data', label: 'Scores' },
+] as const
+
+export function MainLayout() {
+  const { user, logout, selectedRole, roles } = useAuth()
+  const navigate = useNavigate()
+  const [navOpen, setNavOpen] = useState(false)
+  const role = selectedRole ?? roles[0] ?? ''
+  const dashboardPath =
+    role === 'parent'
+      ? '/app/parent/home'
+      : role === 'teacher' || role === 'teacher_assistant'
+        ? '/app/teacher/dashboard'
+        : '/app/home'
+
+  return (
+    <div className="main-layout-app d-flex flex-column min-vh-100">
+      <header className="navbar navbar-expand-lg custom-navbar sticky-top shadow-sm px-3">
+        <div className="container-fluid">
+          <Link className="navbar-brand fw-semibold d-inline-flex align-items-center gap-2" to={dashboardPath}>
+            <img className="main-layout-logo" src="/logo.png" alt="Al Rahma Sunday School logo" />
+            Al Rahma Sunday School
+          </Link>
+          <button
+            className="navbar-toggler"
+            type="button"
+            aria-controls="mainLayoutNavbar"
+            aria-expanded={navOpen}
+            aria-label="Toggle navigation"
+            onClick={() => setNavOpen((open) => !open)}
+          >
+            <span className="navbar-toggler-icon" />
+          </button>
+          <div id="mainLayoutNavbar" className={`collapse navbar-collapse ${navOpen ? 'show' : ''}`}>
+            <nav className="ms-lg-auto me-lg-3 my-3 my-lg-0 main-layout-menu parent-navbar-menu" aria-label="Parent navigation">
+              {parentNavItems.map((item) => (
+                <NavLink
+                  key={item.to}
+                  to={item.to}
+                  className={({ isActive }) => `nav-link parent-navbar-link ${isActive ? 'active fw-semibold' : ''}`}
+                  onClick={() => setNavOpen(false)}
+                >
+                  <i className={item.icon} aria-hidden />
+                  <span>{item.label}</span>
+                </NavLink>
+              ))}
+            </nav>
+            <div className="d-flex align-items-center gap-2">
+              <span className="navbar-text small">{user?.name}</span>
+              <button
+                type="button"
+                className="btn btn-outline-light btn-sm"
+                onClick={() => {
+                  logout()
+                  navigate('/login', { replace: true })
+                }}
+              >
+                Log out
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <main className="container mt-4 flex-grow-1">
+        <Outlet />
+      </main>
+
+      <footer className="footer py-4 mt-auto border-top">
+        <div className="container text-muted small d-flex flex-wrap justify-content-between gap-2">
+          <span>Al Rahma Sunday School</span>
+          <span>Parent and Teacher Portal</span>
+        </div>
+      </footer>
+
+      <div className="modal fade" id="familyCardModal" tabIndex={-1} aria-hidden="true">
+        <div className="modal-dialog modal-xl modal-dialog-scrollable">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title">Family</h5>
+              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+            </div>
+            <div className="modal-body p-0" id="familyCardContent" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}