status list now works somewhat. still wanna do a lot though.

convex/statuses.ts

@@ -1,15 +1,38 @@
 import { ConvexError, v } from 'convex/values';
 import { getAuthUserId } from '@convex-dev/auth/server';
-import { mutation, query } from './_generated/server';
+import {
+  type MutationCtx,
+  type QueryCtx,
+  mutation,
+  query,
+} from './_generated/server';
 import type { Doc, Id } from './_generated/dataModel';
 import { paginationOptsValidator } from 'convex/server';
 
-// NEW: import ctx and data model types
-import type { MutationCtx, QueryCtx } from './_generated/server';
-
 // NEW: shared ctx type for helpers
 type RWCtx = MutationCtx | QueryCtx;
 
+type StatusRow = {
+  user: {
+    id: Id<'users'>,
+    name: string | null,
+    imageId: Id<'_storage'> | null,
+    imageUrl: string | null,
+  }
+  latest: {
+    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,
+};
+
 // CHANGED: typed helpers
 const ensureUser = async (ctx: RWCtx, userId: Id<'users'>) => {
   const user = await ctx.db.get(userId);
@@ -74,14 +97,14 @@ export const create = mutation({
 export const bulkCreate = mutation({
   args: {
     message: v.string(),
-    ownerIds: v.array(v.id('users')),
+    userIds: v.array(v.id('users')),
     updatedBy: v.optional(v.id('users')),
   },
   handler: async (ctx, args) => {
     const authUserId = await getAuthUserId(ctx);
     if (!authUserId) throw new ConvexError('Not authenticated.');
 
-    if (args.ownerIds.length === 0) return { statusIds: [] };
+    if (args.userIds.length === 0) return { statusIds: [] };
 
     const updatedBy = args.updatedBy ?? authUserId;
     await ensureUser(ctx, updatedBy);
@@ -96,7 +119,7 @@ export const bulkCreate = mutation({
 
     // Sequential to keep load predictable; switch to Promise.all
     // if your ownerIds lists are small and bounded.
-    for (const userId of args.ownerIds) {
+    for (const userId of args.userIds) {
       await ensureUser(ctx, userId);
 
       const statusId = await ctx.db.insert('statuses', {
@@ -109,7 +132,6 @@ export const bulkCreate = mutation({
       await ctx.db.patch(userId, { currentStatusId: statusId });
       statusIds.push(statusId);
     }
-
     return { statusIds };
   },
 });
@@ -132,6 +154,15 @@ 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;
+
+const getImageId = (u: Doc<'users'>): Id<'_storage'> | null => {
+  if (!('image' in u)) return null;
+  const img =
+    (u as { image?: unknown }).image as string | undefined;
+  return img && img.length > 0 ? (img as Id<'_storage'>) : null;
+};
 
 /**
  * Current statuses for all users.
@@ -140,24 +171,70 @@ export const getCurrentForUser = query({
  */
 export const getCurrentForAll = query({
   args: {},
-  handler: async (ctx) => {
+  handler: async (ctx): Promise<StatusRow[]> => {
     const users = await ctx.db.query('users').collect();
 
-    const results = await Promise.all(
+    return await Promise.all(
       users.map(async (u) => {
-        let status = null;
-        if (u.currentStatusId) {
+        // Resolve user's current or latest status
+        let status: Doc<'statuses'> | null = null;
+        if ('currentStatusId' in u && u.currentStatusId) {
           status = await ctx.db.get(u.currentStatusId);
         }
-        status ??= await latestStatusForOwner(ctx, u._id);
+        if (!status) {
+          const [latest] = await ctx.db
+            .query('statuses')
+            .withIndex('by_user_updatedAt', (q) => q.eq('userId', u._id))
+            .order('desc')
+            .take(1);
+          status = latest ?? null;
+        }
+
+        // User display + URL
+        const userImageId = getImageId(u);
+        const userImageUrl = userImageId
+          ? await ctx.storage.getUrl(userImageId)
+          : 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);
+          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
+          ? {
+              id: status._id,
+              message: status.message,
+              updatedAt: status.updatedAt,
+              updatedBy: status.updatedBy,
+            }
+          : null;
+
         return {
-          userId: u._id as Id<'users'>,
-          status,
+          user: {
+            id: u._id,
+            name: getName(u),
+            imageId: userImageId,
+            imageUrl: userImageUrl,
+          },
+          latest,
+          updatedByUser,
         };
       }),
     );
-
-    return results;
   },
 });
 

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

@@ -1,8 +1,14 @@
 'use client';
 import Link from 'next/link';
 import { useState } from 'react';
-import { type Preloaded, usePreloadedQuery } from 'convex/react';
+import {
+  type Preloaded,
+  usePreloadedQuery,
+  useMutation,
+  useQuery,
+} from 'convex/react';
 import { api } from '~/convex/_generated/api';
+import { type Id } from '~/convex/_generated/dataModel';
 import { useTVMode } from '@/components/providers';
 import {
   BasedAvatar,
@@ -29,17 +35,47 @@ export const StatusList = ({
 }: StatusListProps) => {
   const user = usePreloadedQuery(preloadedUser);
   const statuses = usePreloadedQuery(preloadedStatuses);
+
   const { tvMode } = useTVMode();
-  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
+  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.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
+    );
+  }
 
   const handleSelectAllClick = () => {
-    if (selectAll) setSelectedUsers([]);
-    else setSelectedUsers([]);
+    if (selectAll) setSelectedUserIds([]);
+    else setSelectedUserIds([]);
     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)
+        throw new Error('You must select at least one user.')
+      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:
@@ -59,7 +95,7 @@ export const StatusList = ({
   const selectAllIconCn = ccn({
     context: selectAll,
     className: 'w-4 h-4',
-    on: '',
+    on: 'text-green-500',
     off: '',
   });
 
@@ -81,7 +117,9 @@ export const StatusList = ({
             className='flex items-center gap2'
           >
             <CheckCircle2 className={selectAllIconCn} />
-            {selectAll ? 'Unselect All' : 'Select All'}
+            <p className={selectAll ? 'font-bold' : 'font-semibold'}>
+              {selectAll ? 'Unselect All' : 'Select All'}
+            </p>
           </Button>
           {!tvMode && (
             <div className='flex items-center gap-2 text-xs'>
@@ -94,7 +132,174 @@ export const StatusList = ({
         </div>
       </div>
 
-      <div className={cardContainerCn}></div>
+      <div className={cardContainerCn}>
+        {statuses.map((status) => {
+          const { user: u, latest, updatedByUser } = status;
+          const isSelected = selectedUserIds.includes(u.id);
+          const isUpdatedByOther = !!updatedByUser;
+          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>{latest?.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'}>
+                            {latest ? formatTime(latest.updatedAt.toString()) : '--:--'}
+                          </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'}>
+                            {latest ? formatDate(latest.updatedAt.toString()) : '--/--'}
+                          </span>
+                        </div>
+
+                        {isUpdatedByOther && updatedByUser && (
+                          <div className='flex items-center gap-2'>
+                            <BasedAvatar
+                              src={updatedByUser.imageUrl}
+                              fullName={updatedByUser.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'}
+                              </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();
+                      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>
   );
 };