From 1380682700b9edfa18dfff855298ff275de49403 Mon Sep 17 00:00:00 2001
From: Chelsea <chelsea.brown1@ca.ey.com>
Date: Fri, 31 Jan 2025 10:43:20 -0800
Subject: [PATCH] supervisor table clean up (#493)

---
 .../src/common/enums/recommitment-status.ts   |  6 ++---
 .../components/supervisor/ApprovalCell.tsx    |  4 ++--
 .../supervisor/RecommitmentStatusChip.tsx     | 23 ++++++++++++++++--
 .../pages/supervisor/SupervisorDashboard.tsx  |  2 +-
 .../src/pages/supervisor/SupervisorTable.tsx  | 24 +++++++++----------
 5 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/frontend/src/common/enums/recommitment-status.ts b/frontend/src/common/enums/recommitment-status.ts
index b5b04508..bfafd9a1 100644
--- a/frontend/src/common/enums/recommitment-status.ts
+++ b/frontend/src/common/enums/recommitment-status.ts
@@ -37,11 +37,11 @@ export enum RecommitmentStatusLabel {
 
   // temporary status set after member has committed to recommit
   // initiate communication for supervisor approval
-  MEMBER_COMMITTED = 'Requested Supervisor Approval',
+  MEMBER_COMMITTED = 'Approval Required',
 
   // 1 of 4 final status for member for a program
   // at end of recommitment period member will be set as INACTIVE in the particular program
-  MEMBER_DENIED = 'Declined By Member',
+  MEMBER_DENIED = 'Member Declined',
 
   // 1 of 4 final status for member for a program
   // automatically set if no member response by end_date of recommitment period
@@ -54,7 +54,7 @@ export enum RecommitmentStatusLabel {
 
   // 1 of 4 final status for member for a program
   // at end of recommitment period member will be set as INACTIVE in the particular program
-  SUPERVISOR_DENIED = 'Declined',
+  SUPERVISOR_DENIED = 'Denied',
 
   // 1 of 4 final status for member for a program
   // automatically set if no supervisor response by end_date of recommitment period
diff --git a/frontend/src/components/supervisor/ApprovalCell.tsx b/frontend/src/components/supervisor/ApprovalCell.tsx
index a8736781..1c9d2cfc 100644
--- a/frontend/src/components/supervisor/ApprovalCell.tsx
+++ b/frontend/src/components/supervisor/ApprovalCell.tsx
@@ -128,7 +128,7 @@ export const ApprovalCell = ({
 
   return (
     <>
-      <div className="flex flex-row gap-x-4 pr-12">
+      <div className="flex flex-col lg:flex-row gap-2 lg:gap-x-8 w-full">
         <select
           disabled={
             disabled ||
@@ -136,7 +136,7 @@ export const ApprovalCell = ({
               ?.status === RecommitmentStatus.SUPERVISOR_DENIED
           }
           className={[
-            'rounded-sm  outline-none w-40 text-sm ',
+            'rounded-sm  outline-none w-full text-sm lg:min-w-[150px] ',
             disabled
               ? 'bg-gray-200 border-none outline-none text-gray-500 '
               : 'text-gray-600 bg-white border-1.5 border-gray-400',
diff --git a/frontend/src/components/supervisor/RecommitmentStatusChip.tsx b/frontend/src/components/supervisor/RecommitmentStatusChip.tsx
index f27f1f9d..d0577d33 100644
--- a/frontend/src/components/supervisor/RecommitmentStatusChip.tsx
+++ b/frontend/src/components/supervisor/RecommitmentStatusChip.tsx
@@ -2,6 +2,7 @@ import {
   RecommitmentStatus,
   RecommitmentStatusLabel,
 } from '@/common/enums/recommitment-status';
+import { Tooltip } from '@/components/ui/Tooltip';
 
 export const RecommitmentStatusChip = ({
   status,
@@ -25,15 +26,33 @@ export const RecommitmentStatusChip = ({
         return 'text-gray-600';
     }
   };
-
+const getContent = (status: RecommitmentStatus|string) => {
+  switch (status) {
+    case RecommitmentStatus.PENDING:
+      return 'Pending member recommitment. No action required at this time.';
+    case RecommitmentStatus.MEMBER_COMMITTED:
+      return 'Member recommitted. Supervisor approval required.';
+    case RecommitmentStatus.SUPERVISOR_APPROVED:
+      return 'Member recommitted and approved for the upcoming year.';
+    case RecommitmentStatus.MEMBER_DENIED:
+    case RecommitmentStatus.MEMBER_NO_RESPONSE:
+    case RecommitmentStatus.SUPERVISOR_DENIED:
+    case RecommitmentStatus.SUPERVISOR_NO_RESPONSE:
+      return 'Member not returning in the upcoming year.';
+    default:
+      return 'text-gray-600';
+  }
+}
   return (
+    <Tooltip  content={getContent(status)} placement={'bottom'}>
     <div
       className={
-        'px-4 py-1.5 rounded-full text-sm flex flex-row justify-center text-center ' +
+        'px-4 py-1.5 rounded-full text-sm flex flex-row justify-center text-center lg:min-w-[150px] ' +
         getClassName(status)
       }
     >
       {RecommitmentStatusLabel[status as keyof typeof RecommitmentStatus] ?? 'N/A'}
     </div>
+    </Tooltip>
   );
 };
diff --git a/frontend/src/pages/supervisor/SupervisorDashboard.tsx b/frontend/src/pages/supervisor/SupervisorDashboard.tsx
index d670536e..6ccd9e86 100644
--- a/frontend/src/pages/supervisor/SupervisorDashboard.tsx
+++ b/frontend/src/pages/supervisor/SupervisorDashboard.tsx
@@ -32,7 +32,7 @@ const SupervisorDashboard = () => {
   if (loading) return <Loading />;
 
   return (
-    <div className="xl:px-32">
+    <div className="xl:px-32 pb-32">
       {recommitmentCycle && (
         <SupervisorDashboardHeaderBanner
           recommitmentDate={
diff --git a/frontend/src/pages/supervisor/SupervisorTable.tsx b/frontend/src/pages/supervisor/SupervisorTable.tsx
index 36d01886..d2d96512 100644
--- a/frontend/src/pages/supervisor/SupervisorTable.tsx
+++ b/frontend/src/pages/supervisor/SupervisorTable.tsx
@@ -7,14 +7,14 @@ export const SupervisorTable = ({
   columns: { key: string; label: string }[];
 }) => {
   return (
-    <table className={`table-fixed w-full`}>
+    <table className={`md:table-fixed lg:table-auto w-full`}>
       <thead>
         <tr>
-          {columns.map((itm) => (
+          {columns.map((itm, index) => (
             <th
               scope="column"
               key={itm.key}
-              className={` bg-infoBannerLight flex-col justify-start  items-start text-wrap  text-info text-left h-[64px] `}
+              className={` bg-infoBannerLight flex-col justify-start  items-start align-text-top text-left py-1 text-wrap  text-info px-4 ` + (index === columns.length -1 ? " xl:pr-40" : "")}
             >
               {['program', 'status', 'year'].includes(itm.key) ? (
                 <>
@@ -22,8 +22,8 @@ export const SupervisorTable = ({
                   <div>{itm.label.split(' ')[1]}</div>
                 </>
               ) : (
-                <div className={'  self-start justify-start pb-6'}>{itm.label}</div>
-              )}
+                <div>{itm.label}</div>
+               )} 
             </th>
           ))}
         </tr>
@@ -36,7 +36,7 @@ export const SupervisorTable = ({
                 {row.bcws && row.emcr ? (
                   <td
                     scope="column"
-                    className={` text-nowrap truncate max-w-[250px] text-gray-800 pb-[55px]`}
+                    className={` text-nowrap truncate  text-gray-800 pb-[55px] xl:pr-24 pl-4`}
                     key="memberName"
                   >
                     {row.memberName}
@@ -44,20 +44,20 @@ export const SupervisorTable = ({
                 ) : (
                   <td
                     scope="column"
-                    className={` text-nowrap truncate max-w-[250px] text-gray-800 `}
+                    className={` text-nowrap truncate  text-gray-800 xl:pr-24 pl-4`}
                     key="memberName"
                   >
                     {row.memberName}
                   </td>
                 )}
 
-                {columns.slice(1, columns.length).map((itm) => (
-                  <td scope="column" key={itm.key}>
+                {columns.slice(1, columns.length).map((itm, index) => (
+                  <td scope="column" key={itm.key} className={index !== columns.length -2 || index !== columns.length - 3 ? " xl:pr-24" : " xl:w-32"}>
                     <table>
                       {row?.bcws && (
-                        <tr className={`py-4   text-nowrap truncate max-w-[250px]`}>
+                        <tr className={`py-4   text-nowrap truncate px-4`}>
                           <td
-                            className={`py-4   text-nowrap truncate max-w-[250px] text-gray-800`}
+                            className={`py-4   text-nowrap truncate  text-gray-800 px-4`}
                             key={itm.key}
                           >
                             {row.bcws?.[itm.key]}
@@ -67,7 +67,7 @@ export const SupervisorTable = ({
                       {row?.emcr && (
                         <tr>
                           <td
-                            className={`py-4 text-nowrap truncate max-w-[250px] text-gray-800 `}
+                            className={`py-4 text-nowrap truncate  text-gray-800 px-4`}
                             key={itm.key}
                           >
                             {row?.emcr?.[itm.key]}