Merge pull request #517 from TAMUSHPE/web-ui-update

UI Improvement and Bug Fixes
TAMUSHPE · Sep 9, 2024 · e409f1e · e409f1e
2 parents 0e49d1e + 75659c4
commit e409f1e
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 150 deletions.
diff --git a/shpe-app-web/app/(main)/committees/page.tsx b/shpe-app-web/app/(main)/committees/page.tsx
@@ -3,7 +3,6 @@ import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { getPublicUserData, getCommittees } from "@/api/firebaseUtils";
 import { Committee } from "@/types/committees";
-import Header from "@/components/Header";
 import CommitteeCard from "./components/CommitteeCard";
 
 const Committees = () => {
@@ -34,17 +33,17 @@ const Committees = () => {
 
   if (loading) {
     return (
-      <div className="flex flex-col w-full h-screen items-center justify-center bg-white">
+      <div className="flex flex-col w-full items-center justify-center bg-white">
         <object type="image/svg+xml" data="spinner.svg" className="animate-spin -ml-1 mr-3 h-14 w-14 text-white"></object>
       </div>
     );
   }
 
   return (
-    <div className='flex flex-col w-full'>
-
+    <div className='flex flex-col w-full  h-full overflow-auto'>
 
-      <div className="flex flex-wrap text-black pt-20 pl-20 gap-10 pb-10 bg-white">
+
+      <div className="flex flex-wrap text-black gap-10 pb-10 bg-white items-center justify-center mt-20 mb-40">
         {!loading && committees.map((committees) => (
           <CommitteeCard key={committees.name} committee={committees} />
         ))}

diff --git a/shpe-app-web/app/(main)/dashboard/page.tsx b/shpe-app-web/app/(main)/dashboard/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 import { useEffect, useState } from "react";
 import { useRouter } from 'next/navigation';
-import Header from "@/components/Header";
 import { onAuthStateChanged } from "firebase/auth";
 import { auth } from "@/config/firebaseConfig";
 
@@ -25,7 +24,6 @@ const Dashboard = () => {
     if (loading) {
         return (
             <div className="flex w-full h-screen flex-col">
-                <Header title="Dashboard" iconPath="calendar-solid-gray.svg" />
                 <div className="flex w-full h-full items-center justify-center">
                     <object type="image/svg+xml" data="spinner.svg" className="animate-spin -ml-1 mr-3 h-14 w-14 text-white"></object>
                 </div>
@@ -35,7 +33,7 @@ const Dashboard = () => {
 
     return (
         <div className="w-full h-full">
-            
+
         </div>
     );
 };

diff --git a/shpe-app-web/app/(main)/events/page.tsx b/shpe-app-web/app/(main)/events/page.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import Header from '../../components/Header';
 import PendingEvent from './components/PendingEvent';
 import EventCalendar from './components/EventCalendar';
 import { getEvents, getEventLogs } from '@/api/firebaseUtils';
@@ -68,8 +67,8 @@ const Page = () => {
   };
 
   return (
-    <div className="w-full h-full flex flex-col min-w-fit">
-      
+    <div className="w-full flex flex-col min-w-fit h-[91%] overflow-auto">
+
 
       {/* Pending Approval Subheading */}
       <div className="flex flex-row items-center flex-nowrap">
@@ -116,7 +115,7 @@ const Page = () => {
           <img src="plus-icon.svg" className="" />
           Create Event
         </button>
-        <EventCalendar events={events} toggleEventPage={toggle}/>
+        <EventCalendar events={events} toggleEventPage={toggle} />
       </div>
 
       <EventModal event={selectedEvent} isShowing={isShowing} hide={() => toggle()} />

diff --git a/shpe-app-web/app/(main)/layout.tsx b/shpe-app-web/app/(main)/layout.tsx
@@ -5,11 +5,11 @@ import Navbar from '@/components/Navbar';
 const Layout = ({ children }: { children: ReactNode; }) => {
     return (
         <div className='flex bg-white'>
-            
-            
-            <main className='bg-white z-10 h-screen w-screen overflow-auto'>
-            <Navbar />
-            {children}</main>
+
+
+            <main className='bg-white z-10 h-screen w-screen overflow-hidden'>
+                <Navbar />
+                {children}</main>
         </div>
     );
 };

diff --git a/shpe-app-web/app/(main)/membership/page.tsx b/shpe-app-web/app/(main)/membership/page.tsx
@@ -1,7 +1,6 @@
 'use client';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import Header from '@/components/Header';
 import { getMembers, getMembersToVerify } from '@/api/firebaseUtils';
 import { FaSync } from "react-icons/fa";
 import { SHPEEventLog } from '@/types/events';
@@ -196,104 +195,126 @@ const Membership = () => {
   }
 
   return (
-    <div className="w-full h-full flex flex-col">
-      <div className="text-white bg-[#500000] text-center text-2xl flex">
-        <button onClick={() => setTab('members')} className="w-1/2">
-          Offical Members
-        </button>
-        <button onClick={() => setTab('requests')} className="w-1/2">
-          Requests
-        </button>
-        <button onClick={() => setTab('users')} className="w-1/2">
-          All Users
+    <div className="w-full flex flex-col h-[91%] overflow-auto items-center">
+      <div className="w-4/5 flex flex-col mt-6 ">
+        <div className="text-white text-center text-2xl flex mb-4">
+          <button
+            onClick={() => setTab('members')}
+            className={`w-1/3 py-2 transition duration-200 mx-2 rounded-lg ${tab === 'members'
+              ? 'bg-white text-[#500000] font-bold border-2 border-[#500000]'
+              : 'bg-[#500000] hover:bg-[#700000] text-white'
+              }`}
+          >
+            Official Members
+          </button>
+          <button
+            onClick={() => setTab('requests')}
+            className={`w-1/3 py-2 transition duration-200 mx-2 rounded-lg ${tab === 'requests'
+              ? 'bg-white text-[#500000] font-bold border-2 border-[#500000]'
+              : 'bg-[#500000] hover:bg-[#700000] text-white'
+              }`}
+          >
+            Requests
+          </button>
+          <button
+            onClick={() => setTab('users')}
+            className={`w-1/3 py-2 transition duration-200 mx-2 rounded-lg ${tab === 'users'
+              ? 'bg-white text-[#500000] font-bold border-2 border-[#500000]'
+              : 'bg-[#500000] hover:bg-[#700000] text-white'
+              }`}
+          >
+            All Users
+          </button>
+        </div>
+        {/* Display the offical members  */}
+
+        {tab == 'members' && (
+          <table className="text-center">
+            <tr className="bg-gray-700">
+              <th className=" px-4 py-2">Name</th>
+              <th className=" px-4 py-2">Major</th>
+              <th className=" px-4 py-2">Class Year</th>
+              <th className=" px-4 py-2">Role</th>
+              <th className=" px-4 py-2">Email</th>
+            </tr>
+            {members &&
+              members.map((member) => {
+                return (
+                  <tr key={member.publicInfo?.uid} className="bg-gray-300">
+                    <td className="bg-gray-600 px-4 py-2 "> {member.publicInfo?.displayName} </td>
+                    <td className="bg-gray-300 px-4 py-2 "> {member.publicInfo?.major} </td>
+                    <td className="bg-gray-300 px-4 py-2 "> {member.publicInfo?.classYear} </td>
+                    <td className="bg-gray-300 px-4 py-2 "> {getRole(member)} </td>
+                    <td className="bg-gray-300 px-4 py-2 "> {member.private?.privateInfo?.email} </td>
+                  </tr>
+                );
+              })}
+          </table>
+        )}
+
+        {/* flex flex-col items-center w-full content-center */}
+        {tab == 'requests' && (
+          <table className=" text-center">
+            <tr className="bg-gray-700">
+              <th className=" px-4 py-2">Name</th>
+              <th className=" px-4 py-2" colSpan={2}>
+                Links
+              </th>
+              <th className=" px-4 py-2" colSpan={2}>
+                Action
+              </th>
+            </tr>
+            {!loading &&
+              requestsWithDocuments.length > 0 &&
+              requestsWithDocuments.map((member) => {
+                return (
+                  <MemberCard
+                    key={member.uid}
+                    request={member}
+                    onApprove={handleApprove}
+                    onDeny={handleDeny}
+                  ></MemberCard>
+                );
+              })}
+            {!loading && requestsWithDocuments.length === 0 && (
+              <div className="text-center text-2xl text-gray-500">No pending requests</div>
+            )}
+          </table>
+        )}
+        {tab == 'users' && (
+          <table className="text-center">
+            <tr className="bg-gray-700">
+              <th className=" px-4 py-2">Name</th>
+              <th className=" px-4 py-2">Major</th>
+              <th className=" px-4 py-2">Class Year</th>
+              <th className=" px-4 py-2">Role</th>
+              <th className=" px-4 py-2">Email</th>
+            </tr>
+            {students &&
+              students.map((member) => {
+                return (
+                  <tr key={member.publicInfo?.uid} className="bg-gray-300">
+                    <td className="bg-gray-500 px-4 py-2 "> {member.publicInfo?.displayName} </td>
+                    <td className="bg-gray-300 px-4 py-2 "> {member.publicInfo?.major} </td>
+                    <td className="bg-gray-300 px-4 py-2 "> {member.publicInfo?.classYear} </td>
+                    <td className="bg-blue-300 px-4 py-2 "> {getRole(member)} </td>
+                    <td className="bg-gray-300 px-4 py-2 "> {member.private?.privateInfo?.email} </td>
+                  </tr>
+                );
+              })}
+          </table>
+        )}
+
+        <div className='mb-60'></div>
+
+        {/* Reload Button */}
+        <button
+          onClick={handleReload}
+          className="absolute bottom-4 right-4 bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition"
+        >
+          <FaSync />
         </button>
       </div>
-      {/* Display the offical members  */}
-
-      {tab == 'members' && (
-        <table className="text-center">
-          <tr className="bg-gray-700">
-            <th className=" px-4 py-2">Name</th>
-            <th className=" px-4 py-2">Major</th>
-            <th className=" px-4 py-2">Class Year</th>
-            <th className=" px-4 py-2">Role</th>
-            <th className=" px-4 py-2">Email</th>
-          </tr>
-          {members &&
-            members.map((member) => {
-              return (
-                <tr key={member.publicInfo?.uid} className="bg-gray-300">
-                  <td className="bg-gray-600 px-4 py-2 "> {member.publicInfo?.displayName} </td>
-                  <td className="bg-gray-300 px-4 py-2 "> {member.publicInfo?.major} </td>
-                  <td className="bg-gray-300 px-4 py-2 "> {member.publicInfo?.classYear} </td>
-                  <td className="bg-gray-300 px-4 py-2 "> {getRole(member)} </td>
-                  <td className="bg-gray-300 px-4 py-2 "> {member.private?.privateInfo?.email} </td>
-                </tr>
-              );
-            })}
-        </table>
-      )}
-
-      {/* flex flex-col items-center w-full content-center */}
-      {tab == 'requests' && (
-        <table className=" text-center">
-          <tr className="bg-gray-700">
-            <th className=" px-4 py-2">Name</th>
-            <th className=" px-4 py-2" colSpan={2}>
-              Links
-            </th>
-            <th className=" px-4 py-2" colSpan={2}>
-              Action
-            </th>
-          </tr>
-          {!loading &&
-            requestsWithDocuments.length > 0 &&
-            requestsWithDocuments.map((member) => {
-              return (
-                <MemberCard
-                  key={member.uid}
-                  request={member}
-                  onApprove={handleApprove}
-                  onDeny={handleDeny}
-                ></MemberCard>
-              );
-            })}
-          {!loading && requestsWithDocuments.length === 0 && (
-            <div className="text-center text-2xl text-gray-500">No pending requests</div>
-          )}
-        </table>
-      )}
-      {tab == 'users' && (
-        <table className="text-center">
-          <tr className="bg-gray-700">
-            <th className=" px-4 py-2">Name</th>
-            <th className=" px-4 py-2">Major</th>
-            <th className=" px-4 py-2">Class Year</th>
-            <th className=" px-4 py-2">Role</th>
-            <th className=" px-4 py-2">Email</th>
-          </tr>
-          {students &&
-            students.map((member) => {
-              return (
-                <tr key={member.publicInfo?.uid} className="bg-gray-300">
-                  <td className="bg-gray-500 px-4 py-2 "> {member.publicInfo?.displayName} </td>
-                  <td className="bg-gray-300 px-4 py-2 "> {member.publicInfo?.major} </td>
-                  <td className="bg-gray-300 px-4 py-2 "> {member.publicInfo?.classYear} </td>
-                  <td className="bg-blue-300 px-4 py-2 "> {getRole(member)} </td>
-                  <td className="bg-gray-300 px-4 py-2 "> {member.private?.privateInfo?.email} </td>
-                </tr>
-              );
-            })}
-        </table>
-      )}
-
-      {/* Reload Button */}
-      <button
-        onClick={handleReload}
-        className="absolute bottom-4 right-4 bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition"
-      >
-        <FaSync />
-      </button>
     </div>
   );
 };

diff --git a/shpe-app-web/app/(main)/points/page.tsx b/shpe-app-web/app/(main)/points/page.tsx
@@ -456,7 +456,7 @@ const Points = () => {
   }
 
   return (
-    <div className="bg-white h-full overflow-auto w-screen">
+    <div className="flex flex-col bg-white w-screen h-[91%] overflow-auto">
       <div className="m-5">
         <h1 className="text-2xl font-bold text-[#500000]">Main Point Sheets {schoolYear}</h1>
       </div>
@@ -526,12 +526,10 @@ const Points = () => {
             <FaSave color="black" className="mr-2" />
             <p className="text-black text-lg font-bold">Export to Excel</p>
           </button>
-
-
         </div>
       </div>
 
-      <div className="bg-white flex flex-col h-[84%] w-full overflow-x-auto">
+      <div className="bg-white flex flex-col w-full overflow-x-auto">
         <table className="table-fixed text-left">
           <thead className="bg-gray-200">
             <tr className="text-black border-b-2 border-gray-400">

diff --git a/shpe-app-web/app/(main)/tools/page.tsx b/shpe-app-web/app/(main)/tools/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import Header from "@/components/Header";
 import { onAuthStateChanged } from "firebase/auth";
 import { auth } from "@/config/firebaseConfig";
 import { getFunctions, httpsCallable } from "firebase/functions";

diff --git a/shpe-app-web/app/(main)/tools/shirt-tracker/page.tsx b/shpe-app-web/app/(main)/tools/shirt-tracker/page.tsx
@@ -1,7 +1,6 @@
 'use client';
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import Header from '@/components/Header';
 import { onAuthStateChanged } from 'firebase/auth';
 import { db, auth } from '@/config/firebaseConfig';
 import { getMembers, getShirtsToVerify } from '@/api/firebaseUtils';
@@ -141,7 +140,6 @@ const ShirtTracker = () => {
     if (loading) {
         return (
             <div className="flex w-full h-screen flex-col">
-                <Header title="Dashboard" iconPath="calendar-solid-gray.svg" />
                 <div className="flex w-full h-full items-center justify-center">
                     <object type="image/svg+xml" data="spinner.svg" className="animate-spin -ml-1 mr-3 h-14 w-14 text-white"></object>
 
@@ -151,8 +149,8 @@ const ShirtTracker = () => {
     }
 
     return (
-        <div className="flex w-full items-center justify-center">
-            <div className="w-4/5">
+        <div className="w-full flex flex-col h-[91%] overflow-auto items-center">
+            <div className="w-4/5 mt-5">
                 <table className="min-w-full bg-white border rounded shadow">
                     <thead className="bg-gray-200">
                         <tr>
@@ -192,6 +190,9 @@ const ShirtTracker = () => {
                 </table>
             </div>
 
+
+            <div className='mb-60'></div>
+
             {/* Reload Button */}
             <button
                 onClick={handleReload}