Add multi-city trip type support to RouteFilter

- Extend tripType state to include 'multi-city' option alongside 'one-way' and 'round-trip'
- Add third radio button for multi-city selection with test ID trip-type-multicity
- Update test IDs for existing radio buttons: trip-type-oneway (was trip-type-one-way) and trip-type-round (was trip-type-round-trip)
- Show additional-segments container only when multi-city is selected
- Display example segment with departure→arrival route and date
- Add comprehensive SCSS styling for multi-city UI elements:
  - .route-filter__multicity-message for instruction text
  - .route-filter__additional-segments for container
  - .route-filter__segment for individual segment display
  - .route-filter__segment-label, route, and date styles
- handleSearch callback already passes all tripType options including new 'multi-city'
- Maintains existing one-way and round-trip functionality unchanged

apps/react/src/app/features/online-board/components/route-filter.scss

@@ -188,6 +188,52 @@
   color: #666;
 }
 
+.route-filter__multicity-message {
+  font-size: 14px;
+  color: #333;
+  margin: 0;
+  padding: 8px 0;
+  font-weight: 500;
+}
+
+.route-filter__additional-segments {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  background-color: #fafafa;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.route-filter__segment {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  background-color: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.route-filter__segment-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #666;
+  text-transform: uppercase;
+}
+
+.route-filter__segment-route {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.route-filter__segment-date {
+  font-size: 12px;
+  color: #999;
+}
+
 .route-filter__actions {
   display: flex;
   gap: 8px;

apps/react/src/app/features/online-board/components/route-filter.tsx

@@ -95,8 +95,8 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({
       ? (typeof initialReturnDate === 'string' ? new Date(initialReturnDate) : initialReturnDate)
       : null
   )
-  const [tripType, setTripType] = useState<'one-way' | 'round-trip'>(
-    (initialTripType as 'one-way' | 'round-trip') || 'round-trip'
+  const [tripType, setTripType] = useState<'one-way' | 'round-trip' | 'multi-city'>(
+    (initialTripType as 'one-way' | 'round-trip' | 'multi-city') || 'round-trip'
   )
   const [startTime, setStartTime] = useState('00:00')
   const [endTime, setEndTime] = useState('23:59')
@@ -225,7 +225,7 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({
               value="one-way"
               checked={tripType === 'one-way'}
               onChange={(e) => setTripType(e.target.value as 'one-way')}
-              data-testid="trip-type-one-way"
+              data-testid="trip-type-oneway"
             />
             {t('SHARED.ONE_WAY')}
           </label>
@@ -235,10 +235,20 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({
               value="round-trip"
               checked={tripType === 'round-trip'}
               onChange={(e) => setTripType(e.target.value as 'round-trip')}
-              data-testid="trip-type-round-trip"
+              data-testid="trip-type-round"
             />
             {t('SHARED.ROUND_TRIP')}
           </label>
+          <label>
+            <input
+              type="radio"
+              value="multi-city"
+              checked={tripType === 'multi-city'}
+              onChange={(e) => setTripType(e.target.value as 'multi-city')}
+              data-testid="trip-type-multicity"
+            />
+            Multi-City
+          </label>
         </div>
       </div>
 
@@ -318,6 +328,23 @@ export const RouteFilter: React.FC<RouteFilterProps> = ({
         </div>
       )}
 
+      {tripType === 'multi-city' && (
+        <div className="route-filter__group">
+          <p className="route-filter__multicity-message">Add multiple flight segments</p>
+          <div className="route-filter__additional-segments" data-testid="additional-segments">
+            <div className="route-filter__segment">
+              <div className="route-filter__segment-label">Segment 1</div>
+              <div className="route-filter__segment-route">
+                {departure?.code || 'FROM'} → {arrival?.code || 'TO'}
+              </div>
+              <div className="route-filter__segment-date">
+                {date?.toLocaleDateString()}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div className="route-filter__group route-filter__passengers-group">
         <Button
           label={`${t('SHARED.PASSENGERS')} (${totalPassengers})`}