Added ability to update your own status if you have not selected anyone

package.json

@@ -15,6 +15,7 @@
     "go": "git pull && next build && next start"
   },
   "dependencies": {
+    "@radix-ui/react-progress": "^1.1.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@radix-ui/react-progress':
+    specifier: ^1.1.0
+    version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
   '@t3-oss/env-nextjs':
     specifier: ^0.10.1
     version: 0.10.1(typescript@5.5.3)(zod@3.23.8)
@@ -1023,6 +1026,87 @@ packages:
       - supports-color
     dev: false
 
+  /@radix-ui/react-compose-refs@1.1.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.3
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-context@1.1.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@types/react': 18.3.3
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-primitive@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-progress@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-slot@1.1.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@types/react': 18.3.3
+      react: 18.3.1
+    dev: false
+
   /@rushstack/eslint-patch@1.10.3:
     resolution: {integrity: sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==}
     dev: true
@@ -1105,7 +1189,6 @@ packages:
     resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
     dependencies:
       '@types/react': 18.3.3
-    dev: true
 
   /@types/react@18.3.3:
     resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}

src/components/ui/Loading.tsx

@@ -0,0 +1,30 @@
+"use client"
+import * as React from "react"
+import { Progress } from "~/components/ui/progress"
+
+interface Loading_Props {
+  interval_amount: number
+}
+
+const Loading: React.FC<Loading_Props> = ({interval_amount}) => {
+  const [progress, setProgress] = React.useState(13);
+    React.useEffect(() => {
+      const interval = setInterval(() => {
+        setProgress((prev) => {
+          if (prev >= 100) {
+            clearInterval(interval);
+            return 0;
+          }
+          return prev + interval_amount;
+        });
+      }, 50);
+      return () => clearInterval(interval);
+
+    })
+    return (
+      <div className="items-center justify-center w-1/3 m-auto pt-20">
+          <Progress value={progress} />
+      </div>
+    );
+}
+export default Loading;

src/components/ui/Table.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { useState, useEffect, useCallback } from 'react';
 import { useSession } from "next-auth/react";
+import Loading from "~/components/ui/Loading";
 
 // Define the Employee interface to match data fetched on the server
 interface Employee {
@@ -94,7 +95,29 @@ export default function Table({ employees }: { employees: Employee[] }) {
   };
 
   const handleSubmit = async () => {
-    if (selectedIds.length > 0 && employeeStatus.trim() !== '') {
+    if (selectedIds.length === 0) {
+      if (!session) {
+        alert("You must be signed in to update status.");
+        return;
+      } else {
+      const cur_user = employees.find(employee => employee.name === session?.user?.name);
+        if (cur_user) {
+          await fetch('/api/v2/update_status', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${process.env.API_KEY}`
+            },
+            body: JSON.stringify({ employeeIds: [cur_user.id], newStatus: employeeStatus }),
+          });
+          // Optionally refresh data on the client-side after update
+          const updatedEmployees = await fetchEmployees();
+          setEmployeeData(updatedEmployees);
+          setSelectedIds([]);
+          setStatus('');
+        }
+      }
+    } else if (employeeStatus.trim() === '') {
       await fetch('/api/v2/update_status', {
         method: 'POST',
         headers: {
@@ -108,31 +131,6 @@ export default function Table({ employees }: { employees: Employee[] }) {
       setEmployeeData(updatedEmployees);
       setSelectedIds([]);
       setStatus('');
-    } else {
-      if (!session) {
-        alert("You must be signed in to update status.");
-      } else {
-        const usersName = session?.user?.name;
-        const employee = employees.find(employee => employee.name === usersName);
-        if (employee) {
-          setSelectedIds([employee.id]);
-          if (selectedIds.length > 0 && employeeStatus.trim() !== '') {
-            await fetch('/api/v2/update_status', {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${process.env.API_KEY}`
-              },
-              body: JSON.stringify({ employeeIds: selectedIds, newStatus: employeeStatus }),
-            });
-            // Optionally refresh data on the client-side after update
-            const updatedEmployees = await fetchEmployees();
-            setEmployeeData(updatedEmployees);
-            setSelectedIds([]);
-            setStatus('');
-          }
-        }
-      }
     }
   };
 
@@ -152,7 +150,7 @@ export default function Table({ employees }: { employees: Employee[] }) {
     const month = date.toLocaleString('default', { month: 'long' });
     return `${time} - ${month} ${day}`;
   };
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <Loading interval_amount={3} />;
   return (
     <div>
       <table className="techtable rounded-2xl w-5/6 m-auto text-center text-[42px]">

src/components/ui/progress.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "~/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }