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

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

@@ -6,9 +6,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Loader2, TrendingUp } from "lucide-react"
 import { PageHeader } from "@/components/page-header"
 import { PoweredBy } from "@/components/powered-by"
-import {
-    loadSession,
-} from "@/lib/api"
+import { sessionService, videoService } from "@/services/api"
 import { SessionContext } from "@/types"
 import { ROUTES } from "@/utils/routes"
 import { Button } from "@/components/ui/button"
@@ -68,25 +66,12 @@ export default function VideoProcessingPage() {
     }, [router])
 
     useEffect(() => {
-        const storedSession = loadSession()
+        const storedSession = sessionService.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(ROUTES.UPLOAD)
-                    return
-                }
-
-                if (!response.ok) {
-                    throw new Error("Failed to fetch status")
-                }
-
-                const statusData = await response.json()
+                const statusData = await videoService.getVideoStatus(videoId);
 
                 if (statusData.status === "completed") {
                     router.replace(`/results/${videoId}`)
@@ -157,9 +142,9 @@ export default function VideoProcessingPage() {
                                             </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>

src/app/(modules)/upload/page.tsx

@@ -10,12 +10,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Loader2, TrendingUp } from "lucide-react"
 import { PageHeader } from "@/components/page-header"
 import { PoweredBy } from "@/components/powered-by"
-import {
-    loadSession,
-    isSessionValid,
-    saveVideoData,
-    clearSession
-} from "@/lib/api"
+import { sessionService, videoService } from "@/services/api"
 import { SessionContext } from "@/types"
 import { ROUTES } from "@/utils/routes"
 import { storeVideoFile } from "@/lib/video-storage"
@@ -59,8 +54,8 @@ export default function UploadPage() {
 
     // Load session on mount
     useEffect(() => {
-        const storedSession = loadSession()
-        if (!isSessionValid(storedSession)) {
+        const storedSession = sessionService.loadSession()
+        if (!sessionService.isSessionValid(storedSession)) {
             router.replace(ROUTES.NEW_ANALYSIS)
             return
         }
@@ -89,18 +84,7 @@ export default function UploadPage() {
         setError(null)
 
         try {
-            const response = await fetch(`${API_URL}/upload`, {
-                method: "POST",
-                headers: { "ngrok-skip-browser-warning": "true" },
-                body: formData
-            })
-
-            if (!response.ok) {
-                const errorText = await response.text()
-                throw new Error(`Upload failed (${response.status}): ${errorText}`)
-            }
-
-            const result = await response.json()
+            const result = await videoService.uploadVideo(formData);
 
             // Store file locally for potential recovery/results display
             if (file) {
@@ -111,7 +95,7 @@ export default function UploadPage() {
                 }
             }
 
-            saveVideoData({ videoId: result.video_id, detectionType })
+            sessionService.saveVideoData({ videoId: result.video_id, detectionType })
 
             // Redirect to the dynamic processing page
             router.push(`/upload/${result.video_id}`)
@@ -131,7 +115,7 @@ export default function UploadPage() {
     }
 
     const handleBackToSelection = () => {
-        clearSession()
+        sessionService.clearSession()
         router.push(ROUTES.NEW_ANALYSIS)
     }
 
@@ -184,9 +168,9 @@ export default function UploadPage() {
                                             </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>