Add TV Mode

src/app/layout.tsx

@@ -2,7 +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 { TVModeProvider } from "~/components/context/TVModeContext";
 
 import { type Metadata } from "next";
 export const metadata: Metadata = {
@@ -43,10 +43,9 @@ export default function RootLayout({
           fontSans.variable)}
       >
         <SessionProvider>
-          <div className="absolute top-4 right-6">
-            <Sign_Out />
-          </div>
-          {children}
+          <TVModeProvider>
+            {children}
+          </TVModeProvider>
         </SessionProvider>
       </body>
     </html>

src/app/page.tsx

@@ -3,7 +3,7 @@ import { auth } from "~/auth";
 import No_Session from "~/components/ui/No_Session";
 import Header from "~/components/ui/Header";
 import { getEmployees } from "~/server/functions";
-import TechTable from "~/components/ui/TechTable";
+import Tech_Table from "~/components/ui/Tech_Table";
 
 export default async function HomePage() {
   const session = await auth();
@@ -14,8 +14,8 @@ export default async function HomePage() {
     return (
       <main className="min-h-screen
         bg-gradient-to-b from-[#111111] to-[#212325]">
-        <Header />
-        <TechTable employees={employees}/>
+          <Header />
+          <Tech_Table employees={employees}/>
       </main>
     );
   }

src/components/auth/client/Sign_In.tsx

@@ -0,0 +1,15 @@
+import { signIn } from "next-auth/react";
+import { Button } from "~/components/ui/shadcn/button";
+
+export default function Sign_In() {
+  return (
+    <Button
+      onClick={() => signIn()}
+      className="bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl
+        px-4 py-2 md:py-2.5 font-semibold text-white hover:bg-gradient-to-tr
+        hover:from-[#35363F] hover:to-[#23242F]"
+    >
+      <h1 className="md:text-2xl my-auto font-semibold">Sign In</h1>
+    </Button>
+  );
+};

src/components/auth/client/Sign_Out.tsx

@@ -0,0 +1,30 @@
+import { signOut } from "next-auth/react";
+import { useSession } from "next-auth/react";
+import Image from "next/image";
+import { Button } from "~/components/ui/shadcn/button";
+
+export default function Sign_Out() {
+  const { data: session } = useSession();
+  if (!session) {
+    return <div/>;
+  } else {
+    const pfp = session?.user?.image ? session.user.image : "/images/default_user_pfp.png";
+    return (
+      <div className="flex flex-row">
+        <Image src={pfp} alt="" width={35} height={35}
+          className="rounded-full border-2 border-white m-auto mr-1 md:mr-2
+          max-w-[25px] md:max-w-[35px]"
+        />
+        <Button onClick={() => signOut()}
+          className="w-full p-2 rounded-xl text-sm md:text-lg"
+          //bg-gradient-to-tl from-[#35363F] to=[#24191A]
+          //hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]"
+        >
+          Sign Out
+        </Button>
+      </div>
+    );
+  }
+};
+
+        //<User_Avatar session={session} />

src/components/auth/server/Sign_Out.tsx

@@ -10,7 +10,7 @@ export default async function Sign_Out() {
     // 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 flex flex-row pt-2 pr-0 md:pt-4 md:pr-8"
+      <form className="flex flex-row"
         action={async () => {
           "use server"
           await signOut()

src/components/context/TVModeContext.tsx

@@ -0,0 +1,32 @@
+"use client";
+import React, { createContext, useContext, useState } from 'react';
+import type { ReactNode } from 'react';
+
+interface TVModeContextProps {
+  tvMode: boolean;
+  toggleTVMode: () => void;
+}
+
+const TVModeContext = createContext<TVModeContextProps | undefined>(undefined);
+
+export const TVModeProvider = ({ children }: { children: ReactNode }) => {
+  const [tvMode, setTVMode] = useState(false);
+  
+  const toggleTVMode = () => {
+    setTVMode((prev) => !prev);
+  };
+
+  return (
+    <TVModeContext.Provider value={{ tvMode, toggleTVMode }}>
+      {children}
+    </TVModeContext.Provider>
+  );
+};
+
+export const useTVMode = () => {
+  const context = useContext(TVModeContext);
+  if (!context) {
+    throw new Error('useTVMode must be used within a TVModeProvider');
+  }
+  return context;
+};

src/components/ui/Header.tsx

@@ -1,20 +1,41 @@
+"use client";
 import Image from "next/image";
+import Sign_Out from "~/components/auth/client/Sign_Out";
+import TV_Toggle from "~/components/ui/TV_Toggle";
+import { useTVMode } from "~/components/context/TVModeContext";
 
 export default function Header() {
-  return (
-    <header className="w-full py-2 pt-6 md:py-5">
-      <div className="flex flex-row items-center text-center
-        sm:justify-center ml-4 sm:ml-0 p-4">
-        <Image src="/images/tech_tracker_logo.png"
-          alt="Tech Tracker Logo" width={100} height={100}
-          className="max-w-[40px] md:max-w-[120px]"
-        />
-        <h1 className="title-text text-sm md:text-4xl lg:text-8xl
-          bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7]
-          font-bold pl-2 md:pl-12 text-transparent bg-clip-text">
-          Tech Tracker
-        </h1>
-      </div>
-    </header>
-  );
+  const { tvMode } = useTVMode();
+  if (tvMode) {
+    return (
+        <div className="absolute top-4 right-6">
+          <div className="flex flex-row my-auto items-center pt-2 pr-0 md:pt-4 md:pr-8">
+            < TV_Toggle />
+          </div>
+        </div>
+    );
+  } else {
+    return (
+      <header className="w-full py-2 pt-6 md:py-5">
+        <div className="absolute top-4 right-6">
+          <div className="flex flex-row my-auto items-center pt-2 pr-0 md:pt-4 md:pr-8">
+            < TV_Toggle />
+            < Sign_Out />
+          </div>
+        </div>
+        <div className="flex flex-row items-center text-center
+          sm:justify-center ml-4 sm:ml-0 p-4">
+          <Image src="/images/tech_tracker_logo.png"
+            alt="Tech Tracker Logo" width={100} height={100}
+            className="max-w-[40px] md:max-w-[120px]"
+          />
+          <h1 className="title-text text-sm md:text-4xl lg:text-8xl
+            bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7]
+            font-bold pl-2 md:pl-12 text-transparent bg-clip-text">
+            Tech Tracker
+          </h1>
+        </div>
+      </header>
+    );
+  }
 };

src/components/ui/No_Session.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import Image from "next/image";
-import Sign_In from "~/components/auth/Sign_In";
+import Sign_In from "~/components/auth/server/Sign_In";
 import Header from "~/components/ui/Header";
 
 export default function No_Session() {

src/components/ui/TV_Toggle.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { Switch } from "~/components/ui/shadcn/switch";
+import { useTVMode } from "~/components/context/TVModeContext";
+import { useSession } from "next-auth/react";
+
+export default function TV_Toggle() {
+  const { tvMode, toggleTVMode } = useTVMode();
+  const { data: session } = useSession();
+  if (!session) return <div/>;
+  return (
+    <Switch
+      checked={tvMode}
+      onCheckedChange={toggleTVMode}
+      className="bg-gradient-to-br from-[#595959] to-[#444444]
+        hover:bg-gradient-to-bl hover:from-[#484848] hover:to-[#333333]
+        mx-4 mt-2"
+    />
+  );
+}

src/components/ui/Tech_Table.tsx

@@ -1,7 +1,8 @@
-'use client';
+"use client";
 import { useState, useEffect, useCallback } from 'react';
 import { useSession } from "next-auth/react";
 import Loading from "~/components/ui/Loading";
+import { useTVMode } from "~/components/context/TVModeContext";
 
 // Define the Employee interface to match data fetched on the server
 interface Employee {
@@ -11,8 +12,9 @@ interface Employee {
   updatedAt: Date;
 }
 
-export default function TechTable({ employees }: { employees: Employee[] }) {
+export default function Tech_Table({ employees }: { employees: Employee[] }) {
   const { data: session, status } = useSession();
+  const { tvMode } = useTVMode();
   const [loading, setLoading] = useState(true);
   const [selectedIds, setSelectedIds] = useState<number[]>([]);
   const [selectAll, setSelectAll] = useState(false);
@@ -34,7 +36,7 @@ export default function TechTable({ employees }: { employees: Employee[] }) {
       alert("You must be signed in to update status.");
       return;
     }
-    // If no employee is selected and status is not empty
+    
     if (selectedIds.length === 0 && employeeStatus.trim() !== '') {
       const cur_user = employees.find(employee => employee.name === session.user?.name);
       if (cur_user) {
@@ -57,6 +59,7 @@ export default function TechTable({ employees }: { employees: Employee[] }) {
         body: JSON.stringify({ employeeIds: selectedIds, newStatus: employeeStatus }),
       });
     }
+    
     const updatedEmployees = await fetch_employees();
     setEmployeeData(updatedEmployees);
     setSelectedIds([]);
@@ -88,11 +91,9 @@ export default function TechTable({ employees }: { employees: Employee[] }) {
   const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       await update_status();
-      // if key is i then focus text input
     }
   };
 
-  // Format time for display
   const formatTime = (timestamp: Date) => {
     const date = new Date(timestamp);
     const time = date.toLocaleTimeString('en-US', {
@@ -104,41 +105,37 @@ export default function TechTable({ employees }: { employees: Employee[] }) {
     return `${time} - ${month} ${day}`;
   };
 
-  // Loading bar while we wait for auth
   useEffect(() => {
     if (status !== "loading") {
       setLoading(false);
     }
-    }, [status]);
+  }, [status]);
 
-  // Refresh employee data if needed after state updates
   useEffect(() => {
     setEmployeeData(employees);
   }, [employees]);
 
-  // Fetch employees from the server every 10 seconds
   useEffect(() => {
     const fetchAndUpdateEmployees = async () => {
       const updatedEmployees = await fetch_employees();
       setEmployeeData(updatedEmployees);
     };
-    fetchAndUpdateEmployees()
-    .catch((error) => {
+    
+    fetchAndUpdateEmployees().catch((error) => {
       console.error('Error fetching employees:', error);
     });
+
     const intervalId = setInterval(() => {
       (async () => {
         await fetchAndUpdateEmployees();
-      })()
-      .catch((error) => {
+      })().catch((error) => {
         console.error('Error fetching employees:', error);
       });
-    }, 10000);  // Poll every 10 seconds
+    }, 10000);
     
-    return () => clearInterval(intervalId); // Clear interval on component unmount
+    return () => clearInterval(intervalId);
   }, [fetch_employees]);
 
-  // Handle checkbox changes
   useEffect(() => {
     if (selectedIds.length === employeeData.length && employeeData.length > 0) {
       setSelectAll(true);
@@ -150,10 +147,10 @@ export default function TechTable({ employees }: { employees: Employee[] }) {
   if (loading) return <Loading interval_amount={3} />;
   else {
     return (
-      <div>
-        <table className="techtable rounded-2xl w-5/6 m-auto text-center text-[42px]">
-          <thead className="tabletitles border border-[#3e4446]
-            bg-gradient-to-b from-[#282828] to-[#383838] text-[48px]">
+      <div className={`techtable-wrapper ${tvMode ? 'content-fullscreen' : ''}`}>
+        <table className={`techtable rounded-2xl m-auto text-center text-[42px] ${tvMode ? 'techtable-fullscreen' : 'w-5/6'}`}>
+          <thead className="tabletitles border border-[#3e4446] bg-gradient-to-b
+            from-[#282828] to-[#383838] text-[48px]">
             <tr>
               <th className="py-3 px-4 border border-[#3e4446]">
                 <input
@@ -170,8 +167,9 @@ export default function TechTable({ employees }: { employees: Employee[] }) {
           </thead>
           <tbody>
             {employeeData.map((employee) => (
-              <tr className="even:bg-gradient-to-br from-[#272727] to-[#313131]
-                odd:bg-gradient-to-bl odd:from-[#252525] odd:to-[#212125]"
+              <tr
+                className="even:bg-gradient-to-br from-[#272727] to-[#313131]
+                  odd:bg-gradient-to-bl odd:from-[#252525] odd:to-[#212125]"
                 key={employee.id}
               >
                 <td className="p-1 border border-[#3e4446]">
@@ -195,28 +193,30 @@ export default function TechTable({ employees }: { employees: Employee[] }) {
             ))}
           </tbody>
         </table>
-        <div className="m-auto flex flex-row items-center justify-center py-5">
-          <input
-            autoFocus
-            type="text"
-            placeholder="New Status"
-            className="min-w-[120px] lg:min-w-[400px] bg-[#F9F6EE]
-              py-2 px-3 border-none rounded-xl text-[#111111] lg:text-2xl"
-            value={employeeStatus}
-            onChange={handleStatusChange}
-            onKeyDown={handleKeyDown}
-          />
-          <button
-            type="submit"
-            className="min-w-[100px] lg:min-w-[160px] m-2 p-2 border-none
-              rounded-xl text-center font-semibold lg:text-2xl hover:text-slate-300
-              hover:bg-gradient-to-bl hover:from-[#484848] hover:to-[#333333]
-              bg-gradient-to-br from-[#595959] to-[#444444]"
-            onClick={update_status}
-          >
-            Update
-          </button>
-        </div>
+        {!tvMode && (
+          <div className="m-auto flex flex-row items-center justify-center py-5">
+            <input
+              autoFocus
+              type="text"
+              placeholder="New Status"
+              className="min-w-[120px] lg:min-w-[400px] bg-[#F9F6EE] py-2 px-3
+                border-none rounded-xl text-[#111111] lg:text-2xl"
+              value={employeeStatus}
+              onChange={handleStatusChange}
+              onKeyDown={handleKeyDown}
+            />
+            <button
+              type="submit"
+              className="min-w-[100px] lg:min-w-[160px] m-2 p-2 border-none rounded-xl
+                text-center font-semibold lg:text-2xl hover:text-slate-300
+                hover:bg-gradient-to-bl hover:from-[#484848] hover:to-[#333333]
+                bg-gradient-to-br from-[#595959] to-[#444444]"
+              onClick={update_status}
+            >
+              Update
+            </button>
+          </div>
+        )}
       </div>
     );
   }

src/styles/globals.css

@@ -119,3 +119,14 @@
    font-size:18px;
   }
 }
+
+.content-fullscreen {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.techtable-fullscreen {
+  width: 100%;
+  height: 100%;
+}