feat(api): restructure api with axios and chainage related changes

src/app/(modules)/results/[videoId]/page.tsx

@@ -7,10 +7,7 @@ import { Loader2, TrendingUp } from "lucide-react"
 import VideoPlayerSection from "@/components/video-player-section"
 import { PageHeader } from "@/components/page-header"
 import { PoweredBy } from "@/components/powered-by"
-import {
-    loadSession,
-    clearSession
-} from "@/lib/api"
+import { sessionService, videoService } from "@/services/api"
 import { SessionContext, DetectionData, DetectionType } from "@/types"
 import { getVideoFile, clearVideoFile } from "@/lib/video-storage"
 import { ROUTES } from "@/utils/routes"
@@ -29,24 +26,13 @@ export default function VideoResultsPage() {
     const [error, setError] = useState<string | null>(null)
 
     useEffect(() => {
-        const storedSession = loadSession()
+        const storedSession = sessionService.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()
+                const data = await videoService.getVideoResults(videoId);
                 setDetectionData(data as any)
 
                 // Try to infer detection type from results if possible
@@ -81,7 +67,7 @@ export default function VideoResultsPage() {
                 console.error("Failed to clear video file:", err)
             }
         }
-        clearSession()
+        sessionService.clearSession()
         router.push(ROUTES.NEW_ANALYSIS)
     }
 
@@ -146,9 +132,9 @@ export default function VideoResultsPage() {
                                             </span>
                                         </div>
                                         <div className="flex flex-col border-l pl-12 border-border/60">
-                                            <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">Location</span>
+                                            <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">Chainage</span>
                                             <span className="text-sm font-semibold text-muted-foreground leading-tight">
-                                                {session.locationName}
+                                                {session.chainageName}
                                             </span>
                                         </div>
                                     </div>