updataing tag github actions workflow

* adding daisyui

* adding daisy ui

* switching to daisy ui

* switching to daisy ui

* adding daisy ui

* adding daisy ui

* updating docker compose

.github/workflows/build.yaml

@@ -39,7 +39,14 @@ jobs:
           npm run build -w api
 
       - name: Build Client
+        env:
+          VITE_API_URL: ${{ vars.VITE_API_URL }}
+          VITE_BASE_URL: ${{ vars.VITE_BASE_URL }}
+          VITE_CLIENT_ID: ${{ vars.VITE_CLIENT_ID }}
+          VITE_ISSUER_URI: ${{ vars.VITE_ISSUER_URI }}
+          VITE_TENANT_ID: ${{ vars.VITE_TENANT_ID }}
         run: |
+          printenv
           npm run build -w client
 
       - name: Log into Docker Hub

.github/workflows/main.yaml

@@ -9,7 +9,7 @@ jobs:
     uses: ./.github/workflows/changes.yaml
 
   build:
-    if: ${{ needs.changes.outputs.app == 'true' || needs.changes.outputs.client == 'true' }}
+    if: ${{ needs.changes.outputs.api == 'true' || needs.changes.outputs.client == 'true' }}
     name: build
     needs:
       - changes

.github/workflows/tag.yaml

@@ -2,7 +2,7 @@ name: Tag
 on:
   push:
     tags:
-      - 'v[0-9]+.[0-9]+.[0-9]+'
+      - '**'
 
 jobs:
   build:

Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=linux/amd64 node:22-slim
+FROM node:22
 
 WORKDIR app
 COPY ./api/dist ./api/dist
@@ -9,10 +9,8 @@ WORKDIR api
 RUN npm ci
 
 WORKDIR /
-COPY ./api/entrypoint.sh ./entrypoint.sh
-RUN chmod +x entrypoint.sh
 
 EXPOSE 3000
 
-ENTRYPOINT ["/entrypoint.sh"]
+CMD ["node", "./app/api/dist/main.js"]
 # ENTRYPOINT ["tail", "-f", "/dev/null"]

api/entrypoint.sh

@@ -1,3 +0,0 @@
-#!/bin/bash
-npx typeorm migration:run -d ./app/api/dist/database/data-source.js
-node ./app/api/dist/main.js

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "2.0.0-alpha-3",
+  "version": "2.0.0-beta-1",
   "description": "",
   "author": "",
   "private": true,
@@ -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

@@ -37,6 +37,7 @@ import { join } from 'path';
       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')

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/database/data-source.ts

@@ -11,7 +11,8 @@ export const dataSourceOptions: DataSourceOptions = {
   database: configService.get<string>('DB_PATH'),
   entities: ['../**/*.entity.js'],
   migrations: ['./migrations/*.js'],
-  synchronize: configService.get<boolean>('DB_SYNC')
+  synchronize: configService.get<boolean>('DB_SYNC'),
+  migrationsRun: true
 }
 
 const dataSource = new DataSource(dataSourceOptions);

api/src/interfaces/customJwtPayload.interface.ts

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

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/log/log.interceptor.ts

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

api/src/main.ts

@@ -9,16 +9,12 @@ async function bootstrap() {
   const httpService = new HttpService();
   const app = await NestFactory.create(AppModule);
 
-  app.enableCors({
-    origin: 'http://localhost:8080', // Allow requests from your frontend's origin
-    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
-    credentials: true, // If you need to send cookies or authorization headers
-  });
+  app.enableCors();
   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

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

client/README.md

@@ -1 +0,0 @@
-BLAH BLAH

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "2.0.0-alpha-3",
+  "version": "2.0.0-beta-1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,15 +14,11 @@
     "@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",
-    "daisyui": "^5.1.10",
     "dotenv": "^16.4.7",
-    "framer-motion": "^12.23.24",
     "leaflet": "^1.9.4",
     "oidc-spa": "^7.2.4",
     "react": "^19.1.1",

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

@@ -1,11 +1,11 @@
 import { createReactOidc } from "oidc-spa/react";
 
 export const { OidcProvider, useOidc, getOidc } = createReactOidc(async () => ({
-  issuerUri: `https://login.microsoftonline.com/${import.meta.env.VITE_TENANT_ID}/v2.0`,
+  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
+  noIframe: true,
 }));

client/src/components/actionMenu/ActionMenu.tsx

@@ -1,93 +0,0 @@
-import { useState } from 'react';
-import { IActionMenuProps } from './IActionMenuProps';
-import {
-  IconButton,
-  Icon,
-  IconName,
-  Dropdown
-} from '@noahspan/noahspan-components';
-import { FormMode } from '../../enums/formMode';
-import { useAuth } from 'react-oidc-context';
-
-const ActionMenu = ({ id, onDelete, onOpenCloseForm, onOpenCloseTracks }: IActionMenuProps) => {
-  // const [anchorElAction, setAnchorElAction] = useState<null | HTMLElement>(
-  //   null
-  // );
-  // const auth = useAuth();
-
-  // const onOpenActionMenu = (event: React.MouseEvent<HTMLElement>) => {
-  //   setAnchorElAction(event.currentTarget);
-  // };
-
-  // const onCloseActionMenu = () => {
-  //   setAnchorElAction(null);
-  // };
-
-  const options = [
-    'Item 1',
-    'Item 2'
-  ]
-
-  return (
-    <>
-      <Dropdown
-        onOptionSelected={() => console.log('clicked!')}
-        options={options}
-      >
-        <IconButton>
-          <Icon className='text-2xl' iconName={IconName.ELLIPSIS_VERTICAL} />
-        </IconButton>
-      </Dropdown>
-    </>
-    // <div>
-    //   <IconButton onClick={onOpenActionMenu}>
-    //     <Icon iconName={IconName.ELLIPSIS_VERTICAL} size="sm" />
-    //   </IconButton>
-    //   <Menu
-    //     anchorEl={anchorElAction}
-    //     keepMounted
-    //     open={Boolean(anchorElAction)}
-    //     onClose={onCloseActionMenu}
-    //   >
-    //     {auth.isAuthenticated &&
-    //     <>
-    //       <MenuItem onClick={() => onOpenCloseForm(FormMode.EDIT, id)}>
-    //         <ListItemIcon>
-    //           <Icon iconName={IconName.PEN} size="lg" />
-    //         </ListItemIcon>
-    //         <ListItemText>Edit</ListItemText>
-    //       </MenuItem>
-    //       {onOpenCloseTracks &&
-    //         <MenuItem onClick={() => onOpenCloseTracks!(FormMode.EDIT, id)}>
-    //           <ListItemIcon>
-    //             <Icon iconName={IconName.MAP_LOCATION_DOT} size="lg" />
-    //           </ListItemIcon>
-    //           <ListItemText>Tracks</ListItemText>
-    //         </MenuItem>
-    //       }
-    //     </>
-
-    //     }
-    //     <MenuItem onClick={() => onOpenCloseForm(FormMode.VIEW, id)}>
-    //       <ListItemIcon>
-    //         <Icon iconName={IconName.EYE} size="lg" />
-    //       </ListItemIcon>
-    //       <ListItemText>View</ListItemText>
-    //     </MenuItem>
-    //     {auth.isAuthenticated &&
-    //       <>
-    //         <hr className="my-3" />
-    //         <MenuItem onClick={() => onDelete(id)}>
-    //           <ListItemIcon>
-    //             <Icon iconName={IconName.TRASH} size="lg" />
-    //           </ListItemIcon>
-    //           <ListItemText>Delete</ListItemText>
-    //         </MenuItem>
-    //       </>    
-    //     }
-    //   </Menu>
-    // </div>
-  );
-};
-
-export default ActionMenu;

client/src/components/actionMenu/IActionMenuProps.tsx

@@ -1,8 +0,0 @@
-import { FormMode } from '../../enums/formMode';
-
-export interface IActionMenuProps {
-  id: string;
-  onDelete: (entryId: string) => void;
-  onOpenCloseForm: (formMode: FormMode, id: string) => void;
-  onOpenCloseTracks?: (formMode: FormMode, id: string) => void;
-}

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

@@ -1,13 +1,3 @@
-// import {
-//   Button,
-//   Dialog,
-//   DialogActions,
-//   DialogContent,
-//   Icon,
-//   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 +11,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} />}>
-            No
-          </Button>
-          <Button
-            color='primary'
-            onPress={onConfirm}
-            startContent={<FontAwesomeIcon icon={faCircleCheck} />}
-          >
-            Yes
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+    <>
+      <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 className='btn btn-primary' onClick={onConfirm}>
+              <FontAwesomeIcon icon={faCircleCheck} />
+              Yes
+            </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,26 +48,14 @@ const Flights = () => {
           <LogbookCard logs={state.flights} mode='flights' />
         </div>
       }
-      {logsLoading && [...Array(6)].map((_element, index) => {
+      {logsLoading && [...Array(5)].map((_element, index) => {
         return (
-          <div className='mb-5'>
-            <Card
-              key={index}
-            >
-              <div className='p-5'>
-                  <div className='mb-2'><Skeleton height='h-[60px]' width='w-[200px]' /></div>
-                  <div className='mb-2'><Skeleton height='h-[30px]' width='w-[200px]' /></div>
-                  <div className='mb-2'><Skeleton height='h-[300px]' width='w-[300px]' /></div>
-                    {[...Array(4)].map((_element, index) => {
-                      return (
-                        <>
-                          <div className='mb-2'><Skeleton height='h-[20px]' width='w-[300px]' /></div>
-                          <div className='mb-2'><Skeleton height='h-[20px]' width='w-[300px]' /></div>
-                        </>
-                      )
-                    })}
-              </div>
-            </Card>
+          <div className='card bg-base-100 border border-base-300 p-2 mb-7'>
+            <div className='card-body' key={index}>
+              <div className='skeleton h-10 w-[150px]' />
+              <div className='skeleton h-[350px]' />
+              <div className='skeleton h-[65px]' />
+            </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,21 +98,14 @@ 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,7 @@
-import { Key, useEffect, useReducer } from 'react';
-import LogForm from '../logForm/LogForm';
+import { useEffect, useReducer, useState } 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,21 +11,21 @@ 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);
+  const [columnVisibility, setColumnVisibility] = useState({})
   const logbookContext = useLogbookContext()
   const { isUserLoggedIn } = useOidc();
   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;
     
@@ -54,7 +51,7 @@ const Logbook: React.FC<unknown> = () => {
     accessorKey: 'date',
     header: 'Date',
     cell: (info: CellContext<LogbookEntry, unknown>) => {
-      const date = new Date(info.getValue() as string);
+      const date = new Date((info.getValue() as string).replace('Z', ''));
       const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
   
       return formattedDate;
@@ -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,65 +101,38 @@ 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 w-52 p-2 shadow-sm border border-base-300 !z-[100]">
+            {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>
       )
     }
   }
   
-  const unauthColumns: ColumnDef<LogbookEntry>[] = [
-    pilotName,
-    date,
-    aircraftMakeModel,
-    route,
-    durationOfFlight,
-    notes
-  ]
-  
-  const authColumns: ColumnDef<LogbookEntry>[] = [
+  const columns: ColumnDef<LogbookEntry>[] = [
     pilotName,
     date,
     aircraftMakeModel,
@@ -173,8 +148,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 +159,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 +169,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 +180,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 +190,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 +200,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 +213,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 +225,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 +235,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 +245,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 +255,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 +265,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 +278,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 +290,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 +302,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 +314,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 +326,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) : ''
@@ -355,31 +336,59 @@ const Logbook: React.FC<unknown> = () => {
     },
     notes,
     actions
-  ]
+  ];
+
+  const table = useReactTable({
+    data: state.entries,
+    columns: columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      columnVisibility: columnVisibility
+    }
+  });
 
   const getLogbookEntries = async () => {
     try {
       dispatch({ type: 'SET_IS_LOADING', payload: true });
 
       const response: AxiosResponse = await httpClient.get(`api/logs`);
-      const entries: LogbookEntry[] = response.data;
-      entries.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
 
       if (response.data.length > 0) {
-        dispatch({ type: 'SET_ENTRIES', payload: response.data });
+        const entries: LogbookEntry[] = response.data;
+        const entryColumns: string[] = Object.keys(entries[0]);
+        const columnVisibility: {[key: string]: boolean} = {}
+
+        for (const column of table.getAllLeafColumns()) {
+          const entryColumnExists = entryColumns.find((entryColumn) => entryColumn === column.id);
+
+          if (entryColumnExists) {
+            columnVisibility[column.id] = true
+          } else {
+            columnVisibility[column.id] = false
+          }
+        }
+
+        columnVisibility['pilotName'] = true
+        columnVisibility['actions'] = true
+
+        entries.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+        setColumnVisibility(columnVisibility)
+        dispatch({ type: 'SET_ENTRIES', payload: entries });
 
         if (state.alert) {
           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 +446,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 });
@@ -451,44 +460,6 @@ const Logbook: React.FC<unknown> = () => {
     });
   };
 
-  // useEffect(() => {
-  //   let newColumns: ColumnDef<LogbookEntry>[];
-
-  //   if (userRole === UserRole.WRITE) {
-  //     newColumns = [...authColumns];
-  //   } else {
-  //     newColumns = [...unauthColumns];
-  //   }
-
-  //   const actionsColumnExists = newColumns.find((column) => column.id === 'actions');
-  //   const tracksColumnExists = newColumns.find((column) => column.id === 'actions');
-    
-  //   if (!actionsColumnExists) {
-  //     newColumns.push(actionsColumn);
-  //   }
-
-  //   if (!tracksColumnExists) {
-  //     const notesColumnIndex = newColumns.findIndex((column) => column.id === 'notes')
-
-  //     newColumns.splice(notesColumnIndex, 0, tracksColumn)
-  //   }
-
-  //   dispatch({ type: 'SET_COLUMNS', payload: newColumns })
-  // }, [isUserLoggedIn])
-
-  const table = useReactTable({
-    data: state.entries,
-    columns: authColumns,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel()
-  });
-
-  const textAlignment = {
-    center: 'text-center',
-    left: 'text-start',
-    right: 'text-end'
-  };
-
   useEffect(() => {
     if (!logbookContext.state.isDrawerOpen) {
       getLogbookEntries();
@@ -503,128 +474,130 @@ 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 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'>
-            {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) => (
-                      <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?.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`}
-                              colSpan={header.colSpan}
-                              key={header.id}
-                            >
-                              {header.isPlaceholder ? null : (
-                                <div>
-                                  {flexRender(
-                                    header.column.columnDef.header,
-                                    header.getContext()
-                                  )}
-                                  {/* {header.column.getCanFilter() ? (
-                                    <div>
-                                      <Filter column={header.column} table={table} />
-                                    </div>
-                                  ) : null} */}
-                                </div>
-                              )}
-                            </th>
-                          );
-                        })}
-                      </tr>
-                    ))}
-                  </thead>
-                  <tbody>
-                    <>
-                      {table.getRowModel().rows.map((row) => {
+        {!state.isLoading && state.entries.length > 0 && screenSize !== ScreenSize.SM && (
+          <div className='col-span-12 p-5 bg-base-100 border border-base-100 rounded-lg'>
+            <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, headerIndex) => {
                         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 ? 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`}
-                                  key={cell.id}
-                                >
+                          <th
+                            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 className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
+                                {flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext()
+                                )}
+                                {/* {header.column.getCanFilter() ? (
+                                  <div>
+                                    <Filter column={header.column} table={table} />
+                                  </div>
+                                ) : null} */}
+                              </div>
+                            )}
+                          </th>
+                        );
+                      })}
+                    </tr>
+                  ))}
+                </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={`py-2 px-3 relative align-middle whitespace-normal text-small font-normal [&>*]: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()
                                   )}
-                                </td>
-                              );
-                            })}
-                          </tr>
-                        );
-                      })}
-                    </>
-                  </tbody>
-                  <thead className='[&>tr]:first:rounded-lg'>
-                    {table.getFooterGroups().map((footerGroup, index) => {
-                      if (index === 0) {
-                        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={footerGroup.id}>
-                            {footerGroup.headers.map((header) => {
-                              return (
-                                <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>
+                              </td>
+                            );
+                          })}
+                        </tr>
+                      );
+                    })}
+                  </>
+                </tbody>
+                <thead className='[&>tr]:first:rounded-lg bg-base-200'>
+                  {table.getFooterGroups().map((footerGroup, index) => {
+                    if (index === 0) {
+                      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={footerGroup.id}>
+                          {footerGroup.headers.map((header) => {
+                            return (
+                              <td
+                                className='roup/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}
+                              >
+                                <div className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
                                   {header.isPlaceholder
                                     ? null
                                     : flexRender(
                                         header.column.columnDef.footer,
                                         header.getContext()
-                                      )}
-                                </td>
-                              );
-                            })}
-                          </tr>
-                        );
-                      }
-                    })}
-                  </thead>
-                </table>
-              </div>
-            )}
-            {state.entries.length > 0 && screenSize === ScreenSize.SM &&
-              <LogbookCard logs={state.entries} onDelete={onDeleteLog} mode='logbook' onOpenCloseForm={onOpenCloseDrawer} />
-            }
+                                      )
+                                    }
+                                </div>
+                              </td>
+                            );
+                          })}
+                        </tr>
+                      );
+                    }
+                  })}
+                </thead>
+              </table>
+            </div>
           </div>
         )}
-        {/* {state.isLoading && !state.alert && (
-          <>
-            <div>
-              <Loading size='xl' />
+        {state.entries.length > 0 && screenSize === ScreenSize.SM &&
+          <LogbookCard logs={state.entries} onDelete={onDeleteLog} mode='logbook' onOpenCloseForm={onOpenCloseDrawer} />
+        }
+        {state.isLoading && !state.alert && (
+          <div className='col-span-12 p-5 bg-base-100 border border-base-100 rounded-lg'>
+            <div className='col-span-12 justify-self-center'>
+              <span className='loading loading-spinner loading-xl' />
             </div>
-            <div>
+            <div className='col-span-12 justify-self-center'>
               Loading...
             </div>
-          </>
-        )} */}
+          </div>
+        )}
       </div>
       {logbookContext.state.isDrawerOpen && (
         <LogbookDrawer
@@ -641,14 +614,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/LogbookState.interface.ts

@@ -1,4 +1,4 @@
-import { ColumnDef } from '@noahspan/noahspan-components';
+import { ColumnDef } from '@tanstack/react-table';
 import { FormMode } from '../../enums/formMode';
 import { Alert } from '../../interfaces/Alert.interface';
 import { LogbookEntry } from './LogbookEntry.interface';

client/src/components/logbook/columns.tsx

@@ -1,290 +0,0 @@
-import {
-  CellContext,
-  ColumnDef,
-  HeaderContext,
-} from '@noahspan/noahspan-components';
-import { LogbookEntry } from './LogbookEntry.interface';
-
-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;
-  
-  if (values.length > 0) {
-    total = values.reduce((accumulator, currentValue) => accumulator + currentValue, total)
-  }
-
-  return total;
-} 
-
-const pilotName: ColumnDef<LogbookEntry> = {
-  id: 'pilotName',
-  accessorKey: 'pilot',
-  header: 'Pilot',
-  footer: 'PAGE TOTALS',
-  cell: (info: CellContext<LogbookEntry, unknown>) => {
-    const pilot: any = info.getValue();
-
-    return pilot.name
-  }
-}
-const date: ColumnDef<LogbookEntry> = {
-  id: 'date',
-  accessorKey: 'date',
-  header: 'Date',
-  cell: (info: CellContext<LogbookEntry, unknown>) => {
-    const date = new Date(info.getValue() as string);
-    const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
-
-    return formattedDate;
-  }
-}
-const aircraftMakeModel: ColumnDef<LogbookEntry> = {
-  id: 'aircraftMakeModel',
-  accessorKey: 'aircraftMakeModel',
-  header: 'Aircraft Make & Model'
-}
-const route: ColumnDef<LogbookEntry> = {
-  id: 'route',
-  header: 'Route of Flight',
-  meta: {
-    headerAlign: 'center'
-  },
-  columns: [
-    {
-      id: 'routeFrom',
-      accessorKey: 'routeFrom',
-      header: 'From'
-    },
-    {
-      id: 'routeTo',
-      accessorKey: 'routeTo',
-      header: 'To'
-    }
-  ]
-}
-const durationOfFlight: ColumnDef<LogbookEntry> = {
-  id: 'durationOfFlight',
-  accessorKey: 'durationOfFlight',
-  header: 'Duration Of Flight',
-  meta: {
-    align: 'right',
-    headerAlign: 'right'
-  },
-  cell: (info: CellContext<LogbookEntry, unknown>) =>
-    info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
-  footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
-}
-const notes: ColumnDef<LogbookEntry> = {
-  id: 'notes',
-  accessorKey: 'notes',
-  header: 'Notes'
-}
-
-export const unauthColumns: ColumnDef<LogbookEntry>[] = [
-  pilotName,
-  date,
-  aircraftMakeModel,
-  route,
-  durationOfFlight,
-  notes
-]
-
-export const authColumns: ColumnDef<LogbookEntry>[] = [
-  pilotName,
-  date,
-  aircraftMakeModel,
-  {
-    id: 'aircraftIdentity',
-    accessorKey: 'aircraftIdentity',
-    header: 'Aircraft Identity',
-  },
-  route,
-  durationOfFlight,
-  {
-    id: 'singleEngineLand',
-    accessorKey: 'singleEngineLand',
-    header: 'Single Engine Land',
-    meta: {
-      align: 'right',
-      headerAlign: 'right'
-    },
-    cell: (info: CellContext<LogbookEntry, unknown>) =>
-      info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
-    footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
-  },
-  {
-    id: 'landings',
-    header: 'Landings',
-    meta: {
-      headerAlign: 'center'
-    },
-    columns: [
-      {
-        id: 'landingsDay',
-        accessorKey: 'landingsDay',
-        header: 'Day',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        }
-      },
-      {
-        id: 'landingsNight',
-        accessorKey: 'landingsNight',
-        header: 'Night',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        }
-      }
-    ]
-  },
-  {
-    id: 'instrument',
-    header: 'Instrument',
-    meta: {
-      headerAlign: 'center'
-    },
-    columns: [
-      {
-        id: 'instrumentActual',
-        accessorKey: 'instrumentActual',
-        header: 'Actual',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        },
-        cell: (info: CellContext<LogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
-      },
-      {
-        id: 'instrumentSimulated',
-        accessorKey: 'instrumentSimulated',
-        header: 'Simulated',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        },
-        cell: (info: CellContext<LogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
-      },
-      {
-        id: 'instrumentApproaches',
-        accessorKey: 'instrumentApproaches',
-        header: 'Approaches',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        }
-      },
-      {
-        id: 'instrumentHolds',
-        accessorKey: 'instrumentHolds',
-        header: 'Holds',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        }
-      },
-      {
-        id: 'instrumentNavTrack',
-        accessorKey: 'instrumentNavTrack',
-        header: 'Nav/Track',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        }
-      }
-    ]
-  },
-  {
-    id: 'experienceTraining',
-    header: 'Type of pilot experience or training',
-    meta: {
-      headerAlign: 'center'
-    },
-    columns: [
-      {
-        id: 'groundTrainingReceived',
-        accessorKey: 'groundTrainingReceived',
-        header: 'Ground Training Received',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        },
-        cell: (info: CellContext<LogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
-      },
-      {
-        id: 'flightTrainingReceived',
-        accessorKey: 'flightTrainingReceived',
-        header: 'Flight Training Received',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        },
-        cell: (info: CellContext<LogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
-      },
-      {
-        id: 'crossCountry',
-        accessorKey: 'crossCountry',
-        header: 'Cross Country',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        },
-        cell: (info: CellContext<LogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
-      },
-      {
-        id: 'night',
-        accessorKey: 'night',
-        header: 'Night',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        },
-        cell: (info: CellContext<LogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
-      },
-      {
-        id: 'solo',
-        accessorKey: 'solo',
-        header: 'Solo',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        },
-        cell: (info: CellContext<LogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
-      },
-      {
-        id: 'pilotInCommand',
-        accessorKey: 'pilotInCommand',
-        header: 'Pilot In Command',
-        footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
-        meta: {
-          align: 'right',
-          headerAlign: 'right'
-        },
-        cell: (info: CellContext<LogbookEntry, unknown>) =>
-          info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
-      }
-    ]
-  },
-  notes
-]

client/src/components/logbook/reducer.ts

@@ -1,4 +1,4 @@
-import { ColumnDef } from '@noahspan/noahspan-components';
+import { ColumnDef } from '@tanstack/react-table';
 import { FormMode } from '../../enums/formMode';
 import { Alert } from '../../interfaces/Alert.interface';
 import { LogbookEntry } from './LogbookEntry.interface';

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";
 
@@ -6,16 +5,14 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
   return (
     <div>
       {logs.map((log) => {
-        const date = new Date(log.date);
-        const formattedDate: string = `${date.getMonth()}/${date.getDate()}/${date.getFullYear()}`;
+        const date = new Date(log.date.replace('Z', ''));
+        const formattedDate: string = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;
 
         return (
-          <div>
-            <Card className='p-4' key={log.id}>
-              <CardHeader>
-                <h2 className='font-bold text-2xl'>{formattedDate}</h2>
-              </CardHeader>
-              <CardBody>    
+          <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>    
                 {mode === 'flights' && log.tracks && log.tracks.length > 0 &&
                   <div className='mb-5'>
                     <TrackMap
@@ -25,49 +22,50 @@ const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps
                     />
                   </div>
                 }
-                <Accordion variant='bordered'>
-                  <AccordionItem key='1' title='Details'>
-                    <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>
-                      </div>
-                      <div className='col-span-6'>
-                        <span>{log.aircraftMakeModel}</span>
-                      </div>
-                      <div className='col-span-6 font-bold'>
-                        <span>Route From</span>
-                      </div>
-                      <div className='col-span-6'>
-                        <span>{log.routeFrom}</span>
-                      </div>
-                      <div className='col-span-6 font-bold'>
-                        <span>Route To</span>
-                      </div>
-                      <div className='col-span-6'>
-                        <span>{log.routeTo}</span>
-                      </div>
-                      <div className='col-span-6 font-bold'>
-                        <span>Duration Of Flight</span>
-                      </div>
-                      <div className='col-span-6'>
-                        <span>{log.durationOfFlight}</span>
-                      </div>
-                      {log.notes &&
-                        <>
-                          <div className='col-span-6 font-bold'>
-                            <span>Notes</span>
-                          </div>
-                          <div className='col-span-6'>
-                            <span>{log.notes}</span>
-                          </div>
-                        </>
-                      }
+              </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>
                     </div>
-                  </AccordionItem>
-                </Accordion>
-
-              </CardBody>
-            </Card>
+                    <div className='col-span-6'>
+                      <span>{log.aircraftMakeModel}</span>
+                    </div>
+                    <div className='col-span-6 font-bold'>
+                      <span>Route From</span>
+                    </div>
+                    <div className='col-span-6'>
+                      <span>{log.routeFrom}</span>
+                    </div>
+                    <div className='col-span-6 font-bold'>
+                      <span>Route To</span>
+                    </div>
+                    <div className='col-span-6'>
+                      <span>{log.routeTo}</span>
+                    </div>
+                    <div className='col-span-6 font-bold'>
+                      <span>Duration Of Flight</span>
+                    </div>
+                    <div className='col-span-6'>
+                      <span>{log.durationOfFlight}</span>
+                    </div>
+                    {log.notes &&
+                      <>
+                        <div className='col-span-6 font-bold'>
+                          <span>Notes</span>
+                        </div>
+                        <div className='col-span-6'>
+                          <span>{log.notes}</span>
+                        </div>
+                      </>
+                    }
+                  </div>
+                </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 { ChangeEventHandler, MouseEventHandler, 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,112 @@ 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)
+  }
+
+  const onTabClicked = (event: any) => {
+    setActiveTab(event.target.ariaLabel)
   }
 
   return (
-    <Drawer
-      closeButton={
-        <Button isIconOnly>
-          <FontAwesomeIcon icon={faXmark} />
-        </Button>
-      }
-      isOpen={logbookContext.state.isDrawerOpen}
-      onClose={onCancel}
-    >
-      <DrawerContent>
-        <FormProvider {...methods}>
-          <form className='prose max-w-none' onSubmit={methods.handleSubmit(onSubmit)} style={{ paddingBottom: '50px' }}>
-            <DrawerHeader>
-              {`${logbookContext.state.formMode.toString().toLowerCase().charAt(0).toUpperCase() + logbookContext.state.formMode.toString().slice(1).toLowerCase()} Entry`}
-            </DrawerHeader>
-            <DrawerBody>
-              {logbookContext.state.formAlert && (
-                <div className='col-span-12'>
+    <div className='drawer drawer-end'>
+      <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' }}>
+              <div className='grid grid-cols-12 mb-6'>
+                <div className="col-span-10">
+                  <h2 className="mt-0 mb-0 self-center">
+                    {`${logbookContext.state.formMode.toString().toLowerCase().charAt(0).toUpperCase() + logbookContext.state.formMode.toString().slice(1).toLowerCase()} Entry`}
+                  </h2>
+                </div>
+                <div className="col-span-2 justify-self-end self-center">
+                  <button className="btn btn-ghost" onClick={onCancel}>
+                    <FontAwesomeIcon icon={faXmark} />
+                  </button>
+                </div>
+              </div>
+                {logbookContext.state.formAlert && (
                   <Alert
+                    className='mb-5'
                     onClose={() =>
                       logbookContext.dispatch({ type: 'SET_FORM_ALERT', payload: undefined })
                     }
-                    color={logbookContext.state.formAlert.severity}
-                    title={logbookContext.state.formAlert.message}
-                  />
-                </div>
-              )}
-              <Tabs 
-                color='default'
-                fullWidth={true}
-                onSelectionChange={onSelectedKeyChanged}
-                selectedKey={activeTab as string}
-                variant='solid'
-              >
-                <Tab
-                  key='time'
-                  title={
-                    <div className="flex items-center space-x-2">
-                      <FontAwesomeIcon icon={faClock} />
-                      <span>Time</span>
-                    </div>
-                  }
-                >
-                  <LogForm />
-                </Tab>
-                {logbookContext.state.formMode !== FormMode.ADD &&
-                  <Tab
-                    key='tracks'
-                    title={
-                      <div className="flex items-center space-x-2">
-                        <FontAwesomeIcon icon={faMapLocationDot} />
-                        <span>Tracks</span>
-                      </div>
-                    }
+                    severity={logbookContext.state.formAlert.severity}
                   >
-                    <TracksForm />
-                  </Tab>
-                }
-              </Tabs>
-            </DrawerBody>
-            {activeTab !== 'tracks' &&
-              <DrawerFooter>
-                <div className='grid grid-cols-12 gap-3'>
-                  <div className='col-span-12 justify-self-end self-center'>
-                    <Button
-                      disabled={
-                        logbookContext.state.isFormDisabled && logbookContext.state.formMode.toString() !== FormMode.VIEW
-                          ? logbookContext.state.isFormDisabled
-                          : false
-                      }
-                      startContent={<FontAwesomeIcon icon={faXmark} />}
-                      onPress={onCancel}
-                    >
-                      {logbookContext.state.formMode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
-                    </Button>
-                    {logbookContext.state.formMode.toString() !== FormMode.VIEW && (
-                      <Button
-                        className='ml-[10px]'
-                        color='primary'
-                        disabled={logbookContext.state.isFormDisabled}
-                        startContent={<FontAwesomeIcon icon={faSave} />}
-                        type="submit"
-                      >
-                        Save
-                      </Button>
-                    )}
+                    {logbookContext.state.formAlert.message}
+                  </Alert>
+                )}
+                <div className='tabs tabs-lift mb-5'>
+                  <label className='tab'>
+                    <input aria-label='time' type='radio' name='logbook_drawer_tabs' onChange={onTabClicked} checked={activeTab === 'time' ? true : false} />
+                    <FontAwesomeIcon className='mr-1'icon={faClock} />
+                    Time
+                  </label>
+                  <div className='tab-content border-base-300 p-6'>
+                    <LogForm />
                   </div>
+                  {logbookContext.state.formMode !== FormMode.ADD &&
+                    <>
+                      <label className='tab'>
+                        <input aria-label='tracks' type='radio' name='logbook_drawer_tabs' onChange={onTabClicked} checked={activeTab === 'tracks' ? true : false} />
+                        <FontAwesomeIcon className='mr-1' icon={faMapLocationDot} />
+                        Tracks
+                      </label>
+                      <div className='tab-content border-base-300 p-6'>
+                        <TracksForm />
+                      </div>
+                    </>
+                  }
                 </div>
-              </DrawerFooter>
-            }
-          </form>
-        </FormProvider>
-      </DrawerContent>
-    </Drawer>
+                {activeTab !== 'tracks' &&
+                  <div>
+                    <div className='grid grid-cols-12 gap-3'>
+                      <div className='col-span-12 justify-self-end self-center'>
+                        <button
+                          className='btn'
+                          disabled={
+                            logbookContext.state.isFormDisabled && logbookContext.state.formMode.toString() !== FormMode.VIEW
+                              ? logbookContext.state.isFormDisabled
+                              : false
+                          }
+                          onClick={onCancel}
+                        >
+                          <FontAwesomeIcon icon={faXmark} />
+                          {logbookContext.state.formMode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
+                        </button>
+                        {logbookContext.state.formMode.toString() !== FormMode.VIEW && (
+                          <button
+                            className='btn btn-primary ml-2.5'
+                            disabled={logbookContext.state.isFormDisabled}
+                            type="submit"
+                          >
+                            <FontAwesomeIcon icon={faSave} />
+                            Save
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                }
+            </form>
+          </FormProvider>
+        </div>
+        </div>
+    </div>
   )
 }
 

client/src/components/pilotCard/PilotCard.tsx

@@ -1,26 +1,26 @@
-import { Card, CardActions, CardBody, CardHeader} from "@noahspan/noahspan-components"
-import { PilotCardProps } from "./PilotCardProps.interface"
-import ActionMenu from "../actionMenu/ActionMenu"
+// import { Card, CardActions, CardBody, CardHeader} from "@noahspan/noahspan-components"
+// import { PilotCardProps } from "./PilotCardProps.interface"
+// import ActionMenu from "../actionMenu/ActionMenu"
 
-const PilotCard = ({ pilots, onDelete, onOpenCloseForm }: PilotCardProps) => {
-  return (
-    <div>
-      {pilots.map((pilot) => {
-        return (
-          <div>
-            <Card key={pilot.id}>
-              <CardBody>
-                <CardHeader>{pilot.name}</CardHeader>
-                <CardActions>
-                  <ActionMenu id={pilot.id} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />
-                </CardActions>
-              </CardBody>
-            </Card>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
+// const PilotCard = ({ pilots, onDelete, onOpenCloseForm }: PilotCardProps) => {
+//   return (
+//     <div>
+//       {pilots.map((pilot) => {
+//         return (
+//           <div>
+//             <Card key={pilot.id}>
+//               <CardBody>
+//                 <CardHeader>{pilot.name}</CardHeader>
+//                 <CardActions>
+//                   <ActionMenu id={pilot.id} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />
+//                 </CardActions>
+//               </CardBody>
+//             </Card>
+//           </div>
+//         )
+//       })}
+//     </div>
+//   )
+// }
 
-export default PilotCard;
+// export default PilotCard;

client/src/components/pilotForm/PilotForm.tsx

@@ -1,15 +1,14 @@
-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';
 import { FormMode } from '../../enums/formMode';
 import { Person } from '@microsoft/microsoft-graph-types';
-import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
-import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsements';
-import PilotFormMedical from '../pilotFormMedical/PilotFormMedical';
+// import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
+// import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsements';
+// 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,245 +104,225 @@ 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'
-    >
-      <DrawerContent>
-        <FormProvider {...methods}>
-          <form className='prose max-w-none' onSubmit={methods.handleSubmit(onSubmit)} style={{ paddingBottom: '50px' }}>
-            <DrawerHeader>
-              {`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Pilot`}
-            </DrawerHeader>
-            <DrawerBody>
-            <div className='grid grid-cols-12 gap-3'>
-              <div className='col-span-3 self-center'>
-                <h6>Name *</h6>
-              </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>
-              </div>
-              {isUserLoggedIn &&
-                <>
-                  <div className='col-span-3 self-center'>
-                    <span>Address *</span>
-                  </div>
-                  <div className='col-span-9'>
-                    <Controller
-                      name="address"
-                      control={methods.control}
-                      rules={{ required: 'An address is required' }}
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          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}
-                        />
-                      )}
-                    />
-                  </div>
-                  <div className='col-span-3 self-center'>
-                    <h6>City *</h6>
-                  </div>
-                  <div className='col-span-9'>
-                    <Controller
-                      name="city"
-                      control={methods.control}
-                      rules={{ required: 'A city is required' }}
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          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}
-                        />
-                      )}
-                    />
-                  </div>
-                  <div className='col-span-3 self-center'>
-                    <h6>State *</h6>
-                  </div>
-                  <div className='col-span-9'>
-                    <Controller
-                      name="state"
-                      control={methods.control}
-                      rules={{ required: 'A state must be selected' }}
-                      render={({ field: { onChange, value } }) => (
-                        <Select
-                          onChange={onChange}
-                          selectedKeys={[value]}
-                        >
-                          {states.map((state) => (
-                            <SelectItem key={state.value}>{state.label}</SelectItem>
-                          ))}
-                        </Select>
-                      )}
-                    />
-                  </div>
-                  <div className='col-span-3 self-center'>
-                    <h6>Postal Code *</h6>
-                  </div>
-                  <div className='col-span-9'>
-                    <Controller
-                      name="postalCode"
-                      control={methods.control}
-                      rules={{ required: 'A postal code is required' }}
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          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}
-                        />
-                      )}
-                    />
-                  </div>
-                  <div className='col-span-3 self-center'>
-                    <h6>Email</h6>
-                  </div>
-                  <div className='col-span-9'>
-                    <Controller
-                      name="email"
-                      control={methods.control}
-                      rules={{
-                        pattern: {
-                          value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                          message: 'Invalid email address'
-                        }
-                      }}
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          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}
-                        />
-                      )}
-                    />
-                  </div>
-                  <div className='col-span-3 self-center'>
-                    <h6>Phone Number</h6>
-                  </div>
-                  <div className='col-span-9'>
-                    <Controller
-                      name="phone"
-                      control={methods.control}
-                      rules={{
-                        pattern: {
-                          value: /^[0-9]{3}[-\s\.][0-9]{3}[-\s\.][0-9]{4}$/i,
-                          message: 'Enter phone number as 123-456-7890'
-                        }
-                      }}
-                      render={({ field: { onChange, value } }) => (
-                        <Input
-                          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}
-                        />
-                      )}
-                    />
-                  </div>
-                </>
-              }
-              {/* {isAuthenticated &&
-                <Grid size={12}>
-                  <PilotFormMedical
-                    isDisabled={isDisabled}
+    <div className='drawer drawer-end'>
+      <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' }}>
+              <div className='grid grid-cols-12 gap-3'>
+                <div className="col-span-10">
+                  <h2 className="mt-0 mb-0 self-center">
+                    {`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Pilot`}
+                  </h2>
+                </div>
+                <div className="col-span-2 justify-self-end self-center">
+                  <button className="btn btn-ghost" onClick={onCancel}>
+                    <FontAwesomeIcon icon={faXmark} />
+                  </button>
+                </div>
+                <div className='col-span-3 self-center'>
+                  <span>Name *</span>
+                </div>
+                <div className='col-span-9'>
+                  <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 &&
+                  <>
+                    <div className='col-span-3 self-center'>
+                      <span>Address *</span>
+                    </div>
+                    <div className='col-span-9'>
+                      <Controller
+                        name="address"
+                        control={methods.control}
+                        rules={{ required: 'An address is required' }}
+                        render={({ field: { onChange, value } }) => (
+                          <input
+                            type='text'
+                            className='input w-full'
+                            disabled={isDisabled}
+                            onChange={onChange}
+                            value={value}
+                          />
+                        )}
+                      />
+                    </div>
+                    <div className='col-span-3 self-center'>
+                      <h6>City *</h6>
+                    </div>
+                    <div className='col-span-9'>
+                      <Controller
+                        name="city"
+                        control={methods.control}
+                        rules={{ required: 'A city is required' }}
+                        render={({ field: { onChange, value } }) => (
+                           <input
+                            type='text'
+                            className='input w-full'
+                            disabled={isDisabled}
+                            onChange={onChange}
+                            value={value}
+                          />
+                        )}
+                      />
+                    </div>
+                    <div className='col-span-3 self-center'>
+                      <h6>State *</h6>
+                    </div>
+                    <div className='col-span-9'>
+                      <Controller
+                        name="state"
+                        control={methods.control}
+                        rules={{ required: 'A state must be selected' }}
+                        render={({ field: { onChange, value } }) => (
+                          <select
+                            className='select w-full'
+                            onChange={onChange}
+                            value={[value]}
+                          >
+                            {states.map((state) => (
+                              <option key={state.value}>{state.label}</option>
+                            ))}
+                          </select>
+                        )}
+                      />
+                    </div>
+                    <div className='col-span-3 self-center'>
+                      <h6>Postal Code *</h6>
+                    </div>
+                    <div className='col-span-9'>
+                      <Controller
+                        name="postalCode"
+                        control={methods.control}
+                        rules={{ required: 'A postal code is required' }}
+                        render={({ field: { onChange, value } }) => (
+                          <input
+                            type='text'
+                            className='input w-full'
+                            disabled={isDisabled}
+                            onChange={onChange}
+                            value={value}
+                          />
+                        )}
+                      />
+                    </div>
+                    <div className='col-span-3 self-center'>
+                      <h6>Email</h6>
+                    </div>
+                    <div className='col-span-9'>
+                      <Controller
+                        name="email"
+                        control={methods.control}
+                        rules={{
+                          pattern: {
+                            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                            message: 'Invalid email address'
+                          }
+                        }}
+                        render={({ field: { onChange, value } }) => (
+                          <input
+                            type='text'
+                            className='input w-full'
+                            disabled={isDisabled}
+                            onChange={onChange}
+                            value={value}
+                          />
+                        )}
+                      />
+                    </div>
+                    <div className='col-span-3 self-center'>
+                      <h6>Phone Number</h6>
+                    </div>
+                    <div className='col-span-9'>
+                      <Controller
+                        name="phone"
+                        control={methods.control}
+                        rules={{
+                          pattern: {
+                            value: /^[0-9]{3}[-\s\.][0-9]{3}[-\s\.][0-9]{4}$/i,
+                            message: 'Enter phone number as 123-456-7890'
+                          }
+                        }}
+                        render={({ field: { onChange, value } }) => (
+                          <input
+                            type='text'
+                            className='input w-full'
+                            disabled={isDisabled}
+                            onChange={onChange}
+                            value={value}
+                          />
+                        )}
+                      />
+                    </div>
+                  </>
+                }
+                {/* {isAuthenticated &&
+                  <Grid size={12}>
+                    <PilotFormMedical
+                      isDisabled={isDisabled}
+                    />
+                  </Grid>
+                }
+                <Grid size={12}>
+                  <PilotFormCertificates isDisabled={isDisabled} mode={mode} />
                 </Grid>
-              }
-              <Grid size={12}>
-                <PilotFormCertificates isDisabled={isDisabled} mode={mode} />
-              </Grid>
-              <Grid size={12}>
-                <PilotFormEndorsements isDisabled={isDisabled} mode={mode} />
-              </Grid> */}
-              {/* <div className='col-span-12 justify-self-end self-center'> */}
+                <Grid size={12}>
+                  <PilotFormEndorsements isDisabled={isDisabled} mode={mode} />
+                </Grid> */}
+                {/* <div className='col-span-12 justify-self-end self-center'> */}
 
-              {/* </div> */}
-            </div>
-            </DrawerBody>
-              <DrawerFooter>
-                <Button
-                  disabled={
-                    isDisabled && mode.toString() !== FormMode.VIEW
-                      ? isDisabled
-                      : false
-                  }
-                  startContent={<FontAwesomeIcon icon={faXmark} />}
-                  onPress={onCancel}
-                  data-testid="pilot-cancel-button"
-                >
-                  {mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
-                </Button>
-                {mode.toString() !== FormMode.VIEW && (
-                  <Button
-                    color='primary'
-                    disabled={isDisabled}
-                    startContent={<FontAwesomeIcon icon={faSave} />}
-                    type="submit"
-                    data-testid="pilot-save-button"
+              
+                <div className='col-span-12 justify-self-end self-center'>
+                  <button
+                    className='btn'
+                    disabled={
+                      isDisabled && mode.toString() !== FormMode.VIEW
+                        ? isDisabled
+                        : false
+                    }
+                    onClick={onCancel}
+                    data-testid="pilot-cancel-button"
                   >
-                    Save
-                  </Button>
-                )}
-              </DrawerFooter>
-          </form>
-        </FormProvider>
-      </DrawerContent>
-    </Drawer>
+                    <FontAwesomeIcon icon={faXmark} />
+                    {mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
+                  </button>
+                  {mode.toString() !== FormMode.VIEW && (
+                    <button
+                      className='btn btn-primary ml-2.5'
+                      disabled={isDisabled}
+                      type="submit"
+                      data-testid="pilot-save-button"
+                    >
+                      <FontAwesomeIcon icon={faSave} />
+                      Save
+                    </button>
+                  )}
+                </div>
+              </div>
+            </form>
+          </FormProvider>
+        </div>
+      </div>
+    </div>
   );
 };
 

client/src/components/pilotFormCertificates/PilotFormCertificates.tsx

@@ -1,153 +1,153 @@
-import { PilotFormCertificatesProps } from './PilotFormCertificatesProps.interface';
-import {
-  Button,
-  DatePicker,
-  Icon,
-  IconButton,
-  IconName,
-  Input,
-  Select
-} from '@noahspan/noahspan-components';
-import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
-import { FormMode } from '../../enums/formMode';
+// import { PilotFormCertificatesProps } from './PilotFormCertificatesProps.interface';
+// import {
+//   Button,
+//   DatePicker,
+//   Icon,
+//   IconButton,
+//   IconName,
+//   Input,
+//   Select
+// } from '@noahspan/noahspan-components';
+// import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+// import { FormMode } from '../../enums/formMode';
 
-const PilotFormCertificates = ({
-  isDisabled,
-  mode
-}: PilotFormCertificatesProps ) => {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext();
+// const PilotFormCertificates = ({
+//   isDisabled,
+//   mode
+// }: PilotFormCertificatesProps ) => {
+//   const {
+//     control,
+//     formState: { errors },
+//   } = useFormContext();
 
-  const { fields, append, remove } = useFieldArray({
-    name: 'certificates',
-    control
-  });
+//   const { fields, append, remove } = useFieldArray({
+//     name: 'certificates',
+//     control
+//   });
 
-  return (
-    <div>
-      {fields.length > 0 || mode !== FormMode.VIEW &&
-        <div>
-          <h5>Certificates</h5>
-        </div>
-      }
-      {fields.length > 0 && (
-        <>
-          <div>
-            <h6>Type</h6>
-          </div>
-          <div>
-            <h6>Number</h6>
-          </div>
-          <div>
-            <h6>Date of Issue</h6>
-          </div>
-          <div>
-          </div>
-          {fields.map((field, index) => {
-            return (
-              <>
-                <div>
-                  <Controller
-                    name={`certificates.${index}.type`}
-                    control={control}
-                    render={({ field: { onChange, value } }) => {
-                      return (
-                        <Select
-                          disabled={isDisabled}
-                          onChange={onChange}
-                          options={
-                            [
-                              {
-                                label: 'Student',
-                                value: 'student'
-                              },
-                              {
-                                label: 'Private',
-                                value: 'private'
-                              },
-                              {
-                                label: 'Instrument',
-                                value: 'instrument'
-                              },
-                              {
-                                label: 'Recreational',
-                                value: 'recreational'
-                              },
-                              {
-                                label: 'Sport',
-                                value: 'sport'
-                              }
-                            ]
-                          }
-                          value={value}
-                        />
-                      );
-                    }}
-                  />
-                </div>
-                <div>
-                  <Controller
-                    name={`certificates.${index}.number`}
-                    control={control}
-                    render={({ field: { onChange, value } }) => {
-                      return (
-                        <Input
-                          disabled={isDisabled}
-                          onChange={onChange}
-                          value={value}
-                        />
-                      )
-                    }}
-                  />
-                </div>
-                <div>
-                  <Controller
-                    name={`certificates.${index}.dateOfIssue`}
-                    control={control}
-                    render={({ field: { onChange, value } }) => {
-                      return (
-                        <DatePicker
-                          disabled={isDisabled}
-                          onChange={onChange}
-                          value={value}
-                        />
-                      );
-                    }}
-                  />
-                </div>
-                <div>
-                  <IconButton
-                    disabled={isDisabled}
-                    onClick={() => remove(index)}
-                  >
-                    <Icon iconName={IconName.TRASH} size='sm' />
-                  </IconButton>
-                </div>
-              </>
-            );
-          })}
-        </>
-      )}
-      {!isDisabled &&
-        <div>
-          <Button
-            onClick={() => {
-              append({
-                type: '',
-                number: '',
-                dateOfIssue: null
-              });
-            }}
-            startContent={<Icon iconName={IconName.PLUS} />}
-          >
-            Add Certificate
-          </Button>
-        </div>
-      }     
-    </div>
-  );
-};
+//   return (
+//     <div>
+//       {fields.length > 0 || mode !== FormMode.VIEW &&
+//         <div>
+//           <h5>Certificates</h5>
+//         </div>
+//       }
+//       {fields.length > 0 && (
+//         <>
+//           <div>
+//             <h6>Type</h6>
+//           </div>
+//           <div>
+//             <h6>Number</h6>
+//           </div>
+//           <div>
+//             <h6>Date of Issue</h6>
+//           </div>
+//           <div>
+//           </div>
+//           {fields.map((field, index) => {
+//             return (
+//               <>
+//                 <div>
+//                   <Controller
+//                     name={`certificates.${index}.type`}
+//                     control={control}
+//                     render={({ field: { onChange, value } }) => {
+//                       return (
+//                         <Select
+//                           disabled={isDisabled}
+//                           onChange={onChange}
+//                           options={
+//                             [
+//                               {
+//                                 label: 'Student',
+//                                 value: 'student'
+//                               },
+//                               {
+//                                 label: 'Private',
+//                                 value: 'private'
+//                               },
+//                               {
+//                                 label: 'Instrument',
+//                                 value: 'instrument'
+//                               },
+//                               {
+//                                 label: 'Recreational',
+//                                 value: 'recreational'
+//                               },
+//                               {
+//                                 label: 'Sport',
+//                                 value: 'sport'
+//                               }
+//                             ]
+//                           }
+//                           value={value}
+//                         />
+//                       );
+//                     }}
+//                   />
+//                 </div>
+//                 <div>
+//                   <Controller
+//                     name={`certificates.${index}.number`}
+//                     control={control}
+//                     render={({ field: { onChange, value } }) => {
+//                       return (
+//                         <Input
+//                           disabled={isDisabled}
+//                           onChange={onChange}
+//                           value={value}
+//                         />
+//                       )
+//                     }}
+//                   />
+//                 </div>
+//                 <div>
+//                   <Controller
+//                     name={`certificates.${index}.dateOfIssue`}
+//                     control={control}
+//                     render={({ field: { onChange, value } }) => {
+//                       return (
+//                         <DatePicker
+//                           disabled={isDisabled}
+//                           onChange={onChange}
+//                           value={value}
+//                         />
+//                       );
+//                     }}
+//                   />
+//                 </div>
+//                 <div>
+//                   <IconButton
+//                     disabled={isDisabled}
+//                     onClick={() => remove(index)}
+//                   >
+//                     <Icon iconName={IconName.TRASH} size='sm' />
+//                   </IconButton>
+//                 </div>
+//               </>
+//             );
+//           })}
+//         </>
+//       )}
+//       {!isDisabled &&
+//         <div>
+//           <Button
+//             onClick={() => {
+//               append({
+//                 type: '',
+//                 number: '',
+//                 dateOfIssue: null
+//               });
+//             }}
+//             startContent={<Icon iconName={IconName.PLUS} />}
+//           >
+//             Add Certificate
+//           </Button>
+//         </div>
+//       }     
+//     </div>
+//   );
+// };
 
-export default PilotFormCertificates;
+// export default PilotFormCertificates;

client/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx

@@ -1,129 +1,129 @@
-import { PilotFormEndorsementsProps } from './PilotFormEndorsementsProps.interface';
-import {
-  Button,
-  DatePicker,
-  Icon,
-  IconButton,
-  IconName,
-  Select
-} from '@noahspan/noahspan-components';
-import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
-import { FormMode } from '../../enums/formMode';
+// import { PilotFormEndorsementsProps } from './PilotFormEndorsementsProps.interface';
+// import {
+//   Button,
+//   DatePicker,
+//   Icon,
+//   IconButton,
+//   IconName,
+//   Select
+// } from '@noahspan/noahspan-components';
+// import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+// import { FormMode } from '../../enums/formMode';
 
-const PilotFormEndorsements = ({
-  mode,
-  isDisabled
-}: PilotFormEndorsementsProps) => {
-  const {
-    control,
-    formState: { errors },
-    setValue
-  } = useFormContext();
+// const PilotFormEndorsements = ({
+//   mode,
+//   isDisabled
+// }: PilotFormEndorsementsProps) => {
+//   const {
+//     control,
+//     formState: { errors },
+//     setValue
+//   } = useFormContext();
 
-  const { fields, append, remove } = useFieldArray({
-    name: 'endorsements',
-    control
-  });
+//   const { fields, append, remove } = useFieldArray({
+//     name: 'endorsements',
+//     control
+//   });
 
-  return (
-    <div>
-      {fields.length > 0 || mode !== FormMode.VIEW &&
-        <div>
-          <h5>Endorsements</h5>
-        </div>
-      }
-      {fields.length > 0 && (
-        <>
-          <div>
-            <h6>Type</h6>
-          </div>
-          <div>
-            <h6>Date of Issue</h6>
-          </div>
-          <div></div>
-          {fields.map((field, index) => {
-            return (
-              <>
-                <div>
-                  <Controller
-                    name={`endorsements.${index}.type`}
-                    control={control}
-                    render={({ field: { onChange, value } }) => {
-                      return (
-                        <Select
-                          disabled={isDisabled}
-                          onChange={onChange}
-                          options={
-                            [
-                              {
-                                label: 'Complex',
-                                value: 'complex'
-                              },
-                              {
-                                label: 'High Performance',
-                                value: 'highPerfomance'
-                              },
-                              {
-                                label: 'High Altitude',
-                                value: 'highAltitude'
-                              },
-                              {
-                                label: 'Tailwheel',
-                                value: 'tailwheel'
-                              }
-                            ]
-                          }
-                          value={value ? value : ''}
-                        />
-                      );
-                    }}
-                  />
-                </div>
-                <div>
-                  <Controller
-                    name={`endorsements.${index}.dateOfIssue`}
-                    control={control}
-                    render={({ field: { onChange, value } }) => {
-                      return (
-                        <DatePicker
-                          disabled={isDisabled}
-                          onChange={onChange}
-                          value={value}
-                        />
-                      );
-                    }}
-                  />
-                </div>
-                <div>
-                  <IconButton
-                    disabled={isDisabled}
-                    onClick={() => remove(index)}
-                  >
-                    <Icon iconName={IconName.TRASH} size="sm" />
-                  </IconButton>
-                </div>
-              </>
-            );
-          })}
-        </>
-      )}
-      {!isDisabled && 
-        <div>
-          <Button
-            onClick={() => {
-              append({
-                type: '',
-                dateOfIssue: null
-              });
-            }}
-            startContent={<Icon iconName={IconName.PLUS} />}
-          >
-            Add Endorsement
-          </Button>
-        </div>
-      }
-    </div>
-  );
-};
+//   return (
+//     <div>
+//       {fields.length > 0 || mode !== FormMode.VIEW &&
+//         <div>
+//           <h5>Endorsements</h5>
+//         </div>
+//       }
+//       {fields.length > 0 && (
+//         <>
+//           <div>
+//             <h6>Type</h6>
+//           </div>
+//           <div>
+//             <h6>Date of Issue</h6>
+//           </div>
+//           <div></div>
+//           {fields.map((field, index) => {
+//             return (
+//               <>
+//                 <div>
+//                   <Controller
+//                     name={`endorsements.${index}.type`}
+//                     control={control}
+//                     render={({ field: { onChange, value } }) => {
+//                       return (
+//                         <Select
+//                           disabled={isDisabled}
+//                           onChange={onChange}
+//                           options={
+//                             [
+//                               {
+//                                 label: 'Complex',
+//                                 value: 'complex'
+//                               },
+//                               {
+//                                 label: 'High Performance',
+//                                 value: 'highPerfomance'
+//                               },
+//                               {
+//                                 label: 'High Altitude',
+//                                 value: 'highAltitude'
+//                               },
+//                               {
+//                                 label: 'Tailwheel',
+//                                 value: 'tailwheel'
+//                               }
+//                             ]
+//                           }
+//                           value={value ? value : ''}
+//                         />
+//                       );
+//                     }}
+//                   />
+//                 </div>
+//                 <div>
+//                   <Controller
+//                     name={`endorsements.${index}.dateOfIssue`}
+//                     control={control}
+//                     render={({ field: { onChange, value } }) => {
+//                       return (
+//                         <DatePicker
+//                           disabled={isDisabled}
+//                           onChange={onChange}
+//                           value={value}
+//                         />
+//                       );
+//                     }}
+//                   />
+//                 </div>
+//                 <div>
+//                   <IconButton
+//                     disabled={isDisabled}
+//                     onClick={() => remove(index)}
+//                   >
+//                     <Icon iconName={IconName.TRASH} size="sm" />
+//                   </IconButton>
+//                 </div>
+//               </>
+//             );
+//           })}
+//         </>
+//       )}
+//       {!isDisabled && 
+//         <div>
+//           <Button
+//             onClick={() => {
+//               append({
+//                 type: '',
+//                 dateOfIssue: null
+//               });
+//             }}
+//             startContent={<Icon iconName={IconName.PLUS} />}
+//           >
+//             Add Endorsement
+//           </Button>
+//         </div>
+//       }
+//     </div>
+//   );
+// };
 
-export default PilotFormEndorsements;
+// export default PilotFormEndorsements;

client/src/components/pilotFormMedical/PilotFormMedical.tsx

@@ -1,77 +1,77 @@
-import { DatePicker, Select } from '@noahspan/noahspan-components';
-import { Controller, useFormContext } from "react-hook-form"
-import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface";
+// import { DatePicker, Select } from '@noahspan/noahspan-components';
+// import { Controller, useFormContext } from "react-hook-form"
+// import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface";
 
-const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
-  const {
-    control,
-    formState: { errors },
-    setValue
-  } = useFormContext();
+// const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
+//   const {
+//     control,
+//     formState: { errors },
+//     setValue
+//   } = useFormContext();
 
-  return (
-    <div>
-      <div>
-        <h5>Medical</h5>
-      </div>
-      <div>
-        <h6>Class</h6>
-      </div>
-      <div>
-        <Controller
-          name="medicalClass"
-          control={control}
-          render={({ field: { onChange, value } }) => {
-            return (
-              <Select 
-                disabled={isDisabled}
-                onChange={onChange}
-                options={
-                  [
-                    {
-                      label: 'First',
-                      value: 'first'
-                    },
-                    {
-                      label: 'Second',
-                      value: 'second'
-                    },
-                    {
-                      label: 'Third',
-                      value: 'third'
-                    },
-                    {
-                      label: 'Basic Med',
-                      value: 'basicMed'
-                    }
-                  ]
-                }
-                value={value ? value : ''}
-              />
-            );
-          }}
-        />
-      </div>
-      <div>
-        <h6>Expiration</h6>
-      </div>
-      <div>
-        <Controller
-          name="medicalExpiration"
-          control={control}
-          render={({ field: { onChange, value } }) => {
-            return (
-              <DatePicker
-                disabled={isDisabled}
-                onChange={onChange}
-                value={value}
-              />
-            );
-          }}
-        />
-      </div>
-    </div>
-  )
-}
+//   return (
+//     <div>
+//       <div>
+//         <h5>Medical</h5>
+//       </div>
+//       <div>
+//         <h6>Class</h6>
+//       </div>
+//       <div>
+//         <Controller
+//           name="medicalClass"
+//           control={control}
+//           render={({ field: { onChange, value } }) => {
+//             return (
+//               <Select 
+//                 disabled={isDisabled}
+//                 onChange={onChange}
+//                 options={
+//                   [
+//                     {
+//                       label: 'First',
+//                       value: 'first'
+//                     },
+//                     {
+//                       label: 'Second',
+//                       value: 'second'
+//                     },
+//                     {
+//                       label: 'Third',
+//                       value: 'third'
+//                     },
+//                     {
+//                       label: 'Basic Med',
+//                       value: 'basicMed'
+//                     }
+//                   ]
+//                 }
+//                 value={value ? value : ''}
+//               />
+//             );
+//           }}
+//         />
+//       </div>
+//       <div>
+//         <h6>Expiration</h6>
+//       </div>
+//       <div>
+//         <Controller
+//           name="medicalExpiration"
+//           control={control}
+//           render={({ field: { onChange, value } }) => {
+//             return (
+//               <DatePicker
+//                 disabled={isDisabled}
+//                 onChange={onChange}
+//                 value={value}
+//               />
+//             );
+//           }}
+//         />
+//       </div>
+//     </div>
+//   )
+// }
 
-export default PilotFormMedical
+// export default PilotFormMedical

client/src/components/pilots/Pilots.tsx

@@ -4,20 +4,24 @@ import { AxiosError, AxiosResponse } from 'axios';
 import { FormMode } from '../../enums/formMode';
 import { initialState, reducer } from './reducer';
 import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
-import PilotCard from '../pilotCard/PilotCard';
+// import PilotCard from '../pilotCard/PilotCard';
 import { useUserRole } from '../../hooks/userRole/UseUserRole';
 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 {
@@ -34,7 +38,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 +46,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 +105,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 +119,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) {
@@ -187,58 +177,91 @@ const Pilots: React.FC<unknown> = () => {
         <h1>Pilots</h1>
       </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} />}
+        {!state.isLoading && userRole === UserRole.WRITE &&
+          <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'>
-        {state.pilots.length > 0 && screenSize !== ScreenSize.SM &&
-          <Table>
-            <TableHeader columns={columns}>
-              {(column) => (
-                <TableColumn
-                  key={column.id}
-                  align={column.id === "actions" ? "center" : "start"}
-                >
-                  {column.name}
-                </TableColumn>
-              )}
-            </TableHeader>
-            <TableBody items={state.pilots}>
-              {(item) => (
-                <TableRow key={item.id}>
-                  {(columnKey => (
-                    <TableCell>
-                      {renderCell(item, columnKey)}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        }
-        {state.pilots.length > 0 && screenSize === ScreenSize.SM &&
-          <PilotCard pilots={state.pilots} onDelete={onDeletePilot} onOpenCloseForm={onOpenClosePilotForm} />
-        }
-      </div>
+      {state.pilots.length > 0 && screenSize !== ScreenSize.SM &&
+        <div className='col-span-12 bg-base-100 p-5 border border-base-100 rounded-lg'>
+          <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}
+                      >
+                        {header.isPlaceholder ? null : (
+                          <div>
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                            {/* {header.column.getCanFilter() ? (
+                              <div>
+                                <Filter column={header.column} table={table} />
+                              </div>
+                            ) : null} */}
+                          </div>
+                        )}
+                      </th>
+                    );
+                  })}
+                </tr>
+              ))}
+            </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()
+                            )}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })}
+              </>
+            </tbody>
+          </table>
+        </div>
+      }
+      {/* {state.pilots.length > 0 && screenSize === ScreenSize.SM &&
+        <PilotCard pilots={state.pilots} onDelete={onDeletePilot} onOpenCloseForm={onOpenClosePilotForm} />
+      } */}
     </div>
       {state.isFormOpen && (
         <PilotForm

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',
@@ -79,53 +106,62 @@ const SiteNav = () => {
   }, [isUserLoggedIn]);
 
   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 ? 'mr-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>
+                }
+                {!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>
         }
-      </NavbarContent>
-    </Navbar>
+      </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>
             </>
           )
         })}
-        <div className='col-span-12'>
-          <Button
-            as='label'
-            color='primary'
-            isDisabled={state.isDisabled}
-            fullWidth={true}
-            startContent={<FontAwesomeIcon icon={faUpload} />}
-          >
-            Upload Track
-            <input hidden onChange={handleFileUpload} type='file' />
-          </Button>
-        </div>
+        {logbookContext.state.formMode === FormMode.EDIT &&
+          <div className='col-span-12'>
+            <label
+              className='btn cursor-pointer w-full'
+            >
+              <FontAwesomeIcon icon={faUpload} />
+              Upload Track
+              <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/hooks/userRole/UseUserRole.tsx

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

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

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

database/litestream/litestream.yml

@@ -1,4 +1,4 @@
 dbs:
-  - path: /var/lib/data/flying.db
+  - path: /mnt/data/flying.db
     replicas:
-      - path: /mnt/backup/flying.db
+      - path: /mnt/data/backup/flying.db

docker-compose.yaml

@@ -16,11 +16,11 @@ services:
     container_name: restore
     image: litestream/litestream:0.3.13
     volumes:
-      - ./database/flying.db:/var/lib/data/flying.db
+      - ./database/flying.db:/mnt/data/flying.db
       - ./database/litestream/litestream.yml:/mnt/litestream/litestream.yml
       - backup:/mnt/data/backup
-      - data:/var/lib/data
-    command: restore -config /mnt/litestream/litestream.yml -if-db-not-exists -if-replica-exists /var/lib/data/flying.db
+      - data:/mnt/data
+    command: restore -config /mnt/litestream/litestream.yml -if-db-not-exists -if-replica-exists /mnt/data/flying.db
 
   app:
     container_name: flying
@@ -31,9 +31,9 @@ services:
     env_file:
       - ./api/.env
     environment:
-      - DB_PATH=../../var/lib/data/flying.db
+      - DB_PATH=../../mnt/data/flying.db
     volumes:
-      - data:/var/lib/data
+      - data:/mnt/data
     depends_on:
       restore:
         condition: service_completed_successfully
@@ -44,7 +44,7 @@ services:
     volumes:
       - ./database/litestream/litestream.yml:/mnt/litestream/litestream.yml
       - backup:/mnt
-      - data:/var/lib/data
+      - data:/mnt/data
     command: replicate -config /mnt/litestream/litestream.yml
     depends_on:
       app:

infrastructure/container_app.tf

@@ -1,8 +1,3 @@
-# data "azuread_application" "app_registration" {
-#   provider = azuread.external_tenant
-#   display_name = module.environment.app_reg_name
-# }
-
 resource "azurerm_container_app" "container_app" {
   name = module.environment.app_name
   container_app_environment_id = data.azurerm_container_app_environment.container_app_environment.id
@@ -14,7 +9,7 @@ resource "azurerm_container_app" "container_app" {
     max_replicas = 2
 
     init_container {
-      args = ["restore", "-if-db-not-exists", "-if-replica-exists", "/var/lib/data/flying.db"]
+      args = ["restore", "-if-db-not-exists", "-if-replica-exists", "/mnt/data/flying.db"]
       cpu = 0.25
       image = "litestream/litestream:0.5.2"
       memory = "0.5Gi"
@@ -22,12 +17,12 @@ resource "azurerm_container_app" "container_app" {
 
       volume_mounts {
         name = "data"
-        path = "/var/lib/data"
+        path = "/mnt/data"
       }
 
       volume_mounts {
         name = "backup"
-        path = "/mnt/data"
+        path = "/mnt/data/backup"
         sub_path = "data"
       }
 
@@ -47,12 +42,12 @@ resource "azurerm_container_app" "container_app" {
 
       volume_mounts {
         name = "data"
-        path = "/var/lib/data"
+        path = "/mnt/data"
       }
 
       volume_mounts {
         name = "backup"
-        path = "/mnt/data"
+        path = "/mnt/data/backup"
         sub_path = "data"
       }
 
@@ -65,7 +60,7 @@ resource "azurerm_container_app" "container_app" {
 
     container {
       cpu = 0.25
-      image = "noahspan/flying:19615036250"
+      image = "noahspan/flying:20588458616"
       memory = "0.5Gi"
       name = "flying"
 
@@ -74,6 +69,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 +89,21 @@ 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 = "SESSION_SECRET"
+        secret_name = "session-secret"
+      }
+
       env {
         name = "TENANT_ID"
         value = var.EXTERNAL_TENANT_ID
@@ -91,7 +111,7 @@ resource "azurerm_container_app" "container_app" {
 
       env {
         name = "DB_PATH"
-        value = "/var/lib/data/flying.db"
+        value = "/mnt/data/flying.db"
       }
 
       env {
@@ -110,7 +130,7 @@ resource "azurerm_container_app" "container_app" {
 
       volume_mounts {
         name = "data"
-        path = "/var/lib/data"
+        path = "/mnt/data"
       }
     }
 
@@ -159,6 +179,11 @@ resource "azurerm_container_app" "container_app" {
     value = var.DOCKER_IO_PASSWORD
   }
 
+  secret {
+    name = "session-secret"
+    value = var.SESSION_SECRET
+  }
+
   lifecycle {
     ignore_changes = [ template[0].container[0].image, template[0].container[0].image, template[0].init_container[0].image, registry[0].server ]
   }

infrastructure/container_app_environment_storage.tf

@@ -4,5 +4,5 @@ resource "azurerm_container_app_environment_storage" "container_app_environment_
   account_name = azurerm_storage_account.storage_account.name
   share_name = azurerm_storage_share.storage_share[0].name
   access_key = azurerm_storage_account.storage_account.primary_access_key
-  access_mode = "ReadOnly"
+  access_mode = "ReadWrite"
 }

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
 }
@@ -25,6 +36,11 @@ variable "EXTERNAL_TENANT_ID" {
   type = string
 }
 
+variable "SESSION_SECRET" {
+  sensitive = true
+  type = string
+}
+
 variable "TENANT_ID" {
   type = string
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noahspan/flying",
-  "version": "2.0.0-alpha-3",
+  "version": "2.0.0-beta-1",
   "scripts": {
     "start": "node api/dist/main",
     "format": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\"",
@@ -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",