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>