gib/techtracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert back to old table as AI did a terrible job.

Browse Source
This commit is contained in:
Gabriel Brown
2025-09-24 14:01:48 -05:00
parent ab278c2ae8
commit bd4e757318
1 changed files with 127 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
apps/next/src/components/layout/status/table/index.tsx
View File

@@ -74,46 +74,35 @@ export const StatusTable = ({
const containerCn = ccn({ const containerCn = ccn({
context: tvMode, context: tvMode,
className: 'mx-auto px-2 sm:px-4', className: 'mx-auto',
on: 'lg:w-11/12 w-full', on: 'lg:w-11/12 w-full',
off: 'w-full max-w-7xl', off: 'w-5/6',
}); });
const headerCn = ccn({ const headerCn = ccn({
context: tvMode, context: tvMode,
className: 'w-full mb-4 flex justify-between', className: 'w-full mb-2 flex justify-between',
on: '', on: '',
off: 'mb-4', off: 'mb-2',
}); });
const thCn = ccn({ const thCn = ccn({
context: tvMode, context: tvMode,
className: className: 'py-4 px-4 border font-semibold ',
'py-3 px-2 sm:py-4 sm:px-4 border-b border-border font-semibold text-left', on: 'lg:text-6xl xl:min-w-[420px]',
on: 'text-4xl lg:text-6xl xl:min-w-[420px]', off: 'lg:text-5xl xl:min-w-[320px]',
off: 'text-sm sm:text-base md:text-lg lg:text-xl xl:min-w-[200px]',
}); });
const tdCn = ccn({ const tdCn = ccn({
context: tvMode, context: tvMode,
className: 'py-2 px-2 sm:py-3 sm:px-4 border-b border-border/50', className: 'py-2 px-2 border',
on: 'text-3xl lg:text-5xl', on: 'lg:text-5xl',
off: 'text-xs sm:text-sm md:text-base', off: 'lg:text-4xl',
});
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',
}); });
const tCheckboxCn = `py-3 px-4 border`;
const checkBoxCn = `lg:scale-200 cursor-pointer`;
return ( return (
<div className={containerCn}> <div className={containerCn}>
<div className={headerCn}> <div className={headerCn}>
<div className='flex flex-col w-full gap-2 items-end'> <div className='flex items-center gap-2'>
{!tvMode && ( {!tvMode && (
<div className='flex flex-row gap-2 text-xs'> <div className='flex flex-row gap-2 text-xs'>
<p className='text-muted-foreground'>Tired of the old table? </p> <p className='text-muted-foreground'>Tired of the old table? </p>
@@ -127,10 +116,9 @@ export const StatusTable = ({
)} )}
</div> </div>
</div> </div>
<div className='overflow-x-auto rounded-lg border border-border shadow-sm'> <table className='w-full text-center rounded-md'>
<table className='w-full min-w-[600px] text-left'> <thead>
<thead className='bg-muted/70 border-b border-border'> <tr className='bg-muted'>
<tr>
{!tvMode && ( {!tvMode && (
<th className={tCheckboxCn}> <th className={tCheckboxCn}>
<input <input
@@ -144,7 +132,7 @@ export const StatusTable = ({
<th className={thCn}>Technician</th> <th className={thCn}>Technician</th>
<th className={thCn}> <th className={thCn}>
<Drawer> <Drawer>
<DrawerTrigger className='hover:text-foreground/60 cursor-pointer transition-colors'> <DrawerTrigger className='hover:text-foreground/60 cursor-pointer'>
Status Status
</DrawerTrigger> </DrawerTrigger>
<StatusHistory /> <StatusHistory />
@@ -161,10 +149,9 @@ export const StatusTable = ({
<tr <tr
key={u.id} key={u.id}
className={` className={`
${i % 2 === 0 ? 'bg-secondary/30 dark:bg-muted/30' : 'bg-background'} ${i % 2 === 0 ? 'bg-muted/50' : 'bg-background'}
${isSelected ? 'ring-2 ring-primary ring-inset' : ''} ${isSelected ? 'ring-2 ring-primary' : ''}
hover:bg-accent/60 dark:hover:bg-accent/40 transition-colors duration-200 hover:bg-muted/75 transition-all duration-300
group
`} `}
> >
{!tvMode && ( {!tvMode && (
@@ -178,48 +165,22 @@ export const StatusTable = ({
</td> </td>
)} )}
<td className={tdCn}> <td className={tdCn}>
<div className='flex items-center gap-2 sm:gap-3'> <div className='flex items-center gap-3'>
<BasedAvatar <BasedAvatar
src={u.imageUrl} src={u.imageUrl}
fullName={u.name} fullName={u.name}
className={ccn({ className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
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'> <div>
<p <p> {u.name ?? 'Technician #' + (i + 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 && ( {s?.updatedBy && s.updatedBy.id !== u.id && (
<div className='flex items-center gap-1 text-muted-foreground mt-1'> <div className='flex items-center gap-1 text-muted-foreground'>
<BasedAvatar <BasedAvatar
src={s.updatedBy.imageUrl} src={s.updatedBy.imageUrl}
fullName={s.updatedBy.name} fullName={s.updatedBy.name}
className={ccn({ className='w-5 h-5'
context: tvMode,
className: 'shrink-0',
on: 'w-6 h-6',
off: 'w-3 h-3 sm:w-4 sm:h-4',
})}
/> />
<span <span className={tvMode ? 'text-xl' : 'text-base'}>
className={ccn({
context: tvMode,
className: 'text-muted-foreground truncate',
on: 'text-xl',
off: 'text-xs sm:text-sm',
})}
>
Updated by {s.updatedBy.name} Updated by {s.updatedBy.name}
</span> </span>
</div> </div>
@@ -229,64 +190,35 @@ export const StatusTable = ({
</td> </td>
<td className={tdCn}> <td className={tdCn}>
<Drawer> <Drawer>
<DrawerTrigger className='text-left hover:text-primary transition-colors'> <DrawerTrigger>{s?.message}</DrawerTrigger>
<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} /> <StatusHistory user={u} />
</Drawer> </Drawer>
</td> </td>
<td className={tdCn}> <td className={tdCn}>
<Drawer> <Drawer>
<DrawerTrigger className='text-left hover:text-primary transition-colors'> <DrawerTrigger>
<div className='flex flex-col gap-1 sm:gap-2'> <div className='flex w-full'>
<div className='flex items-center gap-1 sm:gap-2'> <div className='flex flex-col my-auto items-start'>
<div className='flex gap-4 my-1'>
<Clock <Clock
className={ccn({ className={`${tvMode ? 'lg:w-11 lg:h-11' : 'lg:w-9 lg:h-9'}`}
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',
})}
/> />
<span <p
className={ccn({ className={`${tvMode ? 'text-4xl' : 'text-3xl'}`}
context: tvMode,
className: '',
on: 'text-3xl lg:text-4xl',
off: 'text-xs sm:text-sm md:text-base font-medium',
})}
> >
{s ? formatTime(s.updatedAt) : '--:--'} {s ? formatTime(s.updatedAt) : '--:--'}
</span> </p>
</div> </div>
<div className='flex items-center gap-1 sm:gap-2'> <div className='flex gap-4 my-1'>
<Calendar <Calendar
className={ccn({ className={`${tvMode ? 'lg:w-11 lg:h-11' : 'lg:w-9 lg:h-9'}`}
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',
})}
/> />
<span <p
className={ccn({ className={`${tvMode ? 'text-4xl' : 'text-3xl'}`}
context: tvMode,
className: 'text-muted-foreground',
on: 'text-3xl lg:text-4xl',
off: 'text-xs sm:text-sm md:text-base',
})}
> >
{s ? formatDate(s.updatedAt) : '--/--/--'} {s ? formatDate(s.updatedAt) : '--:--'}
</span> </p>
</div>
</div> </div>
</div> </div>
</DrawerTrigger> </DrawerTrigger>
@@ -298,7 +230,6 @@ export const StatusTable = ({
})} })}
</tbody> </tbody>
</table> </table>
</div>
{statuses.length === 0 && ( {statuses.length === 0 && (
<div className='p-8 text-center'> <div className='p-8 text-center'>
<p <p
@@ -309,12 +240,16 @@ export const StatusTable = ({
</div> </div>
)} )}
{!tvMode && ( {!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 <Input
autoFocus autoFocus
type='text' type='text'
placeholder='New Status' 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} value={statusInput}
disabled={updatingStatus} disabled={updatingStatus}
onChange={(e) => setStatusInput(e.target.value)} onChange={(e) => setStatusInput(e.target.value)}
@@ -326,13 +261,18 @@ export const StatusTable = ({
}} }}
/> />
<SubmitButton <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} onClick={handleUpdateStatus}
disabled={updatingStatus} disabled={updatingStatus}
pendingText='Updating...' pendingText='Updating...'
> >
{selectedUserIds.length > 0 {selectedUserIds.length > 0
? `Update ${selectedUserIds.length} ${selectedUserIds.length > 1 ? 'users' : 'user'}` ? `Update status for ${selectedUserIds.length}
${selectedUserIds.length > 1 ? 'users' : 'user'}`
: 'Update status'} : 'Update status'}
</SubmitButton> </SubmitButton>
</div> </div>