From bf12031773075bdd948f8edc66d98dcdb830af16 Mon Sep 17 00:00:00 2001
From: gibbyb <gib@gibbyb.com>
Date: Wed, 10 Sep 2025 10:11:46 -0500
Subject: [PATCH] stopping point

---
 bun.lock                                      |   2 +-
 convex/statuses.ts                            |  13 +-
 .../layout/profile/avatar-upload.tsx          |   7 +-
 .../layout/status/list/history/index.tsx      | 146 ++++++
 src/components/layout/status/list/index.tsx   | 471 +++++++++++-------
 src/components/layout/status/table/index.tsx  | 111 ++++-
 6 files changed, 539 insertions(+), 211 deletions(-)
 create mode 100644 src/components/layout/status/list/history/index.tsx

diff --git a/bun.lock b/bun.lock
index d06bada..a4bb167 100644
--- a/bun.lock
+++ b/bun.lock
@@ -33,7 +33,7 @@
         "require-in-the-middle": "^7.5.2",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
-        "typescript-eslint": "^8.42.0",
+        "typescript-eslint": "^8.43.0",
         "vaul": "^1.1.2",
         "zod": "^4.1.5",
       },
diff --git a/convex/statuses.ts b/convex/statuses.ts
index 1dcc3ec..c25e40b 100644
--- a/convex/statuses.ts
+++ b/convex/statuses.ts
@@ -14,6 +14,7 @@ type RWCtx = MutationCtx | QueryCtx;
 type StatusRow = {
   user: {
     id: Id<'users'>;
+    email: string | null;
     name: string | null;
     imageUrl: string | null;
   };
@@ -155,6 +156,8 @@ export const getCurrentForUser = query({
 
 const getName = (u: Doc<'users'>): string | null =>
   'name' in u && typeof u.name === 'string' ? u.name : null;
+const getEmail = (u: Doc<'users'>): string | null =>
+  'email' in u && typeof u.email === 'string' ? u.email : null;
 
 const getImageId = (u: Doc<'users'>): Id<'_storage'> | null => {
   if (!('image' in u)) return null;
@@ -205,6 +208,7 @@ export const getCurrentForAll = query({
             : null;
           updatedByUser = {
             id: updater._id,
+            email: getEmail(updater),
             name: getName(updater),
             imageUrl: updaterImageUrl,
           };
@@ -222,6 +226,7 @@ export const getCurrentForAll = query({
         return {
           user: {
             id: u._id,
+            email: getEmail(u),
             name: getName(u),
             imageUrl: userImageUrl,
           },
@@ -269,6 +274,7 @@ export const listHistory = query({
 
       const display: StatusRow['user'] = {
         id: user._id,
+        email: getEmail(user),
         name: getName(user),
         imageUrl: imgUrl,
       };
@@ -276,13 +282,13 @@ export const listHistory = query({
       return display;
     };
 
-    const page: StatusRow[] = [];
+    const statuses: StatusRow[] = [];
     for (const s of result.page) {
       const owner = await getDisplay(s.userId);
       const updatedBy =
         s.updatedBy !== s.userId ? await getDisplay(s.updatedBy) : null;
 
-      page.push({
+      statuses.push({
         user: owner,
         status: {
           id: s._id,
@@ -292,6 +298,9 @@ export const listHistory = query({
         },
       });
     }
+    const page = statuses.sort(
+      (a, b) => (b.status?.updatedAt ?? 0) - (a.status?.updatedAt ?? 0),
+    );
 
     return {
       page,
diff --git a/src/components/layout/profile/avatar-upload.tsx b/src/components/layout/profile/avatar-upload.tsx
index 96b3d3f..8820163 100644
--- a/src/components/layout/profile/avatar-upload.tsx
+++ b/src/components/layout/profile/avatar-upload.tsx
@@ -24,7 +24,7 @@ import { Loader2, Pencil, Upload, XIcon } from 'lucide-react';
 import { type Id } from '~/convex/_generated/dataModel';
 
 type AvatarUploadProps = {
-  preloadedUser: Preloaded<typeof api.auth.getUser>,
+  preloadedUser: Preloaded<typeof api.auth.getUser>;
 };
 
 const dataUrlToBlob = async (
@@ -94,7 +94,7 @@ export const AvatarUpload = ({ preloadedUser }: AvatarUploadProps) => {
       }
 
       const uploadResponse = (await result.json()) as {
-        storageId: Id<'_storage'>,
+        storageId: Id<'_storage'>;
       };
 
       await updateUserImage({ storageId: uploadResponse.storageId });
@@ -136,7 +136,8 @@ export const AvatarUpload = ({ preloadedUser }: AvatarUploadProps) => {
                 size={24}
               />
             </div>
-            <div className='absolute inset-1 transition-all flex items-end
+            <div
+              className='absolute inset-1 transition-all flex items-end
               justify-end'
             >
               <Pencil
diff --git a/src/components/layout/status/list/history/index.tsx b/src/components/layout/status/list/history/index.tsx
new file mode 100644
index 0000000..2bc96ef
--- /dev/null
+++ b/src/components/layout/status/list/history/index.tsx
@@ -0,0 +1,146 @@
+'use client';
+import { useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'convex/react';
+import { api } from '~/convex/_generated/api';
+import { formatDate, formatTime } from '@/lib/utils';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationNext,
+  PaginationPrevious,
+  ScrollArea,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui';
+
+const PAGE_SIZE = 25;
+export const HistoryTable = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+  // cursor for page N is the continueCursor returned from page N-1
+  const [cursors, setCursors] = useState<(string | null)[]>([null]);
+
+  const args = useMemo(() => {
+    return {
+      paginationOpts: {
+        numItems: PAGE_SIZE,
+        cursor: cursors[pageIndex] ?? null,
+      },
+    };
+  }, [cursors, pageIndex]);
+
+  const data = useQuery(api.statuses.listHistory, args);
+
+  // Track loading
+  const isLoading = data === undefined;
+
+  // When a page loads, cache its "next" cursor if we don't have it yet
+  useEffect(() => {
+    if (!data) return;
+    const nextIndex = pageIndex + 1;
+    setCursors((prev) => {
+      const copy = [...prev];
+      if (copy[nextIndex] === undefined) copy[nextIndex] = data.continueCursor;
+      return copy;
+    });
+  }, [data, pageIndex]);
+
+  const canPrev = pageIndex > 0;
+  const canNext = !!data && data.continueCursor !== null;
+
+  const handlePrev = () => {
+    if (!canPrev) return;
+    setPageIndex((p) => Math.max(0, p - 1));
+  };
+
+  const handleNext = () => {
+    if (!canNext) return;
+    setPageIndex((p) => p + 1);
+  };
+
+  const rows = data?.page ?? [];
+  return (
+    <div className='w-full'>
+      <div className='px-4'>
+        <ScrollArea className='h-96 w-full px-6'>
+          {isLoading ? (
+            <div className='flex justify-center items-center h-32'>
+              <div className='animate-spin rounded-full h-8 w-8 border-b-2 border-primary' />
+            </div>
+          ) : rows.length === 0 ? (
+            <div className='flex justify-center items-center h-32'>
+              <p className='text-muted-foreground'>No history found</p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className='font-semibold'>Name</TableHead>
+                  <TableHead className='font-semibold'>Status</TableHead>
+                  <TableHead className='font-semibold'>Updated By</TableHead>
+                  <TableHead className='font-semibold text-right'>
+                    Date &amp; Time
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {rows.map((r, idx) => (
+                  <TableRow key={`${r.status?.id ?? 'no-status'}-${idx}`}>
+                    <TableCell className='font-medium'>
+                      {r.user.name ?? 'Technician'}
+                    </TableCell>
+                    <TableCell className='max-w-xs'>
+                      <div className='truncate' title={r.status?.message ?? ''}>
+                        {r.status?.message ?? 'No status'}
+                      </div>
+                    </TableCell>
+                    <TableCell className='text-sm text-muted-foreground'>
+                      {r.status?.updatedBy?.name ?? ''}
+                    </TableCell>
+                    <TableCell className='text-right text-sm'>
+                      {r.status
+                        ? `${formatTime(r.status.updatedAt)} · ${formatDate(
+                            r.status.updatedAt,
+                          )}`
+                        : '--:-- · --/--'}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </ScrollArea>
+      </div>
+
+      <Pagination>
+        <PaginationContent>
+          <PaginationPrevious
+            href='#'
+            onClick={(e) => {
+              e.preventDefault();
+              handlePrev();
+            }}
+            aria-disabled={!canPrev}
+            className={!canPrev ? 'pointer-events-none opacity-50' : ''}
+          />
+          <div className='flex items-center gap-2 text-sm text-muted-foreground'>
+            <span>Page</span>
+            <span className='font-bold text-foreground'>{pageIndex + 1}</span>
+          </div>
+          <PaginationNext
+            href='#'
+            onClick={(e) => {
+              e.preventDefault();
+              handleNext();
+            }}
+            aria-disabled={!canNext}
+            className={!canNext ? 'pointer-events-none opacity-50' : ''}
+          />
+        </PaginationContent>
+      </Pagination>
+    </div>
+  );
+};
diff --git a/src/components/layout/status/list/index.tsx b/src/components/layout/status/list/index.tsx
index d1faf44..ed91c1d 100644
--- a/src/components/layout/status/list/index.tsx
+++ b/src/components/layout/status/list/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { type Preloaded, usePreloadedQuery, useMutation } from 'convex/react';
 import { api } from '~/convex/_generated/api';
 import { type Id } from '~/convex/_generated/dataModel';
@@ -14,11 +14,24 @@ import {
   DrawerTrigger,
   Input,
   SubmitButton,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
 } from '@/components/ui';
 import { toast } from 'sonner';
 import { ccn, formatTime, formatDate } from '@/lib/utils';
-import { Clock, Calendar, CheckCircle2 } from 'lucide-react';
+import {
+  Activity,
+  Clock,
+  Calendar,
+  CheckCircle2,
+  History,
+  Users,
+  Zap,
+} from 'lucide-react';
 import { StatusHistory } from '@/components/layout/status';
+import { HistoryTable } from '@/components/layout/status/list/history';
 
 type StatusListProps = {
   preloadedUser: Preloaded<typeof api.auth.getUser>;
@@ -37,10 +50,30 @@ export const StatusList = ({
   const [selectAll, setSelectAll] = useState(false);
   const [statusInput, setStatusInput] = useState('');
   const [updatingStatus, setUpdatingStatus] = useState(false);
+  const [animatingIds, setAnimatingIds] = useState<Set<string>>(new Set());
+  const [previousStatuses, setPreviousStatuses] = useState(statuses);
 
   const bulkCreate = useMutation(api.statuses.bulkCreate);
 
-  const handleSelectUser = (id: Id<'users'>, e: React.MouseEvent) => {
+  useEffect(() => {
+    const newAnimatingIds = new Set<string>();
+    statuses.forEach((curr) => {
+      const previous = previousStatuses.find((p) => p.user.id === curr.user.id);
+      if (previous?.status?.updatedAt !== curr.status?.updatedAt)
+        newAnimatingIds.add(curr.user.id);
+    });
+    if (newAnimatingIds.size > 0) {
+      setAnimatingIds(newAnimatingIds);
+      setTimeout(() => setAnimatingIds(new Set()), 800);
+    }
+    setPreviousStatuses(
+      statuses.sort(
+        (a, b) => (b.status?.updatedAt ?? 0) - (a.status?.updatedAt ?? 0),
+      ),
+    );
+  }, [statuses]);
+
+  const handleSelectUser = (id: Id<'users'>) => {
     setSelectedUserIds((prev) =>
       prev.some((i) => i === id)
         ? prev.filter((prevId) => prevId !== id)
@@ -62,7 +95,7 @@ export const StatusList = ({
         throw new Error('Status must be between 3 & 80 characters');
       if (selectedUserIds.length === 0 && user?.id)
         await bulkCreate({ message, userIds: [user.id] });
-      await bulkCreate({ message, userIds: selectedUserIds });
+      else await bulkCreate({ message, userIds: selectedUserIds });
       toast.success('Status updated.');
       setSelectedUserIds([]);
       setSelectAll(false);
@@ -74,226 +107,278 @@ export const StatusList = ({
     }
   };
 
+  const getStatusAge = (updatedAt: number) => {
+    const diff = Date.now() - updatedAt;
+    const hours = Math.floor(diff / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    if (hours > 0) return `${hours}h ${minutes}m ago`;
+    if (minutes > 0) return `${minutes}m ago`;
+    return 'Just now';
+  };
+
   const containerCn = ccn({
     context: tvMode,
-    className:
-      'flex flex-col mx-auto items-center\
-      sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-1/2 min-w-[450px]',
-    on: 'mt-8',
-    off: 'px-10',
+    className: 'w-full max-w-6xl mx-auto',
+    on: 'p-8',
+    off: 'px-6 py-4',
+  });
+
+  const tabsCn = ccn({
+    context: tvMode,
+    className: 'w-full py-8',
+    on: 'hidden',
+    off: '',
   });
 
   const headerCn = ccn({
     context: tvMode,
-    className: 'w-full',
+    className: 'w-full mb-2',
     on: 'hidden',
-    off: 'flex mb-3 justify-between items-center',
-  });
-
-  const selectAllIconCn = ccn({
-    context: selectAll,
-    className: 'w-4 h-4',
-    on: 'text-green-500',
-    off: '',
-  });
-
-  const cardContainerCn = ccn({
-    context: tvMode,
-    className: 'w-full space-y-2',
-    on: 'text-primary',
-    off: '',
+    off: 'flex justify-end items-center',
   });
 
   return (
     <div className={containerCn}>
-      <div className={headerCn}>
-        <div className='flex items-center gap-4'>
-          <Button
-            onClick={handleSelectAll}
-            variant={'outline'}
-            size={'sm'}
-            className='flex items-center gap2'
-          >
-            <CheckCircle2 className={selectAllIconCn} />
-            <p className={selectAll ? 'font-bold' : 'font-semibold'}>
-              {selectAll ? 'Unselect All' : 'Select All'}
-            </p>
-          </Button>
-          {!tvMode && (
-            <div className='flex items-center gap-2 text-xs'>
-              <span className='text-muted-foreground'>Miss the old table?</span>
-              <Link href='/table' className='font-medium hover:underline'>
-                Find it here!
-              </Link>
+      <Tabs defaultValue='status'>
+        <TabsList className={tabsCn}>
+          <TabsTrigger value='status' className='py-8'>
+            <div className='flex items-center gap-3'>
+              <Activity className='w-6 h-6 text-primary' />
+              <h1 className='text-2xl font-bold'>Team Status</h1>
             </div>
-          )}
-        </div>
-      </div>
+          </TabsTrigger>
+          <TabsTrigger value='history' className='py-8'>
+            <div className='flex items-center gap-3'>
+              <History className='w-6 h-6 text-primary' />
+              <h1 className='text-2xl font-bold'>Status History</h1>
+            </div>
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value='status'>
+          <div className={headerCn}>
+            <div className='flex items-center gap-4'>
+              <div className='flex items-center gap-2 text-muted-foreground'>
+                <Users className='w-4 h-4' />
+                <span>{statuses.length} members</span>
+              </div>
+              <div className='flex items-center gap-2 text-xs'>
+                <Link href='/table' className='font-medium hover:underline'>
+                  Miss the old table?
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div className='space-y-3'>
+            {statuses.map((statusData) => {
+              const { user: u, status: s } = statusData;
+              const isSelected = selectedUserIds.includes(u.id);
+              const isAnimating = animatingIds.has(u.id);
+              const isUpdatedByOther = s?.updatedBy?.id !== u.id;
+              return (
+                <div
+                  key={u.id}
+                  className={`
+                    group relative overflow-hidden rounded-xl border transition-all duration-700 ease-out
+                    ${isAnimating ? 'animate-pulse bg-primary/5 border-primary/30 shadow-xl scale-[1.03] -translate-y-2' : ''}
+                    ${isSelected ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'}
+                    ${tvMode ? 'p-6' : 'p-4'}
+                    ${!tvMode ? 'hover:shadow-md cursor-pointer' : ''}
+                  `}
+                  style={{
+                    transform: isAnimating
+                      ? 'translateY(-8px) scale(1.02)'
+                      : 'translateY(0) scale(1)',
+                    boxShadow: isAnimating ? '0 20px 40px rgba(0,0,0,0.1)' : '',
+                  }}
+                  onClick={!tvMode ? () => handleSelectUser(u.id) : undefined}
+                >
+                  {/* Selection indicator */}
+                  {isSelected && !tvMode && (
+                    <div className='absolute top-3 right-3'>
+                      <CheckCircle2 className='w-5 h-5 text-primary' />
+                    </div>
+                  )}
 
-      <div className={cardContainerCn}>
-        {statuses.map((status) => {
-          const { user: u, status: s } = status;
-          const isSelected = selectedUserIds.includes(u.id);
-          const isUpdatedByOther = !!s?.updatedBy;
-          return (
-            <Card
-              key={u.id}
-              className={`relative transition-all duration-200
-                cursor-pointer hover:shadow-md
-                ${tvMode ? 'p-4' : 'p-3'}
-                ${
-                  isSelected
-                    ? 'ring-2 ring-primary bg-primary/5 shadow-md'
-                    : 'hover:bg-muted/30'
-                }
-              `}
-              onClick={(e) => handleSelectUser(u.id, e)}
-            >
-              <CardContent className='p-2'>
-                <div className='flex items-start gap-3'>
-                  <div
-                    className='flex-shrink-0 cursor-pointer
-                    hover:opacity-80 transition-opacity'
-                  >
-                    <BasedAvatar
-                      src={u.imageUrl}
-                      fullName={u.name ?? 'Technician'}
-                      className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
-                    />
-                  </div>
-                  <div className='flex-1'>
-                    <div className='flex items-start justify-between mb-2'>
-                      <div>
+                  {/* Enhanced animation effect */}
+                  {isAnimating && (
+                    <div className='absolute inset-0 bg-gradient-to-r from-transparent via-primary/10 to-transparent animate-pulse' />
+                  )}
+
+                  <div className='relative flex items-center gap-4'>
+                    {/* Avatar */}
+                    <div className='relative flex-shrink-0'>
+                      <BasedAvatar
+                        src={u.imageUrl}
+                        fullName={u.name ?? 'User'}
+                        className={`
+                          transition-all duration-500 ring-2 ring-transparent
+                          ${tvMode ? 'w-16 h-16' : 'w-12 h-12'}
+                          ${isAnimating ? 'ring-primary/30 ring-4' : ''}
+                        `}
+                      />
+                    </div>
+
+                    {/* Main Content */}
+                    <div className='flex-1 min-w-0'>
+                      <div className='flex items-center gap-3 mb-2'>
                         <h3
-                          className={`font-semibold cursor-pointer
-                            hover:text-primary/80 truncate
-                            ${tvMode ? 'text-3xl' : 'text-2xl'}
+                          className={`
+                            font-semibold truncate
+                            ${tvMode ? 'text-2xl' : 'text-lg'}
                           `}
                         >
-                          {u.name ?? 'Technician'}
+                          {u.name ?? u.email ?? 'User'}
                         </h3>
 
-                        <div
-                          className={`pl-2 pr-15 pt-2
-                            ${tvMode ? 'text-2xl' : 'text-xl'}
-                          `}
-                        >
-                          <p>{s?.message ?? 'No status yet.'}</p>
-                        </div>
+                        {isUpdatedByOther && s?.updatedBy && (
+                          <div className='flex items-center gap-2 text-muted-foreground'>
+                            <span className={tvMode ? 'text-sm' : 'text-xs'}>
+                              via
+                            </span>
+                            <BasedAvatar
+                              src={s.updatedBy.imageUrl}
+                              fullName={s.updatedBy.name ?? 'User'}
+                              className={tvMode ? 'w-5 h-5' : 'w-4 h-4'}
+                            />
+                            <span className={tvMode ? 'text-sm' : 'text-xs'}>
+                              {s.updatedBy.name ??
+                                s.updatedBy.email ??
+                                'another user'}
+                            </span>
+                          </div>
+                        )}
                       </div>
 
+                      <div
+                        className={`
+                          mb-3 leading-relaxed
+                          ${tvMode ? 'text-xl' : 'text-base'}
+                          ${s ? 'text-foreground' : 'text-muted-foreground italic'}
+                        `}
+                      >
+                        {s?.message ?? 'No status yet.'}
+                      </div>
+
+                      {/* Time Info */}
+                      <div className='flex items-center gap-4 text-muted-foreground'>
+                        <div className='flex items-center gap-2'>
+                          <Clock className={tvMode ? 'w-4 h-4' : 'w-3 h-3'} />
+                          <span className={tvMode ? 'text-base' : 'text-sm'}>
+                            {s ? formatTime(s.updatedAt) : '--:--'}
+                          </span>
+                        </div>
+                        <div className='flex items-center gap-2'>
+                          <Calendar
+                            className={tvMode ? 'w-4 h-4' : 'w-3 h-3'}
+                          />
+                          <span className={tvMode ? 'text-base' : 'text-sm'}>
+                            {s ? formatDate(s.updatedAt) : '--/--'}
+                          </span>
+                        </div>
+                        {s && (
+                          <div className='flex items-center gap-2'>
+                            <Activity
+                              className={tvMode ? 'w-4 h-4' : 'w-3 h-3'}
+                            />
+                            <span className={tvMode ? 'text-base' : 'text-sm'}>
+                              {getStatusAge(s.updatedAt)}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* History Drawer */}
+                    {!tvMode && (
                       <Drawer>
                         <DrawerTrigger asChild>
-                          <div
-                            className='flex flex-col items-end px-2 gap-2
-                            text-muted-foreground flex-shrink-0'
+                          <Button
+                            variant='outline'
+                            className={`
+                              md:text-lg
+                              opacity-0 group-hover:opacity-100 transition-opacity
+                            `}
                           >
-                            <div className='flex items-center gap-2'>
-                              <Clock
-                                className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
-                              />
-                              <span className={tvMode ? 'text-2xl' : 'text-xl'}>
-                                {s ? formatTime(s.updatedAt) : '--:--'}
-                              </span>
-                            </div>
-                            <div className='flex items-center gap-2'>
-                              <Calendar
-                                className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
-                              />
-                              <span className={tvMode ? 'text-2xl' : 'text-xl'}>
-                                {s ? formatDate(s.updatedAt) : '--/--'}
-                              </span>
-                            </div>
-
-                            {isUpdatedByOther && s.updatedBy && (
-                              <div className='flex items-center gap-2'>
-                                <BasedAvatar
-                                  src={s.updatedBy.imageUrl}
-                                  fullName={s.updatedBy.name ?? 'User'}
-                                  className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
-                                />
-                                <span
-                                  className={tvMode ? 'text-base' : 'text-sm'}
-                                >
-                                  <div className='flex flex-col'>
-                                    <p>Updated by</p>
-                                    {s.updatedBy.name ?? 'User'}
-                                  </div>
-                                </span>
-                              </div>
-                            )}
-                          </div>
+                            History
+                          </Button>
                         </DrawerTrigger>
                         <StatusHistory user={u} />
                       </Drawer>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          {/* Update Status Section */}
+          {!tvMode && (
+            <Card className='mt-5 border-2 border-dashed border-muted-foreground/20 hover:border-primary/50 transition-colors'>
+              <CardContent className='p-6'>
+                <div className='flex flex-col gap-4'>
+                  <div className='flex items-center gap-3'>
+                    <Zap className='w-5 h-5 text-primary' />
+                    <h3 className='text-lg font-semibold'>Update Status</h3>
+                    {selectedUserIds.length > 0 && (
+                      <span className='px-2 py-1 bg-primary/10 text-primary text-sm rounded-full'>
+                        {selectedUserIds.length} selected
+                      </span>
+                    )}
+                  </div>
+
+                  <div className='flex gap-3'>
+                    <Input
+                      autoFocus
+                      type='text'
+                      placeholder="What's happening?"
+                      className='flex-1 text-lg h-12'
+                      value={statusInput}
+                      disabled={updatingStatus}
+                      onChange={(e) => setStatusInput(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (
+                          e.key === 'Enter' &&
+                          !e.shiftKey &&
+                          !updatingStatus
+                        ) {
+                          e.preventDefault();
+                          void handleUpdateStatus();
+                        }
+                      }}
+                    />
+                    <SubmitButton
+                      onClick={handleUpdateStatus}
+                      disabled={updatingStatus}
+                      className='px-6 h-12'
+                    >
+                      {selectedUserIds.length > 0
+                        ? `Update ${selectedUserIds.length} ${selectedUserIds.length > 1 ? 'users' : 'user'}`
+                        : 'Update Status'}
+                    </SubmitButton>
+                  </div>
+
+                  <div className='flex justify-between items-center'>
+                    <div className='flex gap-2'>
+                      <Button
+                        variant='outline'
+                        size='sm'
+                        onClick={handleSelectAll}
+                      >
+                        {selectAll ? 'Deselect All' : 'Select All'}
+                      </Button>
+                    </div>
+                    <div className='text-sm text-muted-foreground'>
+                      {statusInput.length}/80 characters
                     </div>
                   </div>
                 </div>
               </CardContent>
             </Card>
-          );
-        })}
-      </div>
-
-      {statuses.length === 0 && (
-        <Card className='p-8 text-center'>
-          <p
-            className={`text-muted-foreground ${tvMode ? 'text-2xl' : 'text-lg'}`}
-          >
-            No status updates have been made in the past day.
-          </p>
-        </Card>
-      )}
-
-      {!tvMode && (
-        <Card className='p-6 mt-4 w-full'>
-          <div className='flex flex-col gap-4'>
-            <h3 className='text-lg font-semibold'>Update Status</h3>
-            <div className='flex flex-col gap-4'>
-              <div className='flex gap-4'>
-                <Input
-                  autoFocus
-                  type='text'
-                  placeholder='Enter status update...'
-                  className='flex-1 text-2xl'
-                  value={statusInput}
-                  disabled={updatingStatus}
-                  onChange={(e) => setStatusInput(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' && !e.shiftKey && !updatingStatus) {
-                      e.preventDefault();
-                      void handleUpdateStatus();
-                    }
-                  }}
-                />
-                <SubmitButton
-                  onClick={handleUpdateStatus}
-                  disabled={updatingStatus}
-                  className='px-6'
-                >
-                  {selectedUserIds.length > 0
-                    ? `Update ${selectedUserIds.length}
-                      ${selectedUserIds.length > 1 ? 'users' : 'user'}`
-                    : 'Update Status'}
-                </SubmitButton>
-              </div>
-            </div>
-            <div className='flex justify-center mt-2'>
-              <Drawer>
-                <DrawerTrigger asChild>
-                  <Button
-                    variant='outline'
-                    className={tvMode ? 'text-xl p-6' : ''}
-                  >
-                    View Status History
-                  </Button>
-                </DrawerTrigger>
-                <StatusHistory />
-              </Drawer>
-            </div>
-          </div>
-        </Card>
-      )}
+          )}
+        </TabsContent>
+        <TabsContent value='history'>
+          <HistoryTable />
+        </TabsContent>
+      </Tabs>
     </div>
   );
 };
diff --git a/src/components/layout/status/table/index.tsx b/src/components/layout/status/table/index.tsx
index 36242e3..4c4dfe7 100644
--- a/src/components/layout/status/table/index.tsx
+++ b/src/components/layout/status/table/index.tsx
@@ -89,8 +89,8 @@ export const StatusTable = ({
   const thCn = ccn({
     context: tvMode,
     className: 'py-4 px-4 border font-semibold ',
-    on: 'lg:text-5xl xl:min-w-[420px]',
-    off: 'lg:text-4xl xl:min-w-[320px]',
+    on: 'lg:text-6xl xl:min-w-[420px]',
+    off: 'lg:text-5xl xl:min-w-[320px]',
   });
   const tdCn = ccn({
     context: tvMode,
@@ -174,8 +174,10 @@ export const StatusTable = ({
                       className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
                     />
                     <div>
-                      <p className={`font-semibold ${tvMode ? 'text-5xl':'text-4xl'}`}>
-                        {u.name ?? 'Technician #' + (i+1)}
+                      <p
+                        className={`font-semibold ${tvMode ? 'text-5xl' : 'text-4xl'}`}
+                      >
+                        {u.name ?? 'Technician #' + (i + 1)}
                       </p>
                       {s?.updatedBy && s.updatedBy.id !== u.id && (
                         <div className='flex items-center gap-1 text-muted-foreground'>
@@ -192,19 +194,104 @@ export const StatusTable = ({
                     </div>
                   </div>
                 </td>
-                <Drawer>
-                  <td className={tdCn}>
-
-                  </td>
-                  <td className={tdCn}>
-
-                  </td>
-                </Drawer>
+                <td className={tdCn}>
+                  <Drawer>
+                    <DrawerTrigger>{s?.message}</DrawerTrigger>
+                    <StatusHistory user={u} />
+                  </Drawer>
+                </td>
+                <td className={tdCn}>
+                  <Drawer>
+                    <DrawerTrigger>
+                      <div className='flex w-full'>
+                        <div className='flex flex-col my-auto items-start'>
+                          <div className='flex gap-4 my-1'>
+                            <Clock
+                              className={`${tvMode ? 'lg:w-11 lg:h-11' : 'lg:w-9 lg:h-9'}`}
+                            />
+                            {s ? formatTime(s.updatedAt) : '--:--'}
+                          </div>
+                          <div className='flex gap-4 my-1'>
+                            <Calendar
+                              className={`${tvMode ? 'lg:w-11 lg:h-11' : 'lg:w-9 lg:h-9'}`}
+                            />
+                            {s ? formatDate(s.updatedAt) : '--:--'}
+                          </div>
+                        </div>
+                      </div>
+                    </DrawerTrigger>
+                    <StatusHistory user={u} />
+                  </Drawer>
+                </td>
               </tr>
             );
           })}
         </tbody>
       </table>
+      {statuses.length === 0 && (
+        <div className='p-8 text-center'>
+          <p
+            className={`text-muted-foreground ${tvMode ? 'text-4xl' : 'text-lg'}`}
+          >
+            No status updates yet
+          </p>
+        </div>
+      )}
+      {!tvMode && (
+        <div className='mx-auto flex flex-row items-center justify-center py-5 gap-4'>
+          <Input
+            autoFocus
+            type='text'
+            placeholder='New Status'
+            className={
+              'min-w-[120px] lg:max-w-[400px] py-6 px-3 rounded-xl \
+                border bg-background lg:text-2xl focus:outline-none \
+                focus:ring-2 focus:ring-primary'
+            }
+            value={statusInput}
+            disabled={updatingStatus}
+            onChange={(e) => setStatusInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey && !updatingStatus) {
+                e.preventDefault();
+                void handleUpdateStatus();
+              }
+            }}
+          />
+          <SubmitButton
+            className={
+              'px-8 rounded-xl font-semibold lg:text-2xl \
+              disabled:opacity-50 disabled:cursor-not-allowed \
+              cursor-pointer'
+            }
+            onClick={handleUpdateStatus}
+            disabled={updatingStatus}
+            pendingText='Updating...'
+          >
+            {selectedUserIds.length > 0
+              ? `Update status for ${selectedUserIds.length}
+                ${selectedUserIds.length > 1 ? 'users' : 'user'}`
+              : 'Update status'}
+          </SubmitButton>
+        </div>
+      )}
+
+      {/* Global Status History Drawer */}
+      {!tvMode && (
+        <div className='flex justify-center mt-6'>
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button
+                variant='outline'
+                className={tvMode ? 'text-3xl p-6' : ''}
+              >
+                View All Status History
+              </Button>
+            </DrawerTrigger>
+            <StatusHistory />
+          </Drawer>
+        </div>
+      )}
     </div>
   );
 };