futher client page updates

app/client/[token]/review/[versionId]/page.tsx

@@ -26,6 +26,7 @@ import {
   MessageSquare,
   Send,
   Clock,
+  ChevronRight,
 } from "lucide-react";
 import { useReviewStore } from "@/hooks/use-review-player";
 import { ReviewPasswordGate } from "@/components/clients/ReviewPasswordGate";
@@ -71,6 +72,8 @@ const APPROVAL_STATUS_STYLES: Record<string, string> = {
   NEEDS_CHANGES: "bg-orange-500/10 text-orange-400 border-orange-500/20",
 };
 
+const QUEUE_KEY = 'client-portal-queue';
+
 export default function ClientReviewPage({
   params,
 }: {
@@ -99,6 +102,7 @@ export default function ClientReviewPage({
   const [approvalNotes, setApprovalNotes] = useState("");
   const [submittingApproval, setSubmittingApproval] = useState(false);
   const [currentApprovalStatus, setCurrentApprovalStatus] = useState("PENDING_REVIEW");
+  const [nextReview, setNextReview] = useState<{ versionId: string; label: string } | null>(null);
 
   const playerRef = useRef<ReviewPlayerRef>(null);
   const { toast } = useToast();
@@ -111,6 +115,19 @@ export default function ClientReviewPage({
     });
   }, [params]);
 
+  useEffect(() => {
+    if (!versionId) return;
+    try {
+      const queueJson = sessionStorage.getItem(QUEUE_KEY);
+      if (!queueJson) { setNextReview(null); return; }
+      const queue: Array<{ versionId: string; label: string }> = JSON.parse(queueJson);
+      const idx = queue.findIndex((item) => item.versionId === versionId);
+      setNextReview(idx >= 0 && idx < queue.length - 1 ? queue[idx + 1] : null);
+    } catch {
+      setNextReview(null);
+    }
+  }, [versionId]);
+
   const loadVersion = (t: string, vId: string) => {
     setLoading(true);
     setError(null);
@@ -320,6 +337,19 @@ export default function ClientReviewPage({
             <CheckCircle2 className="h-3.5 w-3.5" />
             Approve
           </Button>
+          {nextReview && (
+            <>
+              <div className="h-6 w-px bg-zinc-700" />
+              <Link
+                href={`/client/${token}/review/${nextReview.versionId}`}
+                className="inline-flex items-center gap-1 text-sm font-medium text-zinc-300 hover:text-white transition-colors shrink-0"
+              >
+                <span className="font-mono text-xs text-zinc-500 hidden sm:inline">{nextReview.label}</span>
+                Next
+                <ChevronRight className="h-4 w-4" />
+              </Link>
+            </>
+          )}
         </div>
       </header>