From 011029b56785ec4fe7dcbec4933bc576ad45da13 Mon Sep 17 00:00:00 2001
From: Jakub Folta <jakubfolta@yahoo.co.uk>
Date: Mon, 24 Jun 2024 14:28:51 +0200
Subject: [PATCH] feat: refactor to remove table and use css grid [gh-36]

---
 frontend/src/app/(app)/people/page.tsx        | 106 ++++----
 .../common/EmployeeCard/EmployeeCard.tsx      | 241 +++++++++---------
 2 files changed, 176 insertions(+), 171 deletions(-)

diff --git a/frontend/src/app/(app)/people/page.tsx b/frontend/src/app/(app)/people/page.tsx
index 1a9bfa87..3aa9fc0d 100644
--- a/frontend/src/app/(app)/people/page.tsx
+++ b/frontend/src/app/(app)/people/page.tsx
@@ -128,32 +128,34 @@ export default function People() {
   const draftPeopleAmount = useMemo(() => people.filter((employee) => employee.draft).length, [people]);
   const deactivatedPeopleAmount = useMemo(() => people.filter((employee) => employee.deactivated).length, [people]);
 
-  const TABS = [
-    {
-      title: tabs[0],
-      employees: activePeopleAmount,
-    },
-    {
-      title: tabs[1],
-      employees: draftPeopleAmount,
-    },
-    {
-      title: tabs[2],
-      employees: deactivatedPeopleAmount,
-    },
-  ];
+  const peopleTabs = useMemo(() => {
+    return [
+      {
+        title: tabs[0],
+        employees: activePeopleAmount,
+      },
+      {
+        title: tabs[1],
+        employees: draftPeopleAmount,
+      },
+      {
+        title: tabs[2],
+        employees: deactivatedPeopleAmount,
+      },
+    ];
+  }, [activePeopleAmount, draftPeopleAmount, deactivatedPeopleAmount]);
 
   useEffect(() => {
     if (people) {
-      if (activeTab === TABS[0].title) {
+      if (activeTab === peopleTabs[0].title) {
         setSelectedTabPeople(people.filter((employee) => employee.active));
-      } else if (activeTab === TABS[1].title) {
+      } else if (activeTab === peopleTabs[1].title) {
         setSelectedTabPeople(people.filter((employee) => employee.draft));
       } else {
         setSelectedTabPeople(people.filter((employee) => employee.deactivated));
       }
     }
-  }, [people, activeTab]);
+  }, [people, activeTab, peopleTabs]);
 
   const resetFilterHandler = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
     event.stopPropagation();
@@ -183,7 +185,7 @@ export default function People() {
       <Tabs
         active={activeTab}
         setActive={(tab) => setActiveTabHandler(tab)}
-        tabs={TABS}
+        tabs={peopleTabs}
         className="border-b border-navy-200"
       />
 
@@ -207,45 +209,35 @@ export default function People() {
           </div>
         </div>
 
-        <table className="text-sm table-auto">
-          <thead>
-            <tr
-              className={generateClassNames(
-                'h-14 text-xs uppercase text-navy-500 *:px-4 *:py-0 *:font-medium *:text-start',
-                {
-                  '*:w-40': activeTab === TABS[0].title,
-                  '*:w-[200px]': activeTab === TABS[1].title,
-                  '[&&>*]:w-1/4': activeTab === TABS[2].title,
-                },
-              )}
-            >
-              <th
-                className={generateClassNames('[&]:w-auto', {
-                  'flex items-center [&&]:w-[400px] h-14': activeTab === TABS[2].title,
-                })}
-              >
-                Employee
-              </th>
-              <th>Ladder</th>
-              <th className="[&]:text-end">Current Band</th>
-              {activeTab === TABS[0].title && (
-                <>
-                  <th className="[&]:text-end">Active Goal</th>
-                  <th className="[&]:w-[248px] [&]:pl-14">Goal Progress</th>
-                  <th className="[&]:text-center">Latest Activity</th>
-                </>
-              )}
-              {activeTab === TABS[1].title && <th className="[&]:w-[400px] [&]:pl-14">Action</th>}
-              <th className="[&]:w-12" />
-            </tr>
-          </thead>
-
-          <tbody>
-            {filterPeople(selectedTabPeople)?.map((employee: Employee, index) => (
-              <EmployeeCard key={index} employee={employee} tabSelected={activeTab} />
-            ))}
-          </tbody>
-        </table>
+        <div
+          className={generateClassNames(
+            'grid grid-cols-[auto_repeat(3,_160px)_248px_160px_48px] grid-rows-[56px] auto-rows-[minmax(64px,_auto)]',
+            {
+              'grid-cols-[auto_repeat(2,_200px)_400px_48px]': activeTab === peopleTabs[1].title,
+              'grid-cols-[400px_repeat(3,_minmax(25%,_auto))]': activeTab === peopleTabs[2].title,
+            },
+          )}
+        >
+          <div className="*:self-center contents uppercase font-medium text-xs text-navy-500 *:px-4">
+            <div>Employee</div>
+            <div>Ladder</div>
+            <div className="text-right">Current band</div>
+
+            {activeTab === peopleTabs[0].title && (
+              <>
+                <div className="text-right">Active goal</div>
+                <div className="[&]:pl-14">Goal progress</div>
+                <div className="text-center">Latest activity</div>
+              </>
+            )}
+
+            {activeTab === peopleTabs[1].title && <div className="[&]:pl-14">Action</div>}
+            <div></div>
+          </div>
+          {filterPeople(selectedTabPeople)?.map((employee: Employee, index) => (
+            <EmployeeCard key={index} employee={employee} tabSelected={activeTab} />
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/common/EmployeeCard/EmployeeCard.tsx b/frontend/src/components/common/EmployeeCard/EmployeeCard.tsx
index 28179e63..3f9951f6 100644
--- a/frontend/src/components/common/EmployeeCard/EmployeeCard.tsx
+++ b/frontend/src/components/common/EmployeeCard/EmployeeCard.tsx
@@ -9,124 +9,137 @@ export const EmployeeCard = ({ employee, tabSelected }: EmployeeCardProps) => {
   const { name, title, laddersDetails } = employee;
 
   return (
-    <>
-      <tr className="text-navy-700 text-sm w-full h-16 border-t border-navy-200 *:px-4 *:py-0" key={name}>
-        <td {...(laddersDetails.length > 1 && { className: 'flex h-16' })}>
-          <div className="flex gap-4">
-            <div className="relative w-8 h-8 overflow-hidden rounded-full self-center">
-              <Image
-                width={256}
-                height={256}
-                alt="User image"
-                src="/images/image.jpeg"
-                className="overflow-hidden w-full h-auto"
-              />
-            </div>
-            <div className="flex flex-col justify-center">
-              <h3 className="text-navy-900 text-sm font-medium leading-[22.4px]">{name}</h3>
-              <p className="text-navy-600 text-sm">{title}</p>
-            </div>
-          </div>
-        </td>
-        <td>
-          {laddersDetails.map((ladder, index) => (
-            <span
-              key={index}
-              {...(laddersDetails.length > 1 && {
-                className: 'flex items-center h-16 [&:not(:first-of-type)]:-mt-[17px]',
-              })}
-            >
-              {ladder.ladderName}
-            </span>
-          ))}
-        </td>
-        <td>
-          {laddersDetails.map((ladder, index) => (
-            <span
-              key={index}
-              className={generateClassNames('flex justify-end items-center', {
-                'h-16 [&:not(:first-of-type)]:-mt-[17px]': laddersDetails.length > 1,
-              })}
-            >
-              {ladder.currentBand}
-            </span>
-          ))}
-        </td>
-        {tabSelected === tabs[0] && (
-          <>
-            <td>
-              {laddersDetails.map((ladder, index) => (
-                <div
-                  key={index}
-                  className={generateClassNames('flex justify-end', {
-                    'h-16 [&:not(:first-of-type)]:-mt-[17px]': laddersDetails.length > 1,
-                  })}
-                >
-                  {ladder.activeGoal ? <CheckmarkIcon /> : null}
-                </div>
-              ))}
-            </td>
-            <td className="[&]:pl-14">
-              {laddersDetails.map(
-                (ladder, index) =>
-                  ladder.activeGoal && (
-                    <div
-                      key={index}
-                      className={generateClassNames('flex items-center gap-2', {
-                        'h-16 [&:not(:first-of-type)]:-mt-[17px]': laddersDetails.length > 1,
-                      })}
-                    >
-                      <div className="w-full rounded-full bg-navy-300">
-                        <div className={`bg-blue-800 h-2 rounded-full`} style={{ width: `${ladder.goalProgress}%` }} />
-                      </div>
-                      <span>{ladder.goalProgress}%</span>
-                    </div>
-                  ),
-              )}
-            </td>
-            <td>
-              {laddersDetails.map(
-                (ladder, index) =>
-                  ladder.activeGoal && (
-                    <div
-                      key={index}
-                      className={generateClassNames('flex justify-center items-center', {
-                        'h-16 [&:not(:first-of-type)]:-mt-[17px]': laddersDetails.length > 1,
-                      })}
-                    >
-                      <div className="bg-blue-800 p-2 rounded-full text-white w-7 h-7 font-semibold text-center items-center flex justify-center">
-                        {ladder.latestActivity}
-                      </div>
-                    </div>
-                  ),
-              )}
-            </td>
-          </>
-        )}
-        {tabSelected === tabs[1] && (
-          <td className="flex gap-4 [&]:pr-2 [&]:pl-14">
-            <button className="h-11 px-5 text-navy-600 font-semibold border border-navy-300 rounded-full">
-              Resume
-            </button>
-            <button className="h-11 px-5 text-navy-600 font-semibold border border-navy-300 rounded-full">
-              Activate employee
-            </button>
-          </td>
-        )}
-        <td
-          className={generateClassNames('[&]:px-0', {
-            '[&]:px-4': tabSelected === tabs[2],
+    <div className="contents *:flex *:items-center *:text-sm *:text-navy-700 *:px-4 *:border-t *:border-navy-200">
+      <div
+        className={generateClassNames('col-start-1', {
+          '[&]:items-start': laddersDetails.length > 1,
+        })}
+      >
+        <div
+          className={generateClassNames('flex gap-3', {
+            'h-16': laddersDetails.length > 1,
           })}
         >
-          <div
-            className={generateClassNames('flex justify-center cursor-pointer', {
-              'justify-end': tabSelected === tabs[2],
+          <div className="relative w-7 h-7 overflow-hidden rounded-full self-center">
+            <Image
+              width={256}
+              height={256}
+              alt="User image"
+              src="/images/image.jpeg"
+              className="overflow-hidden w-full h-auto"
+            />
+          </div>
+          <div className="flex flex-col justify-center">
+            <h3 className="text-navy-900 font-medium">{name}</h3>
+            <p className="text-navy-600">{title}</p>
+          </div>
+        </div>
+      </div>
+      <div
+        {...(laddersDetails.length > 1 && {
+          className: 'flex-col [&]:items-start',
+        })}
+      >
+        {laddersDetails.map((ladder, index) => (
+          <span
+            key={index}
+            {...(laddersDetails.length > 1 && {
+              className: 'flex items-center h-16 [&:not(:first-of-type)]:-mt-[17px]',
             })}
           >
-            <DotsIcon className="w-[18px] h-[18px]" />
+            {ladder.ladderName}
+          </span>
+        ))}
+      </div>
+      <div
+        className={generateClassNames('justify-end', {
+          'flex-col [&]:items-end': laddersDetails.length > 1,
+        })}
+      >
+        {laddersDetails.map((ladder, index) => (
+          <span
+            key={index}
+            {...(laddersDetails.length > 1 && {
+              className: 'flex items-center h-16 [&:not(:first-of-type)]:-mt-[17px]',
+            })}
+          >
+            {ladder.currentBand}
+          </span>
+        ))}
+      </div>
+
+      {tabSelected === tabs[0] && (
+        <>
+          <div className="justify-end">
+            {laddersDetails.map((ladder, index) => (
+              <span
+                key={index}
+                {...(laddersDetails.length > 1 && {
+                  className: '[&:not(:first-of-type)]:-mt-[17px]',
+                })}
+              >
+                {ladder.activeGoal ? <CheckmarkIcon /> : null}
+              </span>
+            ))}
+          </div>
+          <div className="[&]:pl-14 ">
+            {laddersDetails.map(
+              (ladder, index) =>
+                ladder.activeGoal && (
+                  <div
+                    key={index}
+                    className={generateClassNames('flex items-center gap-2 w-full', {
+                      '[&:not(:first-of-type)]:-mt-[17px]': laddersDetails.length > 1,
+                    })}
+                  >
+                    <div className="w-full rounded-full bg-navy-300">
+                      <div className="bg-blue-800 h-2 rounded-full" style={{ width: `${ladder.goalProgress}%` }} />
+                    </div>
+                    <span>{ladder.goalProgress}%</span>
+                  </div>
+                ),
+            )}
+          </div>
+          <div className="justify-center">
+            {laddersDetails.map(
+              (ladder, index) =>
+                ladder.activeGoal && (
+                  <div
+                    key={index}
+                    {...(laddersDetails.length > 1 && {
+                      className: '[&:not(:first-of-type)]:-mt-[17px]',
+                    })}
+                  >
+                    <div className="flex items-center justify-center bg-blue-800 rounded-full text-white w-7 h-7 font-semibold p-2">
+                      {ladder.latestActivity}
+                    </div>
+                  </div>
+                ),
+            )}
           </div>
-        </td>
-      </tr>
-    </>
+        </>
+      )}
+
+      {tabSelected === tabs[1] && (
+        <div className="flex gap-4 [&]:pr-2 [&]:pl-14">
+          <button className="h-11 px-5 text-navy-600 font-semibold border border-navy-300 rounded-full">Resume</button>
+          <button className="h-11 px-5 text-navy-600 font-semibold border border-navy-300 rounded-full">
+            Activate employee
+          </button>
+        </div>
+      )}
+
+      <div
+        className={generateClassNames('justify-center [&]:p-0', {
+          'justify-end': tabSelected === tabs[2],
+        })}
+      >
+        <div className="flex justify-center items-center w-11 h-11 cursor-pointer">
+          <span>
+            <DotsIcon className="w-[18px] h-[18px]" />
+          </span>
+        </div>
+      </div>
+    </div>
   );
 };