adding certificates to pilot form (#57)

* adding certificates to pilot form

* adding certificates to pilot form

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

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

api/src/pilot/pilot.controller.ts

@@ -51,9 +51,23 @@ export class PilotController {
   @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)
+      }
 
       return await this.pilotService.create(pilot);
     } catch (error) {
@@ -70,9 +84,23 @@ 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)
+      }
 
       return await this.pilotService.update(partitionKey, rowKey, pilot);
     } catch (error) {

api/src/pilot/pilot.dto.ts

@@ -1,3 +1,5 @@
+import { Certificate } from "./certificate/certificate.entity";
+
 export class PilotDto {
   partitionKey: string;
   rowKey: string;
@@ -9,4 +11,7 @@ export class PilotDto {
   postalCode: string;
   email?: string;
   phone?: string;
+  medicalClass?: string;
+  medicalExpiration?: string;
+  certificates: Certificate;
 }

api/src/pilot/pilot.entity.ts

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

app/package.json

@@ -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.3.1",
     "axios": "^1.7.2",
     "dotenv": "^16.4.7",
     "react": "^18.3.1",

app/src/components/actionMenu/ActionMenu.tsx

@@ -1,15 +1,13 @@
 import { useState } from 'react';
 import { IActionMenuProps } from './IActionMenuProps';
 import {
-  EllipsisVerticalIcon,
-  EyeIcon,
   IconButton,
+  Icon,
+  IconName, 
   ListItemIcon,
   ListItemText,
   Menu,
-  MenuItem,
+  MenuItem
-  PenIcon,
-  TrashIcon
 } from '@noahspan/noahspan-components';
 import { FormMode } from '../../enums/formMode';
 import { useIsAuthenticated } from '@azure/msal-react';
@@ -31,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}
@@ -42,14 +40,14 @@ const ActionMenu = ({ id, onDelete, onOpenCloseForm }: IActionMenuProps) => {
         {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>
@@ -58,7 +56,7 @@ const ActionMenu = ({ id, onDelete, onOpenCloseForm }: IActionMenuProps) => {
             <hr className="my-3" />
             <MenuItem onClick={() => onDelete(id)}>
               <ListItemIcon>
-                <TrashIcon size="lg" />
+                <Icon iconName={IconName.TRASH} size="lg" />
               </ListItemIcon>
               <ListItemText>Delete</ListItemText>
             </MenuItem>

app/src/components/confirmationDialog/ConfirmationDialog.tsx

@@ -1,14 +1,14 @@
 import {
   Box,
   Button,
-  CircleCheckIcon,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
-  Spinner,
+  Icon,
-  XmarkIcon
+  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,15 @@ import {
   AccordionSummary,
   Alert,
   Button,
-  ChevronDownIcon,
   DatePicker,
   Drawer,
   Grid,
+  Icon,
   IconButton,
-  SaveIcon,
+  IconName,
   Select,
   TextField,
   Typography,
-  XmarkIcon
 } from '@noahspan/noahspan-components';
 import { useForm, Controller, FormProvider } from 'react-hook-form';
 import { ILogFormProps } from './ILogFormProps';
@@ -179,7 +178,7 @@ const LogForm: React.FC<ILogFormProps> = ({
             </Grid>
             <Grid display="flex" justifyContent="right" size={1}>
               <IconButton onClick={onCancel}>
-                <XmarkIcon />
+                <Icon iconName={IconName.XMARK} />
               </IconButton>
             </Grid>
             {state.alert && (
@@ -208,7 +207,7 @@ const LogForm: React.FC<ILogFormProps> = ({
                     <Select
                       disabled={state.isDisabled}
                       fullWidth
-                      onChange={(event) => {
+                      onChange={(event: any) => {
                         const pilot = pilots?.find(
                           (pilot) => (pilot.id = event.target.value)
                         );
@@ -427,7 +426,7 @@ const LogForm: React.FC<ILogFormProps> = ({
             </Grid>
             <Grid size={12}>
               <Accordion defaultExpanded>
-                <AccordionSummary expandIcon={<ChevronDownIcon />}>
+                <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
                   <Typography variant="body1">Landings</Typography>
                 </AccordionSummary>
                 <AccordionDetails>
@@ -500,7 +499,7 @@ const LogForm: React.FC<ILogFormProps> = ({
             </Grid>
             <Grid size={12}>
               <Accordion>
-                <AccordionSummary expandIcon={<ChevronDownIcon />}>
+                <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
                   Instrument
                 </AccordionSummary>
                 <AccordionDetails>
@@ -668,7 +667,7 @@ const LogForm: React.FC<ILogFormProps> = ({
             </Grid>
             <Grid size={12}>
               <Accordion defaultExpanded>
-                <AccordionSummary expandIcon={<ChevronDownIcon />}>
+                <AccordionSummary expandIcon={<Icon iconName={IconName.CHEVRON_DOWN} />}>
                   Type of Pilot Experience or Training
                 </AccordionSummary>
                 <AccordionDetails>
@@ -899,7 +898,7 @@ const LogForm: React.FC<ILogFormProps> = ({
                     ? state.isDisabled
                     : false
                 }
-                startIcon={<XmarkIcon />}
+                startIcon={<Icon iconName={IconName.XMARK} />}
                 variant="outlined"
                 onClick={onCancel}
                 size="small"
@@ -909,7 +908,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/Logbook.tsx

@@ -6,7 +6,8 @@ import {
   Button,
   ColumnDef,
   Grid,
-  PlusIcon,
+  Icon,
+  IconName,
   Spinner,
   Table,
   Typography
@@ -221,7 +222,7 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
+          cell: (info: any) =>
             info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
@@ -231,7 +232,7 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
+          cell: (info: any) =>
             info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
@@ -274,7 +275,7 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
+          cell: (info: any) =>
             info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
@@ -284,7 +285,7 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
+          cell: (info: any) =>
             info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
@@ -294,7 +295,7 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
+          cell: (info: any) =>
             info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
@@ -304,7 +305,7 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
+          cell: (info: any) =>
             info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
@@ -314,7 +315,7 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
+          cell: (info: any) =>
             info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         },
         {
@@ -324,7 +325,7 @@ const Logbook: React.FC<unknown> = () => {
             align: 'right',
             headerAlign: 'right'
           },
-          cell: (info) =>
+          cell: (info: any) =>
             info.getValue() ? parseFloat(info.getValue()).toFixed(1) : ''
         }
       ]
@@ -339,7 +340,7 @@ const Logbook: React.FC<unknown> = () => {
         align: 'center',
         headerAlign: 'center'
       },
-      cell: (info) => (
+      cell: (info: any) => (
         <ActionMenu
           id={info.row.original.rowKey}
           onDelete={onDeleteEntry}
@@ -365,7 +366,7 @@ const Logbook: React.FC<unknown> = () => {
           {isAuthenticated &&
             <Button
               onClick={() => onOpenCloseEntryForm(FormMode.ADD)}
-              startIcon={<PlusIcon />}
+              startIcon={<Icon iconName={IconName.PLUS} />}
               variant="contained"
               data-testid="pilot-add-button"
             >

app/src/components/pilotForm/PilotForm.tsx

@@ -6,14 +6,14 @@ import {
   DatePicker,
   Drawer,
   Grid,
+  Icon,
   IconButton,
+  IconName,
   PeoplePicker,
-  SaveIcon,
   Select,
   StateSelect,
   TextField,
-  Typography,
+  Typography
-  XmarkIcon
 } from '@noahspan/noahspan-components';
 import { IPilotFormProps } from './IPilotFormProps';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -22,6 +22,7 @@ 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 PilotFormMedical from '../pilotFormMedical/PilotFormMedical';
 
 const PilotForm: React.FC<IPilotFormProps> = ({
@@ -53,7 +54,8 @@ const PilotForm: React.FC<IPilotFormProps> = ({
     email: '',
     phone: '',
     medicalClass: '',
-    medicalExpiration: ''
+    medicalExpiration: '',
+    certificates: []
   };
   const methods = useForm({
     defaultValues: defaultValues
@@ -133,6 +135,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
       onOpenClose(FormMode.CANCEL);
     } catch (error) {
       const axiosError = error as AxiosError;
+      console.log(axiosError)
       const responseData = axiosError.response?.data as any;
 
       console.log(responseData.message);
@@ -160,6 +163,8 @@ const PilotForm: React.FC<IPilotFormProps> = ({
           config
         );
         const pilot = response.data;
+        
+        pilot.certificates = JSON.parse(pilot.certificates);
 
         setSelectedPerson({
           userPrincipalName: pilot.id,
@@ -198,7 +203,7 @@ 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}>
@@ -375,6 +380,9 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                 isDisabled={isDisabled}
               />
             </Grid>
+            <Grid size={12}>
+              <PilotFormCertificates certificates={[]} isDisabled={isDisabled} />
+            </Grid>
             <Grid display="flex" gap={2} justifyContent="right" size={12}>
               <Button
                 disabled={
@@ -382,7 +390,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                     ? isDisabled
                     : false
                 }
-                startIcon={<XmarkIcon />}
+                startIcon={<Icon iconName={IconName.XMARK} />}
                 variant="outlined"
                 onClick={onCancel}
                 data-testid="pilot-cancel-button"
@@ -393,7 +401,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"
@@ -431,16 +439,8 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                 </>
               )} */}
 
+
               {/* {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>

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

@@ -1,4 +1,4 @@
-export type Certificate = {
+export interface Certificate {
   type: string;
   number: string;
   dateOfIssue: Date;

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

app/src/components/pilotFormMedical/PilotFormMedical.tsx

@@ -1,4 +1,4 @@
-import { DatePicker, Grid, Select, Typography } from "@noahspan/noahspan-components";
+import { DatePicker, Grid, Select, Typography } from '@noahspan/noahspan-components';
 import { Controller, useFormContext } from "react-hook-form"
 import { PilotFormMedicalProps } from "./PilotFormMedicalProps.interface";
 

app/src/components/pilots/Pilots.tsx

@@ -5,18 +5,10 @@ import {
   Box,
   Button,
   ColumnDef,
-  EllipsisVerticalIcon,
-  EyeIcon,
   Grid,
-  IconButton,
+  Icon,
-  ListItemIcon,
+  IconName,
-  ListItemText,
-  Menu,
-  MenuItem,
-  PenIcon,
-  PlusIcon,
   Table,
-  TrashIcon,
   Typography
 } from '@noahspan/noahspan-components';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
@@ -144,7 +136,7 @@ const Pilots: React.FC<unknown> = () => {
     },
     {
       header: 'Actions',
-      cell: (info) => (
+      cell: (info: any) => (
         <ActionMenu 
           id={info.row.original.rowKey} 
           onDelete={onDeleteEntry}
@@ -170,7 +162,7 @@ const Pilots: React.FC<unknown> = () => {
           {isAuthenticated &&
             <Button
               onClick={() => onOpenClosePilotForm(FormMode.ADD)}
-              startIcon={<PlusIcon />}
+              startIcon={<Icon iconName={IconName.PLUS} />}
               variant="contained"
               data-testid="pilot-add-button"
             >

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 = () => {
-
-const SiteNav: React.FC<unknown> = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [userPhoto, setUserPhoto] = useState<string>();
   const [pages, setPages] = useState<{ name: string; url: string; }[]>([]);
@@ -98,7 +93,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 +141,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}