idek a lot

src/app/layout.tsx

@@ -2,6 +2,7 @@ import "~/styles/globals.css";
 import { Inter as FontSans } from "next/font/google";
 import { cn } from "~/lib/utils";
 import { SessionProvider } from "next-auth/react";
+import Sign_Out from "~/components/auth/Sign_Out";
 
 import { type Metadata } from "next";
 export const metadata: Metadata = {
@@ -26,6 +27,9 @@ export default function RootLayout({
           fontSans.variable)}
       >
         <SessionProvider>
+          <div className="absolute top-4 right-6">
+            <Sign_Out />
+          </div>
           {children}
         </SessionProvider>
       </body>

src/app/page.tsx

@@ -1,20 +1,19 @@
 import { auth } from "~/auth";
-import { db } from "~/server/db";
 import No_Session from "~/components/auth/No_Session";
+import TT_Header from "~/components/ui/TT_Header";
+import Techs_Table from "~/components/ui/Techs_Table";
 
 export default async function HomePage() {
   const user = await auth();
-  const employees = await db.query.users.findMany({
-    orderBy: (model, {desc}) => desc(model.id),
-  });
   if (!user) {
     return (
     <No_Session />
   );
   } else {
     return (
-      <main className="min-h-screen bg-gradient-to-b from-[#111111] to-[#111325] text-white">
+      <main className="min-h-screen bg-gradient-to-b from-[#111111] to-[#111325]">
-        <h1 className="text-2xl font-semibold">Welcome!</h1>
+        <TT_Header />
+        <Techs_Table />
       </main>
     );
   }

src/components/auth/Sign_Out.tsx

@@ -0,0 +1,13 @@
+import { signOut } from "~/auth"
+ 
+export default function Sign_Out() {
+  return (
+    <form className="w-full"
+      action={async () => {
+        "use server"
+        await signOut()
+      }}>
+      <button type="submit" className="w-full">Sign Out</button>
+    </form>
+  )
+}

src/components/ui/TT_Header.tsx

@@ -0,0 +1,16 @@
+import Image from "next/image";
+
+export default function TT_Header() {
+  return (
+    <header className="w-full">
+      <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={100} height={100}
+        />
+        <h1 className="text-6xl font-semibold pl-4">
+          Tech Tracker
+        </h1>
+      </div>
+    </header>
+  );
+};

src/components/ui/Techs_Table.tsx

@@ -0,0 +1,48 @@
+import { db } from '~/server/db';
+
+export default async function Techs_Table() {
+
+  const employees = await db.query.users.findMany({
+    orderBy: (model, {desc}) => desc(model.id),
+  });
+
+  const formatTime = (timestamp: Date) => {
+    const date = new Date(timestamp);
+    const time = date.toLocaleTimeString("en-US",
+      {hour: "numeric", minute: "numeric",});
+    const day = date.getDate();
+    const month = date.toLocaleString("default", { month: "long" });
+    return `${time} - ${month} ${day}`;
+  }
+
+  return (
+    <table className="w-5/6 m-auto text-center border-collapse text-[42px]">
+      <thead className="bg-gradient-to-br from-[#212121] to-[#333333]">
+        <tr>
+          <th className="p-5 border border-[#3e4446] text-[48px]"/>
+          <th className="p-2 border border-[#3e4446] text-[48px]">
+            Name
+          </th>
+          <th className="p-2 border border-[#3e4446] text-[48px]">
+            Status
+          </th>
+          <th className="p-2 border border-[#3e4446] text-[48px]">
+            Updated At
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+          {employees.map((employee) => (
+            <tr className="even:bg-gradient-to-bl from-[#222222] to-[#232323]" key={employee.id}>
+              <td className="p-1 border border-[#3e4446]">
+                <input type="checkbox"/>
+              </td>
+              <td className="p-1 border border-[#3e4446]">{employee.name}</td>
+              <td className="p-1 border border-[#3e4446]">{employee.status}</td>
+              <td className="p-1 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
+            </tr>
+          ))}
+      </tbody>
+    </table>
+  );
+};