twotalesanimation
+457
-212
@@ -12,6 +12,8 @@ import {
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
Package,
|
||||
RotateCcw,
|
||||
ArrowUpDown,
|
||||
} from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Montserrat } from 'next/font/google';
|
||||
@@ -56,6 +58,21 @@ interface AssetTask extends ClientTask {
|
||||
asset?: { id: string; assetCode: string; name: string } | null;
|
||||
}
|
||||
|
||||
interface FlatItem {
|
||||
task: ClientTask | AssetTask;
|
||||
label: string;
|
||||
description: string | null;
|
||||
thumbnailUrl: string | null;
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string): string {
|
||||
return new Date(dateStr).toLocaleDateString('en-AU', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
@@ -124,6 +141,8 @@ export default function ClientPortalPage({
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [requiresPassword, setRequiresPassword] = useState(false);
|
||||
const [collapsedEpisodes, setCollapsedEpisodes] = useState<Set<string>>(new Set());
|
||||
const [statusFilter, setStatusFilter] = useState<string | null>(null);
|
||||
const [sortMode, setSortMode] = useState<'episode' | 'recent'>('episode');
|
||||
|
||||
const toggleEpisode = (ep: string) => {
|
||||
setCollapsedEpisodes((prev) => {
|
||||
@@ -133,6 +152,10 @@ export default function ClientPortalPage({
|
||||
});
|
||||
};
|
||||
|
||||
const toggleStatusFilter = (filter: string) => {
|
||||
setStatusFilter((prev) => (prev === filter ? null : filter));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
params.then(({ token: t }) => {
|
||||
setToken(t);
|
||||
@@ -225,6 +248,45 @@ export default function ClientPortalPage({
|
||||
{},
|
||||
);
|
||||
|
||||
const taskMatchesFilter = (t: ClientTask | AssetTask): boolean => {
|
||||
if (!statusFilter) return true;
|
||||
const status = getLatestVersion(t)?.approvalStatus;
|
||||
if (statusFilter === 'NEEDS_CHANGES') {
|
||||
return ['REJECTED', 'NEEDS_CHANGES'].includes(status ?? '');
|
||||
}
|
||||
if (statusFilter === 'PENDING_REVIEW') {
|
||||
return !status || status === 'PENDING_REVIEW';
|
||||
}
|
||||
return status === statusFilter;
|
||||
};
|
||||
|
||||
const filteredAssetTasks = assetTasks.filter(taskMatchesFilter);
|
||||
|
||||
const allFlatItems: FlatItem[] = [
|
||||
...shots.flatMap((shot) =>
|
||||
shot.tasks.map((task) => ({
|
||||
task,
|
||||
label: shot.shotCode,
|
||||
description: shot.description,
|
||||
thumbnailUrl: shot.thumbnailUrl,
|
||||
})),
|
||||
),
|
||||
...assetTasks.map((task) => ({
|
||||
task,
|
||||
label: task.asset?.assetCode ?? TASK_TYPE_LABELS[task.type] ?? task.type,
|
||||
description: null,
|
||||
thumbnailUrl: null,
|
||||
})),
|
||||
];
|
||||
|
||||
const filteredFlatItems = allFlatItems
|
||||
.filter((item) => taskMatchesFilter(item.task))
|
||||
.sort((a, b) => {
|
||||
const aDate = getLatestVersion(a.task)?.createdAt ?? '';
|
||||
const bDate = getLatestVersion(b.task)?.createdAt ?? '';
|
||||
return bDate.localeCompare(aDate);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-white">
|
||||
<header className="border-b border-zinc-800 bg-zinc-900">
|
||||
@@ -263,208 +325,154 @@ export default function ClientPortalPage({
|
||||
</p>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-3 mt-6">
|
||||
<div className="bg-zinc-800 rounded-lg px-4 py-3 text-center min-w-[80px]">
|
||||
<button
|
||||
onClick={() => setStatusFilter(null)}
|
||||
className={cn(
|
||||
'rounded-lg px-4 py-3 text-center min-w-[80px] transition-all',
|
||||
!statusFilter
|
||||
? 'bg-zinc-700 ring-1 ring-zinc-500'
|
||||
: 'bg-zinc-800 hover:bg-zinc-700/80',
|
||||
)}
|
||||
>
|
||||
<p className="text-2xl font-bold text-white">{totalTasks}</p>
|
||||
<p className="text-xs text-zinc-400 mt-0.5">Items</p>
|
||||
</div>
|
||||
<div className="bg-emerald-900/30 border border-emerald-800/30 rounded-lg px-4 py-3 text-center min-w-[80px]">
|
||||
</button>
|
||||
<button
|
||||
onClick={() => toggleStatusFilter('APPROVED')}
|
||||
className={cn(
|
||||
'rounded-lg px-4 py-3 text-center min-w-[80px] transition-all border',
|
||||
statusFilter === 'APPROVED'
|
||||
? 'bg-emerald-900/50 border-emerald-700/60 ring-1 ring-emerald-600/50'
|
||||
: 'bg-emerald-900/30 border-emerald-800/30 hover:bg-emerald-900/50',
|
||||
)}
|
||||
>
|
||||
<p className="text-2xl font-bold text-emerald-400">{approved}</p>
|
||||
<p className="text-xs text-zinc-400 mt-0.5">Approved</p>
|
||||
</div>
|
||||
<div className="bg-amber-900/20 border border-amber-800/20 rounded-lg px-4 py-3 text-center min-w-[80px]">
|
||||
</button>
|
||||
<button
|
||||
onClick={() => toggleStatusFilter('PENDING_REVIEW')}
|
||||
className={cn(
|
||||
'rounded-lg px-4 py-3 text-center min-w-[80px] transition-all border',
|
||||
statusFilter === 'PENDING_REVIEW'
|
||||
? 'bg-amber-900/40 border-amber-700/50 ring-1 ring-amber-600/50'
|
||||
: 'bg-amber-900/20 border-amber-800/20 hover:bg-amber-900/40',
|
||||
)}
|
||||
>
|
||||
<p className="text-2xl font-bold text-amber-400">{pending}</p>
|
||||
<p className="text-xs text-zinc-400 mt-0.5">Awaiting Review</p>
|
||||
</div>
|
||||
</button>
|
||||
{needsChanges > 0 && (
|
||||
<div className="bg-red-900/20 border border-red-800/20 rounded-lg px-4 py-3 text-center min-w-[80px]">
|
||||
<p className="text-2xl font-bold text-red-400">
|
||||
{needsChanges}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => toggleStatusFilter('NEEDS_CHANGES')}
|
||||
className={cn(
|
||||
'rounded-lg px-4 py-3 text-center min-w-[80px] transition-all border',
|
||||
statusFilter === 'NEEDS_CHANGES'
|
||||
? 'bg-red-900/40 border-red-700/50 ring-1 ring-red-600/50'
|
||||
: 'bg-red-900/20 border-red-800/20 hover:bg-red-900/40',
|
||||
)}
|
||||
>
|
||||
<p className="text-2xl font-bold text-red-400">{needsChanges}</p>
|
||||
<p className="text-xs text-zinc-400 mt-0.5">Needs Changes</p>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="max-w-5xl mx-auto px-6 py-8 space-y-4">
|
||||
{Object.entries(shotsByEpisode).map(([episode, epShots]) => {
|
||||
const isCollapsed = collapsedEpisodes.has(episode);
|
||||
const epTasks = epShots.flatMap((s) => s.tasks);
|
||||
const epApproved = epTasks.filter(
|
||||
(t) => getLatestVersion(t)?.approvalStatus === 'APPROVED',
|
||||
).length;
|
||||
const epChanges = epTasks.filter((t) =>
|
||||
['REJECTED', 'NEEDS_CHANGES'].includes(
|
||||
getLatestVersion(t)?.approvalStatus ?? '',
|
||||
),
|
||||
).length;
|
||||
const epPending = epTasks.length - epApproved - epChanges;
|
||||
|
||||
return (
|
||||
<div key={episode} className="rounded-xl border border-zinc-800 overflow-hidden">
|
||||
{/* Episode header — clickable */}
|
||||
<button
|
||||
className="w-full flex items-center gap-3 px-5 py-4 bg-zinc-900 hover:bg-zinc-800/80 transition-colors text-left"
|
||||
onClick={() => toggleEpisode(episode)}
|
||||
>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
'h-4 w-4 text-zinc-400 shrink-0 transition-transform duration-200',
|
||||
isCollapsed && '-rotate-90',
|
||||
)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-xs font-semibold uppercase tracking-widest text-zinc-400">
|
||||
{isEpisodic ? `Episode ${episode}` : episode}
|
||||
</span>
|
||||
<span className="ml-3 text-xs text-zinc-600">
|
||||
{epShots.length} {epShots.length === 1 ? 'shot' : 'shots'}
|
||||
</span>
|
||||
</div>
|
||||
{/* Per-episode progress pills */}
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{epApproved > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-900/40 border border-emerald-800/40 text-emerald-400 text-xs">
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
{epApproved}
|
||||
</span>
|
||||
)}
|
||||
{epChanges > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-900/30 border border-red-800/30 text-red-400 text-xs">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
{epChanges}
|
||||
</span>
|
||||
)}
|
||||
{epPending > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-900/20 border border-amber-800/20 text-amber-400 text-xs">
|
||||
<Clock className="h-3 w-3" />
|
||||
{epPending}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Collapsible shot list */}
|
||||
{!isCollapsed && (
|
||||
<div className="divide-y divide-zinc-800/60 bg-zinc-950/40">
|
||||
{epShots.map((shot) => (
|
||||
<div key={shot.id} className="px-5 py-4 space-y-2">
|
||||
<div className="flex items-center gap-3">
|
||||
{shot.thumbnailUrl && (
|
||||
<div className="relative flex-shrink-0 w-32 aspect-[2.39] rounded overflow-hidden border border-zinc-800">
|
||||
<Image
|
||||
src={shot.thumbnailUrl}
|
||||
alt={shot.shotCode}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<p className="font-mono text-sm font-semibold text-zinc-300">
|
||||
{shot.shotCode}
|
||||
{shot.description && (
|
||||
<span className="font-sans font-normal text-zinc-500 ml-2">
|
||||
{shot.description}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1.5 pl-3 border-l border-zinc-800">
|
||||
{shot.tasks.map((task) => {
|
||||
const ver = getLatestVersion(task);
|
||||
const approvalKey =
|
||||
ver?.approvalStatus ?? 'PENDING_REVIEW';
|
||||
const approval =
|
||||
APPROVAL_STYLES[approvalKey] ??
|
||||
APPROVAL_STYLES.PENDING_REVIEW;
|
||||
const ApprovalIcon = approval.Icon;
|
||||
return (
|
||||
<Link
|
||||
key={task.id}
|
||||
href={ver ? `/client/${token}/review/${ver.id}` : '#'}
|
||||
className={cn(
|
||||
'flex items-center gap-4 p-4 rounded-xl border transition-all group',
|
||||
'bg-zinc-900 border-zinc-800 hover:border-zinc-600 hover:bg-zinc-800/70',
|
||||
!ver && 'pointer-events-none opacity-40',
|
||||
)}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white">
|
||||
{task.title}
|
||||
</p>
|
||||
<p className="text-xs text-zinc-500">
|
||||
{TASK_TYPE_LABELS[task.type] ?? task.type}
|
||||
</p>
|
||||
{ver?.notes && (
|
||||
<p className="text-xs text-zinc-500 truncate italic mt-0.5">
|
||||
“{ver.notes}”
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{ver ? (
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium',
|
||||
approval.className,
|
||||
)}
|
||||
>
|
||||
<ApprovalIcon className="h-3 w-3" />
|
||||
{approval.label}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs text-zinc-600 shrink-0">
|
||||
No versions yet
|
||||
</span>
|
||||
)}
|
||||
<ChevronRight className="h-4 w-4 text-zinc-600 group-hover:text-zinc-400 shrink-0 transition-colors" />
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{assetTasks.length > 0 && (
|
||||
<div className="rounded-xl border border-zinc-800 overflow-hidden">
|
||||
{/* Assets header */}
|
||||
{/* Controls bar */}
|
||||
<div className="flex items-center justify-between gap-3 flex-wrap">
|
||||
<div>
|
||||
{statusFilter && (
|
||||
<span className="text-sm text-zinc-400">
|
||||
Showing:{' '}
|
||||
<span className="text-white font-medium">
|
||||
{statusFilter === 'APPROVED'
|
||||
? 'Approved'
|
||||
: statusFilter === 'PENDING_REVIEW'
|
||||
? 'Awaiting Review'
|
||||
: 'Needs Changes'}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
className="w-full flex items-center gap-3 px-5 py-4 bg-zinc-900 hover:bg-zinc-800/80 transition-colors text-left"
|
||||
onClick={() => toggleEpisode('__assets__')}
|
||||
onClick={() =>
|
||||
setSortMode((prev) => (prev === 'episode' ? 'recent' : 'episode'))
|
||||
}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all',
|
||||
sortMode === 'recent'
|
||||
? 'bg-amber-500/10 border-amber-500/30 text-amber-400'
|
||||
: 'bg-zinc-800 border-zinc-700 text-zinc-400 hover:text-zinc-300',
|
||||
)}
|
||||
>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
'h-4 w-4 text-zinc-400 shrink-0 transition-transform duration-200',
|
||||
collapsedEpisodes.has('__assets__') && '-rotate-90',
|
||||
)}
|
||||
/>
|
||||
<span className="text-xs font-semibold uppercase tracking-widest text-zinc-400 flex-1">
|
||||
Assets
|
||||
</span>
|
||||
<span className="text-xs text-zinc-600">
|
||||
{assetTasks.length} {assetTasks.length === 1 ? 'item' : 'items'}
|
||||
</span>
|
||||
<ArrowUpDown className="h-3 w-3" />
|
||||
{sortMode === 'recent' ? 'Sorted by Recent' : 'Sort by Recent'}
|
||||
</button>
|
||||
{(statusFilter !== null || sortMode !== 'episode') && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setStatusFilter(null);
|
||||
setSortMode('episode');
|
||||
}}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-zinc-700 bg-zinc-800 text-zinc-400 hover:text-zinc-300 transition-all"
|
||||
>
|
||||
<RotateCcw className="h-3 w-3" />
|
||||
Reset
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!collapsedEpisodes.has('__assets__') && (
|
||||
<div className="divide-y divide-zinc-800/60 bg-zinc-950/40 p-4 space-y-2">
|
||||
{assetTasks.map((task) => {
|
||||
const ver = getLatestVersion(task);
|
||||
const approvalKey = ver?.approvalStatus ?? 'PENDING_REVIEW';
|
||||
const approval =
|
||||
APPROVAL_STYLES[approvalKey] ??
|
||||
APPROVAL_STYLES.PENDING_REVIEW;
|
||||
const ApprovalIcon = approval.Icon;
|
||||
return (
|
||||
{sortMode === 'recent' ? (
|
||||
<div className="space-y-3">
|
||||
{filteredFlatItems.length === 0 ? (
|
||||
<div className="text-center py-16 text-zinc-500">
|
||||
<Film className="h-10 w-10 mx-auto mb-3 opacity-30" />
|
||||
<p>
|
||||
{statusFilter
|
||||
? 'No items match the current filter.'
|
||||
: 'No items have been shared for review yet.'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredFlatItems.map((item) => {
|
||||
const task = item.task;
|
||||
const ver = getLatestVersion(task);
|
||||
const approvalKey = ver?.approvalStatus ?? 'PENDING_REVIEW';
|
||||
const approval =
|
||||
APPROVAL_STYLES[approvalKey] ?? APPROVAL_STYLES.PENDING_REVIEW;
|
||||
const ApprovalIcon = approval.Icon;
|
||||
return (
|
||||
<div key={task.id} className="space-y-1">
|
||||
<div className="flex items-center gap-2 px-1">
|
||||
{item.thumbnailUrl && (
|
||||
<div className="relative w-14 aspect-[2.39] rounded overflow-hidden border border-zinc-800 shrink-0">
|
||||
<Image
|
||||
src={item.thumbnailUrl}
|
||||
alt={item.label}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<p className="font-mono text-xs text-zinc-500">
|
||||
{item.label}
|
||||
{item.description && (
|
||||
<span className="font-sans text-zinc-600 ml-2">
|
||||
{item.description}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{ver?.createdAt && (
|
||||
<p className="ml-auto text-xs text-zinc-600">
|
||||
{formatDate(ver.createdAt)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Link
|
||||
key={task.id}
|
||||
href={ver ? `/client/${token}/review/${ver.id}` : '#'}
|
||||
className={cn(
|
||||
'flex items-center gap-4 p-4 rounded-xl border transition-all group',
|
||||
@@ -472,19 +480,13 @@ export default function ClientPortalPage({
|
||||
!ver && 'pointer-events-none opacity-40',
|
||||
)}
|
||||
>
|
||||
<Package className="h-4 w-4 text-zinc-500 shrink-0" />
|
||||
<div className="min-w-[90px]">
|
||||
<p className="font-mono font-semibold text-white text-sm">
|
||||
{task.asset?.assetCode ?? TASK_TYPE_LABELS[task.type]}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white">
|
||||
{task.title}
|
||||
</p>
|
||||
<p className="text-xs text-zinc-500">
|
||||
{TASK_TYPE_LABELS[task.type] ?? task.type}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-zinc-300 truncate">
|
||||
{task.title}
|
||||
</p>
|
||||
{ver?.notes && (
|
||||
<p className="text-xs text-zinc-500 truncate italic mt-0.5">
|
||||
“{ver.notes}”
|
||||
@@ -492,17 +494,15 @@ export default function ClientPortalPage({
|
||||
)}
|
||||
</div>
|
||||
{ver ? (
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium',
|
||||
approval.className,
|
||||
)}
|
||||
>
|
||||
<ApprovalIcon className="h-3 w-3" />
|
||||
{approval.label}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium shrink-0',
|
||||
approval.className,
|
||||
)}
|
||||
>
|
||||
<ApprovalIcon className="h-3 w-3" />
|
||||
{approval.label}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-zinc-600 shrink-0">
|
||||
No versions yet
|
||||
@@ -510,18 +510,263 @@ export default function ClientPortalPage({
|
||||
)}
|
||||
<ChevronRight className="h-4 w-4 text-zinc-600 group-hover:text-zinc-400 shrink-0 transition-colors" />
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
) : (
|
||||
<>
|
||||
{Object.entries(shotsByEpisode).map(([episode, epShots]) => {
|
||||
const filteredEpShots = epShots
|
||||
.map((shot) => ({ ...shot, tasks: shot.tasks.filter(taskMatchesFilter) }))
|
||||
.filter((shot) => shot.tasks.length > 0);
|
||||
|
||||
{totalTasks === 0 && (
|
||||
<div className="text-center py-16 text-zinc-500">
|
||||
<Film className="h-10 w-10 mx-auto mb-3 opacity-30" />
|
||||
<p>No items have been shared for review yet.</p>
|
||||
</div>
|
||||
if (filteredEpShots.length === 0) return null;
|
||||
|
||||
const isCollapsed = collapsedEpisodes.has(episode);
|
||||
const epTasks = filteredEpShots.flatMap((s) => s.tasks);
|
||||
const epApproved = epTasks.filter(
|
||||
(t) => getLatestVersion(t)?.approvalStatus === 'APPROVED',
|
||||
).length;
|
||||
const epChanges = epTasks.filter((t) =>
|
||||
['REJECTED', 'NEEDS_CHANGES'].includes(
|
||||
getLatestVersion(t)?.approvalStatus ?? '',
|
||||
),
|
||||
).length;
|
||||
const epPending = epTasks.length - epApproved - epChanges;
|
||||
|
||||
return (
|
||||
<div key={episode} className="rounded-xl border border-zinc-800 overflow-hidden">
|
||||
{/* Episode header — clickable */}
|
||||
<button
|
||||
className="w-full flex items-center gap-3 px-5 py-4 bg-zinc-900 hover:bg-zinc-800/80 transition-colors text-left"
|
||||
onClick={() => toggleEpisode(episode)}
|
||||
>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
'h-4 w-4 text-zinc-400 shrink-0 transition-transform duration-200',
|
||||
isCollapsed && '-rotate-90',
|
||||
)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-xs font-semibold uppercase tracking-widest text-zinc-400">
|
||||
{isEpisodic ? `Episode ${episode}` : episode}
|
||||
</span>
|
||||
<span className="ml-3 text-xs text-zinc-600">
|
||||
{filteredEpShots.length}{' '}
|
||||
{filteredEpShots.length === 1 ? 'shot' : 'shots'}
|
||||
</span>
|
||||
</div>
|
||||
{/* Per-episode progress pills */}
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{epApproved > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-900/40 border border-emerald-800/40 text-emerald-400 text-xs">
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
{epApproved}
|
||||
</span>
|
||||
)}
|
||||
{epChanges > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-900/30 border border-red-800/30 text-red-400 text-xs">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
{epChanges}
|
||||
</span>
|
||||
)}
|
||||
{epPending > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-900/20 border border-amber-800/20 text-amber-400 text-xs">
|
||||
<Clock className="h-3 w-3" />
|
||||
{epPending}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Collapsible shot list */}
|
||||
{!isCollapsed && (
|
||||
<div className="divide-y divide-zinc-800/60 bg-zinc-950/40">
|
||||
{filteredEpShots.map((shot) => (
|
||||
<div key={shot.id} className="px-5 py-4 space-y-2">
|
||||
<div className="flex items-center gap-3">
|
||||
{shot.thumbnailUrl && (
|
||||
<div className="relative flex-shrink-0 w-32 aspect-[2.39] rounded overflow-hidden border border-zinc-800">
|
||||
<Image
|
||||
src={shot.thumbnailUrl}
|
||||
alt={shot.shotCode}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<p className="font-mono text-sm font-semibold text-zinc-300">
|
||||
{shot.shotCode}
|
||||
{shot.description && (
|
||||
<span className="font-sans font-normal text-zinc-500 ml-2">
|
||||
{shot.description}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-1.5 pl-3 border-l border-zinc-800">
|
||||
{shot.tasks.map((task) => {
|
||||
const ver = getLatestVersion(task);
|
||||
const approvalKey =
|
||||
ver?.approvalStatus ?? 'PENDING_REVIEW';
|
||||
const approval =
|
||||
APPROVAL_STYLES[approvalKey] ??
|
||||
APPROVAL_STYLES.PENDING_REVIEW;
|
||||
const ApprovalIcon = approval.Icon;
|
||||
return (
|
||||
<Link
|
||||
key={task.id}
|
||||
href={ver ? `/client/${token}/review/${ver.id}` : '#'}
|
||||
className={cn(
|
||||
'flex items-center gap-4 p-4 rounded-xl border transition-all group',
|
||||
'bg-zinc-900 border-zinc-800 hover:border-zinc-600 hover:bg-zinc-800/70',
|
||||
!ver && 'pointer-events-none opacity-40',
|
||||
)}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-white">
|
||||
{task.title}
|
||||
</p>
|
||||
<p className="text-xs text-zinc-500">
|
||||
{TASK_TYPE_LABELS[task.type] ?? task.type}
|
||||
</p>
|
||||
{ver?.notes && (
|
||||
<p className="text-xs text-zinc-500 truncate italic mt-0.5">
|
||||
“{ver.notes}”
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{ver ? (
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium',
|
||||
approval.className,
|
||||
)}
|
||||
>
|
||||
<ApprovalIcon className="h-3 w-3" />
|
||||
{approval.label}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs text-zinc-600 shrink-0">
|
||||
No versions yet
|
||||
</span>
|
||||
)}
|
||||
<ChevronRight className="h-4 w-4 text-zinc-600 group-hover:text-zinc-400 shrink-0 transition-colors" />
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{filteredAssetTasks.length > 0 && (
|
||||
<div className="rounded-xl border border-zinc-800 overflow-hidden">
|
||||
{/* Assets header */}
|
||||
<button
|
||||
className="w-full flex items-center gap-3 px-5 py-4 bg-zinc-900 hover:bg-zinc-800/80 transition-colors text-left"
|
||||
onClick={() => toggleEpisode('__assets__')}
|
||||
>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
'h-4 w-4 text-zinc-400 shrink-0 transition-transform duration-200',
|
||||
collapsedEpisodes.has('__assets__') && '-rotate-90',
|
||||
)}
|
||||
/>
|
||||
<span className="text-xs font-semibold uppercase tracking-widest text-zinc-400 flex-1">
|
||||
Assets
|
||||
</span>
|
||||
<span className="text-xs text-zinc-600">
|
||||
{filteredAssetTasks.length}{' '}
|
||||
{filteredAssetTasks.length === 1 ? 'item' : 'items'}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{!collapsedEpisodes.has('__assets__') && (
|
||||
<div className="divide-y divide-zinc-800/60 bg-zinc-950/40 p-4 space-y-2">
|
||||
{filteredAssetTasks.map((task) => {
|
||||
const ver = getLatestVersion(task);
|
||||
const approvalKey = ver?.approvalStatus ?? 'PENDING_REVIEW';
|
||||
const approval =
|
||||
APPROVAL_STYLES[approvalKey] ??
|
||||
APPROVAL_STYLES.PENDING_REVIEW;
|
||||
const ApprovalIcon = approval.Icon;
|
||||
return (
|
||||
<Link
|
||||
key={task.id}
|
||||
href={ver ? `/client/${token}/review/${ver.id}` : '#'}
|
||||
className={cn(
|
||||
'flex items-center gap-4 p-4 rounded-xl border transition-all group',
|
||||
'bg-zinc-900 border-zinc-800 hover:border-zinc-600 hover:bg-zinc-800/70',
|
||||
!ver && 'pointer-events-none opacity-40',
|
||||
)}
|
||||
>
|
||||
<Package className="h-4 w-4 text-zinc-500 shrink-0" />
|
||||
<div className="min-w-[90px]">
|
||||
<p className="font-mono font-semibold text-white text-sm">
|
||||
{task.asset?.assetCode ?? TASK_TYPE_LABELS[task.type]}
|
||||
</p>
|
||||
<p className="text-xs text-zinc-500">
|
||||
{TASK_TYPE_LABELS[task.type] ?? task.type}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-zinc-300 truncate">
|
||||
{task.title}
|
||||
</p>
|
||||
{ver?.notes && (
|
||||
<p className="text-xs text-zinc-500 truncate italic mt-0.5">
|
||||
“{ver.notes}”
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{ver ? (
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium',
|
||||
approval.className,
|
||||
)}
|
||||
>
|
||||
<ApprovalIcon className="h-3 w-3" />
|
||||
{approval.label}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-xs text-zinc-600 shrink-0">
|
||||
No versions yet
|
||||
</span>
|
||||
)}
|
||||
<ChevronRight className="h-4 w-4 text-zinc-600 group-hover:text-zinc-400 shrink-0 transition-colors" />
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalTasks === 0 && (
|
||||
<div className="text-center py-16 text-zinc-500">
|
||||
<Film className="h-10 w-10 mx-auto mb-3 opacity-30" />
|
||||
<p>No items have been shared for review yet.</p>
|
||||
</div>
|
||||
)}
|
||||
{totalTasks > 0 && filteredFlatItems.length === 0 && (
|
||||
<div className="text-center py-16 text-zinc-500">
|
||||
<Film className="h-10 w-10 mx-auto mb-3 opacity-30" />
|
||||
<p>No items match the current filter.</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user