From ca87a2a94d9a5ce462bee5f29034be14e1dba2e4 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sun, 11 Jan 2026 21:59:01 -0500
Subject: [PATCH 01/17] feat/add admin navbar and stat card component

---
 app/admin/const.ts         | 22 ++++++++++++++++++++++
 app/admin/page.tsx         | 25 +++++++++++++++++++++++++
 app/fonts.ts               | 11 +++++++++++
 components/AdminNavbar.tsx | 37 +++++++++++++++++++++++++++++++++++++
 components/StatCard.tsx    | 17 +++++++++++++++++
 5 files changed, 112 insertions(+)
 create mode 100644 app/admin/const.ts
 create mode 100644 app/fonts.ts
 create mode 100644 components/AdminNavbar.tsx
 create mode 100644 components/StatCard.tsx

diff --git a/app/admin/const.ts b/app/admin/const.ts
new file mode 100644
index 0000000..8ff85a3
--- /dev/null
+++ b/app/admin/const.ts
@@ -0,0 +1,22 @@
+export const ADMIN_DASHBOARD_CONST = {
+  PAGE_TITLE: 'Admin Dashboard',
+};
+
+export const ADMIN_DASHBOARD_MOCK = {
+  ADMIN_NAME: 'John Doe',
+  PROFILE_PICTURE_URL: undefined,
+  STAT_CARDS: [
+    {
+      label: 'Independent Members',
+      value: 30,
+    },
+    {
+      label: 'Organization Members',
+      value: 20,
+    },
+    {
+      label: 'New Applications Submitted',
+      value: 6,
+    },
+  ],
+};
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index e69de29..953406b 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -0,0 +1,25 @@
+import { inter } from '@/app/fonts';
+import AdminNavbar from '@/components/AdminNavbar';
+import StatCard from '@/components/StatCard';
+import { ADMIN_DASHBOARD_MOCK, ADMIN_DASHBOARD_CONST } from './const';
+
+export default function AdminDashboard() {
+  return (
+    <>
+      <AdminNavbar
+        adminName={ADMIN_DASHBOARD_MOCK.ADMIN_NAME}
+        profilePictureUrl={ADMIN_DASHBOARD_MOCK.PROFILE_PICTURE_URL}
+      />
+      <div
+        className={`bg-[#D2E9FF] ${inter.className} font-bold text-[36px] w-113 h-23.25 rounded-r-4xl flex items-center justify-center mt-15`}
+      >
+        {ADMIN_DASHBOARD_CONST.PAGE_TITLE}
+      </div>
+      <div className="mt-15 flex justify-center gap-x-19">
+        {ADMIN_DASHBOARD_MOCK.STAT_CARDS.map((card) => (
+          <StatCard key={card.label} label={card.label} value={card.value} />
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/app/fonts.ts b/app/fonts.ts
new file mode 100644
index 0000000..9e9f732
--- /dev/null
+++ b/app/fonts.ts
@@ -0,0 +1,11 @@
+import { Roboto_Condensed, Inter } from 'next/font/google';
+
+export const robotoCondensed = Roboto_Condensed({
+  variable: '--font-roboto-condensed',
+  subsets: ['latin'],
+});
+
+export const inter = Inter({
+  variable: '--font-inter',
+  subsets: ['latin'],
+});
diff --git a/components/AdminNavbar.tsx b/components/AdminNavbar.tsx
new file mode 100644
index 0000000..91a8263
--- /dev/null
+++ b/components/AdminNavbar.tsx
@@ -0,0 +1,37 @@
+import { robotoCondensed, inter } from '@/app/fonts';
+
+type AdminNavbarProps = {
+  adminName: string;
+  profilePictureUrl?: string;
+};
+
+export default function AdminNavbar({
+  adminName = 'Admin Name',
+  profilePictureUrl,
+}: AdminNavbarProps) {
+  return (
+    <div className="h-34.5 bg-[#393533]">
+      <div className="flex items-center h-full justify-between ml-17.5 mr-17.5">
+        <p
+          className={`font-black text-[#89CC62] text-[48px] leading-[90%] ${robotoCondensed.className}`}
+        >
+          Richmond Poverty <br />
+          Reduction Coalition
+        </p>
+        <div className="flex items-center gap-x-4">
+          <p
+            className={`${inter.className} text-[#89CC62] font-semibold text-[32px]`}
+          >
+            {adminName}
+          </p>
+          {profilePictureUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={profilePictureUrl} alt="" className="h-22.5 w-22.5" />
+          ) : (
+            <div className="h-22.5 w-22.5 rounded-full bg-[#7C7C7C]" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/StatCard.tsx b/components/StatCard.tsx
new file mode 100644
index 0000000..8a6c3b1
--- /dev/null
+++ b/components/StatCard.tsx
@@ -0,0 +1,17 @@
+import { inter } from '@/app/fonts';
+
+type StatCardProps = {
+  label: string;
+  value: number;
+};
+
+export default function StatCard({ label, value }: StatCardProps) {
+  return (
+    <div
+      className={`w-113.75 h-62.5 bg-[#D4D0CA] rounded-[25px] border-4 border-[#CEC8B9] ${inter.className} flex flex-col items-center justify-center`}
+    >
+      <p className="font-bold text-[100px] ">{value}</p>
+      <p className="font-normal text-[24px]">{label}</p>
+    </div>
+  );
+}

From a90cf32aea31d986fe15ea950126ae62d280b76d Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sun, 11 Jan 2026 22:42:00 -0500
Subject: [PATCH 02/17] feat: add tabs component

---
 app/admin/const.ts  | 22 ++++++++++++++++++++++
 app/admin/page.tsx  | 21 +++++++++++++++++----
 components/Tabs.tsx | 35 +++++++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 components/Tabs.tsx

diff --git a/app/admin/const.ts b/app/admin/const.ts
index 8ff85a3..2a792de 100644
--- a/app/admin/const.ts
+++ b/app/admin/const.ts
@@ -1,5 +1,27 @@
 export const ADMIN_DASHBOARD_CONST = {
   PAGE_TITLE: 'Admin Dashboard',
+  TABS: [
+    {
+      label: 'All',
+      value: 'all',
+    },
+    {
+      label: 'To Review',
+      value: 'toReview',
+    },
+    {
+      label: 'Payment Pending',
+      value: 'paymentPending',
+    },
+    {
+      label: 'Completed',
+      value: 'completed',
+    },
+    {
+      label: 'Rejected',
+      value: 'rejected',
+    },
+  ],
 };
 
 export const ADMIN_DASHBOARD_MOCK = {
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 953406b..98f0adf 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,9 +1,15 @@
+'use client';
+
 import { inter } from '@/app/fonts';
 import AdminNavbar from '@/components/AdminNavbar';
 import StatCard from '@/components/StatCard';
+import Tabs from '@/components/Tabs';
 import { ADMIN_DASHBOARD_MOCK, ADMIN_DASHBOARD_CONST } from './const';
+import { useState } from 'react';
 
 export default function AdminDashboard() {
+  const [currentTab, setCurrentTab] = useState(ADMIN_DASHBOARD_CONST.TABS[0]);
+
   return (
     <>
       <AdminNavbar
@@ -15,10 +21,17 @@ export default function AdminDashboard() {
       >
         {ADMIN_DASHBOARD_CONST.PAGE_TITLE}
       </div>
-      <div className="mt-15 flex justify-center gap-x-19">
-        {ADMIN_DASHBOARD_MOCK.STAT_CARDS.map((card) => (
-          <StatCard key={card.label} label={card.label} value={card.value} />
-        ))}
+      <div className="mx-50">
+        <div className="mt-15 flex justify-center gap-x-19">
+          {ADMIN_DASHBOARD_MOCK.STAT_CARDS.map((card) => (
+            <StatCard key={card.label} label={card.label} value={card.value} />
+          ))}
+        </div>
+        <Tabs
+          tabs={ADMIN_DASHBOARD_CONST.TABS}
+          currentTab={currentTab}
+          setCurrentTab={setCurrentTab}
+        />
       </div>
     </>
   );
diff --git a/components/Tabs.tsx b/components/Tabs.tsx
new file mode 100644
index 0000000..574f643
--- /dev/null
+++ b/components/Tabs.tsx
@@ -0,0 +1,35 @@
+import { inter } from '@/app/fonts';
+
+type Tab = {
+  label: string;
+  value: string;
+};
+
+type TabsProps = {
+  tabs: Tab[];
+  currentTab: Tab;
+  setCurrentTab: (tab: Tab) => void;
+};
+
+export default function Tabs({ tabs, currentTab, setCurrentTab }: TabsProps) {
+  return (
+    <div className={`${inter.className} mt-24.25 flex gap-x-27.5`}>
+      {tabs.map((tab) => {
+        const isActive = tab.value === currentTab.value;
+
+        return (
+          <button
+            key={tab.value}
+            onClick={() => setCurrentTab(tab)}
+            className={`
+							cursor-pointer font-medium text-[16px] leading-[160%] tracking-[-0.03em] underline underline-offset-[3px]
+							${isActive ? 'inline-flex items-center px-6 py-2 bg-[#00519F54] rounded-[30px] border-4 border-[#00519F]' : ''}
+							`}
+          >
+            {tab.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

From e5935057fe88ea1b493d4ef5c567950f4d20c753 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sun, 11 Jan 2026 23:07:43 -0500
Subject: [PATCH 03/17] feat: status chip component

---
 components/StatusChip.tsx | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 components/StatusChip.tsx

diff --git a/components/StatusChip.tsx b/components/StatusChip.tsx
new file mode 100644
index 0000000..0aae0b3
--- /dev/null
+++ b/components/StatusChip.tsx
@@ -0,0 +1,37 @@
+import { inter } from '@/app/fonts';
+
+type StatusChipType = {
+  color: string;
+  label: string;
+  theme: string;
+};
+
+const STATUS_CHIPS: StatusChipType[] = [
+  { color: '#00519F', label: 'To Review', theme: 'toReview' },
+  { color: '#393533', label: 'Rejected', theme: 'rejected' },
+  { color: '#C67D38', label: 'Payment Pending', theme: 'paymentPending' },
+  { color: '#3FA104', label: 'Complete', theme: 'complete' },
+];
+
+type StatusChipProps = {
+  theme: 'toReview' | 'rejected' | 'paymentPending' | 'complete';
+};
+
+export default function StatusChip({ theme }: StatusChipProps) {
+  const status = STATUS_CHIPS.find((s) => s.theme === theme);
+
+  if (!status) return null;
+
+  return (
+    <div className={`flex items-center gap-x-3.75 ${inter.className}`}>
+      <div
+        className="rounded-full w-5.5 h-5.5"
+        style={{ backgroundColor: status.color }}
+      ></div>
+
+      <p className="text-[24px] font-normal" style={{ color: status.color }}>
+        {status.label}
+      </p>
+    </div>
+  );
+}

From 28dacff54b1a474257df428908a785bc5e8001fb Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Tue, 13 Jan 2026 22:13:45 -0500
Subject: [PATCH 04/17] fix: add additionalClasses prop

---
 components/Tabs.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/Tabs.tsx b/components/Tabs.tsx
index 574f643..af7a030 100644
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -9,11 +9,21 @@ type TabsProps = {
   tabs: Tab[];
   currentTab: Tab;
   setCurrentTab: (tab: Tab) => void;
+  additionalClasses?: {
+    wrapper: string;
+  };
 };
 
-export default function Tabs({ tabs, currentTab, setCurrentTab }: TabsProps) {
+export default function Tabs({
+  tabs,
+  currentTab,
+  setCurrentTab,
+  additionalClasses,
+}: TabsProps) {
   return (
-    <div className={`${inter.className} mt-24.25 flex gap-x-27.5`}>
+    <div
+      className={`${inter.className} ${additionalClasses?.wrapper} mt-24.25 flex gap-x-27.5`}
+    >
       {tabs.map((tab) => {
         const isActive = tab.value === currentTab.value;
 

From e3d03d676b619a4510f424b20e18ad4016de54b9 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Tue, 13 Jan 2026 22:14:13 -0500
Subject: [PATCH 05/17] fix: update sizing of navbar for responsiveness

---
 components/AdminNavbar.tsx | 40 ++++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/components/AdminNavbar.tsx b/components/AdminNavbar.tsx
index 91a8263..1293dbd 100644
--- a/components/AdminNavbar.tsx
+++ b/components/AdminNavbar.tsx
@@ -6,27 +6,51 @@ type AdminNavbarProps = {
 };
 
 export default function AdminNavbar({
-  adminName = 'Admin Name',
+  adminName,
   profilePictureUrl,
 }: AdminNavbarProps) {
   return (
-    <div className="h-34.5 bg-[#393533]">
-      <div className="flex items-center h-full justify-between ml-17.5 mr-17.5">
+    <div className="sticky top-0 z-50 w-full bg-[#393533]">
+      <div
+        className="
+          mx-auto
+          max-w-[120rem]
+          min-w-[30rem]
+          px-6 md:px-10 xl:px-16
+          h-[8.75rem]
+          flex items-center justify-between
+        "
+      >
         <p
-          className={`font-black text-[#89CC62] text-[48px] leading-[90%] ${robotoCondensed.className}`}
+          className={`
+            ${robotoCondensed.className}
+            font-black text-[#89CC62]
+            text-[2rem] sm:text-[2.5rem] xl:text-[3rem]
+            leading-[90%]
+          `}
         >
           Richmond Poverty <br />
           Reduction Coalition
         </p>
-        <div className="flex items-center gap-x-4">
+
+        <div className="flex items-center gap-4">
           <p
-            className={`${inter.className} text-[#89CC62] font-semibold text-[32px]`}
+            className={`
+              ${inter.className}
+              text-[#89CC62]
+              font-semibold
+              text-[1.25rem] sm:text-[1.5rem] xl:text-[2rem]
+            `}
           >
             {adminName}
           </p>
+
           {profilePictureUrl ? (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img src={profilePictureUrl} alt="" className="h-22.5 w-22.5" />
+            <img
+              src={profilePictureUrl}
+              alt=""
+              className="h-22.5 w-22.5 rounded-full object-cover"
+            />
           ) : (
             <div className="h-22.5 w-22.5 rounded-full bg-[#7C7C7C]" />
           )}

From a2de95eaf56f6915a1e24cfaa664291b6d6f9ff7 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Thu, 15 Jan 2026 21:33:34 -0500
Subject: [PATCH 06/17] fix: update responsiveness and move table to own
 component

---
 app/admin/const.ts                 | 57 +++++++++++++++++++++++++++
 app/admin/page.tsx                 | 16 ++++++--
 components/AdminDashboardTable.tsx | 46 ++++++++++++++++++++++
 components/AdminNavbar.tsx         | 63 ++++++++++++++----------------
 components/StatCard.tsx            | 10 +++--
 components/Table.tsx               | 53 +++++++++++++++++++++++++
 components/Tabs.tsx                |  8 ++--
 lib/utils.ts                       | 30 ++++++++++++--
 types/adminDashboard.ts            | 20 ++++++++++
 9 files changed, 255 insertions(+), 48 deletions(-)
 create mode 100644 components/AdminDashboardTable.tsx
 create mode 100644 components/Table.tsx
 create mode 100644 types/adminDashboard.ts

diff --git a/app/admin/const.ts b/app/admin/const.ts
index 2a792de..6a27bf0 100644
--- a/app/admin/const.ts
+++ b/app/admin/const.ts
@@ -1,3 +1,5 @@
+import { ApplicationType } from '@/types/adminDashboard';
+
 export const ADMIN_DASHBOARD_CONST = {
   PAGE_TITLE: 'Admin Dashboard',
   TABS: [
@@ -22,6 +24,14 @@ export const ADMIN_DASHBOARD_CONST = {
       value: 'rejected',
     },
   ],
+  TABLE_COLUMNS: [
+    { label: 'Applicant Name', value: 'applicantName', width: 'w-[260px]' },
+    { label: 'Application Type', value: 'type', width: 'w-[200px]' },
+    { label: 'Date Received', value: 'dateReceived', width: 'w-[200px]' },
+    { label: 'Status', value: 'status', width: 'w-[280px]' },
+    { label: 'Reviewer 1', value: 'reviewer1', width: 'w-[150px]' },
+    { label: 'Reviewer 2', value: 'reviewer2', width: 'w-[150px]' },
+  ],
 };
 
 export const ADMIN_DASHBOARD_MOCK = {
@@ -41,4 +51,51 @@ export const ADMIN_DASHBOARD_MOCK = {
       value: 6,
     },
   ],
+  APPLICATIONS_MOCK: [
+    {
+      id: 'APP01',
+      applicantName: 'Leighton Kramer',
+      type: 'Individual',
+      dateReceived: '2026-01-06',
+      status: 'toReview',
+      reviewer1: '',
+      reviewer2: '',
+    },
+    {
+      id: 'APP02',
+      applicantName: 'Marceline Avila',
+      type: 'Organization',
+      dateReceived: '2025-12-18',
+      status: 'toReview',
+      reviewer1: 'Jane Doe',
+      reviewer2: '',
+    },
+    {
+      id: 'APP03',
+      applicantName: 'Jensen Vang',
+      type: 'Organization',
+      dateReceived: '2025-11-11',
+      status: 'rejected',
+      reviewer1: 'John Doe',
+      reviewer2: 'Jane Doe',
+    },
+    {
+      id: 'APP04',
+      applicantName: 'Linda Wu',
+      type: 'Individual',
+      dateReceived: '2025-11-11',
+      status: 'paymentPending',
+      reviewer1: 'John Doe',
+      reviewer2: 'Jane Doe',
+    },
+    {
+      id: 'APP05',
+      applicantName: 'Carter Higgins',
+      type: 'Organization',
+      dateReceived: '2025-11-05',
+      status: 'complete',
+      reviewer1: 'John Doe',
+      reviewer2: 'Jane Doe',
+    },
+  ] as ApplicationType[],
 };
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 98f0adf..5959af7 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,11 +1,12 @@
 'use client';
 
+import { useState } from 'react';
 import { inter } from '@/app/fonts';
 import AdminNavbar from '@/components/AdminNavbar';
 import StatCard from '@/components/StatCard';
 import Tabs from '@/components/Tabs';
 import { ADMIN_DASHBOARD_MOCK, ADMIN_DASHBOARD_CONST } from './const';
-import { useState } from 'react';
+import AdminDashboardTable from '@/components/AdminDashboardTable';
 
 export default function AdminDashboard() {
   const [currentTab, setCurrentTab] = useState(ADMIN_DASHBOARD_CONST.TABS[0]);
@@ -17,12 +18,12 @@ export default function AdminDashboard() {
         profilePictureUrl={ADMIN_DASHBOARD_MOCK.PROFILE_PICTURE_URL}
       />
       <div
-        className={`bg-[#D2E9FF] ${inter.className} font-bold text-[36px] w-113 h-23.25 rounded-r-4xl flex items-center justify-center mt-15`}
+        className={`bg-[#D2E9FF] ${inter.className} font-bold text-[18px] md:text-[32px] lg:text-[36px] w-50 md:w-87.5 lg:w-113 h-15 md:h-23.25 rounded-r-3xl md:rounded-r-4xl flex items-center justify-center mt-10 md:mt-15`}
       >
         {ADMIN_DASHBOARD_CONST.PAGE_TITLE}
       </div>
-      <div className="mx-50">
-        <div className="mt-15 flex justify-center gap-x-19">
+      <div className="max-w-480 mx-auto px-8 md:px-14 xl:px-28">
+        <div className="mt-10 md:mt-15 flex justify-center gap-x-4 md:gap-x-8 lg:gap-x-12">
           {ADMIN_DASHBOARD_MOCK.STAT_CARDS.map((card) => (
             <StatCard key={card.label} label={card.label} value={card.value} />
           ))}
@@ -31,7 +32,14 @@ export default function AdminDashboard() {
           tabs={ADMIN_DASHBOARD_CONST.TABS}
           currentTab={currentTab}
           setCurrentTab={setCurrentTab}
+          additionalClasses={{
+            wrapper: 'ml:7 mt-10 md:mt-16 lg:mt-20 relative left-0',
+          }}
         />
+        {/* <AdminDashboardTable
+          columns={ADMIN_DASHBOARD_CONST.TABLE_COLUMNS}
+          applications={ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK}
+        /> */}
       </div>
     </>
   );
diff --git a/components/AdminDashboardTable.tsx b/components/AdminDashboardTable.tsx
new file mode 100644
index 0000000..462f423
--- /dev/null
+++ b/components/AdminDashboardTable.tsx
@@ -0,0 +1,46 @@
+import Table from './Table';
+import { formatDateWithOrdinal } from '@/lib/utils';
+import StatusChip from './StatusChip';
+import { AdminDashboardTablePropTypes } from '@/types/adminDashboard';
+
+export default function AdminDashboardTable({
+  columns,
+  applications,
+}: AdminDashboardTablePropTypes) {
+  return (
+    <Table
+      columnNames={columns}
+      additionalClasses={{
+        wrapper: 'mt-11.25',
+      }}
+    >
+      {applications.map((app) => (
+        <tr key={app.id} className="bg-[#D4D0CA]">
+          <td className="pl-7.5 py-13.75 font-bold text-[24px] leading-[160%] tracking-[0] border-y-4 border-[#CEC8B9] border-l-4 rounded-l-[25px]">
+            {app.applicantName}
+          </td>
+
+          <td className="px-2 py-13.75 font-normal text-[24px] leading-[150%] tracking-[0] border-y-4 border-[#CEC8B9]">
+            {app.type}
+          </td>
+
+          <td className="px-2 py-13.75 font-normal text-[24px] leading-[150%] tracking-[0] border-y-4 border-[#CEC8B9]">
+            {formatDateWithOrdinal(app.dateReceived)}
+          </td>
+
+          <td className="px-2 py-13.75 text-[24px] border-y-4 border-[#CEC8B9]">
+            <StatusChip theme={app.status} />
+          </td>
+
+          <td className="px-2 py-13.75 font-normal text-[24px] leading-[150%] tracking-[0] border-y-4 border-[#CEC8B9]">
+            {app.reviewer1}
+          </td>
+
+          <td className="pr-7.5 py-13.75 font-normal text-[24px] leading-[150%] tracking-[0] border-y-4 border-[#CEC8B9] border-r-4 rounded-r-[25px]">
+            {app.reviewer2}
+          </td>
+        </tr>
+      ))}
+    </Table>
+  );
+}
diff --git a/components/AdminNavbar.tsx b/components/AdminNavbar.tsx
index 1293dbd..9aafe34 100644
--- a/components/AdminNavbar.tsx
+++ b/components/AdminNavbar.tsx
@@ -10,51 +10,46 @@ export default function AdminNavbar({
   profilePictureUrl,
 }: AdminNavbarProps) {
   return (
-    <div className="sticky top-0 z-50 w-full bg-[#393533]">
-      <div
-        className="
-          mx-auto
-          max-w-[120rem]
-          min-w-[30rem]
-          px-6 md:px-10 xl:px-16
-          h-[8.75rem]
-          flex items-center justify-between
+    <div
+      className="
+          px-10 md:px-17.5 h-24 md:h-35 bg-[#393533]  
+          flex items-center gap-x-3 md:gap-x-12
+          sticky top-0 z-50 w-full 
         "
-      >
-        <p
-          className={`
+    >
+      <p
+        className={`
             ${robotoCondensed.className}
             font-black text-[#89CC62]
-            text-[2rem] sm:text-[2.5rem] xl:text-[3rem]
+            text-[20px] md:text-[36px] lg:text-[48px]
             leading-[90%]
           `}
-        >
-          Richmond Poverty <br />
-          Reduction Coalition
-        </p>
+      >
+        Richmond Poverty <br />
+        Reduction Coalition
+      </p>
 
-        <div className="flex items-center gap-4">
-          <p
-            className={`
+      <div className="ml-auto flex items-center gap-1.5 md:gap-4">
+        <p
+          className={`
               ${inter.className}
               text-[#89CC62]
               font-semibold
-              text-[1.25rem] sm:text-[1.5rem] xl:text-[2rem]
+              text-[16px] md:text-[28px] lg:text-[32px]
             `}
-          >
-            {adminName}
-          </p>
+        >
+          {adminName}
+        </p>
 
-          {profilePictureUrl ? (
-            <img
-              src={profilePictureUrl}
-              alt=""
-              className="h-22.5 w-22.5 rounded-full object-cover"
-            />
-          ) : (
-            <div className="h-22.5 w-22.5 rounded-full bg-[#7C7C7C]" />
-          )}
-        </div>
+        {profilePictureUrl ? (
+          <img
+            src={profilePictureUrl}
+            alt=""
+            className="h-14 w-14 md:h-22.5 md:w-22.5 rounded-full object-cover"
+          />
+        ) : (
+          <div className="h-14 w-14 md:h-22.5 md:w-22.5 rounded-full bg-[#7C7C7C]" />
+        )}
       </div>
     </div>
   );
diff --git a/components/StatCard.tsx b/components/StatCard.tsx
index 8a6c3b1..4ed9594 100644
--- a/components/StatCard.tsx
+++ b/components/StatCard.tsx
@@ -8,10 +8,14 @@ type StatCardProps = {
 export default function StatCard({ label, value }: StatCardProps) {
   return (
     <div
-      className={`w-113.75 h-62.5 bg-[#D4D0CA] rounded-[25px] border-4 border-[#CEC8B9] ${inter.className} flex flex-col items-center justify-center`}
+      className={`min-w-30 md:min-w-50 lg:min-w-70 h-36 md:h-62.5 bg-[#D4D0CA] rounded-[25px] border-4 border-[#CEC8B9] ${inter.className} flex flex-col items-center justify-center text-center gap-x-2`}
     >
-      <p className="font-bold text-[100px] ">{value}</p>
-      <p className="font-normal text-[24px]">{label}</p>
+      <p className="font-bold text-[32px] md:text-[60px] lg:text-[100px] ">
+        {value}
+      </p>
+      <p className="font-normal text-[14px] md:text-[20px] lg:text-[24px] px-4 lg:px-12 lg:pb-6 leading-4 md:leading-normal">
+        {label}
+      </p>
     </div>
   );
 }
diff --git a/components/Table.tsx b/components/Table.tsx
new file mode 100644
index 0000000..6017fea
--- /dev/null
+++ b/components/Table.tsx
@@ -0,0 +1,53 @@
+import { inter } from '@/app/fonts';
+import { ReactNode } from 'react';
+import { ColumnType } from '@/types/adminDashboard';
+
+type TableProps = {
+  columnNames: ColumnType[];
+  sort?: {
+    sortedBy?: string;
+    sortingOrder: 'asc' | 'desc';
+  };
+  pagination?: {
+    itemCount: number;
+    numberPerPage: number;
+    usePagination?: boolean;
+  };
+  children: ReactNode;
+  additionalClasses?: {
+    wrapper?: string;
+    table?: string;
+  };
+};
+
+export default function Table({
+  columnNames,
+  children,
+  additionalClasses,
+}: TableProps) {
+  return (
+    <div className={`${inter.className} ${additionalClasses?.wrapper ?? ''}`}>
+      <table
+        className={`w-full table-fixed border-separate border-spacing-y-4.5 ${additionalClasses?.table ?? ''}`}
+      >
+        <thead>
+          <tr>
+            {columnNames.map((column, index) => (
+              <th
+                key={column.value}
+                className={`
+                  first:pl-7.5 last:pr-7.5 px-2 pb-1.5 text-left font-medium text-[16px]
+                  ${column.width ?? ''}
+                `}
+              >
+                {column.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+
+        <tbody>{children}</tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/components/Tabs.tsx b/components/Tabs.tsx
index af7a030..851e060 100644
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -22,7 +22,7 @@ export default function Tabs({
 }: TabsProps) {
   return (
     <div
-      className={`${inter.className} ${additionalClasses?.wrapper} mt-24.25 flex gap-x-27.5`}
+      className={`${inter.className} ${additionalClasses?.wrapper} flex gap-x-4 md:gap-x-8 lg:gap-x-16`}
     >
       {tabs.map((tab) => {
         const isActive = tab.value === currentTab.value;
@@ -32,9 +32,9 @@ export default function Tabs({
             key={tab.value}
             onClick={() => setCurrentTab(tab)}
             className={`
-							cursor-pointer font-medium text-[16px] leading-[160%] tracking-[-0.03em] underline underline-offset-[3px]
-							${isActive ? 'inline-flex items-center px-6 py-2 bg-[#00519F54] rounded-[30px] border-4 border-[#00519F]' : ''}
-							`}
+							cursor-pointer font-medium text-[12px] md:text-[14px] lg:text-[16px] leading-[160%] tracking-[-0.03em] underline underline-offset-[3px]
+							${isActive ? 'inline-flex items-center px-2 md:px-6 py-2 bg-[#00519F54] rounded-[30px] border-4 border-[#00519F]' : ''}
+						`}
           >
             {tab.label}
           </button>
diff --git a/lib/utils.ts b/lib/utils.ts
index bd0c391..c7ca753 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,6 +1,30 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
+}
+
+function getOrdinal(day: number) {
+  if (day > 3 && day < 21) return 'th';
+  switch (day % 10) {
+    case 1:
+      return 'st';
+    case 2:
+      return 'nd';
+    case 3:
+      return 'rd';
+    default:
+      return 'th';
+  }
+}
+
+export function formatDateWithOrdinal(date: string | Date) {
+  const d = new Date(date);
+
+  const day = d.getDate();
+  const month = d.toLocaleString('en-US', { month: 'short' });
+  const year = d.getFullYear();
+
+  return `${day}${getOrdinal(day)} ${month} ${year}`;
 }
diff --git a/types/adminDashboard.ts b/types/adminDashboard.ts
new file mode 100644
index 0000000..6a34b33
--- /dev/null
+++ b/types/adminDashboard.ts
@@ -0,0 +1,20 @@
+export type ColumnType = {
+  label: string;
+  value: string;
+  width?: string;
+};
+
+export type ApplicationType = {
+  id: string;
+  applicantName: string;
+  type: 'Individual' | 'Organization';
+  dateReceived: string | Date;
+  status: 'toReview' | 'rejected' | 'paymentPending' | 'complete';
+  reviewer1: string;
+  reviewer2: string;
+};
+
+export type AdminDashboardTablePropTypes = {
+  columns: ColumnType[];
+  applications: ApplicationType[];
+};

From bc72f83a44ecc63f921dd8f2f23d28ed8862cf0f Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Thu, 15 Jan 2026 22:22:14 -0500
Subject: [PATCH 07/17] fix: table width and sizing

---
 app/admin/page.tsx                 |  6 +++---
 components/AdminDashboardTable.tsx | 14 +++++++-------
 components/StatCard.tsx            |  2 +-
 components/StatusChip.tsx          |  5 ++++-
 components/Table.tsx               |  8 +++++---
 components/Tabs.tsx                |  4 ++--
 6 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 5959af7..f0c9774 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -33,13 +33,13 @@ export default function AdminDashboard() {
           currentTab={currentTab}
           setCurrentTab={setCurrentTab}
           additionalClasses={{
-            wrapper: 'ml:7 mt-10 md:mt-16 lg:mt-20 relative left-0',
+            wrapper: 'mt-10 md:mt-16 lg:mt-20',
           }}
         />
-        {/* <AdminDashboardTable
+        <AdminDashboardTable
           columns={ADMIN_DASHBOARD_CONST.TABLE_COLUMNS}
           applications={ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK}
-        /> */}
+        />
       </div>
     </>
   );
diff --git a/components/AdminDashboardTable.tsx b/components/AdminDashboardTable.tsx
index 462f423..530cc4d 100644
--- a/components/AdminDashboardTable.tsx
+++ b/components/AdminDashboardTable.tsx
@@ -11,32 +11,32 @@ export default function AdminDashboardTable({
     <Table
       columnNames={columns}
       additionalClasses={{
-        wrapper: 'mt-11.25',
+        wrapper: 'mt-4 md:mt-8',
       }}
     >
       {applications.map((app) => (
         <tr key={app.id} className="bg-[#D4D0CA]">
-          <td className="pl-7.5 py-13.75 font-bold text-[24px] leading-[160%] tracking-[0] border-y-4 border-[#CEC8B9] border-l-4 rounded-l-[25px]">
+          <td className="pl-4 md:pl-7.5 py-6 md:py-8 lg:py-10 xl:py-13.75 font-bold text-[14px] md:text-[16px] lg:text-[24px] leading-[160%] tracking-[0] border-y-0 border-[#CEC8B9] border-l-4 rounded-l-[25px]">
             {app.applicantName}
           </td>
 
-          <td className="px-2 py-13.75 font-normal text-[24px] leading-[150%] tracking-[0] border-y-4 border-[#CEC8B9]">
+          <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
             {app.type}
           </td>
 
-          <td className="px-2 py-13.75 font-normal text-[24px] leading-[150%] tracking-[0] border-y-4 border-[#CEC8B9]">
+          <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
             {formatDateWithOrdinal(app.dateReceived)}
           </td>
 
-          <td className="px-2 py-13.75 text-[24px] border-y-4 border-[#CEC8B9]">
+          <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 border-y-0 border-[#CEC8B9]">
             <StatusChip theme={app.status} />
           </td>
 
-          <td className="px-2 py-13.75 font-normal text-[24px] leading-[150%] tracking-[0] border-y-4 border-[#CEC8B9]">
+          <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
             {app.reviewer1}
           </td>
 
-          <td className="pr-7.5 py-13.75 font-normal text-[24px] leading-[150%] tracking-[0] border-y-4 border-[#CEC8B9] border-r-4 rounded-r-[25px]">
+          <td className="pr-4 md:pr-7.5 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9] border-r-4 rounded-r-[25px]">
             {app.reviewer2}
           </td>
         </tr>
diff --git a/components/StatCard.tsx b/components/StatCard.tsx
index 4ed9594..4502cd6 100644
--- a/components/StatCard.tsx
+++ b/components/StatCard.tsx
@@ -10,7 +10,7 @@ export default function StatCard({ label, value }: StatCardProps) {
     <div
       className={`min-w-30 md:min-w-50 lg:min-w-70 h-36 md:h-62.5 bg-[#D4D0CA] rounded-[25px] border-4 border-[#CEC8B9] ${inter.className} flex flex-col items-center justify-center text-center gap-x-2`}
     >
-      <p className="font-bold text-[32px] md:text-[60px] lg:text-[100px] ">
+      <p className="font-bold text-[32px] md:text-[60px] lg:text-[80px] xl:text-[100px] ">
         {value}
       </p>
       <p className="font-normal text-[14px] md:text-[20px] lg:text-[24px] px-4 lg:px-12 lg:pb-6 leading-4 md:leading-normal">
diff --git a/components/StatusChip.tsx b/components/StatusChip.tsx
index 0aae0b3..046e95a 100644
--- a/components/StatusChip.tsx
+++ b/components/StatusChip.tsx
@@ -29,7 +29,10 @@ export default function StatusChip({ theme }: StatusChipProps) {
         style={{ backgroundColor: status.color }}
       ></div>
 
-      <p className="text-[24px] font-normal" style={{ color: status.color }}>
+      <p
+        className="text-[14px] md:text-[16px] lg:text-[24px]  font-normal"
+        style={{ color: status.color }}
+      >
         {status.label}
       </p>
     </div>
diff --git a/components/Table.tsx b/components/Table.tsx
index 6017fea..aea19ca 100644
--- a/components/Table.tsx
+++ b/components/Table.tsx
@@ -26,9 +26,11 @@ export default function Table({
   additionalClasses,
 }: TableProps) {
   return (
-    <div className={`${inter.className} ${additionalClasses?.wrapper ?? ''}`}>
+    <div
+      className={`${inter.className} ${additionalClasses?.wrapper ?? ''} overflow-x-auto w-full`}
+    >
       <table
-        className={`w-full table-fixed border-separate border-spacing-y-4.5 ${additionalClasses?.table ?? ''}`}
+        className={`w-full min-w-240 table-auto border-separate border-spacing-x-0 border-spacing-y-2 md:border-spacing-y-4.5 ${additionalClasses?.table ?? ''}`}
       >
         <thead>
           <tr>
@@ -36,7 +38,7 @@ export default function Table({
               <th
                 key={column.value}
                 className={`
-                  first:pl-7.5 last:pr-7.5 px-2 pb-1.5 text-left font-medium text-[16px]
+                  first:pl-4 last:pr-4 md:first:pl-7.5 md:last:pr-7.5 px-0 md:px-1 text-left font-medium text-[12px] md:text-[14px] lg:text-[16px]
                   ${column.width ?? ''}
                 `}
               >
diff --git a/components/Tabs.tsx b/components/Tabs.tsx
index 851e060..6b0d9a9 100644
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -22,7 +22,7 @@ export default function Tabs({
 }: TabsProps) {
   return (
     <div
-      className={`${inter.className} ${additionalClasses?.wrapper} flex gap-x-4 md:gap-x-8 lg:gap-x-16`}
+      className={`${inter.className} ${additionalClasses?.wrapper} flex gap-x-4 md:gap-x-8 lg:gap-x-16 pl-4 md:pl-7.5`}
     >
       {tabs.map((tab) => {
         const isActive = tab.value === currentTab.value;
@@ -33,7 +33,7 @@ export default function Tabs({
             onClick={() => setCurrentTab(tab)}
             className={`
 							cursor-pointer font-medium text-[12px] md:text-[14px] lg:text-[16px] leading-[160%] tracking-[-0.03em] underline underline-offset-[3px]
-							${isActive ? 'inline-flex items-center px-2 md:px-6 py-2 bg-[#00519F54] rounded-[30px] border-4 border-[#00519F]' : ''}
+							${isActive ? 'inline-flex items-center px-2 md:px-6 py-1 md:py-2 bg-[#00519F54] rounded-[30px] border-4 border-[#00519F]' : ''}
 						`}
           >
             {tab.label}

From eb055c3a02127f3daac9e04acb014518a2f3ae62 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Thu, 15 Jan 2026 22:25:25 -0500
Subject: [PATCH 08/17] fix: min w breakpoint for table

---
 components/Table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Table.tsx b/components/Table.tsx
index aea19ca..a91b641 100644
--- a/components/Table.tsx
+++ b/components/Table.tsx
@@ -30,7 +30,7 @@ export default function Table({
       className={`${inter.className} ${additionalClasses?.wrapper ?? ''} overflow-x-auto w-full`}
     >
       <table
-        className={`w-full min-w-240 table-auto border-separate border-spacing-x-0 border-spacing-y-2 md:border-spacing-y-4.5 ${additionalClasses?.table ?? ''}`}
+        className={`w-full min-w-200 md:min-w-240 table-auto border-separate border-spacing-x-0 border-spacing-y-2 md:border-spacing-y-4.5 ${additionalClasses?.table ?? ''}`}
       >
         <thead>
           <tr>

From a0329f62a004a1d101f9c4044ea422493aa6aac2 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sat, 24 Jan 2026 17:20:58 -0500
Subject: [PATCH 09/17] feat: implement pagination component

---
 app/admin/page.tsx                 |   1 +
 components/AdminDashboardTable.tsx |  76 +++++++++++-------
 components/IconButton.tsx          |  33 ++++++++
 components/Pagination.tsx          | 123 +++++++++++++++++++++++++++++
 components/Table.tsx               |  68 ++++++++++------
 types/adminDashboard.ts            |   4 +
 6 files changed, 254 insertions(+), 51 deletions(-)
 create mode 100644 components/IconButton.tsx
 create mode 100644 components/Pagination.tsx

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index f0c9774..2f07851 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -39,6 +39,7 @@ export default function AdminDashboard() {
         <AdminDashboardTable
           columns={ADMIN_DASHBOARD_CONST.TABLE_COLUMNS}
           applications={ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK}
+          currentTab={currentTab}
         />
       </div>
     </>
diff --git a/components/AdminDashboardTable.tsx b/components/AdminDashboardTable.tsx
index 530cc4d..9498653 100644
--- a/components/AdminDashboardTable.tsx
+++ b/components/AdminDashboardTable.tsx
@@ -2,45 +2,67 @@ import Table from './Table';
 import { formatDateWithOrdinal } from '@/lib/utils';
 import StatusChip from './StatusChip';
 import { AdminDashboardTablePropTypes } from '@/types/adminDashboard';
+import { useState, useMemo } from 'react';
 
 export default function AdminDashboardTable({
   columns,
   applications,
+  currentTab,
 }: AdminDashboardTablePropTypes) {
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 4;
+
+  // Calculate paginated data - this will change as paginated data should come from the backend.
+  const paginatedApplications = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    return applications.slice(startIndex, endIndex);
+  }, [applications, currentPage, itemsPerPage]);
+
   return (
     <Table
       columnNames={columns}
       additionalClasses={{
         wrapper: 'mt-4 md:mt-8',
       }}
+      pagination={{
+        itemCount: applications.length,
+        numberPerPage: itemsPerPage,
+        usePagination: applications.length > itemsPerPage,
+      }}
+      onPageChange={setCurrentPage}
     >
-      {applications.map((app) => (
-        <tr key={app.id} className="bg-[#D4D0CA]">
-          <td className="pl-4 md:pl-7.5 py-6 md:py-8 lg:py-10 xl:py-13.75 font-bold text-[14px] md:text-[16px] lg:text-[24px] leading-[160%] tracking-[0] border-y-0 border-[#CEC8B9] border-l-4 rounded-l-[25px]">
-            {app.applicantName}
-          </td>
-
-          <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
-            {app.type}
-          </td>
-
-          <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
-            {formatDateWithOrdinal(app.dateReceived)}
-          </td>
-
-          <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 border-y-0 border-[#CEC8B9]">
-            <StatusChip theme={app.status} />
-          </td>
-
-          <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
-            {app.reviewer1}
-          </td>
-
-          <td className="pr-4 md:pr-7.5 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9] border-r-4 rounded-r-[25px]">
-            {app.reviewer2}
-          </td>
-        </tr>
-      ))}
+      {paginatedApplications
+        .filter((app) =>
+          currentTab.value !== 'all' ? app.status === currentTab.value : true,
+        )
+        .map((app) => (
+          <tr key={app.id} className="bg-[#D4D0CA]">
+            <td className="pl-4 md:pl-7.5 py-6 md:py-8 lg:py-10 xl:py-13.75 font-bold text-[14px] md:text-[16px] lg:text-[24px] leading-[160%] tracking-[0] border-y-0 border-[#CEC8B9] border-l-4 rounded-l-[25px]">
+              {app.applicantName}
+            </td>
+
+            <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
+              {app.type}
+            </td>
+
+            <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
+              {formatDateWithOrdinal(app.dateReceived)}
+            </td>
+
+            <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 border-y-0 border-[#CEC8B9]">
+              <StatusChip theme={app.status} />
+            </td>
+
+            <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
+              {app.reviewer1}
+            </td>
+
+            <td className="pr-4 md:pr-7.5 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9] border-r-4 rounded-r-[25px]">
+              {app.reviewer2}
+            </td>
+          </tr>
+        ))}
     </Table>
   );
 }
diff --git a/components/IconButton.tsx b/components/IconButton.tsx
new file mode 100644
index 0000000..f7bc28b
--- /dev/null
+++ b/components/IconButton.tsx
@@ -0,0 +1,33 @@
+type IconButtonAdditionalClassesPropTypes = {
+  button: string[];
+};
+
+type IconButtonComponentPropTypes = {
+  children: React.ReactNode;
+  name?: string;
+  value?: string;
+  handleClick: React.MouseEventHandler<HTMLButtonElement>;
+  additionalClasses?: IconButtonAdditionalClassesPropTypes;
+  disabled?: boolean;
+};
+
+export const IconButton = ({
+  children,
+  name,
+  value,
+  handleClick,
+  disabled = false,
+  additionalClasses,
+}: Readonly<IconButtonComponentPropTypes>) => {
+  return (
+    <button
+      onClick={handleClick}
+      name={name}
+      value={value}
+      disabled={disabled}
+      className={`${additionalClasses?.button.join('')} flex items-center justify-center w-10 h-10 rounded-xl transition-all`}
+    >
+      {children}
+    </button>
+  );
+};
diff --git a/components/Pagination.tsx b/components/Pagination.tsx
new file mode 100644
index 0000000..27968b5
--- /dev/null
+++ b/components/Pagination.tsx
@@ -0,0 +1,123 @@
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+import { IconButton } from './IconButton';
+import { useState, useEffect } from 'react';
+
+type PaginationPropTypes = {
+  activePage: number;
+  itemCount: number;
+  numberItemsPerPage?: number;
+  onPageChange: (page: number) => void;
+};
+
+type usePaginationPropTypes = {
+  numberItemsPerPage?: number;
+  activePage: number;
+  itemCount: number;
+};
+
+const usePagination = ({
+  numberItemsPerPage,
+  itemCount,
+  activePage,
+}: usePaginationPropTypes) => {
+  const [pageCount, setPageCount] = useState(1);
+  const [numberPerPage, setNumberPerPage] = useState(10);
+
+  const windowSize = 5;
+  const maxPage = pageCount;
+  const shouldShift = activePage > windowSize;
+
+  const windowEnd = shouldShift ? Math.min(activePage, maxPage) : windowSize;
+  const windowStart = Math.max(windowEnd - (windowSize - 1), 1);
+
+  const setupPagination = (itemCount: number) => {
+    const numberOfPages = Math.ceil(itemCount / numberPerPage);
+    setPageCount(numberOfPages);
+  };
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    if (numberItemsPerPage) setNumberPerPage(numberItemsPerPage);
+  }, [numberItemsPerPage]);
+
+  useEffect(() => {
+    if (!itemCount) return;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setupPagination(itemCount);
+  }, [itemCount, numberPerPage]);
+
+  return {
+    pageCount,
+    windowStart,
+  };
+};
+
+export const Pagination = ({
+  activePage,
+  itemCount,
+  numberItemsPerPage,
+  onPageChange,
+}: PaginationPropTypes) => {
+  const hook = usePagination({ numberItemsPerPage, itemCount, activePage });
+
+  if (hook.pageCount <= 1) return null;
+
+  return (
+    <div className="flex justify-center items-center py-6">
+      <div className="flex items-center gap-1">
+        <IconButton
+          name="paginationPage"
+          value={`${Math.max(activePage - 1, 1)}`}
+          disabled={activePage === 1}
+          handleClick={() => onPageChange(Math.max(activePage - 1, 1))}
+          additionalClasses={{
+            button: ['bg-[#F1F2F4] hover:bg-[#dce5fa] cursor-pointer'],
+          }}
+        >
+          <ChevronLeftIcon className="w-5 h-5" />
+        </IconButton>
+
+        <div className="flex items-center gap-1">
+          {Array.from({ length: Math.min(5, hook.pageCount) }).map(
+            (_, index) => {
+              const pageNumber = hook.windowStart + index;
+              const isActive = activePage === pageNumber;
+
+              return (
+                <IconButton
+                  key={`pagination-${pageNumber}`}
+                  name="paginationPage"
+                  value={`${pageNumber}`}
+                  handleClick={() => onPageChange(pageNumber)}
+                  additionalClasses={{
+                    button: [
+                      isActive
+                        ? 'bg-[#195CFF] text-white shadow-sm'
+                        : 'text-black bg-[#F1F2F4] hover:bg-[#dce5fa] cursor-pointer',
+                    ],
+                  }}
+                >
+                  {pageNumber}
+                </IconButton>
+              );
+            },
+          )}
+        </div>
+
+        <IconButton
+          name="paginationPage"
+          value={`${Math.min(activePage + 1, hook.pageCount)}`}
+          disabled={activePage === hook.pageCount}
+          handleClick={() =>
+            onPageChange(Math.min(activePage + 1, hook.pageCount))
+          }
+          additionalClasses={{
+            button: ['bg-[#F1F2F4] hover:bg-[#dce5fa] cursor-pointer'],
+          }}
+        >
+          <ChevronRightIcon className="w-5 h-5" />
+        </IconButton>
+      </div>
+    </div>
+  );
+};
diff --git a/components/Table.tsx b/components/Table.tsx
index a91b641..5865455 100644
--- a/components/Table.tsx
+++ b/components/Table.tsx
@@ -1,6 +1,7 @@
 import { inter } from '@/app/fonts';
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
 import { ColumnType } from '@/types/adminDashboard';
+import { Pagination } from './Pagination';
 
 type TableProps = {
   columnNames: ColumnType[];
@@ -18,38 +19,57 @@ type TableProps = {
     wrapper?: string;
     table?: string;
   };
+  onPageChange?: (page: number) => void;
 };
 
 export default function Table({
   columnNames,
   children,
   additionalClasses,
+  pagination,
+  onPageChange,
 }: TableProps) {
+  const [activePage, setActivePage] = useState(1);
+
+  const handlePageChange = (page: number) => {
+    setActivePage(page);
+    onPageChange?.(page);
+  };
+
   return (
-    <div
-      className={`${inter.className} ${additionalClasses?.wrapper ?? ''} overflow-x-auto w-full`}
-    >
-      <table
-        className={`w-full min-w-200 md:min-w-240 table-auto border-separate border-spacing-x-0 border-spacing-y-2 md:border-spacing-y-4.5 ${additionalClasses?.table ?? ''}`}
-      >
-        <thead>
-          <tr>
-            {columnNames.map((column, index) => (
-              <th
-                key={column.value}
-                className={`
-                  first:pl-4 last:pr-4 md:first:pl-7.5 md:last:pr-7.5 px-0 md:px-1 text-left font-medium text-[12px] md:text-[14px] lg:text-[16px]
-                  ${column.width ?? ''}
-                `}
-              >
-                {column.label}
-              </th>
-            ))}
-          </tr>
-        </thead>
+    <div className={`${inter.className} ${additionalClasses?.wrapper ?? ''}`}>
+      <div className="overflow-x-auto w-full">
+        <table
+          className={`w-full min-w-200 md:min-w-240 table-auto border-separate border-spacing-x-0 border-spacing-y-2 md:border-spacing-y-4.5 ${additionalClasses?.table ?? ''}`}
+        >
+          <thead>
+            <tr>
+              {columnNames.map((column) => (
+                <th
+                  key={column.value}
+                  className={`
+                    first:pl-4 last:pr-4 md:first:pl-7.5 md:last:pr-7.5 px-0 md:px-1 text-left font-medium text-[12px] md:text-[14px] lg:text-[16px]
+                    ${column.width ?? ''}
+                  `}
+                >
+                  {column.label}
+                </th>
+              ))}
+            </tr>
+          </thead>
+
+          <tbody>{children}</tbody>
+        </table>
+      </div>
 
-        <tbody>{children}</tbody>
-      </table>
+      {pagination?.usePagination && (
+        <Pagination
+          activePage={activePage}
+          itemCount={pagination.itemCount}
+          numberItemsPerPage={pagination.numberPerPage}
+          onPageChange={handlePageChange}
+        />
+      )}
     </div>
   );
 }
diff --git a/types/adminDashboard.ts b/types/adminDashboard.ts
index 6a34b33..e630dc9 100644
--- a/types/adminDashboard.ts
+++ b/types/adminDashboard.ts
@@ -17,4 +17,8 @@ export type ApplicationType = {
 export type AdminDashboardTablePropTypes = {
   columns: ColumnType[];
   applications: ApplicationType[];
+  currentTab: {
+    label: string;
+    value: string;
+  };
 };

From 7381656a13c7432328415db3b6e71317b8460d94 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sat, 24 Jan 2026 17:25:53 -0500
Subject: [PATCH 10/17] fix: change complete to completed

---
 app/admin/const.ts        | 2 +-
 components/StatusChip.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/admin/const.ts b/app/admin/const.ts
index 6a27bf0..3cde6ae 100644
--- a/app/admin/const.ts
+++ b/app/admin/const.ts
@@ -93,7 +93,7 @@ export const ADMIN_DASHBOARD_MOCK = {
       applicantName: 'Carter Higgins',
       type: 'Organization',
       dateReceived: '2025-11-05',
-      status: 'complete',
+      status: 'completed',
       reviewer1: 'John Doe',
       reviewer2: 'Jane Doe',
     },
diff --git a/components/StatusChip.tsx b/components/StatusChip.tsx
index 046e95a..d0dc9eb 100644
--- a/components/StatusChip.tsx
+++ b/components/StatusChip.tsx
@@ -10,7 +10,7 @@ const STATUS_CHIPS: StatusChipType[] = [
   { color: '#00519F', label: 'To Review', theme: 'toReview' },
   { color: '#393533', label: 'Rejected', theme: 'rejected' },
   { color: '#C67D38', label: 'Payment Pending', theme: 'paymentPending' },
-  { color: '#3FA104', label: 'Complete', theme: 'complete' },
+  { color: '#3FA104', label: 'Complete', theme: 'completed' },
 ];
 
 type StatusChipProps = {

From 5a4c7a09e40fa10eaa3bab3d2194d54f8bfbbf92 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sat, 31 Jan 2026 21:03:14 -0500
Subject: [PATCH 11/17] feat: update navbar and tabs to new style

---
 app/admin/const.ts         |  8 ++++--
 app/admin/page.tsx         | 27 +++++++++-----------
 components/AdminNavbar.tsx | 50 ++++++--------------------------------
 components/Tabs.tsx        |  6 ++---
 4 files changed, 28 insertions(+), 63 deletions(-)

diff --git a/app/admin/const.ts b/app/admin/const.ts
index 3cde6ae..df26841 100644
--- a/app/admin/const.ts
+++ b/app/admin/const.ts
@@ -16,8 +16,12 @@ export const ADMIN_DASHBOARD_CONST = {
       value: 'paymentPending',
     },
     {
-      label: 'Completed',
-      value: 'completed',
+      label: 'Active',
+      value: 'active',
+    },
+    {
+      label: 'Expired',
+      value: 'expired',
     },
     {
       label: 'Rejected',
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 2f07851..d976d7e 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -13,34 +13,29 @@ export default function AdminDashboard() {
 
   return (
     <>
-      <AdminNavbar
-        adminName={ADMIN_DASHBOARD_MOCK.ADMIN_NAME}
-        profilePictureUrl={ADMIN_DASHBOARD_MOCK.PROFILE_PICTURE_URL}
-      />
-      <div
-        className={`bg-[#D2E9FF] ${inter.className} font-bold text-[18px] md:text-[32px] lg:text-[36px] w-50 md:w-87.5 lg:w-113 h-15 md:h-23.25 rounded-r-3xl md:rounded-r-4xl flex items-center justify-center mt-10 md:mt-15`}
-      >
-        {ADMIN_DASHBOARD_CONST.PAGE_TITLE}
-      </div>
-      <div className="max-w-480 mx-auto px-8 md:px-14 xl:px-28">
-        <div className="mt-10 md:mt-15 flex justify-center gap-x-4 md:gap-x-8 lg:gap-x-12">
-          {ADMIN_DASHBOARD_MOCK.STAT_CARDS.map((card) => (
-            <StatCard key={card.label} label={card.label} value={card.value} />
-          ))}
-        </div>
+      <AdminNavbar />
+      <div className="px-8">
         <Tabs
           tabs={ADMIN_DASHBOARD_CONST.TABS}
           currentTab={currentTab}
           setCurrentTab={setCurrentTab}
           additionalClasses={{
-            wrapper: 'mt-10 md:mt-16 lg:mt-20',
+            wrapper: 'mt-[43px]',
           }}
         />
+        {/* <div className="max-w-480 mx-auto px-8 md:px-14 xl:px-28">
+        <div className="mt-10 md:mt-15 flex justify-center gap-x-4 md:gap-x-8 lg:gap-x-12">
+          {ADMIN_DASHBOARD_MOCK.STAT_CARDS.map((card) => (
+            <StatCard key={card.label} label={card.label} value={card.value} />
+          ))}
+        </div>
+        
         <AdminDashboardTable
           columns={ADMIN_DASHBOARD_CONST.TABLE_COLUMNS}
           applications={ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK}
           currentTab={currentTab}
         />
+      </div> */}
       </div>
     </>
   );
diff --git a/components/AdminNavbar.tsx b/components/AdminNavbar.tsx
index 9aafe34..e38b7ba 100644
--- a/components/AdminNavbar.tsx
+++ b/components/AdminNavbar.tsx
@@ -1,56 +1,22 @@
-import { robotoCondensed, inter } from '@/app/fonts';
+import { robotoCondensed } from '@/app/fonts';
 
-type AdminNavbarProps = {
-  adminName: string;
-  profilePictureUrl?: string;
-};
-
-export default function AdminNavbar({
-  adminName,
-  profilePictureUrl,
-}: AdminNavbarProps) {
+export default function AdminNavbar() {
   return (
     <div
       className="
-          px-10 md:px-17.5 h-24 md:h-35 bg-[#393533]  
-          flex items-center gap-x-3 md:gap-x-12
-          sticky top-0 z-50 w-full 
+          h-17 bg-[#393533]
+          sticky top-0 z-50 w-full flex items-center
         "
     >
       <p
         className={`
-            ${robotoCondensed.className}
-            font-black text-[#89CC62]
-            text-[20px] md:text-[36px] lg:text-[48px]
-            leading-[90%]
+            ${robotoCondensed.className} pl-8
+            font-medium text-[#89CC62]
+            text-[28px] leading-[1.1]
           `}
       >
-        Richmond Poverty <br />
-        Reduction Coalition
+        RPRC Membership Management
       </p>
-
-      <div className="ml-auto flex items-center gap-1.5 md:gap-4">
-        <p
-          className={`
-              ${inter.className}
-              text-[#89CC62]
-              font-semibold
-              text-[16px] md:text-[28px] lg:text-[32px]
-            `}
-        >
-          {adminName}
-        </p>
-
-        {profilePictureUrl ? (
-          <img
-            src={profilePictureUrl}
-            alt=""
-            className="h-14 w-14 md:h-22.5 md:w-22.5 rounded-full object-cover"
-          />
-        ) : (
-          <div className="h-14 w-14 md:h-22.5 md:w-22.5 rounded-full bg-[#7C7C7C]" />
-        )}
-      </div>
     </div>
   );
 }
diff --git a/components/Tabs.tsx b/components/Tabs.tsx
index 6b0d9a9..4418239 100644
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -22,7 +22,7 @@ export default function Tabs({
 }: TabsProps) {
   return (
     <div
-      className={`${inter.className} ${additionalClasses?.wrapper} flex gap-x-4 md:gap-x-8 lg:gap-x-16 pl-4 md:pl-7.5`}
+      className={`${inter.className} ${additionalClasses?.wrapper} flex gap-x-2`}
     >
       {tabs.map((tab) => {
         const isActive = tab.value === currentTab.value;
@@ -32,8 +32,8 @@ export default function Tabs({
             key={tab.value}
             onClick={() => setCurrentTab(tab)}
             className={`
-							cursor-pointer font-medium text-[12px] md:text-[14px] lg:text-[16px] leading-[160%] tracking-[-0.03em] underline underline-offset-[3px]
-							${isActive ? 'inline-flex items-center px-2 md:px-6 py-1 md:py-2 bg-[#00519F54] rounded-[30px] border-4 border-[#00519F]' : ''}
+							cursor-pointer font-semibold text-[16px] px-6.75 py-3.5 rounded-2xl border-2 border-[#BAB7B2]
+							${isActive ? 'bg-[#5EB42D] border-none text-[#FFFDFA] shadow-[0px_2px_4px_-2px_#0000001A,0px_4px_6px_-1px_#0000001A]' : ''}
 						`}
           >
             {tab.label}

From 157c669aab0557b437d7f6aa78d690878e5f2663 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sun, 1 Feb 2026 13:23:16 -0500
Subject: [PATCH 12/17] feat: update statcards to new style

---
 app/admin/const.ts         |  2 +-
 app/admin/page.tsx         | 18 +++++++++---------
 components/AdminNavbar.tsx | 10 +++++-----
 components/StatCard.tsx    | 13 ++++++++-----
 components/Tabs.tsx        |  8 +++++---
 5 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/app/admin/const.ts b/app/admin/const.ts
index df26841..4f86994 100644
--- a/app/admin/const.ts
+++ b/app/admin/const.ts
@@ -51,7 +51,7 @@ export const ADMIN_DASHBOARD_MOCK = {
       value: 20,
     },
     {
-      label: 'New Applications Submitted',
+      label: 'New Applications',
       value: 6,
     },
   ],
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index d976d7e..f4df271 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -14,21 +14,22 @@ export default function AdminDashboard() {
   return (
     <>
       <AdminNavbar />
-      <div className="px-8">
+      <div className="md:px-7.25">
         <Tabs
           tabs={ADMIN_DASHBOARD_CONST.TABS}
           currentTab={currentTab}
           setCurrentTab={setCurrentTab}
           additionalClasses={{
-            wrapper: 'mt-[43px]',
+            wrapper: 'md:mt-[43px] p-[10px] md:p-0',
           }}
         />
-        {/* <div className="max-w-480 mx-auto px-8 md:px-14 xl:px-28">
-        <div className="mt-10 md:mt-15 flex justify-center gap-x-4 md:gap-x-8 lg:gap-x-12">
-          {ADMIN_DASHBOARD_MOCK.STAT_CARDS.map((card) => (
-            <StatCard key={card.label} label={card.label} value={card.value} />
-          ))}
-        </div>
+      </div>
+      <div className="px-4 md:px-8 mt-5.75 md:mt-10.5 flex justify-around gap-x-4 md:gap-x-6 w-full">
+        {ADMIN_DASHBOARD_MOCK.STAT_CARDS.map((card) => (
+          <StatCard key={card.label} label={card.label} value={card.value} />
+        ))}
+      </div>
+      {/* <div className="max-w-480 mx-auto px-8 md:px-14 xl:px-28">
         
         <AdminDashboardTable
           columns={ADMIN_DASHBOARD_CONST.TABLE_COLUMNS}
@@ -36,7 +37,6 @@ export default function AdminDashboard() {
           currentTab={currentTab}
         />
       </div> */}
-      </div>
     </>
   );
 }
diff --git a/components/AdminNavbar.tsx b/components/AdminNavbar.tsx
index e38b7ba..b41f2c9 100644
--- a/components/AdminNavbar.tsx
+++ b/components/AdminNavbar.tsx
@@ -4,15 +4,15 @@ export default function AdminNavbar() {
   return (
     <div
       className="
-          h-17 bg-[#393533]
-          sticky top-0 z-50 w-full flex items-center
+          h-14.5 md:h-17 bg-[#393533] sticky top-0 z-50 w-full 
+          flex items-center justify-center md:justify-start
         "
     >
       <p
         className={`
-            ${robotoCondensed.className} pl-8
-            font-medium text-[#89CC62]
-            text-[28px] leading-[1.1]
+            ${robotoCondensed.className} 
+            md:pl-8 font-medium text-[#89CC62]
+            text-[20px] md:text-[28px] leading-[1.1]
           `}
       >
         RPRC Membership Management
diff --git a/components/StatCard.tsx b/components/StatCard.tsx
index 4502cd6..99c0e74 100644
--- a/components/StatCard.tsx
+++ b/components/StatCard.tsx
@@ -1,4 +1,4 @@
-import { inter } from '@/app/fonts';
+import { inter, robotoCondensed } from '@/app/fonts';
 
 type StatCardProps = {
   label: string;
@@ -8,12 +8,15 @@ type StatCardProps = {
 export default function StatCard({ label, value }: StatCardProps) {
   return (
     <div
-      className={`min-w-30 md:min-w-50 lg:min-w-70 h-36 md:h-62.5 bg-[#D4D0CA] rounded-[25px] border-4 border-[#CEC8B9] ${inter.className} flex flex-col items-center justify-center text-center gap-x-2`}
+      className={`flex-1 h-36 md:h-62.5 bg-[#D9E7F4] rounded-4xl flex flex-col items-center justify-center text-center py-6`}
     >
-      <p className="font-bold text-[32px] md:text-[60px] lg:text-[80px] xl:text-[100px] ">
-        {value}
+      <p className="font-bold text-[32px] md:text-[60px] lg:text-[80px] xl:text-[100px]">
+        <span className={`${robotoCondensed.className} md:hidden`}>
+          {value}
+        </span>
+        <span className={`${inter.className} hidden md:inline`}>{value}</span>
       </p>
-      <p className="font-normal text-[14px] md:text-[20px] lg:text-[24px] px-4 lg:px-12 lg:pb-6 leading-4 md:leading-normal">
+      <p className="font-normal text-[16px] md:text-[20px] leading-normal md:leading-7.5 tracking-[-0.45px] px-2">
         {label}
       </p>
     </div>
diff --git a/components/Tabs.tsx b/components/Tabs.tsx
index 4418239..bf4f82e 100644
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -22,7 +22,9 @@ export default function Tabs({
 }: TabsProps) {
   return (
     <div
-      className={`${inter.className} ${additionalClasses?.wrapper} flex gap-x-2`}
+      className={`${inter.className} ${additionalClasses?.wrapper} flex gap-x-2
+      overflow-x-auto scrollbar-hide rounded-3xl md:rounded-none bg-[#F5F4F2] md:bg-transparent
+      `}
     >
       {tabs.map((tab) => {
         const isActive = tab.value === currentTab.value;
@@ -32,8 +34,8 @@ export default function Tabs({
             key={tab.value}
             onClick={() => setCurrentTab(tab)}
             className={`
-							cursor-pointer font-semibold text-[16px] px-6.75 py-3.5 rounded-2xl border-2 border-[#BAB7B2]
-							${isActive ? 'bg-[#5EB42D] border-none text-[#FFFDFA] shadow-[0px_2px_4px_-2px_#0000001A,0px_4px_6px_-1px_#0000001A]' : ''}
+							cursor-pointer font-semibold text-[14px] md:text-[16px] px-4.25 md:px-6.75 py-3.25 md:py-3.5 rounded-2xl border-2 border-[#BAB7B2] text-nowrap leading-5
+							${isActive ? 'bg-[#5EB42D] border-transparent text-[#FFFDFA] shadow-[0px_2px_4px_-2px_#0000001A,0px_4px_6px_-1px_#0000001A]' : ''}
 						`}
           >
             {tab.label}

From 0d1d240f10742c295329cb24d3cd4c6f8bab0ce7 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sun, 1 Feb 2026 13:51:14 -0500
Subject: [PATCH 13/17] feat: admin dashboard search bar

---
 app/admin/page.tsx            | 18 +++++++++++++++++-
 components/AdminSearchBar.tsx | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 components/AdminSearchBar.tsx

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index f4df271..7da889b 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,15 +1,28 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { inter } from '@/app/fonts';
 import AdminNavbar from '@/components/AdminNavbar';
 import StatCard from '@/components/StatCard';
 import Tabs from '@/components/Tabs';
+import AdminSearchBar from '@/components/AdminSearchBar';
 import { ADMIN_DASHBOARD_MOCK, ADMIN_DASHBOARD_CONST } from './const';
 import AdminDashboardTable from '@/components/AdminDashboardTable';
 
 export default function AdminDashboard() {
   const [currentTab, setCurrentTab] = useState(ADMIN_DASHBOARD_CONST.TABS[0]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
+
+  // Debounce the search query
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchQuery(searchQuery);
+      console.log(debouncedSearchQuery);
+    }, 300); // 300ms delay
+
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
 
   return (
     <>
@@ -29,6 +42,9 @@ export default function AdminDashboard() {
           <StatCard key={card.label} label={card.label} value={card.value} />
         ))}
       </div>
+      <div className="px-4 md:px-8">
+        <AdminSearchBar value={searchQuery} onChange={setSearchQuery} />
+      </div>
       {/* <div className="max-w-480 mx-auto px-8 md:px-14 xl:px-28">
         
         <AdminDashboardTable
diff --git a/components/AdminSearchBar.tsx b/components/AdminSearchBar.tsx
new file mode 100644
index 0000000..8223bbf
--- /dev/null
+++ b/components/AdminSearchBar.tsx
@@ -0,0 +1,34 @@
+import { inter } from '@/app/fonts';
+import { Search } from 'lucide-react';
+
+type AdminSearchBarProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+};
+
+export default function AdminSearchBar({
+  value,
+  onChange,
+  placeholder = 'Search by name...',
+}: AdminSearchBarProps) {
+  return (
+    <div
+      className="
+          w-full md:w-[80%] mt-6 flex flex-row gap-x-3 rounded-2xl border-2 border-[#BAB7B2] p-4 items-center
+        "
+    >
+      <Search size={20} className="text-[#74654C]" />
+      <input
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className={`
+          ${inter.className} 
+          w-full placeholder:text-[#A9A295] placeholder:text-[16px] focus:outline-none
+        `}
+      />
+    </div>
+  );
+}

From 7deb13798bd2f020968949ddf192de25702dd1e5 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sun, 1 Feb 2026 15:01:29 -0500
Subject: [PATCH 14/17] feat: update desktop table and pagination

---
 app/admin/const.ts                        | 32 ++++++++++----
 app/admin/page.tsx                        | 11 ++---
 components/AdminDashboardTable.tsx        | 51 +++++++++++++----------
 components/{IconButton.tsx => Button.tsx} | 10 +++--
 components/Pagination.tsx                 | 32 +++++---------
 components/StatusChip.tsx                 | 22 ++++------
 components/Table.tsx                      | 16 +++----
 types/adminDashboard.ts                   |  6 ++-
 8 files changed, 98 insertions(+), 82 deletions(-)
 rename components/{IconButton.tsx => Button.tsx} (61%)

diff --git a/app/admin/const.ts b/app/admin/const.ts
index 4f86994..9450fcd 100644
--- a/app/admin/const.ts
+++ b/app/admin/const.ts
@@ -29,12 +29,12 @@ export const ADMIN_DASHBOARD_CONST = {
     },
   ],
   TABLE_COLUMNS: [
-    { label: 'Applicant Name', value: 'applicantName', width: 'w-[260px]' },
-    { label: 'Application Type', value: 'type', width: 'w-[200px]' },
-    { label: 'Date Received', value: 'dateReceived', width: 'w-[200px]' },
-    { label: 'Status', value: 'status', width: 'w-[280px]' },
-    { label: 'Reviewer 1', value: 'reviewer1', width: 'w-[150px]' },
-    { label: 'Reviewer 2', value: 'reviewer2', width: 'w-[150px]' },
+    { label: 'Applicant Name', value: 'applicantName' },
+    { label: 'Application Type', value: 'type' },
+    { label: 'Date Received', value: 'dateReceived' },
+    { label: 'Status', value: 'status' },
+    { label: 'Reviewer 1', value: 'reviewer1' },
+    { label: 'Reviewer 2', value: 'reviewer2' },
   ],
 };
 
@@ -97,9 +97,27 @@ export const ADMIN_DASHBOARD_MOCK = {
       applicantName: 'Carter Higgins',
       type: 'Organization',
       dateReceived: '2025-11-05',
-      status: 'completed',
+      status: 'active',
       reviewer1: 'John Doe',
       reviewer2: 'Jane Doe',
     },
+    {
+      id: 'APP06',
+      applicantName: 'Sarah Johnson',
+      type: 'Individual',
+      dateReceived: '2025-11-10',
+      status: 'active',
+      reviewer1: 'Jane Doe',
+      reviewer2: 'John Doe',
+    },
+    {
+      id: 'APP07',
+      applicantName: 'Michael Chen',
+      type: 'Organization',
+      dateReceived: '2025-11-09',
+      status: 'expired',
+      reviewer1: 'John Doe',
+      reviewer2: '',
+    },
   ] as ApplicationType[],
 };
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 7da889b..df04c9b 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -15,10 +15,10 @@ export default function AdminDashboard() {
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('');
 
   // Debounce the search query
+  // TODO: Use the debouncedSearchQuery to filter the applications in the backend
   useEffect(() => {
     const timer = setTimeout(() => {
       setDebouncedSearchQuery(searchQuery);
-      console.log(debouncedSearchQuery);
     }, 300); // 300ms delay
 
     return () => clearTimeout(timer);
@@ -44,15 +44,16 @@ export default function AdminDashboard() {
       </div>
       <div className="px-4 md:px-8">
         <AdminSearchBar value={searchQuery} onChange={setSearchQuery} />
-      </div>
-      {/* <div className="max-w-480 mx-auto px-8 md:px-14 xl:px-28">
-        
         <AdminDashboardTable
           columns={ADMIN_DASHBOARD_CONST.TABLE_COLUMNS}
           applications={ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK}
           currentTab={currentTab}
+          pagination={{
+            itemCount: ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK.length,
+            numberPerPage: 5,
+          }}
         />
-      </div> */}
+      </div>
     </>
   );
 }
diff --git a/components/AdminDashboardTable.tsx b/components/AdminDashboardTable.tsx
index 9498653..8845460 100644
--- a/components/AdminDashboardTable.tsx
+++ b/components/AdminDashboardTable.tsx
@@ -8,16 +8,18 @@ export default function AdminDashboardTable({
   columns,
   applications,
   currentTab,
+  pagination,
 }: AdminDashboardTablePropTypes) {
   const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 4;
 
-  // Calculate paginated data - this will change as paginated data should come from the backend.
   const paginatedApplications = useMemo(() => {
-    const startIndex = (currentPage - 1) * itemsPerPage;
-    const endIndex = startIndex + itemsPerPage;
+    if (!pagination) {
+      return applications;
+    }
+    const startIndex = (currentPage - 1) * pagination.numberPerPage;
+    const endIndex = startIndex + pagination.numberPerPage;
     return applications.slice(startIndex, endIndex);
-  }, [applications, currentPage, itemsPerPage]);
+  }, [applications, currentPage, pagination]);
 
   return (
     <Table
@@ -25,11 +27,15 @@ export default function AdminDashboardTable({
       additionalClasses={{
         wrapper: 'mt-4 md:mt-8',
       }}
-      pagination={{
-        itemCount: applications.length,
-        numberPerPage: itemsPerPage,
-        usePagination: applications.length > itemsPerPage,
-      }}
+      pagination={
+        pagination
+          ? {
+              itemCount: pagination.itemCount,
+              numberPerPage: pagination.numberPerPage,
+              usePagination: pagination.itemCount > pagination.numberPerPage,
+            }
+          : undefined
+      }
       onPageChange={setCurrentPage}
     >
       {paginatedApplications
@@ -37,29 +43,28 @@ export default function AdminDashboardTable({
           currentTab.value !== 'all' ? app.status === currentTab.value : true,
         )
         .map((app) => (
-          <tr key={app.id} className="bg-[#D4D0CA]">
-            <td className="pl-4 md:pl-7.5 py-6 md:py-8 lg:py-10 xl:py-13.75 font-bold text-[14px] md:text-[16px] lg:text-[24px] leading-[160%] tracking-[0] border-y-0 border-[#CEC8B9] border-l-4 rounded-l-[25px]">
-              {app.applicantName}
-            </td>
+          <tr
+            key={app.id}
+            className="bg-[#F5F4F2] not-last:border-b not-last:border-[#BAB7B2] leading-6 tracking-[-0.31px] text-[16px]"
+          >
+            <td className="p-6 font-bold">{app.applicantName}</td>
 
-            <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
-              {app.type}
-            </td>
+            <td className="p-6 font-normal">{app.type}</td>
 
-            <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
+            <td className="p-6 font-normal">
               {formatDateWithOrdinal(app.dateReceived)}
             </td>
 
-            <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 border-y-0 border-[#CEC8B9]">
+            <td className="p-6 font-normal">
               <StatusChip theme={app.status} />
             </td>
 
-            <td className="px-2 md:px-2 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9]">
-              {app.reviewer1}
+            <td className="p-6 font-normal">
+              {app.reviewer1 === '' ? '-' : app.reviewer1}
             </td>
 
-            <td className="pr-4 md:pr-7.5 py-6 md:py-8 lg:py-10 xl:py-13.75 font-normal text-[14px] md:text-[16px] lg:text-[24px] leading-[150%] tracking-[0] border-y-0 border-[#CEC8B9] border-r-4 rounded-r-[25px]">
-              {app.reviewer2}
+            <td className="p-6 font-normal">
+              {app.reviewer2 === '' ? '-' : app.reviewer2}
             </td>
           </tr>
         ))}
diff --git a/components/IconButton.tsx b/components/Button.tsx
similarity index 61%
rename from components/IconButton.tsx
rename to components/Button.tsx
index f7bc28b..a31be09 100644
--- a/components/IconButton.tsx
+++ b/components/Button.tsx
@@ -2,30 +2,32 @@ type IconButtonAdditionalClassesPropTypes = {
   button: string[];
 };
 
-type IconButtonComponentPropTypes = {
+type ButtonComponentPropTypes = {
   children: React.ReactNode;
   name?: string;
   value?: string;
   handleClick: React.MouseEventHandler<HTMLButtonElement>;
   additionalClasses?: IconButtonAdditionalClassesPropTypes;
+  isActive?: boolean;
   disabled?: boolean;
 };
 
-export const IconButton = ({
+export const Button = ({
   children,
   name,
   value,
   handleClick,
   disabled = false,
   additionalClasses,
-}: Readonly<IconButtonComponentPropTypes>) => {
+  isActive = false,
+}: Readonly<ButtonComponentPropTypes>) => {
   return (
     <button
       onClick={handleClick}
       name={name}
       value={value}
       disabled={disabled}
-      className={`${additionalClasses?.button.join('')} flex items-center justify-center w-10 h-10 rounded-xl transition-all`}
+      className={`${additionalClasses?.button.join('')} flex items-center justify-center rounded-xl transition-all px-4.5 py-2.5 border-2 border-[#BAB7B2] cursor-pointer ${isActive ? 'bg-[#5EB42D] text-[#FFFDFA] border-transparent' : ''} disabled:opacity-50  font-semibold text-[16px]`}
     >
       {children}
     </button>
diff --git a/components/Pagination.tsx b/components/Pagination.tsx
index 27968b5..ac0d06c 100644
--- a/components/Pagination.tsx
+++ b/components/Pagination.tsx
@@ -1,5 +1,5 @@
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
-import { IconButton } from './IconButton';
+import { Button } from './Button';
 import { useState, useEffect } from 'react';
 
 type PaginationPropTypes = {
@@ -65,17 +65,14 @@ export const Pagination = ({
   return (
     <div className="flex justify-center items-center py-6">
       <div className="flex items-center gap-1">
-        <IconButton
+        <Button
           name="paginationPage"
           value={`${Math.max(activePage - 1, 1)}`}
           disabled={activePage === 1}
           handleClick={() => onPageChange(Math.max(activePage - 1, 1))}
-          additionalClasses={{
-            button: ['bg-[#F1F2F4] hover:bg-[#dce5fa] cursor-pointer'],
-          }}
         >
-          <ChevronLeftIcon className="w-5 h-5" />
-        </IconButton>
+          Previous
+        </Button>
 
         <div className="flex items-center gap-1">
           {Array.from({ length: Math.min(5, hook.pageCount) }).map(
@@ -84,39 +81,30 @@ export const Pagination = ({
               const isActive = activePage === pageNumber;
 
               return (
-                <IconButton
+                <Button
                   key={`pagination-${pageNumber}`}
                   name="paginationPage"
                   value={`${pageNumber}`}
                   handleClick={() => onPageChange(pageNumber)}
-                  additionalClasses={{
-                    button: [
-                      isActive
-                        ? 'bg-[#195CFF] text-white shadow-sm'
-                        : 'text-black bg-[#F1F2F4] hover:bg-[#dce5fa] cursor-pointer',
-                    ],
-                  }}
+                  isActive={isActive}
                 >
                   {pageNumber}
-                </IconButton>
+                </Button>
               );
             },
           )}
         </div>
 
-        <IconButton
+        <Button
           name="paginationPage"
           value={`${Math.min(activePage + 1, hook.pageCount)}`}
           disabled={activePage === hook.pageCount}
           handleClick={() =>
             onPageChange(Math.min(activePage + 1, hook.pageCount))
           }
-          additionalClasses={{
-            button: ['bg-[#F1F2F4] hover:bg-[#dce5fa] cursor-pointer'],
-          }}
         >
-          <ChevronRightIcon className="w-5 h-5" />
-        </IconButton>
+          Next
+        </Button>
       </div>
     </div>
   );
diff --git a/components/StatusChip.tsx b/components/StatusChip.tsx
index d0dc9eb..c0face2 100644
--- a/components/StatusChip.tsx
+++ b/components/StatusChip.tsx
@@ -10,11 +10,12 @@ const STATUS_CHIPS: StatusChipType[] = [
   { color: '#00519F', label: 'To Review', theme: 'toReview' },
   { color: '#393533', label: 'Rejected', theme: 'rejected' },
   { color: '#C67D38', label: 'Payment Pending', theme: 'paymentPending' },
-  { color: '#3FA104', label: 'Complete', theme: 'completed' },
+  { color: '#5EB42D', label: 'Active', theme: 'active' },
+  { color: '#BE282B', label: 'Expired', theme: 'expired' },
 ];
 
 type StatusChipProps = {
-  theme: 'toReview' | 'rejected' | 'paymentPending' | 'complete';
+  theme: 'toReview' | 'rejected' | 'paymentPending' | 'active' | 'expired';
 };
 
 export default function StatusChip({ theme }: StatusChipProps) {
@@ -23,18 +24,13 @@ export default function StatusChip({ theme }: StatusChipProps) {
   if (!status) return null;
 
   return (
-    <div className={`flex items-center gap-x-3.75 ${inter.className}`}>
-      <div
-        className="rounded-full w-5.5 h-5.5"
-        style={{ backgroundColor: status.color }}
-      ></div>
+    <div
+      className={`${inter.className} rounded-full flex justify-center items-center gap-x-2 py-1 px-2.75 w-fit`}
+      style={{ backgroundColor: status.color }}
+    >
+      <div className="rounded-full w-2 h-2 bg-[#FFFDFA]"></div>
 
-      <p
-        className="text-[14px] md:text-[16px] lg:text-[24px]  font-normal"
-        style={{ color: status.color }}
-      >
-        {status.label}
-      </p>
+      <p className="text-[14px] text-[#FFFDFA]">{status.label}</p>
     </div>
   );
 }
diff --git a/components/Table.tsx b/components/Table.tsx
index 5865455..bc1786f 100644
--- a/components/Table.tsx
+++ b/components/Table.tsx
@@ -38,18 +38,20 @@ export default function Table({
 
   return (
     <div className={`${inter.className} ${additionalClasses?.wrapper ?? ''}`}>
-      <div className="overflow-x-auto w-full">
+      <div className="overflow-hidden rounded-t-4xl rounded-b-4xl border-2 border-[#BAB7B2]">
         <table
-          className={`w-full min-w-200 md:min-w-240 table-auto border-separate border-spacing-x-0 border-spacing-y-2 md:border-spacing-y-4.5 ${additionalClasses?.table ?? ''}`}
+          className={`w-full table-fixed ${additionalClasses?.table ?? ''}`}
         >
           <thead>
-            <tr>
-              {columnNames.map((column) => (
+            <tr className="bg-[#E2F4D9] border-b-2 border-[#BAB7B2]">
+              {columnNames.map((column, idx) => (
                 <th
                   key={column.value}
-                  className={`
-                    first:pl-4 last:pr-4 md:first:pl-7.5 md:last:pr-7.5 px-0 md:px-1 text-left font-medium text-[12px] md:text-[14px] lg:text-[16px]
-                    ${column.width ?? ''}
+                  style={{ width: `${100 / columnNames.length}%` }}
+                  className={`text-left p-6
+                    ${column.width ?? ''} ${idx === 0 ? 'rounded-tl-4xl' : ''} 
+                    ${idx === columnNames.length - 1 ? 'rounded-tr-4xl' : ''}
+                    text-[16px] ${inter.className} leading-6 font-semibold tracking-[-0.31px]
                   `}
                 >
                   {column.label}
diff --git a/types/adminDashboard.ts b/types/adminDashboard.ts
index e630dc9..96760e2 100644
--- a/types/adminDashboard.ts
+++ b/types/adminDashboard.ts
@@ -9,7 +9,7 @@ export type ApplicationType = {
   applicantName: string;
   type: 'Individual' | 'Organization';
   dateReceived: string | Date;
-  status: 'toReview' | 'rejected' | 'paymentPending' | 'complete';
+  status: 'toReview' | 'rejected' | 'paymentPending' | 'active' | 'expired';
   reviewer1: string;
   reviewer2: string;
 };
@@ -21,4 +21,8 @@ export type AdminDashboardTablePropTypes = {
     label: string;
     value: string;
   };
+  pagination?: {
+    itemCount: number;
+    numberPerPage: number;
+  };
 };

From 74faed48061af10c8b4f614ce8b09df28e8e6065 Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sun, 1 Feb 2026 15:12:14 -0500
Subject: [PATCH 15/17] fix: filtering and pagination order

---
 components/AdminDashboardTable.tsx | 65 ++++++++++++++++--------------
 1 file changed, 35 insertions(+), 30 deletions(-)

diff --git a/components/AdminDashboardTable.tsx b/components/AdminDashboardTable.tsx
index 8845460..3f923c4 100644
--- a/components/AdminDashboardTable.tsx
+++ b/components/AdminDashboardTable.tsx
@@ -12,14 +12,22 @@ export default function AdminDashboardTable({
 }: AdminDashboardTablePropTypes) {
   const [currentPage, setCurrentPage] = useState(1);
 
+  // TODO: This should be handled in the backend
+  const filteredApplications = useMemo(() => {
+    return applications.filter((app) =>
+      currentTab.value !== 'all' ? app.status === currentTab.value : true,
+    );
+  }, [applications, currentTab]);
+
+  // TODO: This should be handled in the backend
   const paginatedApplications = useMemo(() => {
     if (!pagination) {
-      return applications;
+      return filteredApplications;
     }
     const startIndex = (currentPage - 1) * pagination.numberPerPage;
     const endIndex = startIndex + pagination.numberPerPage;
-    return applications.slice(startIndex, endIndex);
-  }, [applications, currentPage, pagination]);
+    return filteredApplications.slice(startIndex, endIndex);
+  }, [filteredApplications, currentPage, pagination]);
 
   return (
     <Table
@@ -30,44 +38,41 @@ export default function AdminDashboardTable({
       pagination={
         pagination
           ? {
-              itemCount: pagination.itemCount,
+              itemCount: filteredApplications.length,
               numberPerPage: pagination.numberPerPage,
-              usePagination: pagination.itemCount > pagination.numberPerPage,
+              usePagination:
+                filteredApplications.length > pagination.numberPerPage,
             }
           : undefined
       }
       onPageChange={setCurrentPage}
     >
-      {paginatedApplications
-        .filter((app) =>
-          currentTab.value !== 'all' ? app.status === currentTab.value : true,
-        )
-        .map((app) => (
-          <tr
-            key={app.id}
-            className="bg-[#F5F4F2] not-last:border-b not-last:border-[#BAB7B2] leading-6 tracking-[-0.31px] text-[16px]"
-          >
-            <td className="p-6 font-bold">{app.applicantName}</td>
+      {paginatedApplications.map((app) => (
+        <tr
+          key={app.id}
+          className="bg-[#F5F4F2] not-last:border-b not-last:border-[#BAB7B2] leading-6 tracking-[-0.31px] text-[16px]"
+        >
+          <td className="p-6 font-bold">{app.applicantName}</td>
 
-            <td className="p-6 font-normal">{app.type}</td>
+          <td className="p-6 font-normal">{app.type}</td>
 
-            <td className="p-6 font-normal">
-              {formatDateWithOrdinal(app.dateReceived)}
-            </td>
+          <td className="p-6 font-normal">
+            {formatDateWithOrdinal(app.dateReceived)}
+          </td>
 
-            <td className="p-6 font-normal">
-              <StatusChip theme={app.status} />
-            </td>
+          <td className="p-6 font-normal">
+            <StatusChip theme={app.status} />
+          </td>
 
-            <td className="p-6 font-normal">
-              {app.reviewer1 === '' ? '-' : app.reviewer1}
-            </td>
+          <td className="p-6 font-normal">
+            {app.reviewer1 === '' ? '-' : app.reviewer1}
+          </td>
 
-            <td className="p-6 font-normal">
-              {app.reviewer2 === '' ? '-' : app.reviewer2}
-            </td>
-          </tr>
-        ))}
+          <td className="p-6 font-normal">
+            {app.reviewer2 === '' ? '-' : app.reviewer2}
+          </td>
+        </tr>
+      ))}
     </Table>
   );
 }

From 9d1c85df10b224838e1f97a5956b65bc7600668f Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sun, 1 Feb 2026 15:50:47 -0500
Subject: [PATCH 16/17] feat: applications on mobile view

---
 app/admin/page.tsx                       | 31 ++++++---
 components/AdminDashboardMobileTable.tsx | 89 ++++++++++++++++++++++++
 components/Pagination.tsx                |  2 +-
 types/adminDashboard.ts                  | 12 ++++
 4 files changed, 124 insertions(+), 10 deletions(-)
 create mode 100644 components/AdminDashboardMobileTable.tsx

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index df04c9b..70acaf3 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -8,6 +8,7 @@ import Tabs from '@/components/Tabs';
 import AdminSearchBar from '@/components/AdminSearchBar';
 import { ADMIN_DASHBOARD_MOCK, ADMIN_DASHBOARD_CONST } from './const';
 import AdminDashboardTable from '@/components/AdminDashboardTable';
+import AdminDashboardMobileTable from '@/components/AdminDashboardMobileTable';
 
 export default function AdminDashboard() {
   const [currentTab, setCurrentTab] = useState(ADMIN_DASHBOARD_CONST.TABS[0]);
@@ -44,15 +45,27 @@ export default function AdminDashboard() {
       </div>
       <div className="px-4 md:px-8">
         <AdminSearchBar value={searchQuery} onChange={setSearchQuery} />
-        <AdminDashboardTable
-          columns={ADMIN_DASHBOARD_CONST.TABLE_COLUMNS}
-          applications={ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK}
-          currentTab={currentTab}
-          pagination={{
-            itemCount: ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK.length,
-            numberPerPage: 5,
-          }}
-        />
+        <div className="block md:hidden">
+          <AdminDashboardMobileTable
+            applications={ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK}
+            currentTab={currentTab}
+            pagination={{
+              itemCount: ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK.length,
+              numberPerPage: 5,
+            }}
+          />
+        </div>
+        <div className="hidden md:block">
+          <AdminDashboardTable
+            columns={ADMIN_DASHBOARD_CONST.TABLE_COLUMNS}
+            applications={ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK}
+            currentTab={currentTab}
+            pagination={{
+              itemCount: ADMIN_DASHBOARD_MOCK.APPLICATIONS_MOCK.length,
+              numberPerPage: 5,
+            }}
+          />
+        </div>
       </div>
     </>
   );
diff --git a/components/AdminDashboardMobileTable.tsx b/components/AdminDashboardMobileTable.tsx
new file mode 100644
index 0000000..5821ff2
--- /dev/null
+++ b/components/AdminDashboardMobileTable.tsx
@@ -0,0 +1,89 @@
+import Table from './Table';
+import { formatDateWithOrdinal } from '@/lib/utils';
+import StatusChip from './StatusChip';
+import { AdminDashboardMobileTablePropTypes } from '@/types/adminDashboard';
+import { useState, useMemo } from 'react';
+import { Pagination } from './Pagination';
+
+export default function AdminDashboardMobileTable({
+  applications,
+  currentTab,
+  pagination,
+}: AdminDashboardMobileTablePropTypes) {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  // TODO: This should be handled in the backend
+  const filteredApplications = useMemo(() => {
+    return applications.filter((app) =>
+      currentTab.value !== 'all' ? app.status === currentTab.value : true,
+    );
+  }, [applications, currentTab]);
+
+  // TODO: This should be handled in the backend
+  const paginatedApplications = useMemo(() => {
+    if (!pagination) {
+      return filteredApplications;
+    }
+    const startIndex = (currentPage - 1) * pagination.numberPerPage;
+    const endIndex = startIndex + pagination.numberPerPage;
+    return filteredApplications.slice(startIndex, endIndex);
+  }, [filteredApplications, currentPage, pagination]);
+
+  return (
+    <>
+      <div className="flex flex-col mt-5.5 gap-y-4">
+        {paginatedApplications.map((app) => (
+          <div
+            key={app.id}
+            className="rounded-3xl border-2 border-[#BAB7B2] bg-[#F5F4F2] p-4.5"
+          >
+            <div className="flex justify-between">
+              <div className="font-bold text-[18px]">{app.applicantName}</div>
+              <div className="font-medium">
+                <StatusChip theme={app.status} />
+              </div>
+            </div>
+            <div className="flex text-[14px] leading-5 mt-3">
+              <div className="w-37.5 mr-3">
+                <p className="text-[#74654C] font-medium ">Type</p>
+                <p className="font-normal">{app.type}</p>
+              </div>
+              <div className="w-37.5">
+                <p className="text-[#74654C] font-medium">Date Received</p>
+                <p className="font-normal">
+                  {formatDateWithOrdinal(app.dateReceived)}
+                </p>
+              </div>
+            </div>
+            <div className="border-t border-[#BAB7B2] mt-3 flex text-[14px] leading-5 ">
+              <div className="w-37.5 mr-3">
+                <p className="text-[#74654C] font-medium pt-3">Reviewer 1</p>
+                <p className="font-normal">
+                  {app.reviewer1 === '' ? '-' : app.reviewer1}
+                </p>
+              </div>
+              <div className="w-37.5">
+                <p className="text-[#74654C] font-medium pt-3">Reviewer 2</p>
+                <p className="font-normal">
+                  {app.reviewer2 === '' ? '-' : app.reviewer2}
+                </p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {pagination && (
+        <Pagination
+          activePage={currentPage}
+          itemCount={filteredApplications.length}
+          numberItemsPerPage={pagination.numberPerPage}
+          onPageChange={handlePageChange}
+        />
+      )}
+    </>
+  );
+}
diff --git a/components/Pagination.tsx b/components/Pagination.tsx
index ac0d06c..46134e9 100644
--- a/components/Pagination.tsx
+++ b/components/Pagination.tsx
@@ -63,7 +63,7 @@ export const Pagination = ({
   if (hook.pageCount <= 1) return null;
 
   return (
-    <div className="flex justify-center items-center py-6">
+    <div className="flex flex-wrap justify-center items-center py-6">
       <div className="flex items-center gap-1">
         <Button
           name="paginationPage"
diff --git a/types/adminDashboard.ts b/types/adminDashboard.ts
index 96760e2..824fac7 100644
--- a/types/adminDashboard.ts
+++ b/types/adminDashboard.ts
@@ -26,3 +26,15 @@ export type AdminDashboardTablePropTypes = {
     numberPerPage: number;
   };
 };
+
+export type AdminDashboardMobileTablePropTypes = {
+  applications: ApplicationType[];
+  currentTab: {
+    label: string;
+    value: string;
+  };
+  pagination?: {
+    itemCount: number;
+    numberPerPage: number;
+  };
+};

From 649410c9c9b189fd55e71eccc0a33673ad0870cc Mon Sep 17 00:00:00 2001
From: Poorvi <poorvi.b26@gmail.com>
Date: Sun, 1 Feb 2026 17:32:29 -0500
Subject: [PATCH 17/17] style: add hover effects on button and tabs

---
 app/admin/page.tsx    | 2 +-
 components/Button.tsx | 2 +-
 components/Tabs.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 70acaf3..e44f275 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -43,7 +43,7 @@ export default function AdminDashboard() {
           <StatCard key={card.label} label={card.label} value={card.value} />
         ))}
       </div>
-      <div className="px-4 md:px-8">
+      <div className="px-4 md:px-8 mb-20">
         <AdminSearchBar value={searchQuery} onChange={setSearchQuery} />
         <div className="block md:hidden">
           <AdminDashboardMobileTable
diff --git a/components/Button.tsx b/components/Button.tsx
index a31be09..ab1287f 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -27,7 +27,7 @@ export const Button = ({
       name={name}
       value={value}
       disabled={disabled}
-      className={`${additionalClasses?.button.join('')} flex items-center justify-center rounded-xl transition-all px-4.5 py-2.5 border-2 border-[#BAB7B2] cursor-pointer ${isActive ? 'bg-[#5EB42D] text-[#FFFDFA] border-transparent' : ''} disabled:opacity-50  font-semibold text-[16px]`}
+      className={`${additionalClasses?.button.join('')} flex items-center justify-center rounded-xl transition-all px-4.5 py-2.5 border-2 border-[#BAB7B2] cursor-pointer ${isActive ? 'bg-[#5EB42D] text-[#FFFDFA] border-transparent' : ''} disabled:opacity-50 disabled:cursor-not-allowed font-semibold text-[16px] hover:bg-[#2B8100] hover:text-[#FFFDFA] hover:border-transparent`}
     >
       {children}
     </button>
diff --git a/components/Tabs.tsx b/components/Tabs.tsx
index bf4f82e..19450cd 100644
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -34,7 +34,7 @@ export default function Tabs({
             key={tab.value}
             onClick={() => setCurrentTab(tab)}
             className={`
-							cursor-pointer font-semibold text-[14px] md:text-[16px] px-4.25 md:px-6.75 py-3.25 md:py-3.5 rounded-2xl border-2 border-[#BAB7B2] text-nowrap leading-5
+							cursor-pointer font-semibold text-[14px] md:text-[16px] px-4.25 md:px-6.75 py-3.25 md:py-3.5 rounded-2xl border-2 border-[#BAB7B2] text-nowrap leading-5 hover:bg-[#2B8100] hover:text-[#FFFDFA] hover:border-transparent transition-all
 							${isActive ? 'bg-[#5EB42D] border-transparent text-[#FFFDFA] shadow-[0px_2px_4px_-2px_#0000001A,0px_4px_6px_-1px_#0000001A]' : ''}
 						`}
           >