Add a select all button

README.md

@@ -1,4 +1,4 @@
-<img src="https://git.gibbyb.com/gib/Tech_Tracker_Web/raw/branch/master/public/images/tech_tracker_logo.png" alt="Tech Tracker Logo" width="100"/>
+<img src="https://git.gibbyb.com/gib/Tech_Tracker_Web/raw/branch/master/public/images/tech_tracker_logo.png" alt="Tech Tracker Logo" width="50"/>
 
 # Tech Tracker Website
 

src/app/page.tsx

@@ -10,7 +10,7 @@ export default async function HomePage() {
   } else {
     return (
       <main className="min-h-screen bg-gradient-to-b
-        from-[#111111] to-[#111325]">
+        from-[#111111] to-[#212325]">
         <TT_Header />
         <Techs />
       </main>

src/components/auth/Sign_Out.tsx

@@ -1,13 +1,25 @@
+import Image from "next/image";
+import { auth } from "~/auth"
 import { signOut } from "~/auth"
  
-export default function Sign_Out() {
+export default async function Sign_Out() {
+  const session = await auth();
+  if (!session) {
+    return (<div/>);
+  } else {
+    // Add User profile picture next to Sign Out button
+    const pfp = session?.user?.image ? session.user.image : "/images/default_user_pfp.png";
     return (
-    <form className="w-full"
+      <form className="w-full flex flex-row"
         action={async () => {
           "use server"
           await signOut()
         }}>
+        <Image src={pfp} alt="" width={35} height={35}
+          className="rounded-full border-2 border-white m-auto mr-4"
+        />
         <button type="submit" className="w-full">Sign Out</button>
       </form>
-  )
+    );
   }
+};

src/components/ui/TT_Header.tsx

@@ -5,9 +5,9 @@ export default function TT_Header() {
     <header className="w-full py-5">
       <div className="flex flex-row items-center text-center justify-center p-8">
         <Image src="/images/tech_tracker_logo.png"
-          alt="Tech Tracker Logo" width={80} height={80}
+          alt="Tech Tracker Logo" width={100} height={100}
         />
-        <h1 className="title-text text-6xl font-semibold pl-4">
+        <h1 className="title-text text-8xl font-semibold pl-12">
           Tech Tracker
         </h1>
       </div>

src/components/ui/Table.tsx

@@ -12,6 +12,7 @@ interface Employee {
 
 export default function Table({ employees }: { employees: Employee[] }) {
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
+  const [selectAll, setSelectAll] = useState(false);
   const [status, setStatus] = useState('');
   const [employeeData, setEmployeeData] = useState(employees);
 
@@ -61,6 +62,24 @@ export default function Table({ employees }: { employees: Employee[] }) {
     );
   };
 
+  const handleSelectAllChange = () => {
+    setSelectAll(!selectAll);
+    if (!selectAll) {
+      const allIds = employees.map((employee) => employee.id);
+      setSelectedIds(allIds);
+    } else {
+      setSelectedIds([]);
+    }
+  };
+
+  useEffect(() => {
+    if (selectedIds.length === employeeData.length && employeeData.length > 0) {
+      setSelectAll(true);
+    } else {
+      setSelectAll(false);
+    }
+  }, [selectedIds, employeeData]);
+
   const handleStatusChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setStatus(e.target.value);
   };
@@ -102,10 +121,17 @@ export default function Table({ employees }: { employees: Employee[] }) {
 
   return (
     <div>
-      <table className="techtable w-2/3 min-h-[600px] m-auto text-center border-collapse text-[42px]">
+      <table className="techtable w-5/6 m-auto text-center border-collapse text-[42px]">
-        <thead className="bg-gradient-to-br from-[#212121] to-[#333333]">
+        <thead className="bg-gradient-to-br from-[#232323] to-[#444444]">
           <tr>
-            <th className="tabletitles p-5 border border-[#3e4446] text-[48px]" />
+            <th className="tabletitles p-4 border border-[#3e4446] text-[48px]">
+              <input
+                type="checkbox"
+                className="m-0 cursor-pointer transform scale-150"
+                checked={selectAll}
+                onChange={handleSelectAllChange}
+              />
+            </th>
             <th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Name</th>
             <th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Status</th>
             <th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Updated At</th>
@@ -113,7 +139,8 @@ export default function Table({ employees }: { employees: Employee[] }) {
         </thead>
         <tbody>
           {employeeData.map((employee) => (
-            <tr className="even:bg-gradient-to-bl from-[#222222] to-[#232323]" key={employee.id}>
+            <tr className="even:bg-gradient-to-br from-[#252525] to-[#333333]
+              odd:bg-gradient-to-bl odd:from-[#212127] odd:to-[#232325]" key={employee.id}>
               <td className="p-1 border border-[#3e4446]">
                 <input
                   type="checkbox"
@@ -122,9 +149,9 @@ export default function Table({ employees }: { employees: Employee[] }) {
                   onChange={() => handleCheckboxChange(employee.id)}
                 />
               </td>
-              <td className="p-1 border border-[#3e4446]">{employee.name}</td>
+              <td className="n-column px-1 py-5 border border-[#3e4446]">{employee.name}</td>
-              <td className="s-column p-1 border border-[#3e4446]">{employee.status}</td>
+              <td className="s-column px-1 py-5 border border-[#3e4446]">{employee.status}</td>
-              <td className="ua-column p-1 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
+              <td className="ua-column px-1 py-5 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
             </tr>
           ))}
         </tbody>
@@ -133,7 +160,7 @@ export default function Table({ employees }: { employees: Employee[] }) {
         <input
           type="text"
           placeholder="New Status"
-          className="min-w-[100px] p-3 border-none rounded-xl text-[#111111] md:text-xl"
+          className="min-w-[100px] p-2.5 border-none rounded-xl text-[#111111] md:text-xl"
           value={status}
           onChange={handleStatusChange}
           onKeyDown={handleKeyPress}