Ignore:
Timestamp:
09/04/26 19:08:08 (11 days ago)
Author:
MBK <marija.karapandzova@…>
Branches:
master
Children:
cdcff72
Parents:
e1f74f6
Message:

Fix frontend appearance

Location:
frontend/src/components
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/components/Navbar.js

    re1f74f6 r9af201e  
    1818    };
    1919
     20    // Load user on mount
    2021    loadUser();
    2122
     23    // Listen for storage changes (when user logs in/out)
    2224    window.addEventListener('storage', loadUser);
    2325    return () => window.removeEventListener('storage', loadUser);
    … …  
    2931    setUser(null);
    3032
    31 
     33    // Dispatch custom event to notify components on the same tab
    3234    window.dispatchEvent(new CustomEvent('userStorageChange', {
    3335      detail: { userData: null }
    … …  
    4547
    4648  return (
    47       <nav className="navbar">
    48         <div className="navbar-brand">
    49           <img src="/logo.png" alt="Medora Logo" style={{ height: '40px', width: 'auto' }} />
    50         </div>
     49    <nav className="navbar">
     50      <div className="navbar-brand">
     51        <img src="/logo.png" alt="Medora Logo" style={{ height: '40px', width: 'auto' }} />
     52      </div>
    5153
    52         <div className="navbar-links">
    53           <Link to="/" className={`navbar-link ${isActive('/') ? 'active' : ''}`}>
    54             Overview
     54      <div className="navbar-links">
     55        <Link to="/" className={`navbar-link ${isActive('/') ? 'active' : ''}`}>
     56          Overview
     57        </Link>
     58        {user?.role !== 'PATIENT' && user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
     59          <Link to="/patients" className={`navbar-link ${isActive('/patients') ? 'active' : ''}`}>
     60            Patients
    5561          </Link>
    56           {user?.role !== 'PATIENT' && user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
    57               <Link to="/patients" className={`navbar-link ${isActive('/patients') ? 'active' : ''}`}>
    58                 Patients
     62        )}
     63        <Link to="/doctors" className={`navbar-link ${isActive('/doctors') ? 'active' : ''}`}>
     64          Doctors
     65        </Link>
     66        <Link to="/departments" className={`navbar-link ${isActive('/departments') ? 'active' : ''}`}>
     67          Departments
     68        </Link>
     69        {user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
     70          <>
     71            <Link to="/appointments" className={`navbar-link ${isActive('/appointments') ? 'active' : ''}`}>
     72              Appointments
     73            </Link>
     74            {user?.role === 'PATIENT' && (
     75              <>
     76                <Link to="/medical-records" className={`navbar-link ${isActive('/medical-records') ? 'active' : ''}`}>
     77                  Medical Records
     78                </Link>
     79                <Link to="/billing" className={`navbar-link ${isActive('/billing') ? 'active' : ''}`}>
     80                  Billing
     81                </Link>
     82              </>
     83            )}
     84          </>
     85        )}
     86        {(user?.role === 'ADMIN' || user?.role === 'LAB_TECHNICIAN' || user?.role === 'DOCTOR') && (
     87          <Link to="/lab-tests" className={`navbar-link ${isActive('/lab-tests') ? 'active' : ''}`}>
     88            Lab Tests
     89          </Link>
     90        )}
     91        {!user?.role || user?.role === 'ADMIN' || user?.role === 'DOCTOR' ? (
     92          <>
     93            {user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
     94              <Link to="/medical-records" className={`navbar-link ${isActive('/medical-records') ? 'active' : ''}`}>
     95                Medical Records
    5996              </Link>
    60           )}
    61           <Link to="/doctors" className={`navbar-link ${isActive('/doctors') ? 'active' : ''}`}>
    62             Doctors
     97            )}
     98            {user?.role !== 'PATIENT' && user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
     99              <>
     100                <Link to="/medical-reports" className={`navbar-link ${isActive('/medical-reports') ? 'active' : ''}`}>
     101                  Medical Reports
     102                </Link>
     103                <Link to="/procedures" className={`navbar-link ${isActive('/procedures') ? 'active' : ''}`}>
     104                  Procedures
     105                </Link>
     106                <Link to="/referrals" className={`navbar-link ${isActive('/referrals') ? 'active' : ''}`}>
     107                  Referrals
     108                </Link>
     109              </>
     110            )}
     111          </>
     112        ) : null}
     113        {(user?.role === 'ADMIN' || user?.role === 'BILLING_ADMIN') && (
     114          <Link to="/billing" className={`navbar-link ${isActive('/billing') ? 'active' : ''}`}>
     115            Billing
    63116          </Link>
    64           <Link to="/departments" className={`navbar-link ${isActive('/departments') ? 'active' : ''}`}>
    65             Departments
    66           </Link>
    67           {user?.role !== 'LAB_TECHNICIAN' && user?.role !== 'BILLING_ADMIN' && (
    68               <>
    69                 <Link to="/appointments" className={`navbar-link ${isActive('/appointments') ? 'active' : ''}`}>
    70                   Appointments
    71                 </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                 )}
    82               </>
    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
    87               </Link>
    88           )}
    89           {!user?.role || user?.role === 'ADMIN' || user?.role === 'DOCTOR' ? (
    90               <>
    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                 )}
    109               </>
    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>
     117        )}
     118      </div>
    117119
    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>
     120      <div className="navbar-right">
     121        {user && (
     122          <div className="navbar-avatar" style={{ position: 'relative' }}>
     123            <div className="navbar-avatar-circle">{getInitials()}</div>
     124            <div className="navbar-avatar-name">{user.firstName}</div>
     125            <button
     126              onClick={() => setShowMenu(!showMenu)}
     127              style={{
     128                background: 'none',
     129                border: 'none',
     130                cursor: 'pointer',
     131                marginLeft: '4px',
     132                color: 'var(--color-neutral-600)',
     133                fontSize: '12px'
     134              }}
     135            >
     136              ▼
     137            </button>
     138            {showMenu && (
     139              <div style={{
     140                position: 'absolute',
     141                top: '100%',
     142                right: 0,
     143                background: 'white',
     144                border: '1px solid var(--color-neutral-400)',
     145                borderRadius: '6px',
     146                minWidth: '150px',
     147                marginTop: '4px',
     148                boxShadow: '0 4px 6px rgba(0,0,0,0.1)',
     149                zIndex: 1000
     150              }}>
     151                <div style={{
     152                  padding: '8px 0',
     153                  fontSize: '11px',
     154                  color: 'var(--color-neutral-600)',
     155                  borderBottom: '1px solid var(--color-neutral-400)',
     156                  paddingLeft: '12px',
     157                  paddingRight: '12px',
     158                  paddingTop: '8px',
     159                  paddingBottom: '8px'
     160                }}>
     161                  {user.role}
     162                </div>
    123163                <button
    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                     }}
     164                  onClick={handleLogout}
     165                  style={{
     166                    width: '100%',
     167                    padding: '8px 12px',
     168                    background: 'none',
     169                    border: 'none',
     170                    textAlign: 'left',
     171                    cursor: 'pointer',
     172                    fontSize: '12px',
     173                    color: 'var(--color-status-red)',
     174                    transition: 'background 0.2s'
     175                  }}
     176                  onMouseEnter={(e) => e.target.style.background = 'var(--color-neutral-200)'}
     177                  onMouseLeave={(e) => e.target.style.background = 'none'}
    133178                >
    134                   ▼
     179                  Logout
    135180                </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                 )}
    181181              </div>
    182           )}
    183         </div>
    184       </nav>
     182            )}
     183          </div>
     184        )}
     185      </div>
     186    </nav>
    185187  );
    186188}

  • frontend/src/components/ProtectedRoute.js

    re1f74f6 r9af201e  
     1
    12import React from 'react';
    23import { Navigate } from 'react-router-dom';
Note: See TracChangeset for help on using the changeset viewer.