added the routing for the refresh issue

app/results/[videoId]/page.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter, useParams } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Loader2, TrendingUp } from "lucide-react"
+import VideoPlayerSection from "@/components/video-player-section"
+import { SidebarNavigation } from "@/components/sidebar-navigation"
+import {
+    type SessionContext,
+    loadSession,
+    clearSession
+} from "@/lib/api"
+import { getVideoFile, clearVideoFile } from "@/lib/video-storage"
+import { DetectionData, DetectionType } from "@/lib/types"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL
+
+export default function VideoResultsPage() {
+    const router = useRouter()
+    const { videoId } = useParams() as { videoId: string }
+    const [session, setSession] = useState<SessionContext | null>(null)
+    const [detectionData, setDetectionData] = useState<DetectionData | null>(null)
+    const [detectionType, setDetectionType] = useState<DetectionType>("pothole-detection")
+    const [videoFile, setVideoFile] = useState<File | null>(null)
+    const [isLoading, setIsLoading] = useState(true)
+    const [error, setError] = useState<string | null>(null)
+
+    useEffect(() => {
+        const storedSession = loadSession()
+        setSession(storedSession)
+
+        const fetchResults = async () => {
+            try {
+                // Fetch detection data from backend
+                const response = await fetch(`${API_URL}/results/${videoId}`, {
+                    headers: { "ngrok-skip-browser-warning": "true" }
+                })
+
+                if (!response.ok) {
+                    if (response.status === 404) {
+                        throw new Error("Results not found for this video.")
+                    }
+                    throw new Error(`Failed to load results: ${response.status}`)
+                }
+
+                const data = await response.json()
+                setDetectionData(data as any)
+
+                // Try to infer detection type from results if possible
+                if (data.summary?.unique_signboards !== undefined && data.summary?.unique_signboards > 0) {
+                    setDetectionType("sign-board-detection")
+                } else if (data.summary?.unique_potholes !== undefined && data.summary?.unique_potholes > 0) {
+                    setDetectionType("pothole-detection")
+                }
+
+                // Retrieve video file from IndexedDB
+                const storedVideoFile = await getVideoFile(videoId)
+                if (storedVideoFile) {
+                    setVideoFile(storedVideoFile)
+                }
+            } catch (err) {
+                setError(err instanceof Error ? err.message : "Failed to load results")
+            } finally {
+                setIsLoading(false)
+            }
+        }
+
+        if (videoId) {
+            fetchResults()
+        }
+    }, [videoId])
+
+    const handleNewAnalysis = async () => {
+        if (videoId) {
+            try {
+                await clearVideoFile(videoId)
+            } catch (err) {
+                console.error("Failed to clear video file:", err)
+            }
+        }
+        clearSession()
+        router.push("/new-analysis")
+    }
+
+    const getTitle = () => {
+        if (detectionType === "pothole-detection") return "Pothole Detection Results"
+        if (detectionType === "sign-board-detection") return "Signboard Detection Results"
+        return "Pothole & Signboard Detection Results"
+    }
+
+    if (isLoading) {
+        return (
+            <div className="min-h-screen bg-mesh-gradient flex items-center justify-center">
+                <div className="flex flex-col items-center gap-4 p-8 rounded-2xl bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl shadow-lg">
+                    <Loader2 className="h-8 w-8 animate-spin text-indigo-500" />
+                    <p className="text-gray-500">Loading detection results...</p>
+                </div>
+            </div>
+        )
+    }
+
+    if (error) {
+        return (
+            <div className="min-h-screen bg-mesh-gradient flex items-center justify-center">
+                <div className="flex flex-col items-center gap-4 p-8 rounded-2xl bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl shadow-lg text-center">
+                    <p className="text-red-500 font-medium">{error}</p>
+                    <div className="flex gap-4 mt-4">
+                        <Button onClick={() => router.push("/upload")} variant="outline">Back to Upload</Button>
+                        <Button onClick={handleNewAnalysis} className="bg-gradient-to-r from-indigo-500 to-purple-600 text-white">New Analysis</Button>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
+            <SidebarNavigation />
+            <main className="ml-16 min-h-screen">
+                <div className="container mx-auto px-6 py-8 max-w-full">
+                    <div className="mb-8 flex items-center gap-5">
+                        <div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
+                            <TrendingUp className="h-8 w-8 text-white" />
+                        </div>
+                        <div>
+                            <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent leading-tight">
+                                {getTitle()}
+                            </h1>
+                            <p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium">
+                                Video ID: {videoId}
+                            </p>
+                        </div>
+                    </div>
+
+                    {session && (
+                        <div className="mb-6">
+                            <div className="flex items-center justify-between p-4 rounded-xl bg-card border border-[var(--border)] shadow-sm backdrop-blur-sm bg-white/60 dark:bg-gray-800/60">
+                                <div className="flex items-center gap-12">
+                                    <div className="flex flex-col">
+                                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span>
+                                        <span className="text-base font-bold text-gray-900 dark:text-white leading-tight">
+                                            {session.projectName}
+                                        </span>
+                                    </div>
+                                    <div className="flex flex-col">
+                                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Package</span>
+                                        <span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
+                                            {session.packageName}
+                                        </span>
+                                    </div>
+                                    <div className="flex flex-col">
+                                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Location</span>
+                                        <span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
+                                            {session.locationName}
+                                        </span>
+                                    </div>
+                                </div>
+                                <Button onClick={handleNewAnalysis} variant="outline" size="sm" className="text-xs">
+                                    Start New
+                                </Button>
+                            </div>
+                        </div>
+                    )}
+
+                    {detectionData && (
+                        <VideoPlayerSection
+                            data={detectionData}
+                            videoId={videoId}
+                            videoFile={videoFile}
+                            detectionType={detectionType}
+                            projectId={session?.projectId || undefined}
+                        />
+                    )}
+                </div>
+            </main>
+        </div>
+    )
+}

app/results/page.tsx

@@ -39,38 +39,13 @@ export default function ResultsPage() {
             return
         }
 
+        // If we have a videoId, redirect to the dynamic results page
+        if (videoData.videoId) {
+            router.replace(`/results/${videoData.videoId}`)
+            return
+        }
+
         setSession(storedSession)
-        setVideoId(videoData.videoId)
-        setDetectionType(videoData.detectionType as DetectionType)
-
-        // Fetch detection results and video file
-        const fetchResults = async () => {
-            try {
-                // Fetch detection data
-                const response = await fetch(`${API_URL}/results/${videoData.videoId}`, {
-                    headers: { "ngrok-skip-browser-warning": "true" }
-                })
-
-                if (!response.ok) {
-                    throw new Error(`Failed to load results: ${response.status}`)
-                }
-
-                const data = await response.json()
-                setDetectionData(data as any)
-
-                // Retrieve video file from IndexedDB
-                const storedVideoFile = await getVideoFile(videoData.videoId)
-                if (storedVideoFile) {
-                    setVideoFile(storedVideoFile)
-                }
-            } catch (err) {
-                setError(err instanceof Error ? err.message : "Failed to load results")
-            } finally {
-                setIsLoading(false)
-            }
-        }
-
-        fetchResults()
     }, [router])
 
     const handleNewAnalysis = async () => {

app/upload/[videoId]/page.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+import { useState, useEffect, useCallback } from "react"
+import { useRouter, useParams } from "next/navigation"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Loader2, TrendingUp } from "lucide-react"
+import { SidebarNavigation } from "@/components/sidebar-navigation"
+import {
+    type SessionContext,
+    loadSession,
+} from "@/lib/api"
+import { getVideoFile } from "@/lib/video-storage"
+import { storeVideoFile } from "@/lib/video-storage"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL
+const WS_URL = API_URL?.replace(/^https:\/\//, "wss://").replace(/^http:\/\//, "ws://")
+
+export default function VideoProcessingPage() {
+    const router = useRouter()
+    const { videoId } = useParams() as { videoId: string }
+    const [session, setSession] = useState<SessionContext | null>(null)
+    const [isLoading, setIsLoading] = useState(true)
+
+    // Processing states
+    const [progress, setProgress] = useState(0)
+    const [statusMessage, setStatusMessage] = useState("Initializing...")
+    const [error, setError] = useState<string | null>(null)
+    const [detectionType, setDetectionType] = useState<string>("pothole-detection")
+
+    const connectWebSocket = useCallback((vid: string) => {
+        const ws = new WebSocket(`${WS_URL}/ws/${vid}`)
+
+        ws.onmessage = async (event) => {
+            const data = JSON.parse(event.data)
+
+            if (data.type === "progress" || data.progress !== undefined) {
+                setProgress(data.progress || 0)
+                let message = data.message || "Processing..."
+                if (data.unique_potholes !== undefined) {
+                    message += ` | Unique: ${data.unique_potholes} | Total: ${data.total_detections || 0}`
+                } else if (data.unique_signboards !== undefined) {
+                    message += ` | Unique: ${data.unique_signboards} | Total: ${data.total_detections || 0}`
+                }
+                setStatusMessage(message)
+            }
+
+            if (data.type === "complete" || data.status === "completed") {
+                setStatusMessage("Processing completed! Finalizing...")
+                ws.close()
+
+                // Navigate to results
+                setTimeout(() => router.push(`/results/${vid}`), 1000)
+            }
+
+            if (data.type === "error") {
+                setError("Error: " + data.message)
+                setStatusMessage("")
+                ws.close()
+            }
+        }
+
+        ws.onerror = () => {
+            setStatusMessage("Connection lost. Reconnecting...")
+            setTimeout(() => connectWebSocket(vid), 3000)
+        }
+
+        return ws
+    }, [router])
+
+    useEffect(() => {
+        const storedSession = loadSession()
+        setSession(storedSession)
+
+        const checkStatus = async () => {
+            try {
+                const response = await fetch(`${API_URL}/status/${videoId}`, {
+                    headers: { "ngrok-skip-browser-warning": "true" }
+                })
+
+                if (response.status === 404) {
+                    router.replace("/upload")
+                    return
+                }
+
+                if (!response.ok) {
+                    throw new Error("Failed to fetch status")
+                }
+
+                const statusData = await response.json()
+
+                if (statusData.status === "completed") {
+                    router.replace(`/results/${videoId}`)
+                    return
+                }
+
+                if (statusData.status === "error") {
+                    setError(statusData.message || "An error occurred during processing.")
+                    setIsLoading(false)
+                    return
+                }
+
+                // If processing, start WebSocket
+                setProgress(statusData.progress || 0)
+                setStatusMessage(statusData.message || "Resuming processing...")
+                connectWebSocket(videoId)
+                setIsLoading(false)
+
+            } catch (err) {
+                console.error("Status check failed:", err)
+                setError("Failed to connect to server.")
+                setIsLoading(false)
+            }
+        }
+
+        if (videoId) {
+            checkStatus()
+        }
+    }, [videoId, router, connectWebSocket])
+
+    if (isLoading) {
+        return (
+            <div className="min-h-screen bg-mesh-gradient flex items-center justify-center">
+                <div className="p-8 rounded-2xl bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl shadow-lg">
+                    <Loader2 className="h-8 w-8 animate-spin text-indigo-500" />
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
+            <SidebarNavigation />
+            <main className="ml-16 min-h-screen relative overflow-hidden flex flex-col">
+                <div className="flex-1 container mx-auto px-6 py-6 max-w-7xl relative z-10 flex flex-col">
+                    <div className="mb-6 flex items-center gap-5">
+                        <div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
+                            <TrendingUp className="h-8 w-8 text-white" />
+                        </div>
+                        <div>
+                            <h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent leading-tight">
+                                Processing Analysis
+                            </h1>
+                        </div>
+                    </div>
+
+                    {session && (
+                        <div className="mb-4">
+                            <div className="rounded-xl px-4 py-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50">
+                                <div className="flex items-center gap-12">
+                                    <div className="flex flex-col">
+                                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span>
+                                        <span className="text-base font-bold text-gray-900 dark:text-white leading-tight">
+                                            {session.projectName}
+                                        </span>
+                                    </div>
+                                    <div className="flex flex-col">
+                                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Package</span>
+                                        <span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
+                                            {session.packageName}
+                                        </span>
+                                    </div>
+                                    <div className="flex flex-col">
+                                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Location</span>
+                                        <span className="text-sm font-bold text-gray-700 dark:text-gray-300 leading-tight">
+                                            {session.locationName}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    <Card className="rounded-2xl overflow-hidden bg-white/60 dark:bg-gray-900/60 backdrop-blur-xl border border-white/40 dark:border-gray-800/40 shadow-2xl flex flex-col items-center justify-center py-12 px-8 min-h-[450px]">
+                        <div className="flex flex-col items-center justify-center w-full max-w-4xl space-y-8">
+                            {/* Visual Spinner Area */}
+                            <div className="relative">
+                                <div className="h-24 w-24 rounded-full bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center border-4 border-blue-100 dark:border-blue-800/30">
+                                    <Loader2 className="h-10 w-10 text-blue-500 animate-spin" />
+                                </div>
+                            </div>
+
+                            <div className="text-center space-y-2">
+                                <h2 className="text-3xl font-extrabold text-gray-900 dark:text-white tracking-tight">
+                                    Processing Video
+                                </h2>
+                                <p className="text-sm font-medium text-gray-400 dark:text-gray-500 font-mono tracking-wider">
+                                    ID: {videoId}
+                                </p>
+                            </div>
+
+                            <div className="w-full space-y-4">
+                                <div className="flex items-center justify-between text-sm">
+                                    <span className="font-bold text-gray-500 dark:text-gray-400 text-xs uppercase tracking-widest">Processing Progress</span>
+                                    <span className="font-black text-blue-600 dark:text-blue-400 text-base">{progress}%</span>
+                                </div>
+                                <div className="h-3 rounded-full bg-blue-100 dark:bg-gray-800 overflow-hidden p-0.5 border border-blue-50 dark:border-gray-700">
+                                    <div
+                                        className="h-full bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full transition-all duration-1000 ease-in-out shadow-[0_0_15px_rgba(59,130,246,0.5)]"
+                                        style={{ width: `${progress}%` }}
+                                    />
+                                </div>
+                                <div className="text-center">
+                                    <p className="text-sm font-bold text-gray-500 dark:text-gray-400 animate-pulse">
+                                        {statusMessage}
+                                    </p>
+                                </div>
+                            </div>
+
+                            {error && (
+                                <div className="w-full p-4 rounded-xl bg-red-50/50 dark:bg-red-950/20 border border-red-200/50 dark:border-red-800/50 text-center">
+                                    <p className="text-red-600 dark:text-red-400 text-sm font-medium">{error}</p>
+                                    <button
+                                        onClick={() => window.location.reload()}
+                                        className="mt-3 text-xs font-bold text-red-700 dark:text-red-300 underline underline-offset-4"
+                                    >
+                                        Retry Connection
+                                    </button>
+                                </div>
+                            )}
+
+                            <div className="pt-8 text-center">
+                                {/* <p className="text-xs font-medium text-gray-400 dark:text-gray-500/60 max-w-sm mx-auto leading-relaxed">
+                                    You can safely refresh this page — progress will resume automatically.
+                                </p> */}
+                            </div>
+                        </div>
+                    </Card>
+
+                    <div className="mt-4 text-center">
+                        <p className="text-xs text-gray-400 dark:text-gray-500">
+                            Sentient Geeks Pvt. Ltd.
+                        </p>
+                    </div>
+                </div>
+            </main>
+        </div>
+    )
+}

app/upload/page.tsx

@@ -54,50 +54,7 @@ export default function UploadPage() {
         setIsLoading(false)
     }, [router])
 
-    const connectWebSocket = (videoId: string) => {
-        const ws = new WebSocket(`${WS_URL}/ws/${videoId}`)
 
-        ws.onmessage = async (event) => {
-            const data = JSON.parse(event.data)
-
-            if (data.type === "progress" || data.progress !== undefined) {
-                setProgress(data.progress || 0)
-                let message = data.message || "Processing..."
-                if (data.unique_potholes !== undefined) {
-                    message += ` | Unique: ${data.unique_potholes} | Total: ${data.total_detections || 0}`
-                } else if (data.unique_signboards !== undefined) {
-                    message += ` | Unique: ${data.unique_signboards} | Total: ${data.total_detections || 0}`
-                }
-                setStatusMessage(message)
-            }
-
-            if (data.type === "complete" || data.status === "completed") {
-                setStatusMessage("Processing completed! Saving video...")
-                ws.close()
-                if (file) {
-                    try {
-                        await storeVideoFile(videoId, file)
-                    } catch (err) {
-                        console.error("Failed to store video file:", err)
-                    }
-                }
-                saveVideoData({ videoId, detectionType })
-                setStatusMessage("Redirecting to results...")
-                setTimeout(() => router.push("/results"), 500)
-            }
-
-            if (data.type === "error") {
-                setError("Error: " + data.message)
-                setStatusMessage("")
-                setUploading(false)
-                ws.close()
-            }
-        }
-
-        ws.onerror = () => {
-            setStatusMessage("Connection error. Retrying...")
-        }
-    }
 
     const handleUpload = async () => {
         if (!file) {
@@ -132,9 +89,21 @@ export default function UploadPage() {
             }
 
             const result = await response.json()
-            setStatusMessage("Uploaded! Starting processing...")
+
-            setProgress(10)
+            // Store file locally for potential recovery/results display
-            connectWebSocket(result.video_id)
+            if (file) {
+                try {
+                    await storeVideoFile(result.video_id, file)
+                } catch (err) {
+                    console.error("Failed to store video file:", err)
+                }
+            }
+
+            saveVideoData({ videoId: result.video_id, detectionType })
+
+            // Redirect to the dynamic processing page
+            router.push(`/upload/${result.video_id}`)
+
         } catch (err) {
             let errorMessage = "Upload failed"
             if (err instanceof TypeError && err.message === "Failed to fetch") {
@@ -384,26 +353,7 @@ export default function UploadPage() {
                                 )}
                             </Button>
 
-                            {/* Progress Section */}
+
-                            {uploading && (
-                                <div className="space-y-3 p-4 rounded-xl bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800">
-                                    <div className="space-y-2">
-                                        <div className="flex items-center justify-between text-sm">
-                                            <span className="font-medium text-gray-700 dark:text-gray-300 text-xs">Processing Progress</span>
-                                            <span className="font-bold text-blue-600 dark:text-blue-400 text-xs">{progress}%</span>
-                                        </div>
-                                        <div className="h-2 rounded-full bg-blue-100 dark:bg-blue-900/50 overflow-hidden">
-                                            <div
-                                                className="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
-                                                style={{ width: `${progress}%` }}
-                                            />
-                                        </div>
-                                    </div>
-                                    {statusMessage && (
-                                        <p className="text-xs text-gray-500">{statusMessage}</p>
-                                    )}
-                                </div>
-                            )}
                         </CardContent>
                     </Card>
 

lib/api.ts

@@ -418,7 +418,7 @@ const DETECTION_TYPE_KEY = "visionroad_detection_type"
  */
 export function saveSession(session: SessionContext): void {
     if (typeof window !== "undefined") {
-        sessionStorage.setItem(SESSION_KEY, JSON.stringify(session))
+        localStorage.setItem(SESSION_KEY, JSON.stringify(session))
     }
 }
 
@@ -427,7 +427,7 @@ export function saveSession(session: SessionContext): void {
  */
 export function loadSession(): SessionContext {
     if (typeof window !== "undefined") {
-        const stored = sessionStorage.getItem(SESSION_KEY)
+        const stored = localStorage.getItem(SESSION_KEY)
         if (stored) {
             return JSON.parse(stored)
         }
@@ -440,9 +440,9 @@ export function loadSession(): SessionContext {
  */
 export function clearSession(): void {
     if (typeof window !== "undefined") {
-        sessionStorage.removeItem(SESSION_KEY)
+        localStorage.removeItem(SESSION_KEY)
-        sessionStorage.removeItem(VIDEO_DATA_KEY)
+        localStorage.removeItem(VIDEO_DATA_KEY)
-        sessionStorage.removeItem(DETECTION_TYPE_KEY)
+        localStorage.removeItem(DETECTION_TYPE_KEY)
     }
 }
 
@@ -459,7 +459,7 @@ export interface VideoResultData {
  */
 export function saveVideoData(data: VideoResultData): void {
     if (typeof window !== "undefined") {
-        sessionStorage.setItem(VIDEO_DATA_KEY, JSON.stringify(data))
+        localStorage.setItem(VIDEO_DATA_KEY, JSON.stringify(data))
     }
 }
 
@@ -468,7 +468,7 @@ export function saveVideoData(data: VideoResultData): void {
  */
 export function loadVideoData(): VideoResultData | null {
     if (typeof window !== "undefined") {
-        const stored = sessionStorage.getItem(VIDEO_DATA_KEY)
+        const stored = localStorage.getItem(VIDEO_DATA_KEY)
         if (stored) {
             return JSON.parse(stored)
         }