1st page implemented

app/page.tsx

@@ -3,6 +3,10 @@
 import { useState } from "react"
 import { UploadSection } from "@/components/upload-section"
 import VideoPlayerSection from "@/components/video-player-section"
+import { ProjectSelectionSection } from "@/components/project-selection-section"
+import { type SessionContext, emptySessionContext } from "@/lib/api"
+import { Button } from "@/components/ui/button"
+import { ArrowLeft, MapPin, Package, FolderKanban } from "lucide-react"
 
 export type DetectionType = "pothole-detection" | "sign-board-detection"
 
@@ -67,14 +71,17 @@ export type DetectionData = {
 }
 
 export default function DetectionPage() {
+  const [session, setSession] = useState<SessionContext>(emptySessionContext)
   const [detectionData, setDetectionData] = useState<DetectionData | null>(null)
   const [videoId, setVideoId] = useState<string | null>(null)
   const [videoFile, setVideoFile] = useState<File | null>(null)
   const [detectionType, setDetectionType] = useState<DetectionType>("pothole-detection")
 
+  const isSessionComplete = session.projectId && session.packageId && session.locationId
+
   const getTitle = () => {
-    return detectionType === "pothole-detection" 
-      ? "Pothole Detection System" 
+    return detectionType === "pothole-detection"
+      ? "Pothole Detection System"
       : "Signboard Detection System"
   }
 
@@ -84,34 +91,85 @@ export default function DetectionPage() {
       : "Upload a video to detect and identify signboards with AI-powered analysis"
   }
 
+  const handleSelectionComplete = (newSession: SessionContext) => {
+    setSession(newSession)
+  }
+
+  const handleBackToSelection = () => {
+    setSession(emptySessionContext)
+    setDetectionData(null)
+    setVideoId(null)
+    setVideoFile(null)
+  }
+
   return (
     <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
       <div className="container mx-auto px-4 py-8 max-w-7xl">
         {/* Header */}
         <div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
           <h1 className="text-4xl font-bold mb-2 text-balance bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
-            {getTitle()}
+            {isSessionComplete ? getTitle() : "VisionRoad Detection System"}
           </h1>
-          <p className="text-muted-foreground">{getDescription()}</p>
+          <p className="text-muted-foreground">
+            {isSessionComplete ? getDescription() : "Select your project location to begin AI-powered road analysis"}
+          </p>
         </div>
 
-        {/* Upload Section */}
-        <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
-          <UploadSection
-            onDetectionComplete={(data, vId, file) => {
-              setDetectionData(data)
-              setVideoId(vId)
-              setVideoFile(file)
-            }}
-            onDetectionTypeChange={setDetectionType}
-          />
-        </div>
+        {/* Session Info Bar */}
+        {isSessionComplete && (
+          <div className="mb-6 animate-in fade-in slide-in-from-top duration-500">
+            <div className="flex items-center justify-between p-4 rounded-lg bg-gradient-to-r from-primary/10 via-primary/5 to-transparent border border-primary/20">
+              <div className="flex items-center gap-6 text-sm">
+                <div className="flex items-center gap-2">
+                  <FolderKanban className="h-4 w-4 text-primary" />
+                  <span className="text-muted-foreground">Project:</span>
+                  <span className="font-medium">{session.projectName}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Package className="h-4 w-4 text-primary" />
+                  <span className="text-muted-foreground">Package:</span>
+                  <span className="font-medium">{session.packageName}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <MapPin className="h-4 w-4 text-primary" />
+                  <span className="text-muted-foreground">Location:</span>
+                  <span className="font-medium">{session.locationName}</span>
+                </div>
+              </div>
+              <Button variant="ghost" size="sm" onClick={handleBackToSelection}>
+                <ArrowLeft className="h-4 w-4 mr-2" />
+                Change Selection
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Project Selection Section - Show when session is not complete */}
+        {!isSessionComplete && (
+          <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
+            <ProjectSelectionSection onSelectionComplete={handleSelectionComplete} />
+          </div>
+        )}
+
+        {/* Upload Section - Show after session is complete */}
+        {isSessionComplete && (
+          <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
+            <UploadSection
+              onDetectionComplete={(data, vId, file) => {
+                setDetectionData(data)
+                setVideoId(vId)
+                setVideoFile(file)
+              }}
+              onDetectionTypeChange={setDetectionType}
+            />
+          </div>
+        )}
 
         {/* Video Player Section */}
         {detectionData && videoId && videoFile && (
           <div className="mt-6 animate-in fade-in slide-in-from-bottom duration-700 delay-200">
-            <VideoPlayerSection 
-              data={detectionData} 
+            <VideoPlayerSection
+              data={detectionData}
               videoId={videoId}
               videoFile={videoFile}
               detectionType={detectionType}
@@ -121,4 +179,4 @@ export default function DetectionPage() {
       </div>
     </div>
   )
-}
+}