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

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>
   );
 };