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

almost done

Browse Source
This commit is contained in:
Gabriel Brown
2025-09-08 11:25:11 -05:00
parent f315412b03
commit 1d82c18179
11 changed files with 330 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/components/layout/status/list/index.tsx
View File

@@ -37,11 +37,10 @@ export const StatusList = ({
const [selectAll, setSelectAll] = useState(false);
const [statusInput, setStatusInput] = useState('');
const [updatingStatus, setUpdatingStatus] = useState(false);
const [selectedHistoryUserId, setSelectedHistoryUserId] = useState<Id<'users'>>();
const bulkCreate = useMutation(api.statuses.bulkCreate);
const toggleUser = (id: Id<'users'>) => {
const handleSelectUser = (id: Id<'users'>, e: React.MouseEvent) => {
setSelectedUserIds((prev) =>
prev.some((i) => i === id)
? prev.filter((prevId) => prevId !== id)
@@ -49,7 +48,7 @@ export const StatusList = ({
);
};
const handleSelectAllClick = () => {
const handleSelectAll = () => {
if (selectAll) setSelectedUserIds([]);
else setSelectedUserIds(statuses.map((s) => s.user.id));
setSelectAll(!selectAll);
@@ -110,7 +109,7 @@ export const StatusList = ({
<div className={headerCn}>
<div className='flex items-center gap-4'>
<Button
onClick={handleSelectAllClick}
onClick={handleSelectAll}
variant={'outline'}
size={'sm'}
className='flex items-center gap2'
@@ -148,51 +147,32 @@ export const StatusList = ({
: 'hover:bg-muted/30'
}
`}
onClick={() => toggleUser(u.id)}
onClick={(e) => handleSelectUser(u.id, e)}
>
{isSelected && (
<div className='absolute top-2 right-2 text-primary'>
<CheckCircle2 className={tvMode ? 'w-6 h-6' : 'w-5 h-5'} />
</div>
)}
<CardContent className='p-0'>
<CardContent className='p-2'>
<div className='flex items-start gap-3'>
<Drawer>
<DrawerTrigger asChild>
<div
data-profile-trigger
className='flex-shrink-0 cursor-pointer
hover:opacity-80 transition-opacity'
onClick={() => setSelectedHistoryUserId(u.id)}
>
<BasedAvatar
src={u.imageUrl}
fullName={u.name ?? 'Technician'}
className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
/>
</div>
</DrawerTrigger>
{selectedHistoryUserId === u.id && (
<StatusHistory userId={u.id} />
)}
</Drawer>
<div className='flex-shrink-0 cursor-pointer
hover:opacity-80 transition-opacity'
>
<BasedAvatar
src={u.imageUrl}
fullName={u.name ?? 'Technician'}
className={tvMode ? 'w-16 h-16' : 'w-12 h-12'}
/>
</div>
<div className='flex-1'>
<div className='flex items-start justify-between mb-2'>
<div>
<h3
data-profile-trigger
className={`font-semibold cursor-pointer
<h3 className={`font-semibold cursor-pointer
hover:text-primary/80 truncate
${tvMode ? 'text-3xl' : 'text-2xl'}
`}
// TODO: open history drawer
>
{u.name ?? 'Technician'}
</h3>
<div
className={`pl-2 pr-15 pt-2
<div className={`pl-2 pr-15 pt-2
${tvMode ? 'text-2xl' : 'text-xl'}
`}
>
@@ -200,41 +180,46 @@ export const StatusList = ({
</div>
</div>
<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 className={tvMode ? 'w-6 h-6' : 'w-5 h-5'} />
<span className={tvMode ? 'text-2xl' : 'text-xl'}>
{s ? formatTime(s.updatedAt) : '--:--'}
</span>
</div>
<div className='flex items-center gap-2'>
<Calendar
className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
/>
<span className={tvMode ? 'text-2xl' : 'text-xl'}>
{s ? formatDate(s.updatedAt) : '--/--'}
</span>
</div>
<Drawer>
<DrawerTrigger asChild>
<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 className={tvMode ? 'w-6 h-6' : 'w-5 h-5'} />
<span className={tvMode ? 'text-2xl' : 'text-xl'}>
{s ? formatTime(s.updatedAt) : '--:--'}
</span>
</div>
<div className='flex items-center gap-2'>
<Calendar
className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
/>
<span className={tvMode ? 'text-2xl' : 'text-xl'}>
{s ? formatDate(s.updatedAt) : '--/--'}
</span>
</div>
{isUpdatedByOther && s.updatedBy && (
<div className='flex items-center gap-2'>
<BasedAvatar
src={s.updatedBy.imageUrl}
fullName={s.updatedBy.name ?? 'User'}
className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
/>
<span className={tvMode ? 'text-base' : 'text-sm'}>
<div className='flex flex-col'>
<p>Updated by</p>
{s.updatedBy.name ?? 'User'}
{isUpdatedByOther && s.updatedBy && (
<div className='flex items-center gap-2'>
<BasedAvatar
src={s.updatedBy.imageUrl}
fullName={s.updatedBy.name ?? 'User'}
className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
/>
<span className={tvMode ? 'text-base' : 'text-sm'}>
<div className='flex flex-col'>
<p>Updated by</p>
{s.updatedBy.name ?? 'User'}
</div>
</span>
</div>
</span>
)}
</div>
)}
</div>
</DrawerTrigger>
<StatusHistory user={u} />
</Drawer>
</div>
</div>
</div>
@@ -281,7 +266,11 @@ export const StatusList = ({
className='px-6'
>
{selectedUserIds.length > 0
? `Update ${selectedUserIds.length} ${selectedUserIds.length > 1 ? 'users' : 'user'}`
? `Update ${selectedUserIds.length}
${selectedUserIds.length > 1
? 'users'
: 'user'
}`
: 'Update Status'}
</SubmitButton>
</div>
@@ -293,9 +282,10 @@ export const StatusList = ({
variant='outline'
className={tvMode ? 'text-xl p-6' : ''}
>
View All Status History
View Status History
</Button>
</DrawerTrigger>
<StatusHistory />
</Drawer>
</div>
</div>