working on table now

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

@@ -40,7 +40,7 @@ export const StatusTable = ({
 
   const bulkCreate = useMutation(api.statuses.bulkCreate);
 
-  const handleSelectUser = (id: Id<'users'>, e: React.MouseEvent) => {
+  const handleSelectUser = (id: Id<'users'>) => {
     setSelectedUserIds((prev) =>
       prev.some((i) => i === id)
         ? prev.filter((prevId) => prevId !== id)
@@ -127,7 +127,7 @@ export const StatusTable = ({
                   type='checkbox'
                   className={checkBoxCn}
                   checked={selectAll}
-                  onChange={() => handleSelectAll()}
+                  onChange={handleSelectAll}
                 />
               </th>
             )}
@@ -143,7 +143,67 @@ export const StatusTable = ({
             <th className={thCn}>Updated At</th>
           </tr>
         </thead>
-        <tbody></tbody>
+        <tbody>
+          {statuses.map((status, i) => {
+            const { user: u, status: s } = status;
+            const isSelected = selectedUserIds.includes(u.id);
+            return (
+              <tr
+                key={u.id}
+                className={`
+                  ${i % 2 === 0 ? 'bg-muted/50' : 'bg-background'}
+                  ${isSelected ? 'ring-2 ring-primary' : ''}
+                  hover:bg-muted/75 transition-all duration-300
+                `}
+              >
+                {!tvMode && (
+                  <td className={tCheckboxCn}>
+                    <input
+                      type='checkbox'
+                      className={checkBoxCn}
+                      checked={isSelected}
+                      onChange={() => handleSelectUser(u.id)}
+                    />
+                  </td>
+                )}
+                <td className={tdCn}>
+                  <div className='flex items-center gap-3'>
+                    <BasedAvatar
+                      src={u.imageUrl}
+                      fullName={u.name}
+                      className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
+                    />
+                    <div>
+                      <p className={`font-semibold ${tvMode ? 'text-5xl':'text-4xl'}`}>
+                        {u.name ?? 'Technician #' + (i+1)}
+                      </p>
+                      {s?.updatedBy && s.updatedBy.id !== u.id && (
+                        <div className='flex items-center gap-1 text-muted-foreground'>
+                          <BasedAvatar
+                            src={s.updatedBy.imageUrl}
+                            fullName={s.updatedBy.name}
+                            className='w-5 h-5'
+                          />
+                          <span className={tvMode ? 'text-xl' : 'text-base'}>
+                            Updated by {s.updatedBy.name}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </td>
+                <Drawer>
+                  <td className={tdCn}>
+
+                  </td>
+                  <td className={tdCn}>
+
+                  </td>
+                </Drawer>
+              </tr>
+            );
+          })}
+        </tbody>
       </table>
     </div>
   );