fix teacher, parent and admin pages

src/components/CiPartials.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { useEffect, useMemo, useState, type FormEvent, type ReactNode } from 'react'
+import { useEffect, useMemo, useRef, useState, type FormEvent, type ReactNode } from 'react'
 
 export type CiFlashMessage = {
   id?: string
@@ -527,36 +527,100 @@ export function CiNoInvoiceFound({ message = 'No invoice found.' }: { message?:
 }
 
 export function CiPublicFooter({ year = new Date().getFullYear() }: { year?: number }) {
+  const footerRef = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const root = footerRef.current
+    if (!root) return
+    const links = root.querySelectorAll<HTMLAnchorElement>('a.pdf-link')
+    const controllers: AbortController[] = []
+
+    links.forEach((link) => {
+      const pdfUrl = link.getAttribute('href')
+      if (!pdfUrl) return
+      const ac = new AbortController()
+      controllers.push(ac)
+      fetch(pdfUrl, { method: 'HEAD', signal: ac.signal })
+        .then((response) => {
+          if (!response.ok) {
+            link.style.opacity = '0.7'
+            link.title = 'File might be temporarily unavailable'
+            console.warn('PDF might be missing:', pdfUrl)
+            link.addEventListener('click', function onClick(e) {
+              if (!confirm('The PDF file might be temporarily unavailable. Try to open it anyway?')) {
+                e.preventDefault()
+              }
+            })
+          }
+        })
+        .catch(() => {
+          link.style.opacity = '0.7'
+          link.title = 'File check failed'
+        })
+    })
+
+    return () => controllers.forEach((c) => c.abort())
+  }, [])
+
   return (
-    <footer className="footer mt-auto custom-footer text-white py-4">
-      <div className="container">
-        <div className="row align-items-start justify-content-between">
-          <div className="col-md-6 col-12 mb-3 mb-md-0 text-md-start">
-            <ul className="list-unstyled mb-0 info-list">
-              <li>
-                <i className="fa fa-map-marker-alt me-2" aria-hidden />
-                5 Courthouse Lane, Chelmsford, MA 01824
-              </li>
-              <li>
-                <i className="fa fa-phone-alt me-2" aria-hidden />
-                +1 978-364-0219
-              </li>
-              <li>
-                <i className="fa fa-envelope me-2" aria-hidden />
-                alrahma.isgl@gmail.com
-              </li>
-            </ul>
-          </div>
-          <div className="col-md-4 col-12 text-center text-md-end">
-            <ul className="list-unstyled mb-0 info-list">
-              <li><a href="/privacy_policy.pdf" target="_blank" rel="noopener noreferrer" className="pdf-link"><i className="fas fa-file-pdf me-1" aria-hidden />Privacy Policy</a></li>
-              <li><a href="/terms_of_service.pdf" target="_blank" rel="noopener noreferrer" className="pdf-link"><i className="fas fa-file-pdf me-1" aria-hidden />Terms of Service</a></li>
-              <li><a href="/account_creation_guide.pdf" target="_blank" rel="noopener noreferrer" className="pdf-link"><i className="fas fa-file-pdf me-1" aria-hidden />How To Create An Account</a></li>
-            </ul>
+    <footer ref={footerRef} className="footer mt-auto custom-footer custom-footer--bar text-white px-3 shadow-sm">
+      <div className="custom-footer__glow" aria-hidden />
+      <div className="container-fluid custom-footer__container">
+        <div className="custom-footer__bar">
+          <div className="custom-footer__meta" aria-label="Contact">
+            <span className="custom-footer__meta-item">
+              <i className="fa fa-map-marker-alt custom-footer__meta-ico" aria-hidden />
+              <span>5 Courthouse Lane, Chelmsford, MA 01824</span>
+            </span>
+            <a className="custom-footer__meta-link" href="tel:+19783640219">
+              <i className="fa fa-phone-alt custom-footer__meta-ico" aria-hidden />
+              +1 978-364-0219
+            </a>
+            <a className="custom-footer__meta-link" href="mailto:alrahma.isgl@gmail.com">
+              <i className="fa fa-envelope custom-footer__meta-ico" aria-hidden />
+              alrahma.isgl@gmail.com
+            </a>
           </div>
+          <nav className="custom-footer__docs" aria-label="Policies and guides">
+            <a
+              href="/privacy_policy.pdf"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="pdf-link custom-footer__doc-link"
+              data-filename="privacy_policy.pdf"
+            >
+              <i className="fas fa-file-pdf me-1" aria-hidden />
+              Privacy Policy
+            </a>
+            <a
+              href="/terms_of_service.pdf"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="pdf-link custom-footer__doc-link"
+              data-filename="terms_of_service.pdf"
+            >
+              <i className="fas fa-file-pdf me-1" aria-hidden />
+              Terms of Service
+            </a>
+            <a
+              href="/account_creation_guide.pdf"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="pdf-link custom-footer__doc-link"
+              data-filename="account_creation_guide.pdf"
+            >
+              <i className="fas fa-file-pdf me-1" aria-hidden />
+              How To Create An Account
+            </a>
+          </nav>
+        </div>
+        <div className="custom-footer__copyright-row">
+          <p className="custom-footer__copyright mb-0">
+            © {year}{' '}
+            <span className="custom-footer__copyright-brand">Al Rahma Sunday School</span> by ISGL. All Rights Reserved.
+          </p>
         </div>
       </div>
-      <p className="text-center text-white mb-0 mt-3">© {year} Al Rahma Sunday School by ISGL. All Rights Reserved.</p>
     </footer>
   )
 }