From 79d73d5da9aad756061ded88c24ea5837616a0a3 Mon Sep 17 00:00:00 2001
From: Sanjay Babu <sanjaytkbabu@gmail.com>
Date: Tue, 23 Jul 2024 15:53:14 -0700
Subject: [PATCH] user mgmt supervisor backend implementation

---
 app/src/controllers/user.ts                   |  37 +++++
 .../20240717000000_007_access-request.ts      |  57 +++++++
 app/src/db/models/access_request.ts           |  32 ++++
 app/src/db/models/index.ts                    |   1 +
 app/src/db/models/user.ts                     |  11 ++
 app/src/db/prisma/schema.prisma               |  20 +++
 app/src/routes/v1/user.ts                     |  18 ++-
 app/src/services/user.ts                      |  91 ++++++++++-
 app/src/types/AccessRequest.ts                |  10 ++
 app/src/types/User.ts                         |   3 +
 app/src/types/index.ts                        |   1 +
 app/src/utils/enums/application.ts            |   5 +
 .../src/components/user/UserCreateModal.vue   |  97 +++++++++---
 .../src/components/user/UserManageModal.vue   |  14 +-
 frontend/src/components/user/UserTable.vue    |  30 ++--
 frontend/src/services/userService.ts          |  34 ++++-
 frontend/src/types/AccessRequest.ts           |  11 ++
 frontend/src/types/User.ts                    |   3 +
 frontend/src/types/index.ts                   |   1 +
 frontend/src/utils/constants/application.ts   |   6 +-
 frontend/src/utils/enums/application.ts       |  18 +++
 .../src/views/user/UserManagementView.vue     | 142 ++++++++++++++----
 22 files changed, 562 insertions(+), 80 deletions(-)
 create mode 100644 app/src/db/migrations/20240717000000_007_access-request.ts
 create mode 100644 app/src/db/models/access_request.ts
 create mode 100644 app/src/types/AccessRequest.ts
 create mode 100644 frontend/src/types/AccessRequest.ts

diff --git a/app/src/controllers/user.ts b/app/src/controllers/user.ts
index 458652bed..112f3cdc4 100644
--- a/app/src/controllers/user.ts
+++ b/app/src/controllers/user.ts
@@ -4,6 +4,34 @@ import { addDashesToUuid, mixedQueryToArray, isTruthy } from '../utils/utils';
 import type { NextFunction, Request, Response } from 'express';
 
 const controller = {
+  // Request to create user & access
+  createUserAccessRequest: async (req: Request, res: Response, next: NextFunction) => {
+    try {
+      const response = await userService.createUserAccessRequest(req.body);
+      res.status(201).json(response);
+    } catch (e: unknown) {
+      next(e);
+    }
+  },
+
+  getNavsAndAccessRequests: async (req: Request, res: Response, next: NextFunction) => {
+    try {
+      const response = await userService.getNavsAndAccessRequests();
+      res.status(200).json(response);
+    } catch (e: unknown) {
+      next(e);
+    }
+  },
+  // Request to revoke user access
+  revokeUserAccessRequest: async (req: Request, res: Response, next: NextFunction) => {
+    try {
+      const response = await userService.revokeUserAccessRequest(req.body);
+      res.status(200).json(response);
+    } catch (e: unknown) {
+      next(e);
+    }
+  },
+
   searchUsers: async (req: Request, res: Response, next: NextFunction) => {
     try {
       const userIds = mixedQueryToArray(req.query.userId as string);
@@ -23,6 +51,15 @@ const controller = {
     } catch (e: unknown) {
       next(e);
     }
+  },
+
+  updateUserRole: async (req: Request, res: Response, next: NextFunction) => {
+    try {
+      const response = await userService.updateUserRole(req.body);
+      res.status(200).json(response);
+    } catch (e: unknown) {
+      next(e);
+    }
   }
 };
 
diff --git a/app/src/db/migrations/20240717000000_007_access-request.ts b/app/src/db/migrations/20240717000000_007_access-request.ts
new file mode 100644
index 000000000..73621afa9
--- /dev/null
+++ b/app/src/db/migrations/20240717000000_007_access-request.ts
@@ -0,0 +1,57 @@
+import stamps from '../stamps';
+
+import type { Knex } from 'knex';
+
+export async function up(knex: Knex): Promise<void> {
+  return (
+    Promise.resolve()
+      // Create the access_request table
+      .then(() =>
+        knex.schema.createTable('access_request', (table) => {
+          table.uuid('access_request_id').primary();
+          table
+            .uuid('user_id')
+            .notNullable()
+            .references('user_id')
+            .inTable('user')
+            .onUpdate('CASCADE')
+            .onDelete('CASCADE');
+          // TODO: make a reference to role table
+          table.text('role');
+          table
+            .enu('status', ['Approved', 'Pending', 'Rejected'], {
+              useNative: true,
+              enumName: 'access_request_status_enum'
+            })
+            .defaultTo('Pending')
+            .notNullable();
+          table.boolean('grant').notNullable();
+          stamps(knex, table);
+          table.unique(['user_id']);
+        })
+      )
+
+      .then(() =>
+        knex.schema.raw(`create trigger before_update_access_request_trigger
+          before update on public.access_request
+          for each row execute procedure public.set_updated_at();`)
+      )
+
+      .then(() =>
+        knex.schema.raw(`CREATE TRIGGER audit_access_request_trigger
+          AFTER UPDATE OR DELETE ON access_request
+          FOR EACH ROW EXECUTE PROCEDURE audit.if_modified_func();`)
+      )
+  );
+}
+
+export async function down(knex: Knex): Promise<void> {
+  return (
+    Promise.resolve()
+      // Drop triggers
+      .then(() => knex.schema.raw('DROP TRIGGER IF EXISTS before_update_access_request_trigger ON access_request'))
+      .then(() => knex.schema.raw('DROP TRIGGER IF EXISTS audit_access_request_trigger ON access_request'))
+      // Drop the access_request table
+      .then(() => knex.schema.dropTableIfExists('access_request'))
+  );
+}
diff --git a/app/src/db/models/access_request.ts b/app/src/db/models/access_request.ts
new file mode 100644
index 000000000..71cf317a8
--- /dev/null
+++ b/app/src/db/models/access_request.ts
@@ -0,0 +1,32 @@
+import { Prisma } from '@prisma/client';
+
+import type { Stamps } from '../stamps';
+import type { AccessRequest } from '../../types/AccessRequest'; // Import the access_request_status_enum type
+import { UserStatus } from '../../utils/enums/application';
+
+// Define types
+const _accessRequest = Prisma.validator<Prisma.access_requestDefaultArgs>()({});
+
+type PrismaRelationAccessRequest = Omit<Prisma.access_requestGetPayload<typeof _accessRequest>, keyof Stamps>;
+
+export default {
+  toPrismaModel(input: AccessRequest): PrismaRelationAccessRequest {
+    return {
+      access_request_id: input.accessRequestId,
+      grant: input.grant,
+      role: input.role,
+      status: input.status as UserStatus, // Cast the status property to UserStatus enum
+      user_id: input.userId
+    };
+  },
+
+  fromPrismaModel(input: PrismaRelationAccessRequest): AccessRequest {
+    return {
+      accessRequestId: input.access_request_id,
+      grant: input.grant,
+      role: input.role,
+      userId: input.user_id as string,
+      status: input.status as UserStatus // Cast the status property to UserStatus enum
+    };
+  }
+};
diff --git a/app/src/db/models/index.ts b/app/src/db/models/index.ts
index e62d513cf..2d29975ad 100644
--- a/app/src/db/models/index.ts
+++ b/app/src/db/models/index.ts
@@ -1,4 +1,5 @@
 export { default as activity } from './activity';
+export { default as access_request } from './access_request';
 export { default as document } from './document';
 export { default as enquiry } from './enquiry';
 export { default as identity_provider } from './identity_provider';
diff --git a/app/src/db/models/user.ts b/app/src/db/models/user.ts
index 1a7371fe5..20ba60922 100644
--- a/app/src/db/models/user.ts
+++ b/app/src/db/models/user.ts
@@ -1,12 +1,16 @@
 import { Prisma } from '@prisma/client';
 
+import access_request from './access_request';
+
 import type { Stamps } from '../stamps';
 import type { User } from '../../types/User';
 
 // Define types
 const _user = Prisma.validator<Prisma.userDefaultArgs>()({});
+const _userWithAccessRequestGraph = Prisma.validator<Prisma.userDefaultArgs>()({ include: { access_request: true } });
 
 type PrismaRelationUser = Omit<Prisma.userGetPayload<typeof _user>, keyof Stamps>;
+type PrismaGraphUserAccessRequest = Prisma.userGetPayload<typeof _userWithAccessRequestGraph>;
 
 export default {
   toPrismaModel(input: User): PrismaRelationUser {
@@ -35,5 +39,12 @@ export default {
       lastName: input.last_name,
       active: input.active
     };
+  },
+  fromPrismaModelWithAccessRequest(input: PrismaGraphUserAccessRequest): User {
+    const user = this.fromPrismaModel(input);
+    if (input.access_request) {
+      user.accessRequest = access_request.fromPrismaModel(input.access_request);
+    }
+    return user;
   }
 };
diff --git a/app/src/db/prisma/schema.prisma b/app/src/db/prisma/schema.prisma
index 93fa188cf..de75c1d24 100644
--- a/app/src/db/prisma/schema.prisma
+++ b/app/src/db/prisma/schema.prisma
@@ -209,6 +209,7 @@ model user {
   created_at        DateTime?          @default(now()) @db.Timestamptz(6)
   updated_by        String?
   updated_at        DateTime?          @db.Timestamptz(6)
+  access_request    access_request?
   enquiry           enquiry[]
   submission        submission[]
   identity_provider identity_provider? @relation(fields: [idp], references: [idp], onDelete: Cascade, map: "user_idp_foreign")
@@ -245,3 +246,22 @@ model enquiry {
   activity                       activity  @relation(fields: [activity_id], references: [activity_id], onDelete: Cascade, map: "enquiry_activity_id_foreign")
   user                           user?     @relation(fields: [assigned_user_id], references: [user_id], onDelete: Cascade, map: "enquiry_assigned_user_id_foreign")
 }
+
+model access_request {
+  access_request_id String                     @id @db.Uuid
+  user_id           String                     @unique(map: "access_request_user_id_unique") @db.Uuid
+  role              String?
+  status            access_request_status_enum @default(Pending)
+  grant             Boolean
+  created_by        String?                    @default("00000000-0000-0000-0000-000000000000")
+  created_at        DateTime?                  @default(now()) @db.Timestamptz(6)
+  updated_by        String?
+  updated_at        DateTime?                  @db.Timestamptz(6)
+  user              user                       @relation(fields: [user_id], references: [user_id], onDelete: Cascade, map: "access_request_user_id_foreign")
+}
+
+enum access_request_status_enum {
+  Approved
+  Pending
+  Rejected
+}
diff --git a/app/src/routes/v1/user.ts b/app/src/routes/v1/user.ts
index b09b9c170..9031add80 100644
--- a/app/src/routes/v1/user.ts
+++ b/app/src/routes/v1/user.ts
@@ -8,9 +8,25 @@ import type { NextFunction, Request, Response } from 'express';
 const router = express.Router();
 router.use(requireSomeAuth);
 
-// Submission endpoint
+// Search for users
 router.get('/', userValidator.searchUsers, (req: Request, res: Response, next: NextFunction): void => {
   userController.searchUsers(req, res, next);
 });
+// Request to revoke a user
+router.put('/request/access', (req: Request, res: Response, next: NextFunction): void => {
+  userController.revokeUserAccessRequest(req, res, next);
+});
+// Request to create a user and access request
+router.post('/request/access', (req: Request, res: Response, next: NextFunction): void => {
+  userController.createUserAccessRequest(req, res, next);
+});
+// Update user role
+router.put('/role', (req: Request, res: Response, next: NextFunction): void => {
+  userController.updateUserRole(req, res, next);
+});
+
+router.get('/navsRequests', (req: Request, res: Response, next: NextFunction): void => {
+  userController.getNavsAndAccessRequests(req, res, next);
+});
 
 export default router;
diff --git a/app/src/services/user.ts b/app/src/services/user.ts
index f69db4cbb..aab7b075b 100644
--- a/app/src/services/user.ts
+++ b/app/src/services/user.ts
@@ -3,10 +3,11 @@ import { Prisma } from '@prisma/client';
 import { v4 as uuidv4, NIL } from 'uuid';
 
 import prisma from '../db/dataConnection';
-import { identity_provider, user } from '../db/models';
+import { access_request, identity_provider, user } from '../db/models';
+import { UserStatus } from '../utils/enums/application';
 import { parseIdentityKeyClaims } from '../utils/utils';
 
-import type { User, UserSearchParameters } from '../types';
+import type { AccessRequest, User, UserSearchParameters } from '../types';
 
 const trxWrapper = (etrx: Prisma.TransactionClient | undefined = undefined) => (etrx ? etrx : prisma);
 
@@ -117,6 +118,46 @@ const service = {
     return response;
   },
 
+  /**
+   * @function createUserAccessRequest
+   * Create a user DB record if it does not exist and create an access_request record
+   * @param {object} data Incoming user data
+   * @returns {Promise<object>} The result of running the insert operation
+   * @throws The error encountered upon db transaction failure
+   */
+  createUserAccessRequest: async (data: User) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let response: any;
+    const oldUser = await prisma.user.findFirst({
+      where: {
+        identity_id: data.identityId,
+        idp: data.idp
+      }
+    });
+
+    if (!oldUser) {
+      await prisma.$transaction(async (trx) => {
+        response = await service.createUser(data, trx);
+
+        const newAccessRequest = {
+          accessRequestId: uuidv4(),
+          userId: response?.user_id,
+          grant: data.accessRequest?.grant as boolean,
+          role: data.accessRequest?.role as string,
+          status: UserStatus.PENDING
+        };
+        const accessreqeustresponse = await trx.access_request.create({
+          data: access_request.toPrismaModel(newAccessRequest)
+        });
+
+        response.access_request = accessreqeustresponse;
+      });
+      return user.fromPrismaModelWithAccessRequest(response);
+    } else {
+      return user.fromPrismaModel(oldUser);
+    }
+  },
+
   /**
    * @function getCurrentUserId
    * Gets userId (primary identifier of a user in db) of currentUser.
@@ -136,6 +177,24 @@ const service = {
     return user && user.user_id ? user.user_id : defaultValue;
   },
 
+  /**
+   * @function listNavigators
+   * Lists all the
+   * @param {boolean} [active] Optional boolean on user active status
+   * @returns {Promise<object>} The result of running the find operation
+   */
+  getNavsAndAccessRequests: async () => {
+    const response = await prisma.user.findMany({
+      include: {
+        access_request: true
+      },
+      where: {
+        active: true
+      }
+    });
+    return response.map((x) => user.fromPrismaModelWithAccessRequest(x));
+  },
+
   /**
    * @function listIdps
    * Lists all known identity providers
@@ -324,6 +383,34 @@ const service = {
       // Nothing to update
       return oldUser;
     }
+  },
+  /**
+   * @function revokeUserAccessRequest
+   * Updates user access
+   * @returns {Promise<object>} The result of running the put operation
+   */
+  revokeUserAccessRequest: async (data: AccessRequest) => {
+    const newAccessRequest = {
+      accessRequestId: uuidv4(),
+      userId: data.userId,
+      grant: data.grant,
+      role: null,
+      status: UserStatus.PENDING
+    };
+    const response = await prisma.access_request.create({
+      data: access_request.toPrismaModel(newAccessRequest)
+    });
+
+    return access_request.fromPrismaModel(response);
+  },
+  /**
+   * @function updateUserRole
+   * Updates user role
+   * @returns {Promise<object>} The result of running the put operation
+   */
+  updateUserRole: async (user: User) => {
+    console.log(user);
+    // TODO: Implement updateUserRole
   }
 };
 
diff --git a/app/src/types/AccessRequest.ts b/app/src/types/AccessRequest.ts
new file mode 100644
index 000000000..7619fc0e4
--- /dev/null
+++ b/app/src/types/AccessRequest.ts
@@ -0,0 +1,10 @@
+import { IStamps } from '../interfaces/IStamps';
+import { UserStatus } from '../utils/enums/application';
+
+export type AccessRequest = {
+  accessRequestId: string; // Primary key
+  grant: boolean;
+  role: string | null;
+  status: UserStatus;
+  userId: string;
+} & Partial<IStamps>;
diff --git a/app/src/types/User.ts b/app/src/types/User.ts
index c9b3f7a4e..432af9a5a 100644
--- a/app/src/types/User.ts
+++ b/app/src/types/User.ts
@@ -1,5 +1,7 @@
 import { IStamps } from '../interfaces/IStamps';
 
+import type { AccessRequest } from './AccessRequest';
+
 export type User = {
   userId?: string; // Primary Key
   identityId: string;
@@ -10,4 +12,5 @@ export type User = {
   fullName: string | null;
   lastName: string | null;
   active: boolean;
+  accessRequest?: AccessRequest | null;
 } & Partial<IStamps>;
diff --git a/app/src/types/index.ts b/app/src/types/index.ts
index 5690d27fe..185341e7c 100644
--- a/app/src/types/index.ts
+++ b/app/src/types/index.ts
@@ -1,4 +1,5 @@
 export type { Activity } from './Activity';
+export type { AccessRequest } from './AccessRequest';
 export type { BringForward } from './BringForward';
 export type { ChefsFormConfig, ChefsFormConfigData } from './ChefsFormConfig';
 export type { ChefsSubmissionExport } from './ChefsSubmissionExport';
diff --git a/app/src/utils/enums/application.ts b/app/src/utils/enums/application.ts
index 4db04a522..caf701f58 100644
--- a/app/src/utils/enums/application.ts
+++ b/app/src/utils/enums/application.ts
@@ -30,6 +30,11 @@ export enum Initiative {
   HOUSING = 'HOUSING'
 }
 
+export enum UserStatus {
+  APPROVED = 'Approved',
+  PENDING = 'Pending',
+  REJECTED = 'Rejected'
+}
 export enum Regex {
   /**
    * Generic email regex modified to require domain of at least 2 characters
diff --git a/frontend/src/components/user/UserCreateModal.vue b/frontend/src/components/user/UserCreateModal.vue
index 1959dd2d5..dfbc320b0 100644
--- a/frontend/src/components/user/UserCreateModal.vue
+++ b/frontend/src/components/user/UserCreateModal.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Button, Column, DataTable, Dialog, FilterMatchMode, IconField, InputIcon, InputText } from '@/lib/primevue';
 
 import { Dropdown } from '@/components/form';
+import { Spinner } from '@/components/layout';
+import { Button, Column, DataTable, Dialog, IconField, InputIcon, InputText } from '@/lib/primevue';
+import { PermissionService } from '@/services';
 import { ROLES } from '@/utils/constants/application';
 
+import type { DropdownChangeEvent } from 'primevue/dropdown';
 import type { Ref } from 'vue';
 import type { User } from '@/types';
 
@@ -15,11 +18,33 @@ const emit = defineEmits(['userCreate:request']);
 const visible = defineModel<boolean>('visible');
 const users: Ref<Array<User>> = ref([]);
 const selection: Ref<User | undefined> = ref(undefined);
+const loading: Ref<boolean> = ref(false);
+const selectedRole: Ref<string | undefined> = ref(undefined);
+const selectedParam: Ref<string | undefined> = ref(undefined);
+const searchTag: Ref<string> = ref('');
 
-// Datatable filter(s)
-const filters = ref({
-  global: { value: null, matchMode: FilterMatchMode.CONTAINS }
-});
+const USER_SEARCH_PARAMS: { [key: string]: string } = {
+  firstName: 'First name',
+  lastName: 'Last name',
+  email: 'Email'
+};
+
+// Actions
+const permissionService = new PermissionService();
+
+async function searchIdirUsers() {
+  selection.value = undefined;
+  const searchParam =
+    Object.keys(USER_SEARCH_PARAMS).find((key) => USER_SEARCH_PARAMS[key] === selectedParam.value) ||
+    Object.keys(USER_SEARCH_PARAMS)[0];
+  searchTag.value = searchTag.value.trim();
+  if (searchTag.value.length > 2) {
+    loading.value = true;
+    const response = await Promise.resolve(permissionService.searchIdirUsers({ [searchParam]: searchTag.value }));
+    users.value = response.data;
+    loading.value = false;
+  } else users.value = [];
+}
 </script>
 
 <template>
@@ -27,41 +52,64 @@ const filters = ref({
     v-model:visible="visible"
     :draggable="false"
     :modal="true"
-    class="app-info-dialog w-5"
+    class="app-info-dialog w-6"
   >
     <template #header>
       <span class="p-dialog-title">Create new user</span>
     </template>
-    <IconField
-      icon-position="left"
-      class="mt-1"
-    >
-      <InputIcon class="pi pi-search" />
-      <InputText
-        v-model="filters['global'].value"
-        placeholder="Search by first name, last name, or email"
-        class="col-12 pl-5"
+    <div class="flex justify-content-between align-items-center">
+      <div class="col-9 mb-2">
+        <IconField icon-position="left">
+          <InputIcon class="pi pi-search" />
+          <InputText
+            v-model="searchTag"
+            placeholder="Search by first name, last name, or email"
+            class="col-12 pl-5"
+            @update:model-value="searchIdirUsers"
+          />
+        </IconField>
+      </div>
+      <Dropdown
+        class="col-3 m-0"
+        name="assignRole"
+        placeholder="First name"
+        :options="Object.values(USER_SEARCH_PARAMS)"
+        @on-change="
+          (param: DropdownChangeEvent) => {
+            selectedParam = param.value;
+            searchIdirUsers();
+          }
+        "
       />
-    </IconField>
+    </div>
     <DataTable
       v-model:selection="selection"
-      v-model:filters="filters"
       :row-hover="true"
+      :loading="loading"
       class="datatable mt-3 mb-2"
       :value="users"
       selection-mode="single"
-      data-key="userId"
+      data-key="username"
+      :rows="5"
+      :paginator="true"
     >
       <template #empty>
         <div class="flex justify-content-center">
           <h5 class="m-0">No users found.</h5>
         </div>
       </template>
+      <template #loading>
+        <Spinner />
+      </template>
       <Column
         field="username"
         header="Username"
         sortable
-      />
+      >
+        <template #body="{ data }">
+          {{ data.attributes.display_name[0] }}
+        </template>
+      </Column>
       <Column
         field="firstName"
         header="First Name"
@@ -72,12 +120,19 @@ const filters = ref({
         header="Last Name"
         sortable
       />
+      <Column
+        field="email"
+        header="Email"
+        sortable
+      />
     </DataTable>
     <Dropdown
       class="col-12"
       name="assignRole"
       label="Assign role"
       :options="ROLES"
+      :disabled="!selection"
+      @on-change="(e: DropdownChangeEvent) => (selectedRole = e.value)"
     />
     <div class="flex-auto">
       <Button
@@ -85,10 +140,10 @@ const filters = ref({
         label="Request approval"
         type="submit"
         icon="pi pi-check"
+        :disabled="!selection || !selectedRole"
         @click="
           () => {
-            emit('userCreate:request', selection);
-            visible = false;
+            emit('userCreate:request', selection, selectedRole);
           }
         "
       />
diff --git a/frontend/src/components/user/UserManageModal.vue b/frontend/src/components/user/UserManageModal.vue
index bb0fa75be..7b8f8061c 100644
--- a/frontend/src/components/user/UserManageModal.vue
+++ b/frontend/src/components/user/UserManageModal.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
-import { Button, Dialog } from '@/lib/primevue';
+import { ref } from 'vue';
 
 import { RadioList } from '@/components/form';
+import { Button, Dialog } from '@/lib/primevue';
 import { ROLES } from '@/utils/constants/application';
 
+import type { Ref } from 'vue';
+
 // Emits
 const emit = defineEmits(['userManage:save']);
 
 // State
 const visible = defineModel<boolean>('visible');
+const role: Ref<string | undefined> = ref(undefined);
 </script>
 
 <template>
@@ -27,6 +31,7 @@ const visible = defineModel<boolean>('visible');
       :bold="false"
       :options="ROLES"
       class="mt-3 mb-4"
+      @on-change="(value) => (role = value)"
     />
     <div class="flex-auto">
       <Button
@@ -34,12 +39,7 @@ const visible = defineModel<boolean>('visible');
         label="Save"
         type="submit"
         icon="pi pi-check"
-        @click="
-          () => {
-            emit('userManage:save');
-            visible = false;
-          }
-        "
+        @click="emit('userManage:save', role)"
       />
       <Button
         class="p-button-outlined mr-2"
diff --git a/frontend/src/components/user/UserTable.vue b/frontend/src/components/user/UserTable.vue
index fe5da044d..400ecfab5 100644
--- a/frontend/src/components/user/UserTable.vue
+++ b/frontend/src/components/user/UserTable.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Button, Column, DataTable } from '@/lib/primevue';
 
+import { Button, Column, DataTable } from '@/lib/primevue';
 import PermissionService, { Permissions } from '@/services/permissionService';
+import { Status } from '@/utils/enums/application';
 
 import type { Ref } from 'vue';
 import type { User } from '@/types';
@@ -17,11 +18,6 @@ const props = withDefaults(defineProps<Props>(), {
   users: undefined
 });
 
-// Constants
-const USER_STATUS = {
-  APPROVED: 'Approved'
-};
-
 // Emits
 const emit = defineEmits(['userTable:delete', 'userTable:approve', 'userTable:manage', 'userTable:revoke']);
 
@@ -46,7 +42,7 @@ const permissionService = new PermissionService();
       </div>
     </template>
     <Column
-      field="username"
+      field="fullName"
       header="Username"
       sortable
     />
@@ -64,9 +60,13 @@ const permissionService = new PermissionService();
       field="status"
       header="Status"
       sortable
-    />
+    >
+      <template #body="{ data }">
+        {{ data.accessRequest?.status ?? Status.APPROVED }}
+      </template>
+    </Column>
     <Column
-      field="role"
+      field="accessRequest.role"
       header="Role"
       sortable
     />
@@ -80,9 +80,9 @@ const permissionService = new PermissionService();
     >
       <template #body="{ data }">
         <Button
-          class="p-button-lg p-button-text p-0 pr-3"
+          class="p-button-lg p-button-text p-0 mr-3"
           aria-label="Manage user"
-          :disabled="revocation || data.status !== USER_STATUS.APPROVED"
+          :disabled="revocation || data.accessRequest?.status === Status.PENDING"
           @click="
             () => {
               selection = data;
@@ -104,9 +104,9 @@ const permissionService = new PermissionService();
     >
       <template #body="{ data }">
         <Button
-          class="p-button-lg p-button-text p-0 pr-3"
+          class="p-button-lg p-button-text p-0 mr-3"
           aria-label="Approve user"
-          :disabled="revocation || data.status === USER_STATUS.APPROVED"
+          :disabled="revocation || data.status === Status.APPROVED"
           @click="
             () => {
               selection = data;
@@ -127,9 +127,9 @@ const permissionService = new PermissionService();
     >
       <template #body="{ data }">
         <Button
-          class="p-button-lg p-button-text p-button-danger p-0 pr-3"
+          class="p-button-lg p-button-text p-button-danger p-0 mr-3"
           aria-label="Delete user"
-          :disabled="data.status !== USER_STATUS.APPROVED"
+          :disabled="revocation || data.accessRequest?.status === Status.PENDING"
           @click="
             () => {
               selection = data;
diff --git a/frontend/src/services/userService.ts b/frontend/src/services/userService.ts
index eda11ff60..395ee4434 100644
--- a/frontend/src/services/userService.ts
+++ b/frontend/src/services/userService.ts
@@ -2,7 +2,7 @@ import { appAxios } from './interceptors';
 import { SYSTEM_USER } from '@/utils/constants/application';
 
 import type { AxiosResponse } from 'axios';
-import type { UserSearchParameters } from '@/types';
+import type { User, UserSearchParameters } from '@/types';
 
 const PATH = 'user';
 
@@ -30,5 +30,37 @@ export default {
     } else {
       return Promise.resolve({ data: [] } as AxiosResponse);
     }
+  },
+
+  /**
+   * @function getNavsAndRequests
+   * @returns {Promise} An axios response
+   */
+  getNavsAndRequests(): Promise<AxiosResponse> {
+    return appAxios().get(`${PATH}/navsRequests`);
+  },
+
+  /**
+   * @function createUserAccessRequest
+   * @returns {Promise} An axios response
+   */
+  createUserAccessRequest(data: User) {
+    return appAxios().post(`${PATH}/request/access`, data);
+  },
+
+  /**
+   * @function revokeUserAccessRequest
+   * @returns {Promise} An axios response
+   */
+  revokeUserAccessRequest(data: any) {
+    return appAxios().put(`${PATH}/request/access`, data);
+  },
+
+  /**
+   * @function updateUserRole
+   * @returns {Promise} An axios response
+   */
+  updateUserRole(data: User | undefined) {
+    return appAxios().put(`${PATH}/role`, data);
   }
 };
diff --git a/frontend/src/types/AccessRequest.ts b/frontend/src/types/AccessRequest.ts
new file mode 100644
index 000000000..e5d34af15
--- /dev/null
+++ b/frontend/src/types/AccessRequest.ts
@@ -0,0 +1,11 @@
+import type { IStamps } from '@/interfaces';
+
+import { Status } from '@/utils/enums/application';
+
+export type AccessRequest = {
+  accessRequestId?: string;
+  grant: boolean;
+  role?: string;
+  status: Status;
+  userId: string;
+} & IStamps;
diff --git a/frontend/src/types/User.ts b/frontend/src/types/User.ts
index 48d0bdad0..c0deada3d 100644
--- a/frontend/src/types/User.ts
+++ b/frontend/src/types/User.ts
@@ -1,7 +1,9 @@
 import type { IStamps } from '@/interfaces';
+import type { AccessRequest } from '@/types/AccessRequest';
 
 export type User = {
   active: boolean;
+  accessRequest?: AccessRequest;
   email: string;
   firstName: string;
   fullName: string;
@@ -13,4 +15,5 @@ export type User = {
   userId: string;
   username: string;
   elevatedRights: boolean;
+  attributes?: { idir_user_guid?: Array<string>; idir_username?: Array<string>; display_name?: Array<string> };
 } & IStamps;
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 4249f8030..8b1d75ecb 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -1,3 +1,4 @@
+export type { AccessRequest } from './AccessRequest';
 export type { BringForward } from './BringForward';
 export type { Document } from './Document';
 export type { Email } from './Email';
diff --git a/frontend/src/utils/constants/application.ts b/frontend/src/utils/constants/application.ts
index 14469a104..8932fac89 100644
--- a/frontend/src/utils/constants/application.ts
+++ b/frontend/src/utils/constants/application.ts
@@ -3,7 +3,7 @@
  */
 
 import { NIL } from 'uuid';
-import { AccessRole, BasicResponse, Roles } from '../enums/application';
+import { AccessRole, BasicResponse, Roles, UserSearchParams, Status } from '../enums/application';
 
 export const ACCESS_ROLES_LIST = [
   AccessRole.PCNS_ADMIN,
@@ -22,7 +22,11 @@ export const PCNS_CONTACT = {
 
 export const ROLES = [Roles.NAVIGATOR, Roles.READ_ONLY];
 
+export const STATUS = [Status.APPROVED, Status.PENDING, Status.REJECTED];
+
 export const SYSTEM_USER = NIL;
 
+export const USER_SEARCH_PARAMS = [UserSearchParams.FIRST_NAME, UserSearchParams.LAST_NAME, UserSearchParams.EMAIL];
+
 export const YES_NO_LIST = [BasicResponse.YES, BasicResponse.NO];
 export const YES_NO_UNSURE_LIST = [BasicResponse.YES, BasicResponse.NO, BasicResponse.UNSURE];
diff --git a/frontend/src/utils/enums/application.ts b/frontend/src/utils/enums/application.ts
index d0cac3198..df3c7c222 100644
--- a/frontend/src/utils/enums/application.ts
+++ b/frontend/src/utils/enums/application.ts
@@ -62,6 +62,24 @@ export enum Roles {
   READ_ONLY = 'Read-only'
 }
 
+export enum IdentityProvider {
+  IDIR = 'idir',
+  BCEID = 'bceidbasic',
+  BCEIDBUSINESS = 'bceidbusiness'
+}
+
+export enum UserSearchParams {
+  FIRST_NAME = 'First name',
+  LAST_NAME = 'Last name',
+  EMAIL = 'Email'
+}
+
+export enum Status {
+  APPROVED = 'Approved',
+  PENDING = 'Pending',
+  REJECTED = 'Rejected'
+}
+
 export enum StorageKey {
   AUTH = 'entrypoint',
   BF_ACCORDION_IDX = 'bf_accordion_idx',
diff --git a/frontend/src/views/user/UserManagementView.vue b/frontend/src/views/user/UserManagementView.vue
index ceb2a6980..4ead0bb2d 100644
--- a/frontend/src/views/user/UserManagementView.vue
+++ b/frontend/src/views/user/UserManagementView.vue
@@ -1,4 +1,10 @@
 <script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { ProgressLoader } from '@/components/layout';
+import UserCreateModal from '@/components/user/UserCreateModal.vue';
+import UserManageModal from '@/components/user/UserManageModal.vue';
+import UserTable from '@/components/user/UserTable.vue';
 import {
   Button,
   FilterMatchMode,
@@ -7,37 +13,52 @@ import {
   InputText,
   TabPanel,
   TabView,
-  useConfirm
+  useConfirm,
+  useToast
 } from '@/lib/primevue';
-import { ref } from 'vue';
-
-import UserCreateModal from '@/components/user/UserCreateModal.vue';
-import UserManageModal from '@/components/user/UserManageModal.vue';
-import UserTable from '@/components/user/UserTable.vue';
 import PermissionService, { Permissions } from '@/services/permissionService';
+import { userService } from '@/services';
+import { IdentityProvider, Status } from '@/utils/enums/application';
 
 import type { Ref } from 'vue';
 import type { User } from '@/types';
 
 //State
 const users: Ref<Array<User>> = ref([]);
-const createUserCreateModalVisible: Ref<boolean> = ref(false);
-const manageUserCreateModalVisible: Ref<boolean> = ref(false);
+const createUserModalVisible: Ref<boolean> = ref(false);
+const manageUserModalVisible: Ref<boolean> = ref(false);
 const activeTab: Ref<number> = ref(Number(0));
+const getIsLoading: Ref<boolean> = ref(false);
+const managedUser: Ref<User | undefined> = ref(undefined);
 
 //Actions
 const confirm = useConfirm();
 const permissionService = new PermissionService();
+const toast = useToast();
 
 function onDelete(user: User) {
-  // TODO: Implement
+  let message = '';
+  let header = '';
+  if (user.accessRequest?.status === 'Pending') {
+    message = 'The user will now be deleted from the list.';
+    header = 'Delete user';
+  } else {
+    message = 'The user will now lose all access to the system.';
+    header = 'Revoke user';
+  }
   confirm.require({
-    message: 'The user will now lose all access to the system.',
-    header: 'Revoke user',
+    message: message,
+    header: header,
     acceptLabel: 'Confirm',
     acceptClass: 'p-button-danger',
     rejectLabel: 'Cancel',
-    accept: () => {}
+    accept: async () => {
+      try {
+        //TODO : Implement
+      } catch (error) {
+        throw new Error('Error deleting user access ' + error);
+      }
+    }
   });
 }
 
@@ -54,45 +75,92 @@ function onApprove(user: User) {
 }
 
 function onRevoke(user: User) {
-  // TODO: Implement
   confirm.require({
     message: 'The user will be revoked from the system upon the approval of an admin.',
     header: 'Revoke user',
     acceptLabel: 'Confirm',
     acceptClass: 'p-button-danger',
     rejectLabel: 'Cancel',
-    accept: () => {}
+    accept: async () => {
+      try {
+        const response = await userService.revokeUserAccessRequest({
+          userId: user.userId,
+          grant: false
+        });
+        if (response) {
+          user.accessRequest = response.data;
+        }
+      } catch (error) {
+        throw new Error('Error revoking user access ' + error);
+      }
+    }
   });
 }
 
-function onManage(user: User) {
-  manageUserCreateModalVisible.value = true;
+async function onUserManageSave(role: string) {
+  if (managedUser.value?.accessRequest) managedUser.value.accessRequest.role = role;
+  try {
+    await userService.updateUserRole(managedUser.value);
+    toast.success('User role updated');
+  } catch (error) {
+    toast.error('Error updating user role ');
+  } finally {
+    manageUserModalVisible.value = false;
+  }
 }
 
-function onSave() {
-  // TODO: Implement
-}
-
-function onUserCreate() {
-  // TODO: Implement
+async function onUserCreate(user: User, role: string) {
+  try {
+    getIsLoading.value = true;
+    user.idp = IdentityProvider.IDIR;
+    user.fullName = user.attributes?.display_name?.[0] as string;
+    user.identityId = user.attributes?.idir_user_guid?.[0] as string;
+    user.accessRequest = {
+      userId: user.userId,
+      grant: true,
+      status: Status.PENDING,
+      role: role
+    };
+    const response = await userService.createUserAccessRequest(user);
+    if (response.data.accessRequest) {
+      users.value.push(response.data);
+      toast.success('Access requested');
+    } else {
+      toast.error('Failed to request access', 'User already exists');
+    }
+  } catch (error) {
+    throw new Error('Error revoking user access ' + error);
+  } finally {
+    createUserModalVisible.value = false;
+    getIsLoading.value = false;
+  }
 }
 
 // Datatable filter(s)
 const filters = ref({
   global: { value: null, matchMode: FilterMatchMode.CONTAINS }
 });
+
+onMounted(async () => {
+  users.value = (await userService.getNavsAndRequests()).data;
+});
 </script>
 <template>
+  <ProgressLoader v-if="getIsLoading" />
   <h3>User Management</h3>
   <UserCreateModal
-    v-if="createUserCreateModalVisible"
-    v-model:visible="createUserCreateModalVisible"
-    @user-create:request="onUserCreate"
+    v-if="createUserModalVisible"
+    v-model:visible="createUserModalVisible"
+    @user-create:request="
+      (user: User, role: string) => {
+        onUserCreate(user, role);
+      }
+    "
   />
   <UserManageModal
-    v-if="manageUserCreateModalVisible"
-    v-model:visible="manageUserCreateModalVisible"
-    @user-manage:save="onSave"
+    v-if="manageUserModalVisible"
+    v-model:visible="manageUserModalVisible"
+    @user-manage:save="onUserManageSave"
   />
   <TabView
     v-if="permissionService.can(Permissions.NAVIGATION_HOUSING_USER_MANAGEMENT_ADMIN)"
@@ -104,7 +172,7 @@ const filters = ref({
           label="Create new user"
           type="submit"
           icon="pi pi-plus"
-          @click="createUserCreateModalVisible = true"
+          @click="createUserModalVisible = true"
         />
         <IconField icon-position="left">
           <InputIcon class="pi pi-search" />
@@ -119,7 +187,12 @@ const filters = ref({
         v-model:filters="filters"
         :users="users"
         class="mt-4"
-        @user-table:manage="onManage"
+        @user-table:manage="
+          (user: User) => {
+            managedUser = user;
+            manageUserModalVisible = true;
+          }
+        "
         @user-table:approve="onApprove"
         @user-table:delete="onDelete"
       />
@@ -150,7 +223,7 @@ const filters = ref({
         label="Create new user"
         type="submit"
         icon="pi pi-plus"
-        @click="createUserCreateModalVisible = true"
+        @click="createUserModalVisible = true"
       />
       <IconField icon-position="left">
         <InputIcon class="pi pi-search" />
@@ -165,7 +238,12 @@ const filters = ref({
       v-model:filters="filters"
       :users="users"
       class="mt-4"
-      @user-table:manage="onManage"
+      @user-table:manage="
+        (user: User) => {
+          managedUser = user;
+          manageUserModalVisible = true;
+        }
+      "
       @user-table:revoke="onRevoke"
     />
   </div>