pilot view

2024-10-03 20:31:11 -05:00
parent e67e8f35b5
commit 973ed9d63b
11 changed files with 501 additions and 304 deletions
--- a/api/src/app.controller.ts
+++ b/api/src/app.controller.ts
@@ -74,7 +74,7 @@ export class AppController {
  }

  @Get('userProfile')
-  async getUserProfile(@Headers() headers: any) {
+  async getUserProfile(@Headers() headers: any): Promise<any> {
    try {
      const graphToken: string = await this.msGraphService.getMsGraphAuth(
        headers.authorization.replace('Bearer ', ''),
@@ -94,12 +94,12 @@ export class AppController {
  async searchUsers(
    @Headers() headers: any,
    @Query('search') search: any
-  ): Promise<Person[]> {
+  ): Promise<any> {
    try {
      const accessToken: string = headers.authorization.replace('Bearer ', '');
-      const personSearchResults: Person[] =
+      const personSearchResults: any[] =
        await this.appService.getPersonSearchResults(accessToken, search);
-      console.log(personSearchResults);
+
      return personSearchResults;
    } catch (error) {
      return error;
--- a/api/src/app.service.ts
+++ b/api/src/app.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@nestjs/common';
 import { MsGraphService, MsGraphClient } from '@noahspan/noahspan-modules';
-import { Person } from '@microsoft/microsoft-graph-types';

@Injectable()
 export class AppService {
@@ -13,7 +12,7 @@ export class AppService {
  async getPersonSearchResults(
    accessToken: string,
    search: string
-  ): Promise<Person[]> {
+  ): Promise<any[]> {
    try {
      const graphToken: string = await this.msGraphService.getMsGraphAuth(
        accessToken,
@@ -22,12 +21,16 @@ export class AppService {
      const client: MsGraphClient =
        await this.msGraphService.getMsGraphClientDelegated(graphToken);
      const results: any = await client
-        .api(`me/people/?$search=${search}`)
+        .api('users')
+        .header('ConsistencyLevel', 'eventual')
+        .search(`"displayName:${search}"`)
+        .orderby('displayName')
+        .select(['displayName', 'userPrincipalName'])
        .get();
-      let personResults: Person[];
+      let personResults: any[];

      if (results.value) {
-        personResults = results.value.filter((result: Person) => {
+        personResults = results.value.filter((result: any) => {
          if (result.userPrincipalName !== null) {
            return result;
          }
--- a/api/src/pilot/info/pilot-info.service.ts
+++ b/api/src/pilot/info/pilot-info.service.ts
@@ -11,9 +11,43 @@ export class PilotInfoService {

  constructor(private readonly tableService: TableService) {}

-  // async find(rowKey: string): Promise<PilotInfoEntity> {
-  //   return await this.pilotInfoRepository.find(this.partitionKey, rowKey);
-  // }
+  async find(pilotId: string): Promise<PilotInfoEntity> {
+    try {
+      const client: TableClient =
+        await this.tableService.getTableClient('Pilots');
+      const entities = await client.listEntities({
+        queryOptions: {
+          filter: odata`PartitionKey eq 'pilot' and RowKey eq '${pilotId}'`
+        }
+      });
+      let pilot: PilotInfoEntity;
+      console.log(entities);
+      for await (const entity of entities) {
+        pilot = {
+          partitionKey: entity.partitionKey,
+          rowKey: entity.rowKey,
+          id: entity.id.toString(),
+          name: entity.name.toString(),
+          address: entity.address.toString(),
+          city: entity.city.toString(),
+          state: entity.state.toString(),
+          postalCode: entity.postalCode.toString(),
+          email: entity.email.toString(),
+          phone: entity.phone.toString()
+        };
+      }
+
+      return pilot;
+    } catch (error) {
+      const restError: RestError = error as RestError;
+
+      throw new CustomError(
+        restError.details['odataError']['message']['value'],
+        restError.details['odataError']['code'],
+        restError.statusCode
+      );
+    }
+  }

  async findAll(): Promise<PilotInfoEntity[]> {
    try {
--- a/api/src/pilot/interceptors/pilot.interceptor.ts
+++ b/api/src/pilot/interceptors/pilot.interceptor.ts
@@ -8,7 +8,29 @@ export class PilotInterceptor implements NestInterceptor {
    const token = authHeader && authHeader.split(' ')[1];

    if (!token) {
-      return handler.handle().pipe(map((data) => data));
+      return handler.handle().pipe(
+        map((data) => {
+          if (data.length) {
+            const pilots = data.map((pilot) => {
+              return {
+                partitionKey: pilot.partitionKey,
+                rowKey: pilot.rowKey,
+                id: pilot.id,
+                name: pilot.name
+              };
+            });
+
+            return pilots;
+          } else {
+            return {
+              partitionKey: data.partitionKey,
+              rowKey: data.rowKey,
+              id: data.id,
+              name: data.name
+            };
+          }
+        })
+      );
    }

    return handler.handle().pipe(map((data) => data));
--- a/api/src/pilot/pilot.controller.ts
+++ b/api/src/pilot/pilot.controller.ts
@@ -3,6 +3,7 @@ import {
  Controller,
  Get,
  HttpException,
+  Param,
  Post,
  UseInterceptors
 } from '@nestjs/common';
@@ -18,6 +19,25 @@ import { Public } from '@noahspan/noahspan-modules';
 export class PilotController {
  constructor(private readonly pilotInfoService: PilotInfoService) {}

+  @Get(':pilotId')
+  @Public()
+  @UseInterceptors(PilotInterceptor)
+  async find(@Param() params: any): Promise<PilotInfoEntity> {
+    try {
+      const pilot: PilotInfoEntity = await this.pilotInfoService.find(
+        params.pilotId
+      );
+
+      return pilot;
+    } catch (error) {
+      const customError = error as CustomError;
+
+      throw new HttpException(customError.message, customError.statusCode, {
+        cause: customError.name
+      });
+    }
+  }
+
  @Get()
  @Public()
  @UseInterceptors(PilotInterceptor)
--- a/app/package.json
+++ b/app/package.json
@@ -16,7 +16,7 @@
    "@fortawesome/free-regular-svg-icons": "^6.5.2",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@noahspan/noahspan-components": "^0.6.8",
+    "@noahspan/noahspan-components": "^0.7.0",
    "axios": "^1.7.2",
    "framer-motion": "^11.1.7",
    "react": "^18.2.0",
--- a/app/src/components/pilotForm/IPilotFormProps.ts
+++ b/app/src/components/pilotForm/IPilotFormProps.ts
@@ -1,5 +1,8 @@
+import { PilotFormMode } from './PilotForm';
+
 export interface IPilotFormProps {
-  pilotId?: string;
  isDrawerOpen: boolean;
-  onOpenCloseDrawer: () => void;
+  mode: PilotFormMode;
+  onOpenClose: (mode: PilotFormMode) => void;
+  pilotId?: string;
 }
--- a/app/src/components/pilotForm/PilotForm.tsx
+++ b/app/src/components/pilotForm/PilotForm.tsx
@@ -1,49 +1,60 @@
 import { useEffect, useState } from 'react';
-import {
-  useForm,
-  Controller,
-  FormProvider,
-  FieldValues
-} from 'react-hook-form';
+import { useForm, Controller, FormProvider } from 'react-hook-form';
 import {
  Button,
-  DatePicker,
  Drawer,
  DrawerBody,
  DrawerHeader,
  DrawerFooter,
  Input,
-  Option,
  PeoplePicker,
  SaveIcon,
-  Select,
  StateSelect,
  Typography,
  XmarkIcon
 } from '@noahspan/noahspan-components';
 import { IPilotFormProps } from './IPilotFormProps';
-import PilotFormCertificates from '../pilotFormCertificates/PilotFormCertificates';
-import PilotFormEndorsements from '../pilotFormEndorsements/PilotFormEndorsements';
-import { Person } from '@microsoft/microsoft-graph-types';
-import axios, { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
+import axios, { AxiosInstance, AxiosResponse } from 'axios';
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
-import { IPilotFormCertificates } from '../pilotFormCertificates/IPilotFormCertificates';
-import { IPilotFormEndorsements } from '../pilotFormEndorsements/IPilotFormEndorsements';
-import { EventMessage, EventPayload, EventType } from '@azure/msal-browser';
+import { useIsAuthenticated } from '@azure/msal-react';
+
+export enum PilotFormMode {
+  ADD = 'ADD',
+  EDIT = 'EDIT',
+  VIEW = 'VIEW',
+  CANCEL = 'CANCEL'
+}

 const PilotForm: React.FC<IPilotFormProps> = ({
  pilotId,
  isDrawerOpen,
-  onOpenCloseDrawer
+  mode,
+  onOpenClose
 }: IPilotFormProps) => {
  const httpClient: AxiosInstance = useHttpClient();
-  const [peoplePickerResults, setPeoplePickerResults] = useState<Person[]>([]);
+  const [peoplePickerResults, setPeoplePickerResults] = useState<any[]>([]);
  const [isPeoplePickerLoading, setIsPeoplePickerLoading] =
    useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const { getAccessToken } = useAccessToken();
-  const methods = useForm();
+  const isAuthenticated = useIsAuthenticated();
+  const defaultValues = {
+    partitionKey: '',
+    rowKey: '',
+    id: '',
+    name: '',
+    address: '',
+    city: '',
+    state: '',
+    postalCode: '',
+    email: '',
+    phone: ''
+  };
+  const methods = useForm({
+    defaultValues: defaultValues
+  });
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);

  const handlePeoplePickerOnClick = (
    event: React.MouseEvent<HTMLDivElement>
@@ -82,6 +93,11 @@ const PilotForm: React.FC<IPilotFormProps> = ({
    }
  };

+  const onCancel = () => {
+    methods.reset(defaultValues);
+    onOpenClose(PilotFormMode.CANCEL);
+  };
+
  const onSubmit = async (data: unknown) => {
    try {
      setIsLoading(true);
@@ -111,8 +127,38 @@ const PilotForm: React.FC<IPilotFormProps> = ({
  };

  useEffect(() => {
-    console.log(methods.formState.errors);
-  }, [methods.formState.errors]);
+    if (mode === PilotFormMode.VIEW) {
+      setIsDisabled(true);
+    }
+  }, [mode]);
+
+  useEffect(() => {
+    const getPilot = async () => {
+      try {
+        setIsLoading(true);
+
+        const config = isAuthenticated
+          ? { headers: { Authorization: await getAccessToken() } }
+          : {};
+        const response: AxiosResponse = await httpClient.get(
+          `api/pilots/${pilotId}`,
+          config
+        );
+        const pilot = response.data;
+        console.log(pilot);
+        // methods.setValue('blah', pilot.value)
+        methods.reset(pilot);
+        console.log(methods.getValues());
+      } catch (error) {
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (pilotId) {
+      getPilot();
+    }
+  }, [pilotId]);

  return (
    <Drawer
@@ -122,7 +168,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
      data-testid="pilot-drawer"
    >
      <FormProvider {...methods}>
-        <DrawerHeader text="Add Pilot" onClose={onOpenCloseDrawer} />
+        <DrawerHeader text="Add Pilot" onClose={onCancel} />
        <form onSubmit={methods.handleSubmit(onSubmit)}>
          <DrawerBody>
            <div className="grid grid-cols-4 gap-4">
@@ -134,11 +180,11 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                  name="name"
                  control={methods.control}
                  rules={{ required: 'A name must be selected' }}
-                  render={({ field: { disabled, value } }) => (
+                  render={({ field: { value } }) => (
                    <PeoplePicker
                      results={peoplePickerResults}
                      inputProps={{
-                        disabled: disabled,
+                        disabled: isDisabled,
                        labelProps: {
                          className: 'before:content-none after:content-none'
                        },
@@ -159,6 +205,8 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                  )}
                />
              </div>
+              {isAuthenticated && (
+                <>
                  <div className="col-span-1">
                    <Typography variant="h6">Address *</Typography>
                  </div>
@@ -167,14 +215,16 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                      name="address"
                      control={methods.control}
                      rules={{ required: 'An address is required' }}
-                  render={({ field: { disabled, onChange, value } }) => (
+                      render={({ field: { onChange, value } }) => (
                        <Input
                          className="!border-t-blue-gray-200 focus:!border-t-gray-900"
-                      disabled={disabled}
+                          disabled={isDisabled}
                          labelProps={{
                            className: 'before:content-none after:content-none'
                          }}
-                      error={methods.formState.errors.address ? true : false}
+                          error={
+                            methods.formState.errors.address ? true : false
+                          }
                          helperText={
                            methods.formState.errors.address
                              ? methods.formState.errors.address.message?.toString()
@@ -187,6 +237,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                      )}
                    />
                  </div>
+                </>
+              )}
+              {isAuthenticated && (
+                <>
                  <div className="col-span-1">
                    <Typography variant="h6">City *</Typography>
                  </div>
@@ -195,9 +249,9 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                      name="city"
                      control={methods.control}
                      rules={{ required: 'A city is required' }}
-                  render={({ field: { disabled, onChange, value } }) => (
+                      render={({ field: { onChange, value } }) => (
                        <Input
-                      disabled={disabled}
+                          disabled={isDisabled}
                          labelProps={{
                            className: 'before:content-none after:content-none'
                          }}
@@ -214,6 +268,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                      )}
                    />
                  </div>
+                </>
+              )}
+              {isAuthenticated && (
+                <>
                  <div className="col-span-1">
                    <Typography variant="h6">State *</Typography>
                  </div>
@@ -222,9 +280,12 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                      name="state"
                      control={methods.control}
                      rules={{ required: 'A state must be selected' }}
-                  render={({ field: { disabled, onChange, value } }) => (
+                      render={({ field: { onChange, value } }) => (
                        <StateSelect
-                      disabled={disabled}
+                          disabled={isDisabled}
+                          labelProps={{
+                            className: 'before:content-none after:content-none'
+                          }}
                          error={methods.formState.errors.state ? true : false}
                          helperText={
                            methods.formState.errors.state
@@ -239,6 +300,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                      )}
                    />
                  </div>
+                </>
+              )}
+              {isAuthenticated && (
+                <>
                  <div className="col-span-1">
                    <Typography variant="h6">Postal Code *</Typography>
                  </div>
@@ -247,13 +312,15 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                      name="postalCode"
                      control={methods.control}
                      rules={{ required: 'A postal code is required' }}
-                  render={({ field: { disabled, onChange, value } }) => (
+                      render={({ field: { onChange, value } }) => (
                        <Input
-                      disabled={disabled}
+                          disabled={isDisabled}
                          labelProps={{
                            className: 'before:content-none after:content-none'
                          }}
-                      error={methods.formState.errors.postalCode ? true : false}
+                          error={
+                            methods.formState.errors.postalCode ? true : false
+                          }
                          helperText={
                            methods.formState.errors.postalCode
                              ? methods.formState.errors.postalCode.message?.toString()
@@ -266,6 +333,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                      )}
                    />
                  </div>
+                </>
+              )}
+              {isAuthenticated && (
+                <>
                  <div className="col-span-1">
                    <Typography variant="h6">Email</Typography>
                  </div>
@@ -279,9 +350,9 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                          message: 'Invalid email address'
                        }
                      }}
-                  render={({ field: { disabled, onChange, value } }) => (
+                      render={({ field: { onChange, value } }) => (
                        <Input
-                      disabled={disabled}
+                          disabled={isDisabled}
                          labelProps={{
                            className: 'before:content-none after:content-none'
                          }}
@@ -298,6 +369,10 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                      )}
                    />
                  </div>
+                </>
+              )}
+              {isAuthenticated && (
+                <>
                  <div className="col-span-1">
                    <Typography variant="h6">Phone Number</Typography>
                  </div>
@@ -311,9 +386,9 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                          message: 'Enter phone number as 123-456-7890'
                        }
                      }}
-                  render={({ field: { disabled, onChange, value } }) => (
+                      render={({ field: { onChange, value } }) => (
                        <Input
-                      disabled={disabled}
+                          disabled={isDisabled}
                          labelProps={{
                            className: 'before:content-none after:content-none'
                          }}
@@ -330,7 +405,9 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                      )}
                    />
                  </div>
-              {pilotId && (
+                </>
+              )}
+              {/* {pilotId && (
                <>
                  <div className="col-span-1">
                    <Typography variant="h6">Last Review</Typography>
@@ -354,8 +431,8 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                    />
                  </div>
                </>
-              )}
-              {pilotId && (
+              )} */}
+              {/* {pilotId && (
                <>
                  <div className="col-span-4">
                    <Typography variant="h5">Medical</Typography>
@@ -434,16 +511,19 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                  </div>
                  <PilotFormEndorsements endorsements={[]} />
                </>
-              )}
+              )} */}
            </div>
          </DrawerBody>
          <DrawerFooter>
+            <>
+              {mode !== PilotFormMode.VIEW && (
                <div className="flex gap-2 justify-end justify-self-center pt-4">
                  <div>
                    <Button
                      className="flex items-center gap-3"
+                      disabled={isDisabled}
                      variant="outlined"
-                  onClick={onOpenCloseDrawer}
+                      onClick={onCancel}
                      data-testid="pilot-cancel-button"
                    >
                      <XmarkIcon size="lg" />
@@ -453,6 +533,7 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                  <div>
                    <Button
                      className="flex items-center gap-3"
+                      disabled={isDisabled}
                      loading={isLoading}
                      variant="filled"
                      type="submit"
@@ -463,6 +544,8 @@ const PilotForm: React.FC<IPilotFormProps> = ({
                    </Button>
                  </div>
                </div>
+              )}
+            </>
          </DrawerFooter>
        </form>
      </FormProvider>
--- a/app/src/components/pilots/Pilots.tsx
+++ b/app/src/components/pilots/Pilots.tsx
@@ -19,14 +19,34 @@ import {
 import { useHttpClient } from '../../hooks/httpClient/UseHttpClient';
 import { AxiosInstance, AxiosResponse } from 'axios';
 import { useAccessToken } from '../../hooks/accessToken/UseAcessToken';
+import { useIsAuthenticated } from '@azure/msal-react';
+import { PilotFormMode } from '../pilotForm/PilotForm';

 const Pilots: React.FC<unknown> = () => {
  const httpClient: AxiosInstance = useHttpClient();
+  const isAuthenticated = useIsAuthenticated();
  const { getAccessToken } = useAccessToken();
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [pilotFormMode, setPilotFormMode] = useState<PilotFormMode>(
+    PilotFormMode.CANCEL
+  );
+  const [selectedPilotId, setSelectedPilotId] = useState<string | undefined>();
  const [pilots, setPilots] = useState<Pilot[]>([]);
-  const onOpenCloseDrawer = () => {
-    setIsDrawerOpen(!isDrawerOpen);
+  const onOpenClosePilotForm = (mode: PilotFormMode, pilotId?: string) => {
+    switch (mode) {
+      case PilotFormMode.ADD:
+      case PilotFormMode.EDIT:
+      case PilotFormMode.VIEW:
+        setPilotFormMode(mode);
+        setSelectedPilotId(pilotId);
+        setIsDrawerOpen(true);
+        break;
+      case PilotFormMode.CANCEL:
+        setPilotFormMode(mode);
+        setSelectedPilotId(undefined);
+        setIsDrawerOpen(false);
+        break;
+    }
  };

  type Pilot = {
@@ -40,54 +60,66 @@ const Pilots: React.FC<unknown> = () => {
    {
      accessorKey: 'name',
      header: 'Name'
+    },
+    {
+      id: 'actions',
+      header: 'Actions',
+      cellProps: {
+        className: 'text-end'
+      },
+      cell: (info: any) => {
+        const pilotId = info.row.original.rowKey;
+        return (
+          <Menu placement="bottom-end">
+            <MenuHandler>
+              <div>
+                <IconButton variant="text">
+                  <EllipsisVerticalIcon size="xl" />
+                </IconButton>
+              </div>
+            </MenuHandler>
+            <MenuList>
+              <MenuItem
+                className="flex gap-3"
+                onClick={() =>
+                  onOpenClosePilotForm(PilotFormMode.EDIT, pilotId)
+                }
+              >
+                <PenIcon size="lg" />
+                Edit
+              </MenuItem>
+              <MenuItem
+                className="flex gap-3"
+                onClick={() =>
+                  onOpenClosePilotForm(PilotFormMode.VIEW, pilotId)
+                }
+              >
+                <EyeIcon size="lg" />
+                View
+              </MenuItem>
+              <hr className="my-3" />
+              <MenuItem className="flex gap-3">
+                <TrashIcon size="lg" />
+                Delete
+              </MenuItem>
+            </MenuList>
+          </Menu>
+        );
+      },
+      enableSorting: false
    }
-    // {
-    //   id: 'actions',
-    //   header: 'Actions',
-    //   cellProps: {
-    //     className: 'text-center'
-    //   },
-    //   cell: () => {
-    //     return (
-    //       <Menu placement="bottom-end">
-    //         <MenuHandler>
-    //           <div>
-    //             <IconButton variant="text">
-    //               <EllipsisVerticalIcon size="xl" />
-    //             </IconButton>
-    //           </div>
-    //         </MenuHandler>
-    //         <MenuList>
-    //           <MenuItem className="flex gap-3">
-    //             <PenIcon size="lg" />
-    //             Edit
-    //           </MenuItem>
-    //           <MenuItem className="flex gap-3">
-    //             <EyeIcon size="lg" />
-    //             View
-    //           </MenuItem>
-    //           <hr className="my-3" />
-    //           <MenuItem className="flex gap-3">
-    //             <TrashIcon size="lg" />
-    //             Delete
-    //           </MenuItem>
-    //         </MenuList>
-    //       </Menu>
-    //     );
-    //   },
-    //   enableSorting: false
-    // }
  ];

  useEffect(() => {
    const getPilots = async () => {
      try {
-        const accessToken: string = await getAccessToken();
-        const response: AxiosResponse = await httpClient.get(`api/pilots`, {
-          headers: {
-            Authorization: accessToken
-          }
-        });
+        const config = isAuthenticated
+          ? { headers: { Authorization: await getAccessToken() } }
+          : {};
+        const response: AxiosResponse = await httpClient.get(
+          `api/pilots`,
+          config
+        );
        console.log(response.data);
        setPilots(response.data);
      } catch (error) {
@@ -108,7 +140,7 @@ const Pilots: React.FC<unknown> = () => {
          <Button
            className="flex justify-center gap-3"
            variant="filled"
-            onClick={onOpenCloseDrawer}
+            onClick={() => onOpenClosePilotForm(PilotFormMode.ADD)}
            data-testid="pilot-add-button"
          >
            <PlusIcon size="lg" />
@@ -119,7 +151,9 @@ const Pilots: React.FC<unknown> = () => {
      </div>
      <PilotForm
        isDrawerOpen={isDrawerOpen}
-        onOpenCloseDrawer={onOpenCloseDrawer}
+        mode={pilotFormMode}
+        onOpenClose={(mode) => onOpenClosePilotForm(mode)}
+        pilotId={selectedPilotId}
      />
    </>
  );
--- a/app/src/components/siteNav/SiteNav.tsx
+++ b/app/src/components/siteNav/SiteNav.tsx
@@ -3,6 +3,7 @@ import { ISiteNavProps } from './ISiteNavProps';
 // import { Link as ReactRouterLink } from 'react-router-dom';
 import { useAppContext } from '../../hooks/appContext/UseAppContext';
 import {
+  Avatar,
  Button,
  Menu,
  MenuHandler,
@@ -160,24 +161,21 @@ const SiteNav: React.FC<unknown> = () => {
          {!loading && isAuthenticated && (
            <Menu placement="bottom-end">
              <MenuHandler>
-                <>
-                  {/* {userPhoto && */}
-                  {/* <img className='rounded-full' src={userPhoto} /> */}
-                  {/* } */}
-                  {/* {!userPhoto && */}
-                  <div className="rounded-full text-white text-center pt-2 bg-black h-[40px] w-[40px]">
+                <div>
+                  {userPhoto && (
+                    <img
+                      className="rounded-full cursor-pointer"
+                      height="40"
+                      width="40"
+                      src={userPhoto}
+                    />
+                  )}
+                  {!userPhoto && (
+                    <div className="rounded-full cursor-pointer text-white text-center pt-2 bg-black h-[40px] w-[40px]">
                      NS
                    </div>
-
-                  {/* <div className="flex gap-2">
-                  <div className='flex-none'>
-                    
+                  )}
                </div>
-                  <Button className='flex-1' variant="text" size="sm">
-                    {appContext.state.userProfile.displayName}
-                  </Button>
-                </div> */}
-                </>
              </MenuHandler>
              <MenuList>
                <MenuItem onClick={handleSignOut}>
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,7 +76,7 @@
        "@fortawesome/free-regular-svg-icons": "^6.5.2",
        "@fortawesome/free-solid-svg-icons": "^6.5.2",
        "@fortawesome/react-fontawesome": "^0.2.2",
-        "@noahspan/noahspan-components": "^0.6.8",
+        "@noahspan/noahspan-components": "^0.7.0",
        "axios": "^1.7.2",
        "framer-motion": "^11.1.7",
        "react": "^18.2.0",
@@ -3397,9 +3397,9 @@
      "link": true
    },
    "node_modules/@noahspan/noahspan-components": {
-      "version": "0.6.8",
-      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-components/-/noahspan-components-0.6.8.tgz",
-      "integrity": "sha512-X4ftKtH9/ICyOCRKUnPMAh/u27Bi391edSKvIwWOxxawyIEZj58whjB0RfgcHV0O/Ap84lGt7YYctZTTzJHBEQ==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@noahspan/noahspan-components/-/noahspan-components-0.7.0.tgz",
+      "integrity": "sha512-UJ0UBEwjt3IJTUhdNh/sUMFuuruJl6zn8pzy2JOZoMBfRmrX/6Dzz+u+3F0Q7RAitgV/XhJskSYrJBripenGzw==",
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.5.2",
        "@fortawesome/free-brands-svg-icons": "^6.5.2",