santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design fix and select optimizations

Browse Source
This commit is contained in:
santasri.pachhal
2026-03-16 11:26:11 +05:30
parent 68fe4cc9dc
commit ea86ceceea
5 changed files with 57 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/sidebar-navigation.tsx
View File

@@ -101,7 +101,7 @@ export function SidebarNavigation() {
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'}
hover:bg-linear-to-b hover:from-[#3895FF] hover:to-[#86B8F1] hover:border-none
transition-all ease-in-out duration-200
ease-in-out duration-200 transition-all
`}
>
<Plus

69
components/upload-section.tsx
View File

@@ -13,6 +13,19 @@ import type { DetectionData, DetectionType } from "@/lib/types"
const API_URL = process.env.NEXT_PUBLIC_API_URL
const WS_URL = API_URL?.replace(/^https:\/\//, "wss://").replace(/^http:\/\//, "ws://")
const DETECTION_TYPES = [
{ value: "pothole-detection", label: "Pothole Detection" },
{ value: "sign-board-detection", label: "Signboard Detection" },
{ value: "pot-sign-detection", label: "Pothole & Signboard Detection" },
] as const
const DETECTION_METHODS = [
{ value: "yolo", label: "YOLO" },
{ value: "yolo_vl", label: "YOLO with VL" },
{ value: "sam3", label: "SAM 3" },
{ value: "yoloe", label: "YOLOE" },
{ value: "yoloe_trained_vl", label: "YOLOE Trained" },
] as const
type UploadSectionProps = {
onDetectionComplete: (data: DetectionData, videoId: string, file: File) => void
@@ -274,21 +287,13 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
<SelectValue placeholder="Select detection type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="pothole-detection">
<div className="flex items-center gap-2">
<span>Pothole Detection</span>
</div>
</SelectItem>
<SelectItem value="sign-board-detection">
<div className="flex items-center gap-2">
<span>Signboard Detection</span>
</div>
</SelectItem>
<SelectItem value="pot-sign-detection">
<div className="flex items-center gap-2">
<span>Pothole & Signboard Detection</span>
</div>
</SelectItem>
{DETECTION_TYPES.map((type) => (
<SelectItem key={type.value} value={type.value}>
<div className="flex items-center gap-2">
<span>{type.label}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
@@ -319,31 +324,13 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
<SelectValue placeholder="Select method" />
</SelectTrigger>
<SelectContent>
<SelectItem value="yolo">
<div className="flex items-center gap-2">
<span>YOLO</span>
</div>
</SelectItem>
<SelectItem value="yolo_vl">
<div className="flex items-center gap-2">
<span>YOLO with VL</span>
</div>
</SelectItem>
<SelectItem value="sam3">
<div className="flex items-center gap-2">
<span>SAM 3</span>
</div>
</SelectItem>
<SelectItem value="yoloe">
<div className="flex items-center gap-2">
<span>YOLOE</span>
</div>
</SelectItem>
<SelectItem value="yoloe_trained_vl">
<div className="flex items-center gap-2">
<span>YOLOE Trained</span>
</div>
</SelectItem>
{DETECTION_METHODS.map((method) => (
<SelectItem key={method.value} value={method.value}>
<div className="flex items-center gap-2">
<span>{method.label}</span>
</div>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
@@ -352,7 +339,7 @@ export function UploadSection({ onDetectionComplete, onDetectionTypeChange }: Up
{/* Error Display */}
{error && (
<div className="flex items-start gap-2 p-3 rounded-lg bg-destructive/10 text-destructive">
<AlertCircle className="h-5 w-5 mt-0.5 flex-shrink-0" />
<AlertCircle className="h-5 w-5 mt-0.5 shrink-0" />
<p className="text-sm whitespace-pre-line">{error}</p>
</div>
)}