commented out nav bars

admin-portal-frontend/src/app/invite-admin.tsx

@@ -4,55 +4,122 @@ import React, { useState } from 'react';
 import { doc, setDoc, getFirestore } from 'firebase/firestore';
 
 const InviteAdmin = () => {
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [title, setTitle] = useState('');
   const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
   const [status, setStatus] = useState('');
+  const [showModal, setShowModal] = useState(false);
   const db = getFirestore();
 
   const handleInvite = async (e: any) => {
     e.preventDefault();
     const inviteRef = doc(db, 'invitations', email);
 
     try {
-      await setDoc(inviteRef, { invited: true }); 
+      await setDoc(inviteRef, { firstName, lastName, title, email, phone, invited: true }); 
       setStatus('Invitation sent successfully.');
+      setFirstName('');
+      setLastName('');
+      setTitle('');
       setEmail('');
+      setPhone('');
+      setShowModal(false);
     } catch (error: any) {
       setStatus(`Failed to send invitation: ${error.message}`);
     }
   };
 
+  return (
+    <div className="App">
+      <button
+        onClick={() => setShowModal(true)}
+        style={{
+          backgroundColor: '#00629B', 
+          color: 'white',
+          padding: '10px 20px',
+          borderRadius: '5px',
+          cursor: 'pointer'
+        }}
+      >
+        Add Admin
+      </button>
 
-
-return (
-    <div className="flex items-center justify-center">
-      <form onSubmit={handleInvite} className="flex flex-col items-center">
-        <input
-          className="mb-2 p-2 border w-full rounded border-gray-400"
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="Enter email to invite"
-          required
-        />
-        <button
-          type="submit"
-          style={{
-            backgroundColor: '#00629B', 
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px', 
-            padding: '7px 14px',
-            cursor: 'pointer',
-          }}
-          className="hover:bg-blue-700 transition-colors"
-        >
-          Add Admin
-        </button>
-      </form>
-      {status && <p>{status}</p>}
+      {showModal && (
+        <div style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)'
+        }}>
+          <div style={{
+            background: 'white',
+            padding: '20px',
+            borderRadius: '10px',
+            width: '500px'
+          }}>
+            <h2>Add a new Admin</h2>
+            <p>Register a physician to your admin directory below.</p>
+            <form onSubmit={handleInvite} className="flex flex-col">
+              <label>
+                First Name*
+                <input
+                  type="text"
+                  value={firstName}
+                  onChange={(e) => setFirstName(e.target.value)}
+                  required
+                />
+              </label>
+              <label>
+                Last Name*
+                <input
+                  type="text"
+                  value={lastName}
+                  onChange={(e) => setLastName(e.target.value)}
+                  required
+                />
+              </label>
+              <label>
+                Title (ex. HS Clinical Professor)
+                <input
+                  type="text"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                />
+              </label>
+              <label>
+                Email*
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                />
+              </label>
+              <label>
+                Phone Number (format: xxx-xxx-xxxx)
+                <input
+                  type="tel"
+                  value={phone}
+                  onChange={(e) => setPhone(e.target.value)}
+                />
+              </label>
+              <button type="submit" style={{ backgroundColor: '#00629B', color: 'white' }}>Save</button>
+              <button type="button" onClick={() => setShowModal(false)} style={{ backgroundColor: 'gray', color: 'white' }}>Cancel</button>
+            </form>
+            {status && <p>{status}</p>}
+          </div>
+        </div>
+      )}
     </div>
   );
-
 };
 
 export default InviteAdmin;
+

admin-portal-frontend/src/app/layout.tsx

@@ -15,13 +15,13 @@ const roboto = Roboto({
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   const location = usePathname();
-  const showNavbar = location !== '/' && location !== '/signup';
+  const showNavbar = location !== '/' && location !== '/signup/';
   const mainClass = `flex min-h-screen flex-col antialiased bg-sky-100/50 ${showNavbar ? 'pt-16 pl-60' : ''}`;
 
   return (
     <html lang="en">
       <body className={roboto.className} >
-      {showNavbar && (
+      {/* {showNavbar && (
           <>
             <div style={styles.verticalNavBar}>
               <VerticalNavBar />
@@ -30,7 +30,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
               <HorizontalNavBar />
             </div>
           </>
-        )}
+        )} */}
         <main className={mainClass}>
           {children}
         </main>

admin-portal-frontend/src/app/page.tsx

@@ -89,7 +89,7 @@ export default function Home() {
           </div>
           <div className="mb-6 flex items-center">
             <input id="remember-me" type="checkbox" className="mr-2 h-4 w-4 accent-blue border-2 border-blue-900" name="rememberMe" />
-            <label htmlFor="remember-me" className="text-sm sm:text-base">Remember me</label>
+            <label htmlFor="remember-me" className="text-sm">Remember me</label>
           </div>
           <div className="mb-4">
             <button
@@ -103,7 +103,7 @@ export default function Home() {
           </div>
         </form>
         <a className="text-sm self-start text-sky-700" href="/forgot-password">I forgot my username or password</a>
-        <div className="mt-1 self-start text-sm sm:text-base">
+        <div className="mt-1 self-start text-sm">
           <span>Don't have an account?</span>
           <a className="text-sky-700" href="/signup"> Create a new account.</a>
         </div>

admin-portal-frontend/src/app/pageStyles.tsx

@@ -1,16 +1,17 @@
 const styles = {
     verticalNavBar: {
-      position: 'absolute' as const,
+      // position: 'absolute' as const,
       top: 0,
       left: 0,
       width: '100%',
       zIndex: 0
     },
     horizontalNavBar: {
       height: '72px',
-      zIndex: 1,
-      position: 'absolute' as const
-    },
+      // zIndex: 1,
+      // position: 'absolute' as const
+    }
+
   };
 
 export default styles;