Revert back to old table as AI did a terrible job.
This commit is contained in:
@@ -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,178 +116,120 @@ 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
|
type='checkbox'
|
||||||
type='checkbox'
|
className={checkBoxCn}
|
||||||
className={checkBoxCn}
|
checked={selectAll}
|
||||||
checked={selectAll}
|
onChange={handleSelectAll}
|
||||||
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>
|
|
||||||
</th>
|
</th>
|
||||||
<th className={thCn}>Updated At</th>
|
)}
|
||||||
</tr>
|
<th className={thCn}>Technician</th>
|
||||||
</thead>
|
<th className={thCn}>
|
||||||
<tbody>
|
<Drawer>
|
||||||
{statuses.map((status, i) => {
|
<DrawerTrigger className='hover:text-foreground/60 cursor-pointer'>
|
||||||
const { user: u, status: s } = status;
|
Status
|
||||||
const isSelected = selectedUserIds.includes(u.id);
|
</DrawerTrigger>
|
||||||
return (
|
<StatusHistory />
|
||||||
<tr
|
</Drawer>
|
||||||
key={u.id}
|
</th>
|
||||||
className={`
|
<th className={thCn}>Updated At</th>
|
||||||
${i % 2 === 0 ? 'bg-secondary/30 dark:bg-muted/30' : 'bg-background'}
|
</tr>
|
||||||
${isSelected ? 'ring-2 ring-primary ring-inset' : ''}
|
</thead>
|
||||||
hover:bg-accent/60 dark:hover:bg-accent/40 transition-colors duration-200
|
<tbody>
|
||||||
group
|
{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 && (
|
{!tvMode && (
|
||||||
<td className={tCheckboxCn}>
|
<td className={tCheckboxCn}>
|
||||||
<input
|
<input
|
||||||
type='checkbox'
|
type='checkbox'
|
||||||
className={checkBoxCn}
|
className={checkBoxCn}
|
||||||
checked={isSelected}
|
checked={isSelected}
|
||||||
onChange={() => handleSelectUser(u.id)}
|
onChange={() => handleSelectUser(u.id)}
|
||||||
/>
|
/>
|
||||||
</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',
|
<div>
|
||||||
on: 'w-16 h-16',
|
<p> {u.name ?? 'Technician #' + (i + 1)} </p>
|
||||||
off: 'w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12',
|
{s?.updatedBy && s.updatedBy.id !== u.id && (
|
||||||
})}
|
<div className='flex items-center gap-1 text-muted-foreground'>
|
||||||
/>
|
<BasedAvatar
|
||||||
<div className='min-w-0 flex-1'>
|
src={s.updatedBy.imageUrl}
|
||||||
<p
|
fullName={s.updatedBy.name}
|
||||||
className={ccn({
|
className='w-5 h-5'
|
||||||
context: tvMode,
|
/>
|
||||||
className: 'font-medium truncate',
|
<span className={tvMode ? 'text-xl' : 'text-base'}>
|
||||||
on: 'text-3xl lg:text-5xl',
|
Updated by {s.updatedBy.name}
|
||||||
off: 'text-xs sm:text-sm md:text-base',
|
</span>
|
||||||
})}
|
</div>
|
||||||
>
|
)}
|
||||||
{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>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
<td className={tdCn}>
|
</td>
|
||||||
<Drawer>
|
<td className={tdCn}>
|
||||||
<DrawerTrigger className='text-left hover:text-primary transition-colors'>
|
<Drawer>
|
||||||
<span
|
<DrawerTrigger>{s?.message}</DrawerTrigger>
|
||||||
className={ccn({
|
<StatusHistory user={u} />
|
||||||
context: tvMode,
|
</Drawer>
|
||||||
className: 'line-clamp-2 sm:line-clamp-1',
|
</td>
|
||||||
on: 'text-3xl lg:text-5xl',
|
<td className={tdCn}>
|
||||||
off: 'text-xs sm:text-sm md:text-base',
|
<Drawer>
|
||||||
})}
|
<DrawerTrigger>
|
||||||
>
|
<div className='flex w-full'>
|
||||||
{s?.message ?? 'No status'}
|
<div className='flex flex-col my-auto items-start'>
|
||||||
</span>
|
<div className='flex gap-4 my-1'>
|
||||||
</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'>
|
|
||||||
<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>
|
||||||
</DrawerTrigger>
|
</div>
|
||||||
<StatusHistory user={u} />
|
</DrawerTrigger>
|
||||||
</Drawer>
|
<StatusHistory user={u} />
|
||||||
</td>
|
</Drawer>
|
||||||
</tr>
|
</td>
|
||||||
);
|
</tr>
|
||||||
})}
|
);
|
||||||
</tbody>
|
})}
|
||||||
</table>
|
</tbody>
|
||||||
</div>
|
</table>
|
||||||
{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>
|
||||||
|
|||||||
Reference in New Issue
Block a user