api/package.json

@@ -35,7 +35,7 @@
     "@nestjs/serve-static": "^5.0.3",
     "@nestjs/typeorm": "^11.0.0",
     "@noahspan/azure-database": "^3.1.2",
-    "@noahspan/noahspan-modules": "^1.2.9",
+    "@noahspan/noahspan-modules": "^1.2.11",
     "@schematics/angular": "^17.3.7",
     "@types/multer": "^1.4.12",
     "better-sqlite3": "^12.2.0",

api/src/app.module.ts

@@ -32,17 +32,18 @@ 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 {
+          authority: configService.get<string>('authority'),
+          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/config/configuration.ts

@@ -1,6 +1,7 @@
 export default () => ({
   azureStorageConnectionString: process.env.AZURE_STORAGE_CONNECTION_STRING,
   audience: process.env.AUDIENCE,
+  authority: process.env.AUTHORITY,
   clientId: process.env.CLIENT_ID,
   clientSecret: process.env.CLIENT_SECRET,
   issuer: process.env.ISSUER_URL,

api/src/log/log.controller.ts

@@ -65,7 +65,7 @@ export class LogController {
       return await this.logService.create(logDto);
     } catch (error) {
       const customError = error as CustomError;
-
+      console.log(error)
       throw new HttpException(customError.message, customError.statusCode);
     }
   }

api/src/main.ts

@@ -10,15 +10,15 @@ async function bootstrap() {
   const app = await NestFactory.create(AppModule);
 
   app.enableCors({
-    origin: 'http://localhost:8080', // Allow requests from your frontend's origin
+    origin: 'http://localhost:8080',
     methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
-    credentials: true, // If you need to send cookies or authorization headers
+    credentials: true,
   });
   app.setGlobalPrefix('api');
   app.useGlobalFilters(new HttpExceptionFilter());
   app.use(
     session({
-      secret: 'blah',
+      secret: process.env.SESSION_SECRET,
       resave: false,
       saveUninitialized: false
     })

api/src/pilot/pilot.interceptor.ts

@@ -29,6 +29,7 @@ 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'));
 

client/package.json

@@ -14,14 +14,12 @@
     "@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",
     "@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",
     "dotenv": "^16.4.7",
-    "framer-motion": "^12.23.24",
     "leaflet": "^1.9.4",
     "oidc-spa": "^7.2.4",
     "react": "^19.1.1",

client/src/App.tsx

@@ -1,23 +1,22 @@
-import { Navigate, Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 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';
+import { useNavigate } from 'react-router-dom';
 
 const App = () => {
   const navigate = useNavigate();
 
   return (
-    <HeroUIProvider navigate={navigate} useHref={useHref}>
+    <div className='bg-[#f5f5f5]' data-theme="lofi">
       <SiteNav />
       <Routes>
         <Route path='/' element={<Flights />} />
         <Route path="/logbook" element={<Logbook />} />
         <Route path="/pilots" element={<Pilots />} />
       </Routes>
-    </HeroUIProvider>
+    </div>
   );
 };
 

client/src/auth/oidcConfig.ts

@@ -4,10 +4,8 @@ export const { OidcProvider, useOidc, getOidc } = createReactOidc(async () => ({
   issuerUri: import.meta.env.VITE_ISSUER_URI,
   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"
-  }
 }));

client/src/components/alert/Alert.tsx

@@ -0,0 +1,44 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AlertProps } from "./AlertProps.interface";
+import { faCircleCheck, faCircleInfo, faCircleXmark, faTriangleExclamation, faXmark } from "@fortawesome/free-solid-svg-icons";
+
+const Alert = ({
+  children,
+  className,
+  closeIcon,
+  severity,
+  onClose,
+  ...rest
+}: AlertProps) => {
+  const severityVariants = {
+    info: 'alert-info',
+    error: 'alert-error',
+    success: 'alert-success',
+    warning: 'alert-warning'
+  };
+
+  return (
+    <>
+      <div
+        role='alert'
+        className={`alert ${severity ? severityVariants[severity] : ''} ${className ? className : ''}`}
+        {...rest}
+      >
+        <span>
+          {severity === 'info' && <FontAwesomeIcon icon={faCircleInfo} />}
+          {severity === 'error' && <FontAwesomeIcon icon={faCircleXmark} />}
+          {severity === 'success' && (
+            <FontAwesomeIcon icon={faCircleCheck} />
+          )}
+          {severity === 'warning' && (
+            <FontAwesomeIcon icon={faTriangleExclamation} />
+          )}
+        </span>
+        <span>{children}</span>
+        {closeIcon && <button className='btn' onClick={onClose}>{<FontAwesomeIcon icon={faXmark} />}</button>}
+      </div>
+    </>
+  );
+};
+
+export default Alert;

client/src/components/alert/AlertProps.interface.ts

@@ -0,0 +1,7 @@
+export interface AlertProps {
+  children?: React.ReactNode;
+  className?: string;
+  closeIcon?: React.ReactNode;
+  onClose?: () => void;
+  severity: 'info' | 'error' | 'success' | 'warning';
+}

client/src/components/confirmationDialog/ConfirmationDialog.tsx

@@ -7,7 +7,6 @@
 //   IconName,
 //   Loading
 // } from '@noahspan/noahspan-components';
-import { Button, Modal, ModalBody, ModalContent, ModalHeader, ModalFooter, Spinner } from '@heroui/react'
 import { DialogConfirmationProps } from './ConfirmationDialogProps.interface';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircleCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
@@ -21,31 +20,25 @@ const ConfirmationDialog = ({
   title
 }: DialogConfirmationProps) => {
   return (
-    <Modal
-      isDismissable={false}
-      isKeyboardDismissDisabled={true}
-      isOpen={isOpen}
-    >
-      <ModalContent>
-        <ModalHeader>{title}</ModalHeader>
-        <ModalBody>
-          {!isLoading && <div>{contentText}</div>}
-          {isLoading && <Spinner size='lg' />}
-        </ModalBody>
-        <ModalFooter>
-          <Button onPress={onCancel} startContent={<FontAwesomeIcon icon={faXmark} />}>
+    <>
+      <input type='checkbox' id='dialog' className='modal-toggle' onChange={() => {}} checked={isOpen} />
+      <div className='modal' role='dialog'>
+        <div className='modal-box'>
+          <h3 className="text-lg font-bold">{title}</h3>
+          <p className="py-4">{contentText}</p>
+          <div className='modal-action'>
+            <button className='btn' onClick={onCancel}>
+              <FontAwesomeIcon icon={faXmark} />
               No
-          </Button>
-          <Button
-            color='primary'
-            onPress={onConfirm}
-            startContent={<FontAwesomeIcon icon={faCircleCheck} />}
-          >
+            </button>
+            <button className='btn btn-primary' onClick={onConfirm}>
+              <FontAwesomeIcon icon={faCircleCheck} />
               Yes
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
   );
 };
 

client/src/components/flights/Flights.tsx

@@ -1,11 +1,9 @@
-import { Icon, IconName, Skeleton } from "@noahspan/noahspan-components";
-import { Card } from '@heroui/react';
 import LogbookCard from "../logbookCard/LogbookCard";
 import { useEffect, useReducer } from "react";
 import { useLogs } from "../../hooks/logs/UseLogs";
 import { LogbookEntry } from "../logbook/LogbookEntry.interface";
 import { initialState, reducer } from "./reducer";
-import { Alert } from '@heroui/react'
+import Alert from "../alert/Alert";
 
 const Flights = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -23,7 +21,7 @@ const Flights = () => {
       dispatch({ type: 'SET_FLIGHTS', payload: flights})
       dispatch({ type: 'SET_ALERT', payload: undefined })
     } else {
-      dispatch({ type: 'SET_ALERT', payload: { severity: 'default', message: 'No flights found' }})
+      dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'No flights found' }})
     }
   }, [logs])
   
@@ -35,12 +33,14 @@ const Flights = () => {
       {!logsLoading && state.alert && (
         <div>
           <Alert
+            className='mb-5'
             onClose={() =>
               dispatch({ type: 'SET_ALERT', payload: undefined })
             }
-            color={state.alert.severity}
-            title={state.alert.message}
-          />
+            severity={state.alert.severity}
+          >
+            {state.alert.message}
+          </Alert>
         </div>
       )}
       {!logsLoading &&
@@ -48,7 +48,7 @@ const Flights = () => {
           <LogbookCard logs={state.flights} mode='flights' />
         </div>
       }
-      {logsLoading && [...Array(6)].map((_element, index) => {
+      {/* {logsLoading && [...Array(6)].map((_element, index) => {
         return (
           <div className='mb-5'>
             <Card
@@ -70,7 +70,7 @@ const Flights = () => {
             </Card>
           </div>
         )
-      })}
+      })} */}
     </div>
   )
 }

client/src/components/logForm/LogForm.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useReducer } from 'react';
-import { Alert, Button, DatePicker, Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader, Input, NumberInput, Select, Selection, SelectItem, SharedSelection, Textarea } from '@heroui/react'
-import { useForm, Controller, FormProvider, useFormContext } from 'react-hook-form';
+import { useEffect, useReducer } from 'react';
+import { useForm, Controller, useFormContext } from 'react-hook-form';
 import { LogFormProps } from './LogFormProps.interface';
 import { initialState, reducer } from './reducer';
 import { AxiosError, AxiosResponse } from 'axios';
@@ -10,7 +9,6 @@ import { useOidc } from '../../auth/oidcConfig';
 import httpClient from '../../httpClient/httpClient';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSave, faXmark } from '@fortawesome/free-solid-svg-icons'
-import { parseAbsolute, parseDate, getLocalTimeZone, CalendarDate, ZonedDateTime } from '@internationalized/date';
 import { useLogbookContext } from '../../hooks/logbookContext/UseLogbookContext';
 
 const LogForm = () => {
@@ -40,7 +38,7 @@ const LogForm = () => {
       } catch (error) {
         const axiosError = error as AxiosError;
 
-        dispatch({ type: 'SET_ALERT', payload: { severity: 'danger', message: axiosError.message }});
+        dispatch({ type: 'SET_ALERT', payload: { severity: 'error', message: axiosError.message }});
       } finally {
         dispatch({ type: 'SET_IS_LOADING', payload: false });
       }
@@ -59,7 +57,7 @@ const LogForm = () => {
           label: pilot.name,
         };
       });
-      console.log(newPilotsOptions)
+
       dispatch({ type: 'SET_PILOT_OPTIONS', payload: newPilotsOptions });
     }
   }, [pilots]);
@@ -73,25 +71,21 @@ const LogForm = () => {
         <Controller
           name="pilotId"
           control={control}
-          render={({ field: { value } }) => {
+          render={({ field: { onChange, value } }) => {
             return (
-              <Select
+              <select
+                className='select w-full'
                 aria-labelledby='pilot'
-                isDisabled={state.isDisabled}
-                fullWidth={true}
-                isRequired={true}
-                onSelectionChange={(keys: SharedSelection) => {
-                  setValue('pilotId', keys.currentKey);
-                }}
-                selectedKeys={[value]}
-                size='lg'
+                disabled={state.isDisabled}
+                onChange={onChange}
+                value={[value]}
               >
                 {state.pilotOptions?.map((pilotOption: { key: string; label: string, }) => {
                 return (
-                  <SelectItem key={pilotOption.key}>{pilotOption.label}</SelectItem>
+                  <option key={pilotOption.key}>{pilotOption.label}</option>
                 ) 
                 })}
-              </Select>
+              </select>
             );
           }}
         />
@@ -104,20 +98,13 @@ const LogForm = () => {
           name="date"
           control={control}
           render={({ field: { onChange, value } }) => {
-            const parsedAbsoluteDate = value ? parseAbsolute(value, getLocalTimeZone()) : value
-
             return(
-            <DatePicker
-              aria-labelledby='date'
-              isDisabled={state.isDisabled}
-              isRequired={true}
-              onChange={(selectedDate) => {
-                let date = selectedDate as CalendarDate;
-
-                setValue('date', date.toDate(getLocalTimeZone()).toISOString())
-              }}
-              size='lg'
-              value={parsedAbsoluteDate ? new CalendarDate(parsedAbsoluteDate.year, parsedAbsoluteDate.month, parsedAbsoluteDate.day) : value}
+              <input
+                type='date'
+                className='input w-full'
+                disabled={state.isDisabled}
+                onChange={onChange}
+                value={value ? value.split('T')[0] : ''}
               />
             )
           }}
@@ -131,18 +118,11 @@ const LogForm = () => {
           name="aircraftMakeModel"
           control={control}
           render={({ field: { onChange, value } }) => (
-            <Input
-              aria-labelledby='aircraftMakeModel'
-              isDisabled={state.isDisabled}
-              color={formState.errors.address ? 'danger' : undefined}
-              errorMessage={
-                formState.errors.address
-                  ? formState.errors.address.message?.toString()
-                  : undefined
-              }
-              isRequired={true}
+            <input
+              type='text'
+              className='input w-full'
+              disabled={state.isDisabled}
               onChange={onChange}
-              size='lg'
               value={value}
             />
           )}
@@ -158,18 +138,11 @@ const LogForm = () => {
               name="aircraftIdentity"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <Input
-                  aria-labelledby='aircraftIdentity'
-                  isDisabled={state.isDisabled}
-                  color={formState.errors.address ? 'danger' : undefined}
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isRequired={true}
+                <input
+                  type='text'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  size='lg'
                   value={value}
                 />
               )}
@@ -185,18 +158,11 @@ const LogForm = () => {
           name="routeFrom"
           control={control}
           render={({ field: { onChange, value } }) => (
-            <Input
-              aria-labelledby='routeFrom'
-              isDisabled={state.isDisabled}
-              color={formState.errors.address ? 'danger' : undefined}
-              errorMessage={
-                formState.errors.address
-                  ? formState.errors.address.message?.toString()
-                  : undefined
-              }
-              isRequired={true}
+            <input
+              type='text'
+              className='input w-full'
+              disabled={state.isDisabled}
               onChange={onChange}
-              size='lg'
               value={value}
             />
           )}
@@ -210,18 +176,11 @@ const LogForm = () => {
           name="routeTo"
           control={control}
           render={({ field: { onChange, value } }) => (
-            <Input
-              aria-labelledby='routeTo'
-              isDisabled={state.isDisabled}
-              color={formState.errors.address ? 'danger' : undefined}
-              errorMessage={
-                formState.errors.address
-                  ? formState.errors.address.message?.toString()
-                  : undefined
-              }
-              isRequired={true}
+            <input
+              type='text'
+              className='input w-full'
+              disabled={state.isDisabled}
               onChange={onChange}
-              size='lg'
               value={value}
             />
           )}
@@ -235,21 +194,11 @@ const LogForm = () => {
           name="durationOfFlight"
           control={control}
           render={({ field: { onChange, value } }) => (
-            <NumberInput
-              aria-labelledby='durationOfFlight'
-              isDisabled={state.isDisabled}
-              color={formState.errors.address ? 'danger' : undefined}
-              errorMessage={
-                formState.errors.address
-                  ? formState.errors.address.message?.toString()
-                  : undefined
-              }
-              isRequired={true}
-              isWheelDisabled={state.isDisabled}
+            <input
+              type='number'
+              className='input w-full'
+              disabled={state.isDisabled}
               onChange={onChange}
-              radius='lg'
-              size='sm'
-              type="number"
               value={value}
             />
           )}
@@ -265,21 +214,11 @@ const LogForm = () => {
               name="singleEngineLand"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='singleEngineLand'
-                  isDisabled={state.isDisabled}
-                  color={formState.errors.address ? 'danger' : undefined}
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isRequired={true}
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -293,20 +232,11 @@ const LogForm = () => {
               name="simulatorAtd"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='simulaterAtd'
-                  isDisabled={state.isDisabled}
-                  color={formState.errors.address ? 'danger' : undefined}
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -323,22 +253,11 @@ const LogForm = () => {
               name="landingsDay"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='landingsDay'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -352,22 +271,11 @@ const LogForm = () => {
               name="landingsNight"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='landingsNight'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -386,24 +294,12 @@ const LogForm = () => {
               name="groundTrainingReceived"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='groundTrainingReceived'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
-                  width='w-full'
                 />
               )}
             />
@@ -418,22 +314,11 @@ const LogForm = () => {
               name="flightTrainingReceived"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='flightTrainingReceived'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -447,22 +332,11 @@ const LogForm = () => {
               name="crossCountry"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='crossCountry'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -476,22 +350,11 @@ const LogForm = () => {
               name="night"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='night'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -505,22 +368,11 @@ const LogForm = () => {
               name="solo"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='solo'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -534,22 +386,11 @@ const LogForm = () => {
               name="pilotInCommand"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='pilotInCommand'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -566,22 +407,11 @@ const LogForm = () => {
               name="instrumentActual"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='instrumentActual'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -595,22 +425,11 @@ const LogForm = () => {
               name="instrumentSimulated"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='instrumentSimulated'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -626,22 +445,11 @@ const LogForm = () => {
               name="instrumentApproaches"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='instrumentApproaches'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -655,22 +463,11 @@ const LogForm = () => {
               name="instrumentHolds"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='instrumentHolds'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -684,23 +481,11 @@ const LogForm = () => {
               name="instrumentNavTrack"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <NumberInput
-                  aria-labelledby='instrumentNavTrack'
-                  isDisabled={state.isDisabled}
-                  color={
-                    formState.errors.address ? 'danger' : undefined
-                  }
-                  errorMessage={
-                    formState.errors.address
-                      ? formState.errors.address.message?.toString()
-                      : undefined
-                  }
-                  fullWidth={true}
-                  isWheelDisabled={state.isDisabled}
+                <input
+                  type='number'
+                  className='input w-full'
+                  disabled={state.isDisabled}
                   onChange={onChange}
-                  radius='lg'
-                  size='sm'
-                  type="number"
                   value={value}
                 />
               )}
@@ -716,19 +501,11 @@ const LogForm = () => {
           name="notes"
           control={control}
           render={({ field: { onChange, value } }) => (
-            <Textarea
-              aria-labelledby='notes'
-              isDisabled={state.isDisabled}
-              color={formState.errors.address ? 'danger' : undefined}
-              errorMessage={
-                formState.errors.address
-                  ? formState.errors.address.message?.toString()
-                  : undefined
-              }
-              fullWidth={true}
+            <textarea
+              className='textarea w-full'
+              disabled={state.isDisabled}
               onChange={onChange}
-              value={value}
-            />
+            ></textarea>
           )}
         />
       </div>

client/src/components/logForm/LogFormState.interface.ts

@@ -1,13 +1,9 @@
-import { Selection } from "@heroui/react";
 import { Alert } from "../../interfaces/Alert.interface";
 
 export interface LogFormState {
   alert: Alert | undefined;
-  experienceSelectedKeys: Selection;
-  instrumentSelectedKeys: Selection;
   isDisabled: boolean;
   isLoading: boolean;
-  landingsSelectedKeys: Selection;
   pilotOptions: { key: string; label: string; }[];
   selectedPilotName: string;
 }

client/src/components/logForm/reducer.tsx

@@ -1,24 +1,17 @@
 import { Alert } from '../../interfaces/Alert.interface';
 import { LogFormState } from './LogFormState.interface';
-import { Selection } from '@heroui/react';
 
 type Action =
   | { type: 'SET_ALERT'; payload: Alert | undefined }
-  | { type: 'SET_EXPERIENCE_SELECTED_KEYS'; payload: Selection }
-  | { type: 'SET_INSTRUMENT_SELECTED_KEYS'; payload: Selection }
   | { type: 'SET_IS_DISABLED'; payload: boolean }
   | { type: 'SET_IS_LOADING'; payload: boolean }
-  | { type: 'SET_LANDINGS_SELECTED_KEYS'; payload: Selection }
   | { type: 'SET_PILOT_OPTIONS'; payload: { key: string, label: string; }[] }
   | { type: 'SET_SELECTED_PILOT_NAME'; payload: string };
 
 export const initialState: LogFormState = {
   alert: undefined,
-  experienceSelectedKeys: new Set([]),
-  instrumentSelectedKeys: new Set([]),
   isDisabled: false,
   isLoading: true,
-  landingsSelectedKeys: new Set(['1']),
   pilotOptions: [],
   selectedPilotName: ''
 };
@@ -34,36 +27,18 @@ export const reducer = (
         alert: action.payload
       };
     }
-    case 'SET_EXPERIENCE_SELECTED_KEYS': {
-      return {
-        ...state,
-        experienceSelectedKeys: action.payload
-      }
-    }
     case 'SET_IS_DISABLED': {
       return {
         ...state,
         isDisabled: action.payload
       };
     }
-    case 'SET_INSTRUMENT_SELECTED_KEYS': {
-      return {
-        ...state,
-        instrumentSelectedKeys: action.payload
-      }
-    }
     case 'SET_IS_LOADING': {
       return {
         ...state,
         isLoading: action.payload
       };
     }
-    case 'SET_LANDINGS_SELECTED_KEYS': {
-      return {
-        ...state,
-        landingsSelectedKeys: action.payload
-      }
-    }
     case 'SET_PILOT_OPTIONS': {
       return {
         ...state,

client/src/components/logbook/Logbook.tsx

@@ -1,10 +1,8 @@
-import { Key, useEffect, useReducer } from 'react';
-import LogForm from '../logForm/LogForm';
+import { useEffect, useReducer } from 'react';
 import { initialState, reducer } from './reducer';
 import { AxiosError, AxiosResponse } from 'axios';
 import { FormMode } from '../../enums/formMode';
 import { authColumns, unauthColumns } from './columns';
-import ActionMenu from '../actionMenu/ActionMenu';
 import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
 import { LogbookEntry } from './LogbookEntry.interface';
 import LogbookCard from '../logbookCard/LogbookCard';
@@ -14,12 +12,12 @@ import { useUserRole } from '../../hooks/userRole/UseUserRole';
 import { UserRole } from '../../enums/userRole';
 import { useBreakpoints } from '../../hooks/useBreakpoints/UseBreakpoints';
 import { ScreenSize } from '../../enums/screenSize';
-import { Table, TableHeader, TableBody, TableColumn, Dropdown, DropdownTrigger, Button, DropdownSection, DropdownMenu, DropdownItem, Alert, TableRow, TableCell } from '@heroui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAdd, faEllipsisVertical, faPen, faEye, faTrash, faMapLocationDot } from '@fortawesome/free-solid-svg-icons'
 import { CellContext, ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, HeaderContext, useReactTable } from '@tanstack/react-table';
 import { useLogbookContext } from '../../hooks/logbookContext/UseLogbookContext';
 import LogbookDrawer from '../logbookDrawer/LogbookDrawer';
+import Alert from '../alert/Alert';
 
 const Logbook: React.FC<unknown> = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -28,7 +26,6 @@ const Logbook: React.FC<unknown> = () => {
   const { userRole } = useUserRole();
   const { screenSize } = useBreakpoints();
   const columnTotal = (info: HeaderContext<LogbookEntry, unknown>): number => {
-    const blah = info.table
     const values: number[] = info.table.getPaginationRowModel().rows.map((row: any) => Number(row.getValue(info.column.id))).filter((value: any) => !Number.isNaN(value));
     let total: number = 0;
     
@@ -69,13 +66,17 @@ const Logbook: React.FC<unknown> = () => {
     id: 'route',
     header: 'Route of Flight',
     meta: {
-      headerAlign: 'center'
+      className: 'border-l border-base-300',
+      headerAlign: 'text-center'
     },
     columns: [
       {
         id: 'routeFrom',
         accessorKey: 'routeFrom',
-        header: 'From'
+        header: 'From',
+        meta: {
+          className: 'border-l border-base-300',
+        }
       },
       {
         id: 'routeTo',
@@ -89,8 +90,9 @@ const Logbook: React.FC<unknown> = () => {
     accessorKey: 'durationOfFlight',
     header: 'Duration Of Flight',
     meta: {
-      align: 'right',
-      headerAlign: 'right'
+      align: 'text-right',
+      className: 'border-l border-base-300',
+      headerAlign: 'text-right'
     },
     cell: (info: CellContext<LogbookEntry, unknown>) =>
       info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
@@ -99,51 +101,33 @@ const Logbook: React.FC<unknown> = () => {
   const notes: ColumnDef<LogbookEntry> = {
     id: 'notes',
     accessorKey: 'notes',
-    header: 'Notes'
+    header: 'Notes',
+    meta: {
+      className: 'border-l border-base-300',
+    }
   }
   const actions: ColumnDef<LogbookEntry> = {
     id: 'actions',
     header: 'Actions',
     meta: {
-      align: 'center',
-      headerAlign: 'center'
+      align: 'text-center',
+      className: 'border-l border-base-300',
+      headerAlign: 'text-center'
     },
     cell: (info: CellContext<LogbookEntry, unknown>) => {
       return (
-        <Dropdown>
-          <DropdownTrigger>
-            <Button isIconOnly variant='light' size='lg'>
-              <FontAwesomeIcon icon={faEllipsisVertical} />
-            </Button>
-          </DropdownTrigger>
-          <DropdownMenu>
-            <DropdownSection showDivider>
-              <DropdownItem 
-                key='edit'
-                onPress={() => onOpenCloseDrawer(FormMode.EDIT, info.row.original.id)}
-                startContent={<FontAwesomeIcon icon={faPen} />}
-              >
-                Edit
-              </DropdownItem>
-              <DropdownItem 
-                key='view'
-                onPress={() => onOpenCloseDrawer(FormMode.VIEW, info.row.original.id)}
-                startContent={<FontAwesomeIcon icon={faEye} />}  
-              >
-                View
-              </DropdownItem>
-            </DropdownSection>
-              <DropdownSection>
-                <DropdownItem 
-                  key='Delete'
-                  onPress={() => onDeleteLog(info.row.original.id)}
-                  startContent={<FontAwesomeIcon icon={faTrash} />}
-                >
-                  Delete
-                </DropdownItem>
-              </DropdownSection>
-          </DropdownMenu>
-        </Dropdown>
+        <div className='dropdown dropdown-end'>
+          <div tabIndex={0} role='button' className='btn btn-ghost'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
+          <ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm border border-base-300">
+            {isUserLoggedIn && userRole === UserRole.WRITE &&
+              <li><a onClick={() => onOpenCloseDrawer(FormMode.EDIT, info.row.original.id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
+            }
+            <li><a onClick={() => onOpenCloseDrawer(FormMode.VIEW, info.row.original.id)}><FontAwesomeIcon icon={faEye} />View</a></li>
+            {isUserLoggedIn && userRole === UserRole.WRITE &&
+              <li><a onClick={() => onDeleteLog(info.row.original.id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
+            }
+          </ul>
+        </div>
       )
     }
   }
@@ -173,8 +157,8 @@ const Logbook: React.FC<unknown> = () => {
       accessorKey: 'singleEngineLand',
       header: 'Single Engine Land',
       meta: {
-        align: 'right',
-        headerAlign: 'right'
+        align: 'text-right',
+        headerAlign: 'text-right'
       },
       cell: (info: CellContext<LogbookEntry, unknown>) =>
         info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
@@ -184,7 +168,8 @@ const Logbook: React.FC<unknown> = () => {
       id: 'landings',
       header: 'Landings',
       meta: {
-        headerAlign: 'center'
+        className: 'border-l border-base-300',
+        headerAlign: 'text-center'
       },
       columns: [
         {
@@ -193,8 +178,9 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Day',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            className: 'border-l border-base-300',
+            headerAlign: 'text-right'
           }
         },
         {
@@ -203,8 +189,8 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Night',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            headerAlign: 'text-right'
           }
         }
       ]
@@ -213,7 +199,8 @@ const Logbook: React.FC<unknown> = () => {
       id: 'instrument',
       header: 'Instrument',
       meta: {
-        headerAlign: 'center'
+        className: 'border-l border-base-300',
+        headerAlign: 'text-center'
       },
       columns: [
         {
@@ -222,8 +209,9 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Actual',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            className: 'border-l border-base-300',
+            headerAlign: 'text-right'
           },
           cell: (info: CellContext<LogbookEntry, unknown>) =>
             info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
@@ -234,8 +222,8 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Simulated',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            headerAlign: 'text-right'
           },
           cell: (info: CellContext<LogbookEntry, unknown>) =>
             info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -246,8 +234,8 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Approaches',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            headerAlign: 'text-right'
           }
         },
         {
@@ -256,8 +244,8 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Holds',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            headerAlign: 'text-right'
           }
         },
         {
@@ -266,8 +254,8 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Nav/Track',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            headerAlign: 'text-right'
           }
         }
       ]
@@ -276,7 +264,8 @@ const Logbook: React.FC<unknown> = () => {
       id: 'experienceTraining',
       header: 'Type of pilot experience or training',
       meta: {
-        headerAlign: 'center'
+        className: 'border-l border-base-300',
+        headerAlign: 'text-center'
       },
       columns: [
         {
@@ -285,8 +274,9 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Ground Training Received',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            className: 'border-l border-base-300',
+            headerAlign: 'text-right'
           },
           cell: (info: CellContext<LogbookEntry, unknown>) =>
             info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -297,8 +287,8 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Flight Training Received',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            headerAlign: 'text-right'
           },
           cell: (info: CellContext<LogbookEntry, unknown>) =>
             info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -309,8 +299,8 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Cross Country',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            headerAlign: 'text-right'
           },
           cell: (info: CellContext<LogbookEntry, unknown>) =>
             info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -321,8 +311,8 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Night',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            headerAlign: 'text-right'
           },
           cell: (info: CellContext<LogbookEntry, unknown>) =>
             info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -333,8 +323,8 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Solo',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            headerAlign: 'text-right'
           },
           cell: (info: CellContext<LogbookEntry, unknown>) =>
             info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -345,8 +335,8 @@ const Logbook: React.FC<unknown> = () => {
           header: 'Pilot In Command',
           footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
           meta: {
-            align: 'right',
-            headerAlign: 'right'
+            align: 'text-right',
+            headerAlign: 'text-right'
           },
           cell: (info: CellContext<LogbookEntry, unknown>) =>
             info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -372,14 +362,14 @@ const Logbook: React.FC<unknown> = () => {
           dispatch({ type: 'SET_ALERT', payload: undefined})
         }
       } else {
-        dispatch({ type: 'SET_ALERT', payload: { severity: 'default', message: 'No logbook entries found.'}})
+        dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'No logbook entries found.'}})
       }
     } catch (error) {
       const axiosError = error as AxiosError;
 
       dispatch({
         type: 'SET_ALERT',
-        payload: { severity: 'danger', message: `Loading of logbook entries failed with the following message: ${axiosError.message}`}
+        payload: { severity: 'error', message: `Loading of logbook entries failed with the following message: ${axiosError.message}`}
       });
     } finally {
       dispatch({ type: 'SET_IS_LOADING', payload: false });
@@ -437,7 +427,7 @@ const Logbook: React.FC<unknown> = () => {
 
       dispatch({
         type: 'SET_ALERT',
-        payload: { severity: 'danger', message: `Loading of logbook entries failed with the following message: ${axiosError.message}`}
+        payload: { severity: 'error', message: `Loading of logbook entries failed with the following message: ${axiosError.message}`}
       });
     } finally {
       dispatch({ type: 'SET_IS_CONFIRMATION_DIALOG_LOADING', payload: false });
@@ -503,44 +493,52 @@ const Logbook: React.FC<unknown> = () => {
         </div>
         <div className='col-span-2 justify-self-end self-center'>
           {userRole === UserRole.WRITE &&
-            <Button
-              color='primary'
-              onPress={() => onOpenCloseDrawer(FormMode.ADD)}
-              startContent={<FontAwesomeIcon icon={faAdd} />}
-              data-testid="pilot-add-button"
+            // <Button
+            //   color='primary'
+            //   onPress={() => onOpenCloseDrawer(FormMode.ADD)}
+            //   startContent={<FontAwesomeIcon icon={faAdd} />}
+            //   data-testid="pilot-add-button"
+            // >
+            //   Add Entry
+            // </Button>
+            <button className='btn btn-primary'
+              onClick={() => onOpenCloseDrawer(FormMode.ADD)}
             >
+              <FontAwesomeIcon icon={faAdd} />
               Add Entry
-            </Button>
+            </button>
           }
         </div>
         {!state.isLoading && state.alert && (
           <div className='col-span-12 mb-5'>
             <Alert
+              className='mb-5'
               onClose={() =>
                 dispatch({ type: 'SET_ALERT', payload: undefined })
               }
-              color={'default'}
-              title={state.alert.message}
-            />
+              severity={'info'}
+            >
+              {state.alert.message}
+            </Alert>
           </div>
         )}
         {!state.isLoading && (
-          <div className='col-span-12'>
+          <div className='col-span-12 p-5 bg-base-100 border border-base-100 rounded-lg'>
             {state.entries.length > 0 && screenSize !== ScreenSize.SM && (
-              <div className='p-4 z-0 flex flex-col relative justify-between gap-4 bg-content1 overflow-auto shadow-small rounded-large w-full'>
-                <table className='min-w-full h-auto table-auto w-full'>
-                  <thead className='[&>tr]:first:rounded-lg'>
-                    {table.getHeaderGroups().map((headerGroup) => (
+              <div className='overflow-x-auto'>
+                <table className='table min-w-full h-auto table-auto w-full'>
+                  <thead className='bg-base-200'>
+                    {table.getHeaderGroups().map((headerGroup, headerGroupIndex) => (
                       <tr className='group/tr outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2' key={headerGroup.id}>
-                        {headerGroup.headers.map((header) => {
+                        {headerGroup.headers.map((header, headerIndex) => {
                           return (
                             <th
-                              className={`${header.column.columnDef.meta?.align ? textAlignment[header.column.columnDef.meta?.align] : ''} group/th px-3 h-10 align-middle bg-default-100 whitespace-nowrap text-foreground-500 text-tiny font-semibold first:rounded-s-lg last:rounded-e-lg data-[sortable=true]:cursor-pointer data-[hover=true]:text-foreground-400 outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-start`}
+                              className={`${header.column.columnDef.meta?.className ? header.column.columnDef.meta?.className : ''} group/th px-3 h-10 align-middle whitespace-nowrap text-foreground-500 text-tiny font-semibold ${headerGroupIndex === 0 ? 'first:rounded-tl-lg last:rounded-tr-lg' : ''} ${headerGroupIndex === table.getHeaderGroups().length - 1 ? 'first:rounded-bl-lg last:rounded-br-lg' : ''} data-[sortable=true]:cursor-pointer data-[hover=true]:text-foreground-400 outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-start`}
                               colSpan={header.colSpan}
                               key={header.id}
                             >
                               {header.isPlaceholder ? null : (
-                                <div>
+                                <div className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
                                   {flexRender(
                                     header.column.columnDef.header,
                                     header.getContext()
@@ -566,13 +564,15 @@ const Logbook: React.FC<unknown> = () => {
                             {row.getVisibleCells().map((cell) => {
                               return (
                                 <td
-                                  className={`${cell.column.columnDef.meta?.align ? textAlignment[cell.column.columnDef.meta?.align] : ''} py-2 px-3 relative align-middle whitespace-normal text-small font-normal [&>*]:z-1 [&>*]:relative outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 before:pointer-events-none before:content-[''] before:absolute before:z-0 before:inset-0 before:opacity-0 data-[selected=true]:before:opacity-100 group-data-[disabled=true]/tr:text-foreground-300 group-data-[disabled=true]/tr:cursor-not-allowed before:bg-default/60 data-[selected=true]:text-default-foreground first:before:rounded-s-lg last:before:rounded-e-lg text-start`}
+                                  className={`py-2 px-3 relative align-middle whitespace-normal text-small font-normal [&>*]:z-1 [&>*]:relative outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 before:pointer-events-none before:content-[''] before:absolute before:z-0 before:inset-0 before:opacity-0 data-[selected=true]:before:opacity-100 group-data-[disabled=true]/tr:text-foreground-300 group-data-[disabled=true]/tr:cursor-not-allowed before:bg-default/60 data-[selected=true]:text-default-foreground first:before:rounded-s-lg last:before:rounded-e-lg text-start`}
                                   key={cell.id}
                                 >
+                                  <div className={`${cell.column.columnDef.meta?.align ? cell.column.columnDef.meta?.align : ''}`}>
                                     {flexRender(
                                       cell.column.columnDef.cell,
                                       cell.getContext()
                                     )}
+                                  </div>
                                 </td>
                               );
                             })}
@@ -581,7 +581,7 @@ const Logbook: React.FC<unknown> = () => {
                       })}
                     </>
                   </tbody>
-                  <thead className='[&>tr]:first:rounded-lg'>
+                  <thead className='[&>tr]:first:rounded-lg bg-base-200'>
                     {table.getFooterGroups().map((footerGroup, index) => {
                       if (index === 0) {
                         return (
@@ -591,14 +591,16 @@ const Logbook: React.FC<unknown> = () => {
                                 <td
                                   className='group/th px-3 h-10 align-middle bg-default-100 whitespace-nowrap text-foreground-500 text-tiny font-semibold first:rounded-s-lg last:rounded-e-lg data-[sortable=true]:cursor-pointer data-[hover=true]:text-foreground-400 outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-start'
                                   key={header.id}
-                                  align={header.column.columnDef.meta?.align}
                                 >
+                                  <div className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
                                     {header.isPlaceholder
                                       ? null
                                       : flexRender(
                                           header.column.columnDef.footer,
                                           header.getContext()
-                                      )}
+                                        )
+                                      }
+                                  </div>
                                 </td>
                               );
                             })}
@@ -641,14 +643,6 @@ const Logbook: React.FC<unknown> = () => {
           title="Confirm Delete"
         />
       )}
-      {/* {state.isTracksOpen && 
-        <LogTracks
-          isDrawerOpen={state.isTracksOpen}
-          mode={state.tracksMode}
-          onOpenClose={(mode) => onOpenCloseTracks(mode)}
-          selectedLogId={logbookContext.state.selectedLogId}
-        />
-      } */}
     </>
   );
 };

client/src/components/logbook/columns.tsx

@@ -48,7 +48,8 @@ const route: ColumnDef<LogbookEntry> = {
   id: 'route',
   header: 'Route of Flight',
   meta: {
-    headerAlign: 'center'
+    headerAlign: 'text-center',
+    className: 'border-l border-base-400'
   },
   columns: [
     {
@@ -68,8 +69,8 @@ const durationOfFlight: ColumnDef<LogbookEntry> = {
   accessorKey: 'durationOfFlight',
   header: 'Duration Of Flight',
   meta: {
-    align: 'right',
-    headerAlign: 'right'
+    align: 'text-right',
+    headerAlign: 'text-right'
   },
   cell: (info: CellContext<LogbookEntry, unknown>) =>
     info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
@@ -106,8 +107,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
     accessorKey: 'singleEngineLand',
     header: 'Single Engine Land',
     meta: {
-      align: 'right',
-      headerAlign: 'right'
+      align: 'text-right',
+      headerAlign: 'text-right'
     },
     cell: (info: CellContext<LogbookEntry, unknown>) =>
       info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
@@ -117,7 +118,7 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
     id: 'landings',
     header: 'Landings',
     meta: {
-      headerAlign: 'center'
+      headerAlign: 'text-center'
     },
     columns: [
       {
@@ -126,8 +127,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Day',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         }
       },
       {
@@ -136,8 +137,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Night',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         }
       }
     ]
@@ -146,7 +147,7 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
     id: 'instrument',
     header: 'Instrument',
     meta: {
-      headerAlign: 'center'
+      headerAlign: 'text-center'
     },
     columns: [
       {
@@ -155,8 +156,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Actual',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         },
         cell: (info: CellContext<LogbookEntry, unknown>) =>
           info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
@@ -167,8 +168,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Simulated',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         },
         cell: (info: CellContext<LogbookEntry, unknown>) =>
           info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -179,8 +180,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Approaches',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         }
       },
       {
@@ -189,8 +190,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Holds',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         }
       },
       {
@@ -199,8 +200,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Nav/Track',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         }
       }
     ]
@@ -209,7 +210,7 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
     id: 'experienceTraining',
     header: 'Type of pilot experience or training',
     meta: {
-      headerAlign: 'center'
+      headerAlign: 'text-center'
     },
     columns: [
       {
@@ -218,8 +219,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Ground Training Received',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         },
         cell: (info: CellContext<LogbookEntry, unknown>) =>
           info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -230,8 +231,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Flight Training Received',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         },
         cell: (info: CellContext<LogbookEntry, unknown>) =>
           info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -242,8 +243,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Cross Country',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         },
         cell: (info: CellContext<LogbookEntry, unknown>) =>
           info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -254,8 +255,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Night',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         },
         cell: (info: CellContext<LogbookEntry, unknown>) =>
           info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -266,8 +267,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Solo',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         },
         cell: (info: CellContext<LogbookEntry, unknown>) =>
           info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
@@ -278,8 +279,8 @@ export const authColumns: ColumnDef<LogbookEntry>[] = [
         header: 'Pilot In Command',
         footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
         meta: {
-          align: 'right',
-          headerAlign: 'right'
+          align: 'text-right',
+          headerAlign: 'text-right'
         },
         cell: (info: CellContext<LogbookEntry, unknown>) =>
           info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''

client/src/components/logbookCard/LogbookCard.tsx

@@ -1,4 +1,3 @@
-import { Accordion, AccordionItem, Card, CardBody, CardHeader } from '@heroui/react'
 import { LogbookCardProps } from "./LogbookCardProps.interface";
 import TrackMap from "../trackMap/TrackMap";
 
@@ -10,12 +9,10 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
         const formattedDate: string = `${date.getMonth()}/${date.getDate()}/${date.getFullYear()}`;
 
         return (
+          <div className='card bg-base-100 border border-base-300 p-2'>
+            <div className='card-body' key={log.id}>
+              <h2 className='card-title font-bold text-2xl'>{formattedDate}</h2>
               <div>    
-            <Card className='p-4' key={log.id}>
-              <CardHeader>
-                <h2 className='font-bold text-2xl'>{formattedDate}</h2>
-              </CardHeader>
-              <CardBody>    
                 {mode === 'flights' && log.tracks && log.tracks.length > 0 &&
                   <div className='mb-5'>
                     <TrackMap
@@ -25,8 +22,11 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
                     />
                   </div>
                 }
-                <Accordion variant='bordered'>
-                  <AccordionItem key='1' title='Details'>
+              </div>
+              <div className='collapse collapse-arrow bg-base-100 border-base-300 border'>
+                <input type='radio' name='details-accordion' />
+                <div className='collapse-title font-semibold'>Details</div>
+                <div className='collapse-content'>
                   <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>
@@ -63,11 +63,9 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
                       </>
                     }
                   </div>
-                  </AccordionItem>
-                </Accordion>
-
-              </CardBody>
-            </Card>
+                </div>
+              </div>
+            </div>
           </div>
         )
       })}

client/src/components/logbookDrawer/LogbookDrawer.tsx

@@ -1,7 +1,7 @@
-import { Alert, Button, Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader, Tab, Tabs } from "@heroui/react";
 import { LogbookDrawerProps } from "./LogbookDrawerProps.interface";
 import LogForm from "../logForm/LogForm";
 import TracksForm from "../tracksForm/TracksForm";
+import Alert from '../alert/Alert';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClock, faMapLocationDot, faSave, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FormProvider, useForm } from "react-hook-form";
@@ -9,10 +9,10 @@ import { FormMode } from "../../enums/formMode";
 import httpClient from "../../httpClient/httpClient";
 import { AxiosError } from "axios";
 import { useLogbookContext } from "../../hooks/logbookContext/UseLogbookContext";
-import { Key, useState } from "react";
+import { useState } from "react";
 
 const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
-  const [activeTab, setActiveTab] = useState<Key>('time');
+  const [activeTab, setActiveTab] = useState<string>('time');
   const defaultValues = {
     pilotId: '',
     date: null,
@@ -63,111 +63,107 @@ const LogbookDrawer = ({ onOpenClose }: LogbookDrawerProps) => {
     } catch (error) {
       const axiosError = error as AxiosError;
 
-      logbookContext.dispatch({ type: 'SET_FORM_ALERT', payload: { severity: 'danger', message: axiosError.message }});
+      logbookContext.dispatch({ type: 'SET_FORM_ALERT', payload: { severity: 'error', message: axiosError.message }});
     } finally {
       logbookContext.dispatch({ type: 'SET_IS_FORM_LOADING', payload: false });
     }
   };
 
-  const onSelectedKeyChanged = (key: React.Key) => {
-    setActiveTab(key)
+  const onSelectedKeyChanged = (tab: string) => {
+    setActiveTab(tab)
   }
 
   return (
-    <Drawer
-      closeButton={
-        <Button isIconOnly>
-          <FontAwesomeIcon icon={faXmark} />
-        </Button>
-      }
-      isOpen={logbookContext.state.isDrawerOpen}
-      onClose={onCancel}
+    <div className='drawer drawer-end'
+      // closeButton={
+      //   <Button isIconOnly>
+      //     <FontAwesomeIcon icon={faXmark} />
+      //   </Button>
+      // }
+      // isOpen={logbookContext.state.isDrawerOpen}
+      // onClose={onCancel}
     >
-      <DrawerContent>
+      <input type='checkbox' className='drawer-toggle' onChange={() => {}} checked={logbookContext.state.isDrawerOpen} />
+      <div className="drawer-side">
+        <label
+          htmlFor='my-drawer-1'
+          aria-label='close-sidebar'
+          className='drawer-overlay'
+        ></label>
+        <div className='menu bg-base-100 text-base-content min-h-full p-4' style={{ width: '25%' }}>
           <FormProvider {...methods}>
             <form className='prose max-w-none' onSubmit={methods.handleSubmit(onSubmit)} style={{ paddingBottom: '50px' }}>
-            <DrawerHeader>
+              <h2>
                 {`${logbookContext.state.formMode.toString().toLowerCase().charAt(0).toUpperCase() + logbookContext.state.formMode.toString().slice(1).toLowerCase()} Entry`}
-            </DrawerHeader>
-            <DrawerBody>
+              </h2>
                 {logbookContext.state.formAlert && (
-                <div className='col-span-12'>
                   <Alert
+                    className='mb-5'
                     onClose={() =>
                       logbookContext.dispatch({ type: 'SET_FORM_ALERT', payload: undefined })
                     }
-                    color={logbookContext.state.formAlert.severity}
-                    title={logbookContext.state.formAlert.message}
-                  />
-                </div>
+                    severity={logbookContext.state.formAlert.severity}
+                  >
+                    {logbookContext.state.formAlert.message}
+                  </Alert>
                 )}
-              <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">
-                      <FontAwesomeIcon icon={faClock} />
-                      <span>Time</span>
-                    </div>
-                  }
-                >
+                <div className='tabs tabs-lift mb-5'>
+                  <label className='tab'>
+                    <input type='radio' name='my_tabs' defaultChecked={true} />
+                    <FontAwesomeIcon className='mr-1'icon={faClock} />
+                    Time
+                  </label>
+                  <div className='tab-content border-base-300 p-6'>
                     <LogForm />
-                </Tab>
-                {logbookContext.state.formMode !== FormMode.ADD &&
-                  <Tab
-                    key='tracks'
-                    title={
-                      <div className="flex items-center space-x-2">
-                        <FontAwesomeIcon icon={faMapLocationDot} />
-                        <span>Tracks</span>
                   </div>
-                    }
-                  >
+                  {logbookContext.state.formMode !== FormMode.ADD &&
+                    <>
+                      <label className='tab'>
+                        <input type='radio' name='my_tabs'/>
+                        <FontAwesomeIcon className='mr-1' icon={faMapLocationDot} />
+                        Tracks
+                      </label>
+                      <div className='tab-content border-base-300 p-6'>
                         <TracksForm />
-                  </Tab>
+                      </div>
+                    </>
                   }
-              </Tabs>
-            </DrawerBody>
+                </div>
                 {activeTab !== 'tracks' &&
-              <DrawerFooter>
+                  <div>
                     <div className='grid grid-cols-12 gap-3'>
                       <div className='col-span-12 justify-self-end self-center'>
-                    <Button
+                        <button
+                          className='btn'
                           disabled={
                             logbookContext.state.isFormDisabled && logbookContext.state.formMode.toString() !== FormMode.VIEW
                               ? logbookContext.state.isFormDisabled
                               : false
                           }
-                      startContent={<FontAwesomeIcon icon={faXmark} />}
-                      onPress={onCancel}
+                          onClick={onCancel}
                         >
+                          <FontAwesomeIcon icon={faXmark} />
                           {logbookContext.state.formMode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
-                    </Button>
+                        </button>
                         {logbookContext.state.formMode.toString() !== FormMode.VIEW && (
-                      <Button
-                        className='ml-[10px]'
-                        color='primary'
+                          <button
+                            className='btn btn-primary ml-2.5'
                             disabled={logbookContext.state.isFormDisabled}
-                        startContent={<FontAwesomeIcon icon={faSave} />}
                             type="submit"
                           >
+                            <FontAwesomeIcon icon={faSave} />
                             Save
-                      </Button>
+                          </button>
                         )}
                       </div>
                     </div>
-              </DrawerFooter>
+                  </div>
                 }
             </form>
           </FormProvider>
-      </DrawerContent>
-    </Drawer>
+        </div>
+        </div>
+    </div>
   )
 }
 

client/src/components/pilotForm/PilotForm.tsx

@@ -1,4 +1,4 @@
-import { Key, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm, Controller, FormProvider } from 'react-hook-form';
 import { IPilotFormProps } from './IPilotFormProps';
 import { AxiosError, AxiosResponse } from 'axios';
@@ -9,7 +9,6 @@ import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsement
 import PilotFormMedical from '../pilotFormMedical/PilotFormMedical';
 import { useOidc } from '../../auth/oidcConfig';
 import httpClient from '../../httpClient/httpClient';
-import { Button, Drawer, DrawerHeader, DrawerContent, DrawerBody, DrawerFooter, Input, Autocomplete, AutocompleteItem, SelectItem, Select } from '@heroui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSave, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { states } from './states';
@@ -45,39 +44,6 @@ const PilotForm: React.FC<IPilotFormProps> = ({
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [isError, setIsError] = useState<boolean>(false);
 
-  const onPeoplePickerSearch = async (
-    value: string
-  ) => {
-    setIsPeoplePickerLoading(true);
-    setPeoplePickerValue(value)
-    
-    try {
-      if (value !== '') {
-        const searchString: string = value;
-        const response: AxiosResponse = await httpClient.get(
-          `api/msgraph/search?search=${searchString}`
-        );
-
-        setPeoplePickerResults(response.data);
-      } else {
-        setPeoplePickerResults([]);
-      }
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setIsPeoplePickerLoading(false);
-    }
-  };
-
-  const onPersonSelected = (userPrincipalName: string) => {
-    const person: Person | undefined = peoplePickerResults.find((person) => person.userPrincipalName === userPrincipalName as string);
-
-    methods.setValue('name', person?.displayName!);
-    methods.setValue('userId', person?.userPrincipalName!);
-    setPeoplePickerValue(person?.displayName!);
-    setPeoplePickerResults([])
-  };
-
   const onCancel = () => {
     methods.reset(defaultValues);
     onOpenClose(FormMode.CANCEL);
@@ -138,43 +104,50 @@ const PilotForm: React.FC<IPilotFormProps> = ({
   }, [pilotId]);
 
   return (
-    <Drawer
-      closeButton={
-        <Button isIconOnly>
-          <FontAwesomeIcon icon={faXmark} />
-        </Button>
-      }
-      isOpen={isDrawerOpen}
-      placement='right'
-      data-testid="pilot-drawer"
-      onClose={onCancel}
-      size='xl'
+    <div className='drawer drawer-end'
+      // closeButton={
+      //   <Button isIconOnly>
+      //     <FontAwesomeIcon icon={faXmark} />
+      //   </Button>
+      // }
+      // isOpen={isDrawerOpen}
+      // placement='right'
+      // data-testid="pilot-drawer"
+      // onClose={onCancel}
+      // size='xl'
     >
-      <DrawerContent>
+      <input type='checkbox' className='drawer-toggle' onChange={() => {}} checked={isDrawerOpen} />
+      <div className='drawer-side'>
+        <label
+          htmlFor='my-drawer-1'
+          aria-label='close-sidebar'
+          className='drawer-overlay'
+        ></label>
+        <div className='menu bg-base-100 text-base-content min-h-full p-4' style={{ width: '25%' }}>
           <FormProvider {...methods}>
             <form className='prose max-w-none' onSubmit={methods.handleSubmit(onSubmit)} style={{ paddingBottom: '50px' }}>
-            <DrawerHeader>
+              <h2>
                 {`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Pilot`}
-            </DrawerHeader>
-            <DrawerBody>
+              </h2>
               <div className='grid grid-cols-12 gap-3'>
                 <div className='col-span-3 self-center'>
-                <h6>Name *</h6>
+                  <span>Name *</span>
                 </div>
                 <div className='col-span-9'>
-                <Autocomplete
-                  inputValue={peoplePickerValue}
-                  isLoading={isPeoplePickerLoading}
-                  items={peoplePickerResults}
-                  onInputChange={onPeoplePickerSearch}
-                  onSelectionChange={(key: Key | null) => onPersonSelected(key as string)}
-                >
-                  {peoplePickerResults.map((person: Person) => (
-                    <AutocompleteItem key={person.userPrincipalName}>
-                      {person.displayName}
-                    </AutocompleteItem>
-                  ))}
-                </Autocomplete>
+                  <Controller
+                    name="name"
+                    control={methods.control}
+                    rules={{ required: 'A name is required' }}
+                    render={({ field: { onChange, value } }) => (
+                      <input
+                        type='text'
+                        className='input w-full'
+                        disabled={isDisabled}
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
+                  />
                 </div>
                 {isUserLoggedIn &&
                   <>
@@ -187,15 +160,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                         control={methods.control}
                         rules={{ required: 'An address is required' }}
                         render={({ field: { onChange, value } }) => (
-                        <Input
+                          <input
+                            type='text'
+                            className='input w-full'
                             disabled={isDisabled}
-                          color={methods.formState.errors.address ? 'danger' : undefined}
-                          errorMessage={
-                            methods.formState.errors.address
-                              ? methods.formState.errors.address.message
-                              : undefined
-                          }
-                          fullWidth={true}
                             onChange={onChange}
                             value={value}
                           />
@@ -211,15 +179,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                         control={methods.control}
                         rules={{ required: 'A city is required' }}
                         render={({ field: { onChange, value } }) => (
-                        <Input
+                           <input
+                            type='text'
+                            className='input w-full'
                             disabled={isDisabled}
-                          color={methods.formState.errors.city ? 'danger' : undefined}
-                          errorMessage={
-                            methods.formState.errors.city
-                              ? methods.formState.errors.city.message
-                              : undefined
-                          }
-                          fullWidth={true}
                             onChange={onChange}
                             value={value}
                           />
@@ -235,14 +198,15 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                         control={methods.control}
                         rules={{ required: 'A state must be selected' }}
                         render={({ field: { onChange, value } }) => (
-                        <Select
+                          <select
+                            className='select w-full'
                             onChange={onChange}
-                          selectedKeys={[value]}
+                            value={[value]}
                           >
                             {states.map((state) => (
-                            <SelectItem key={state.value}>{state.label}</SelectItem>
+                              <option key={state.value}>{state.label}</option>
                             ))}
-                        </Select>
+                          </select>
                         )}
                       />
                     </div>
@@ -255,15 +219,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                         control={methods.control}
                         rules={{ required: 'A postal code is required' }}
                         render={({ field: { onChange, value } }) => (
-                        <Input
+                          <input
+                            type='text'
+                            className='input w-full'
                             disabled={isDisabled}
-                          color={methods.formState.errors.postalCode ? 'danger' : undefined}
-                          errorMessage={
-                            methods.formState.errors.postalCode
-                              ? methods.formState.errors.postalCode.message
-                              : undefined
-                          }
-                          fullWidth={true}
                             onChange={onChange}
                             value={value}
                           />
@@ -284,15 +243,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                           }
                         }}
                         render={({ field: { onChange, value } }) => (
-                        <Input
+                          <input
+                            type='text'
+                            className='input w-full'
                             disabled={isDisabled}
-                          color={methods.formState.errors.email ? 'danger' : undefined}
-                          errorMessage={
-                            methods.formState.errors.email
-                              ? methods.formState.errors.email.message
-                              : undefined
-                          }
-                          fullWidth={true}
                             onChange={onChange}
                             value={value}
                           />
@@ -313,15 +267,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                           }
                         }}
                         render={({ field: { onChange, value } }) => (
-                        <Input
+                          <input
+                            type='text'
+                            className='input w-full'
                             disabled={isDisabled}
-                          color={methods.formState.errors.phone ? 'danger' : undefined}
-                          errorMessage={
-                            methods.formState.errors.phone
-                              ? methods.formState.errors.phone.message
-                              : undefined
-                          }
-                          fullWidth={true}
                             onChange={onChange}
                             value={value}
                           />
@@ -345,38 +294,39 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                 </Grid> */}
                 {/* <div className='col-span-12 justify-self-end self-center'> */}
 
-              {/* </div> */}
-            </div>
-            </DrawerBody>
-              <DrawerFooter>
-                <Button
+              
+                <div className='col-span-12 justify-self-end self-center'>
+                  <button
+                    className='btn'
                     disabled={
                       isDisabled && mode.toString() !== FormMode.VIEW
                         ? isDisabled
                         : false
                     }
-                  startContent={<FontAwesomeIcon icon={faXmark} />}
-                  onPress={onCancel}
+                    onClick={onCancel}
                     data-testid="pilot-cancel-button"
                   >
+                    <FontAwesomeIcon icon={faXmark} />
                     {mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
-                </Button>
+                  </button>
                   {mode.toString() !== FormMode.VIEW && (
-                  <Button
-                    color='primary'
+                    <button
+                      className='btn btn-primary ml-2.5'
                       disabled={isDisabled}
-                    startContent={<FontAwesomeIcon icon={faSave} />}
                       type="submit"
                       data-testid="pilot-save-button"
                     >
+                      <FontAwesomeIcon icon={faSave} />
                       Save
-                  </Button>
+                    </button>
                   )}
-              </DrawerFooter>
+                </div>
+              </div>
             </form>
           </FormProvider>
-      </DrawerContent>
-    </Drawer>
+        </div>
+      </div>
+    </div>
   );
 };
 

client/src/components/pilots/Pilots.tsx

@@ -10,14 +10,18 @@ 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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEllipsisVertical, faPen, faEye, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons'
+import { faEllipsisVertical, faPen, faEye, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { CellContext, ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
+import { Pilot } from './Pilot.interface';
+import Alert from '../alert/Alert';
+import { useOidc } from '../../auth/oidcConfig';
 
 const Pilots: React.FC<unknown> = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const { userRole } = useUserRole();
-  const { screenSize } = useBreakpoints()
+  const { screenSize } = useBreakpoints();
+  const { isUserLoggedIn } = useOidc();
 
   const getPilots = async () => {
     try {
@@ -27,6 +31,8 @@ const Pilots: React.FC<unknown> = () => {
         `api/pilots`
       );
 
+      console.log(response)
+
       if (response.data.length > 0) {
         dispatch({ type: 'SET_PILOTS', payload: response.data });
 
@@ -34,7 +40,7 @@ const Pilots: React.FC<unknown> = () => {
           dispatch({ type: 'SET_ALERT', payload: undefined })
         }
       } else {
-        dispatch({ type: 'SET_ALERT', payload: { severity: 'default', message: 'No pilots found.' }})
+        dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'No pilots found.' }})
         dispatch({ type: 'SET_PILOTS', payload: [] });
       }
     } catch (error) {
@@ -42,7 +48,7 @@ const Pilots: React.FC<unknown> = () => {
 
       dispatch({
         type: 'SET_ALERT',
-        payload: { severity: 'danger', message: `Loading of pilots failed with the following message: ${axiosError.message}`}
+        payload: { severity: 'error', message: `Loading of pilots failed with the following message: ${axiosError.message}`}
       })
     } finally {
       dispatch({ type: 'SET_IS_LOADING', payload: false })
@@ -101,7 +107,7 @@ const Pilots: React.FC<unknown> = () => {
 
       dispatch({
         type: 'SET_ALERT',
-        payload: { severity: 'danger', message: `Loading of logbook entries failed with the following message: ${axiosError.message}`}
+        payload: { severity: 'error', message: `Loading of logbook entries failed with the following message: ${axiosError.message}`}
       });
     } finally {
       dispatch({ type: 'SET_IS_CONFIRMATION_DIALOG_LOADING', payload: false });
@@ -115,64 +121,50 @@ const Pilots: React.FC<unknown> = () => {
     });
   };
 
-  const columns = [
+  const columns: ColumnDef<Pilot>[]= [
     {
       id: 'name',
-      name: 'Name'
+      accessorKey: 'name',
+      header: 'Name'
     },
     {
       id: 'actions',
-      name: 'Actions'
+      header: 'Actions',
+      meta: {
+        align: 'text-center',
+        headerAlign: 'text-center'
+      },
+      cell: (info: CellContext<Pilot, unknown>) => {
+        return (
+          <div className='dropdown dropdown-end'>
+            <div tabIndex={0} role='button' className='btn btn-ghost'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
+            <ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm border border-base-300">
+              {isUserLoggedIn && userRole === UserRole.WRITE &&
+                <li><a onClick={() => onOpenClosePilotForm(FormMode.EDIT, info.row.original.id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
+              }
+              <li><a onClick={() => onOpenClosePilotForm(FormMode.VIEW, info.row.original.id)}><FontAwesomeIcon icon={faEye} />View</a></li>
+              {isUserLoggedIn && userRole === UserRole.WRITE &&
+                <li><a onClick={() => onDeletePilot(info.row.original.id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
+              }
+            </ul>
+          </div>
+        )
+      }
     }
   ]
 
-  const renderCell = (pilot: any, columnKey: any) => {
-    const cellValue = pilot[columnKey]
+  const textAlignment = {
+    center: 'text-center',
+    left: 'text-start',
+    right: 'text-end'
+  };
 
-    switch (columnKey) {
-      case 'actions': {
-        return (
-          <Dropdown>
-            <DropdownTrigger>
-              <Button isIconOnly variant='light' 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} />}
-                  >
-                    Delete
-                  </DropdownItem>
-                </DropdownSection>
-            </DropdownMenu>
-          </Dropdown>
-        )
-      }
-      default: {
-        return cellValue
-      }
-    }
-  }
+  const table = useReactTable({
+    data: state.pilots,
+    columns: columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel()
+  });
 
   useEffect(() => {
     if (!state.isFormOpen) {
@@ -188,52 +180,85 @@ const Pilots: React.FC<unknown> = () => {
       </div>
       <div className='col-span-2 justify-self-end self-center'>
         {userRole === UserRole.WRITE &&
-          <Button
-            color='primary'
-            onPress={() => onOpenClosePilotForm(FormMode.ADD)}
-            startContent={<FontAwesomeIcon icon={faPlus} />}
+          <button
+            className='btn btn-primary'
+            onClick={() => onOpenClosePilotForm(FormMode.ADD)}
             data-testid="pilot-add-button"
           >
+            <FontAwesomeIcon icon={faPlus} />
             Add Pilot
-          </Button>
+          </button>
         }
       </div>
       {!state.isLoading && state.alert && (
         <div className='col-span-12'>
           <Alert
+            className='mb-5'
             onClose={() =>
               dispatch({ type: 'SET_ALERT', payload: undefined })
             }
-            color={state.alert.severity}
-            title={state.alert.message}
-          />
+            severity={state.alert.severity}
+          >
+            {state.alert.message}
+          </Alert>
         </div>
       )}
-      <div className='col-span-12'>
+      <div className='col-span-12 bg-base-100 p-5 border border-base-100 rounded-lg'>
         {state.pilots.length > 0 && screenSize !== ScreenSize.SM &&
-          <Table>
-            <TableHeader columns={columns}>
-              {(column) => (
-                <TableColumn
-                  key={column.id}
-                  align={column.id === "actions" ? "center" : "start"}
+          <table className='table min-w-full h-auto table-auto w-full'>
+            <thead className='[&>tr]:first:rounded-lg bg-base-200'>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr  className='group/tr outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2' key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <th
+                        className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''} group/th px-3 h-10 align-middle bg-default-100 whitespace-nowrap text-foreground-500 text-tiny font-semibold rounded data-[sortable=true]:cursor-pointer data-[hover=true]:text-foreground-400 outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-start`}
+                        colSpan={header.colSpan}
+                        key={header.id}
                       >
-                  {column.name}
-                </TableColumn>
+                        {header.isPlaceholder ? null : (
+                          <div>
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
                             )}
-            </TableHeader>
-            <TableBody items={state.pilots}>
-              {(item) => (
-                <TableRow key={item.id}>
-                  {(columnKey => (
-                    <TableCell>
-                      {renderCell(item, columnKey)}
-                    </TableCell>
+                            {/* {header.column.getCanFilter() ? (
+                              <div>
+                                <Filter column={header.column} table={table} />
+                              </div>
+                            ) : null} */}
+                          </div>
+                        )}
+                      </th>
+                    );
+                  })}
+                </tr>
               ))}
-                </TableRow>
+            </thead>
+            <tbody>
+              <>
+                {table.getRowModel().rows.map((row) => {
+                  return (
+                    <tr className='group/tr outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2' key={row.id}>
+                      {row.getVisibleCells().map((cell) => {
+                        return (
+                          <td
+                            className={`${cell.column.columnDef.meta?.align ? cell.column.columnDef.meta?.align  : ''} py-2 px-3 relative align-middle whitespace-normal text-small font-normal [&>*]:z-1 [&>*]:relative outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 before:pointer-events-none before:content-[''] before:absolute before:z-0 before:inset-0 before:opacity-0 data-[selected=true]:before:opacity-100 group-data-[disabled=true]/tr:text-foreground-300 group-data-[disabled=true]/tr:cursor-not-allowed before:bg-default/60 data-[selected=true]:text-default-foreground first:before:rounded-s-lg last:before:rounded-e-lg text-start`}
+                            key={cell.id}
+                          >
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
                             )}
-            </TableBody>
-          </Table>
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })}
+              </>
+            </tbody>
+          </table>
         }
         {state.pilots.length > 0 && screenSize === ScreenSize.SM &&
           <PilotCard pilots={state.pilots} onDelete={onDeletePilot} onOpenCloseForm={onOpenClosePilotForm} />

client/src/components/siteNav/SiteNav.tsx

@@ -3,17 +3,18 @@ import { useAppContext } from '../../hooks/appContext/UseAppContext';
 import { AxiosResponse } from 'axios';
 import { User } from '@microsoft/microsoft-graph-types';
 import { useOidc } from '../../auth/oidcConfig';
-import { Avatar, Button, Link, Navbar, NavbarBrand, NavbarContent, NavbarItem, DropdownTrigger, DropdownMenu, DropdownItem, Dropdown } from '@heroui/react';
 import httpClient from '../../httpClient/httpClient'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlane, faSignIn, faSignOut } from '@fortawesome/free-solid-svg-icons'
-import { useLocation } from 'react-router-dom';
+import { faBars, faPlane, faSignIn, faSignOut } from '@fortawesome/free-solid-svg-icons'
+import { NavLink, useLocation } from 'react-router-dom';
+import { useBreakpoints } from '../../hooks/useBreakpoints/UseBreakpoints';
+import { ScreenSize } from '../../enums/screenSize';
 
 const SiteNav = () => {
   const [userPhoto, setUserPhoto] = useState<string>();
   const appContext = useAppContext();
+  const { screenSize } = useBreakpoints();
   const { isUserLoggedIn, logout, login } = useOidc()
-  const { pathname } = useLocation()
   const pages = [
     {
       name: 'Flights',
@@ -53,13 +54,39 @@ const SiteNav = () => {
     }
   };
 
+  const Brand = () => {
+    return (
+      <>
+        <img
+          className='mr-1'
+          height={35}
+          width={35}
+          src='noahspan-logo.png'
+        />
+        <FontAwesomeIcon className='mt-1' icon={faPlane} size='2x' />
+       </>
+    )
+  }
+
+  const Links = () => {
+    return (
+      <>
+        {pages.map((page) => {
+          return (
+            <li><NavLink to={page.path}>{page.name}</NavLink></li>
+          )
+        })}
+      </>
+    )
+  }
+
   useEffect(() => {
     const setUserProfile = async () => {
       try {
         const userProfile = await getUserProfile();
-        const userPhoto = await getUserPhoto();
+        // const userPhoto = await getUserPhoto();
 
-        setUserPhoto(userPhoto);
+        // setUserPhoto(userPhoto);
 
         appContext.dispatch({
           type: 'SET_USER_PROFILE',
@@ -78,54 +105,67 @@ const SiteNav = () => {
     }
   }, [isUserLoggedIn]);
 
+  useEffect(() => {
+    console.log(screenSize)
+  }, [screenSize])
+
   return (
-    <Navbar isBordered maxWidth='full' position='static'>
-      <NavbarContent>
-        <NavbarBrand>
-          <img
-            height={35}
-            width={35}
-            src='noahspan-logo.png'
-            style={{ marginRight: '5px' }}
-          />
-          <FontAwesomeIcon icon={faPlane} size='2x' />
-        </NavbarBrand>
-      </NavbarContent>
-      <NavbarContent justify='center'>
-        {pages.length > 0 && pages.map((page, index) => {
-          return (
-            <NavbarItem isActive={pathname === page.path ? true : false} key={index}>
-              <Link color={pathname === page.path ? 'primary' : 'foreground'} href={page.path}>
-                {page.name}
-              </Link>
-            </NavbarItem>
-          )
-        })}
-      </NavbarContent>
-      <NavbarContent justify='end'>
+    <div className="navbar bg-base-100 shadow-sm w-full">
+      <div className={`navbar-start ${screenSize !== ScreenSize.SM && screenSize !== ScreenSize.MD ? 'ml-8' : ''}`}>
+        {screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? ( 
+          <div className="dropdown">
+            <div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
+              <FontAwesomeIcon icon={faBars} size='xl' />
+            </div>
+            <ul
+              tabIndex={-1}
+              className="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
+              <Links />
+            </ul>
+          </div>
+        ) : (
+          <Brand />
+        )}
+      </div>
+      <div className="navbar-center">
+        <ul className="menu menu-horizontal px-1">
+          {screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? (
+            <Brand />
+          ) : (
+            <Links />
+          )}
+        </ul>
+      </div>
+      <div className={`navbar-end ${screenSize !== ScreenSize.SM && screenSize !== ScreenSize.MD ? 'ml-8' : ''}`}>
         {!isUserLoggedIn &&
-          <Button
-            color='default'
-            onPress={() => login()}
-            startContent={<FontAwesomeIcon icon={faSignIn} />}
-          >
-            Sign In
-          </Button>
+          <button className='btn btn-ghost' onClick={() => login()}><FontAwesomeIcon icon={faSignIn} />Sign In</button>
         }
         {isUserLoggedIn &&
-          <Dropdown>
-            <DropdownTrigger>
-              <Avatar name={appContext.state.userProfile.displayName?.toString()} src={userPhoto}></Avatar>
-            </DropdownTrigger>
-            <DropdownMenu>
-              <DropdownItem key='signout' onPress={() => logout({redirectTo: 'specific url', url: '/'})} startContent={<FontAwesomeIcon icon={faSignOut} />}>
-                Sign Out
-              </DropdownItem>
-            </DropdownMenu>
-          </Dropdown>
+          <div className='dropdown dropdown-end'>
+            <div tabIndex={0} role='button'>
+              <div className={`avatar ${userPhoto ? userPhoto : 'avatar-placeholder'}`}>
+                {userPhoto &&
+                  <div className='w-12 rounded-full'>
+                    <img src={userPhoto} />
+                  </div>
                 }
-      </NavbarContent>
-    </Navbar>
+                {!userPhoto &&
+                  <div className='bg-neutral text-neutral-content w-10 rounded-full'>
+                    <span>NS</span>
+                  </div>
+                }
+              </div>
+            </div>
+            <ul
+              tabIndex={0}
+              className='dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm border border-base-300'
+            >
+              <li><a onClick={() => logout({redirectTo: 'specific url', url: '/'})}><FontAwesomeIcon icon={faSignOut} />Sign Out</a></li>
+            </ul>
+          </div>
+        }
+      </div>
+    </div>
   );
 };
 

client/src/components/trackMap/TrackMap.css

@@ -1,53 +0,0 @@
-#app {
-  height: 100%;
-}
-html,
-body {
-  position: relative;
-  height: 100%;
-}
-
-body {
-  background: #eee;
-  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  color: #000;
-  margin: 0;
-  padding: 0;
-}
-
-.swiper {
-  width: 100%;
-  height: 100%;
-}
-
-.swiper-wrapper {
-  margin-bottom: 20px;
-}
-
-.swiper-slide {
-  text-align: center;
-  font-size: 18px;
-  background: #fff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.swiper-slide img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.swiper-pagination-bullet {
-  background-color: #000000;
-  height: 13px;
-  width: 13px;
-  border: 2px solid #FFFFFF;
-}
-
-.swiper-pagination-bullet-active {
-  box-shadow: 0 0 0 1px #000000;
-}

client/src/components/trackMap/TrackMap.tsx

@@ -4,10 +4,6 @@ import { AxiosInstance, AxiosResponse } from 'axios';
 import { useAuth } from 'react-oidc-context'
 import { MapContainer, TileLayer } from 'react-leaflet';
 import ReactLeafletKml from 'react-leaflet-kml';
-import 'swiper/css';
-import 'swiper/css/pagination';
-import 'swiper/css';
-import './TrackMap.css';
 import 'leaflet/dist/leaflet.css';
 import httpClient from '../../httpClient/httpClient'
 
@@ -41,7 +37,7 @@ const TrackMap = ({ height, logId, tracks }: TrackMapProps) => {
       center={[45.14489, -93.21019]} 
       scrollWheelZoom={false}
       style={{ height: height, width: '100%' }}
-      zoom={8}
+      zoom={7}
     >
       <Suspense>
         <TileLayer

client/src/components/tracksForm/TracksForm.tsx

@@ -7,7 +7,6 @@ import ConfirmationDialog from "../confirmationDialog/ConfirmationDialog";
 import { initialState, reducer } from "./reducer";
 import TrackMap from "../trackMap/TrackMap";
 import httpClient from "../../httpClient/httpClient";
-import { Button, Input, Spinner } from '@heroui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUpload, faTrash, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { useLogbookContext } from "../../hooks/logbookContext/UseLogbookContext";
@@ -28,7 +27,7 @@ const TracksForm = () => {
     } catch (error) {
       const axiosError = error as AxiosError;
 
-      logbookContext.dispatch({ type: 'SET_FORM_ALERT', payload: { severity: 'danger', message: axiosError.message }})
+      logbookContext.dispatch({ type: 'SET_FORM_ALERT', payload: { severity: 'error', message: axiosError.message }})
     }
   }
 
@@ -108,11 +107,6 @@ const TracksForm = () => {
 
   return (
     <div className='grid grid-cols-12 gap-3'>
-      {state.tracks.length > 0 && 
-        <div className="col-span-12">
-          <TrackMap height='400px' logId={logbookContext.state.selectedLogId!} tracks={state.tracks} />
-        </div>
-      }
       <>
         {state.tracks.length > 0 && state.tracks.map((track, index) => {
           const filename: string = track.url.substring(track.url.lastIndexOf('/') + 1);
@@ -120,26 +114,25 @@ const TracksForm = () => {
           return (
             <>
               <div className='col-span-10'>
-                <Input isDisabled={state.isDisabled} key={index} type='text' value={filename}/>
+                <input className='input w-full' disabled={state.isDisabled} key={index} readOnly 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>
+                <button className='btn w-full' disabled={state.isDisabled} key={index} onClick={() => onDeleteTrack(track.id, filename, index)}><FontAwesomeIcon icon={faTrash} /></button>
               </div>
             </>
           )
         })}
+        {logbookContext.state.formMode === FormMode.ADD &&
           <div className='col-span-12'>
-          <Button
-            as='label'
-            color='primary'
-            isDisabled={state.isDisabled}
-            fullWidth={true}
-            startContent={<FontAwesomeIcon icon={faUpload} />}
+            <label
+              className='btn cursor-pointer w-full'
             >
+              <FontAwesomeIcon icon={faUpload} />
               Upload Track
-            <input hidden onChange={handleFileUpload} type='file' />
-          </Button>
+              <input className='hidden' id='track-upload' onChange={handleFileUpload} type='file' />
+            </label>
           </div>
+        }
         {state.isConfirmDialogOpen && (
           <ConfirmationDialog
             contentText="Are you sure you want to delete this track?"

client/src/enums/screenSize.ts

@@ -1,7 +1,7 @@
 export enum ScreenSize {
-  SM,
-  MD,
-  LG,
-  XL,
-  XXL
+  SM = 'SM',
+  MD = 'MD',
+  LG = 'LG',
+  XL = 'XL',
+  XXL = 'XXL'
 }

client/src/hero.ts

@@ -1,3 +0,0 @@
-// hero.ts
-import { heroui } from "@heroui/react";
-export default heroui();

client/src/hooks/useBreakpoints/UseBreakpoints.tsx

@@ -14,17 +14,17 @@ export const useBreakpoints = () => {
 
         break;
       }
-      case width >= 640: {
+      case width >= 640 && width < 1024: {
         size = ScreenSize.MD;
 
         break;
       }
-      case width >= 1024: {
+      case width >= 1024 && width < 1280: {
         size = ScreenSize.LG
 
         break;
       }
-      case width >= 1280: {
+      case width >= 1280 && width < 1536: {
         size = ScreenSize.XL;
 
         break;

client/src/httpClient/httpClient.ts

@@ -15,7 +15,7 @@ httpClient.interceptors.request.use(async (config) => {
 
   if (oidc.isUserLoggedIn) {
     const { accessToken } = await oidc.getTokens();
-
+    console.log(accessToken)
     config.headers.Authorization = `Bearer ${accessToken}`;
   }
 

client/src/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Flying</title>
   </head>
-  <body>
+  <body style="background-color: #f5f5f5;">
     <div id="root"></div>
   </body>
 </html>

client/src/interfaces/Alert.interface.ts

@@ -1,4 +1,4 @@
 export interface Alert {
-  severity: 'danger' | 'default' | 'success' | 'warning';
+  severity: 'info' | 'error' | 'success' | 'warning';
   message: string;
 }

client/src/styles.css

@@ -1,15 +1,42 @@
 @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 "daisyui";
+@plugin "daisyui/theme" {
+  name: "lofi";
+  default: true;
+  prefersdark: false;
+  color-scheme: "light";
+  --color-base-100: oklch(100% 0 0);
+  --color-base-200: oklch(97% 0 0);
+  --color-base-300: oklch(94% 0 0);
+  --color-base-content: oklch(0% 0 0);
+  --color-primary: oklch(15.906% 0 0);
+  --color-primary-content: oklch(100% 0 0);
+  --color-secondary: oklch(21.455% 0.001 17.278);
+  --color-secondary-content: oklch(100% 0 0);
+  --color-accent: oklch(26.861% 0 0);
+  --color-accent-content: oklch(100% 0 0);
+  --color-neutral: oklch(0% 0 0);
+  --color-neutral-content: oklch(100% 0 0);
+  --color-info: oklch(79.54% 0.103 205.9);
+  --color-info-content: oklch(15.908% 0.02 205.9);
+  --color-success: oklch(90.13% 0.153 164.14);
+  --color-success-content: oklch(18.026% 0.03 164.14);
+  --color-warning: oklch(88.37% 0.135 79.94);
+  --color-warning-content: oklch(17.674% 0.027 79.94);
+  --color-error: oklch(78.66% 0.15 28.47);
+  --color-error-content: oklch(15.732% 0.03 28.47);
+  --radius-selector: 0.5rem;
+  --radius-field: 0.5rem;
+  --radius-box: 0.5rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
 @plugin "@tailwindcss/typography";
 
-@theme inline {
-  --color-primary: #000000;
+body {
+  background-color: #f5f5f5;
+  min-height: 100vh;
 }
-
-
-
-
-

client/src/tanstack.d.ts

@@ -3,8 +3,9 @@ import '@tanstack/react-table';
 /* eslint-disable */
 declare module '@tanstack/react-table' {
   interface ColumnMeta<TData extends RowData, TValue> {
-    align?: 'left' | 'center' | 'right';
-    headerAlign?: 'left' | 'center' | 'right';
+    align?: 'text-left' | 'text-center' | 'text-right';
+    className?: string;
+    headerAlign?: 'text-left' | 'text-center' | 'text-right';
   }
 }
 /* eslint-enable */

client/src/vite-env.d.ts

@@ -5,6 +5,7 @@ interface ImportMetaEnv {
   readonly VITE_CLIENT_ID: string;
   readonly VITE_ISSUER_URI: string;
   readonly VITE_TENANT_ID: string;
+  readonly VITE_USERINFO_ENDPOINT: string;
 }
 
 interface ImportMeta {

infrastructure/container_app.tf

@@ -74,6 +74,16 @@ resource "azurerm_container_app" "container_app" {
         secret_name = "azure-storage-connection-string"
       }
 
+      env {
+        name = "AUTHORITY"
+        value = var.AUTHORITY
+      }
+
+      env {
+        name = "AUDIENCE"
+        value = var.CLIENT_ID
+      }
+
       env {
         name = "CLIENT_ID"
         value = var.CLIENT_ID
@@ -84,6 +94,16 @@ resource "azurerm_container_app" "container_app" {
         secret_name = "client-secret"
       }
 
+      env {
+        name = "ISSUER_URL"
+        value = var.ISSUER_URL
+      }
+
+      env {
+        name = "JWKS_URI"
+        value = var.JWKS_URI
+      }
+
       env {
         name = "TENANT_ID"
         value = var.EXTERNAL_TENANT_ID

infrastructure/variables.tf

@@ -1,3 +1,6 @@
+variable "AUTHORITY" {
+  type = string
+}
 
 variable "CLIENT_ID" {
   type = string
@@ -17,6 +20,14 @@ variable "DOCKER_IO_USERNAME" {
   type = string
 }
 
+variable "ISSUER_URL" {
+  type = string
+}
+
+variable "JWKS_URI" {
+  type = string
+}
+
 variable "RESOURCE_GROUP_NAME" {
   type = string
 }

package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
+    "daisyui": "^5.5.5",
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-react-hooks": "^4.6.0",