adding certificates to pilot form (#57)

* adding certificates to pilot form * adding certificates to pilot form
2025-03-02 16:39:37 +00:00
parent 032cd4665f
commit 8f1dc5cb61
19 changed files with 454 additions and 654 deletions
--- a/app/package.json
+++ b/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",
--- a/app/src/components/actionMenu/ActionMenu.tsx
+++ b/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,
-  PenIcon,
-  TrashIcon
+  MenuItem
 } 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>
--- a/app/src/components/confirmationDialog/ConfirmationDialog.tsx
+++ b/app/src/components/confirmationDialog/ConfirmationDialog.tsx
@@ -1,14 +1,14 @@
 import {
  Box,
  Button,
-  CircleCheckIcon,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
-  Spinner,
-  XmarkIcon
+  Icon,
+  IconName,
+  Spinner
 } from '@noahspan/noahspan-components';
 import { IDialogConfirmationProps } from './IConfirmationDialogProps';

@@ -34,13 +34,13 @@ const ConfirmationDialog = ({
        {isLoading && <Spinner />}
      </DialogContent>
      <DialogActions>
-        <Button onClick={onCancel} variant="outlined" startIcon={<XmarkIcon />}>
+        <Button onClick={onCancel} variant="outlined" startIcon={<Icon iconName={IconName.XMARK} />}>
          No
        </Button>
        <Button
          onClick={onConfirm}
          variant="contained"
-          startIcon={<CircleCheckIcon />}
+          startIcon={<Icon iconName={IconName.CIRCLE_CHECK} />}
        >
          Yes
        </Button>
--- a/app/src/components/logForm/LogForm.tsx
+++ b/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"
--- a/app/src/components/logbook/Logbook.tsx
+++ b/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"
            >
--- a/app/src/components/pilotForm/PilotForm.tsx
+++ b/app/src/components/pilotForm/PilotForm.tsx
@@ -6,14 +6,14 @@ import {
  DatePicker,
  Drawer,
  Grid,
+  Icon,
  IconButton,
+  IconName,
  PeoplePicker,
-  SaveIcon,
  Select,
  StateSelect,
  TextField,
-  Typography,
-  XmarkIcon
+  Typography
 } 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>
--- a/app/src/components/pilotFormCertificates/Certificate.interface.ts
+++ b/app/src/components/pilotFormCertificates/Certificate.interface.ts
@@ -1,4 +1,4 @@
-export type Certificate = {
+export interface Certificate {
  type: string;
  number: string;
  dateOfIssue: Date;
--- a/app/src/components/pilotFormCertificates/IPilotFormCertificates.ts
+++ b/app/src/components/pilotFormCertificates/IPilotFormCertificates.ts
@@ -1,5 +0,0 @@
-import { Certificate } from './certificate.type';
-
-export interface IPilotFormCertificates {
-  certificates: Certificate[];
-}
--- a/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
+++ b/app/src/components/pilotFormCertificates/PilotFormCertificates.tsx
@@ -1,134 +1,159 @@
-// import { IPilotFormCertificates } from './IPilotFormCertificates';
-// import {
-//   Button,
-//   DatePicker,
-//   Input,
-//   Option,
-//   PlusIcon,
-//   Select,
-//   TrashIcon,
-//   Typography
-// } from '@noahspan/noahspan-components';
-// import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { PilotFormCertificatesProps } from './PilotFormCertificatesProps.interface';
+import {
+  Button,
+  DatePicker,
+  Grid,
+  Icon,
+  IconButton,
+  IconName,
+  Select,
+  TextField,
+  Typography
+} from '@noahspan/noahspan-components';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';

-// const PilotFormCertificates: React.FC<IPilotFormCertificates> = ({
-//   certificates
-// }: IPilotFormCertificates) => {
-//   const {
-//     control,
-//     formState: { errors },
-//     setValue
-//   } = useFormContext();
+const PilotFormCertificates = ({
+  certificates,
+  isDisabled
+}: PilotFormCertificatesProps ) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();

-//   const { fields, append, remove } = useFieldArray({
-//     name: 'certificates',
-//     control
-//   });
+  const { fields, append, remove } = useFieldArray({
+    name: 'certificates',
+    control
+  });

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

--- a/app/src/components/pilots/Pilots.tsx
+++ b/app/src/components/pilots/Pilots.tsx
@@ -5,18 +5,10 @@ import {
  Box,
  Button,
  ColumnDef,
-  EllipsisVerticalIcon,
-  EyeIcon,
  Grid,
-  IconButton,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  PenIcon,
-  PlusIcon,
+  Icon,
+  IconName,
  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"
            >
--- a/app/src/components/siteNav/SiteNav.tsx
+++ b/app/src/components/siteNav/SiteNav.tsx
@@ -1,30 +1,25 @@
 import { useEffect, useState } from 'react';
-import { ISiteNavProps } from './ISiteNavProps';
 import { useNavigate } from 'react-router-dom';
 import { useAppContext } from '../../hooks/appContext/UseAppContext';
 import {
  Avatar,
  Button,
+  Icon, 
  IconButton,
+  IconName,
  Menu,
  MenuItem,
  Navbar,
-  PlaneIcon,
-  SignOutIcon,
  Spinner,
  Typography
 } from '@noahspan/noahspan-components';
 import { useIsAuthenticated, useMsal } from '@azure/msal-react';
-import { InteractionStatus } from '@azure/msal-browser';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { AxiosInstance, AxiosResponse } from 'axios';
 import { User } from '@microsoft/microsoft-graph-types';
-import { EventMessage, EventPayload, EventType } from '@azure/msal-browser';

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