Merge branch 'main' into feature/73-add-flights-page

* adding flights page

* adding flights page

* adding flights page

* adding flights page

* removing unused dependencies

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "",
   "author": "",
   "private": true,
@@ -19,6 +19,7 @@
     "test:e2e": "jest --config ./test/jest-e2e.json"
   },
   "dependencies": {
+    "@azure/storage-blob": "^12.27.0",
     "@microsoft/microsoft-graph-client": "^3.0.7",
     "@nestjs/axios": "^3.0.3",
     "@nestjs/common": "^10.0.0",
@@ -27,12 +28,14 @@
     "@nestjs/passport": "^10.0.3",
     "@nestjs/platform-express": "^10.0.0",
     "@noahspan/azure-database": "^3.1.2",
-    "@noahspan/noahspan-modules": "^1.0.0",
+    "@noahspan/noahspan-modules": "^1.1.5",
     "@schematics/angular": "^17.3.7",
+    "@types/multer": "^1.4.12",
     "dotenv": "^16.4.7",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.1",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "uuidv4": "^6.2.13"
   },
   "devDependencies": {
     "@microsoft/microsoft-graph-types": "^2.40.0",

api/src/app.module.ts

@@ -44,11 +44,6 @@ import configuration from './config/configuration';
       provide: APP_FILTER,
       useClass: HttpExceptionFilter
     },
-    {
-      provide: APP_GUARD,
-      useClass: AuthGuard
-    },
-    Reflector
   ]
 })
 export class AppModule {}

api/src/file/file.service.ts

@@ -0,0 +1,68 @@
+import { BlobServiceClient, BlockBlobClient } from '@azure/storage-blob';
+import { Injectable } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
+
+@Injectable() export class FileService {
+  constructor(private readonly configService: ConfigService) {}
+
+  private containerName: string;
+
+  private streamToBuffer(readableStream: NodeJS.ReadableStream) {
+    return new Promise<Buffer>((resolve, reject) => {
+      const chunks = [];
+
+      readableStream.on('data', (data) => {
+        chunks.push(data instanceof Buffer ? data : Buffer.from(data));
+      });
+      readableStream.on('end', () => {
+        resolve(Buffer.concat(chunks));
+      });
+      readableStream.on('error', reject)
+    })
+  }
+
+  async getBlobServiceInstance() {
+    const connectionString = this.configService.get<string>('azureStorageConnectionString');
+    const blobServiceClient: BlobServiceClient = await BlobServiceClient.fromConnectionString(connectionString)
+
+    return blobServiceClient;
+  }
+
+  async getBlobClient(fileName: string): Promise<BlockBlobClient> {
+    const blobService = await this.getBlobServiceInstance();
+    const containerName = this.containerName;
+    const containerClient = blobService.getContainerClient(containerName);
+    const blockBlobClient = containerClient.getBlockBlobClient(fileName);
+
+    return blockBlobClient;
+  }
+
+  async uploadFile(file: Express.Multer.File, containerName: string, rowKey: string): Promise<string> {
+    this.containerName = containerName;
+
+    const blockBlobClient = await this.getBlobClient(`${rowKey}/${file.originalname}`);
+    const fileUrl = blockBlobClient.url;
+    
+    await blockBlobClient.uploadData(file.buffer);
+
+    return fileUrl;
+  }
+
+  async downloadFile(containerName: string, rowKey: string, fileName: string): Promise<string> {
+    this.containerName = containerName;
+
+    const blockBlobClient = await this.getBlobClient(`${rowKey}/${fileName}`);
+    const downloadBlockBlobResponse = await blockBlobClient.download();
+    const downloaded: string = (await this.streamToBuffer(downloadBlockBlobResponse.readableStreamBody)).toString()
+    
+    return downloaded
+  }
+
+  async deleteFile(containerName: string, rowKey:string, fileName: string): Promise<void> {
+      this.containerName = containerName;
+
+      const blockBlobClient = await this.getBlobClient(`${rowKey}/${fileName}`);
+
+      await blockBlobClient.deleteIfExists();
+  }
+}

api/src/log/interceptors/log.interceptor.ts

@@ -0,0 +1,41 @@
+import { CallHandler, ExecutionContext, NestInterceptor } from '@nestjs/common';
+import { Observable, map } from 'rxjs';
+
+export class LogInterceptor implements NestInterceptor {
+  intercept(context: ExecutionContext, handler: CallHandler): Observable<any> {
+    const req = context.switchToHttp().getRequest();
+    const authHeader = req.headers.authorization;
+    const token = authHeader && authHeader.split(' ')[1];
+    console.log(token)
+
+    if (!token) {
+      return handler.handle().pipe(
+        map((data) => {
+          if (data.length) {
+            const logs = data.map((log) => {
+              return {
+                partitionKey: log.partitionKey,
+                rowKey: log.rowKey,
+                pilotId: log.pilotId,
+                pilotName: log.pilotName,
+                date: log.date,
+                aircraftMakeModel: log.aircraftMakeModel,
+                routeFrom: log.routeFrom,
+                routeTo: log.routeTo,
+                durationOfFlight: log.durationOfFlight,
+                tracks: log.tracks,
+                notes: log.notes
+              };
+            });
+
+            return logs;
+          } else {
+            return data;
+          }
+        })
+      );
+    }
+
+    return handler.handle().pipe(map((data) => data));
+  }
+}

api/src/log/log.controller.ts

@@ -7,21 +7,31 @@ import {
   Param,
   Post,
   Put,
-  UseGuards
+  Query,
+  StreamableFile,
+  UploadedFile,
+  UseGuards,
+  UseInterceptors
 } from '@nestjs/common';
 import { LogDto } from './log.dto';
 import { Log } from './log.entity';
 import { LogService } from './log.service';
 import { CustomError } from '../error/customError';
-import { Public } from '@noahspan/noahspan-modules';
-
+import { AuthGuard } from '@noahspan/noahspan-modules';
+import { LogInterceptor } from './interceptors/log.interceptor';
+import { FileService } from '../file/file.service';
+import { FileInterceptor } from '@nestjs/platform-express';
 
 @Controller('logs')
 export class LogController {
-  constructor(private readonly logService: LogService) {}
+  constructor(
+    private readonly fileService: FileService,
+    private readonly logService: LogService
+  ) {}
 
-  @Public()
+ 
   @Get(':partitionKey/:rowKey')
+  @UseInterceptors(new LogInterceptor())
   async find(
     @Param('partitionKey') partitionKey: string,
     @Param('rowKey') rowKey: string
@@ -35,8 +45,8 @@ export class LogController {
     }
   }
 
-  @Public()
   @Get()
+  @UseInterceptors(new LogInterceptor())
   async findAll(): Promise<Log[]> {
     try {
       return await this.logService.findAll();
@@ -47,6 +57,7 @@ export class LogController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Post()
   async create(@Body() logDto: LogDto): Promise<Log> {
     try {
@@ -62,6 +73,7 @@ export class LogController {
     }
   }
 
+  @UseGuards(AuthGuard)  
   @Put(':partitionKey/:rowKey')
   async update(
     @Param('partitionKey') partitionKey: string,
@@ -81,6 +93,7 @@ export class LogController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Delete(':partitionKey/:rowKey')
   async delete(
     @Param('partitionKey') partitionKey: string,
@@ -94,4 +107,42 @@ export class LogController {
       throw new HttpException(customError.message, customError.statusCode);
     }
   }
+
+  @UseGuards(AuthGuard)
+  @Post(':partitionKey/:rowKey/track')
+  @UseInterceptors(FileInterceptor('file'))
+  async createTrack(@Param('rowKey') rowKey: string, @UploadedFile() file: Express.Multer.File) {
+    try {
+      const containerName = 'tracks';
+      const url = await this.fileService.uploadFile(file, containerName, rowKey);
+  
+      return { url }
+    } catch (error) {
+      const customError = error as CustomError;
+
+      throw new HttpException(customError.message, customError.statusCode);
+    }
+  }
+
+  @Get(':partitionKey/:rowKey/track')
+  async downloadTrack(@Param('rowKey') rowKey: string, @Query('fileName') fileName: string): Promise<string> {
+    const containerName = 'tracks';
+    const downloadedFile: string = await this.fileService.downloadFile(containerName, rowKey, fileName)
+
+    return downloadedFile;
+  }
+
+  @UseGuards(AuthGuard)
+  @Delete(':partitionKey/:rowKey/track')
+  async deleteTrack(@Param('rowKey') rowKey: string, @Query('fileName') fileName: string): Promise<void> {
+    try {
+      const containerName = 'tracks';
+      
+      return await this.fileService.deleteFile(containerName, rowKey, fileName)
+    } catch (error) {
+      const customError = error as CustomError;
+
+      throw new HttpException(customError.message, customError.statusCode);
+    }
+  }
 }

api/src/log/log.dto.ts

@@ -22,5 +22,6 @@ export class LogDto {
   night: number;
   solo: number;
   pilotInCommand: number;
+  tracks: string[];
   notes: string;
 }

api/src/log/log.entity.ts

@@ -24,5 +24,6 @@ export class Log {
   instrumentApproaches?: number | null;
   instrumentHolds?: number | null;
   instrumentNavTrack?: number | null;
+  tracks?: string[];
   notes?: string;
 }

api/src/log/log.module.ts

@@ -4,6 +4,7 @@ import { LogService } from './log.service';
 import { AzureTableStorageModule } from '@noahspan/azure-database';
 import { Log } from './log.entity';
 import { ConfigModule, ConfigService } from '@nestjs/config';
+import { FileService } from '../file/file.service';
 
 @Module({
   imports: [
@@ -22,6 +23,10 @@ import { ConfigModule, ConfigService } from '@nestjs/config';
     }),
   ],
   controllers: [LogController],
-  providers: [LogService]
+  providers: [
+    ConfigService,
+    FileService,
+    LogService
+  ]
 })
 export class LogModule {}

api/src/pilot/interceptors/pilot.interceptor.ts

@@ -16,10 +16,12 @@ export class PilotInterceptor implements NestInterceptor {
                 partitionKey: pilot.partitionKey,
                 rowKey: pilot.rowKey,
                 id: pilot.id,
-                name: pilot.name
+                name: pilot.name,
+                certificates: pilot.certificates,
+                endorsements: pilot.endorsements
               };
             });
-            console.log(pilots)
+
             return pilots;
           } else {
             return data;

api/src/pilot/pilot.controller.ts

@@ -7,13 +7,14 @@ import {
   Param,
   Post,
   Put,
+  UseGuards,
   UseInterceptors,
 } from '@nestjs/common';
 import { PilotDto } from './pilot.dto';
 import { Pilot } from './pilot.entity';
 import { PilotService } from './pilot.service';
 import { CustomError } from '../error/customError';
-import { Public } from '@noahspan/noahspan-modules'
+import { AuthGuard } from '@noahspan/noahspan-modules'
 import { PilotInterceptor } from './interceptors/pilot.interceptor';
 
 @Controller('pilots')
@@ -21,7 +22,6 @@ import { PilotInterceptor } from './interceptors/pilot.interceptor';
 export class PilotController {
   constructor(private readonly pilotService: PilotService) {}
 
-  @Public()
   @Get(':partitionKey/:rowKey')
   async find(
     @Param('partitionKey') partitionKey: string,
@@ -36,7 +36,6 @@ export class PilotController {
     }
   }
 
-  @Public()
   @Get()
   async findAll() {
     try {
@@ -48,6 +47,7 @@ export class PilotController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Post()
   async create(@Body() pilotDto: PilotDto) {
     try {
@@ -78,6 +78,7 @@ export class PilotController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Put(':partitionKey/:rowKey')
   async update(
     @Param('partitionKey') partitionKey: string,
@@ -112,6 +113,7 @@ export class PilotController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Delete(':partitionKey/:rowKey')
   async delete(
     @Param('partitionKey') partitionKey: string,

app/.gitignore

@@ -1,5 +1,4 @@
 # Logs
-logs
 *.log
 npm-debug.log*
 yarn-debug.log*

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,16 +13,21 @@
   "dependencies": {
     "@azure/msal-browser": "^4.0.1",
     "@azure/msal-react": "^3.0.1",
-    "@noahspan/noahspan-components": "^1.4.0",
+    "@noahspan/noahspan-components": "1.6.0",
     "axios": "^1.7.2",
     "dotenv": "^16.4.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "leaflet": "^1.9.4",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
     "react-hook-form": "^7.51.4",
-    "react-router-dom": "^6.23.0"
+    "react-leaflet": "^5.0.0",
+    "react-leaflet-kml": "^2.1.2",
+    "react-router-dom": "^6.23.0",
+    "swiper": "^11.2.6"
   },
   "devDependencies": {
     "@microsoft/microsoft-graph-types": "^2.40.0",
+    "@types/leaflet": "^1.9.16",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",

app/src/App.tsx

@@ -1,6 +1,7 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
-import Pilots from './components/pilots/Pilots';
+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 { useIsAuthenticated } from '@azure/msal-react';
 
@@ -19,12 +20,10 @@ const App = () => {
     <>
       <SiteNav />
       <Routes>
-        <Route path="/pilots" element={
-          <ProtectedRoute>
-            <Pilots />
-          </ProtectedRoute>
-        } />
-        <Route path="/" element={<Logbook />} />
+        <Route path='/' element={<Flights />} />
+        <Route path="/logbook" element={<Logbook />} />
+        <Route path="/pilots" element={<Pilots />} />
+        
       </Routes>
     </>
   );

app/src/components/actionMenu/ActionMenu.tsx

@@ -12,7 +12,7 @@ import {
 import { FormMode } from '../../enums/formMode';
 import { useIsAuthenticated } from '@azure/msal-react';
 
-const ActionMenu = ({ id, onDelete, onOpenCloseForm }: IActionMenuProps) => {
+const ActionMenu = ({ id, onDelete, onOpenCloseForm, onOpenCloseTracks }: IActionMenuProps) => {
   const [anchorElAction, setAnchorElAction] = useState<null | HTMLElement>(
     null
   );
@@ -38,12 +38,23 @@ const ActionMenu = ({ id, onDelete, onOpenCloseForm }: IActionMenuProps) => {
         onClose={onCloseActionMenu}
       >
         {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>

app/src/components/actionMenu/IActionMenuProps.tsx

@@ -4,4 +4,5 @@ export interface IActionMenuProps {
   id: string;
   onDelete: (entryId: string) => void;
   onOpenCloseForm: (formMode: FormMode, id: string) => void;
+  onOpenCloseTracks?: (formMode: FormMode, id: string) => void;
 }

app/src/components/flights/Flights.tsx

@@ -0,0 +1,48 @@
+import { Box, Container, Grid, Spinner } from "@noahspan/noahspan-components";
+import LogbookCard from "../logbookCard/LogbookCard";
+import { useEffect, useState } from "react";
+import { useLogs } from "../../hooks/logs/UseLogs";
+import { ILogbookEntry } from "../logbook/ILogbookEntry";
+
+const Flights = () => {
+  const [flights, setFlights] = useState<ILogbookEntry[]>([]);
+  const { logs, isLoading } = useLogs();
+
+  useEffect(() => {
+    const flights: ILogbookEntry[] | undefined = logs?.filter((log: ILogbookEntry) => {
+      if (log.tracks && JSON.parse(log.tracks).length > 0) {
+        return log;
+      }
+    })
+
+    if (flights && flights.length > 0) {
+      setFlights(flights)
+    }
+  }, [logs])
+  
+  return (
+    <Container>
+      <Box sx={{ margin: '20px' }}>
+        <Grid container spacing={2}>
+          {isLoading &&
+            <>
+              <Grid display="flex" justifyContent="center" size={12}>
+                <Spinner />
+              </Grid>
+              <Grid display="flex" justifyContent="center" size={12}>
+                Loading...
+              </Grid>
+            </>
+          }
+          {!isLoading &&
+            <Grid size={12}>
+              <LogbookCard logs={flights} mode='flights' />
+            </Grid>
+          }
+        </Grid>
+      </Box>
+    </Container>
+  )
+}
+
+export default Flights;

app/src/components/logTrackMaps/LogTrackMaps.css

@@ -0,0 +1,53 @@
+#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;
+}

app/src/components/logTrackMaps/LogTrackMaps.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import { LogTrackMapsProps } from './LogTrackMapsProps.interface';
+import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
+import { AxiosInstance, AxiosResponse } from 'axios';
+import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
+import { useIsAuthenticated } from '@azure/msal-react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination } from 'swiper/modules';
+import { MapContainer, TileLayer } from 'react-leaflet';
+import ReactLeafletKml from 'react-leaflet-kml';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css';
+import './LogTrackMaps.css';
+import 'leaflet/dist/leaflet.css';
+
+const LogTrackMaps = ({ rowKey, trackUrls }: LogTrackMapsProps) => {
+  const [tracks, setTracks] = useState<any[]>([])
+  const httpClient: AxiosInstance = useHttpClient();
+  const { getAccessToken } = useAccessToken();
+  const isAuthenticated = useIsAuthenticated();
+  
+  useEffect(() => {
+    const getTracks = async () => {
+      const convertedTracks: any[] = []
+
+      for (const trackUrl of trackUrls) {
+        const trackUrlSplit = trackUrl.split('/')
+        const filename = trackUrlSplit[trackUrlSplit.length - 1];
+        const config = isAuthenticated
+          ? { headers: { Authorization: await getAccessToken() } }
+          : {};
+        const response: AxiosResponse = await httpClient.get(
+          `api/logs/log/${rowKey}/track?fileName=${filename}`,
+          config
+        );
+        const kml = new DOMParser().parseFromString(response.data, 'text/xml')
+         
+        convertedTracks.push(kml);
+      }
+
+      setTracks(convertedTracks)
+    }
+
+    getTracks();
+  }, [trackUrls])
+
+  return (
+    <>
+      <Swiper
+        spaceBetween={30}
+        pagination={{
+          clickable: true,
+        }}
+        modules={[Pagination]}
+        className="mySwiper"
+      >
+        {tracks.length > 0 && tracks.map((track) => {
+          return (
+            <SwiperSlide>
+              <MapContainer 
+                center={[45.14489, -93.21019]} 
+                scrollWheelZoom={false}
+                style={{ height: '500px', width: '100%' }}
+                zoom={8}
+              >
+                <TileLayer
+                  attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+                <ReactLeafletKml kml={track} />
+              </MapContainer>
+            </SwiperSlide>
+          )
+        })}
+      </Swiper>
+    </>
+  );
+}
+
+export default LogTrackMaps;

app/src/components/logTrackMaps/LogTrackMapsProps.interface.ts

@@ -0,0 +1,4 @@
+export interface LogTrackMapsProps {
+  rowKey: string;
+  trackUrls: string[];
+}

app/src/components/logTracks/LogTracks.tsx

@@ -0,0 +1,209 @@
+import { useEffect, useReducer } from "react";
+import { Button, Drawer, Grid, Icon, IconButton, IconName, Spinner, TextField, theme, Typography, useMediaQuery } from "@noahspan/noahspan-components";
+import { useHttpClient } from "../../hooks/httpClient/UseHttpClient";
+import { AxiosInstance, AxiosResponse } from "axios";
+import { useAccessToken } from "../../hooks/accessToken/UseAcessToken";
+import { LogTracksProps } from "./LogTracksProps.interface";
+import { FormMode } from "../../enums/formMode";
+import { useIsAuthenticated } from "@azure/msal-react";
+import { ILogbookEntry } from "../logbook/ILogbookEntry";
+import ConfirmationDialog from "../confirmationDialog/ConfirmationDialog";
+import { initialState, reducer } from "./reducer";
+import LogTrackMaps from "../logTrackMaps/LogTrackMaps";
+
+const LogTracks = ({ isDrawerOpen, mode, onOpenClose, selectedRowKey }: LogTracksProps) => {
+  const [state, dispatch] = useReducer(reducer, initialState)
+  const httpClient: AxiosInstance = useHttpClient();
+  const { getAccessToken } = useAccessToken();
+  const isAuthenticated = useIsAuthenticated();
+  
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
+
+  const getConfig = async () => {
+    const config = isAuthenticated
+      ? { headers: { Authorization: await getAccessToken() } }
+      : {};
+
+    return config
+  }
+
+  const getLog = async (): Promise<ILogbookEntry> => {
+    const logResponse: AxiosResponse = await httpClient.get(
+      `api/logs/log/${selectedRowKey}`,
+      await getConfig()
+    );
+    const logData: ILogbookEntry = logResponse.data;
+
+    return logData
+  }
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    try {
+      dispatch({ type: 'SET_IS_LOADING', payload: true})
+
+      const file = event.target.files![0]
+      const formData = new FormData();
+      const config = await getConfig();
+      const formDataConfig = {
+        headers: {
+          ...config.headers,
+          'Content-Type': 'multipart/form-data'
+        }
+      }
+      
+      formData.append('file', file);
+
+      const uploadResponse: AxiosResponse = await httpClient.post(`api/logs/log/${selectedRowKey}/track`, formData, formDataConfig);
+      const uploadUrl = uploadResponse.data.url;
+      const log = await getLog();
+      const tracks: string[] = JSON.parse(log.tracks!);
+
+      tracks.push(uploadUrl)
+      log.tracks = JSON.stringify(tracks);
+      await httpClient.put(`api/logs/log/${selectedRowKey}`, log, config);
+      
+      const updatedLog = await getLog();
+
+      dispatch({ type: 'SET_TRACKS', payload: JSON.parse(updatedLog.tracks!) })
+    } catch (error) {
+      console.log(error)
+    } finally {
+      dispatch({ type: 'SET_IS_LOADING', payload: false });
+    }
+  }
+
+  const onCancel = () => {
+    onOpenClose(FormMode.CANCEL)
+  }
+
+  const onDeleteTrack = async (fileName: string, index: number) => {
+    dispatch({ type: 'SET_ON_DELETE_TRACK', payload: { isConfirmDialogOpen: true, selectedTrack: { fileName: fileName, index: index }}})
+  }
+
+  const onConfirmDialogConfirm = async () => {
+    try {
+      const config = await getConfig();
+
+      await httpClient.delete(`api/logs/log/${selectedRowKey}/track?fileName=${state.selectedTrack!.fileName}`, config);
+
+      const log = await getLog();
+      const tracks: string[] = JSON.parse(log.tracks!);
+
+      tracks.splice(state.selectedTrack!.index, 1);
+      log.tracks = JSON.stringify(tracks);
+      await httpClient.put(`api/logs/log/${selectedRowKey}`, log, config);
+
+      const updatedLog = await getLog();
+
+      dispatch({ type: 'SET_TRACKS', payload: JSON.parse(updatedLog.tracks!) })
+      dispatch({ type: 'SET_IS_CONFIRM_DIALOG_OPEN', payload: false })
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  const onConfirmDialogCancel = async () => {
+    dispatch({ type: 'SET_IS_CONFIRM_DIALOG_OPEN', payload: false })
+  }
+
+  useEffect(() => {
+    const updateTracks = async () => {
+      const log = await getLog();
+      
+      dispatch({ type: 'SET_TRACKS', payload: JSON.parse(log.tracks!) });
+    }
+
+    updateTracks();
+  }, [])
+
+  return (
+    <Drawer
+      open={isDrawerOpen}
+      anchor='right'
+      PaperProps={{
+        sx: {
+          padding: '30px',
+          width: isMedium ? '33%' : '75%'
+        }
+      }}
+    >
+      <Grid container spacing={2}>
+        <Grid size={11}>
+          <Typography variant="h4">{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Tracks`}</Typography>
+        </Grid>
+        <Grid display="flex" justifyContent="right" size={1}>
+          <IconButton disabled={state.isLoading ? true : false} onClick={onCancel}>
+            <Icon iconName={IconName.XMARK} />
+          </IconButton>
+        </Grid>
+        {mode === FormMode.EDIT &&
+          <>
+            {state.isLoading &&
+              <>
+                <Grid display="flex" justifyContent="center" size={12}>
+                  <Spinner />
+                </Grid>
+                <Grid display="flex" justifyContent="center" size={12}>
+                  Loading...
+                </Grid>
+              </>
+            }
+            {!state.isLoading && state.tracks.length > 0 && state.tracks.map((track, index) => {
+              const trackSplit = track.split('/')
+              const filename = trackSplit[trackSplit.length - 1];
+
+              return (
+                <>
+                  <Grid size={11}>
+                    <TextField disabled={true} fullWidth value={filename} />
+                  </Grid>
+                  <Grid size={1}>
+                    <IconButton onClick={() => onDeleteTrack(filename, index)}><Icon iconName={IconName.TRASH} /></IconButton>
+                  </Grid>
+                </>
+              )
+            })}
+            <Grid display='flex' gap={2} justifyContent='right' size={12}>
+              <Button
+                disabled={state.isLoading ? true : false}
+                startIcon={<Icon iconName={IconName.XMARK} />}
+                variant="outlined"
+                onClick={onCancel}
+                size="small"
+              >
+                {mode.toString() !== FormMode.VIEW ? 'Cancel' : 'Close'}
+              </Button>
+              {mode.toString() !== FormMode.VIEW && (
+                <Button
+                  component='label'
+                  disabled={state.isLoading ? true : false}
+                  startIcon={<Icon iconName={IconName.UPLOAD} />}
+                  variant='contained'
+                >
+                  Upload Track
+                  <input hidden onChange={handleFileUpload} type='file' />
+                </Button>
+              )}
+            </Grid>
+          </>
+        }
+        {mode === FormMode.VIEW && 
+          <LogTrackMaps rowKey={selectedRowKey!} trackUrls={state.tracks} />
+        }
+      </Grid>
+      {state.isConfirmDialogOpen && (
+        <ConfirmationDialog
+          contentText="Are you sure you want to delete this track?"
+          isLoading={state.isConfirmDialogLoading}
+          isOpen={state.isConfirmDialogOpen}
+          onCancel={onConfirmDialogCancel}
+          onConfirm={onConfirmDialogConfirm}
+          title="Confirm Delete"
+        />
+      )}
+      
+    </Drawer>
+  )
+}
+
+export default LogTracks;

app/src/components/logTracks/LogTracksProps.interface.ts

@@ -0,0 +1,8 @@
+import { FormMode } from "../../enums/formMode";
+
+export interface LogTracksProps {
+  isDrawerOpen: boolean;
+  mode: FormMode;
+  onOpenClose: (mode: FormMode) => void;
+  selectedRowKey: string | undefined;
+}

app/src/components/logTracks/LogTracksState.interface.ts

@@ -0,0 +1,10 @@
+export interface LogTracksState {
+  isConfirmDialogOpen: boolean;
+  isConfirmDialogLoading: boolean;
+  isLoading: boolean;
+  selectedTrack: {
+    fileName: string,
+    index: number
+  } | undefined;
+  tracks: string[];
+}

app/src/components/logTracks/reducer.ts

@@ -0,0 +1,55 @@
+import { LogTracksState } from "./LogTracksState.interface";
+
+type Action = 
+  | { type: 'SET_IS_CONFIRM_DIALOG_OPEN'; payload: boolean }
+  | { type: 'SET_IS_CONFORM_DIALOG_LOADING'; payload: boolean }
+  | { type: 'SET_IS_LOADING'; payload: boolean }
+  | { type: 'SET_ON_DELETE_TRACK'; payload: { isConfirmDialogOpen: boolean, selectedTrack: { fileName: string, index: number } }}
+  | { type: 'SET_TRACKS'; payload: string[] };
+
+export const initialState: LogTracksState = {
+  isConfirmDialogOpen: false,
+  isConfirmDialogLoading: false,
+  isLoading: false,
+  selectedTrack: undefined,
+  tracks: []
+}
+
+export const reducer = (state: LogTracksState, action: Action): LogTracksState => {
+  switch (action.type) {
+    case 'SET_IS_CONFIRM_DIALOG_OPEN': {
+      return {
+        ...state,
+        isConfirmDialogOpen: action.payload
+      }
+    }
+    case 'SET_IS_CONFORM_DIALOG_LOADING': {
+      return {
+        ...state,
+        isConfirmDialogLoading: action.payload
+      }
+    }
+    case 'SET_IS_LOADING': {
+      return {
+        ...state,
+        isLoading: action.payload
+      }
+    }
+    case 'SET_ON_DELETE_TRACK': {
+      return {
+        ...state,
+        isConfirmDialogOpen: action.payload.isConfirmDialogOpen,
+        selectedTrack: action.payload.selectedTrack
+      }
+    }
+    case 'SET_TRACKS': {
+      return {
+        ...state,
+        tracks: action.payload
+      }
+    }
+    default: {
+      return state
+    }
+  }
+}

app/src/components/logbook/ILogbookEntry.ts

@@ -1,8 +1,11 @@
+import { ColumnDef } from "@noahspan/noahspan-components";
+
 export interface ILogbookEntry {
   partitionKey: string;
   rowKey: string;
   id: string;
   pilotId: string;
+  pilotName: string;
   date: string;
   aircraftMakeModel: string;
   aircraftIdentity: string;
@@ -24,4 +27,6 @@ export interface ILogbookEntry {
   night: number | null;
   solo: number | null;
   pilotInCommand: number | null;
+  tracks: string | undefined;
+  notes: string;
 }

app/src/components/logbook/ILogbookState.ts

@@ -1,14 +1,18 @@
+import { ColumnDef } from '@noahspan/noahspan-components';
 import { FormMode } from '../../enums/formMode';
 import { Alert } from '../../interfaces/Alert.interface';
 import { ILogbookEntry } from './ILogbookEntry';
 
 export interface ILogbookState {
   alert: Alert | undefined;
+  columns: ColumnDef<ILogbookEntry>[];
   entries: ILogbookEntry[];
   formMode: FormMode;
   isConfirmDialogLoading: boolean;
   isConfirmDialogOpen: boolean;
   isFormOpen: boolean;
   isLoading: boolean;
+  isTracksOpen: boolean;
   selectedEntryId: string | undefined;
+  tracksMode: FormMode;
 }

app/src/components/logbook/Logbook.tsx

@@ -7,10 +7,13 @@ import {
   ColumnDef,
   Grid,
   Icon,
+  IconButton,
   IconName,
   Spinner,
   Table,
-  Typography
+  theme,
+  Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { initialState, reducer } from './reducer';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
@@ -18,21 +21,54 @@ import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
 import { useIsAuthenticated } from '@azure/msal-react';
 import { FormMode } from '../../enums/formMode';
+import { authColumns, unauthColumns } from './columns';
 import ActionMenu from '../actionMenu/ActionMenu';
 import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
 import { ILogbookEntry } from './ILogbookEntry';
+import LogbookCard from '../logbookCard/LogbookCard';
+import LogTracks from '../logTracks/LogTracks';
 
 const Logbook: React.FC<unknown> = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const httpClient: AxiosInstance = useHttpClient();
   const isAuthenticated = useIsAuthenticated();
   const { getAccessToken } = useAccessToken();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
+  const actionsColumn: ColumnDef<ILogbookEntry> = {
+    header: 'Actions',
+    meta: {
+      align: 'center',
+      headerAlign: 'center'
+    },
+    cell: (info: any) => (
+      <ActionMenu
+        id={info.row.original.rowKey}
+        onDelete={onDeleteEntry}
+        onOpenCloseForm={onOpenCloseEntryForm}
+        onOpenCloseTracks={onOpenCloseTracks}
+      />
+    )
+  }
+  const tracksColumn: ColumnDef<ILogbookEntry> = {
+    accessorKey: 'tracks',
+    header: 'Tracks',
+    cell: (info: any) => {
+      if (info.row.original.tracks && JSON.parse(info.row.original.tracks).length > 0) {
+        return (
+          <IconButton onClick={() => onOpenCloseTracks(FormMode.VIEW, info.row.original.rowKey)}><Icon iconName={IconName.MAP_LOCATION_DOT} /></IconButton>
+        )
+      }
+    }
+  }
 
   const getLogbookEntries = async () => {
     try {
       dispatch({ type: 'SET_IS_LOADING', payload: true });
 
-      const response: AxiosResponse = await httpClient.get(`api/logs`);
+      const config = isAuthenticated
+        ? { headers: { Authorization: await getAccessToken() } }
+        : {};
+      const response: AxiosResponse = await httpClient.get(`api/logs`, config);
       const entries: ILogbookEntry[] = response.data;
       
       entries.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
@@ -87,6 +123,34 @@ const Logbook: React.FC<unknown> = () => {
     }
   };
 
+  const onOpenCloseTracks = (mode: FormMode, rowKey?: string) => {
+    switch(mode) {
+      case FormMode.EDIT:
+      case FormMode.VIEW:
+        dispatch({
+          type: 'SET_OPEN_CLOSE_TRACKS',
+          payload: {
+            tracksMode: mode,
+            isTracksOpen: true,
+            selectedRowKey: rowKey
+          }
+        })
+
+        break;
+      case FormMode.CANCEL:
+        dispatch({
+          type: 'SET_OPEN_CLOSE_TRACKS',
+          payload: {
+            tracksMode: mode,
+            isTracksOpen: false,
+            selectedRowKey: undefined
+          }
+        })
+
+        break;
+    }
+  }
+
   const onDeleteEntry = (entryId: string) => {
     dispatch({
       type: 'SET_DELETE',
@@ -129,240 +193,44 @@ const Logbook: React.FC<unknown> = () => {
     });
   };
 
-  const columns: ColumnDef<ILogbookEntry>[] = [
-    {
-      accessorKey: 'pilotName',
-      header: 'Pilot'
-    },
-    {
-      accessorKey: 'date',
-      header: 'Date'
-    },
-    {
-      accessorKey: 'aircraftMakeModel',
-      header: 'Aircraft Make & Model'
-    },
-    {
-      accessorKey: 'aircraftIdentity',
-      header: 'Aircraft Identity'
-    },
-    {
-      id: 'route',
-      header: 'Route of Flight',
-      meta: {
-        headerAlign: 'center'
-      },
-      columns: [
-        {
-          accessorKey: 'routeFrom',
-          header: 'From'
-        },
-        {
-          accessorKey: 'routeTo',
-          header: 'To'
-        }
-      ]
-    },
-    {
-      accessorKey: 'durationOfFlight',
-      header: 'Duration Of Flight',
-      meta: {
-        align: 'right',
-        headerAlign: 'right'
-      },
-      cell: (info: any) =>
-        info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-    },
-    {
-      accessorKey: 'singleEngineLand',
-      header: 'Single Engine Land',
-      meta: {
-        align: 'right',
-        headerAlign: 'right'
-      },
-      cell: (info: any) =>
-        info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-    },
-    {
-      id: 'landings',
-      header: 'Landings',
-      meta: {
-        headerAlign: 'center'
-      },
-      columns: [
-        {
-          accessorKey: 'landingsDay',
-          header: 'Day',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          }
-        },
-        {
-          accessorKey: 'landingsNight',
-          header: 'Night',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          }
-        }
-      ]
-    },
-    {
-      id: 'instrument',
-      header: 'Instrument',
-      meta: {
-        headerAlign: 'center'
-      },
-      columns: [
-        {
-          accessorKey: 'instrumentActual',
-          header: 'Actual',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'instrumentSimulated',
-          header: 'Simulated',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'instrumentApproaches',
-          header: 'Approaches',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          }
-        },
-        {
-          accessorKey: 'instrumentHolds',
-          header: 'Holds',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          }
-        },
-        {
-          accessorKey: 'instrumentNavTrack',
-          header: 'Nav/Track',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          }
-        }
-      ]
-    },
-    {
-      id: 'experienceTraining',
-      header: 'Type of pilot experience or training',
-      meta: {
-        headerAlign: 'center'
-      },
-      columns: [
-        {
-          accessorKey: 'groundTrainingReceived',
-          header: 'Ground Training Received',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'flightTrainingReceived',
-          header: 'Flight Training Received',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'crossCountry',
-          header: 'Cross Country',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'night',
-          header: 'Night',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'solo',
-          header: 'Solo',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'pilotInCommand',
-          header: 'Pilot In Command',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        }
-      ]
-    },
-    {
-      accessorKey: 'notes',
-      header: 'Notes'
-    },
-    {
-      header: 'Actions',
-      meta: {
-        align: 'center',
-        headerAlign: 'center'
-      },
-      cell: (info: any) => (
-        <ActionMenu
-          id={info.row.original.rowKey}
-          onDelete={onDeleteEntry}
-          onOpenCloseForm={onOpenCloseEntryForm}
-        />
-      )
+  useEffect(() => {
+    let newColumns: ColumnDef<ILogbookEntry>[];
+
+    if (isAuthenticated) {
+      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 })
+  }, [isAuthenticated])
 
   useEffect(() => {
     if (!state.isFormOpen) {
       getLogbookEntries();
     }
-  }, [state.isFormOpen]);
+  }, [state.isFormOpen, state.isTracksOpen]);
 
   return (
     <Box sx={{ margin: '20px' }}>
       <Grid container spacing={2}>
-        <Grid size={11}>
+        <Grid size={isMedium ? 11 : 6}>
           <Typography variant="h4">Logbook</Typography>
         </Grid>
-        <Grid display="flex" justifyContent="right" size={1}>
+        <Grid display="flex" justifyContent="right" size={isMedium ? 1 : 6}>
           {isAuthenticated &&
             <Button
               onClick={() => onOpenCloseEntryForm(FormMode.ADD)}
@@ -389,9 +257,12 @@ const Logbook: React.FC<unknown> = () => {
         )}
         {!state.isLoading && (
           <Grid size={12}>
-            {state.entries.length > 0 && (
-              <Table columns={columns} data={state.entries} />
+            {isMedium && state.columns && state.columns.length > 0 && state.entries.length > 0 && (
+              <Table columns={state.columns} data={state.entries} />
             )}
+            {!isMedium && state.entries.length > 0 &&
+              <LogbookCard logs={state.entries} onDelete={onDeleteEntry} mode='logbook' onOpenCloseForm={onOpenCloseEntryForm} />
+            }
           </Grid>
         )}
         {state.isLoading && !state.alert && (
@@ -423,6 +294,14 @@ const Logbook: React.FC<unknown> = () => {
           title="Confirm Delete"
         />
       )}
+      {state.isTracksOpen && 
+        <LogTracks
+          isDrawerOpen={state.isTracksOpen}
+          mode={state.tracksMode}
+          onOpenClose={(mode) => onOpenCloseTracks(mode)}
+          selectedRowKey={state.selectedEntryId}
+        />
+      }
     </Box>
   );
 };

app/src/components/logbook/columns.tsx

@@ -0,0 +1,252 @@
+import {
+  ColumnDef,
+  Icon,
+  IconButton,
+  IconName
+} from '@noahspan/noahspan-components';
+import { ILogbookEntry } from './ILogbookEntry';
+
+const pilotName: ColumnDef<ILogbookEntry> = {
+  id: 'pilotName',
+  accessorKey: 'pilotName',
+  header: 'Pilot'
+}
+const date: ColumnDef<ILogbookEntry> = {
+  id: 'date',
+  accessorKey: 'date',
+  header: 'Date'
+}
+const aircraftMakeModel: ColumnDef<ILogbookEntry> = {
+  id: 'aircraftMakeModel',
+  accessorKey: 'aircraftMakeModel',
+  header: 'Aircraft Make & Model'
+}
+const route: ColumnDef<ILogbookEntry> = {
+  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<ILogbookEntry> = {
+  id: 'durationOfFlight',
+  accessorKey: 'durationOfFlight',
+  header: 'Duration Of Flight',
+  meta: {
+    align: 'right',
+    headerAlign: 'right'
+  },
+  cell: (info: any) =>
+    info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+}
+const notes: ColumnDef<ILogbookEntry> = {
+  id: 'notes',
+  accessorKey: 'notes',
+  header: 'Notes'
+}
+
+export const unauthColumns: ColumnDef<ILogbookEntry>[] = [
+  pilotName,
+  date,
+  aircraftMakeModel,
+  route,
+  durationOfFlight,
+  notes
+]
+
+export const authColumns: ColumnDef<ILogbookEntry>[] = [
+  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: any) =>
+      info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+  },
+  {
+    id: 'landings',
+    header: 'Landings',
+    meta: {
+      headerAlign: 'center'
+    },
+    columns: [
+      {
+        id: 'landingsDay',
+        accessorKey: 'landingsDay',
+        header: 'Day',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        }
+      },
+      {
+        id: 'landingsNight',
+        accessorKey: 'landingsNight',
+        header: 'Night',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        }
+      }
+    ]
+  },
+  {
+    id: 'instrument',
+    header: 'Instrument',
+    meta: {
+      headerAlign: 'center'
+    },
+    columns: [
+      {
+        id: 'instrumentActual',
+        accessorKey: 'instrumentActual',
+        header: 'Actual',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'instrumentSimulated',
+        accessorKey: 'instrumentSimulated',
+        header: 'Simulated',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'instrumentApproaches',
+        accessorKey: 'instrumentApproaches',
+        header: 'Approaches',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        }
+      },
+      {
+        id: 'instrumentHolds',
+        accessorKey: 'instrumentHolds',
+        header: 'Holds',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        }
+      },
+      {
+        id: 'instrumentNavTrack',
+        accessorKey: 'instrumentNavTrack',
+        header: 'Nav/Track',
+        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',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'flightTrainingReceived',
+        accessorKey: 'flightTrainingReceived',
+        header: 'Flight Training Received',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'crossCountry',
+        accessorKey: 'crossCountry',
+        header: 'Cross Country',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'night',
+        accessorKey: 'night',
+        header: 'Night',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'solo',
+        accessorKey: 'solo',
+        header: 'Solo',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'pilotInCommand',
+        accessorKey: 'pilotInCommand',
+        header: 'Pilot In Command',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      }
+    ]
+  },
+  notes
+]

app/src/components/logbook/reducer.ts

@@ -1,9 +1,11 @@
+import { ColumnDef } from '@noahspan/noahspan-components';
 import { FormMode } from '../../enums/formMode';
 import { Alert } from '../../interfaces/Alert.interface';
 import { ILogbookEntry } from './ILogbookEntry';
 import { ILogbookState } from './ILogbookState';
 
 type Action =
+  | { type: 'SET_COLUMNS'; payload: ColumnDef<ILogbookEntry>[] }
   | {
       type: 'SET_DELETE';
       payload: {
@@ -23,17 +25,21 @@ type Action =
         selectedEntryId: string | undefined;
         isFormOpen: boolean;
       };
-    };
+    }
+  | { type: 'SET_OPEN_CLOSE_TRACKS'; payload: { tracksMode: FormMode, selectedRowKey: string | undefined, isTracksOpen: boolean; }};
 
 export const initialState: ILogbookState = {
   alert: undefined,
+  columns: [],
   entries: [],
   formMode: FormMode.CANCEL,
   isConfirmDialogLoading: false,
   isConfirmDialogOpen: false,
   isFormOpen: false,
   isLoading: false,
-  selectedEntryId: undefined
+  isTracksOpen: false,
+  selectedEntryId: undefined,
+  tracksMode: FormMode.CANCEL
 };
 
 export const reducer = (
@@ -41,6 +47,12 @@ export const reducer = (
   action: Action
 ): ILogbookState => {
   switch (action.type) {
+    case 'SET_COLUMNS': {
+      return {
+        ...state,
+        columns: action.payload
+      }
+    }
     case 'SET_DELETE': {
       return {
         ...state,
@@ -86,6 +98,14 @@ export const reducer = (
         selectedEntryId: action.payload.selectedEntryId
       };
     }
+    case 'SET_OPEN_CLOSE_TRACKS': {
+      return {
+        ...state,
+        tracksMode: action.payload.tracksMode,
+        isTracksOpen: action.payload.isTracksOpen,
+        selectedEntryId: action.payload.selectedRowKey
+      }
+    }
     default: {
       return state;
     }

app/src/components/logbookCard/LogbookCard.tsx

@@ -0,0 +1,101 @@
+import { Card, CardContent, CardHeader, Grid, Typography } from "@noahspan/noahspan-components";
+import { LogbookCardProps } from "./LogbookCardProps.interface";
+import ActionMenu from "../actionMenu/ActionMenu";
+import LogTrackMaps from "../logTrackMaps/LogTrackMaps";
+
+
+const LogbookCard = ({ logs, mode, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
+  return (
+    <Grid container spacing={2}>
+      {logs.map((log) => {
+        console.log(log)
+        return (
+          <Grid size={12}>
+            <Card key={log.rowKey}>
+              <CardHeader
+                action={mode === 'logbook' ? <ActionMenu id={log.rowKey} onDelete={onDelete!} onOpenCloseForm={onOpenCloseForm!} /> : null}
+                subheader={log.pilotName}
+                title={log.date}
+                slotProps={{
+                  subheader: {
+                    fontSize: '16px'
+                  },
+                  title: {
+                    fontSize: '24px',
+                  }
+                }}
+              />
+              <CardContent>
+                <Grid container spacing={1}>
+                  {mode === 'flights' && log.tracks && JSON.parse(log.tracks).length > 0 &&
+                    <Grid size={12}>
+                      <LogTrackMaps 
+                        rowKey={log.rowKey}
+                        trackUrls={JSON.parse(log.tracks)}
+                      />
+                    </Grid>
+                  }
+                  <Grid size={12}>
+                    <Typography variant="subtitle2">Aircraft Make and Model</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="body1">{log.aircraftMakeModel}</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="subtitle2">Route From</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="body1">{log.routeFrom}</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="subtitle2">Route To</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="body1">{log.routeTo}</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="subtitle2">Duration Of Flight</Typography>
+                  </Grid>
+                  <Grid size={12}>
+                    <Typography variant="body1">{log.durationOfFlight}</Typography>
+                  </Grid>
+                  {mode === 'logbook' && log.tracks && JSON.parse(log.tracks).length > 0 && 
+                    <>
+                      <Grid size={12}>
+                        <Typography variant="subtitle2">Tracks</Typography>
+                      </Grid>
+                      {JSON.parse(log.tracks).map((track: string) => {
+                        const trackSplit = track.split('/')
+                        const filename = trackSplit[trackSplit.length - 1];
+
+                        return (
+                          <Grid size={12}>
+                            <Typography variant="body1">{filename}</Typography>
+                          </Grid>
+                        )
+                        
+                      })}
+                    </>
+                  }
+                  {log.notes &&
+                    <>
+                      <Grid size={12}>
+                        <Typography variant="subtitle2">Notes</Typography>
+                      </Grid>
+                      <Grid size={12}>
+                        <Typography variant="body1">{log.notes}</Typography>
+                      </Grid>
+                    </>
+                  }
+                </Grid>
+                
+              </CardContent>
+            </Card>
+          </Grid>
+        )
+      })}
+    </Grid>
+  )
+}
+
+export default LogbookCard;

app/src/components/logbookCard/LogbookCardProps.interface.ts

@@ -0,0 +1,9 @@
+import { FormMode } from "../../enums/formMode";
+import { ILogbookEntry } from "../logbook/ILogbookEntry";
+
+export interface LogbookCardProps {
+  logs: ILogbookEntry[];
+  mode: 'flights' | 'logbook';
+  onDelete?: (entryId: string) => void;
+  onOpenCloseForm?: (formMode: FormMode, id: string) => void;
+}

app/src/components/pilotCard/PilotCard.tsx

@@ -0,0 +1,29 @@
+import { Card, CardContent, CardHeader, Grid, Typography } from "@noahspan/noahspan-components"
+import { PilotCardProps } from "./PilotCardProps.interface"
+import ActionMenu from "../actionMenu/ActionMenu"
+
+const PilotCard = ({ pilots, onDelete, onOpenCloseForm }: PilotCardProps) => {
+  return (
+    <Grid container spacing={2}>
+      {pilots.map((pilot) => {
+        return (
+          <Grid size={12}>
+            <Card key={pilot.rowKey}>
+              <CardHeader
+                action={<ActionMenu id={pilot.rowKey} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />}
+                title={pilot.name}
+                slotProps={{
+                  title: {
+                    fontSize: '24px',
+                  }
+                }}
+              />
+            </Card>
+          </Grid>
+        )
+      })}
+    </Grid>
+  )
+}
+
+export default PilotCard;

app/src/components/pilotCard/PilotCardProps.interface.ts

@@ -0,0 +1,8 @@
+import { FormMode } from "../../enums/formMode";
+import { Pilot } from "../pilots/Pilot.interface";
+
+export interface PilotCardProps {
+  pilots: Pilot[];
+  onDelete: (entryId: string) => void;
+  onOpenCloseForm: (formMode: FormMode, id: string) => void;
+}

app/src/components/pilotForm/PilotForm.tsx

@@ -1,19 +1,18 @@
 import { useEffect, useState } from 'react';
 import { useForm, Controller, FormProvider } from 'react-hook-form';
 import {
-  Accordion,
   Button,
-  DatePicker,
   Drawer,
   Grid,
   Icon,
   IconButton,
   IconName,
   PeoplePicker,
-  Select,
   StateSelect,
   TextField,
-  Typography
+  theme,
+  Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { IPilotFormProps } from './IPilotFormProps';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -64,6 +63,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
   });
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [isError, setIsError] = useState<boolean>(false);
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
 
   const onPeoplePickerSearch = async (
     _event: React.SyntheticEvent,
@@ -113,7 +113,6 @@ const PilotForm: React.FC<IPilotFormProps> = ({
   };
 
   const onSubmit = async (data: unknown) => {
-    console.log(data)
     try {
       setIsLoading(true);
 
@@ -167,7 +166,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
 
         pilot.certificates = JSON.parse(pilot.certificates);
         pilot.endorsements = JSON.parse(pilot.endorsements)
-        console.log(pilot)
+
         setSelectedPerson({
           userPrincipalName: pilot.id,
           displayName: pilot.name
@@ -193,12 +192,12 @@ const PilotForm: React.FC<IPilotFormProps> = ({
       PaperProps={{
         sx: {
           padding: '30px',
-          width: '33%'
+          width: isMedium ? '33%' : '75%'
         }
       }}
     >
       <FormProvider {...methods}>
-        <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <form onSubmit={methods.handleSubmit(onSubmit)} style={{ paddingBottom: '50px' }}>
           <Grid container spacing={2}>
             <Grid size={11}>
               <Typography variant="h4">{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Pilot`}</Typography>
@@ -208,10 +207,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                 <Icon iconName={IconName.XMARK} />
               </IconButton>
             </Grid>
-            <Grid size={3}>
+            <Grid size={isMedium ? 3 : 12}>
               <Typography variant="h6">Name *</Typography>
             </Grid>
-            <Grid size={9}>
+            <Grid size={isMedium ? 9 : 12}>
               <PeoplePicker
                 disabled={isDisabled}
                 loading={isPeoplePickerLoading}
@@ -221,172 +220,178 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                 value={selectedPerson}
               />
             </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">Address *</Typography>
-            </Grid>
-            <Grid size={9}>
-              <Controller
-                name="address"
-                control={methods.control}
-                rules={{ required: 'An address is required' }}
-                render={({ field: { onChange, value } }) => (
-                  <TextField
-                    disabled={isDisabled}
-                    error={methods.formState.errors.address ? true : false}
-                    fullWidth
-                    helperText={
-                      methods.formState.errors.address
-                        ? methods.formState.errors.address.message
-                        : undefined
-                    }
-                    onChange={onChange}
-                    value={value}
+            {isAuthenticated &&
+              <>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">Address *</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <Controller
+                    name="address"
+                    control={methods.control}
+                    rules={{ required: 'An address is required' }}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        disabled={isDisabled}
+                        error={methods.formState.errors.address ? true : false}
+                        fullWidth
+                        helperText={
+                          methods.formState.errors.address
+                            ? methods.formState.errors.address.message
+                            : undefined
+                        }
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">City *</Typography>
-            </Grid>
-            <Grid size={9}>
-              <Controller
-                name="city"
-                control={methods.control}
-                rules={{ required: 'A city is required' }}
-                render={({ field: { onChange, value } }) => (
-                  <TextField
-                    disabled={isDisabled}
-                    error={methods.formState.errors.city ? true : false}
-                    fullWidth
-                    helperText={
-                      methods.formState.errors.city
-                        ? methods.formState.errors.city.message
-                        : undefined
-                    }
-                    onChange={onChange}
-                    value={value}
+                </Grid>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">City *</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <Controller
+                    name="city"
+                    control={methods.control}
+                    rules={{ required: 'A city is required' }}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        disabled={isDisabled}
+                        error={methods.formState.errors.city ? true : false}
+                        fullWidth
+                        helperText={
+                          methods.formState.errors.city
+                            ? methods.formState.errors.city.message
+                            : undefined
+                        }
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">State *</Typography>
-            </Grid>
-            <Grid size={9}>
-              <Controller
-                name="state"
-                control={methods.control}
-                rules={{ required: 'A state must be selected' }}
-                render={({ field: { onChange, value } }) => (
-                  <StateSelect
-                    disabled={isDisabled}
-                    // error={methods.formState.errors.state ? true : false}
-                    fullWidth
-                    // helperText={
-                    //   methods.formState.errors.state
-                    //     ? methods.formState.errors.state.message?.toString()
-                    //     : undefined
-                    // }
-                    onChange={onChange}
-                    value={value}
-                    variant="outlined"
-                    data-testid="pilot-form-state-dropdown"
+                </Grid>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">State *</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <Controller
+                    name="state"
+                    control={methods.control}
+                    rules={{ required: 'A state must be selected' }}
+                    render={({ field: { onChange, value } }) => (
+                      <StateSelect
+                        disabled={isDisabled}
+                        // error={methods.formState.errors.state ? true : false}
+                        fullWidth
+                        // helperText={
+                        //   methods.formState.errors.state
+                        //     ? methods.formState.errors.state.message?.toString()
+                        //     : undefined
+                        // }
+                        onChange={onChange}
+                        value={value}
+                        variant="outlined"
+                        data-testid="pilot-form-state-dropdown"
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">Postal Code *</Typography>
-            </Grid>
-            <Grid size={9}>
-              <Controller
-                name="postalCode"
-                control={methods.control}
-                rules={{ required: 'A postal code is required' }}
-                render={({ field: { onChange, value } }) => (
-                  <TextField
-                    disabled={isDisabled}
-                    error={methods.formState.errors.postalCode ? true : false}
-                    fullWidth
-                    helperText={
-                      methods.formState.errors.postalCode
-                        ? methods.formState.errors.postalCode.message
-                        : undefined
-                    }
-                    onChange={onChange}
-                    value={value}
+                </Grid>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">Postal Code *</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <Controller
+                    name="postalCode"
+                    control={methods.control}
+                    rules={{ required: 'A postal code is required' }}
+                    render={({ field: { onChange, value } }) => (
+                      <TextField
+                        disabled={isDisabled}
+                        error={methods.formState.errors.postalCode ? true : false}
+                        fullWidth
+                        helperText={
+                          methods.formState.errors.postalCode
+                            ? methods.formState.errors.postalCode.message
+                            : undefined
+                        }
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">Email</Typography>
-            </Grid>
-            <Grid size={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 } }) => (
-                  <TextField
-                    disabled={isDisabled}
-                    fullWidth
-                    error={methods.formState.errors.email ? true : false}
-                    helperText={
-                      methods.formState.errors.email
-                        ? methods.formState.errors.email.message
-                        : undefined
-                    }
-                    onChange={onChange}
-                    value={value}
+                </Grid>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">Email</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <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 } }) => (
+                      <TextField
+                        disabled={isDisabled}
+                        fullWidth
+                        error={methods.formState.errors.email ? true : false}
+                        helperText={
+                          methods.formState.errors.email
+                            ? methods.formState.errors.email.message
+                            : undefined
+                        }
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
-            </Grid>
-            <Grid size={3}>
-              <Typography variant="h6">Phone Number</Typography>
-            </Grid>
-            <Grid size={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 } }) => (
-                  <TextField
-                    disabled={isDisabled}
-                    fullWidth
-                    error={methods.formState.errors.phone ? true : false}
-                    helperText={
-                      methods.formState.errors.phone
-                        ? methods.formState.errors.phone.message
-                        : undefined
-                    }
-                    onChange={onChange}
-                    value={value}
+                </Grid>
+                <Grid size={isMedium ? 3 : 12}>
+                  <Typography variant="h6">Phone Number</Typography>
+                </Grid>
+                <Grid size={isMedium ? 9 : 12}>
+                  <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 } }) => (
+                      <TextField
+                        disabled={isDisabled}
+                        fullWidth
+                        error={methods.formState.errors.phone ? true : false}
+                        helperText={
+                          methods.formState.errors.phone
+                            ? methods.formState.errors.phone.message
+                            : undefined
+                        }
+                        onChange={onChange}
+                        value={value}
+                      />
+                    )}
                   />
-                )}
-              />
+                </Grid>
+              </>
+            }
+            {isAuthenticated &&
+              <Grid size={12}>
+                <PilotFormMedical
+                  isDisabled={isDisabled}
+                />
+              </Grid>
+            }
+            <Grid size={12}>
+              <PilotFormCertificates isDisabled={isDisabled} mode={mode} />
             </Grid>
             <Grid size={12}>
-              <PilotFormMedical
-                isDisabled={isDisabled}
-              />
-            </Grid>
-            <Grid size={12}>
-              <PilotFormCertificates isDisabled={isDisabled} />
-            </Grid>
-            <Grid size={12}>
-              <PilotFormEndorsements isDisabled={isDisabled} />
+              <PilotFormEndorsements isDisabled={isDisabled} mode={mode} />
             </Grid>
             <Grid display="flex" gap={2} justifyContent="right" size={12}>
               <Button

app/src/components/pilotFormCertificates/PilotFormCertificates.tsx

@@ -8,12 +8,14 @@ import {
   IconName,
   Select,
   TextField,
-  Typography
+  Typography,
 } from '@noahspan/noahspan-components';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { FormMode } from '../../enums/formMode';
 
 const PilotFormCertificates = ({
-  isDisabled
+  isDisabled,
+  mode
 }: PilotFormCertificatesProps ) => {
   const {
     control,
@@ -30,9 +32,11 @@ const PilotFormCertificates = ({
       container
       spacing={2}
     >
-      <Grid size={12}>
-        <Typography variant="h5">Certificates</Typography>
-      </Grid>
+      {fields.length > 0 || mode !== FormMode.VIEW &&
+        <Grid size={12}>
+          <Typography variant="h5">Certificates</Typography>
+        </Grid>
+      }
       {fields.length > 0 && (
         <>
           <Grid size={4}>

app/src/components/pilotFormCertificates/PilotFormCertificatesProps.interface.ts

@@ -1,3 +1,6 @@
+import { FormMode } from "../../enums/formMode";
+
 export interface PilotFormCertificatesProps {
   isDisabled: boolean;
+  mode: FormMode;
 }

app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx

@@ -10,8 +10,10 @@ import {
   Typography
 } from '@noahspan/noahspan-components';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { FormMode } from '../../enums/formMode';
 
 const PilotFormEndorsements = ({
+  mode,
   isDisabled
 }: PilotFormEndorsementsProps) => {
   const {
@@ -30,9 +32,11 @@ const PilotFormEndorsements = ({
       container
       spacing={2}
     >
-      <Grid size={12}>
-        <Typography variant="h5">Endorsements</Typography>
-      </Grid>
+      {fields.length > 0 || mode !== FormMode.VIEW &&
+        <Grid size={12}>
+          <Typography variant="h5">Endorsements</Typography>
+        </Grid>
+      }
       {fields.length > 0 && (
         <>
           <Grid size={8}>

app/src/components/pilotFormEndorsements/PilotFormEndorsementsProps.interface.ts

@@ -1,3 +1,6 @@
+import { FormMode } from "../../enums/formMode";
+
 export interface PilotFormEndorsementsProps {
   isDisabled: boolean;
+  mode: FormMode;
 }

app/src/components/pilotFormMedical/PilotFormMedical.tsx

@@ -1,4 +1,4 @@
-import { DatePicker, Grid, Select, Typography } from '@noahspan/noahspan-components';
+import { DatePicker, Grid, Select, theme, Typography, useMediaQuery } from '@noahspan/noahspan-components';
 import { Controller, useFormContext } from "react-hook-form"
 import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface";
 
@@ -7,17 +7,18 @@ const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
     control,
     formState: { errors },
     setValue
-  } = useFormContext()
+  } = useFormContext();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
 
   return (
     <Grid container spacing={2}>
       <Grid size={12}>
         <Typography variant="h5">Medical</Typography>
       </Grid>
-      <Grid size={3}>
+      <Grid size={isMedium ? 3 : 12}>
         <Typography variant="h6">Class</Typography>
       </Grid>
-      <Grid size={9}>
+      <Grid size={isMedium ? 9 : 12}>
         <Controller
           name="medicalClass"
           control={control}
@@ -53,10 +54,10 @@ const PilotFormMedical = ({ isDisabled }: PilotFormMedicalProps) => {
           }}
         />
       </Grid>
-      <Grid size={3}>
+      <Grid size={isMedium ? 3 : 12}>
         <Typography variant="h6">Expiration</Typography>
       </Grid>
-      <Grid size={9}>
+      <Grid size={isMedium ? 9 : 12}>
         <Controller
           name="medicalExpiration"
           control={control}

app/src/components/pilots/Pilots.tsx

@@ -9,7 +9,9 @@ import {
   Icon,
   IconName,
   Table,
-  Typography
+  theme,
+  Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -20,21 +22,19 @@ import { Pilot } from './Pilot.interface';
 import { initialState, reducer } from './reducer';
 import ActionMenu from '../actionMenu/ActionMenu';
 import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
+import PilotCard from '../pilotCard/PilotCard';
 
 const Pilots: React.FC<unknown> = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const httpClient: AxiosInstance = useHttpClient();
   const isAuthenticated = useIsAuthenticated();
   const { getAccessToken } = useAccessToken();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
 
   const getPilots = async () => {
     try {
-      const config = isAuthenticated
-        ? { headers: { Authorization: await getAccessToken() } }
-        : {};
       const response: AxiosResponse = await httpClient.get(
-        `api/pilots`,
-        config
+        `api/pilots`
       );
  
       if (response.data.length > 0) {
@@ -147,18 +147,18 @@ const Pilots: React.FC<unknown> = () => {
   ];
 
   useEffect(() => {
-    if (isAuthenticated && !state.isFormOpen) {
+    if (!state.isFormOpen) {
       getPilots();
     }
-  }, [isAuthenticated, state.isFormOpen]);
+  }, [state.isFormOpen]);
 
   return (
     <Box sx={{ margin: '20px' }}>
       <Grid container spacing={2}>
-        <Grid size={11}>
+        <Grid size={isMedium ? 11 : 6}>
           <Typography variant="h4">Pilots</Typography>
         </Grid>
-        <Grid display="flex" justifyContent="right" size={1}>
+        <Grid display="flex" justifyContent="right" size={isMedium ? 1 : 6}>
           {isAuthenticated &&
             <Button
               onClick={() => onOpenClosePilotForm(FormMode.ADD)}
@@ -184,7 +184,12 @@ const Pilots: React.FC<unknown> = () => {
           </Grid>
         )}
         <Grid size={12}>
-          {state.pilots.length > 0 && <Table columns={columns} data={state.pilots} />}
+          {isMedium && state.pilots.length > 0 &&
+            <Table columns={columns} data={state.pilots} />
+          }
+          {!isMedium && state.pilots.length > 0 && 
+            <PilotCard pilots={state.pilots} onDelete={onDeleteEntry} onOpenCloseForm={onOpenClosePilotForm} />
+          }
         </Grid>
       </Grid>
       {state.isFormOpen && (

app/src/components/siteNav/SiteNav.tsx

@@ -32,17 +32,18 @@ const SiteNav = () => {
   const getPages = () => {
     const pages = [
       {
-        name: 'Logbook',
+        name: 'Flights',
         url: '/'
-      }
-    ];
-
-    if (isAuthenticated) {
-      pages.push({
+      },
+      {
+        name: 'Logbook',
+        url: '/logbook'
+      },
+      {
         name: 'Pilots',
         url: '/pilots'
-      })
-    }
+      }
+    ];
 
     setPages(pages)
   };
@@ -82,7 +83,6 @@ const SiteNav = () => {
 
       return imageUrl;
     } catch (error) {
-      console.log(error);
       throw new Error();
     }
   };

app/src/hooks/logs/UseLogs.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import { useHttpClient } from "../httpClient/UseHttpClient";
+import { useAccessToken } from "../accessToken/UseAcessToken";
+import { useIsAuthenticated } from "@azure/msal-react";
+import { AxiosInstance, AxiosResponse } from "axios";
+import { ILogbookEntry } from "../../components/logbook/ILogbookEntry";
+
+export const useLogs = () => {
+  const [logs, setLogs] = useState<ILogbookEntry[]>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const httpClient: AxiosInstance = useHttpClient();
+  const { getAccessToken } = useAccessToken();
+  const isAuthenticated = useIsAuthenticated();
+
+  useEffect(() => {
+    const getLogs = async () => {
+      try {
+        setIsLoading(true);
+
+        const config = isAuthenticated
+          ? { headers: { Authorization: await getAccessToken() } }
+          : {};
+        const response: AxiosResponse = await httpClient.get(
+          `api/logs`,
+          config
+        );
+        const logs: ILogbookEntry[] = response.data;
+
+        logs.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+
+        setLogs(logs)
+      } catch (error) {
+        return error;
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    getLogs();
+  }, [])
+
+  return {
+    logs,
+    isLoading
+  }
+}

app/src/index.css

@@ -1,3 +1,4 @@
 body {
   background-color: #f2f2f2;
+  margin: 8px;
 }

docker-compose.yaml

@@ -2,13 +2,13 @@ version: '3.8'
 
 services:
   azurite:
-    container_name: azurite
+    container_name: azurite-flying
     image: mcr.microsoft.com/azure-storage/azurite
     ports:
       - '10000:10000'
       - '10001:10001'
       - '10002:10002'
-    command: 'azurite --blobHost 0.0.0.0 --queueHost 0.0.0.0 --tableHost 0.0.0.0 --loose'
+    command: 'azurite --blobHost 0.0.0.0 --queueHost 0.0.0.0 --tableHost 0.0.0.0 --loose --skipApiVersionCheck'
     volumes: 
       - ./azurite-flying:/data
 

infrastructure/config/main.tf

@@ -59,6 +59,11 @@ locals {
     prod = "noahspanflyingprod"
   }
 
+  storage_containers = {
+    test = ["tracks"]
+    prod = ["tracks"]
+  }
+
   storage_tables = {
     test = ["logs", "pilots"]
     prod = ["logs", "pilots"]

infrastructure/config/outputs.tf

@@ -46,6 +46,10 @@ output "storage_account_name" {
   value = local.storage_account_name[var.environment]
 }
 
+output "storage_containers" {
+  value = local.storage_containers[var.environment]
+}
+
 output "storage_tables" {
   value = local.storage_tables[var.environment]
 }

infrastructure/main.tf

@@ -2,6 +2,7 @@ module "storage" {
   source = "github.com/noahspannbauer/noahspan-terraform/modules/storage"
   resource_group_name = var.RESOURCE_GROUP_NAME
   storage_account_name = module.environment.storage_account_name
+  storage_containers = module.environment.storage_containers
   storage_tables = module.environment.storage_tables
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noahspan/flying",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "scripts": {
     "start": "concurrently 'npm run start:azure -w api' 'wait-on tcp:0.0.0.0:7071 && npm run dev -w app'",
     "format": "prettier --write \"**/src/**/*.ts\" \"**/test/**/*.ts\"",