adding heroui 3

api/src/app.module.ts

@@ -32,17 +32,17 @@ import { join } from 'path';
     }),
     HealthModule,
     LogModule,
-    // MsGraphModule.registerAsync({
-    //   inject: [ConfigService],
-    //   imports: [ConfigModule],
-    //   useFactory: async (configService: ConfigService) => {
-    //     return {
-    //       clientId: configService.get<string>('clientId'),
-    //       clientSecret: configService.get<string>('clientSecret'),
-    //       tenantId: configService.get<string>('tenantId')
-    //     }
-    //   }
-    // }),
+    MsGraphModule.registerAsync({
+      inject: [ConfigService],
+      imports: [ConfigModule],
+      useFactory: async (configService: ConfigService) => {
+        return {
+          clientId: configService.get<string>('clientId'),
+          clientSecret: configService.get<string>('clientSecret'),
+          tenantId: configService.get<string>('tenantId')
+        }
+      }
+    }),
     PilotModule,
     ServeStaticModule.forRoot({
       rootPath: join(__dirname, '../..', 'client', 'dist')

api/src/interfaces/customJwtPayload.interface.ts

@@ -1,5 +1,5 @@
 import { JwtPayload } from "jwt-decode";
 
 export interface CustomJwtPayload extends JwtPayload {
-  permissions: string[];
+  roles: string[];
 }

api/src/log/log.interceptor.ts

@@ -2,6 +2,7 @@ import { CallHandler, ExecutionContext, NestInterceptor, UnauthorizedException }
 import { Observable, map } from 'rxjs';
 import { LogEntity } from './log.entity';
 import { jwtDecode } from 'jwt-decode';
+import { CustomJwtPayload } from 'src/interfaces/customJwtPayload.interface';
 import { IS_PUBLIC_KEY } from '@noahspan/noahspan-modules';
 import { Reflector } from '@nestjs/core';
 
@@ -37,10 +38,9 @@ export class LogInterceptor implements NestInterceptor {
         if (req.headers.authorization) {
           const authHeader = req.headers.authorization;
           const token = authHeader && authHeader.split(' ')[1];
-          const jwtPayload = jwtDecode(token);
-          const rolesKeyName = Object.keys(jwtPayload).find((key) => key.includes('roles'));
+          const jwtPayload: CustomJwtPayload = jwtDecode(token);
 
-          if (jwtPayload[rolesKeyName].includes('Flying.Read')) {
+          if (jwtPayload.roles.includes('Flying.Read')) {
             const logs = limitData(data);
 
             return logs;

api/src/pilot/pilot.interceptor.ts

@@ -1,6 +1,7 @@
 import { CallHandler, ExecutionContext, NestInterceptor } from '@nestjs/common';
 import { jwtDecode } from 'jwt-decode';
 import { Observable, map } from 'rxjs';
+import { CustomJwtPayload } from 'src/interfaces/customJwtPayload.interface';
 import { PilotEntity } from './pilot.entity';
 import { IS_PUBLIC_KEY } from '@noahspan/noahspan-modules';
 import { Reflector } from '@nestjs/core';
@@ -29,10 +30,9 @@ export class PilotInterceptor implements NestInterceptor {
         if (req.headers.authorization) {
           const authHeader = req.headers.authorization;
           const token = authHeader && authHeader.split(' ')[1];
-          const jwtPayload = jwtDecode(token);
-          const rolesKeyName = Object.keys(jwtPayload).find((key) => key.includes('roles'));
+          const jwtPayload: CustomJwtPayload = jwtDecode(token);
 
-          if (jwtPayload[rolesKeyName].includes('Flying.Read')) {
+          if (jwtPayload.roles.includes('Flying.Read')) {
             const pilots = limitData(data)
 
             return pilots;

client/package.json

@@ -14,18 +14,20 @@
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.0",
-    "@heroui/react": "^2.8.5",
+    "@heroui/react": "^3.0.0-beta.2",
+    "@heroui/styles": "^3.0.0-beta.2",
     "@noahspan/noahspan-components": "^2.0.0-alpha-14",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.13",
     "@tanstack/react-table": "^8.21.3",
     "axios": "^1.7.2",
+    "daisyui": "^5.1.10",
     "dotenv": "^16.4.7",
     "framer-motion": "^12.23.24",
     "leaflet": "^1.9.4",
     "oidc-spa": "^7.2.4",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-hook-form": "^7.51.4",
     "react-leaflet": "^4",
     "react-leaflet-kml": "^2.1.2",

client/src/App.tsx

@@ -3,21 +3,20 @@ import Flights from './components/flights/Flights';
 import Logbook from './components/logbook/Logbook';
 import Pilots from './components/pilots/Pilots';
 import SiteNav from './components/siteNav/SiteNav';
-import { HeroUIProvider } from '@heroui/react';
 import { useHref, useNavigate } from 'react-router-dom';
 
 const App = () => {
   const navigate = useNavigate();
 
   return (
-    <HeroUIProvider navigate={navigate} useHref={useHref}>
+    <>
       <SiteNav />
       <Routes>
         <Route path='/' element={<Flights />} />
         <Route path="/logbook" element={<Logbook />} />
         <Route path="/pilots" element={<Pilots />} />
       </Routes>
-    </HeroUIProvider>
+    </>
   );
 };
 

client/src/auth/oidcConfig.ts

@@ -1,13 +1,11 @@
 import { createReactOidc } from "oidc-spa/react";
 
 export const { OidcProvider, useOidc, getOidc } = createReactOidc(async () => ({
-  issuerUri: import.meta.env.VITE_ISSUER_URI,
+  issuerUri: `https://login.microsoftonline.com/${import.meta.env.VITE_TENANT_ID}/v2.0`,
   clientId: import.meta.env.VITE_CLIENT_ID,
   homeUrl: import.meta.env.VITE_BASE_URL,
+  scopes: ['email', 'openid', 'profile', `api://${import.meta.env.VITE_CLIENT_ID}/user_impersonation`],
   autoLogin: false,
   postLoginRedirectUrl: '/',
-  noIframe: true,
-  extraQueryParams: {
-    audience: "api://flying-test-api"
-  }
+  noIframe: true
 }));

client/src/components/logbookCard/LogbookCard.tsx

@@ -1,4 +1,4 @@
-import { Accordion, AccordionItem, Card, CardBody, CardHeader } from '@heroui/react'
+import { Accordion, AccordionItem, Card, CardContent, CardHeader } from '@heroui/react'
 import { LogbookCardProps } from "./LogbookCardProps.interface";
 import TrackMap from "../trackMap/TrackMap";
 
@@ -15,7 +15,7 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
               <CardHeader>
                 <h2 className='font-bold text-2xl'>{formattedDate}</h2>
               </CardHeader>
-              <CardBody>    
+              <CardContent>    
                 {mode === 'flights' && log.tracks && log.tracks.length > 0 &&
                   <div className='mb-5'>
                     <TrackMap
@@ -25,8 +25,8 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
                     />
                   </div>
                 }
-                <Accordion variant='bordered'>
-                  <AccordionItem key='1' title='Details'>
+                <Accordion variant='surface'>
+                  <AccordionItem key='1'>
                     <div className='grid grid-cols-12 gap-3 mr-[30%] ml-[30%] mt-4 mb-4'>
                       <div className='col-span-6 font-bold'>
                         <span>Aircraft Make and Model</span>
@@ -66,7 +66,7 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
                   </AccordionItem>
                 </Accordion>
 
-              </CardBody>
+              </CardContent>
             </Card>
           </div>
         )

client/src/components/logbookDrawer/LogbookDrawer.tsx

@@ -102,36 +102,35 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
                 </div>
               )}
               <Tabs 
-                color='default'
-                fullWidth={true}
                 onSelectionChange={onSelectedKeyChanged}
                 selectedKey={activeTab as string}
-                variant='solid'
               >
-                <Tab
-                  key='time'
-                  title={
-                    <div className="flex items-center space-x-2">
+                <Tabs.ListContainer>
+                  <Tabs.List>
+                    <Tabs.Tab
+                      id='time'
+                    >
                       <FontAwesomeIcon icon={faClock} />
-                      <span>Time</span>
-                    </div>
-                  }
-                >
-                  <LogForm />
-                </Tab>
-                {logbookContext.state.formMode !== FormMode.ADD &&
-                  <Tab
-                    key='tracks'
-                    title={
-                      <div className="flex items-center space-x-2">
+                      Time
+                      <Tabs.Indicator />
+                    </Tabs.Tab>
+                    {logbookContext.state.formMode !== FormMode.ADD &&
+                      <Tabs.Tab
+                        id='tracks'
+                      >
                         <FontAwesomeIcon icon={faMapLocationDot} />
-                        <span>Tracks</span>
-                      </div>
+                        Tracks
+                        <Tabs.Indicator />
+                      </Tabs.Tab>
                     }
-                  >
-                    <TracksForm />
-                  </Tab>
-                }
+                  </Tabs.List>
+                </Tabs.ListContainer>
+                <Tabs.Panel id='time'>
+                  <LogForm />
+                </Tabs.Panel>
+                <Tabs.Panel id='tracks'>
+                  <TracksForm />
+                </Tabs.Panel>
               </Tabs>
             </DrawerBody>
             {activeTab !== 'tracks' &&
@@ -139,24 +138,24 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
                 <div className='grid grid-cols-12 gap-3'>
                   <div className='col-span-12 justify-self-end self-center'>
                     <Button
-                      disabled={
+                      isDisabled={
                         logbookContext.state.isFormDisabled && logbookContext.state.formMode.toString() !== FormMode.VIEW
                           ? logbookContext.state.isFormDisabled
                           : false
                       }
-                      startContent={<FontAwesomeIcon icon={faXmark} />}
                       onPress={onCancel}
                     >
+                      <FontAwesomeIcon icon={faXmark} />
                       {logbookContext.state.formMode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
                     </Button>
                     {logbookContext.state.formMode.toString() !== FormMode.VIEW && (
                       <Button
                         className='ml-[10px]'
-                        color='primary'
-                        disabled={logbookContext.state.isFormDisabled}
-                        startContent={<FontAwesomeIcon icon={faSave} />}
+                        isDisabled={logbookContext.state.isFormDisabled}
                         type="submit"
+                        variant='primary'
                       >
+                        <FontAwesomeIcon icon={faSave} />
                         Save
                       </Button>
                     )}

client/src/components/pilots/Pilots.tsx

@@ -10,7 +10,7 @@ import { UserRole } from '../../enums/userRole';
 import httpClient from '../../httpClient/httpClient'
 import { ScreenSize } from '../../enums/screenSize';
 import { useBreakpoints } from '../../hooks/useBreakpoints/UseBreakpoints';
-import { Alert, Button, Dropdown, DropdownItem, DropdownSection, Table, TableHeader, TableBody, TableColumn, TableRow, TableCell, DropdownTrigger, DropdownMenu } from '@heroui/react'
+import { Alert, Button, Dropdown, Table, TableHeader, TableBody, TableColumn, TableRow, TableCell } from '@heroui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEllipsisVertical, faPen, faEye, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons'
 
@@ -133,38 +133,40 @@ const Pilots: React.FC<unknown> = () => {
       case 'actions': {
         return (
           <Dropdown>
-            <DropdownTrigger>
-              <Button isIconOnly variant='light' size='lg'>
+            <Dropdown.Trigger>
+              <Button isIconOnly size='lg'>
                 <FontAwesomeIcon icon={faEllipsisVertical} />
               </Button>
-            </DropdownTrigger>
-            <DropdownMenu>
-              <DropdownSection showDivider>
-                <DropdownItem 
-                  key='edit'
-                  onPress={() => onOpenClosePilotForm(FormMode.EDIT, pilot.id)}
-                  startContent={<FontAwesomeIcon icon={faPen} />}
-                >
-                  Edit
-                </DropdownItem>
-                <DropdownItem 
-                  key='view'
-                  onPress={() => onOpenClosePilotForm(FormMode.VIEW, pilot.id)}
-                  startContent={<FontAwesomeIcon icon={faEye} />}  
-                >
-                  View
-                </DropdownItem>
-              </DropdownSection>
-                <DropdownSection>
-                  <DropdownItem 
-                    key='Delete'
-                    onPress={() => onDeletePilot(pilot.id)}
-                    startContent={<FontAwesomeIcon icon={faTrash} />}
+            </Dropdown.Trigger>
+            <Dropdown.Popover>
+              <Dropdown.Menu>
+                <Dropdown.Section>
+                  <Dropdown.Item 
+                    key='edit'
+                    onPress={() => onOpenClosePilotForm(FormMode.EDIT, pilot.id)}
                   >
-                    Delete
-                  </DropdownItem>
-                </DropdownSection>
-            </DropdownMenu>
+                    <FontAwesomeIcon icon={faPen} />
+                    Edit
+                  </Dropdown.Item>
+                  <Dropdown.Item 
+                    key='view'
+                    onPress={() => onOpenClosePilotForm(FormMode.VIEW, pilot.id)}
+                  >
+                    <FontAwesomeIcon icon={faEye} />
+                    View
+                  </Dropdown.Item>
+                </Dropdown.Section>
+                  <Dropdown.Section>
+                    <Dropdown.Item 
+                      key='Delete'
+                      onPress={() => onDeletePilot(pilot.id)}
+                    >
+                      <FontAwesomeIcon icon={faTrash} />
+                      Delete
+                    </Dropdown.Item>
+                  </Dropdown.Section>
+              </Dropdown.Menu>
+            </Dropdown.Popover>
           </Dropdown>
         )
       }

client/src/components/tracksForm/TracksForm.tsx

@@ -120,7 +120,7 @@ const TracksForm = () => {
           return (
             <>
               <div className='col-span-10'>
-                <Input isDisabled={state.isDisabled} key={index} type='text' value={filename}/>
+                <Input disabled={state.isDisabled} key={index} type='text' value={filename}/>
               </div>
               <div className='col-span-2'>
                 <Button isDisabled={state.isDisabled} key={index} isIconOnly onPress={() => onDeleteTrack(track.id, filename, index)}><FontAwesomeIcon icon={faTrash} /></Button>

client/src/globals.css

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+@import "@heroui/styles";
+@plugin "@tailwindcss/typography";
+
+
+
+
+
+

client/src/hooks/userRole/UseUserRole.tsx

@@ -8,8 +8,7 @@ export const useUserRole = () => {
 
   useEffect(() => {
     if (isUserLoggedIn && decodedIdToken) {
-      const rolesKeyName: string | undefined = Object.keys(decodedIdToken).find((key) => key.includes('roles'));
-      const idTokenRoles: string[] = decodedIdToken[rolesKeyName!] as string[];
+      const idTokenRoles: string[] = decodedIdToken!.roles as string[];
 
       let newUserRole: string | undefined;
 

client/src/main.tsx

@@ -5,7 +5,7 @@ import AppContextProvider from './context/appContext/AppContextProvider.tsx';
 import LogbookContextProvider from './context/logbookContext/LogbookContextProvider.tsx'
 import { BrowserRouter } from 'react-router-dom';
 import { OidcProvider } from './auth/oidcConfig.ts';
-import './styles.css';
+import './globals.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <OidcProvider>

client/src/styles.css

@@ -1,15 +0,0 @@
-@import "tailwindcss";
-@plugin './hero.ts';
-/* Note: You may need to change the path to fit your project structure */
-@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
-@custom-variant dark (&:is(.dark *));
-@plugin "@tailwindcss/typography";
-
-@theme inline {
-  --color-primary: #000000;
-}
-
-
-
-
-

client/src/vite-env.d.ts

@@ -3,7 +3,6 @@
 interface ImportMetaEnv {
   readonly VITE_BASE_URL: string;
   readonly VITE_CLIENT_ID: string;
-  readonly VITE_ISSUER_URI: string;
   readonly VITE_TENANT_ID: string;
 }