refactor: upload section design fix

src/app/(modules)/results/[videoId]/page.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { Button } from '@/components/ui/button';
-import { Loader2, TrendingUp } from 'lucide-react';
+import { Loader2, TrendingUp, ArrowUp, ArrowDown } from 'lucide-react';
 import VideoPlayerSection from '@/components/video-player-section';
 import { PageHeader } from '@/components/page-header';
 import { PoweredBy } from '@/components/powered-by';
@@ -145,8 +145,18 @@ export default function VideoResultsPage() {
                       <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">
+                      <span className="text-sm font-semibold text-muted-foreground leading-tight flex items-center gap-1.5">
                         {session.chainageName}
+                        {session.chainageDirection && (
+                          <span className="inline-flex items-center gap-1 px-1 py-0.5 rounded bg-muted text-[10px] font-bold uppercase border">
+                            {session.chainageDirection === 'UP' ? (
+                              <ArrowUp className="h-2.5 w-2.5" />
+                            ) : (
+                              <ArrowDown className="h-2.5 w-2.5" />
+                            )}
+                            {session.chainageDirection}
+                          </span>
+                        )}
                       </span>
                     </div>
                   </div>

src/app/(modules)/upload/[videoId]/page.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Loader2, TrendingUp } from 'lucide-react';
+import { Loader2, TrendingUp, ArrowUp, ArrowDown } from 'lucide-react';
 import { PageHeader } from '@/components/page-header';
 import { PoweredBy } from '@/components/powered-by';
 import { sessionService, videoService } from '@/services/api';
@@ -151,8 +151,18 @@ export default function VideoProcessingPage() {
                       <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">
+                      <span className="text-sm font-semibold text-muted-foreground leading-tight flex items-center gap-1.5">
                         {session.chainageName}
+                        {session.chainageDirection && (
+                          <span className="inline-flex items-center gap-1 px-1 py-0.5 rounded bg-muted text-[10px] font-bold uppercase border">
+                            {session.chainageDirection === 'UP' ? (
+                              <ArrowUp className="h-2.5 w-2.5" />
+                            ) : (
+                              <ArrowDown className="h-2.5 w-2.5" />
+                            )}
+                            {session.chainageDirection}
+                          </span>
+                        )}
                       </span>
                     </div>
                   </div>

src/app/(modules)/upload/page.tsx

@@ -13,7 +13,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Loader2, TrendingUp } from 'lucide-react';
+import { Loader2, TrendingUp, ArrowUp, ArrowDown } from 'lucide-react';
 import { PageHeader } from '@/components/page-header';
 import { PoweredBy } from '@/components/powered-by';
 import { sessionService, videoService } from '@/services/api';
@@ -167,13 +167,23 @@ export default function UploadPage() {
                         </span>
                         <span
                           className={cn(
-                            'leading-tight',
+                            'leading-tight flex items-center gap-1.5',
                             item.primary
                               ? 'text-base font-bold'
                               : 'text-sm font-semibold text-muted-foreground',
                           )}
                         >
                           {item.value}
+                          {item.label === 'Chainage' && session.chainageDirection && (
+                            <span className="flex items-center gap-1 px-1 py-0.5 rounded bg-muted text-[10px] font-bold uppercase border ml-1">
+                              {session.chainageDirection === 'UP' ? (
+                                <ArrowUp className="h-2.5 w-2.5" />
+                              ) : (
+                                <ArrowDown className="h-2.5 w-2.5" />
+                              )}
+                              {session.chainageDirection}
+                            </span>
+                          )}
                         </span>
                       </div>
                     ))}

src/components/project-selection-section.tsx

@@ -11,7 +11,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Loader2, Check } from 'lucide-react';
+import { Loader2, Check, ArrowUp, ArrowDown } from 'lucide-react';
 import { projectService, packageService, chainageService } from '@/services/api';
 import { Project, Package as PackageType, Chainage, SessionContext } from '@/types';
 import { cn } from '@/lib/utils';
@@ -133,6 +133,7 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
         packageName: selectedPackage.name,
         chainageId: selectedChainage.id,
         chainageName: selectedChainage.segment_name,
+        chainageDirection: selectedChainage.direction,
       });
     }
   };
@@ -298,12 +299,21 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
               <SelectContent>
                 {chainages.map((chn) => (
                   <SelectItem key={chn.id} value={chn.id}>
-                    <div className="flex flex-col">
+                    <div className="flex flex-col gap-0.5 py-0.5">
-                      <span>{chn.segment_name}</span>
+                      <span className="font-semibold text-sm">{chn.segment_name}</span>
-                      <span className="text-[10px] text-muted-foreground">
+                      <div className="flex items-center gap-2 text-[10px] text-muted-foreground font-medium">
-                        {chn.chainage_start_km}-{chn.chainage_end_km} km | {chn.direction}
+                        <span>{chn.chainage_start_km}-{chn.chainage_end_km} km</span>
+                        <span className="h-2.5 w-px bg-border" />
+                        <span className="flex items-center gap-1 uppercase">
+                          {chn.direction === 'UP' ? (
+                            <ArrowUp className="h-2.5 w-2.5" />
+                          ) : (
+                            <ArrowDown className="h-2.5 w-2.5" />
+                          )}
+                          {chn.direction}
                         </span>
                       </div>
+                    </div>
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -320,7 +330,17 @@ export function ProjectSelectionSection({ onSelectionComplete }: ProjectSelectio
               <span>/</span>
               <span className="text-foreground">{selectedPackage?.name}</span>
               <span>/</span>
-              <span className="text-foreground">{selectedChainage?.segment_name}</span>
+              <span className="text-foreground flex items-center gap-1.5">
+                {selectedChainage?.segment_name}
+                <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-[10px] font-bold uppercase border">
+                  {selectedChainage?.direction === 'UP' ? (
+                    <ArrowUp className="h-2.5 w-2.5" />
+                  ) : (
+                    <ArrowDown className="h-2.5 w-2.5" />
+                  )}
+                  {selectedChainage?.direction}
+                </span>
+              </span>
             </div>
           </div>
         )}

src/types/session.ts

@@ -8,6 +8,7 @@ export interface SessionContext {
   packageName: string | null;
   chainageId: string | null;
   chainageName: string | null;
+  chainageDirection?: string | null;
 }
 
 export const emptySessionContext: SessionContext = {
@@ -17,4 +18,5 @@ export const emptySessionContext: SessionContext = {
   packageName: null,
   chainageId: null,
   chainageName: null,
+  chainageDirection: null,
 };