stopping point
This commit is contained in:
2
bun.lock
2
bun.lock
@@ -33,7 +33,7 @@
|
||||
"require-in-the-middle": "^7.5.2",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"typescript-eslint": "^8.42.0",
|
||||
"typescript-eslint": "^8.43.0",
|
||||
"vaul": "^1.1.2",
|
||||
"zod": "^4.1.5",
|
||||
},
|
||||
|
||||
@@ -14,6 +14,7 @@ type RWCtx = MutationCtx | QueryCtx;
|
||||
type StatusRow = {
|
||||
user: {
|
||||
id: Id<'users'>;
|
||||
email: string | null;
|
||||
name: string | null;
|
||||
imageUrl: string | null;
|
||||
};
|
||||
@@ -155,6 +156,8 @@ export const getCurrentForUser = query({
|
||||
|
||||
const getName = (u: Doc<'users'>): string | null =>
|
||||
'name' in u && typeof u.name === 'string' ? u.name : null;
|
||||
const getEmail = (u: Doc<'users'>): string | null =>
|
||||
'email' in u && typeof u.email === 'string' ? u.email : null;
|
||||
|
||||
const getImageId = (u: Doc<'users'>): Id<'_storage'> | null => {
|
||||
if (!('image' in u)) return null;
|
||||
@@ -205,6 +208,7 @@ export const getCurrentForAll = query({
|
||||
: null;
|
||||
updatedByUser = {
|
||||
id: updater._id,
|
||||
email: getEmail(updater),
|
||||
name: getName(updater),
|
||||
imageUrl: updaterImageUrl,
|
||||
};
|
||||
@@ -222,6 +226,7 @@ export const getCurrentForAll = query({
|
||||
return {
|
||||
user: {
|
||||
id: u._id,
|
||||
email: getEmail(u),
|
||||
name: getName(u),
|
||||
imageUrl: userImageUrl,
|
||||
},
|
||||
@@ -269,6 +274,7 @@ export const listHistory = query({
|
||||
|
||||
const display: StatusRow['user'] = {
|
||||
id: user._id,
|
||||
email: getEmail(user),
|
||||
name: getName(user),
|
||||
imageUrl: imgUrl,
|
||||
};
|
||||
@@ -276,13 +282,13 @@ export const listHistory = query({
|
||||
return display;
|
||||
};
|
||||
|
||||
const page: StatusRow[] = [];
|
||||
const statuses: StatusRow[] = [];
|
||||
for (const s of result.page) {
|
||||
const owner = await getDisplay(s.userId);
|
||||
const updatedBy =
|
||||
s.updatedBy !== s.userId ? await getDisplay(s.updatedBy) : null;
|
||||
|
||||
page.push({
|
||||
statuses.push({
|
||||
user: owner,
|
||||
status: {
|
||||
id: s._id,
|
||||
@@ -292,6 +298,9 @@ export const listHistory = query({
|
||||
},
|
||||
});
|
||||
}
|
||||
const page = statuses.sort(
|
||||
(a, b) => (b.status?.updatedAt ?? 0) - (a.status?.updatedAt ?? 0),
|
||||
);
|
||||
|
||||
return {
|
||||
page,
|
||||
|
||||
@@ -24,7 +24,7 @@ import { Loader2, Pencil, Upload, XIcon } from 'lucide-react';
|
||||
import { type Id } from '~/convex/_generated/dataModel';
|
||||
|
||||
type AvatarUploadProps = {
|
||||
preloadedUser: Preloaded<typeof api.auth.getUser>,
|
||||
preloadedUser: Preloaded<typeof api.auth.getUser>;
|
||||
};
|
||||
|
||||
const dataUrlToBlob = async (
|
||||
@@ -94,7 +94,7 @@ export const AvatarUpload = ({ preloadedUser }: AvatarUploadProps) => {
|
||||
}
|
||||
|
||||
const uploadResponse = (await result.json()) as {
|
||||
storageId: Id<'_storage'>,
|
||||
storageId: Id<'_storage'>;
|
||||
};
|
||||
|
||||
await updateUserImage({ storageId: uploadResponse.storageId });
|
||||
@@ -136,7 +136,8 @@ export const AvatarUpload = ({ preloadedUser }: AvatarUploadProps) => {
|
||||
size={24}
|
||||
/>
|
||||
</div>
|
||||
<div className='absolute inset-1 transition-all flex items-end
|
||||
<div
|
||||
className='absolute inset-1 transition-all flex items-end
|
||||
justify-end'
|
||||
>
|
||||
<Pencil
|
||||
|
||||
146
src/components/layout/status/list/history/index.tsx
Normal file
146
src/components/layout/status/list/history/index.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
'use client';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useQuery } from 'convex/react';
|
||||
import { api } from '~/convex/_generated/api';
|
||||
import { formatDate, formatTime } from '@/lib/utils';
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
ScrollArea,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui';
|
||||
|
||||
const PAGE_SIZE = 25;
|
||||
export const HistoryTable = () => {
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
// cursor for page N is the continueCursor returned from page N-1
|
||||
const [cursors, setCursors] = useState<(string | null)[]>([null]);
|
||||
|
||||
const args = useMemo(() => {
|
||||
return {
|
||||
paginationOpts: {
|
||||
numItems: PAGE_SIZE,
|
||||
cursor: cursors[pageIndex] ?? null,
|
||||
},
|
||||
};
|
||||
}, [cursors, pageIndex]);
|
||||
|
||||
const data = useQuery(api.statuses.listHistory, args);
|
||||
|
||||
// Track loading
|
||||
const isLoading = data === undefined;
|
||||
|
||||
// When a page loads, cache its "next" cursor if we don't have it yet
|
||||
useEffect(() => {
|
||||
if (!data) return;
|
||||
const nextIndex = pageIndex + 1;
|
||||
setCursors((prev) => {
|
||||
const copy = [...prev];
|
||||
if (copy[nextIndex] === undefined) copy[nextIndex] = data.continueCursor;
|
||||
return copy;
|
||||
});
|
||||
}, [data, pageIndex]);
|
||||
|
||||
const canPrev = pageIndex > 0;
|
||||
const canNext = !!data && data.continueCursor !== null;
|
||||
|
||||
const handlePrev = () => {
|
||||
if (!canPrev) return;
|
||||
setPageIndex((p) => Math.max(0, p - 1));
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (!canNext) return;
|
||||
setPageIndex((p) => p + 1);
|
||||
};
|
||||
|
||||
const rows = data?.page ?? [];
|
||||
return (
|
||||
<div className='w-full'>
|
||||
<div className='px-4'>
|
||||
<ScrollArea className='h-96 w-full px-6'>
|
||||
{isLoading ? (
|
||||
<div className='flex justify-center items-center h-32'>
|
||||
<div className='animate-spin rounded-full h-8 w-8 border-b-2 border-primary' />
|
||||
</div>
|
||||
) : rows.length === 0 ? (
|
||||
<div className='flex justify-center items-center h-32'>
|
||||
<p className='text-muted-foreground'>No history found</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className='font-semibold'>Name</TableHead>
|
||||
<TableHead className='font-semibold'>Status</TableHead>
|
||||
<TableHead className='font-semibold'>Updated By</TableHead>
|
||||
<TableHead className='font-semibold text-right'>
|
||||
Date & Time
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{rows.map((r, idx) => (
|
||||
<TableRow key={`${r.status?.id ?? 'no-status'}-${idx}`}>
|
||||
<TableCell className='font-medium'>
|
||||
{r.user.name ?? 'Technician'}
|
||||
</TableCell>
|
||||
<TableCell className='max-w-xs'>
|
||||
<div className='truncate' title={r.status?.message ?? ''}>
|
||||
{r.status?.message ?? 'No status'}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='text-sm text-muted-foreground'>
|
||||
{r.status?.updatedBy?.name ?? ''}
|
||||
</TableCell>
|
||||
<TableCell className='text-right text-sm'>
|
||||
{r.status
|
||||
? `${formatTime(r.status.updatedAt)} · ${formatDate(
|
||||
r.status.updatedAt,
|
||||
)}`
|
||||
: '--:-- · --/--'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationPrevious
|
||||
href='#'
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handlePrev();
|
||||
}}
|
||||
aria-disabled={!canPrev}
|
||||
className={!canPrev ? 'pointer-events-none opacity-50' : ''}
|
||||
/>
|
||||
<div className='flex items-center gap-2 text-sm text-muted-foreground'>
|
||||
<span>Page</span>
|
||||
<span className='font-bold text-foreground'>{pageIndex + 1}</span>
|
||||
</div>
|
||||
<PaginationNext
|
||||
href='#'
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleNext();
|
||||
}}
|
||||
aria-disabled={!canNext}
|
||||
className={!canNext ? 'pointer-events-none opacity-50' : ''}
|
||||
/>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { type Preloaded, usePreloadedQuery, useMutation } from 'convex/react';
|
||||
import { api } from '~/convex/_generated/api';
|
||||
import { type Id } from '~/convex/_generated/dataModel';
|
||||
@@ -14,11 +14,24 @@ import {
|
||||
DrawerTrigger,
|
||||
Input,
|
||||
SubmitButton,
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from '@/components/ui';
|
||||
import { toast } from 'sonner';
|
||||
import { ccn, formatTime, formatDate } from '@/lib/utils';
|
||||
import { Clock, Calendar, CheckCircle2 } from 'lucide-react';
|
||||
import {
|
||||
Activity,
|
||||
Clock,
|
||||
Calendar,
|
||||
CheckCircle2,
|
||||
History,
|
||||
Users,
|
||||
Zap,
|
||||
} from 'lucide-react';
|
||||
import { StatusHistory } from '@/components/layout/status';
|
||||
import { HistoryTable } from '@/components/layout/status/list/history';
|
||||
|
||||
type StatusListProps = {
|
||||
preloadedUser: Preloaded<typeof api.auth.getUser>;
|
||||
@@ -37,10 +50,30 @@ export const StatusList = ({
|
||||
const [selectAll, setSelectAll] = useState(false);
|
||||
const [statusInput, setStatusInput] = useState('');
|
||||
const [updatingStatus, setUpdatingStatus] = useState(false);
|
||||
const [animatingIds, setAnimatingIds] = useState<Set<string>>(new Set());
|
||||
const [previousStatuses, setPreviousStatuses] = useState(statuses);
|
||||
|
||||
const bulkCreate = useMutation(api.statuses.bulkCreate);
|
||||
|
||||
const handleSelectUser = (id: Id<'users'>, e: React.MouseEvent) => {
|
||||
useEffect(() => {
|
||||
const newAnimatingIds = new Set<string>();
|
||||
statuses.forEach((curr) => {
|
||||
const previous = previousStatuses.find((p) => p.user.id === curr.user.id);
|
||||
if (previous?.status?.updatedAt !== curr.status?.updatedAt)
|
||||
newAnimatingIds.add(curr.user.id);
|
||||
});
|
||||
if (newAnimatingIds.size > 0) {
|
||||
setAnimatingIds(newAnimatingIds);
|
||||
setTimeout(() => setAnimatingIds(new Set()), 800);
|
||||
}
|
||||
setPreviousStatuses(
|
||||
statuses.sort(
|
||||
(a, b) => (b.status?.updatedAt ?? 0) - (a.status?.updatedAt ?? 0),
|
||||
),
|
||||
);
|
||||
}, [statuses]);
|
||||
|
||||
const handleSelectUser = (id: Id<'users'>) => {
|
||||
setSelectedUserIds((prev) =>
|
||||
prev.some((i) => i === id)
|
||||
? prev.filter((prevId) => prevId !== id)
|
||||
@@ -62,7 +95,7 @@ export const StatusList = ({
|
||||
throw new Error('Status must be between 3 & 80 characters');
|
||||
if (selectedUserIds.length === 0 && user?.id)
|
||||
await bulkCreate({ message, userIds: [user.id] });
|
||||
await bulkCreate({ message, userIds: selectedUserIds });
|
||||
else await bulkCreate({ message, userIds: selectedUserIds });
|
||||
toast.success('Status updated.');
|
||||
setSelectedUserIds([]);
|
||||
setSelectAll(false);
|
||||
@@ -74,193 +107,239 @@ export const StatusList = ({
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusAge = (updatedAt: number) => {
|
||||
const diff = Date.now() - updatedAt;
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
if (hours > 0) return `${hours}h ${minutes}m ago`;
|
||||
if (minutes > 0) return `${minutes}m ago`;
|
||||
return 'Just now';
|
||||
};
|
||||
|
||||
const containerCn = ccn({
|
||||
context: tvMode,
|
||||
className:
|
||||
'flex flex-col mx-auto items-center\
|
||||
sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-1/2 min-w-[450px]',
|
||||
on: 'mt-8',
|
||||
off: 'px-10',
|
||||
className: 'w-full max-w-6xl mx-auto',
|
||||
on: 'p-8',
|
||||
off: 'px-6 py-4',
|
||||
});
|
||||
|
||||
const tabsCn = ccn({
|
||||
context: tvMode,
|
||||
className: 'w-full py-8',
|
||||
on: 'hidden',
|
||||
off: '',
|
||||
});
|
||||
|
||||
const headerCn = ccn({
|
||||
context: tvMode,
|
||||
className: 'w-full',
|
||||
className: 'w-full mb-2',
|
||||
on: 'hidden',
|
||||
off: 'flex mb-3 justify-between items-center',
|
||||
});
|
||||
|
||||
const selectAllIconCn = ccn({
|
||||
context: selectAll,
|
||||
className: 'w-4 h-4',
|
||||
on: 'text-green-500',
|
||||
off: '',
|
||||
});
|
||||
|
||||
const cardContainerCn = ccn({
|
||||
context: tvMode,
|
||||
className: 'w-full space-y-2',
|
||||
on: 'text-primary',
|
||||
off: '',
|
||||
off: 'flex justify-end items-center',
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={containerCn}>
|
||||
<Tabs defaultValue='status'>
|
||||
<TabsList className={tabsCn}>
|
||||
<TabsTrigger value='status' className='py-8'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<Activity className='w-6 h-6 text-primary' />
|
||||
<h1 className='text-2xl font-bold'>Team Status</h1>
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value='history' className='py-8'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<History className='w-6 h-6 text-primary' />
|
||||
<h1 className='text-2xl font-bold'>Status History</h1>
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value='status'>
|
||||
<div className={headerCn}>
|
||||
<div className='flex items-center gap-4'>
|
||||
<Button
|
||||
onClick={handleSelectAll}
|
||||
variant={'outline'}
|
||||
size={'sm'}
|
||||
className='flex items-center gap2'
|
||||
>
|
||||
<CheckCircle2 className={selectAllIconCn} />
|
||||
<p className={selectAll ? 'font-bold' : 'font-semibold'}>
|
||||
{selectAll ? 'Unselect All' : 'Select All'}
|
||||
</p>
|
||||
</Button>
|
||||
{!tvMode && (
|
||||
<div className='flex items-center gap-2 text-muted-foreground'>
|
||||
<Users className='w-4 h-4' />
|
||||
<span>{statuses.length} members</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-2 text-xs'>
|
||||
<span className='text-muted-foreground'>Miss the old table?</span>
|
||||
<Link href='/table' className='font-medium hover:underline'>
|
||||
Find it here!
|
||||
Miss the old table?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='space-y-3'>
|
||||
{statuses.map((statusData) => {
|
||||
const { user: u, status: s } = statusData;
|
||||
const isSelected = selectedUserIds.includes(u.id);
|
||||
const isAnimating = animatingIds.has(u.id);
|
||||
const isUpdatedByOther = s?.updatedBy?.id !== u.id;
|
||||
return (
|
||||
<div
|
||||
key={u.id}
|
||||
className={`
|
||||
group relative overflow-hidden rounded-xl border transition-all duration-700 ease-out
|
||||
${isAnimating ? 'animate-pulse bg-primary/5 border-primary/30 shadow-xl scale-[1.03] -translate-y-2' : ''}
|
||||
${isSelected ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'}
|
||||
${tvMode ? 'p-6' : 'p-4'}
|
||||
${!tvMode ? 'hover:shadow-md cursor-pointer' : ''}
|
||||
`}
|
||||
style={{
|
||||
transform: isAnimating
|
||||
? 'translateY(-8px) scale(1.02)'
|
||||
: 'translateY(0) scale(1)',
|
||||
boxShadow: isAnimating ? '0 20px 40px rgba(0,0,0,0.1)' : '',
|
||||
}}
|
||||
onClick={!tvMode ? () => handleSelectUser(u.id) : undefined}
|
||||
>
|
||||
{/* Selection indicator */}
|
||||
{isSelected && !tvMode && (
|
||||
<div className='absolute top-3 right-3'>
|
||||
<CheckCircle2 className='w-5 h-5 text-primary' />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Enhanced animation effect */}
|
||||
{isAnimating && (
|
||||
<div className='absolute inset-0 bg-gradient-to-r from-transparent via-primary/10 to-transparent animate-pulse' />
|
||||
)}
|
||||
|
||||
<div className='relative flex items-center gap-4'>
|
||||
{/* Avatar */}
|
||||
<div className='relative flex-shrink-0'>
|
||||
<BasedAvatar
|
||||
src={u.imageUrl}
|
||||
fullName={u.name ?? 'User'}
|
||||
className={`
|
||||
transition-all duration-500 ring-2 ring-transparent
|
||||
${tvMode ? 'w-16 h-16' : 'w-12 h-12'}
|
||||
${isAnimating ? 'ring-primary/30 ring-4' : ''}
|
||||
`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className='flex-1 min-w-0'>
|
||||
<div className='flex items-center gap-3 mb-2'>
|
||||
<h3
|
||||
className={`
|
||||
font-semibold truncate
|
||||
${tvMode ? 'text-2xl' : 'text-lg'}
|
||||
`}
|
||||
>
|
||||
{u.name ?? u.email ?? 'User'}
|
||||
</h3>
|
||||
|
||||
{isUpdatedByOther && s?.updatedBy && (
|
||||
<div className='flex items-center gap-2 text-muted-foreground'>
|
||||
<span className={tvMode ? 'text-sm' : 'text-xs'}>
|
||||
via
|
||||
</span>
|
||||
<BasedAvatar
|
||||
src={s.updatedBy.imageUrl}
|
||||
fullName={s.updatedBy.name ?? 'User'}
|
||||
className={tvMode ? 'w-5 h-5' : 'w-4 h-4'}
|
||||
/>
|
||||
<span className={tvMode ? 'text-sm' : 'text-xs'}>
|
||||
{s.updatedBy.name ??
|
||||
s.updatedBy.email ??
|
||||
'another user'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={cardContainerCn}>
|
||||
{statuses.map((status) => {
|
||||
const { user: u, status: s } = status;
|
||||
const isSelected = selectedUserIds.includes(u.id);
|
||||
const isUpdatedByOther = !!s?.updatedBy;
|
||||
return (
|
||||
<Card
|
||||
key={u.id}
|
||||
className={`relative transition-all duration-200
|
||||
cursor-pointer hover:shadow-md
|
||||
${tvMode ? 'p-4' : 'p-3'}
|
||||
${
|
||||
isSelected
|
||||
? 'ring-2 ring-primary bg-primary/5 shadow-md'
|
||||
: 'hover:bg-muted/30'
|
||||
}
|
||||
`}
|
||||
onClick={(e) => handleSelectUser(u.id, e)}
|
||||
>
|
||||
<CardContent className='p-2'>
|
||||
<div className='flex items-start gap-3'>
|
||||
<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
|
||||
className={`font-semibold cursor-pointer
|
||||
hover:text-primary/80 truncate
|
||||
${tvMode ? 'text-3xl' : 'text-2xl'}
|
||||
`}
|
||||
>
|
||||
{u.name ?? 'Technician'}
|
||||
</h3>
|
||||
|
||||
<div
|
||||
className={`pl-2 pr-15 pt-2
|
||||
${tvMode ? 'text-2xl' : 'text-xl'}
|
||||
className={`
|
||||
mb-3 leading-relaxed
|
||||
${tvMode ? 'text-xl' : 'text-base'}
|
||||
${s ? 'text-foreground' : 'text-muted-foreground italic'}
|
||||
`}
|
||||
>
|
||||
<p>{s?.message ?? 'No status yet.'}</p>
|
||||
</div>
|
||||
{s?.message ?? 'No status yet.'}
|
||||
</div>
|
||||
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>
|
||||
<div
|
||||
className='flex flex-col items-end px-2 gap-2
|
||||
text-muted-foreground flex-shrink-0'
|
||||
>
|
||||
{/* Time Info */}
|
||||
<div className='flex items-center gap-4 text-muted-foreground'>
|
||||
<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'}>
|
||||
<Clock className={tvMode ? 'w-4 h-4' : 'w-3 h-3'} />
|
||||
<span className={tvMode ? 'text-base' : 'text-sm'}>
|
||||
{s ? formatTime(s.updatedAt) : '--:--'}
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Calendar
|
||||
className={tvMode ? 'w-6 h-6' : 'w-5 h-5'}
|
||||
className={tvMode ? 'w-4 h-4' : 'w-3 h-3'}
|
||||
/>
|
||||
<span className={tvMode ? 'text-2xl' : 'text-xl'}>
|
||||
<span className={tvMode ? 'text-base' : 'text-sm'}>
|
||||
{s ? formatDate(s.updatedAt) : '--/--'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isUpdatedByOther && s.updatedBy && (
|
||||
{s && (
|
||||
<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'}
|
||||
<Activity
|
||||
className={tvMode ? 'w-4 h-4' : 'w-3 h-3'}
|
||||
/>
|
||||
<span
|
||||
className={tvMode ? 'text-base' : 'text-sm'}
|
||||
>
|
||||
<div className='flex flex-col'>
|
||||
<p>Updated by</p>
|
||||
{s.updatedBy.name ?? 'User'}
|
||||
</div>
|
||||
<span className={tvMode ? 'text-base' : 'text-sm'}>
|
||||
{getStatusAge(s.updatedAt)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* History Drawer */}
|
||||
{!tvMode && (
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>
|
||||
<Button
|
||||
variant='outline'
|
||||
className={`
|
||||
md:text-lg
|
||||
opacity-0 group-hover:opacity-100 transition-opacity
|
||||
`}
|
||||
>
|
||||
History
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<StatusHistory user={u} />
|
||||
</Drawer>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{statuses.length === 0 && (
|
||||
<Card className='p-8 text-center'>
|
||||
<p
|
||||
className={`text-muted-foreground ${tvMode ? 'text-2xl' : 'text-lg'}`}
|
||||
>
|
||||
No status updates have been made in the past day.
|
||||
</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Update Status Section */}
|
||||
{!tvMode && (
|
||||
<Card className='p-6 mt-4 w-full'>
|
||||
<Card className='mt-5 border-2 border-dashed border-muted-foreground/20 hover:border-primary/50 transition-colors'>
|
||||
<CardContent className='p-6'>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex items-center gap-3'>
|
||||
<Zap className='w-5 h-5 text-primary' />
|
||||
<h3 className='text-lg font-semibold'>Update Status</h3>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex gap-4'>
|
||||
{selectedUserIds.length > 0 && (
|
||||
<span className='px-2 py-1 bg-primary/10 text-primary text-sm rounded-full'>
|
||||
{selectedUserIds.length} selected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className='flex gap-3'>
|
||||
<Input
|
||||
autoFocus
|
||||
type='text'
|
||||
placeholder='Enter status update...'
|
||||
className='flex-1 text-2xl'
|
||||
placeholder="What's happening?"
|
||||
className='flex-1 text-lg h-12'
|
||||
value={statusInput}
|
||||
disabled={updatingStatus}
|
||||
onChange={(e) => setStatusInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey && !updatingStatus) {
|
||||
if (
|
||||
e.key === 'Enter' &&
|
||||
!e.shiftKey &&
|
||||
!updatingStatus
|
||||
) {
|
||||
e.preventDefault();
|
||||
void handleUpdateStatus();
|
||||
}
|
||||
@@ -269,31 +348,37 @@ export const StatusList = ({
|
||||
<SubmitButton
|
||||
onClick={handleUpdateStatus}
|
||||
disabled={updatingStatus}
|
||||
className='px-6'
|
||||
className='px-6 h-12'
|
||||
>
|
||||
{selectedUserIds.length > 0
|
||||
? `Update ${selectedUserIds.length}
|
||||
${selectedUserIds.length > 1 ? 'users' : 'user'}`
|
||||
? `Update ${selectedUserIds.length} ${selectedUserIds.length > 1 ? 'users' : 'user'}`
|
||||
: 'Update Status'}
|
||||
</SubmitButton>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-center mt-2'>
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>
|
||||
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='flex gap-2'>
|
||||
<Button
|
||||
variant='outline'
|
||||
className={tvMode ? 'text-xl p-6' : ''}
|
||||
size='sm'
|
||||
onClick={handleSelectAll}
|
||||
>
|
||||
View Status History
|
||||
{selectAll ? 'Deselect All' : 'Select All'}
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<StatusHistory />
|
||||
</Drawer>
|
||||
</div>
|
||||
<div className='text-sm text-muted-foreground'>
|
||||
{statusInput.length}/80 characters
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
<TabsContent value='history'>
|
||||
<HistoryTable />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -89,8 +89,8 @@ export const StatusTable = ({
|
||||
const thCn = ccn({
|
||||
context: tvMode,
|
||||
className: 'py-4 px-4 border font-semibold ',
|
||||
on: 'lg:text-5xl xl:min-w-[420px]',
|
||||
off: 'lg:text-4xl xl:min-w-[320px]',
|
||||
on: 'lg:text-6xl xl:min-w-[420px]',
|
||||
off: 'lg:text-5xl xl:min-w-[320px]',
|
||||
});
|
||||
const tdCn = ccn({
|
||||
context: tvMode,
|
||||
@@ -174,8 +174,10 @@ export const StatusTable = ({
|
||||
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
|
||||
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'>
|
||||
@@ -192,19 +194,104 @@ export const StatusTable = ({
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className={tdCn}>
|
||||
<Drawer>
|
||||
<td className={tdCn}>
|
||||
|
||||
</td>
|
||||
<td className={tdCn}>
|
||||
|
||||
</td>
|
||||
<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={`${tvMode ? 'lg:w-11 lg:h-11' : 'lg:w-9 lg:h-9'}`}
|
||||
/>
|
||||
{s ? formatTime(s.updatedAt) : '--:--'}
|
||||
</div>
|
||||
<div className='flex gap-4 my-1'>
|
||||
<Calendar
|
||||
className={`${tvMode ? 'lg:w-11 lg:h-11' : 'lg:w-9 lg:h-9'}`}
|
||||
/>
|
||||
{s ? formatDate(s.updatedAt) : '--:--'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DrawerTrigger>
|
||||
<StatusHistory user={u} />
|
||||
</Drawer>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{statuses.length === 0 && (
|
||||
<div className='p-8 text-center'>
|
||||
<p
|
||||
className={`text-muted-foreground ${tvMode ? 'text-4xl' : 'text-lg'}`}
|
||||
>
|
||||
No status updates yet
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{!tvMode && (
|
||||
<div className='mx-auto flex flex-row items-center justify-center py-5 gap-4'>
|
||||
<Input
|
||||
autoFocus
|
||||
type='text'
|
||||
placeholder='New Status'
|
||||
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)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey && !updatingStatus) {
|
||||
e.preventDefault();
|
||||
void handleUpdateStatus();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<SubmitButton
|
||||
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 status for ${selectedUserIds.length}
|
||||
${selectedUserIds.length > 1 ? 'users' : 'user'}`
|
||||
: 'Update status'}
|
||||
</SubmitButton>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Global Status History Drawer */}
|
||||
{!tvMode && (
|
||||
<div className='flex justify-center mt-6'>
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>
|
||||
<Button
|
||||
variant='outline'
|
||||
className={tvMode ? 'text-3xl p-6' : ''}
|
||||
>
|
||||
View All Status History
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<StatusHistory />
|
||||
</Drawer>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user