Think I'm ready to host this one!

convex/statuses.ts

@@ -14,23 +14,23 @@ type RWCtx = MutationCtx | QueryCtx;
 
 type StatusRow = {
   user: {
-    id: Id<'users'>,
+    id: Id<'users'>;
-    name: string | null,
+    name: string | null;
-    imageId: Id<'_storage'> | null,
+    imageId: Id<'_storage'> | null;
-    imageUrl: string | null,
+    imageUrl: string | null;
-  }
+  };
   latest: {
-    id: Id<'statuses'>,
+    id: Id<'statuses'>;
-    message: string,
+    message: string;
-    updatedAt: number,
+    updatedAt: number;
-    updatedBy: Id<'users'>,
+    updatedBy: Id<'users'>;
-  } | null,
+  } | null;
   updatedByUser: {
-    id: Id<'users'>,
+    id: Id<'users'>;
-    name: string | null,
+    name: string | null;
-    imageId: Id<'_storage'> | null,
+    imageId: Id<'_storage'> | null;
-    imageUrl: string | null,
+    imageUrl: string | null;
-  } | null,
+  } | null;
 };
 
 // CHANGED: typed helpers
@@ -159,8 +159,7 @@ const getName = (u: Doc<'users'>): string | null =>
 
 const getImageId = (u: Doc<'users'>): Id<'_storage'> | null => {
   if (!('image' in u)) return null;
-  const img =
+  const img = (u as { image?: unknown }).image as string | undefined;
-    (u as { image?: unknown }).image as string | undefined;
   return img && img.length > 0 ? (img as Id<'_storage'>) : null;
 };
 

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

@@ -1,12 +1,7 @@
 'use client';
 import Link from 'next/link';
 import { useState } from 'react';
-import {
+import { type Preloaded, usePreloadedQuery, useMutation } from 'convex/react';
-  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';
@@ -22,7 +17,7 @@ import {
 } from '@/components/ui';
 import { toast } from 'sonner';
 import { ccn, formatTime, formatDate } from '@/lib/utils';
-import { RefreshCw, Clock, Calendar, CheckCircle2 } from 'lucide-react';
+import { Clock, Calendar, CheckCircle2 } from 'lucide-react';
 
 type StatusListProps = {
   preloadedUser: Preloaded<typeof api.auth.getUser>;
@@ -46,13 +41,15 @@ export const StatusList = ({
 
   const toggleUser = (id: Id<'users'>) => {
     setSelectedUserIds((prev) =>
-      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]
+      prev.some((i) => i === id)
+        ? prev.filter((prevId) => prevId !== id)
+        : [...prev, id],
     );
-  }
+  };
 
   const handleSelectAllClick = () => {
     if (selectAll) setSelectedUserIds([]);
-    else setSelectedUserIds([]);
+    else setSelectedUserIds(statuses.map((s) => s.user.id));
     setSelectAll(!selectAll);
   };
 
@@ -61,16 +58,17 @@ export const StatusList = ({
     setUpdatingStatus(true);
     try {
       if (message.length < 3 || message.length > 80)
-        throw new Error('Status must be between 3 & 80 characters')
+        throw new Error('Status must be between 3 & 80 characters');
-      if (selectedUserIds.length === 0)
+      if (selectedUserIds.length === 0 && user?.id)
-        throw new Error('You must select at least one user.')
+        await bulkCreate({ message, userIds: [user.id] });
-      await bulkCreate({ message, userIds: selectedUserIds})
+      else throw new Error("Hmm.. this shouldn't happen");
-      toast.success('Status updated.')
+      await bulkCreate({ message, userIds: selectedUserIds });
+      toast.success('Status updated.');
       setSelectedUserIds([]);
       setSelectAll(false);
       setStatusInput('');
     } catch (error) {
-      toast.error(`Update failed. ${error as Error}`)
+      toast.error(`Update failed. ${error as Error}`);
     } finally {
       setUpdatingStatus(false);
     }
@@ -143,9 +141,11 @@ export const StatusList = ({
               className={`relative transition-all duration-200
                 cursor-pointer hover:shadow-md
                 ${tvMode ? 'p-4' : 'p-3'}
-                ${isSelected
+                ${
+                  isSelected
                     ? 'ring-2 ring-primary bg-primary/5 shadow-md'
-                  : 'hover:bg-muted/30'}
+                    : 'hover:bg-muted/30'
+                }
               `}
               onClick={() => toggleUser(u.id)}
             >
@@ -193,15 +193,14 @@ export const StatusList = ({
                         </div>
                       </div>
 
-                      <div className='flex flex-col items-end px-2 gap-2
+                      <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
+                          <Clock className={tvMode ? 'w-6 h-6' : 'w-5 h-5'} />
-                            className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
-                          />
                           <span className={tvMode ? 'text-2xl' : 'text-xl'}>
-                            {latest ? formatTime(latest.updatedAt.toString()) : '--:--'}
+                            {latest ? formatTime(latest.updatedAt) : '--:--'}
                           </span>
                         </div>
                         <div className='flex items-center gap-2'>
@@ -209,7 +208,7 @@ export const StatusList = ({
                             className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
                           />
                           <span className={tvMode ? 'text-2xl' : 'text-xl'}>
-                            {latest ? formatDate(latest.updatedAt.toString()) : '--/--'}
+                            {latest ? formatDate(latest.updatedAt) : '--/--'}
                           </span>
                         </div>
 
@@ -220,9 +219,7 @@ export const StatusList = ({
                               fullName={updatedByUser.name ?? 'User'}
                               className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
                             />
-                            <span
+                            <span className={tvMode ? 'text-base' : 'text-sm'}>
-                              className={tvMode ? 'text-base' : 'text-sm'}
-                            >
                               <div className='flex flex-col'>
                                 <p>Updated by</p>
                                 {updatedByUser.name ?? 'User'}
@@ -236,13 +233,15 @@ export const StatusList = ({
                 </div>
               </CardContent>
             </Card>
-          )
+          );
         })}
       </div>
 
       {statuses.length === 0 && (
         <Card className='p-8 text-center'>
-          <p className={`text-muted-foreground ${tvMode ? 'text-2xl' : 'text-lg'}`} >
+          <p
+            className={`text-muted-foreground ${tvMode ? 'text-2xl' : 'text-lg'}`}
+          >
             No status updates have been made in the past day.
           </p>
         </Card>
@@ -263,11 +262,7 @@ export const StatusList = ({
                   disabled={updatingStatus}
                   onChange={(e) => setStatusInput(e.target.value)}
                   onKeyDown={(e) => {
-                    if (
+                    if (e.key === 'Enter' && !e.shiftKey && !updatingStatus) {
-                      e.key === 'Enter' &&
-                      !e.shiftKey &&
-                      !updatingStatus
-                    ) {
                       e.preventDefault();
                       handleUpdateStatus();
                     }
@@ -299,7 +294,6 @@ export const StatusList = ({
           </div>
         </Card>
       )}
-
     </div>
   );
 };

src/lib/utils.ts

@@ -19,18 +19,40 @@ export const ccn = ({
   return twMerge(className, context ? on : off);
 };
 
-export const formatTime = (timestamp: string) => {
+type Timestamp = number | string | Date;
-  const date = new Date(timestamp);
+
-  const time = date.toLocaleTimeString('en-US', {
+const toDate = (ts: Timestamp): Date | null => {
+  if (ts instanceof Date) return isNaN(ts.getTime()) ? null : ts;
+
+  if (typeof ts === 'number') {
+    // Heuristic: treat small numbers as seconds
+    const ms = ts < 1_000_000_000_000 ? ts * 1000 : ts;
+    const d = new Date(ms);
+    return isNaN(d.getTime()) ? null : d;
+  }
+
+  // string: try numeric first, then ISO/date string
+  const asNum = Number(ts);
+  const d =
+    Number.isFinite(asNum) && asNum !== 0 ? toDate(asNum) : new Date(ts);
+
+  return d && !isNaN(d.getTime()) ? d : null;
+};
+
+export const formatTime = (timestamp: Timestamp, locale = 'en-US'): string => {
+  const date = toDate(timestamp);
+  if (!date) return '--:--';
+  return date.toLocaleTimeString(locale, {
     hour: 'numeric',
     minute: 'numeric',
   });
-  return time;
 };
 
-export const formatDate = (timestamp: string) => {
+export const formatDate = (timestamp: Timestamp, locale = 'en-US'): string => {
-  const date = new Date(timestamp);
+  const date = toDate(timestamp);
-  const day = date.getDate();
+  if (!date) return '--/--';
-  const month = date.toLocaleString('default', { month: 'long' });
+  return date.toLocaleDateString(locale, {
-  return `${month} ${day}`;
+    month: 'long',
+    day: 'numeric',
+  });
 };