feat: update Tabs with dynamic people number data [gh-36]

Tivix · Jun 17, 2024 · 20535a6 · 20535a6
1 parent 84d6382
commit 20535a6
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 27 deletions.
diff --git a/frontend/src/app/(app)/people/page.tsx b/frontend/src/app/(app)/people/page.tsx
@@ -1,8 +1,5 @@
 'use client';
 
-import Image from 'next/image';
-import { DotsIcon } from '@app/static/icons/DotsIcon';
-import { CheckmarkIcon } from '@app/static/icons/CheckmarkIcon';
 import { SearchIcon } from '@app/static/icons/SearchIcon';
 import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
 import { Tabs } from '@app/components/modules/Tabs';
@@ -12,21 +9,6 @@ import { useEffect, useState } from 'react';
 import { Employee } from '@app/types/common';
 import { EmployeeCard } from '@app/components/common/EmployeeCard';
 
-const TABS = [
-  {
-    title: 'Active',
-    employees: 28,
-  },
-  {
-    title: 'Drafts',
-    employees: 1,
-  },
-  {
-    title: 'Deactivated',
-    employees: 5,
-  },
-];
-
 const FILTERS = [
   { label: 'Current band', value: 'current_band', id: 1 },
   { label: 'Ladder', value: 'ladder', id: 2 },
@@ -53,10 +35,46 @@ const PEOPLE = [
     activeGoal: false,
     goalProgress: 0,
     latestActivity: 0,
+    active: false,
+    draft: false,
+    deactivated: true,
+  },
+  {
+    name: 'Jane Does',
+    title: 'QA, Senior',
+    ladder: 'Back End',
+    currentBand: 6,
+    activeGoal: false,
+    goalProgress: 0,
+    latestActivity: 0,
     active: true,
     draft: true,
     deactivated: false,
   },
+  {
+    name: 'Tim Brooks',
+    title: 'DevOps, Senior',
+    ladder: 'Back End',
+    currentBand: 3,
+    activeGoal: false,
+    goalProgress: 0,
+    latestActivity: 0,
+    active: false,
+    draft: true,
+    deactivated: false,
+  },
+  {
+    name: 'Marvin Joe',
+    title: 'Engineering Manager, Senior',
+    ladder: 'Back End',
+    currentBand: 6,
+    activeGoal: false,
+    goalProgress: 0,
+    latestActivity: 0,
+    active: false,
+    draft: false,
+    deactivated: true,
+  },
 ];
 
 function getPeopleDetails() {
@@ -75,7 +93,7 @@ function getPeopleDetails() {
 export default function People() {
   const people = getPeopleDetails();
 
-  const [activeTab, setActiveTab] = useState(TABS[0]);
+  const [activeTab, setActiveTab] = useState('Active');
   const [search, setSearch] = useState('');
   const [selectedFilter, setSelectedFilter] = useState(FILTERS[0].value);
   const [activePeople, setActivePeople] = useState<Employee[]>();
@@ -84,6 +102,21 @@ export default function People() {
 
   const selectedFilterLabel = FILTERS.find((option) => option.value === selectedFilter)?.label || '';
 
+  const TABS = [
+    {
+      title: 'Active',
+      employees: activePeople?.length,
+    },
+    {
+      title: 'Drafts',
+      employees: draftPeople?.length,
+    },
+    {
+      title: 'Deactivated',
+      employees: deactivatedPeople?.length,
+    },
+  ];
+
   useEffect(() => {
     const activePeople: Employee[] = [];
     const draftPeople: Employee[] = [];
@@ -137,17 +170,18 @@ export default function People() {
           <tr className="mx-4 uppercase text-navy-500 font-normal">
             <th className="py-4 text-start pl-4">Employee</th>
             <th className="py-4">Ladder</th>
-            <th className="py-4">Current Band</th>
+            {/* <th className="py-4">Current Band</th> */}
+            <th></th>
             <th className="py-4">Active Goal</th>
             <th className="py-4 text-start">Goal Progress</th>
             <th className="py-4">Latest Activity</th>
-            <th className="py-4 " />
+            <th className="py-4" />
           </tr>
         </thead>
 
         <tbody>
           {people.map((employee: Employee, index) => (
-            <EmployeeCard employee={employee} key={index}/>
+            <EmployeeCard employee={employee} key={index} />
           ))}
         </tbody>
       </table>

diff --git a/frontend/src/components/modules/Tabs/Tabs.interface.ts b/frontend/src/components/modules/Tabs/Tabs.interface.ts
@@ -2,12 +2,12 @@ import { ComponentProps } from 'react';
 
 interface Tab {
   title: string;
-  employees: number;
+  employees?: number;
 }
 
 export interface TabsProps {
   tabs: Tab[];
-  active: Tab;
-  setActive: (active: Tab) => void;
+  active: string;
+  setActive: (active: string) => void;
   className?: ComponentProps<'nav'>['className'];
 }
diff --git a/frontend/src/components/modules/Tabs/Tabs.tsx b/frontend/src/components/modules/Tabs/Tabs.tsx
@@ -8,9 +8,9 @@ export const Tabs = ({ tabs, active, setActive, className }: TabsProps) => (
         <li key={index}>
           <div
             className={generateClassNames('flex flex-col pb-4  cursor-pointer', {
-              'border-b-2 border-blue-800 text-blue-800': tab.title === active.title,
+              'border-b-2 border-blue-800 text-blue-800': tab.title === active,
             })}
-            onClick={() => setActive(tab)}
+            onClick={() => setActive(tab.title)}
           >
             {tab.title} ({tab.employees})
           </div>