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.1.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,
+    //   provide: APP_GUARD,
-      useClass: AuthGuard
+    //   useClass: AuthGuard
-    },
+    // },
-    Reflector
+    // 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,20 +7,22 @@ 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) {}
 
-  @Public()
   @Get(':partitionKey/:rowKey')
   async find(
     @Param('partitionKey') partitionKey: string,
@@ -35,7 +37,6 @@ export class LogController {
     }
   }
 
-  @Public()
   @Get()
   async findAll(): Promise<Log[]> {
     try {
@@ -47,6 +48,7 @@ export class LogController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Post()
   async create(@Body() logDto: LogDto): Promise<Log> {
     try {
@@ -62,6 +64,7 @@ export class LogController {
     }
   }
 
+  @UseGuards(AuthGuard)  
   @Put(':partitionKey/:rowKey')
   async update(
     @Param('partitionKey') partitionKey: string,
@@ -81,6 +84,7 @@ export class LogController {
     }
   }
 
+  @UseGuards(AuthGuard)
   @Delete(':partitionKey/:rowKey')
   async delete(
     @Param('partitionKey') partitionKey: string,

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

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

api/src/pilot/pilot.controller.ts

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

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "app",
   "private": true,
-  "version": "1.1.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": "^1.4.0",
+    "@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={
+        <Route path="/pilots" element={<Pilots />} />
-          <ProtectedRoute>
-            <Pilots />
-          </ProtectedRoute>
-        } />
         <Route path="/" element={<Logbook />} />
       </Routes>
     </>

app/src/components/logForm/LogForm.tsx

@@ -13,7 +13,9 @@ import {
   IconName,
   Select,
   TextField,
+  theme,
   Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { useForm, Controller, FormProvider } from 'react-hook-form';
 import { ILogFormProps } from './ILogFormProps';
@@ -63,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);
@@ -166,7 +169,7 @@ const LogForm: React.FC<ILogFormProps> = ({
       PaperProps={{
         sx: {
           padding: '30px',
-          width: '33%'
+          width: isMedium ? '33%' : '75%'
         }
       }}
     >
@@ -194,15 +197,14 @@ 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 } }) => {
-                  console.log(value)
                   return (
                     <Select
                       disabled={state.isDisabled}
@@ -229,10 +231,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">Date *</Typography>
             </Grid>
-            <Grid size={8}>
+            <Grid size={isMedium ? 8 : 12}>
               <Controller
                 name="date"
                 control={methods.control}
@@ -245,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}
@@ -268,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}
@@ -291,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}
@@ -314,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}
@@ -337,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}
@@ -366,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}
@@ -395,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}
@@ -424,6 +436,9 @@ const LogForm: React.FC<ILogFormProps> = ({
                     )}
                   />
                 </Grid>
+              </>
+            }
+            {isAuthenticated &&
               <Grid size={12}>
                 <Accordion defaultExpanded>
                   <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
@@ -431,10 +446,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                   </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}
@@ -462,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}
@@ -497,6 +512,8 @@ const LogForm: React.FC<ILogFormProps> = ({
                   </AccordionDetails>
                 </Accordion>
               </Grid>
+            }
+            {isAuthenticated &&
               <Grid size={12}>
                 <Accordion>
                   <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
@@ -504,10 +521,10 @@ const LogForm: React.FC<ILogFormProps> = ({
                   </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}
@@ -535,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}
@@ -566,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}
@@ -602,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}
@@ -630,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}
@@ -665,6 +682,8 @@ const LogForm: React.FC<ILogFormProps> = ({
                   </AccordionDetails>
                 </Accordion>
               </Grid>
+            }
+            {isAuthenticated &&
               <Grid size={12}>
                 <Accordion defaultExpanded>
                   <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
@@ -672,12 +691,12 @@ const LogForm: React.FC<ILogFormProps> = ({
                   </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}
@@ -705,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}
@@ -738,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}
@@ -769,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}
@@ -800,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}
@@ -831,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}
@@ -866,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}

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

@@ -10,7 +10,9 @@ import {
   IconName,
   Spinner,
   Table,
-  Typography
+  theme,
+  Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { initialState, reducer } from './reducer';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
@@ -21,12 +23,14 @@ 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 {
@@ -129,10 +133,70 @@ const Logbook: React.FC<unknown> = () => {
     });
   };
 
-  const columns: ColumnDef<ILogbookEntry>[] = [
+  const unauthColumns: ColumnDef<ILogbookEntry>[] = [
     {
       accessorKey: 'pilotName',
-      header: 'Pilot'
+      header: 'Pilot',
+    },
+    {
+      accessorKey: 'date',
+      header: 'Date'
+    },
+    {
+      accessorKey: 'aircraftMakeModel',
+      header: 'Aircraft Make & Model'
+    },
+    {
+      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: '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',
@@ -144,7 +208,7 @@ const Logbook: React.FC<unknown> = () => {
     },
     {
       accessorKey: 'aircraftIdentity',
-      header: 'Aircraft Identity'
+      header: 'Aircraft Identity',
     },
     {
       id: 'route',
@@ -359,10 +423,10 @@ 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)}
@@ -389,9 +453,12 @@ const Logbook: React.FC<unknown> = () => {
         )}
         {!state.isLoading && (
           <Grid size={12}>
-            {state.entries.length > 0 && (
+            {isMedium && state.entries.length > 0 && (
-              <Table columns={columns} data={state.entries} />
+              <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

@@ -1,19 +1,18 @@
 import { useEffect, useState } from 'react';
 import { useForm, Controller, FormProvider } from 'react-hook-form';
 import {
-  Accordion,
   Button,
-  DatePicker,
   Drawer,
   Grid,
   Icon,
   IconButton,
   IconName,
   PeoplePicker,
-  Select,
   StateSelect,
   TextField,
-  Typography
+  theme,
+  Typography,
+  useMediaQuery
 } from '@noahspan/noahspan-components';
 import { IPilotFormProps } from './IPilotFormProps';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -64,6 +63,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
   });
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [isError, setIsError] = useState<boolean>(false);
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
 
   const onPeoplePickerSearch = async (
     _event: React.SyntheticEvent,
@@ -113,7 +113,6 @@ const PilotForm: React.FC<IPilotFormProps> = ({
   };
 
   const onSubmit = async (data: unknown) => {
-    console.log(data)
     try {
       setIsLoading(true);
 
@@ -167,7 +166,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
 
         pilot.certificates = JSON.parse(pilot.certificates);
         pilot.endorsements = JSON.parse(pilot.endorsements)
-        console.log(pilot)
+
         setSelectedPerson({
           userPrincipalName: pilot.id,
           displayName: pilot.name
@@ -193,7 +192,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
       PaperProps={{
         sx: {
           padding: '30px',
-          width: '33%'
+          width: isMedium ? '33%' : '75%'
         }
       }}
     >
@@ -208,10 +207,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                 <Icon iconName={IconName.XMARK} />
               </IconButton>
             </Grid>
-            <Grid size={3}>
+            <Grid size={isMedium ? 3 : 12}>
               <Typography variant="h6">Name *</Typography>
             </Grid>
-            <Grid size={9}>
+            <Grid size={isMedium ? 9 : 12}>
               <PeoplePicker
                 disabled={isDisabled}
                 loading={isPeoplePickerLoading}
@@ -221,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}
@@ -245,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}
@@ -269,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}
@@ -295,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}
@@ -319,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}
@@ -348,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}
@@ -377,16 +378,20 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                     )}
                   />
                 </Grid>
+              </>
+            }
+            {isAuthenticated &&
               <Grid size={12}>
                 <PilotFormMedical
                   isDisabled={isDisabled}
                 />
               </Grid>
+            }
             <Grid size={12}>
-              <PilotFormCertificates isDisabled={isDisabled} />
+              <PilotFormCertificates isDisabled={isDisabled} mode={mode} />
             </Grid>
             <Grid size={12}>
-              <PilotFormEndorsements isDisabled={isDisabled} />
+              <PilotFormEndorsements isDisabled={isDisabled} mode={mode} />
             </Grid>
             <Grid display="flex" gap={2} justifyContent="right" size={12}>
               <Button

app/src/components/pilotFormCertificates/PilotFormCertificates.tsx

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

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

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

app/src/components/pilotFormEndorsements/PilotFormEndorsements.tsx

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

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

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

app/src/components/pilotFormMedical/PilotFormMedical.tsx

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

app/src/components/pilots/Pilots.tsx

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

app/src/components/siteNav/SiteNav.tsx

@@ -34,15 +34,12 @@ const SiteNav = () => {
       {
         name: 'Logbook',
         url: '/'
-      }
+      },
-    ];
+      {
-
-    if (isAuthenticated) {
-      pages.push({
         name: 'Pilots',
         url: '/pilots'
-      })
       }
+    ];
 
     setPages(pages)
   };

docker-compose.yaml

@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   azurite:
-    container_name: azurite
+    container_name: azurite-flying
     image: mcr.microsoft.com/azure-storage/azurite
     ports:
       - '10000:10000'

package.json

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