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

4
app/create-location/page.tsx
View File

@@ -312,7 +312,7 @@ export default function CreateLocationPage() {
{/* Error Message */}
{error && !isModalOpen && (
<div className="mb-6 flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center shrink-0">
<span className="text-xs font-bold text-red-500">!</span>
</div>
<p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
@@ -366,7 +366,7 @@ export default function CreateLocationPage() {
{/* Error Message in Modal */}
{error && (
<div className="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center shrink-0">
<span className="text-xs font-bold text-red-500">!</span>
</div>
<p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>

4
app/create-project/page.tsx
View File

@@ -197,7 +197,7 @@ export default function CreateProjectPage() {
{/* Error Message */}
{error && !isModalOpen && (
<div className="mb-6 flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center shrink-0">
<span className="text-xs font-bold text-red-500">!</span>
</div>
<p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>
@@ -251,7 +251,7 @@ export default function CreateProjectPage() {
{/* Error Message in Modal */}
{error && (
<div className="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center flex-shrink-0">
<div className="w-5 h-5 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center shrink-0">
<span className="text-xs font-bold text-red-500">!</span>
</div>
<p className="text-sm text-red-600 dark:text-red-400 break-all">{error}</p>

48
app/upload/page.tsx
View File

@@ -23,6 +23,20 @@ import { storeVideoFile } from "@/lib/video-storage"
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 Detection Model" },
{ value: "yolo_vl", label: "YOLO with Vision-Language Model" },
{ value: "sam3", label: "OpenAI SAM 3 Segmentation Model" },
{ value: "yoloe", label: "YOLOE Open-Vocabulary Detection" },
{ value: "yoloe_trained_vl", label: "YOLOE With Vision Language Model" },
] as const
type DetectionType = "pothole-detection" | "sign-board-detection" | "pot-sign-detection"
@@ -264,15 +278,11 @@ export default function UploadPage() {
<SelectValue placeholder="Select detection type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="pothole-detection">
<span className="font-medium">Pothole Detection</span>
</SelectItem>
<SelectItem value="sign-board-detection">
<span className="font-medium">Signboard Detection</span>
</SelectItem>
<SelectItem value="pot-sign-detection">
<span className="font-medium">Pothole & Signboard Detection</span>
</SelectItem>
{DETECTION_TYPES.map((type) => (
<SelectItem key={type.value} value={type.value}>
<span className="font-medium">{type.label}</span>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
@@ -308,21 +318,11 @@ export default function UploadPage() {
<SelectValue placeholder="Select method" />
</SelectTrigger>
<SelectContent>
<SelectItem value="yolo">
<span className="font-medium">YOLO Detection Model</span>
</SelectItem>
<SelectItem value="yolo_vl">
<span className="font-medium">YOLO with Vision-Language Model</span>
</SelectItem>
<SelectItem value="sam3">
<span className="font-medium">OpenAI SAM 3 Segmentation Model</span>
</SelectItem>
<SelectItem value="yoloe">
<span className="font-medium">YOLOE Open-Vocabulary Detection</span>
</SelectItem>
<SelectItem value="yoloe_trained_vl">
<span className="font-medium">YOLOE With Vision Language Model</span>
</SelectItem>
{DETECTION_METHODS.map((method) => (
<SelectItem key={method.value} value={method.value}>
<span className="font-medium">{method.label}</span>
</SelectItem>
))}
</SelectContent>
</Select>
</div>