Ignore:
Timestamp:
08/30/26 00:27:08 (3 weeks ago)
Author:
MBK <marija.karapandzova@…>
Branches:
master
Children:
e1f74f6
Parents:
b63d7b5
Message:

Implement advanced database queries

File:
1 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/components/Navbar.js

    rb63d7b5 r20d16ca  
    99
    1010  useEffect(() => {
    11     const userStr = localStorage.getItem('user');
    12     if (userStr) {
    13       setUser(JSON.parse(userStr));
    14     }
     11    const loadUser = () => {
     12      const userStr = localStorage.getItem('user');
     13      if (userStr) {
     14        setUser(JSON.parse(userStr));
     15      } else {
     16        setUser(null);
     17      }
     18    };
     19
     20    loadUser();
     21
     22    window.addEventListener('storage', loadUser);
     23    return () => window.removeEventListener('storage', loadUser);
    1524  }, []);
    1625
    … …  
    1928    localStorage.removeItem('user');
    2029    setUser(null);
     30
     31
     32    window.dispatchEvent(new CustomEvent('userStorageChange', {
     33      detail: { userData: null }
     34    }));
     35
    2136    navigate('/login');
    2237  };
    … …  
    3045
    3146  return (
    32     <nav className="navbar">
    33       <div className="navbar-brand">
    34         <img src="/logo.png" alt="Medora Logo" style={{ height: '40px', width: 'auto' }} />
    35       </div>
     47      <nav className="navbar">
     48        <div className="navbar-brand">
     49          <img src="/logo.png" alt="Medora Logo" style={{ height: '40px', width: 'auto' }} />
     50        </div>
    3651
    37       <div className="navbar-links">
    38         <Link to="/" className={`navbar-link ${isActive('/') ? 'active' : ''}`}>
    39           Overview
    40         </Link>
    41         {user?.role !== 'PATIENT' && user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
    42           <Link to="/patients" className={`navbar-link ${isActive('/patients') ? 'active' : ''}`}>
    43             Patients
     52        <div className="navbar-links">
     53          <Link to="/" className={`navbar-link ${isActive('/') ? 'active' : ''}`}>
     54            Overview
    4455          </Link>
    45         )}
    46         <Link to="/doctors" className={`navbar-link ${isActive('/doctors') ? 'active' : ''}`}>
    47           Doctors
    48         </Link>
    49         <Link to="/departments" className={`navbar-link ${isActive('/departments') ? 'active' : ''}`}>
    50           Departments
    51         </Link>
    52         {user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
    53           <>
    54             <Link to="/appointments" className={`navbar-link ${isActive('/appointments') ? 'active' : ''}`}>
    55               Appointments
    56             </Link>
    57             {user?.role === 'PATIENT' && (
     56          {user?.role !== 'PATIENT' && user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
     57              <Link to="/patients" className={`navbar-link ${isActive('/patients') ? 'active' : ''}`}>
     58                Patients
     59              </Link>
     60          )}
     61          <Link to="/doctors" className={`navbar-link ${isActive('/doctors') ? 'active' : ''}`}>
     62            Doctors
     63          </Link>
     64          <Link to="/departments" className={`navbar-link ${isActive('/departments') ? 'active' : ''}`}>
     65            Departments
     66          </Link>
     67          {user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
    5868              <>
    59                 <Link to="/medical-records" className={`navbar-link ${isActive('/medical-records') ? 'active' : ''}`}>
    60                   Medical Records
     69                <Link to="/appointments" className={`navbar-link ${isActive('/appointments') ? 'active' : ''}`}>
     70                  Appointments
    6171                </Link>
    62                 <Link to="/billing" className={`navbar-link ${isActive('/billing') ? 'active' : ''}`}>
    63                   Billing
    64                 </Link>
     72                {user?.role === 'PATIENT' && (
     73                    <>
     74                      <Link to="/medical-records" className={`navbar-link ${isActive('/medical-records') ? 'active' : ''}`}>
     75                        Medical Records
     76                      </Link>
     77                      <Link to="/billing" className={`navbar-link ${isActive('/billing') ? 'active' : ''}`}>
     78                        Billing
     79                      </Link>
     80                    </>
     81                )}
    6582              </>
    66             )}
    67           </>
    68         )}
    69         {(user?.role === 'ADMIN' || user?.role === 'LAB_TECHNICIAN' || user?.role === 'DOCTOR') && (
    70           <Link to="/lab-tests" className={`navbar-link ${isActive('/lab-tests') ? 'active' : ''}`}>
    71             Lab Tests
    72           </Link>
    73         )}
    74         {!user?.role || user?.role === 'ADMIN' || user?.role === 'DOCTOR' ? (
    75           <>
    76             {user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
    77               <Link to="/medical-records" className={`navbar-link ${isActive('/medical-records') ? 'active' : ''}`}>
    78                 Medical Records
     83          )}
     84          {(user?.role === 'ADMIN' || user?.role === 'LAB_TECHNICIAN' || user?.role === 'DOCTOR') && (
     85              <Link to="/lab-tests" className={`navbar-link ${isActive('/lab-tests') ? 'active' : ''}`}>
     86                Lab Tests
    7987              </Link>
    80             )}
    81             {user?.role !== 'PATIENT' && user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
     88          )}
     89          {!user?.role || user?.role === 'ADMIN' || user?.role === 'DOCTOR' ? (
    8290              <>
    83                 <Link to="/medical-reports" className={`navbar-link ${isActive('/medical-reports') ? 'active' : ''}`}>
    84                   Medical Reports
    85                 </Link>
    86                 <Link to="/procedures" className={`navbar-link ${isActive('/procedures') ? 'active' : ''}`}>
    87                   Procedures
    88                 </Link>
    89                 <Link to="/referrals" className={`navbar-link ${isActive('/referrals') ? 'active' : ''}`}>
    90                   Referrals
    91                 </Link>
     91                {user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
     92                    <Link to="/medical-records" className={`navbar-link ${isActive('/medical-records') ? 'active' : ''}`}>
     93                      Medical Records
     94                    </Link>
     95                )}
     96                {user?.role !== 'PATIENT' && user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
     97                    <>
     98                      <Link to="/medical-reports" className={`navbar-link ${isActive('/medical-reports') ? 'active' : ''}`}>
     99                        Medical Reports
     100                      </Link>
     101                      <Link to="/procedures" className={`navbar-link ${isActive('/procedures') ? 'active' : ''}`}>
     102                        Procedures
     103                      </Link>
     104                      <Link to="/referrals" className={`navbar-link ${isActive('/referrals') ? 'active' : ''}`}>
     105                        Referrals
     106                      </Link>
     107                    </>
     108                )}
    92109              </>
    93             )}
    94           </>
    95         ) : null}
    96         {(user?.role === 'ADMIN' || user?.role === 'BILLING_ADMIN') && (
    97           <Link to="/billing" className={`navbar-link ${isActive('/billing') ? 'active' : ''}`}>
    98             Billing
    99           </Link>
    100         )}
    101       </div>
     110          ) : null}
     111          {(user?.role === 'ADMIN' || user?.role === 'BILLING_ADMIN') && (
     112              <Link to="/billing" className={`navbar-link ${isActive('/billing') ? 'active' : ''}`}>
     113                Billing
     114              </Link>
     115          )}
     116        </div>
    102117
    103       <div className="navbar-right">
    104         {user && (
    105           <div className="navbar-avatar" style={{ position: 'relative' }}>
    106             <div className="navbar-avatar-circle">{getInitials()}</div>
    107             <div className="navbar-avatar-name">{user.firstName}</div>
    108             <button
    109               onClick={() => setShowMenu(!showMenu)}
    110               style={{
    111                 background: 'none',
    112                 border: 'none',
    113                 cursor: 'pointer',
    114                 marginLeft: '4px',
    115                 color: 'var(--color-neutral-600)',
    116                 fontSize: '12px'
    117               }}
    118             >
    119               ▼
    120             </button>
    121             {showMenu && (
    122               <div style={{
    123                 position: 'absolute',
    124                 top: '100%',
    125                 right: 0,
    126                 background: 'white',
    127                 border: '1px solid var(--color-neutral-400)',
    128                 borderRadius: '6px',
    129                 minWidth: '150px',
    130                 marginTop: '4px',
    131                 boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
    132                 zIndex: 1000
    133               }}>
    134                 <div style={{
    135                   padding: '8px 0',
    136                   fontSize: '11px',
    137                   color: 'var(--color-neutral-600)',
    138                   borderBottom: '1px solid var(--color-neutral-400)',
    139                   paddingLeft: '12px',
    140                   paddingRight: '12px',
    141                   paddingTop: '8px',
    142                   paddingBottom: '8px'
    143                 }}>
    144                   {user.role}
    145                 </div>
     118        <div className="navbar-right">
     119          {user && (
     120              <div className="navbar-avatar" style={{ position: 'relative' }}>
     121                <div className="navbar-avatar-circle">{getInitials()}</div>
     122                <div className="navbar-avatar-name">{user.firstName}</div>
    146123                <button
    147                   onClick={handleLogout}
    148                   style={{
    149                     width: '100%',
    150                     padding: '8px 12px',
    151                     background: 'none',
    152                     border: 'none',
    153                     textAlign: 'left',
    154                     cursor: 'pointer',
    155                     fontSize: '12px',
    156                     color: 'var(--color-status-red)',
    157                     transition: 'background 0.2s'
    158                   }}
    159                   onMouseEnter={(e) => e.target.style.background = 'var(--color-neutral-200)'}
    160                   onMouseLeave={(e) => e.target.style.background = 'none'}
     124                    onClick={() => setShowMenu(!showMenu)}
     125                    style={{
     126                      background: 'none',
     127                      border: 'none',
     128                      cursor: 'pointer',
     129                      marginLeft: '4px',
     130                      color: 'var(--color-neutral-600)',
     131                      fontSize: '12px'
     132                    }}
    161133                >
    162                   Logout
     134                  ▼
    163135                </button>
     136                {showMenu && (
     137                    <div style={{
     138                      position: 'absolute',
     139                      top: '100%',
     140                      right: 0,
     141                      background: 'white',
     142                      border: '1px solid var(--color-neutral-400)',
     143                      borderRadius: '6px',
     144                      minWidth: '150px',
     145                      marginTop: '4px',
     146                      boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
     147                      zIndex: 1000
     148                    }}>
     149                      <div style={{
     150                        padding: '8px 0',
     151                        fontSize: '11px',
     152                        color: 'var(--color-neutral-600)',
     153                        borderBottom: '1px solid var(--color-neutral-400)',
     154                        paddingLeft: '12px',
     155                        paddingRight: '12px',
     156                        paddingTop: '8px',
     157                        paddingBottom: '8px'
     158                      }}>
     159                        {user.role}
     160                      </div>
     161                      <button
     162                          onClick={handleLogout}
     163                          style={{
     164                            width: '100%',
     165                            padding: '8px 12px',
     166                            background: 'none',
     167                            border: 'none',
     168                            textAlign: 'left',
     169                            cursor: 'pointer',
     170                            fontSize: '12px',
     171                            color: 'var(--color-status-red)',
     172                            transition: 'background 0.2s'
     173                          }}
     174                          onMouseEnter={(e) => e.target.style.background = 'var(--color-neutral-200)'}
     175                          onMouseLeave={(e) => e.target.style.background = 'none'}
     176                      >
     177                        Logout
     178                      </button>
     179                    </div>
     180                )}
    164181              </div>
    165             )}
    166           </div>
    167         )}
    168       </div>
    169     </nav>
     182          )}
     183        </div>
     184      </nav>
    170185  );
    171186}
Note: See TracChangeset for help on using the changeset viewer.