feat: add route constant

app/new-analysis/page.tsx

@@ -7,19 +7,21 @@ import { type SessionContext, saveSession } from "@/lib/api"
 import { TrendingUp } from "lucide-react"
 import { PageHeader } from "@/components/page-header"
 import { PoweredBy } from "@/components/powered-by"
+import { ROUTES } from "@/utils/routes"
 
 const ProjectSelectionSection = dynamic(
     () => import("@/components/project-selection-section").then(mod => mod.ProjectSelectionSection),
     { ssr: false }
 )
 
+
 export default function NewAnalysisPage() {
     const router = useRouter()
 
     const handleSelectionComplete = (session: SessionContext) => {
         // Save session to storage and navigate to upload page
         saveSession(session)
-        router.push("/upload")
+        router.push(ROUTES.UPLOAD)
     }
 
     return (

app/page.tsx

@@ -1,5 +1,6 @@
 import { redirect } from "next/navigation"
+import { ROUTES } from "@/utils/routes"
 
 export default function HomePage() {
-  redirect("/dashboard")
+  redirect(ROUTES.DASHBOARD)
 }

app/results/[videoId]/page.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/lib/api"
 import { getVideoFile, clearVideoFile } from "@/lib/video-storage"
 import { DetectionData, DetectionType } from "@/lib/types"
+import { ROUTES } from "@/utils/routes"
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL
 
@@ -82,7 +83,7 @@ export default function VideoResultsPage() {
             }
         }
         clearSession()
-        router.push("/new-analysis")
+        router.push(ROUTES.NEW_ANALYSIS)
     }
 
     const getTitle = () => {
@@ -108,8 +109,8 @@ export default function VideoResultsPage() {
                 <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={() => router.push(ROUTES.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>
+                        <Button onClick={handleNewAnalysis} className="bg-linear-to-r from-indigo-500 to-purple-600 text-white">New Analysis</Button>
                     </div>
                 </div>
             </div>

app/results/page.tsx

@@ -20,6 +20,8 @@ import { DetectionData, DetectionType } from "@/lib/types"
 const API_URL = process.env.NEXT_PUBLIC_API_URL
 
 
+import { ROUTES } from "@/utils/routes"
+
 export default function ResultsPage() {
     const router = useRouter()
     const [session, setSession] = useState<SessionContext | null>(null)
@@ -36,13 +38,13 @@ export default function ResultsPage() {
         const videoData = loadVideoData()
 
         if (!isSessionValid(storedSession) || !videoData) {
-            router.replace("/new-analysis")
+            router.replace(ROUTES.NEW_ANALYSIS)
             return
         }
 
         // If we have a videoId, redirect to the dynamic results page
         if (videoData.videoId) {
-            router.replace(`/results/${videoData.videoId}`)
+            router.replace(`${ROUTES.RESULTS}/${videoData.videoId}`)
             return
         }
 
@@ -59,11 +61,11 @@ export default function ResultsPage() {
             }
         }
         clearSession()
-        router.push("/new-analysis")
+        router.push(ROUTES.NEW_ANALYSIS)
     }
 
     const handleBackToUpload = () => {
-        router.push("/upload")
+        router.push(ROUTES.UPLOAD)
     }
 
     const getTitle = () => {

app/upload/[videoId]/page.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/lib/api"
 import { getVideoFile } from "@/lib/video-storage"
 import { storeVideoFile } from "@/lib/video-storage"
+import { ROUTES } from "@/utils/routes"
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL
 const WS_URL = API_URL?.replace(/^https:\/\//, "wss://").replace(/^http:\/\//, "ws://")
@@ -80,7 +81,7 @@ export default function VideoProcessingPage() {
                 })
 
                 if (response.status === 404) {
-                    router.replace("/upload")
+                    router.replace(ROUTES.UPLOAD)
                     return
                 }
 

app/upload/page.tsx

@@ -18,6 +18,7 @@ import {
     saveVideoData,
     clearSession
 } from "@/lib/api"
+import { ROUTES } from "@/utils/routes"
 import { storeVideoFile } from "@/lib/video-storage"
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL
@@ -63,7 +64,7 @@ export default function UploadPage() {
     useEffect(() => {
         const storedSession = loadSession()
         if (!isSessionValid(storedSession)) {
-            router.replace("/new-analysis")
+            router.replace(ROUTES.NEW_ANALYSIS)
             return
         }
         setSession(storedSession)
@@ -136,7 +137,7 @@ export default function UploadPage() {
 
     const handleBackToSelection = () => {
         clearSession()
-        router.push("/new-analysis")
+        router.push(ROUTES.NEW_ANALYSIS)
     }
 
     const getTitle = () => {

components/sidebar-navigation.tsx

@@ -4,6 +4,8 @@ import { useRouter, usePathname } from "next/navigation"
 import { LayoutDashboard, Plus, User, FolderPlus, Package, MapPin } from "lucide-react"
 import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip"
 
+import { ROUTES } from "@/utils/routes"
+
 interface NavItem {
     title: string
     href: string
@@ -15,31 +17,31 @@ interface NavItem {
 const navItems: NavItem[] = [
     {
         title: "Dashboard",
-        href: "/dashboard",
+        href: ROUTES.DASHBOARD,
         icon: LayoutDashboard,
         gradient: "from-blue-400 to-indigo-500"
     },
     {
         title: "Project",
-        href: "/project",
+        href: ROUTES.PROJECT,
         icon: FolderPlus,
         gradient: "from-blue-400 to-blue-600"
     },
     {
         title: "Package",
-        href: "/package",
+        href: ROUTES.PACKAGE,
         icon: Package,
         gradient: "from-violet-400 to-purple-500"
     },
     {
         title: "Location",
-        href: "/location",
+        href: ROUTES.LOCATION,
         icon: MapPin,
         gradient: "from-amber-400 to-orange-500"
     },
     {
         title: "Account",
-        href: "/account",
+        href: ROUTES.ACCOUNT,
         icon: User,
         gradient: "from-purple-400 to-pink-500",
         disabled: true
@@ -55,7 +57,7 @@ export function SidebarNavigation() {
         router.push(item.href)
     }
 
-    const isNewAnalysisActive = pathname === "/new-analysis"
+    const isNewAnalysisActive = pathname === ROUTES.NEW_ANALYSIS
 
     return (
         <aside className="fixed left-0 top-0 h-screen w-20 bg-white/40 backdrop-blur-xl border-r border-slate-200/50 z-50 flex flex-col items-center py-8">
@@ -96,7 +98,7 @@ export function SidebarNavigation() {
                     <Tooltip>
                         <TooltipTrigger asChild>
                             <button
-                                onClick={() => router.push("/new-analysis")}
+                                onClick={() => router.push(ROUTES.NEW_ANALYSIS)}
                                 className={`
                                     relative w-12 h-12 rounded-md flex items-center justify-center 
                                     ${isNewAnalysisActive ? 'bg-linear-to-b from-[#3895FF] to-[#86B8F1]' : 'bg-[#f0fafd]/60 border border-slate-100/50'}

utils/routes.ts

@@ -0,0 +1,10 @@
+export const ROUTES = {
+  DASHBOARD: "/dashboard",
+  PROJECT: "/project",
+  PACKAGE: "/package",
+  LOCATION: "/location",
+  ACCOUNT: "/account",
+  NEW_ANALYSIS: "/new-analysis",
+  UPLOAD: "/upload",
+  RESULTS: "/results",
+} as const;