almost done

2025-09-08 11:25:11 -05:00
parent f315412b03
commit 1d82c18179
11 changed files with 330 additions and 295 deletions
--- a/convex/statuses.ts
+++ b/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: {
--- a/src/app/(auth)/signin/page.tsx
+++ b/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({
--- a/src/app/(status)/table/layout.tsx
+++ b/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;
--- a/src/app/(status)/table/page.tsx
+++ b/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;
--- a/src/app/page.tsx
+++ b/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);
--- a/src/components/layout/profile/reset-password.tsx
+++ b/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({
--- a/src/components/layout/status/history/index.tsx
+++ b/src/components/layout/status/history/index.tsx
@@ -1,10 +1,10 @@
 'use client';
 import Image from 'next/image';
-import Link from 'next/link';
-import { type Preloaded, usePreloadedQuery, useMutation } from 'convex/react';
+import { useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'convex/react';
 import { api } from '~/convex/_generated/api';
-import { type Id } from '~/convex/_generated/dataModel';
-import { useTVMode } from '@/components/providers';
+import type { Id } from '~/convex/_generated/dataModel';
+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 = ({
-  userId,
-}: StatusHistoryProps) => {
+const PAGE_SIZE = 25;
+
+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>
  );
 };
--- a/src/components/layout/status/list/index.tsx
+++ b/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 && (
-                <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'>
+              <CardContent className='p-2'>
                <div className='flex items-start gap-3'>
-                  <Drawer>
-                    <DrawerTrigger asChild>
-                      <div
-                        data-profile-trigger
-                        className='flex-shrink-0 cursor-pointer
+                  <div className='flex-shrink-0 cursor-pointer
                    hover:opacity-80 transition-opacity'
-                        onClick={() => setSelectedHistoryUserId(u.id)}
                  >
                    <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
-                          data-profile-trigger
-                          className={`font-semibold cursor-pointer
+                        <h3 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
+                        <div className={`pl-2 pr-15 pt-2
                            ${tvMode ? 'text-2xl' : 'text-xl'}
                          `}
                        >
@@ -200,6 +180,8 @@ export const StatusList = ({
                        </div>
                      </div>

+                      <Drawer>
+                        <DrawerTrigger asChild>
                          <div
                            className='flex flex-col items-end px-2 gap-2
                            text-muted-foreground flex-shrink-0'
@@ -235,6 +217,9 @@ export const StatusList = ({
                              </div>
                            )}
                          </div>
+                        </DrawerTrigger>
+                        <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>
--- a/src/components/layout/status/table/index.tsx
+++ b/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:
-      '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: 'mx-auto',
+    on: 'lg:w-11/12 w-full',
+    off: 'w-5/6',
  });
-
  const headerCn = ccn({
    context: tvMode,
-    className: 'w-full',
-    on: 'hidden',
-    off: 'flex mb-3 justify-between items-center',
+    className: 'w-full mb-2 flex justify-between',
+    on: 'mt-25',
+    off: 'mb-2',
  });
-
-  const selectAllIconCn = ccn({
-    context: selectAll,
-    className: 'w-4 h-4',
-    on: 'text-green-500',
-    off: '',
-  });
-
-  const cardContainerCn = ccn({
+  const thCn = ccn({
    context: tvMode,
-    className: 'w-full space-y-2',
-    on: 'text-primary',
-    off: '',
+    className: 'py-4 px-4 border font-semibold ',
+    on: 'lg:text-5xl xl:min-w-[420px]',
+    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'>
-          <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>
+        <div className='flex items-center gap-2'>
          {!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!
+            <div className='flex flex-row gap-2 text-xs'>
+              <p className='text-muted-foreground'>Tired of the old table? </p>
+              <Link
+                href='/'
+                className='italic font-semibold hover:text-primary/80'
+              >
+                Try the new status list!
              </Link>
            </div>
          )}
        </div>
      </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={() => 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>
-      )}
-
+      <table className='w-full text-center rounded-md'>
+        <thead>
+          <tr className='bg-muted'>
            {!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();
-                    }
-                  }}
+              <th className={tCheckboxCn}>
+                <input
+                  type='checkbox'
+                  className={checkBoxCn}
+                  checked={selectAll}
+                  onChange={() => handleSelectAll()}
                />
-                <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 All Status History
-                  </Button>
-                </DrawerTrigger>
-              </Drawer>
-            </div>
-          </div>
-        </Card>
+              </th>
            )}
+            <th className={thCn}>Technician</th>
+            <th className={thCn}>
+              <Drawer>
+                <DrawerTrigger className='hover:text-foreground/60 cursor-pointer'>
+                  Status
+                </DrawerTrigger>
+                <StatusHistory />
+              </Drawer>
+            </th>
+            <th className={thCn}>Updated At</th>
+          </tr>
+        </thead>
+        <tbody>
+
+        </tbody>
+      </table>
    </div>
  );
 };
--- a/src/lib/types.ts
+++ b/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;
--- a/src/lib/utils.ts
+++ b/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;