almost done

convex/statuses.ts

@@ -9,8 +9,7 @@ import {
 import type { Doc, Id } from './_generated/dataModel';
 import { paginationOptsValidator } from 'convex/server';
 
-// NEW: shared ctx type for helpers
+type RWCtx = MutationCtx | QueryCtx
-type RWCtx = MutationCtx | QueryCtx;
 
 type StatusRow = {
   user: {

src/app/(auth)/signin/page.tsx

@@ -24,7 +24,7 @@ import {
   TabsTrigger,
 } from '@/components/ui';
 import { toast } from 'sonner';
-import { PASSWORD_MIN, PASSWORD_MAX, PASSWORD_REGEX } from '@/lib/utils';
+import { PASSWORD_MIN, PASSWORD_MAX, PASSWORD_REGEX } from '@/lib/types';
 
 const signInFormSchema = z.object({
   email: z.email({

src/app/(status)/table/layout.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from 'next';
+
+export const generateMetadata = (): Metadata => {
+  return {
+    title: 'Status Table',
+  };
+};
+
+const SignInLayout = ({
+  children,
+}: Readonly<{ children: React.ReactNode }>) => {
+  return <div>{children}</div>;
+};
+export default SignInLayout;

src/app/(status)/table/page.tsx

@@ -0,0 +1,18 @@
+'use server';
+import { preloadQuery } from 'convex/nextjs';
+import { api } from '~/convex/_generated/api';
+import { StatusTable } from '@/components/layout/status';
+
+const StatusTablePage = async () => {
+  const preloadedUser = await preloadQuery(api.auth.getUser);
+  const preloadedStatuses = await preloadQuery(api.statuses.getCurrentForAll);
+  return (
+    <main>
+      <StatusTable
+        preloadedUser={preloadedUser}
+        preloadedStatuses={preloadedStatuses}
+      />
+    </main>
+  );
+};
+export default StatusTablePage;

src/app/page.tsx

@@ -2,9 +2,6 @@
 import { preloadQuery } from 'convex/nextjs';
 import { api } from '~/convex/_generated/api';
 import { StatusList } from '@/components/layout/status/list';
-import { useConvexAuth, useMutation, useQuery } from 'convex/react';
-import Link from 'next/link';
-import { useAuthActions } from '@convex-dev/auth/react';
 
 const Home = async () => {
   const preloadedUser = await preloadQuery(api.auth.getUser);

src/components/layout/profile/reset-password.tsx

@@ -21,7 +21,7 @@ import {
   SubmitButton,
 } from '@/components/ui';
 import { toast } from 'sonner';
-import { PASSWORD_MIN, PASSWORD_MAX, PASSWORD_REGEX } from '@/lib/utils';
+import { PASSWORD_MIN, PASSWORD_MAX, PASSWORD_REGEX } from '@/lib/types';
 
 const formSchema = z
   .object({

src/components/layout/status/history/index.tsx

@@ -1,10 +1,10 @@
 'use client';
 import Image from 'next/image';
-import Link from 'next/link';
+import { useEffect, useMemo, useState } from 'react';
-import { type Preloaded, usePreloadedQuery, useMutation } from 'convex/react';
+import { useQuery } from 'convex/react';
 import { api } from '~/convex/_generated/api';
-import { type Id } from '~/convex/_generated/dataModel';
+import type { Id } from '~/convex/_generated/dataModel';
-import { useTVMode } from '@/components/providers';
+import { formatDate, formatTime } from '@/lib/utils';
 import {
   DrawerClose,
   DrawerContent,
@@ -13,8 +13,6 @@ import {
   DrawerTitle,
   Pagination,
   PaginationContent,
-  PaginationLink,
-  PaginationItem,
   PaginationNext,
   PaginationPrevious,
   ScrollArea,
@@ -25,18 +23,183 @@ import {
   TableHeader,
   TableRow,
   Button,
+  BasedAvatar,
 } from '@/components/ui';
-import { toast } from 'sonner';
 
 type StatusHistoryProps = {
-  userId?: Id<'users'>;
+  user?: typeof api.statuses.getCurrentForAll._returnType[0]['user'],
 };
 
-export const StatusHistory = ({
+const PAGE_SIZE = 25;
-  userId,
+
-}: StatusHistoryProps) => {
+export const StatusHistory = ({ user }: StatusHistoryProps) => {
+  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 {
+      userId: user?.id,
+      paginationOpts: {
+        numItems: PAGE_SIZE,
+        cursor: cursors[pageIndex] ?? null,
+      },
+    };
+  }, [user?.id, 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/>
+    <DrawerContent className='max-w-4xl mx-auto'>
+      <DrawerHeader>
+        <DrawerTitle>
+          <div className='flex flex-row items-center justify-center py-4'>
+            {user ? (
+              <BasedAvatar
+                src={user?.imageUrl}
+                fullName={user?.name}
+                className='w-8 h-8 md:w-12 md:h-12'
+              />
+            ) : (
+                <Image
+                  src='/favicon.png'
+                  alt='Tech Tracker Logo'
+                  width={32}
+                  height={32}
+                className='w-8 h-8 md:w-12 md:h-12'
+                />
+              )}
+            <h1 className='text-lg md:text-2xl lg:text-4xl font-bold pl-2 md:pl-4'>
+              {user ? `${user.name ?? 'Technician'}'s History` : 'All History'}
+            </h1>
+          </div>
+        </DrawerTitle>
+      </DrawerHeader>
+
+      <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>
+
+      <DrawerFooter>
+
+        <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>
+
+        <DrawerClose asChild>
+          <Button
+            variant='outline'
+            className='mt-4'
+          >
+            Close
+          </Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
   );
 };

src/components/layout/status/list/index.tsx

@@ -37,11 +37,10 @@ export const StatusList = ({
   const [selectAll, setSelectAll] = useState(false);
   const [statusInput, setStatusInput] = useState('');
   const [updatingStatus, setUpdatingStatus] = useState(false);
-  const [selectedHistoryUserId, setSelectedHistoryUserId] = useState<Id<'users'>>();
 
   const bulkCreate = useMutation(api.statuses.bulkCreate);
 
-  const toggleUser = (id: Id<'users'>) => {
+  const handleSelectUser = (id: Id<'users'>, e: React.MouseEvent) => {
     setSelectedUserIds((prev) =>
       prev.some((i) => i === id)
         ? prev.filter((prevId) => prevId !== id)
@@ -49,7 +48,7 @@ export const StatusList = ({
     );
   };
 
-  const handleSelectAllClick = () => {
+  const handleSelectAll = () => {
     if (selectAll) setSelectedUserIds([]);
     else setSelectedUserIds(statuses.map((s) => s.user.id));
     setSelectAll(!selectAll);
@@ -110,7 +109,7 @@ export const StatusList = ({
       <div className={headerCn}>
         <div className='flex items-center gap-4'>
           <Button
-            onClick={handleSelectAllClick}
+            onClick={handleSelectAll}
             variant={'outline'}
             size={'sm'}
             className='flex items-center gap2'
@@ -148,51 +147,32 @@ export const StatusList = ({
                     : 'hover:bg-muted/30'
                 }
               `}
-              onClick={() => toggleUser(u.id)}
+              onClick={(e) => handleSelectUser(u.id, e)}
             >
-              {isSelected && (
+              <CardContent className='p-2'>
-                <div className='absolute top-2 right-2 text-primary'>
-                  <CheckCircle2 className={tvMode ? 'w-6 h-6' : 'w-5 h-5'} />
-                </div>
-              )}
-              <CardContent className='p-0'>
                 <div className='flex items-start gap-3'>
-                  <Drawer>
+                  <div className='flex-shrink-0 cursor-pointer
-                    <DrawerTrigger asChild>
+                    hover:opacity-80 transition-opacity'
-                      <div
+                  >
-                        data-profile-trigger
+                    <BasedAvatar
-                        className='flex-shrink-0 cursor-pointer
+                      src={u.imageUrl}
-                        hover:opacity-80 transition-opacity'
+                      fullName={u.name ?? 'Technician'}
-                        onClick={() => setSelectedHistoryUserId(u.id)}
+                      className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
-                      >
+                    />
-                        <BasedAvatar
-                          src={u.imageUrl}
-                          fullName={u.name ?? 'Technician'}
-                          className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
-                        />
-                      </div>
-                    </DrawerTrigger>
-                    {selectedHistoryUserId === u.id && (
-                      <StatusHistory userId={u.id} />
-                    )}
-                  </Drawer>
 
+                  </div>
                   <div className='flex-1'>
                     <div className='flex items-start justify-between mb-2'>
                       <div>
-                        <h3
+                        <h3 className={`font-semibold cursor-pointer
-                          data-profile-trigger
-                          className={`font-semibold cursor-pointer
                             hover:text-primary/80 truncate
                             ${tvMode ? 'text-3xl' : 'text-2xl'}
                           `}
-                          // TODO: open history drawer
                         >
                           {u.name ?? 'Technician'}
                         </h3>
 
-                        <div
+                        <div className={`pl-2 pr-15 pt-2
-                          className={`pl-2 pr-15 pt-2
                             ${tvMode ? 'text-2xl' : 'text-xl'}
                           `}
                         >
@@ -200,41 +180,46 @@ export const StatusList = ({
                         </div>
                       </div>
 
-                      <div
+                      <Drawer>
-                        className='flex flex-col items-end px-2 gap-2
+                        <DrawerTrigger asChild>
-                        text-muted-foreground flex-shrink-0'
+                          <div
-                      >
+                            className='flex flex-col items-end px-2 gap-2
-                        <div className='flex items-center gap-2'>
+                            text-muted-foreground flex-shrink-0'
-                          <Clock className={tvMode ? 'w-6 h-6' : 'w-5 h-5'} />
+                          >
-                          <span className={tvMode ? 'text-2xl' : 'text-xl'}>
+                            <div className='flex items-center gap-2'>
-                            {s ? formatTime(s.updatedAt) : '--:--'}
+                              <Clock className={tvMode ? 'w-6 h-6' : 'w-5 h-5'} />
-                          </span>
+                              <span className={tvMode ? 'text-2xl' : 'text-xl'}>
-                        </div>
+                                {s ? formatTime(s.updatedAt) : '--:--'}
-                        <div className='flex items-center gap-2'>
+                              </span>
-                          <Calendar
+                            </div>
-                            className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
+                            <div className='flex items-center gap-2'>
-                          />
+                              <Calendar
-                          <span className={tvMode ? 'text-2xl' : 'text-xl'}>
+                                className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
-                            {s ? formatDate(s.updatedAt) : '--/--'}
+                              />
-                          </span>
+                              <span className={tvMode ? 'text-2xl' : 'text-xl'}>
-                        </div>
+                                {s ? formatDate(s.updatedAt) : '--/--'}
+                              </span>
+                            </div>
 
-                        {isUpdatedByOther && s.updatedBy && (
+                            {isUpdatedByOther && s.updatedBy && (
-                          <div className='flex items-center gap-2'>
+                              <div className='flex items-center gap-2'>
-                            <BasedAvatar
+                                <BasedAvatar
-                              src={s.updatedBy.imageUrl}
+                                  src={s.updatedBy.imageUrl}
-                              fullName={s.updatedBy.name ?? 'User'}
+                                  fullName={s.updatedBy.name ?? 'User'}
-                              className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
+                                  className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
-                            />
+                                />
-                            <span className={tvMode ? 'text-base' : 'text-sm'}>
+                                <span className={tvMode ? 'text-base' : 'text-sm'}>
-                              <div className='flex flex-col'>
+                                  <div className='flex flex-col'>
-                                <p>Updated by</p>
+                                    <p>Updated by</p>
-                                {s.updatedBy.name ?? 'User'}
+                                    {s.updatedBy.name ?? 'User'}
+                                  </div>
+                                </span>
                               </div>
-                            </span>
+                            )}
                           </div>
-                        )}
+                        </DrawerTrigger>
-                      </div>
+                        <StatusHistory user={u} />
+                      </Drawer>
                     </div>
                   </div>
                 </div>
@@ -281,7 +266,11 @@ export const StatusList = ({
                   className='px-6'
                 >
                   {selectedUserIds.length > 0
-                    ? `Update ${selectedUserIds.length} ${selectedUserIds.length > 1 ? 'users' : 'user'}`
+                    ? `Update ${selectedUserIds.length}
+                      ${selectedUserIds.length > 1
+                        ? 'users'
+                        : 'user'
+                      }`
                     : 'Update Status'}
                 </SubmitButton>
               </div>
@@ -293,9 +282,10 @@ export const StatusList = ({
                     variant='outline'
                     className={tvMode ? 'text-xl p-6' : ''}
                   >
-                    View All Status History
+                    View Status History
                   </Button>
                 </DrawerTrigger>
+                <StatusHistory />
               </Drawer>
             </div>
           </div>

src/components/layout/status/table/index.tsx

@@ -18,6 +18,7 @@ import {
 import { toast } from 'sonner';
 import { ccn, formatTime, formatDate } from '@/lib/utils';
 import { Clock, Calendar, CheckCircle2 } from 'lucide-react';
+import { StatusHistory } from '@/components/layout/status';
 
 type StatusTableProps = {
   preloadedUser: Preloaded<typeof api.auth.getUser>;
@@ -39,7 +40,7 @@ export const StatusTable = ({
 
   const bulkCreate = useMutation(api.statuses.bulkCreate);
 
-  const toggleUser = (id: Id<'users'>) => {
+  const handleSelectUser = (id: Id<'users'>, e: React.MouseEvent) => {
     setSelectedUserIds((prev) =>
       prev.some((i) => i === id)
         ? prev.filter((prevId) => prevId !== id)
@@ -47,7 +48,7 @@ export const StatusTable = ({
     );
   };
 
-  const handleSelectAllClick = () => {
+  const handleSelectAll = () => {
     if (selectAll) setSelectedUserIds([]);
     else setSelectedUserIds(statuses.map((s) => s.user.id));
     setSelectAll(!selectAll);
@@ -61,7 +62,6 @@ export const StatusTable = ({
         throw new Error('Status must be between 3 & 80 characters');
       if (selectedUserIds.length === 0 && user?.id)
         await bulkCreate({ message, userIds: [user.id] });
-      else throw new Error("Hmm.. this shouldn't happen");
       await bulkCreate({ message, userIds: selectedUserIds });
       toast.success('Status updated.');
       setSelectedUserIds([]);
@@ -76,224 +76,77 @@ export const StatusTable = ({
 
   const containerCn = ccn({
     context: tvMode,
-    className:
+    className: 'mx-auto',
-      'flex flex-col mx-auto items-center\
+    on: 'lg:w-11/12 w-full',
-      sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-1/2 min-w-[450px]',
+    off: 'w-5/6',
-    on: 'mt-8',
-    off: 'px-10',
   });
-
   const headerCn = ccn({
     context: tvMode,
-    className: 'w-full',
+    className: 'w-full mb-2 flex justify-between',
-    on: 'hidden',
+    on: 'mt-25',
-    off: 'flex mb-3 justify-between items-center',
+    off: 'mb-2',
   });
-
+  const thCn = ccn({
-  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',
+    className: 'py-4 px-4 border font-semibold ',
-    on: 'text-primary',
+    on: 'lg:text-5xl xl:min-w-[420px]',
-    off: '',
+    off: 'lg:text-4xl xl:min-w-[320px]',
   });
+  const tdCn = ccn({
+    context: tvMode,
+    className: 'py-2 px-2 border',
+    on: 'lg:text-4xl',
+    off: 'lg:text-3xl',
+  });
+  const tCheckboxCn = `py-3 px-4 border`;
+  const checkBoxCn = `lg:scale-200 cursor-pointer`;
 
   return (
     <div className={containerCn}>
       <div className={headerCn}>
-        <div className='flex items-center gap-4'>
+        <div className='flex items-center gap-2'>
-          <Button
-            onClick={handleSelectAllClick}
-            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'>
+            <div className='flex flex-row gap-2 text-xs'>
-              <span className='text-muted-foreground'>Miss the old table?</span>
+              <p className='text-muted-foreground'>Tired of the old table? </p>
-              <Link href='/table' className='font-medium hover:underline'>
+              <Link
-                Find it here!
+                href='/'
+                className='italic font-semibold hover:text-primary/80'
+              >
+                Try the new status list!
               </Link>
             </div>
           )}
         </div>
       </div>
-
+      <table className='w-full text-center rounded-md'>
-      <div className={cardContainerCn}>
+        <thead>
-        {statuses.map((status) => {
+          <tr className='bg-muted'>
-          const { user: u, status: s } = status;
+            {!tvMode && (
-          const isSelected = selectedUserIds.includes(u.id);
+              <th className={tCheckboxCn}>
-          const isUpdatedByOther = !!s?.updatedBy;
+                <input
-          return (
+                  type='checkbox'
-            <Card
+                  className={checkBoxCn}
-              key={u.id}
+                  checked={selectAll}
-              className={`relative transition-all duration-200
+                  onChange={() => handleSelectAll()}
-                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={() => toggleUser(u.id)}
-            >
-              {isSelected && (
-                <div className='absolute top-2 right-2 text-primary'>
-                  <CheckCircle2 className={tvMode ? 'w-6 h-6' : 'w-5 h-5'} />
-                </div>
-              )}
-              <CardContent className='p-0'>
-                <div className='flex items-start gap-3'>
-                  <div
-                    data-profile-trigger
-                    className='flex-shrink-0 cursor-pointer
-                      hover:opacity-80 transition-opacity'
-                    // TODO: open history drawer
-                  >
-                    <BasedAvatar
-                      // Swap to a URL once you resolve storage URLs
-                      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>
-                        <h3
-                          data-profile-trigger
-                          className={`font-semibold cursor-pointer
-                            hover:text-primary/80 truncate
-                            ${tvMode ? 'text-3xl' : 'text-2xl'}
-                          `}
-                          // TODO: open history drawer
-                        >
-                          {u.name ?? 'Technician'}
-                        </h3>
-
-                        <div
-                          className={`pl-2 pr-15 pt-2
-                            ${tvMode ? 'text-2xl' : 'text-xl'}
-                          `}
-                        >
-                          <p>{s?.message ?? 'No status yet.'}</p>
-                        </div>
-                      </div>
-
-                      <div
-                        className='flex flex-col items-end px-2 gap-2
-                        text-muted-foreground flex-shrink-0'
-                      >
-                        <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>
-                    </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
+              </th>
-                  onClick={handleUpdateStatus}
+            )}
-                  disabled={updatingStatus}
+            <th className={thCn}>Technician</th>
-                  className='px-6'
+            <th className={thCn}>
-                >
-                  {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>
+                <DrawerTrigger className='hover:text-foreground/60 cursor-pointer'>
-                  <Button
+                  Status
-                    variant='outline'
-                    className={tvMode ? 'text-xl p-6' : ''}
-                  >
-                    View All Status History
-                  </Button>
                 </DrawerTrigger>
+                <StatusHistory />
               </Drawer>
-            </div>
+            </th>
-          </div>
+            <th className={thCn}>Updated At</th>
-        </Card>
+          </tr>
-      )}
+        </thead>
+        <tbody>
+
+        </tbody>
+      </table>
     </div>
   );
 };

src/lib/types.ts

@@ -0,0 +1,5 @@
+export const PASSWORD_MIN = 8;
+export const PASSWORD_MAX = 100;
+export const PASSWORD_REGEX = /^(?=.{8,100}$)(?!.*\s)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\p{P}\p{S}]).*$/u;
+
+export type Timestamp = number | string | Date;

src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { type Timestamp } from '@/lib/types';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -19,11 +20,6 @@ export const ccn = ({
   return twMerge(className, context ? on : off);
 };
 
-export const PASSWORD_MIN = 8;
-export const PASSWORD_MAX = 100;
-export const PASSWORD_REGEX = /^(?=.{8,100}$)(?!.*\s)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\p{P}\p{S}]).*$/u;
-
-type Timestamp = number | string | Date;
 
 const toDate = (ts: Timestamp): Date | null => {
   if (ts instanceof Date) return isNaN(ts.getTime()) ? null : ts;