Feature/62 limit pilot data for non auth users (#69)

* limiting pilot data for unauthenticated users

* limiting pilot data for unauthenticated users

* limiting pilot data for unauthenticated users

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "",
   "author": "",
   "private": true,
@@ -27,7 +27,7 @@
     "@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",
     "dotenv": "^16.4.7",
     "reflect-metadata": "^0.2.2",

api/src/app.module.ts

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

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

@@ -0,0 +1,39 @@
+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];
+
+    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,
+                notes: log.notes
+              };
+            });
+
+            return logs;
+          } else {
+            return data;
+          }
+        })
+      );
+    }
+
+    return handler.handle().pipe(map((data) => data));
+  }
+}

api/src/log/log.controller.ts

@@ -7,16 +7,19 @@ import {
   Param,
   Post,
   Put,
-  UseGuards
+  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';
 
 
 @Controller('logs')
+@UseInterceptors(new LogInterceptor())
 export class LogController {
   constructor(private readonly logService: LogService) {}
 
@@ -34,7 +37,6 @@ export class LogController {
     }
   }
 
-  @Public()
   @Get()
   async findAll(): Promise<Log[]> {
     try {
@@ -46,6 +48,7 @@ export class LogController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Post()
   async create(@Body() logDto: LogDto): Promise<Log> {
     try {
@@ -61,6 +64,7 @@ export class LogController {
     }
   }
 
+  @UseGuards(AuthGuard)  
   @Put(':partitionKey/:rowKey')
   async update(
     @Param('partitionKey') partitionKey: string,
@@ -80,6 +84,7 @@ export class LogController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Delete(':partitionKey/:rowKey')
   async delete(
     @Param('partitionKey') partitionKey: string,

api/src/main.ts

@@ -9,6 +9,7 @@ async function bootstrap() {
   const httpService = new HttpService();
   const app = await NestFactory.create(AppModule);
 
+  app.enableCors();
   app.setGlobalPrefix('api');
   app.useGlobalFilters(new HttpExceptionFilter());
 

api/src/pilot/certificate/certificate.entity.ts

@@ -1,7 +1,5 @@
 export class Certificate {
-  partitionKey: string;
-  rowKey: string;
   type: string;
-  issueDate: Date;
-  number?: string;
+  issueDate: string;
+  number: string;
 }

api/src/pilot/certificate/certificate.service.ts

@@ -1,37 +0,0 @@
-import { Injectable } from '@nestjs/common';
-import { Repository, InjectRepository } from '@noahspan/azure-database';
-import { Certificate } from './certificate.entity';
-
-@Injectable()
-export class CertificateService {
-  private readonly partitionKey: string = 'certificate';
-
-  constructor(
-    @InjectRepository(Certificate)
-    private readonly certificateRepository: Repository<Certificate>
-  ) {}
-
-  async find(rowKey: string): Promise<Certificate> {
-    return await this.certificateRepository.find(this.partitionKey, rowKey);
-  }
-
-  async findAll(): Promise<Certificate[]> {
-    return await this.certificateRepository.findAll();
-  }
-
-  async create(certificate: Certificate): Promise<Certificate> {
-    return await this.certificateRepository.create(certificate);
-  }
-
-  async update(rowKey: string, certificate: Certificate): Promise<Certificate> {
-    return await this.certificateRepository.update(
-      this.partitionKey,
-      rowKey,
-      certificate
-    );
-  }
-
-  async delete(rowKey: string): Promise<void> {
-    await this.certificateRepository.delete(this.partitionKey, rowKey);
-  }
-}

api/src/pilot/endorsement/endorsement.entity.ts

@@ -1,6 +1,4 @@
 export class Endorsement {
-  partitionkey: string;
-  rowKey: string;
   type: string;
   issueDate: Date;
 }

api/src/pilot/endorsement/endosement.service.ts

@@ -1,37 +0,0 @@
-import { InjectRepository, Repository } from '@noahspan/azure-database';
-import { Injectable } from '@nestjs/common';
-import { Endorsement } from './endorsement.entity';
-
-@Injectable()
-export class EndosementService {
-  private readonly partitionKey: string = 'endorsement';
-
-  constructor(
-    @InjectRepository(Endorsement)
-    private readonly endorsementRepository: Repository<Endorsement>
-  ) {}
-
-  async find(rowKey: string): Promise<Endorsement> {
-    return await this.endorsementRepository.find(this.partitionKey, rowKey);
-  }
-
-  async findAll(): Promise<Endorsement[]> {
-    return await this.endorsementRepository.findAll();
-  }
-
-  async create(endorsement: Endorsement): Promise<Endorsement> {
-    return await this.endorsementRepository.create(endorsement);
-  }
-
-  async update(rowKey: string, endorsement: Endorsement): Promise<Endorsement> {
-    return await this.endorsementRepository.update(
-      this.partitionKey,
-      rowKey,
-      endorsement
-    );
-  }
-
-  async delete(rowKey: string): Promise<void> {
-    await this.endorsementRepository.delete(this.partitionKey, rowKey);
-  }
-}

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

@@ -16,18 +16,15 @@ 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
               };
             });
 
             return pilots;
           } else {
-            return {
-              partitionKey: data.partitionKey,
-              rowKey: data.rowKey,
-              id: data.id,
-              name: data.name
-            };
+            return data;
           }
         })
       );

api/src/pilot/medical/medical.entity.ts

@@ -1,6 +0,0 @@
-export class Medical {
-  partitionKey: string;
-  rowKey: string;
-  certificateClass: string;
-  certificateExpiration: Date;
-}

api/src/pilot/medical/medical.service.ts

@@ -1,33 +0,0 @@
-// import { Injectable } from '@nestjs/common';
-// import { Repository, InjectRepository } from '@noahspan/azure-database';
-// import { Medical } from './medical.entity';
-
-// @Injectable()
-// export class MedicalService {
-//   private readonly partitionKey: string = 'medical';
-
-//   constructor(
-//     @InjectRepository(Medical)
-//     private readonly profileRepository: Repository<Medical>
-//   ) {}
-
-//   async find(rowKey: string): Promise<Medical> {
-//     return this.profileRepository.find(this.partitionKey, rowKey);
-//   }
-
-//   async findAll(): Promise<Medical[]> {
-//     return this.profileRepository.findAll();
-//   }
-
-//   async create(profile: Medical): Promise<Medical> {
-//     return this.profileRepository.create(profile);
-//   }
-
-//   async update(rowKey: string, profile: Medical): Promise<Medical> {
-//     return this.profileRepository.update(this.partitionKey, rowKey, profile);
-//   }
-
-//   async delete(rowKey: string) {
-//     return this.profileRepository.delete(this.partitionKey, rowKey);
-//   }
-// }

api/src/pilot/pilot.controller.ts

@@ -8,14 +8,17 @@ import {
   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 { AuthGuard } from '@nestjs/passport'
+import { AuthGuard } from '@noahspan/noahspan-modules'
+import { PilotInterceptor } from './interceptors/pilot.interceptor';
 
 @Controller('pilots')
+@UseInterceptors(new PilotInterceptor())
 export class PilotController {
   constructor(private readonly pilotService: PilotService) {}
 
@@ -44,12 +47,28 @@ export class PilotController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Post()
   async create(@Body() pilotDto: PilotDto) {
     try {
-      const pilot = new Pilot();
+      let pilot = new Pilot();
       
-      Object.assign(pilot, pilotDto);
+      pilot = {
+        partitionKey: pilotDto.partitionKey,
+        rowKey: pilotDto.rowKey,
+        id: pilotDto.id,
+        name: pilotDto.name,
+        address: pilotDto.address,
+        city: pilotDto.city,
+        state: pilotDto.state,
+        postalCode: pilotDto.postalCode,
+        email: pilotDto.email,
+        phone: pilotDto.phone,
+        medicalClass: pilotDto.medicalClass,
+        medicalExpiration: pilotDto.medicalExpiration,
+        certificates: JSON.stringify(pilotDto.certificates),
+        endorsements: JSON.stringify(pilotDto.endorsements)
+      }
 
       return await this.pilotService.create(pilot);
     } catch (error) {
@@ -59,6 +78,7 @@ export class PilotController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Put(':partitionKey/:rowKey')
   async update(
     @Param('partitionKey') partitionKey: string,
@@ -66,9 +86,24 @@ export class PilotController {
     @Body() pilotDto: PilotDto
   ) {
     try {
-      const pilot = new Pilot();
+      let pilot = new Pilot();
 
-      Object.assign(pilot, pilotDto);
+      pilot = {
+        partitionKey: pilotDto.partitionKey,
+        rowKey: pilotDto.rowKey,
+        id: pilotDto.id,
+        name: pilotDto.name,
+        address: pilotDto.address,
+        city: pilotDto.city,
+        state: pilotDto.state,
+        postalCode: pilotDto.postalCode,
+        email: pilotDto.email,
+        phone: pilotDto.phone,
+        medicalClass: pilotDto.medicalClass,
+        medicalExpiration: pilotDto.medicalExpiration,
+        certificates: JSON.stringify(pilotDto.certificates),
+        endorsements: JSON.stringify(pilotDto.endorsements)
+      }
 
       return await this.pilotService.update(partitionKey, rowKey, pilot);
     } catch (error) {
@@ -78,6 +113,7 @@ export class PilotController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Delete(':partitionKey/:rowKey')
   async delete(
     @Param('partitionKey') partitionKey: string,

api/src/pilot/pilot.dto.ts

@@ -1,3 +1,6 @@
+import { Certificate } from "./certificate/certificate.entity";
+import { Endorsement } from "./endorsement/endorsement.entity";
+
 export class PilotDto {
   partitionKey: string;
   rowKey: string;
@@ -9,4 +12,8 @@ export class PilotDto {
   postalCode: string;
   email?: string;
   phone?: string;
+  medicalClass?: string;
+  medicalExpiration?: string;
+  certificates: Certificate;
+  endorsements: Endorsement
 }

api/src/pilot/pilot.entity.ts

@@ -11,4 +11,8 @@ export class Pilot {
   @EntityString() postalCode?: string;
   @EntityString() email?: string;
   @EntityString() phone?: string;
+  @EntityString() medicalClass?: string;
+  @EntityString() medicalExpiration: string;
+  @EntityString() certificates: string;
+  @EntityString() endorsements: string;
 }

app/README.md

@@ -1,3 +0,0 @@
-# Flying
-
-A pilot's logbook for tracking flight hours.

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@azure/msal-browser": "^4.0.1",
     "@azure/msal-react": "^3.0.1",
-    "@noahspan/noahspan-components": "^0.8.9",
+    "@noahspan/noahspan-components": "^1.5.1",
     "axios": "^1.7.2",
     "dotenv": "^16.4.7",
     "react": "^18.3.1",

app/src/App.tsx

@@ -19,11 +19,7 @@ const App = () => {
     <>
       <SiteNav />
       <Routes>
-        <Route path="/pilots" element={
-          <ProtectedRoute>
-            <Pilots />
-          </ProtectedRoute>
-        } />
+        <Route path="/pilots" element={<Pilots />} />
         <Route path="/" element={<Logbook />} />
       </Routes>
     </>

app/src/components/actionMenu/ActionMenu.tsx

@@ -1,22 +1,22 @@
 import { useState } from 'react';
 import { IActionMenuProps } from './IActionMenuProps';
 import {
-  EllipsisVerticalIcon,
-  EyeIcon,
   IconButton,
+  Icon,
+  IconName, 
   ListItemIcon,
   ListItemText,
   Menu,
-  MenuItem,
-  PenIcon,
-  TrashIcon
+  MenuItem
 } from '@noahspan/noahspan-components';
 import { FormMode } from '../../enums/formMode';
+import { useIsAuthenticated } from '@azure/msal-react';
 
 const ActionMenu = ({ id, onDelete, onOpenCloseForm }: IActionMenuProps) => {
   const [anchorElAction, setAnchorElAction] = useState<null | HTMLElement>(
     null
   );
+  const isAuthenticated = useIsAuthenticated();
 
   const onOpenActionMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorElAction(event.currentTarget);
@@ -29,7 +29,7 @@ const ActionMenu = ({ id, onDelete, onOpenCloseForm }: IActionMenuProps) => {
   return (
     <div>
       <IconButton onClick={onOpenActionMenu}>
-        <EllipsisVerticalIcon size="sm" />
+        <Icon iconName={IconName.ELLIPSIS_VERTICAL} size="sm" />
       </IconButton>
       <Menu
         anchorEl={anchorElAction}
@@ -37,25 +37,31 @@ const ActionMenu = ({ id, onDelete, onOpenCloseForm }: IActionMenuProps) => {
         open={Boolean(anchorElAction)}
         onClose={onCloseActionMenu}
       >
+        {isAuthenticated &&
           <MenuItem onClick={() => onOpenCloseForm(FormMode.EDIT, id)}>
             <ListItemIcon>
-            <PenIcon size="lg" />
+              <Icon iconName={IconName.PEN} size="lg" />
             </ListItemIcon>
             <ListItemText>Edit</ListItemText>
           </MenuItem>
+        }
         <MenuItem onClick={() => onOpenCloseForm(FormMode.VIEW, id)}>
           <ListItemIcon>
-            <EyeIcon size="lg" />
+            <Icon iconName={IconName.EYE} size="lg" />
           </ListItemIcon>
           <ListItemText>View</ListItemText>
         </MenuItem>
+        {isAuthenticated &&
+          <>
             <hr className="my-3" />
             <MenuItem onClick={() => onDelete(id)}>
               <ListItemIcon>
-            <TrashIcon size="lg" />
+                <Icon iconName={IconName.TRASH} size="lg" />
               </ListItemIcon>
               <ListItemText>Delete</ListItemText>
             </MenuItem>
+          </>    
+        }
       </Menu>
     </div>
   );

app/src/components/confirmationDialog/ConfirmationDialog.tsx

@@ -1,14 +1,14 @@
 import {
   Box,
   Button,
-  CircleCheckIcon,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
-  Spinner,
-  XmarkIcon
+  Icon,
+  IconName,
+  Spinner
 } from '@noahspan/noahspan-components';
 import { IDialogConfirmationProps } from './IConfirmationDialogProps';
 
@@ -34,13 +34,13 @@ const ConfirmationDialog = ({
         {isLoading && <Spinner />}
       </DialogContent>
       <DialogActions>
-        <Button onClick={onCancel} variant="outlined" startIcon={<XmarkIcon />}>
+        <Button onClick={onCancel} variant="outlined" startIcon={<Icon iconName={IconName.XMARK} />}>
           No
         </Button>
         <Button
           onClick={onConfirm}
           variant="contained"
-          startIcon={<CircleCheckIcon />}
+          startIcon={<Icon iconName={IconName.CIRCLE_CHECK} />}
         >
           Yes
         </Button>

app/src/components/logForm/LogForm.tsx

@@ -5,16 +5,17 @@ import {
   AccordionSummary,
   Alert,
   Button,
-  ChevronDownIcon,
   DatePicker,
   Drawer,
   Grid,
+  Icon,
   IconButton,
-  SaveIcon,
+  IconName,
   Select,
   TextField,
+  theme,
   Typography,
-  XmarkIcon
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { useForm, Controller, FormProvider } from 'react-hook-form';
 import { ILogFormProps } from './ILogFormProps';
@@ -64,6 +65,7 @@ const LogForm: React.FC<ILogFormProps> = ({
   };
   const methods = useForm();
   const { pilots } = usePilots();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
 
   const onCancel = () => {
     methods.reset(defaultValues);
@@ -123,6 +125,15 @@ const LogForm: React.FC<ILogFormProps> = ({
         );
         const entry = response.data;
 
+        // if (mode !== FormMode.ADD) {
+        //   const pilot = pilots?.find((pilot) => pilot.id === entry.pilotId);
+        //   console.log(pilot.name)
+        //   dispatch({
+        //     type: 'SET_SELECTED_ENTRY_PILOT_NAME',
+        //     payload: pilot.name
+        //   });
+        // }
+
         methods.reset(entry);
       } catch (error) {
         const axiosError = error as AxiosError;
@@ -139,7 +150,7 @@ const LogForm: React.FC<ILogFormProps> = ({
   }, [entryId]);
 
   useEffect(() => {
-    if (pilots) {
+    if (pilots && FormMode.ADD) {
       const newPilotsOptions = pilots.map((pilot) => {
         return {
           label: pilot.name,
@@ -158,7 +169,7 @@ const LogForm: React.FC<ILogFormProps> = ({
       PaperProps={{
         sx: {
           padding: '30px',
-          width: '33%'
+          width: isMedium ? '33%' : '75%'
         }
       }}
     >
@@ -166,11 +177,11 @@ const LogForm: React.FC<ILogFormProps> = ({
         <form onSubmit={methods.handleSubmit(onSubmit)}>
           <Grid container spacing={2}>
             <Grid size={11}>
-              <Typography variant="h4">{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Pilot`}</Typography>
+              <Typography variant="h4">{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Entry`}</Typography>
             </Grid>
             <Grid display="flex" justifyContent="right" size={1}>
               <IconButton onClick={onCancel}>
-                <XmarkIcon />
+                <Icon iconName={IconName.XMARK} />
               </IconButton>
             </Grid>
             {state.alert && (
@@ -186,32 +197,19 @@ const LogForm: React.FC<ILogFormProps> = ({
                 </Alert>
               </Grid>
             )}
-            <Grid alignItems="center" display="flex" size={4}>
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Pilot *</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="pilotId"
                 control={methods.control}
                 render={({ field: { onChange, value } }) => {
-                  useEffect(() => {
-                    if (value && mode !== FormMode.ADD) {
-                      const pilot = pilots?.find((pilot) => pilot.id === value);
-
-                      dispatch({
-                        type: 'SET_SELECTED_ENTRY_PILOT_NAME',
-                        payload: pilot.name
-                      });
-                    }
-                  }, [value]);
-
                   return (
-                    <>
-                      {mode === FormMode.ADD && (
                     <Select
                       disabled={state.isDisabled}
                       fullWidth
-                          onChange={(event) => {
+                      onChange={(event: any) => {
                         const pilot = pilots?.find(
                           (pilot) => (pilot.id = event.target.value)
                         );
@@ -227,25 +225,16 @@ const LogForm: React.FC<ILogFormProps> = ({
                           ? state.pilotOptions
                           : []
                       }
-                          value={value}
+                      value={value ? value : ''}
                     />
-                      )}
-                      {mode !== FormMode.ADD && (
-                        <TextField
-                          disabled={true}
-                          fullWidth
-                          value={state.selectedEntryPilotName}
-                        />
-                      )}
-                    </>
                   );
                 }}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Date *</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="date"
                 control={methods.control}
@@ -258,10 +247,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                 )}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Aircraft Make and Model *</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="aircraftMakeModel"
                 control={methods.control}
@@ -281,10 +270,12 @@ const LogForm: React.FC<ILogFormProps> = ({
                 )}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+            {isAuthenticated &&
+              <>
+                <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                   <Typography variant="body1">Aircraft Identity *</Typography>
                 </Grid>
-            <Grid size={8}>
+                <Grid size={isMedium ? 8 : 12}>
                   <Controller
                     name="aircraftIdentity"
                     control={methods.control}
@@ -304,10 +295,12 @@ const LogForm: React.FC<ILogFormProps> = ({
                     )}
                   />
                 </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+              </>
+            }
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Route From</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="routeFrom"
                 control={methods.control}
@@ -327,10 +320,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                 )}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Route To</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="routeTo"
                 control={methods.control}
@@ -350,10 +343,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                 )}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+            <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
               <Typography variant="body1">Duration Of Flight</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="durationOfFlight"
                 control={methods.control}
@@ -379,10 +372,12 @@ const LogForm: React.FC<ILogFormProps> = ({
                 )}
               />
             </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+            {isAuthenticated &&
+              <>
+                <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                   <Typography variant="body1">Single Engine Land</Typography>
                 </Grid>
-            <Grid size={8}>
+                <Grid size={isMedium ? 8 : 12}>
                   <Controller
                     name="singleEngineLand"
                     control={methods.control}
@@ -408,10 +403,14 @@ const LogForm: React.FC<ILogFormProps> = ({
                     )}
                   />
                 </Grid>
-            <Grid alignItems="center" display="flex" size={4}>
+              </>
+            }
+            {isAuthenticated &&
+              <>
+                <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                   <Typography variant="body1">Simulator or ATD</Typography>
                 </Grid>
-            <Grid size={8}>
+                <Grid size={isMedium ? 8 : 12}>
                   <Controller
                     name="simulatorAtd"
                     control={methods.control}
@@ -437,17 +436,20 @@ const LogForm: React.FC<ILogFormProps> = ({
                     )}
                   />
                 </Grid>
+              </>
+            }
+            {isAuthenticated &&
               <Grid size={12}>
                 <Accordion defaultExpanded>
-                <AccordionSummary expandIcon={<ChevronDownIcon />}>
+                  <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
                     <Typography variant="body1">Landings</Typography>
                   </AccordionSummary>
                   <AccordionDetails>
                     <Grid container spacing={2}>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">Day</Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="landingsDay"
                           control={methods.control}
@@ -475,10 +477,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                           )}
                         />
                       </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">Night</Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="landingsNight"
                           control={methods.control}
@@ -510,17 +512,19 @@ const LogForm: React.FC<ILogFormProps> = ({
                   </AccordionDetails>
                 </Accordion>
               </Grid>
+            }
+            {isAuthenticated &&
               <Grid size={12}>
                 <Accordion>
-                <AccordionSummary expandIcon={<ChevronDownIcon />}>
+                  <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
                     Instrument
                   </AccordionSummary>
                   <AccordionDetails>
                     <Grid container spacing={2}>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">Actual</Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="instrumentActual"
                           control={methods.control}
@@ -548,10 +552,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                           )}
                         />
                       </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">Simulated</Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="instrumentSimulated"
                           control={methods.control}
@@ -579,12 +583,12 @@ const LogForm: React.FC<ILogFormProps> = ({
                           )}
                         />
                       </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">
                           Instrument Approaches
                         </Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="instrumentApproaches"
                           control={methods.control}
@@ -615,7 +619,7 @@ const LogForm: React.FC<ILogFormProps> = ({
                       <Grid alignItems="center" display="flex" size={4}>
                         <Typography variant="body1">Holds</Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="instrumentHolds"
                           control={methods.control}
@@ -643,10 +647,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                           )}
                         />
                       </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">Nav / Track</Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="instrumentNavTrack"
                           control={methods.control}
@@ -678,19 +682,21 @@ const LogForm: React.FC<ILogFormProps> = ({
                   </AccordionDetails>
                 </Accordion>
               </Grid>
+            }
+            {isAuthenticated &&
               <Grid size={12}>
                 <Accordion defaultExpanded>
-                <AccordionSummary expandIcon={<ChevronDownIcon />}>
+                  <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
                     Type of Pilot Experience or Training
                   </AccordionSummary>
                   <AccordionDetails>
                     <Grid container spacing={2}>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">
                           Ground Training Received
                         </Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="groundTrainingReceived"
                           control={methods.control}
@@ -718,12 +724,12 @@ const LogForm: React.FC<ILogFormProps> = ({
                           )}
                         />
                       </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">
                           Flight Training Received
                         </Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="flightTrainingReceived"
                           control={methods.control}
@@ -751,10 +757,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                           )}
                         />
                       </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">Cross Country</Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="crossCountry"
                           control={methods.control}
@@ -782,10 +788,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                           )}
                         />
                       </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">Night</Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="night"
                           control={methods.control}
@@ -813,10 +819,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                           )}
                         />
                       </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">Solo</Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="solo"
                           control={methods.control}
@@ -844,10 +850,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                           )}
                         />
                       </Grid>
-                    <Grid alignItems="center" display="flex" size={4}>
+                      <Grid alignItems="center" display="flex" size={isMedium ? 4 : 12}>
                         <Typography variant="body1">Pilot in Command</Typography>
                       </Grid>
-                    <Grid size={8}>
+                      <Grid size={isMedium ? 8 : 12}>
                         <Controller
                           name="pilotInCommand"
                           control={methods.control}
@@ -879,10 +885,11 @@ const LogForm: React.FC<ILogFormProps> = ({
                   </AccordionDetails>
                 </Accordion>
               </Grid>
-            <Grid size={4}>
+            }
+            <Grid size={isMedium ? 4 : 12}>
               <Typography variant="body1">Notes</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="notes"
                 control={methods.control}
@@ -911,7 +918,7 @@ const LogForm: React.FC<ILogFormProps> = ({
                     ? state.isDisabled
                     : false
                 }
-                startIcon={<XmarkIcon />}
+                startIcon={<Icon iconName={IconName.XMARK} />}
                 variant="outlined"
                 onClick={onCancel}
                 size="small"
@@ -921,7 +928,7 @@ const LogForm: React.FC<ILogFormProps> = ({
               {mode.toString() !== FormMode.VIEW && (
                 <Button
                   disabled={state.isDisabled}
-                  startIcon={<SaveIcon />}
+                  startIcon={<Icon iconName={IconName.SAVE} />}
                   size="small"
                   type="submit"
                   variant="contained"

app/src/components/logbook/ILogbookEntry.ts

@@ -3,6 +3,7 @@ export interface ILogbookEntry {
   rowKey: string;
   id: string;
   pilotId: string;
+  pilotName: string;
   date: string;
   aircraftMakeModel: string;
   aircraftIdentity: string;
@@ -24,4 +25,5 @@ export interface ILogbookEntry {
   night: number | null;
   solo: number | null;
   pilotInCommand: number | null;
+  notes: string;
 }

app/src/components/logbook/Logbook.tsx

@@ -6,10 +6,13 @@ import {
   Button,
   ColumnDef,
   Grid,
-  PlusIcon,
+  Icon,
+  IconName,
   Spinner,
   Table,
-  Typography
+  theme,
+  Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { initialState, reducer } from './reducer';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
@@ -20,18 +23,23 @@ import { FormMode } from '../../enums/formMode';
 import ActionMenu from '../actionMenu/ActionMenu';
 import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
 import { ILogbookEntry } from './ILogbookEntry';
+import LogbookCard from '../logbookCard/LogbookCard';
 
 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 getLogbookEntries = async () => {
     try {
       dispatch({ type: 'SET_IS_LOADING', payload: true });
 
       const response: AxiosResponse = await httpClient.get(`api/logs`);
+      const entries: ILogbookEntry[] = 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 });
@@ -125,10 +133,10 @@ const Logbook: React.FC<unknown> = () => {
     });
   };
 
-  const columns: ColumnDef<ILogbookEntry>[] = [
+  const unauthColumns: ColumnDef<ILogbookEntry>[] = [
     {
       accessorKey: 'pilotName',
-      header: 'Pilot'
+      header: 'Pilot',
     },
     {
       accessorKey: 'date',
@@ -138,10 +146,6 @@ const Logbook: React.FC<unknown> = () => {
       accessorKey: 'aircraftMakeModel',
       header: 'Aircraft Make & Model'
     },
-    {
-      accessorKey: 'aircraftIdentity',
-      header: 'Aircraft Identity'
-    },
     {
       id: 'route',
       header: 'Route of Flight',
@@ -167,9 +171,71 @@ const Logbook: React.FC<unknown> = () => {
         headerAlign: 'right'
       },
       cell: (info: any) =>
-        info.getValue() !== null
-          ? parseFloat(info.getValue()).toFixed(1)
-          : ''
+        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}
+        />
+      )
+    }
+  ]
+
+  const authColumns: 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',
@@ -179,9 +245,7 @@ const Logbook: React.FC<unknown> = () => {
         headerAlign: 'right'
       },
       cell: (info: any) =>
-        info.getValue() !== null
-          ? parseFloat(info.getValue()).toFixed(1)
-          : ''
+        info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
     },
     {
       id: 'landings',
@@ -222,10 +286,8 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
-            info.getValue() !== null
-              ? parseFloat(info.getValue()).toFixed(1)
-              : ''
+          cell: (info: any) =>
+            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
           accessorKey: 'instrumentSimulated',
@@ -234,10 +296,8 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
-            info.getValue() !== null
-              ? parseFloat(info.getValue()).toFixed(1)
-              : ''
+          cell: (info: any) =>
+            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
           accessorKey: 'instrumentApproaches',
@@ -279,10 +339,8 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
-            info.getValue() !== null
-              ? parseFloat(info.getValue()).toFixed(1)
-              : ''
+          cell: (info: any) =>
+            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
           accessorKey: 'flightTrainingReceived',
@@ -291,10 +349,8 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
-            info.getValue() !== null
-              ? parseFloat(info.getValue()).toFixed(1)
-              : ''
+          cell: (info: any) =>
+            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
           accessorKey: 'crossCountry',
@@ -303,10 +359,8 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
-            info.getValue() !== null
-              ? parseFloat(info.getValue()).toFixed(1)
-              : ''
+          cell: (info: any) =>
+            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
           accessorKey: 'night',
@@ -315,10 +369,8 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
-            info.getValue() !== null
-              ? parseFloat(info.getValue()).toFixed(1)
-              : ''
+          cell: (info: any) =>
+            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
           accessorKey: 'solo',
@@ -327,10 +379,8 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
-            info.getValue() !== null
-              ? parseFloat(info.getValue()).toFixed(1)
-              : ''
+          cell: (info: any) =>
+            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
           accessorKey: 'pilotInCommand',
@@ -339,10 +389,8 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
-            info.getValue() !== null
-              ? parseFloat(info.getValue()).toFixed(1)
-              : ''
+          cell: (info: any) =>
+            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         }
       ]
     },
@@ -356,7 +404,7 @@ const Logbook: React.FC<unknown> = () => {
         align: 'center',
         headerAlign: 'center'
       },
-      cell: (info) => (
+      cell: (info: any) => (
         <ActionMenu
           id={info.row.original.rowKey}
           onDelete={onDeleteEntry}
@@ -375,14 +423,14 @@ const Logbook: React.FC<unknown> = () => {
   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)}
-              startIcon={<PlusIcon />}
+              startIcon={<Icon iconName={IconName.PLUS} />}
               variant="contained"
               data-testid="pilot-add-button"
             >
@@ -405,9 +453,12 @@ const Logbook: React.FC<unknown> = () => {
         )}
         {!state.isLoading && (
           <Grid size={12}>
-            {state.entries.length > 0 && (
-              <Table columns={columns} data={state.entries} />
+            {isMedium && state.entries.length > 0 && (
+              <Table columns={isAuthenticated ? authColumns : unauthColumns} data={state.entries} />
             )}
+            {!isMedium && state.entries.length > 0 &&
+              <LogbookCard logs={state.entries} onDelete={onDeleteEntry} onOpenCloseForm={onOpenCloseEntryForm} />
+            }
           </Grid>
         )}
         {state.isLoading && !state.alert && (

app/src/components/logbookCard/LogbookCard.tsx

@@ -0,0 +1,74 @@
+import { Card, CardContent, CardHeader, Grid, Typography } from "@noahspan/noahspan-components";
+import { LogbookCardProps } from "./LogbookCardProps.interface";
+import { useEffect } from "react";
+import ActionMenu from "../actionMenu/ActionMenu";
+
+
+const LogbookCard = ({ logs, onDelete, onOpenCloseForm }: LogbookCardProps) => {  
+  return (
+    <Grid container spacing={2}>
+      {logs.map((log) => {
+        return (
+          <Grid size={12}>
+            <Card key={log.rowKey}>
+              <CardHeader
+                action={<ActionMenu id={log.rowKey} onDelete={onDelete} onOpenCloseForm={onOpenCloseForm} />}
+                subheader={log.pilotName}
+                title={log.date}
+                slotProps={{
+                  subheader: {
+                    fontSize: '16px'
+                  },
+                  title: {
+                    fontSize: '24px',
+                  }
+                }}
+              />
+              <CardContent>
+                <Grid container spacing={1}>
+                  <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>
+                  {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,8 @@
+import { FormMode } from "../../enums/formMode";
+import { ILogbookEntry } from "../logbook/ILogbookEntry";
+
+export interface LogbookCardProps {
+  logs: ILogbookEntry[];
+  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

@@ -4,13 +4,15 @@ import {
   Button,
   Drawer,
   Grid,
+  Icon,
   IconButton,
+  IconName,
   PeoplePicker,
-  SaveIcon,
   StateSelect,
   TextField,
+  theme,
   Typography,
-  XmarkIcon
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { IPilotFormProps } from './IPilotFormProps';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -19,6 +21,9 @@ import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
 import { useIsAuthenticated } from '@azure/msal-react';
 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';
 
 const PilotForm: React.FC<IPilotFormProps> = ({
   pilotId,
@@ -47,13 +52,18 @@ const PilotForm: React.FC<IPilotFormProps> = ({
     state: '',
     postalCode: '',
     email: '',
-    phone: ''
+    phone: '',
+    medicalClass: '',
+    medicalExpiration: '',
+    certificates: [],
+    endorsements: []
   };
   const methods = useForm({
     defaultValues: defaultValues
   });
   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,
@@ -154,6 +164,9 @@ const PilotForm: React.FC<IPilotFormProps> = ({
         );
         const pilot = response.data;
 
+        pilot.certificates = JSON.parse(pilot.certificates);
+        pilot.endorsements = JSON.parse(pilot.endorsements)
+
         setSelectedPerson({
           userPrincipalName: pilot.id,
           displayName: pilot.name
@@ -179,7 +192,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
       PaperProps={{
         sx: {
           padding: '30px',
-          width: '33%'
+          width: isMedium ? '33%' : '75%'
         }
       }}
     >
@@ -191,13 +204,13 @@ const PilotForm: React.FC<IPilotFormProps> = ({
             </Grid>
             <Grid display="flex" justifyContent="right" size={1}>
               <IconButton onClick={onCancel}>
-                <XmarkIcon />
+                <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}
@@ -207,10 +220,12 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                 value={selectedPerson}
               />
             </Grid>
-            <Grid size={3}>
+            {isAuthenticated &&
+              <>
+                <Grid size={isMedium ? 3 : 12}>
                   <Typography variant="h6">Address *</Typography>
                 </Grid>
-            <Grid size={9}>
+                <Grid size={isMedium ? 9 : 12}>
                   <Controller
                     name="address"
                     control={methods.control}
@@ -231,10 +246,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                     )}
                   />
                 </Grid>
-            <Grid size={3}>
+                <Grid size={isMedium ? 3 : 12}>
                   <Typography variant="h6">City *</Typography>
                 </Grid>
-            <Grid size={9}>
+                <Grid size={isMedium ? 9 : 12}>
                   <Controller
                     name="city"
                     control={methods.control}
@@ -255,10 +270,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                     )}
                   />
                 </Grid>
-            <Grid size={3}>
+                <Grid size={isMedium ? 3 : 12}>
                   <Typography variant="h6">State *</Typography>
                 </Grid>
-            <Grid size={9}>
+                <Grid size={isMedium ? 9 : 12}>
                   <Controller
                     name="state"
                     control={methods.control}
@@ -281,10 +296,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                     )}
                   />
                 </Grid>
-            <Grid size={3}>
+                <Grid size={isMedium ? 3 : 12}>
                   <Typography variant="h6">Postal Code *</Typography>
                 </Grid>
-            <Grid size={9}>
+                <Grid size={isMedium ? 9 : 12}>
                   <Controller
                     name="postalCode"
                     control={methods.control}
@@ -305,10 +320,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                     )}
                   />
                 </Grid>
-            <Grid size={3}>
+                <Grid size={isMedium ? 3 : 12}>
                   <Typography variant="h6">Email</Typography>
                 </Grid>
-            <Grid size={9}>
+                <Grid size={isMedium ? 9 : 12}>
                   <Controller
                     name="email"
                     control={methods.control}
@@ -334,10 +349,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                     )}
                   />
                 </Grid>
-            <Grid size={3}>
+                <Grid size={isMedium ? 3 : 12}>
                   <Typography variant="h6">Phone Number</Typography>
                 </Grid>
-            <Grid size={9}>
+                <Grid size={isMedium ? 9 : 12}>
                   <Controller
                     name="phone"
                     control={methods.control}
@@ -363,6 +378,21 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                     )}
                   />
                 </Grid>
+              </>
+            }
+            {isAuthenticated &&
+              <Grid size={12}>
+                <PilotFormMedical
+                  isDisabled={isDisabled}
+                />
+              </Grid>
+            }
+            <Grid size={12}>
+              <PilotFormCertificates isDisabled={isDisabled} mode={mode} />
+            </Grid>
+            <Grid size={12}>
+              <PilotFormEndorsements isDisabled={isDisabled} mode={mode} />
+            </Grid>
             <Grid display="flex" gap={2} justifyContent="right" size={12}>
               <Button
                 disabled={
@@ -370,7 +400,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                     ? isDisabled
                     : false
                 }
-                startIcon={<XmarkIcon />}
+                startIcon={<Icon iconName={IconName.XMARK} />}
                 variant="outlined"
                 onClick={onCancel}
                 data-testid="pilot-cancel-button"
@@ -381,7 +411,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
               {mode.toString() !== FormMode.VIEW && (
                 <Button
                   disabled={isDisabled}
-                  startIcon={<SaveIcon />}
+                  startIcon={<Icon iconName={IconName.SAVE} />}
                   size="small"
                   type="submit"
                   variant="contained"
@@ -392,111 +422,6 @@ const PilotForm: React.FC<IPilotFormProps> = ({
               )}
             </Grid>
           </Grid>
-          {/* {pilotId && (
-                <>
-                  <div className="col-span-1">
-                    <Typography variant="h6">Last Review</Typography>
-                  </div>
-                  <div className="col-span-3">
-                    <Controller
-                      name="lastReview"
-                      control={methods.control}
-                      render={({ field }) => {
-                        return (
-                          <DatePicker
-                            handleDateChanged={(date: string) => {
-                              methods.setValue('lastReview', date);
-                            }}
-                            inputProps={{
-                              value: field.value
-                            }}
-                          />
-                        );
-                      }}
-                    />
-                  </div>
-                </>
-              )} */}
-          {/* {pilotId && (
-                <>
-                  <div className="col-span-4">
-                    <Typography variant="h5">Medical</Typography>
-                    <hr className="my-3" />
-                  </div>
-                  <div className="col-span-1">
-                    <Typography variant="h6">Class</Typography>
-                  </div>
-                  <div className="col-span-3">
-                    <Controller
-                      name="medicalClass"
-                      control={methods.control}
-                      render={({ field }) => {
-                        return (
-                          <Select
-                            labelProps={{
-                              className:
-                                'before:content-none after:content-none'
-                            }}
-                            {...field}
-                          >
-                            <Option key="first" value="First">
-                              First
-                            </Option>
-                            <Option key="second" value="Second">
-                              Second
-                            </Option>
-                            <Option key="third" value="Third">
-                              Third
-                            </Option>
-                            <Option key="basicMed" value="Basic Med">
-                              Basic Med
-                            </Option>
-                          </Select>
-                        );
-                      }}
-                    />
-                  </div>
-                  <div className="col-span-1">
-                    <Typography variant="h6">Expiration Date</Typography>
-                  </div>
-                  <div className="col-span-3">
-                    <Controller
-                      name="medicalExpiration"
-                      control={methods.control}
-                      render={({ field }) => {
-                        return (
-                          <DatePicker
-                            handleDateChanged={(date: string) => {
-                              methods.setValue('medicalExpiration', date);
-                            }}
-                            inputProps={{
-                              value: field.value
-                            }}
-                          />
-                        );
-                      }}
-                    />
-                  </div>
-                </>
-              )}
-              {pilotId && (
-                <>
-                  <div className="col-span-4">
-                    <Typography variant="h5">Certificates</Typography>
-                    <hr className="my-3" />
-                  </div>
-                  <PilotFormCertificates certificates={[]} />
-                </>
-              )}
-              {pilotId && (
-                <>
-                  <div className="col-span-4">
-                    <Typography variant="h5">Endorsements</Typography>
-                    <hr className="my-3" />
-                  </div>
-                  <PilotFormEndorsements endorsements={[]} />
-                </>
-              )} */}
         </form>
       </FormProvider>
     </Drawer>

app/src/components/pilotFormCertificates/IPilotFormCertificates.ts

@@ -1,5 +0,0 @@
-import { Certificate } from './certificate.type';
-
-export interface IPilotFormCertificates {
-  certificates: Certificate[];
-}

app/src/components/pilotFormCertificates/PilotFormCertificates.tsx

@@ -1,134 +1,164 @@
-// import { IPilotFormCertificates } from './IPilotFormCertificates';
-// import {
-//   Button,
-//   DatePicker,
-//   Input,
-//   Option,
-//   PlusIcon,
-//   Select,
-//   TrashIcon,
-//   Typography
-// } from '@noahspan/noahspan-components';
-// import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { PilotFormCertificatesProps } from './PilotFormCertificatesProps.interface';
+import {
+  Button,
+  DatePicker,
+  Grid,
+  Icon,
+  IconButton,
+  IconName,
+  Select,
+  TextField,
+  Typography,
+} from '@noahspan/noahspan-components';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { FormMode } from '../../enums/formMode';
 
-// const PilotFormCertificates: React.FC<IPilotFormCertificates> = ({
-//   certificates
-// }: IPilotFormCertificates) => {
-//   const {
-//     control,
-//     formState: { errors },
-//     setValue
-//   } = 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 (
-//     <>
-//       {fields.length > 0 && (
-//         <>
-//           <div className="col-span-1">
-//             <Typography variant="h6">Type</Typography>
-//           </div>
-//           <div className="col-span-1">
-//             <Typography variant="h6">Number</Typography>
-//           </div>
-//           <div className="col-span-1">
-//             <Typography variant="h6">Date of Issue</Typography>
-//           </div>
-//           <div className="col-span-1"></div>
-//         </>
-//       )}
-//       {fields.map((field, index) => {
-//         return (
-//           <>
-//             <div className="col-span-1">
-//               <Controller
-//                 name={`certificates.${index}.type`}
-//                 control={control}
-//                 render={({ field }) => {
-//                   return (
-//                     <Select label="Type" {...field}>
-//                       <Option key="student" value="Student">
-//                         Student
-//                       </Option>
-//                       <Option key="private" value="Private">
-//                         Private
-//                       </Option>
-//                       <Option key="instrument" value="Instrument">
-//                         Instrument
-//                       </Option>
-//                       <Option key="recreational" value="Recreational">
-//                         Recreational
-//                       </Option>
-//                       <Option key="sport" value="Sport">
-//                         Sport
-//                       </Option>
-//                     </Select>
-//                   );
-//                 }}
-//               />
-//             </div>
-//             <div className="col-span-1">
-//               <Controller
-//                 name={`certificates.${index}.number`}
-//                 control={control}
-//                 render={({ field }) => {
-//                   return <Input label="Number" {...field} />;
-//                 }}
-//               />
-//             </div>
-//             <div className="col-span-1">
-//               <Controller
-//                 name={`certificates.${index}.dateOfIssue`}
-//                 control={control}
-//                 render={({ field }) => {
-//                   return (
-//                     <DatePicker
-//                       handleDateChanged={(date: string) => {
-//                         setValue(`certificates.${index}.dateOfIssue`, date);
-//                       }}
-//                       inputProps={{
-//                         value: field.value
-//                       }}
-//                     />
-//                   );
-//                 }}
-//               />
-//             </div>
-//             <div className="col-span-1">
-//               <Button
-//                 className="flex items-center gap-3"
-//                 onClick={() => remove(index)}
-//                 variant="outlined"
-//               >
-//                 <TrashIcon size="lg" />
-//                 Delete
-//               </Button>
-//             </div>
-//           </>
-//         );
-//       })}
-//       <div className="col-span-4">
-//         <Button
-//           className="flex items-center gap-3"
-//           onClick={() => {
-//             append({
-//               type: '',
-//               number: '',
-//               dateOfIssue: null
-//             });
-//           }}
-//           variant="outlined"
-//         >
-//           <PlusIcon size="lg" />
-//           Add Certificate
-//         </Button>
-//       </div>
-//     </>
-//   );
-// };
+  return (
+    <Grid
+      container
+      spacing={2}
+    >
+      {fields.length > 0 || mode !== FormMode.VIEW &&
+        <Grid size={12}>
+          <Typography variant="h5">Certificates</Typography>
+        </Grid>
+      }
+      {fields.length > 0 && (
+        <>
+          <Grid size={4}>
+            <Typography variant="h6">Type</Typography>
+          </Grid>
+          <Grid size={4}>
+            <Typography variant="h6">Number</Typography>
+          </Grid>
+          <Grid size={3}>
+            <Typography variant="h6">Date of Issue</Typography>
+          </Grid>
+          <Grid size={1}>
+          </Grid>
+          {fields.map((field, index) => {
+            return (
+              <>
+                <Grid size={4}>
+                  <Controller
+                    name={`certificates.${index}.type`}
+                    control={control}
+                    render={({ field: { onChange, value } }) => {
+                      return (
+                        <Select
+                          disabled={isDisabled}
+                          fullWidth
+                          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}
+                        />
+                      );
+                    }}
+                  />
+                </Grid>
+                <Grid size={4}>
+                  <Controller
+                    name={`certificates.${index}.number`}
+                    control={control}
+                    render={({ field: { onChange, value } }) => {
+                      return (
+                        <TextField
+                          disabled={isDisabled}
+                          fullWidth
+                          onChange={onChange}
+                          value={value}
+                        />
+                      )
+                    }}
+                  />
+                </Grid>
+                <Grid size={3}>
+                  <Controller
+                    name={`certificates.${index}.dateOfIssue`}
+                    control={control}
+                    render={({ field: { onChange, value } }) => {
+                      return (
+                        <DatePicker
+                          disabled={isDisabled}
+                          onChange={onChange}
+                          value={value}
+                        />
+                      );
+                    }}
+                  />
+                </Grid>
+                <Grid size={1}>
+                  <IconButton
+                    disabled={isDisabled}
+                    onClick={() => remove(index)}
+                    sx={{
+                      marginTop: '-5px'
+                    }}
+                  >
+                    <Icon iconName={IconName.TRASH} size='sm' />
+                  </IconButton>
+                </Grid>
+              </>
+            );
+          })}
+        </>
+      )}
+      {!isDisabled &&
+        <Grid display="flex" justifyContent="right" size={12}>
+          <Button
+            onClick={() => {
+              append({
+                type: '',
+                number: '',
+                dateOfIssue: null
+              });
+            }}
+            startIcon={<Icon iconName={IconName.PLUS} />}
+            variant="contained"
+          >
+            Add Certificate
+          </Button>
+        </Grid>
+      }     
+    </Grid>
+  );
+};
 
-// export default PilotFormCertificates;
+export default PilotFormCertificates;

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

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

app/src/components/pilotFormCertificates/certificate.type.ts

@@ -1,5 +0,0 @@
-export type Certificate = {
-  type: string;
-  number: string;
-  dateOfIssue: Date;
-};

app/src/components/pilotFormEndorsements/IPilotFormEndorsements.ts

@@ -1,5 +0,0 @@
-import { Endorsement } from './endorsement.type';
-
-export interface IPilotFormEndorsements {
-  endorsements: Endorsement[];
-}

app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx

@@ -1,120 +1,139 @@
-// import { IPilotFormEndorsements } from './IPilotFormEndorsements';
-// import {
-//   Button,
-//   DatePicker,
-//   Input,
-//   Option,
-//   PlusIcon,
-//   Select,
-//   TrashIcon,
-//   Typography
-// } from '@noahspan/noahspan-components';
-// import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { PilotFormEndorsementsProps } from './PilotFormEndorsementsProps.interface';
+import {
+  Button,
+  DatePicker,
+  Grid,
+  Icon,
+  IconButton,
+  IconName,
+  Select,
+  Typography
+} from '@noahspan/noahspan-components';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { FormMode } from '../../enums/formMode';
 
-// const PilotFormEndorsements: React.FC<IPilotFormEndorsements> = ({
-//   endorsements
-// }: IPilotFormEndorsements) => {
-//   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 (
-//     <>
-//       {fields.length > 0 && (
-//         <>
-//           <div className="col-span-1">
-//             <Typography variant="h6">Type</Typography>
-//           </div>
-//           <div className="col-span-1">
-//             <Typography variant="h6">Date of Issue</Typography>
-//           </div>
-//           <div className="col-span-1"></div>
-//           <div className="col-span-1"></div>
-//         </>
-//       )}
-//       {fields.map((field, index) => {
-//         return (
-//           <>
-//             <div className="col-span-1">
-//               <Controller
-//                 name={`endorsements.${index}.type`}
-//                 control={control}
-//                 render={({ field }) => {
-//                   return (
-//                     <Select label="Type" {...field}>
-//                       <Option key="complex" value="Complex">
-//                         Complex
-//                       </Option>
-//                       <Option key="highPerformance" value="High Performance">
-//                         High Performance
-//                       </Option>
-//                       <Option key="highAltitude" value="High Altitude">
-//                         High Altitude
-//                       </Option>
-//                       <Option key="tailwheel" value="Tailwheel">
-//                         Tailwheel
-//                       </Option>
-//                     </Select>
-//                   );
-//                 }}
-//               />
-//             </div>
-//             <div className="col-span-1">
-//               <Controller
-//                 name={`endorsements.${index}.dateOfIssue`}
-//                 control={control}
-//                 render={({ field }) => {
-//                   return (
-//                     <DatePicker
-//                       handleDateChanged={(date: string) => {
-//                         setValue(`endorsements.${index}.dateOfIssue`, date);
-//                       }}
-//                       inputProps={{
-//                         value: field.value
-//                       }}
-//                     />
-//                   );
-//                 }}
-//               />
-//             </div>
-//             <div className="col-span-1">
-//               <Button
-//                 className="flex items-center gap-3"
-//                 onClick={() => remove(index)}
-//                 variant="outlined"
-//               >
-//                 <TrashIcon size="lg" />
-//                 Delete
-//               </Button>
-//             </div>
-//           </>
-//         );
-//       })}
-//       <div className="col-span-4">
-//         <Button
-//           className="flex items-center gap-3"
-//           onClick={() => {
-//             append({
-//               type: '',
-//               number: '',
-//               dateOfIssue: null
-//             });
-//           }}
-//           variant="outlined"
-//         >
-//           <PlusIcon size="lg" />
-//           Add Endorsement
-//         </Button>
-//       </div>
-//     </>
-//   );
-// };
+  return (
+    <Grid
+      container
+      spacing={2}
+    >
+      {fields.length > 0 || mode !== FormMode.VIEW &&
+        <Grid size={12}>
+          <Typography variant="h5">Endorsements</Typography>
+        </Grid>
+      }
+      {fields.length > 0 && (
+        <>
+          <Grid size={8}>
+            <Typography variant="h6">Type</Typography>
+          </Grid>
+          <Grid size={3}>
+            <Typography variant="h6">Date of Issue</Typography>
+          </Grid>
+          <Grid size={1}></Grid>
+          {fields.map((field, index) => {
+            return (
+              <>
+                <Grid size={8}>
+                  <Controller
+                    name={`endorsements.${index}.type`}
+                    control={control}
+                    render={({ field: { onChange, value } }) => {
+                      return (
+                        <Select
+                          disabled={isDisabled}
+                          fullWidth
+                          onChange={onChange}
+                          options={
+                            [
+                              {
+                                label: 'Complex',
+                                value: 'complex'
+                              },
+                              {
+                                label: 'High Performance',
+                                value: 'highPerfomance'
+                              },
+                              {
+                                label: 'High Altitude',
+                                value: 'highAltitude'
+                              },
+                              {
+                                label: 'Tailwheel',
+                                value: 'tailwheel'
+                              }
+                            ]
+                          }
+                          value={value ? value : ''}
+                        />
+                      );
+                    }}
+                  />
+                </Grid>
+                <Grid size={3}>
+                  <Controller
+                    name={`endorsements.${index}.dateOfIssue`}
+                    control={control}
+                    render={({ field: { onChange, value } }) => {
+                      return (
+                        <DatePicker
+                          disabled={isDisabled}
+                          onChange={onChange}
+                          value={value}
+                        />
+                      );
+                    }}
+                  />
+                </Grid>
+                <Grid size={1}>
+                  <IconButton
+                    disabled={isDisabled}
+                    onClick={() => remove(index)}
+                    sx={{
+                      marginTop: '-5px'
+                    }}
+                  >
+                    <Icon iconName={IconName.TRASH} size="sm" />
+                  </IconButton>
+                </Grid>
+              </>
+            );
+          })}
+        </>
+      )}
+      {!isDisabled && 
+        <Grid display="flex" justifyContent="right" size={12}>
+          <Button
+            onClick={() => {
+              append({
+                type: '',
+                dateOfIssue: null
+              });
+            }}
+            startIcon={<Icon iconName={IconName.PLUS} />}
+            variant="contained"
+          >
+            Add Endorsement
+          </Button>
+        </Grid>
+      }
+    </Grid>
+  );
+};
 
-// export default PilotFormEndorsements;
+export default PilotFormEndorsements;

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

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

app/src/components/pilotFormEndorsements/endorsement.type.ts

@@ -1,5 +0,0 @@
-export type Endorsement = {
-  type: string;
-  number: string;
-  dateOfIssue: Date;
-};

app/src/components/pilotFormMedical/PilotFormMedical.tsx

@@ -0,0 +1,79 @@
+import { DatePicker, Grid, Select, theme, Typography, useMediaQuery } 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 isMedium = useMediaQuery(theme.breakpoints.up('md'));
+
+  return (
+    <Grid container spacing={2}>
+      <Grid size={12}>
+        <Typography variant="h5">Medical</Typography>
+      </Grid>
+      <Grid size={isMedium ? 3 : 12}>
+        <Typography variant="h6">Class</Typography>
+      </Grid>
+      <Grid size={isMedium ? 9 : 12}>
+        <Controller
+          name="medicalClass"
+          control={control}
+          render={({ field: { onChange, value } }) => {
+            return (
+              <Select 
+                disabled={isDisabled}
+                fullWidth
+                onChange={onChange}
+                options={
+                  [
+                    {
+                      label: 'First',
+                      value: 'first'
+                    },
+                    {
+                      label: 'Second',
+                      value: 'second'
+                    },
+                    {
+                      label: 'Third',
+                      value: 'third'
+                    },
+                    {
+                      label: 'Basic Med',
+                      value: 'basicMed'
+                    }
+                  ]
+                }
+                value={value ? value : ''}
+              />
+            );
+          }}
+        />
+      </Grid>
+      <Grid size={isMedium ? 3 : 12}>
+        <Typography variant="h6">Expiration</Typography>
+      </Grid>
+      <Grid size={isMedium ? 9 : 12}>
+        <Controller
+          name="medicalExpiration"
+          control={control}
+          render={({ field: { onChange, value } }) => {
+            return (
+              <DatePicker
+                disabled={isDisabled}
+                onChange={onChange}
+                value={value}
+              />
+            );
+          }}
+        />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default PilotFormMedical

app/src/components/pilotFormMedical/PilotFormMedicalProps.interface.ts

@@ -0,0 +1,3 @@
+export interface PilotFormMedicalProps {
+  isDisabled: boolean;
+}

app/src/components/pilots/Pilots.tsx

@@ -5,19 +5,13 @@ import {
   Box,
   Button,
   ColumnDef,
-  EllipsisVerticalIcon,
-  EyeIcon,
   Grid,
-  IconButton,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  PenIcon,
-  PlusIcon,
+  Icon,
+  IconName,
   Table,
-  TrashIcon,
-  Typography
+  theme,
+  Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -28,23 +22,21 @@ 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`
       );
-      console.log(response.data)
+ 
       if (response.data.length > 0) {
         dispatch({ type: 'SET_PILOTS', payload: response.data });
 
@@ -144,7 +136,7 @@ const Pilots: React.FC<unknown> = () => {
     },
     {
       header: 'Actions',
-      cell: (info) => (
+      cell: (info: any) => (
         <ActionMenu 
           id={info.row.original.rowKey} 
           onDelete={onDeleteEntry}
@@ -155,22 +147,22 @@ 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)}
-              startIcon={<PlusIcon />}
+              startIcon={<Icon iconName={IconName.PLUS} />}
               variant="contained"
               data-testid="pilot-add-button"
             >
@@ -192,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

@@ -1,30 +1,25 @@
 import { useEffect, useState } from 'react';
-import { ISiteNavProps } from './ISiteNavProps';
 import { useNavigate } from 'react-router-dom';
 import { useAppContext } from '../../hooks/appContext/UseAppContext';
 import {
   Avatar,
   Button,
+  Icon, 
   IconButton,
+  IconName,
   Menu,
   MenuItem,
   Navbar,
-  PlaneIcon,
-  SignOutIcon,
   Spinner,
   Typography
 } from '@noahspan/noahspan-components';
 import { useIsAuthenticated, useMsal } from '@azure/msal-react';
-import { InteractionStatus } from '@azure/msal-browser';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { AxiosInstance, AxiosResponse } from 'axios';
 import { User } from '@microsoft/microsoft-graph-types';
-import { EventMessage, EventPayload, EventType } from '@azure/msal-browser';
 
-type EventPayloadExtended = EventPayload & { accessToken: string };
-
-const SiteNav: React.FC<unknown> = () => {
+const SiteNav = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [userPhoto, setUserPhoto] = useState<string>();
   const [pages, setPages] = useState<{ name: string; url: string; }[]>([]);
@@ -39,15 +34,12 @@ const SiteNav: React.FC<unknown> = () => {
       {
         name: 'Logbook',
         url: '/'
-      }
-    ];
-
-    if (isAuthenticated) {
-      pages.push({
+      },
+      {
         name: 'Pilots',
         url: '/pilots'
-      })
       }
+    ];
 
     setPages(pages)
   };
@@ -98,7 +90,7 @@ const SiteNav: React.FC<unknown> = () => {
   const Settings = () => {
     return (
       <MenuItem onClick={handleSignOut}>
-        <SignOutIcon />
+        <Icon iconName={IconName.SIGN_OUT} />
         <Typography sx={{ marginLeft: '10px', textAlign: 'center' }}>
           Sign Out
         </Typography>
@@ -146,7 +138,7 @@ const SiteNav: React.FC<unknown> = () => {
       handlePageClick={handlePageClick}
       handleSignIn={handleSignIn}
       isAuthenticated={isAuthenticated}
-      logo={<PlaneIcon size="2x" />}
+      logo={<Icon iconName={IconName.PLANE} size="2x" />}
       pages={pages}
       settings={<Settings />}
       userPhoto={userPhoto}

app/src/index.css

@@ -1,10 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  body {
-    @apply bg-[#fafaf9];
-    @apply text-black;
-  }
+body {
+  background-color: #f2f2f2;
 }

app/src/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Flying</title>
   </head>
   <body>
     <div id="root"></div>

app/src/main.tsx

@@ -3,11 +3,10 @@ import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import AppContextProvider from './context/appContext/AppContextProvider.tsx';
 import { BrowserRouter } from 'react-router-dom';
-import './index.css';
-import '@noahspan/noahspan-components/noahspan-components.css';
 import { AuthenticationResult, EventMessage, EventType, PublicClientApplication } from '@azure/msal-browser';
 import { MsalProvider } from '@azure/msal-react';
 import { msalConfig } from './auth/msalConfig';
+import './index.css';
 
 const msalInstance: PublicClientApplication = new PublicClientApplication(msalConfig);
 

docker-compose.yaml

@@ -2,13 +2,15 @@ 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'
+    volumes: 
+      - ./azurite-flying:/data
 
   api:
     container_name: flying-api
@@ -18,7 +20,7 @@ services:
     ports:
       - '3000:3000'
     env_file:
-      - ./api/.env
+      - ./api/.env.compose
 
   app:
     container_name: flying-app
@@ -27,7 +29,6 @@ services:
       target: app
     ports: 
       - '8080:8080'
-    # env_file:
-    #   - ./app/.env
-
 
+volumes:
+  azurite-flying:

infrastructure/main.tf

@@ -1,3 +1,10 @@
+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_tables = module.environment.storage_tables
+}
+
 module "container_app" {
   source = "github.com/noahspannbauer/noahspan-terraform/modules/container_app"
   app_subdomain_name = var.APP_SUBDOMAIN_NAME
@@ -17,7 +24,6 @@ module "container_app" {
   domain_name = var.DOMAIN_NAME
   log_analytics_workspace_name = module.environment.log_analytics_workspace_name
   resource_group_name = var.RESOURCE_GROUP_NAME
-  storage_account_name = module.environment.storage_account_name
-  storage_tables = module.environment.storage_tables
+  storage_account_primary_connection_string = module.storage.storage_account_primary_connection_string
   tenant_id = var.TENANT_ID
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noahspan/flying",
-  "version": "1.0.0",
+  "version": "1.2.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\"",