update UIof participant management

src/web/components/ParticipantRequests/AllParticipantsTable.tsx

@@ -0,0 +1,59 @@
+import { ParticipantTypeDTO } from '../../../api/entities/ParticipantType';
+import { ParticipantRequestDTO } from '../../../api/routers/participantsRouter';
+import { ParticipantApprovalFormDetails } from '../../services/participant';
+import { TableNoDataPlaceholder } from '../Core/TableNoDataPlaceholder';
+import { ParticipantRequestItem } from './ParticipantRequestItem';
+
+import './ParticipantRequestsTable.scss';
+
+type ParticipantRequestsTableProps = {
+  participantRequests: ParticipantRequestDTO[];
+  participantTypes: ParticipantTypeDTO[];
+  onApprove: (participantId: number, formData: ParticipantApprovalFormDetails) => Promise<void>;
+};
+
+function NoParticipantRequests() {
+  return (
+    <TableNoDataPlaceholder
+      icon={<img src='/group-icon.svg' alt='group-icon' />}
+      title='No Participant Requests'
+    >
+      <span>There are no participants that are awaiting approval.</span>
+    </TableNoDataPlaceholder>
+  );
+}
+
+export function AllParticipantsTable({
+  participantRequests,
+  participantTypes,
+  onApprove,
+}: ParticipantRequestsTableProps) {
+  return (
+    <div className='participant-requests-container'>
+      <table className='participant-requests-table'>
+        <thead>
+          <tr>
+            <th>Participant Name</th>
+            <th>Participant Type</th>
+            <th>Allowed API Roles</th>
+            <th>Name of Approver</th>
+            <th>Date of Approval</th>
+            <th className='action'>Actions</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {participantRequests.map((participantRequest) => (
+            <ParticipantRequestItem
+              key={participantRequest.id}
+              participantRequest={participantRequest}
+              participantTypes={participantTypes}
+              onApprove={onApprove}
+            />
+          ))}
+        </tbody>
+      </table>
+      {!participantRequests.length && <NoParticipantRequests />}
+    </div>
+  );
+}

src/web/components/ParticipantRequests/ParticipantRequestItem.tsx

@@ -47,16 +47,22 @@ export function ParticipantRequestItem({
     <>
       <tr className='participant-request-item'>
         <td>
-          <div className='participant-request-name-cell'>
-            <img src={logo} alt={participant.name} className='participant-request-logo' />
-            {participant.name}
-          </div>
+          <div className='participant-request--participant-name'>{participant.name}</div>
         </td>
         <td>
           <div className='participant-request-types'>{getParticipantTypes(participant.types)}</div>
         </td>
         <td>
-          <div className='participant-request-status'>{participant.status}</div>
+          <div className='participant-request-name'>{participant.requestingUser.fullName}</div>
+        </td>
+        <td>
+          <div className='participant-request-email'>{participant.requestingUser.email}</div>
+        </td>
+        <td>
+          <div className='participant-request-job-function'>{participant.requestingUser.role}</div>
+        </td>
+        <td>
+          <div className='participant-request-api-roles'>{participant.status}</div>
         </td>
         <td className='action'>
           <div className='action-cell'>

src/web/components/ParticipantRequests/ParticipantRequestsTable.scss

@@ -8,10 +8,6 @@
       line-height: 1.5;
     }
 
-    th:first-of-type {
-      padding-left: 106px;
-    }
-
     th.action {
       text-align: end;
       padding-left: 140px;

src/web/components/ParticipantRequests/ParticipantRequestsTable.stories.tsx

@@ -16,19 +16,19 @@ const Template: ComponentStory<typeof ParticipantRequestsTable> = (args) => (
 
 export const ParticipantRequests = Template.bind({});
 
-const requestingUser: ParticipantRequestDTO['requestingUser'] = {
-  email: '[email protected]',
-  fullName: 'Test User',
-  role: UserRole.Engineering,
-};
 ParticipantRequests.args = {
   participantRequests: [
     {
       id: 1,
       name: 'Participant 1',
+
       types: [{ id: 1, typeName: 'Type 1' }],
       status: ParticipantStatus.AwaitingApproval,
-      requestingUser,
+      requestingUser: {
+        email: '[email protected]',
+        fullName: 'Test User  1',
+        role: UserRole.Engineering,
+      },
     },
     {
       id: 1,
@@ -38,7 +38,11 @@ ParticipantRequests.args = {
         { id: 2, typeName: 'Type 2' },
       ],
       status: ParticipantStatus.AwaitingApproval,
-      requestingUser,
+      requestingUser: {
+        email: '[email protected]',
+        fullName: 'Test User 2',
+        role: UserRole.BusinessDevelopment,
+      },
     },
     {
       id: 1,
@@ -49,7 +53,11 @@ ParticipantRequests.args = {
         { id: 3, typeName: 'Type 3' },
       ],
       status: ParticipantStatus.AwaitingApproval,
-      requestingUser,
+      requestingUser: {
+        email: '[email protected]',
+        fullName: 'Test User 3',
+        role: UserRole.Marketing,
+      },
     },
     {
       id: 1,
@@ -61,7 +69,11 @@ ParticipantRequests.args = {
         { id: 4, typeName: 'Type 4' },
       ],
       status: ParticipantStatus.AwaitingApproval,
-      requestingUser,
+      requestingUser: {
+        email: '[email protected]',
+        fullName: 'Test User 4',
+        role: UserRole.MediaBuyer,
+      },
     },
   ],
   participantTypes: [

src/web/components/ParticipantRequests/ParticipantRequestsTable.tsx

@@ -35,7 +35,10 @@ export function ParticipantRequestsTable({
           <tr>
             <th>Participant Name</th>
             <th>Participant Type</th>
-            <th>Participant Status</th>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Job Function</th>
+            <th>Allowed API Roles</th>
             <th className='action'>Actions</th>
           </tr>
         </thead>