From bd4e7573188450fb793dbc342eb4af39ef6d54ed Mon Sep 17 00:00:00 2001
From: gibbyb <gib@gibbyb.com>
Date: Wed, 24 Sep 2025 14:01:48 -0500
Subject: [PATCH] Revert back to old table as AI did a terrible job.

---
 .../components/layout/status/table/index.tsx  | 314 +++++++-----------
 1 file changed, 127 insertions(+), 187 deletions(-)

diff --git a/apps/next/src/components/layout/status/table/index.tsx b/apps/next/src/components/layout/status/table/index.tsx
index ddd64a0..287bfe7 100644
--- a/apps/next/src/components/layout/status/table/index.tsx
+++ b/apps/next/src/components/layout/status/table/index.tsx
@@ -74,46 +74,35 @@ export const StatusTable = ({
 
   const containerCn = ccn({
     context: tvMode,
-    className: 'mx-auto px-2 sm:px-4',
+    className: 'mx-auto',
     on: 'lg:w-11/12 w-full',
-    off: 'w-full max-w-7xl',
+    off: 'w-5/6',
   });
   const headerCn = ccn({
     context: tvMode,
-    className: 'w-full mb-4 flex justify-between',
+    className: 'w-full mb-2 flex justify-between',
     on: '',
-    off: 'mb-4',
+    off: 'mb-2',
   });
   const thCn = ccn({
     context: tvMode,
-    className:
-      'py-3 px-2 sm:py-4 sm:px-4 border-b border-border font-semibold text-left',
-    on: 'text-4xl lg:text-6xl xl:min-w-[420px]',
-    off: 'text-sm sm:text-base md:text-lg lg:text-xl xl:min-w-[200px]',
+    className: 'py-4 px-4 border font-semibold ',
+    on: 'lg:text-6xl xl:min-w-[420px]',
+    off: 'lg:text-5xl xl:min-w-[320px]',
   });
   const tdCn = ccn({
     context: tvMode,
-    className: 'py-2 px-2 sm:py-3 sm:px-4 border-b border-border/50',
-    on: 'text-3xl lg:text-5xl',
-    off: 'text-xs sm:text-sm md:text-base',
-  });
-  const tCheckboxCn = ccn({
-    context: tvMode,
-    className: 'py-3 px-2 sm:px-4 border-b border-border text-center',
-    on: 'text-4xl',
-    off: 'text-sm',
-  });
-  const checkBoxCn = ccn({
-    context: tvMode,
-    className: 'cursor-pointer',
-    on: 'scale-150 lg:scale-200',
-    off: 'scale-100 sm:scale-125',
+    className: 'py-2 px-2 border',
+    on: 'lg:text-5xl',
+    off: 'lg:text-4xl',
   });
+  const tCheckboxCn = `py-3 px-4 border`;
+  const checkBoxCn = `lg:scale-200 cursor-pointer`;
 
   return (
     <div className={containerCn}>
       <div className={headerCn}>
-        <div className='flex flex-col w-full gap-2 items-end'>
+        <div className='flex items-center gap-2'>
           {!tvMode && (
             <div className='flex flex-row gap-2 text-xs'>
               <p className='text-muted-foreground'>Tired of the old table? </p>
@@ -127,178 +116,120 @@ export const StatusTable = ({
           )}
         </div>
       </div>
-      <div className='overflow-x-auto rounded-lg border border-border shadow-sm'>
-        <table className='w-full min-w-[600px] text-left'>
-          <thead className='bg-muted/70 border-b border-border'>
-            <tr>
-              {!tvMode && (
-                <th className={tCheckboxCn}>
-                  <input
-                    type='checkbox'
-                    className={checkBoxCn}
-                    checked={selectAll}
-                    onChange={handleSelectAll}
-                  />
-                </th>
-              )}
-              <th className={thCn}>Technician</th>
-              <th className={thCn}>
-                <Drawer>
-                  <DrawerTrigger className='hover:text-foreground/60 cursor-pointer transition-colors'>
-                    Status
-                  </DrawerTrigger>
-                  <StatusHistory />
-                </Drawer>
+      <table className='w-full text-center rounded-md'>
+        <thead>
+          <tr className='bg-muted'>
+            {!tvMode && (
+              <th className={tCheckboxCn}>
+                <input
+                  type='checkbox'
+                  className={checkBoxCn}
+                  checked={selectAll}
+                  onChange={handleSelectAll}
+                />
               </th>
-              <th className={thCn}>Updated At</th>
-            </tr>
-          </thead>
-          <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-secondary/30 dark:bg-muted/30' : 'bg-background'}
-                  ${isSelected ? 'ring-2 ring-primary ring-inset' : ''}
-                  hover:bg-accent/60 dark:hover:bg-accent/40 transition-colors duration-200
-                  group
+            )}
+            <th className={thCn}>Technician</th>
+            <th className={thCn}>
+              <Drawer>
+                <DrawerTrigger className='hover:text-foreground/60 cursor-pointer'>
+                  Status
+                </DrawerTrigger>
+                <StatusHistory />
+              </Drawer>
+            </th>
+            <th className={thCn}>Updated At</th>
+          </tr>
+        </thead>
+        <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-2 sm:gap-3'>
-                      <BasedAvatar
-                        src={u.imageUrl}
-                        fullName={u.name}
-                        className={ccn({
-                          context: tvMode,
-                          className: 'shrink-0',
-                          on: 'w-16 h-16',
-                          off: 'w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12',
-                        })}
-                      />
-                      <div className='min-w-0 flex-1'>
-                        <p
-                          className={ccn({
-                            context: tvMode,
-                            className: 'font-medium truncate',
-                            on: 'text-3xl lg:text-5xl',
-                            off: 'text-xs sm:text-sm md:text-base',
-                          })}
-                        >
-                          {u.name ?? 'Technician #' + (i + 1)}
-                        </p>
-                        {s?.updatedBy && s.updatedBy.id !== u.id && (
-                          <div className='flex items-center gap-1 text-muted-foreground mt-1'>
-                            <BasedAvatar
-                              src={s.updatedBy.imageUrl}
-                              fullName={s.updatedBy.name}
-                              className={ccn({
-                                context: tvMode,
-                                className: 'shrink-0',
-                                on: 'w-6 h-6',
-                                off: 'w-3 h-3 sm:w-4 sm:h-4',
-                              })}
-                            />
-                            <span
-                              className={ccn({
-                                context: tvMode,
-                                className: 'text-muted-foreground truncate',
-                                on: 'text-xl',
-                                off: 'text-xs sm:text-sm',
-                              })}
-                            >
-                              Updated by {s.updatedBy.name}
-                            </span>
-                          </div>
-                        )}
-                      </div>
+              >
+                {!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> {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>
-                  </td>
-                  <td className={tdCn}>
-                    <Drawer>
-                      <DrawerTrigger className='text-left hover:text-primary transition-colors'>
-                        <span
-                          className={ccn({
-                            context: tvMode,
-                            className: 'line-clamp-2 sm:line-clamp-1',
-                            on: 'text-3xl lg:text-5xl',
-                            off: 'text-xs sm:text-sm md:text-base',
-                          })}
-                        >
-                          {s?.message ?? 'No status'}
-                        </span>
-                      </DrawerTrigger>
-                      <StatusHistory user={u} />
-                    </Drawer>
-                  </td>
-                  <td className={tdCn}>
-                    <Drawer>
-                      <DrawerTrigger className='text-left hover:text-primary transition-colors'>
-                        <div className='flex flex-col gap-1 sm:gap-2'>
-                          <div className='flex items-center gap-1 sm:gap-2'>
+                  </div>
+                </td>
+                <td className={tdCn}>
+                  <Drawer>
+                    <DrawerTrigger>{s?.message}</DrawerTrigger>
+                    <StatusHistory user={u} />
+                  </Drawer>
+                </td>
+                <td className={tdCn}>
+                  <Drawer>
+                    <DrawerTrigger>
+                      <div className='flex w-full'>
+                        <div className='flex flex-col my-auto items-start'>
+                          <div className='flex gap-4 my-1'>
                             <Clock
-                              className={ccn({
-                                context: tvMode,
-                                className: 'shrink-0',
-                                on: 'w-8 h-8 lg:w-11 lg:h-11',
-                                off: 'w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5',
-                              })}
+                              className={`${tvMode ? 'lg:w-11 lg:h-11' : 'lg:w-9 lg:h-9'}`}
                             />
-                            <span
-                              className={ccn({
-                                context: tvMode,
-                                className: '',
-                                on: 'text-3xl lg:text-4xl',
-                                off: 'text-xs sm:text-sm md:text-base font-medium',
-                              })}
+                            <p
+                              className={`${tvMode ? 'text-4xl' : 'text-3xl'}`}
                             >
                               {s ? formatTime(s.updatedAt) : '--:--'}
-                            </span>
+                            </p>
                           </div>
-                          <div className='flex items-center gap-1 sm:gap-2'>
+                          <div className='flex gap-4 my-1'>
                             <Calendar
-                              className={ccn({
-                                context: tvMode,
-                                className: 'shrink-0',
-                                on: 'w-8 h-8 lg:w-11 lg:h-11',
-                                off: 'w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5',
-                              })}
+                              className={`${tvMode ? 'lg:w-11 lg:h-11' : 'lg:w-9 lg:h-9'}`}
                             />
-                            <span
-                              className={ccn({
-                                context: tvMode,
-                                className: 'text-muted-foreground',
-                                on: 'text-3xl lg:text-4xl',
-                                off: 'text-xs sm:text-sm md:text-base',
-                              })}
+                            <p
+                              className={`${tvMode ? 'text-4xl' : 'text-3xl'}`}
                             >
-                              {s ? formatDate(s.updatedAt) : '--/--/--'}
-                            </span>
+                              {s ? formatDate(s.updatedAt) : '--:--'}
+                            </p>
                           </div>
                         </div>
-                      </DrawerTrigger>
-                      <StatusHistory user={u} />
-                    </Drawer>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
+                      </div>
+                    </DrawerTrigger>
+                    <StatusHistory user={u} />
+                  </Drawer>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
       {statuses.length === 0 && (
         <div className='p-8 text-center'>
           <p
@@ -309,12 +240,16 @@ export const StatusTable = ({
         </div>
       )}
       {!tvMode && (
-        <div className='mx-auto flex flex-col sm:flex-row items-stretch sm:items-center justify-center py-5 gap-3 sm:gap-4 px-4'>
+        <div className='mx-auto flex flex-row items-center justify-center py-5 gap-4'>
           <Input
             autoFocus
             type='text'
             placeholder='New Status'
-            className='flex-1 min-w-0 sm:min-w-[200px] sm:max-w-[400px] py-3 sm:py-4 lg:py-6 px-3 rounded-xl border bg-background text-sm sm:text-base lg:text-xl focus:outline-none focus:ring-2 focus:ring-primary transition-all'
+            className={
+              'min-w-[120px] lg:max-w-[400px] py-6 px-3 rounded-xl \
+                border bg-background lg:text-2xl focus:outline-none \
+                focus:ring-2 focus:ring-primary'
+            }
             value={statusInput}
             disabled={updatingStatus}
             onChange={(e) => setStatusInput(e.target.value)}
@@ -326,13 +261,18 @@ export const StatusTable = ({
             }}
           />
           <SubmitButton
-            className='px-4 sm:px-6 lg:px-8 py-3 sm:py-4 lg:py-6 rounded-xl font-semibold text-sm sm:text-base lg:text-xl disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-all hover:scale-105 whitespace-nowrap'
+            className={
+              'px-8 rounded-xl font-semibold lg:text-2xl \
+              disabled:opacity-50 disabled:cursor-not-allowed \
+              cursor-pointer'
+            }
             onClick={handleUpdateStatus}
             disabled={updatingStatus}
             pendingText='Updating...'
           >
             {selectedUserIds.length > 0
-              ? `Update ${selectedUserIds.length} ${selectedUserIds.length > 1 ? 'users' : 'user'}`
+              ? `Update status for ${selectedUserIds.length}
+                ${selectedUserIds.length > 1 ? 'users' : 'user'}`
               : 'Update status'}
           </SubmitButton>
         </div>