supervisor table clean up

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

frontend/src/components/supervisor/ApprovalCell.tsx

@@ -128,15 +128,15 @@ 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 ||
             personnel.recommitment?.find((itm) => itm.program === program)
               ?.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',

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>
   );
 };

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={

frontend/src/pages/supervisor/SupervisorTable.tsx

@@ -7,23 +7,23 @@ 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) ? (
                 <>
                   <div>{itm.label.split(' ')[0]}</div>
                   <div>{itm.label.split(' ')[1]}</div>
                 </>
               ) : (
-                <div className={'  self-start justify-start pb-6'}>{itm.label}</div>
-              )}
+                <div>{itm.label}</div>
+               )} 
             </th>
           ))}
         </tr>
@@ -36,28 +36,28 @@ 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}
                   </td>
                 ) : (
                   <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]}