Feature/59 add tracks to log form (#70)

* adding tracks

* adding tracks

* adding tracks

app/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@azure/msal-browser": "^4.0.1",
     "@azure/msal-react": "^3.0.1",
-    "@noahspan/noahspan-components": "^1.5.1",
+    "@noahspan/noahspan-components": "^1.6.0",
     "axios": "^1.7.2",
     "dotenv": "^16.4.7",
     "react": "^18.3.1",

app/src/components/actionMenu/ActionMenu.tsx

@@ -12,7 +12,7 @@ import {
 import { FormMode } from '../../enums/formMode';
 import { useIsAuthenticated } from '@azure/msal-react';
 
-const ActionMenu = ({ id, onDelete, onOpenCloseForm }: IActionMenuProps) => {
+const ActionMenu = ({ id, onDelete, onOpenCloseForm, onOpenCloseTracks }: IActionMenuProps) => {
   const [anchorElAction, setAnchorElAction] = useState<null | HTMLElement>(
     null
   );
@@ -38,12 +38,23 @@ const ActionMenu = ({ id, onDelete, onOpenCloseForm }: IActionMenuProps) => {
         onClose={onCloseActionMenu}
       >
         {isAuthenticated &&
+        <>
           <MenuItem onClick={() => onOpenCloseForm(FormMode.EDIT, id)}>
             <ListItemIcon>
               <Icon iconName={IconName.PEN} size="lg" />
             </ListItemIcon>
             <ListItemText>Edit</ListItemText>
           </MenuItem>
+          {onOpenCloseTracks &&
+            <MenuItem onClick={() => onOpenCloseTracks!(FormMode.EDIT, id)}>
+              <ListItemIcon>
+                <Icon iconName={IconName.MAP_LOCATION_DOT} size="lg" />
+              </ListItemIcon>
+              <ListItemText>Tracks</ListItemText>
+            </MenuItem>
+          }
+        </>
+
         }
         <MenuItem onClick={() => onOpenCloseForm(FormMode.VIEW, id)}>
           <ListItemIcon>

app/src/components/actionMenu/IActionMenuProps.tsx

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

app/src/components/logForm/LogForm.tsx

@@ -174,7 +174,7 @@ const LogForm: React.FC<ILogFormProps> = ({
       }}
     >
       <FormProvider {...methods}>
-        <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <form onSubmit={methods.handleSubmit(onSubmit)} style={{ paddingBottom: '50px' }}>
           <Grid container spacing={2}>
             <Grid size={11}>
               <Typography variant="h4">{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Entry`}</Typography>

app/src/components/logTracks/LogTracks.tsx

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

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

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

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

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

app/src/components/logTracks/reducer.ts

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

app/src/components/logbook/ILogbookEntry.ts

@@ -1,3 +1,5 @@
+import { ColumnDef } from "@noahspan/noahspan-components";
+
 export interface ILogbookEntry {
   partitionKey: string;
   rowKey: string;
@@ -25,5 +27,6 @@ export interface ILogbookEntry {
   night: number | null;
   solo: number | null;
   pilotInCommand: number | null;
+  tracks: string | undefined;
   notes: string;
 }

app/src/components/logbook/ILogbookState.ts

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

app/src/components/logbook/Logbook.tsx

@@ -7,6 +7,7 @@ import {
   ColumnDef,
   Grid,
   Icon,
+  IconButton,
   IconName,
   Spinner,
   Table,
@@ -20,10 +21,12 @@ import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
 import { useIsAuthenticated } from '@azure/msal-react';
 import { FormMode } from '../../enums/formMode';
+import { authColumns, unauthColumns } from './columns';
 import ActionMenu from '../actionMenu/ActionMenu';
 import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
 import { ILogbookEntry } from './ILogbookEntry';
 import LogbookCard from '../logbookCard/LogbookCard';
+import LogTracks from '../logTracks/LogTracks';
 
 const Logbook: React.FC<unknown> = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
@@ -31,12 +34,41 @@ const Logbook: React.FC<unknown> = () => {
   const isAuthenticated = useIsAuthenticated();
   const { getAccessToken } = useAccessToken();
   const isMedium = useMediaQuery(theme.breakpoints.up('md'));
+  const actionsColumn: ColumnDef<ILogbookEntry> = {
+    header: 'Actions',
+    meta: {
+      align: 'center',
+      headerAlign: 'center'
+    },
+    cell: (info: any) => (
+      <ActionMenu
+        id={info.row.original.rowKey}
+        onDelete={onDeleteEntry}
+        onOpenCloseForm={onOpenCloseEntryForm}
+        onOpenCloseTracks={onOpenCloseTracks}
+      />
+    )
+  }
+  const tracksColumn: ColumnDef<ILogbookEntry> = {
+    accessorKey: 'tracks',
+    header: 'Tracks',
+    cell: (info: any) => {
+      if (info.row.original.tracks && info.row.original.tracks.length > 0) {
+        return (
+          <IconButton onClick={() => onOpenCloseTracks(FormMode.VIEW, info.row.original.rowKey)}><Icon iconName={IconName.MAP_LOCATION_DOT} /></IconButton>
+        )
+      }
+    }
+  }
 
   const getLogbookEntries = async () => {
     try {
       dispatch({ type: 'SET_IS_LOADING', payload: true });
 
-      const response: AxiosResponse = await httpClient.get(`api/logs`);
+      const config = isAuthenticated
+        ? { headers: { Authorization: await getAccessToken() } }
+        : {};
+      const response: AxiosResponse = await httpClient.get(`api/logs`, config);
       const entries: ILogbookEntry[] = response.data;
       
       entries.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
@@ -91,6 +123,34 @@ const Logbook: React.FC<unknown> = () => {
     }
   };
 
+  const onOpenCloseTracks = (mode: FormMode, rowKey?: string) => {
+    switch(mode) {
+      case FormMode.EDIT:
+      case FormMode.VIEW:
+        dispatch({
+          type: 'SET_OPEN_CLOSE_TRACKS',
+          payload: {
+            tracksMode: mode,
+            isTracksOpen: true,
+            selectedRowKey: rowKey
+          }
+        })
+
+        break;
+      case FormMode.CANCEL:
+        dispatch({
+          type: 'SET_OPEN_CLOSE_TRACKS',
+          payload: {
+            tracksMode: mode,
+            isTracksOpen: false,
+            selectedRowKey: undefined
+          }
+        })
+
+        break;
+    }
+  }
+
   const onDeleteEntry = (entryId: string) => {
     dispatch({
       type: 'SET_DELETE',
@@ -133,292 +193,36 @@ const Logbook: React.FC<unknown> = () => {
     });
   };
 
-  const unauthColumns: ColumnDef<ILogbookEntry>[] = [
-    {
-      accessorKey: 'pilotName',
-      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}
-        />
-      )
-    }
-  ]
+  useEffect(() => {
+    let newColumns: ColumnDef<ILogbookEntry>[];
 
-  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',
-      header: 'Single Engine Land',
-      meta: {
-        align: 'right',
-        headerAlign: 'right'
-      },
-      cell: (info: any) =>
-        info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-    },
-    {
-      id: 'landings',
-      header: 'Landings',
-      meta: {
-        headerAlign: 'center'
-      },
-      columns: [
-        {
-          accessorKey: 'landingsDay',
-          header: 'Day',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          }
-        },
-        {
-          accessorKey: 'landingsNight',
-          header: 'Night',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          }
-        }
-      ]
-    },
-    {
-      id: 'instrument',
-      header: 'Instrument',
-      meta: {
-        headerAlign: 'center'
-      },
-      columns: [
-        {
-          accessorKey: 'instrumentActual',
-          header: 'Actual',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'instrumentSimulated',
-          header: 'Simulated',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'instrumentApproaches',
-          header: 'Approaches',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          }
-        },
-        {
-          accessorKey: 'instrumentHolds',
-          header: 'Holds',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          }
-        },
-        {
-          accessorKey: 'instrumentNavTrack',
-          header: 'Nav/Track',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          }
-        }
-      ]
-    },
-    {
-      id: 'experienceTraining',
-      header: 'Type of pilot experience or training',
-      meta: {
-        headerAlign: 'center'
-      },
-      columns: [
-        {
-          accessorKey: 'groundTrainingReceived',
-          header: 'Ground Training Received',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'flightTrainingReceived',
-          header: 'Flight Training Received',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'crossCountry',
-          header: 'Cross Country',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'night',
-          header: 'Night',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'solo',
-          header: 'Solo',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        },
-        {
-          accessorKey: 'pilotInCommand',
-          header: 'Pilot In Command',
-          meta: {
-            align: 'right',
-            headerAlign: 'right'
-          },
-          cell: (info: any) =>
-            info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
-        }
-      ]
-    },
-    {
-      accessorKey: 'notes',
-      header: 'Notes'
-    },
-    {
-      header: 'Actions',
-      meta: {
-        align: 'center',
-        headerAlign: 'center'
-      },
-      cell: (info: any) => (
-        <ActionMenu
-          id={info.row.original.rowKey}
-          onDelete={onDeleteEntry}
-          onOpenCloseForm={onOpenCloseEntryForm}
-        />
-      )
+    if (isAuthenticated) {
+      newColumns = [...authColumns];
+    } else {
+      newColumns = [...unauthColumns];
     }
-  ];
+
+    const actionsColumnExists = newColumns.find((column) => column.id === 'actions');
+    const tracksColumnExists = newColumns.find((column) => column.id === 'actions');
+    
+    if (!actionsColumnExists) {
+      newColumns.push(actionsColumn);
+    }
+
+    if (!tracksColumnExists) {
+      const notesColumnIndex = newColumns.findIndex((column) => column.id === 'notes')
+
+      newColumns.splice(notesColumnIndex, 0, tracksColumn)
+    }
+
+    dispatch({ type: 'SET_COLUMNS', payload: newColumns })
+  }, [isAuthenticated])
 
   useEffect(() => {
     if (!state.isFormOpen) {
       getLogbookEntries();
     }
-  }, [state.isFormOpen]);
+  }, [state.isFormOpen, state.isTracksOpen]);
 
   return (
     <Box sx={{ margin: '20px' }}>
@@ -453,8 +257,8 @@ const Logbook: React.FC<unknown> = () => {
         )}
         {!state.isLoading && (
           <Grid size={12}>
-            {isMedium && state.entries.length > 0 && (
-              <Table columns={isAuthenticated ? authColumns : unauthColumns} data={state.entries} />
+            {isMedium && state.columns && state.columns.length > 0 && state.entries.length > 0 && (
+              <Table columns={state.columns} data={state.entries} />
             )}
             {!isMedium && state.entries.length > 0 &&
               <LogbookCard logs={state.entries} onDelete={onDeleteEntry} onOpenCloseForm={onOpenCloseEntryForm} />
@@ -490,6 +294,14 @@ const Logbook: React.FC<unknown> = () => {
           title="Confirm Delete"
         />
       )}
+      {state.isTracksOpen && 
+        <LogTracks
+          isDrawerOpen={state.isTracksOpen}
+          mode={state.tracksMode}
+          onOpenClose={(mode) => onOpenCloseTracks(mode)}
+          selectedRowKey={state.selectedEntryId}
+        />
+      }
     </Box>
   );
 };

app/src/components/logbook/columns.tsx

@@ -0,0 +1,252 @@
+import {
+  ColumnDef,
+  Icon,
+  IconButton,
+  IconName
+} from '@noahspan/noahspan-components';
+import { ILogbookEntry } from './ILogbookEntry';
+
+const pilotName: ColumnDef<ILogbookEntry> = {
+  id: 'pilotName',
+  accessorKey: 'pilotName',
+  header: 'Pilot'
+}
+const date: ColumnDef<ILogbookEntry> = {
+  id: 'date',
+  accessorKey: 'date',
+  header: 'Date'
+}
+const aircraftMakeModel: ColumnDef<ILogbookEntry> = {
+  id: 'aircraftMakeModel',
+  accessorKey: 'aircraftMakeModel',
+  header: 'Aircraft Make & Model'
+}
+const route: ColumnDef<ILogbookEntry> = {
+  id: 'route',
+  header: 'Route of Flight',
+  meta: {
+    headerAlign: 'center'
+  },
+  columns: [
+    {
+      id: 'routeFrom',
+      accessorKey: 'routeFrom',
+      header: 'From'
+    },
+    {
+      id: 'routeTo',
+      accessorKey: 'routeTo',
+      header: 'To'
+    }
+  ]
+}
+const durationOfFlight: ColumnDef<ILogbookEntry> = {
+  id: 'durationOfFlight',
+  accessorKey: 'durationOfFlight',
+  header: 'Duration Of Flight',
+  meta: {
+    align: 'right',
+    headerAlign: 'right'
+  },
+  cell: (info: any) =>
+    info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+}
+const notes: ColumnDef<ILogbookEntry> = {
+  id: 'notes',
+  accessorKey: 'notes',
+  header: 'Notes'
+}
+
+export const unauthColumns: ColumnDef<ILogbookEntry>[] = [
+  pilotName,
+  date,
+  aircraftMakeModel,
+  route,
+  durationOfFlight,
+  notes
+]
+
+export const authColumns: ColumnDef<ILogbookEntry>[] = [
+  pilotName,
+  date,
+  aircraftMakeModel,
+  {
+    id: 'aircraftIdentity',
+    accessorKey: 'aircraftIdentity',
+    header: 'Aircraft Identity',
+  },
+  route,
+  durationOfFlight,
+  {
+    id: 'singleEngineLand',
+    accessorKey: 'singleEngineLand',
+    header: 'Single Engine Land',
+    meta: {
+      align: 'right',
+      headerAlign: 'right'
+    },
+    cell: (info: any) =>
+      info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+  },
+  {
+    id: 'landings',
+    header: 'Landings',
+    meta: {
+      headerAlign: 'center'
+    },
+    columns: [
+      {
+        id: 'landingsDay',
+        accessorKey: 'landingsDay',
+        header: 'Day',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        }
+      },
+      {
+        id: 'landingsNight',
+        accessorKey: 'landingsNight',
+        header: 'Night',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        }
+      }
+    ]
+  },
+  {
+    id: 'instrument',
+    header: 'Instrument',
+    meta: {
+      headerAlign: 'center'
+    },
+    columns: [
+      {
+        id: 'instrumentActual',
+        accessorKey: 'instrumentActual',
+        header: 'Actual',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'instrumentSimulated',
+        accessorKey: 'instrumentSimulated',
+        header: 'Simulated',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'instrumentApproaches',
+        accessorKey: 'instrumentApproaches',
+        header: 'Approaches',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        }
+      },
+      {
+        id: 'instrumentHolds',
+        accessorKey: 'instrumentHolds',
+        header: 'Holds',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        }
+      },
+      {
+        id: 'instrumentNavTrack',
+        accessorKey: 'instrumentNavTrack',
+        header: 'Nav/Track',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        }
+      }
+    ]
+  },
+  {
+    id: 'experienceTraining',
+    header: 'Type of pilot experience or training',
+    meta: {
+      headerAlign: 'center'
+    },
+    columns: [
+      {
+        id: 'groundTrainingReceived',
+        accessorKey: 'groundTrainingReceived',
+        header: 'Ground Training Received',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'flightTrainingReceived',
+        accessorKey: 'flightTrainingReceived',
+        header: 'Flight Training Received',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'crossCountry',
+        accessorKey: 'crossCountry',
+        header: 'Cross Country',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'night',
+        accessorKey: 'night',
+        header: 'Night',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'solo',
+        accessorKey: 'solo',
+        header: 'Solo',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      },
+      {
+        id: 'pilotInCommand',
+        accessorKey: 'pilotInCommand',
+        header: 'Pilot In Command',
+        meta: {
+          align: 'right',
+          headerAlign: 'right'
+        },
+        cell: (info: any) =>
+          info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
+      }
+    ]
+  },
+  notes
+]

app/src/components/logbook/reducer.ts

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

app/src/components/pilotForm/PilotForm.tsx

@@ -197,7 +197,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
       }}
     >
       <FormProvider {...methods}>
-        <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <form onSubmit={methods.handleSubmit(onSubmit)} style={{ paddingBottom: '50px' }}>
           <Grid container spacing={2}>
             <Grid size={11}>
               <Typography variant="h4">{`${mode.toString().toLowerCase().charAt(0).toUpperCase() + mode.toString().slice(1).toLowerCase()} Pilot`}</Typography>