Cleanup status object

2025-09-05 11:52:11 -05:00
parent 1a9871ac5d
commit 7cfc11d30c
11 changed files with 700 additions and 38 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -11,6 +11,7 @@
        "@radix-ui/react-dropdown-menu": "^2.1.16",
        "@radix-ui/react-label": "^2.1.7",
        "@radix-ui/react-progress": "^1.1.7",
+        "@radix-ui/react-scroll-area": "^1.2.10",
        "@radix-ui/react-separator": "^1.1.7",
        "@radix-ui/react-slot": "^1.2.3",
        "@radix-ui/react-tabs": "^1.1.13",
@@ -544,6 +545,8 @@

    "@prisma/instrumentation": ["@prisma/instrumentation@6.14.0", "", { "dependencies": { "@opentelemetry/instrumentation": "^0.52.0 || ^0.53.0 || ^0.54.0 || ^0.55.0 || ^0.56.0 || ^0.57.0" }, "peerDependencies": { "@opentelemetry/api": "^1.8" } }, "sha512-Po/Hry5bAeunRDq0yAQueKookW3glpP+qjjvvyOfm6dI2KG5/Y6Bgg3ahyWd7B0u2E+Wf9xRk2rtdda7ySgK1A=="],

+    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
+
    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],

    "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
@@ -586,6 +589,8 @@

    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA=="],

+    "@radix-ui/react-scroll-area": ["@radix-ui/react-scroll-area@1.2.10", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A=="],
+
    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA=="],

    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
--- a/convex/statuses.ts
+++ b/convex/statuses.ts
@@ -16,21 +16,14 @@ type StatusRow = {
  user: {
    id: Id<'users'>;
    name: string | null;
-    imageId: Id<'_storage'> | null;
    imageUrl: string | null;
-  };
-  latest: {
+  },
+  status: {
    id: Id<'statuses'>;
    message: string;
    updatedAt: number;
-    updatedBy: Id<'users'>;
-  } | null;
-  updatedByUser: {
-    id: Id<'users'>;
-    name: string | null;
-    imageId: Id<'_storage'> | null;
-    imageUrl: string | null;
-  } | null;
+    updatedBy: StatusRow['user'] | null;
+  } | null,
 };

 // CHANGED: typed helpers
@@ -154,6 +147,7 @@ export const getCurrentForUser = query({
    return await latestStatusForOwner(ctx, userId);
  },
 });
+
 const getName = (u: Doc<'users'>): string | null =>
  'name' in u && typeof u.name === 'string' ? u.name : null;

@@ -176,17 +170,17 @@ export const getCurrentForAll = query({
    return await Promise.all(
      users.map(async (u) => {
        // Resolve user's current or latest status
-        let status: Doc<'statuses'> | null = null;
+        let curStatus: Doc<'statuses'> | null = null;
        if ('currentStatusId' in u && u.currentStatusId) {
-          status = await ctx.db.get(u.currentStatusId);
+          curStatus = await ctx.db.get(u.currentStatusId);
        }
-        if (!status) {
+        if (!curStatus) {
          const [latest] = await ctx.db
            .query('statuses')
            .withIndex('by_user_updatedAt', (q) => q.eq('userId', u._id))
            .order('desc')
            .take(1);
-          status = latest ?? null;
+          curStatus = latest ?? null;
        }

        // User display + URL
@@ -196,29 +190,27 @@ export const getCurrentForAll = query({
          : null;

        // Updated by (if different) + URL
-        let updatedByUser: StatusRow['updatedByUser'] | null = null;
-        if (status && status.updatedBy !== u._id) {
-          const updater = await ctx.db.get(status.updatedBy);
+        let updatedByUser: StatusRow['user'] | null = null;
+        if (curStatus && curStatus.updatedBy !== u._id) {
+          const updater = await ctx.db.get(curStatus.updatedBy);
          if (!updater) throw new ConvexError('Updater not found.');
          const updaterImageId = getImageId(updater);
          const updaterImageUrl = updaterImageId
            ? await ctx.storage.getUrl(updaterImageId)
            : null;
-
          updatedByUser = {
            id: updater._id,
            name: getName(updater),
-            imageId: updaterImageId,
            imageUrl: updaterImageUrl,
          };
        }

-        const latest: StatusRow['latest'] = status
+        const status: StatusRow['status'] = curStatus
          ? {
-              id: status._id,
-              message: status.message,
-              updatedAt: status.updatedAt,
-              updatedBy: status.updatedBy,
+              id: curStatus._id,
+              message: curStatus.message,
+              updatedAt: curStatus.updatedAt,
+              updatedBy: updatedByUser,
            }
          : null;

@@ -226,11 +218,9 @@ export const getCurrentForAll = query({
          user: {
            id: u._id,
            name: getName(u),
-            imageId: userImageId,
            imageUrl: userImageUrl,
          },
-          latest,
-          updatedByUser,
+          status,
        };
      }),
    );
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-label": "^2.1.7",
    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-scroll-area": "^1.2.10",
    "@radix-ui/react-separator": "^1.1.7",
    "@radix-ui/react-slot": "^1.2.3",
    "@radix-ui/react-tabs": "^1.1.13",
--- a/src/components/layout/status/history/index.tsx
+++ b/src/components/layout/status/history/index.tsx
@@ -0,0 +1,43 @@
+'use client';
+import Image from 'next/image';
+import Link from 'next/link';
+import { type Preloaded, usePreloadedQuery, useMutation } from 'convex/react';
+import { api } from '~/convex/_generated/api';
+import { type Id } from '~/convex/_generated/dataModel';
+import { useTVMode } from '@/components/providers';
+import {
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+  ScrollArea,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Button,
+} from '@/components/ui';
+import { toast } from 'sonner';
+
+type StatusHistoryProps = {
+  preloadedUser: Preloaded<typeof api.auth.getUser>;
+};
+
+export const StatusHistory = ({
+  preloadedUser,
+}: StatusHistoryProps) => {
+  const user = usePreloadedQuery(preloadedUser);
+
+  return (
+
+  );
+};
--- a/src/components/layout/status/index.tsx
+++ b/src/components/layout/status/index.tsx
@@ -0,0 +1,3 @@
+export { StatusHistory } from './history';
+export { StatusList } from './list';
+export { StatusTable } from './table';
--- a/src/components/layout/status/list/index.tsx
+++ b/src/components/layout/status/list/index.tsx
@@ -132,9 +132,9 @@ export const StatusList = ({

      <div className={cardContainerCn}>
        {statuses.map((status) => {
-          const { user: u, latest, updatedByUser } = status;
+          const { user: u, status: s } = status;
          const isSelected = selectedUserIds.includes(u.id);
-          const isUpdatedByOther = !!updatedByUser;
+          const isUpdatedByOther = !!s?.updatedBy;
          return (
            <Card
              key={u.id}
@@ -189,7 +189,7 @@ export const StatusList = ({
                            ${tvMode ? 'text-2xl' : 'text-xl'}
                          `}
                        >
-                          <p>{latest?.message ?? 'No status yet.'}</p>
+                          <p>{s?.message ?? 'No status yet.'}</p>
                        </div>
                      </div>

@@ -200,7 +200,7 @@ export const StatusList = ({
                        <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'}>
-                            {latest ? formatTime(latest.updatedAt) : '--:--'}
+                            {s ? formatTime(s.updatedAt) : '--:--'}
                          </span>
                        </div>
                        <div className='flex items-center gap-2'>
@@ -208,21 +208,21 @@ export const StatusList = ({
                            className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
                          />
                          <span className={tvMode ? 'text-2xl' : 'text-xl'}>
-                            {latest ? formatDate(latest.updatedAt) : '--/--'}
+                            {s ? formatDate(s.updatedAt) : '--/--'}
                          </span>
                        </div>

-                        {isUpdatedByOther && updatedByUser && (
+                        {isUpdatedByOther && s.updatedBy && (
                          <div className='flex items-center gap-2'>
                            <BasedAvatar
-                              src={updatedByUser.imageUrl}
-                              fullName={updatedByUser.name ?? 'User'}
+                              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>
-                                {updatedByUser.name ?? 'User'}
+                                {s.updatedBy.name ?? 'User'}
                              </div>
                            </span>
                          </div>
@@ -264,7 +264,7 @@ export const StatusList = ({
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && !e.shiftKey && !updatingStatus) {
                      e.preventDefault();
-                      handleUpdateStatus();
+                      void handleUpdateStatus();
                    }
                  }}
                />
--- a/src/components/layout/status/table/index.tsx
+++ b/src/components/layout/status/table/index.tsx
@@ -0,0 +1,299 @@
+'use client';
+import Link from 'next/link';
+import { useState } from 'react';
+import { type Preloaded, usePreloadedQuery, useMutation } from 'convex/react';
+import { api } from '~/convex/_generated/api';
+import { type Id } from '~/convex/_generated/dataModel';
+import { useTVMode } from '@/components/providers';
+import {
+  BasedAvatar,
+  Button,
+  Card,
+  CardContent,
+  Drawer,
+  DrawerTrigger,
+  Input,
+  SubmitButton,
+} from '@/components/ui';
+import { toast } from 'sonner';
+import { ccn, formatTime, formatDate } from '@/lib/utils';
+import { Clock, Calendar, CheckCircle2 } from 'lucide-react';
+
+type StatusTableProps = {
+  preloadedUser: Preloaded<typeof api.auth.getUser>;
+  preloadedStatuses: Preloaded<typeof api.statuses.getCurrentForAll>;
+};
+
+export const StatusTable = ({
+  preloadedUser,
+  preloadedStatuses,
+}: StatusTableProps) => {
+  const user = usePreloadedQuery(preloadedUser);
+  const statuses = usePreloadedQuery(preloadedStatuses);
+
+  const { tvMode } = useTVMode();
+  const [selectedUserIds, setSelectedUserIds] = useState<Id<'users'>[]>([]);
+  const [selectAll, setSelectAll] = useState(false);
+  const [statusInput, setStatusInput] = useState('');
+  const [updatingStatus, setUpdatingStatus] = useState(false);
+
+  const bulkCreate = useMutation(api.statuses.bulkCreate);
+
+  const toggleUser = (id: Id<'users'>) => {
+    setSelectedUserIds((prev) =>
+      prev.some((i) => i === id)
+        ? prev.filter((prevId) => prevId !== id)
+        : [...prev, id],
+    );
+  };
+
+  const handleSelectAllClick = () => {
+    if (selectAll) setSelectedUserIds([]);
+    else setSelectedUserIds(statuses.map((s) => s.user.id));
+    setSelectAll(!selectAll);
+  };
+
+  const handleUpdateStatus = async () => {
+    const message = statusInput.trim();
+    setUpdatingStatus(true);
+    try {
+      if (message.length < 3 || message.length > 80)
+        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([]);
+      setSelectAll(false);
+      setStatusInput('');
+    } catch (error) {
+      toast.error(`Update failed. ${error as Error}`);
+    } finally {
+      setUpdatingStatus(false);
+    }
+  };
+
+  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',
+  });
+
+  const headerCn = ccn({
+    context: tvMode,
+    className: 'w-full',
+    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: '',
+  });
+
+  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>
+          {!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>
+            </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>
+      )}
+
+      {!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 All Status History
+                  </Button>
+                </DrawerTrigger>
+              </Drawer>
+            </div>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+};
--- a/src/components/ui/index.tsx
+++ b/src/components/ui/index.tsx
@@ -43,9 +43,29 @@ export {
 } from './form';
 export { Input } from './input';
 export { Label } from './label';
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from './pagination'
 export { Progress } from './progress';
+export { ScrollArea, ScrollBar } from './scroll-area'
 export { Separator } from './separator';
 export { StatusMessage } from './status-message';
 export { SubmitButton } from './submit-button';
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from './table';
 export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
 export { Toaster } from './sonner';
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}