trips fixes

Route.tsx

@@ -502,6 +502,8 @@ const Route = () => {
               name={NAVIGATION_PAGES.ADD_TRIP_2025}
               component={AddNewTrip2025Screen}
             />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_TRIP} component={AddNewTripScreen} />
+            <ScreenStack.Screen name={NAVIGATION_PAGES.ADD_REGIONS} component={AddRegionsScreen} />
             <ScreenStack.Screen
               name={NAVIGATION_PAGES.ADD_REGIONS_NEW}
               component={AddRegionsNewScreen}

assets/icons/transit.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 640 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g>
+        <g transform="matrix(0.106146,0.396142,-0.396142,0.106146,217.944,240.659)">
+            <path d="M573.4,356.5C575.9,339 563.7,322.8 546.3,320.3C528.9,317.8 512.6,330 510.1,347.4C496.8,440.4 416.7,511.9 320,511.9C267,511.9 219,490.4 184.2,455.7C184,455.5 183.8,455.3 183.6,455.1L176,447.9L223.9,447.9C241.6,447.9 255.9,433.6 255.9,415.9C255.9,398.2 241.6,383.9 223.9,383.9L96,384C87.5,384 79.3,387.4 73.3,393.5C67.3,399.6 63.9,407.7 64,416.3L65,543.3C65.1,561 79.6,575.2 97.3,575C115,574.8 129.2,560.4 129,542.7L128.6,491.2L139.3,501.3C185.6,547.4 249.5,576 320,576C449,576 555.7,480.6 573.4,356.5Z" style="fill:rgb(11,52,67);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(-0.734897,2.91434e-17,2.91434e-17,0.734897,666.817,228.458)">
+            <path d="M552,264C582.9,264 608,289.1 608,320C608,350.9 582.9,376 552,376L424.7,376L265.5,549.6C259.4,556.2 250.9,560 241.9,560L198.2,560C187.3,560 179.6,549.3 183,538.9L237.3,376L137.6,376L84.8,442C81.8,445.8 77.2,448 72.3,448L52.5,448C42.1,448 34.5,438.2 37,428.1L64,320L37,211.9C34.4,201.8 42.1,192 52.5,192L72.3,192C77.2,192 81.8,194.2 84.8,198L137.6,264L237.3,264L183,101.1C179.6,90.7 187.3,80 198.2,80L241.9,80C250.9,80 259.4,83.8 265.5,90.4L424.7,264L552,264Z" style="fill:rgb(11,52,67);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(0.734897,2.91434e-17,-2.91434e-17,0.734897,-26.8174,-58.7918)">
+            <path d="M552,264C582.9,264 608,289.1 608,320C608,350.9 582.9,376 552,376L424.7,376L265.5,549.6C259.4,556.2 250.9,560 241.9,560L198.2,560C187.3,560 179.6,549.3 183,538.9L237.3,376L137.6,376L84.8,442C81.8,445.8 77.2,448 72.3,448L52.5,448C42.1,448 34.5,438.2 37,428.1L64,320L37,211.9C34.4,201.8 42.1,192 52.5,192L72.3,192C77.2,192 81.8,194.2 84.8,198L137.6,264L237.3,264L183,101.1C179.6,90.7 187.3,80 198.2,80L241.9,80C250.9,80 259.4,83.8 265.5,90.4L424.7,264L552,264Z" style="fill:rgb(11,52,67);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(0.106101,0.395974,-0.396142,0.106146,607.172,77.9643)">
+            <path d="M129.9,292.5C143.2,199.5 223.3,128 320,128C373,128 421,149.5 455.8,184.2C456,184.4 456.2,184.6 456.4,184.8L464,192L416.1,192C398.4,192 384.1,206.3 384.1,224C384.1,241.7 398.4,256 416.1,256L544.1,256C561.8,256 576.1,241.7 576.1,224L576.1,96C576.1,78.3 561.8,64 544.1,64C526.4,64 512.1,78.3 512.1,96L512.1,149.4L500.8,138.7C454.5,92.6 390.5,64 320,64C191,64 84.3,159.4 66.6,283.5C64.1,301 76.2,317.2 93.7,319.7C111.2,322.2 127.4,310 129.9,292.6L129.9,292.5Z" style="fill:rgb(11,52,67);fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>

src/components/Calendars/RangeCalendar/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View } from 'react-native';
+import { TouchableOpacity, View, Text } from 'react-native';
 import { Modal } from '../../Modal';
 import DateTimePicker, { DateType } from 'react-native-ui-datepicker';
 import dayjs from 'dayjs';
@@ -20,6 +20,8 @@ import { Colors } from '../../../theme';
 import { Button } from 'src/components/Button';
 import { ButtonVariants } from 'src/types/components';
 import Navigation from './Navigation';
+import { CheckBox } from 'src/components';
+import TransitSvg from 'assets/icons/transit.svg';
 
 export default function RangeCalendar({
   isModalVisible,
@@ -32,10 +34,12 @@ export default function RangeCalendar({
   minDate: externalMinDate,
   maxDate: externalMaxDate,
   initialStartDate,
-  initialEndDate
+  initialEndDate,
+  withTransit = false,
+  isTransit = false
 }: {
   isModalVisible: boolean;
-  closeModal: (startDate?: string | null, endDate?: string | null) => void;
+  closeModal: (startDate?: string | null, endDate?: string | null, transit?: boolean) => void;
   allowRangeSelection?: boolean;
   disableFutureDates?: boolean;
   disablePastDates?: boolean;
@@ -45,6 +49,8 @@ export default function RangeCalendar({
   maxDate?: string | Date | dayjs.Dayjs;
   initialStartDate?: string | null;
   initialEndDate?: string | null;
+  withTransit?: boolean;
+  isTransit?: boolean;
 }) {
   const [selectedStartDate, setSelectedStartDate] = useState<string | null>(null);
   const [selectedEndDate, setSelectedEndDate] = useState<string | null>(null);
@@ -53,6 +59,7 @@ export default function RangeCalendar({
   const [endDate, setEndDate] = useState<DateType>(undefined);
   const [currentMonth, setCurrentMonth] = useState<number | undefined>(undefined);
   const [currentYear, setCurrentYear] = useState<number | undefined>(undefined);
+  const [transit, setTransit] = useState<boolean | undefined>(undefined);
 
   const computedMinDate = externalMinDate
     ? dayjs(externalMinDate)
@@ -79,6 +86,9 @@ export default function RangeCalendar({
         setSelectedEndDate(initialEndDate);
         setEndDate(dayjs(initialEndDate));
       }
+      if (withTransit) {
+        setTransit(isTransit);
+      }
     } else if (selectedDate) {
       const dateObj = dayjs(selectedDate);
       setSelectedStartDate(selectedDate);
@@ -143,7 +153,7 @@ export default function RangeCalendar({
   };
 
   const handleClose = () => {
-    closeModal(selectedStartDate, selectedEndDate);
+    closeModal(selectedStartDate, selectedEndDate, transit);
     setSelectedStartDate(null);
     setSelectedEndDate(null);
     setStartDate(undefined);
@@ -281,6 +291,24 @@ export default function RangeCalendar({
         />
       </View>
       <View style={styles.modalFooter}>
+        {withTransit ? (
+          <TouchableOpacity
+            onPress={() => setTransit(!transit)}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            style={{
+              flexDirection: 'row',
+              paddingBottom: 16,
+              gap: 8
+            }}
+          >
+            <TransitSvg fill={Colors.DARK_BLUE} height={24} width={24} />
+            <CheckBox
+              onChange={(value) => setTransit(!transit)}
+              value={transit}
+              color={Colors.DARK_BLUE}
+            />
+          </TouchableOpacity>
+        ) : null}
         <Button
           children="Done"
           onPress={handleClose}

src/components/Calendars/RangeCalendar/style.ts

@@ -4,7 +4,8 @@ import { Colors } from '../../../theme';
 export const styles = StyleSheet.create({
   modalContent: {
     backgroundColor: Colors.WHITE,
-    paddingVertical: 22,
+    paddingTop: 16,
+    paddingBottom: 8
   },
   calendarHeader: {
     flexDirection: 'row',
@@ -15,6 +16,6 @@ export const styles = StyleSheet.create({
   modalFooter: {
     justifyContent: 'flex-end',
     width: '100%',
-    marginBottom: 24,
+    marginBottom: 24
   }
 });

src/components/TabBarButton/index.tsx

@@ -92,29 +92,6 @@ const TabBarButton = ({
           {label === NAVIGATION_PAGES.IN_APP_MESSAGES_TAB && unreadMessagesCount > 0 && (
             <MessagesDot messagesCount={unreadMessagesCount} />
           )}
-          {label === NAVIGATION_PAGES.IN_APP_TRIPS_TAB && (
-            <View
-              style={{
-                backgroundColor: '#0f9113',
-                paddingHorizontal: isSmallScreen ? 3 : 4,
-                paddingVertical: 1,
-                position: 'absolute',
-                top: -2,
-                right: 0,
-                borderRadius: 8
-              }}
-            >
-              <Text
-                style={{
-                  color: Colors.WHITE,
-                  fontSize: isSmallScreen ? 6 : 7,
-                  fontFamily: 'montserrat-700'
-                }}
-              >
-                BETA
-              </Text>
-            </View>
-          )}
           <Text
             style={[styles.labelStyle, { color: currentColor, fontSize: isSmallScreen ? 8.5 : 10 }]}
             adjustsFontSizeToFit={true}

src/screens/InAppScreens/TravelsScreen/AddNewTrip2025Screen/index.tsx

@@ -108,6 +108,26 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
     const perRegionMap: Record<number, any> = {};
 
     for (const r of list) {
+      const isTransit = r.quality === 1;
+
+      if (isTransit) {
+        const key = `${r.id}_transit`;
+
+        if (!perRegionMap[key]) {
+          perRegionMap[key] = {
+            id: r.id,
+            name: r.region_name,
+            days: 0,
+            transit: true,
+            flag1: r.flag1!,
+            flag2: r.flag2 ?? null
+          };
+        }
+
+        perRegionMap[key].days += 1;
+        continue;
+      }
+
       if (!isFullDate(r.visitStartDate) || !isFullDate(r.visitEndDate)) continue;
 
       const startISO = dateValueToISO(r.visitStartDate)!;
@@ -244,7 +264,8 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
               year: region.year_to || null,
               month: region.month_to || null,
               day: region.day_to || null
-            }
+            },
+            quality: region.quality ?? 3
           };
         })
       );
@@ -258,7 +279,7 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
   const formatDateForDisplay = (d?: DateValue | null) => {
     if (!d || !d.year) return 'Select dates';
     const m = moment(`${d.year}-${d.month}-${d.day}`, 'YYYY-M-D');
-    return m.format('D MMM YYYY');
+    return !d.month ? m.format('YYYY') : !d.day ? m.format('MMM YYYY') : m.format('D MMM YYYY');
   };
 
   const dateValueToISO = (d?: DateValue | null) => {
@@ -332,7 +353,11 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
     setCalendarVisibleForIndex(index);
   };
 
-  const closeRangeCalendar = (startDate?: string | null, endDate?: string | null) => {
+  const closeRangeCalendar = (
+    startDate?: string | null,
+    endDate?: string | null,
+    transit?: boolean
+  ) => {
     const clickedInstanceIndex = calendarVisibleForIndex;
     setCalendarVisibleForIndex(null);
 
@@ -350,7 +375,7 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
 
     const updatedBeforeSort = (regions ?? []).map((r) =>
       r._instanceId === openedInstanceId
-        ? { ...r, visitStartDate: startVal, visitEndDate: endVal }
+        ? { ...r, visitStartDate: startVal, visitEndDate: endVal, quality: transit ? 1 : 3 }
         : r
     );
 
@@ -444,7 +469,7 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
       const regionsData = regions.map((region) => {
         return {
           id: region.id,
-          quality: 3,
+          quality: region.quality,
           hidden: region.hidden,
           year_from: region.visitStartDate?.year || null,
           year_to: region.visitEndDate?.year || null,
@@ -496,7 +521,7 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
       const regionsData = regions.map((region) => {
         return {
           id: region.id,
-          quality: 3,
+          quality: region.quality,
           hidden: region.hidden,
           year_from: region.visitStartDate?.year || null,
           year_to: region.visitEndDate?.year || null,
@@ -711,8 +736,11 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
       <RangeCalendar
         isModalVisible={calendarVisibleForIndex !== null}
         allowRangeSelection={true}
-        closeModal={(startDate?: string | null, endDate?: string | null) =>
-          closeRangeCalendar(startDate, endDate)
+        closeModal={(startDate?: string | null, endDate?: string | null, transit?: boolean) =>
+          closeRangeCalendar(startDate, endDate, transit)
+        }
+        isTransit={
+          calendarVisibleForIndex !== null && regions?.[calendarVisibleForIndex]?.quality === 1
         }
         initialStartDate={
           calendarVisibleForIndex !== null &&
@@ -728,6 +756,7 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
             ? `${regions[calendarVisibleForIndex].visitEndDate.year}-${regions[calendarVisibleForIndex].visitEndDate.month}-${regions[calendarVisibleForIndex].visitEndDate.day}`
             : undefined
         }
+        withTransit={true}
       />
       <WarningModal
         type={'delete'}

src/screens/InAppScreens/TravelsScreen/AddNewTripScreen/index.tsx

@@ -381,7 +381,7 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
         {
           onSuccess: (res) => {
             if (res && res.result === 'OK') {
-              navigation.popTo(...([NAVIGATION_PAGES.TRIPS, { saved: true }] as never));
+              navigation.popTo(...([NAVIGATION_PAGES.TRIPS_2025, { saved: true }] as never));
             }
             setIsLoading(null);
           },
@@ -428,7 +428,7 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
         {
           onSuccess: (res) => {
             if (res && res.result === 'OK') {
-              navigation.popTo(...([NAVIGATION_PAGES.TRIPS, { updated: true }] as never));
+              navigation.popTo(...([NAVIGATION_PAGES.TRIPS_2025, { updated: true }] as never));
             }
             setIsLoading(null);
           },
@@ -685,7 +685,9 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
               {
                 onSuccess: (res) => {
                   if (res && res.result === 'OK') {
-                    navigation.popTo(...([NAVIGATION_PAGES.TRIPS, { deleted: true }] as never));
+                    navigation.popTo(
+                      ...([NAVIGATION_PAGES.TRIPS_2025, { deleted: true }] as never)
+                    );
                   }
                   setIsLoading(null);
                 },

src/screens/InAppScreens/TravelsScreen/Components/RegionItemNew/index.tsx

@@ -9,6 +9,7 @@ import { styles } from './styles';
 
 import TrashSvg from 'assets/icons/travels-screens/trash-solid.svg';
 import CalendarSvg from 'assets/icons/calendar.svg';
+import TransitSvg from 'assets/icons/transit.svg';
 
 interface RegionItemProps {
   region: RegionAddData;
@@ -69,39 +70,44 @@ const RegionItem = ({
 
       <View style={styles.dateRow}>
         <View style={{ flex: 1 }}>
-          <TouchableOpacity style={styles.regionSelector} onPress={onSelectDates}>
-            <CalendarSvg
-              fill={
-                !region?.visitStartDate?.year || !region?.visitEndDate?.year
-                  ? Colors.TEXT_GRAY
-                  : Colors.DARK_BLUE
-              }
-              height={15}
-              width={15}
-            />
-            <Text
-              style={[
-                styles.dateText,
-                (!region?.visitStartDate?.year || !region?.visitEndDate?.year) &&
-                  styles.placeholderText
-              ]}
-              numberOfLines={2}
-              onTextLayout={(e) => {
-                if (e.nativeEvent.lines.length > 1) {
-                  setDatesTooLong(true);
-                } else {
-                  setDatesTooLong(false);
+          <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+            <TouchableOpacity style={[styles.regionSelector, { flex: 1 }]} onPress={onSelectDates}>
+              <CalendarSvg
+                fill={
+                  !region?.visitStartDate?.year || !region?.visitEndDate?.year
+                    ? Colors.TEXT_GRAY
+                    : Colors.DARK_BLUE
                 }
-              }}
-            >
-              {datesTooLong &&
-              region?.visitStartDate?.year &&
-              region?.visitEndDate?.year &&
-              startLabel !== endLabel
-                ? `${startLabel}\n${endLabel}`
-                : (datesLabel ?? 'Select visit dates')}
-            </Text>
-          </TouchableOpacity>
+                height={15}
+                width={15}
+              />
+              <Text
+                style={[
+                  styles.dateText,
+                  (!region?.visitStartDate?.year || !region?.visitEndDate?.year) &&
+                    styles.placeholderText
+                ]}
+                numberOfLines={2}
+                onTextLayout={(e) => {
+                  if (e.nativeEvent.lines.length > 1) {
+                    setDatesTooLong(true);
+                  } else {
+                    setDatesTooLong(false);
+                  }
+                }}
+              >
+                {datesTooLong &&
+                region?.visitStartDate?.year &&
+                region?.visitEndDate?.year &&
+                startLabel !== endLabel
+                  ? `${startLabel}\n${endLabel}`
+                  : (datesLabel ?? 'Select visit dates')}
+              </Text>
+            </TouchableOpacity>
+            {region.quality === 1 ? (
+              <TransitSvg fill={Colors.DARK_BLUE} width={24} height={24} />
+            ) : null}
+          </View>
 
           {errorMessage ? (
             <Text style={{ color: Colors.RED, marginTop: 4, marginLeft: 4, fontSize: 12 }}>

src/screens/InAppScreens/TravelsScreen/Components/SummarySheet.tsx

@@ -4,11 +4,13 @@ import ActionSheet, { ActionSheetRef } from 'react-native-actions-sheet';
 import { API_HOST } from 'src/constants';
 import { Colors } from 'src/theme';
 import { getFontSize } from 'src/utils';
+import TransitSvg from 'assets/icons/transit.svg';
 
 type SummaryItem = {
   id: number;
   name: string;
   days: number;
+  transit: boolean;
   flag1: string;
   flag2: string | null;
 };
@@ -64,20 +66,9 @@ const SummarySheet = React.forwardRef<ActionSheetRef, Props>(
             {summary.totalDays} days travelled
           </Text>
 
-          <Text
-            style={{
-              fontSize: 13,
-              fontWeight: '600',
-              marginBottom: 10,
-              color: Colors.DARK_BLUE
-            }}
-          >
-            Per region:
-          </Text>
-
-          {summary.perRegion.map((r) => (
+          {summary.perRegion.map((r, index) => (
             <View
-              key={r.id}
+              key={`${r.id}-${index}`}
               style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -120,9 +111,20 @@ const SummarySheet = React.forwardRef<ActionSheetRef, Props>(
                   </Text>
                 </View>
               </View>
-              <Text style={{ fontSize: 13, fontWeight: '600', color: Colors.DARK_BLUE }}>
-                {r.days} {r.days === 1 ? 'day' : 'days'}
-              </Text>
+              {r.transit ? (
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                  {r.days > 1 ? (
+                    <Text style={{ fontSize: 13, fontWeight: '600', color: Colors.DARK_BLUE }}>
+                      {r.days}
+                    </Text>
+                  ) : null}
+                  <TransitSvg fill={Colors.DARK_BLUE} height={20} width={20} />
+                </View>
+              ) : (
+                <Text style={{ fontSize: 13, fontWeight: '600', color: Colors.DARK_BLUE }}>
+                  {r.days} {r.days === 1 ? 'day' : 'days'}
+                </Text>
+              )}
             </View>
           ))}
         </ScrollView>

src/screens/InAppScreens/TravelsScreen/Trips2025Screen/index.tsx

@@ -20,13 +20,14 @@ import ChevronLeftIcon from 'assets/icons/chevron-left.svg';
 import { getFontSize } from 'src/utils';
 import { FlashList, FlashListRef } from '@shopify/flash-list';
 import WarningIcon from 'assets/icons/warning.svg';
+import moment from 'moment';
 
 const TripsScreen = ({ route }: { route: any }) => {
   const token = storage.get('token', StoreType.STRING) as string;
   const navigation = useNavigation();
   const [isDatePickerVisible, setDatePickerVisible] = useState(false);
   const { data: years, refetch } = useGetTripsYearsQuery(token, true);
-  const [selectedYear, setSelectedYear] = useState<string | null>('2025');
+  const [selectedYear, setSelectedYear] = useState<string | null>(moment().year().toString());
   const { data: tripsData, refetch: refetchTrips } = useGetTripsForYearQuery(
     token,
     selectedYear as string,
@@ -86,7 +87,7 @@ const TripsScreen = ({ route }: { route: any }) => {
 
   useEffect(() => {
     if (years && years.data && !selectedYear) {
-      // setSelectedYear(years.data[0]);
+      setSelectedYear(years.data[0]);
     }
   }, [years]);
 
@@ -104,13 +105,19 @@ const TripsScreen = ({ route }: { route: any }) => {
   }, [tripsData]);
 
   const renderItem = useCallback(
-    ({ item }: { item: TripsData }) => <TripItem item={item} isNew={true} />,
-    []
+    ({ item }: { item: TripsData }) => (
+      <TripItem item={item} isNew={Number(selectedYear) >= 2025} />
+    ),
+    [selectedYear]
   );
 
   const onAddNewTripPress = useCallback(() => {
-    navigation.navigate(NAVIGATION_PAGES.ADD_TRIP_2025 as never);
-  }, [navigation]);
+    if (Number(selectedYear) >= 2025) {
+      navigation.navigate(NAVIGATION_PAGES.ADD_TRIP_2025 as never);
+    } else {
+      navigation.navigate(NAVIGATION_PAGES.ADD_TRIP as never);
+    }
+  }, [navigation, selectedYear]);
 
   const handleScrollToTrip = () => {
     if (!flashListRef?.current) return;
@@ -139,17 +146,13 @@ const TripsScreen = ({ route }: { route: any }) => {
         <Text
           style={{ color: Colors.DARK_BLUE, fontFamily: 'redhat-700', fontSize: getFontSize(14) }}
         >
-          Trips 2025 BETA
+          Trips
         </Text>
       </View>
       <View style={styles.tabContainer}>
-        <TouchableOpacity
-          style={styles.regionSelector}
-          onPress={() => setDatePickerVisible(true)}
-          disabled
-        >
+        <TouchableOpacity style={styles.regionSelector} onPress={() => setDatePickerVisible(true)}>
           <Text style={[styles.regionText]}>{selectedYear}</Text>
-          {/* <ChevronIcon /> */}
+          <ChevronIcon />
         </TouchableOpacity>
         <TouchableOpacity style={styles.addNewTab} onPress={onAddNewTripPress}>
           <AddIcon />
@@ -174,74 +177,78 @@ const TripsScreen = ({ route }: { route: any }) => {
           contentContainerStyle={styles.tripsListContentContainer}
           showsVerticalScrollIndicator={false}
           ListHeaderComponent={
-            <View
-              style={{
-                marginTop: 12,
-                marginBottom: 8,
-                backgroundColor: Colors.FILL_LIGHT,
-                borderRadius: 8,
-                paddingHorizontal: 16,
-                paddingVertical: 12,
-                gap: 6
-              }}
-            >
-              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-                {statistics?.general}
-              </Text>
-
-              <TouchableOpacity
-                onPress={() =>
-                  navigation.navigate(
-                    ...([
-                      NAVIGATION_PAGES.REGIONS_VISITED,
-                      {
-                        title: statistics?.countries?.description,
-                        isRegion: false,
-                        data: statistics?.countries?.list
-                      }
-                    ] as never)
-                  )
-                }
-                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            Number(selectedYear) >= 2025 ? (
+              <View
+                style={{
+                  marginTop: 12,
+                  marginBottom: 8,
+                  backgroundColor: Colors.FILL_LIGHT,
+                  borderRadius: 8,
+                  paddingHorizontal: 16,
+                  paddingVertical: 12,
+                  gap: 6
+                }}
               >
-                <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.ORANGE }}>
-                  {statistics?.countries?.description}
-                </Text>
-              </TouchableOpacity>
+                {statistics?.general ? (
+                  <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
+                    {statistics.general}
+                  </Text>
+                ) : null}
 
-              <TouchableOpacity
-                onPress={() =>
-                  navigation.navigate(
-                    ...([
-                      NAVIGATION_PAGES.REGIONS_VISITED,
-                      {
-                        title: statistics?.regions?.description,
-                        isRegion: true,
-                        data: statistics?.regions?.list
-                      }
-                    ] as never)
-                  )
-                }
-                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-              >
-                <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.ORANGE }}>
-                  {statistics?.regions?.description}
-                </Text>
-              </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={() =>
+                    navigation.navigate(
+                      ...([
+                        NAVIGATION_PAGES.REGIONS_VISITED,
+                        {
+                          title: statistics?.countries?.description,
+                          isRegion: false,
+                          data: statistics?.countries?.list
+                        }
+                      ] as never)
+                    )
+                  }
+                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                  <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.ORANGE }}>
+                    {statistics?.countries?.description}
+                  </Text>
+                </TouchableOpacity>
 
-              {statistics?.dates_missing ? (
                 <TouchableOpacity
-                  onPress={handleScrollToTrip}
+                  onPress={() =>
+                    navigation.navigate(
+                      ...([
+                        NAVIGATION_PAGES.REGIONS_VISITED,
+                        {
+                          title: statistics?.regions?.description,
+                          isRegion: true,
+                          data: statistics?.regions?.list
+                        }
+                      ] as never)
+                    )
+                  }
                   hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-                  style={{ marginTop: 8, flexDirection: 'row', gap: 8, alignItems: 'center' }}
                 >
-                  <WarningIcon color={Colors.RED} width={20} height={20} />
-                  <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.RED }}>
-                    For accurate annual statistics, please enter exact dates for all trips.
+                  <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.ORANGE }}>
+                    {statistics?.regions?.description}
                   </Text>
                 </TouchableOpacity>
-              ) : null}
-            </View>
+
+                {statistics?.dates_missing ? (
+                  <TouchableOpacity
+                    onPress={handleScrollToTrip}
+                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                    style={{ marginTop: 8, flexDirection: 'row', gap: 8, alignItems: 'center' }}
+                  >
+                    <WarningIcon color={Colors.RED} width={20} height={20} />
+                    <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.RED }}>
+                      For accurate annual statistics, please enter exact dates for all trips.
+                    </Text>
+                  </TouchableOpacity>
+                ) : null}
+              </View>
+            ) : null
           }
         />
       )}

src/screens/InAppScreens/TravelsScreen/index.tsx

@@ -31,8 +31,7 @@ const TravelsScreen = () => {
     { label: 'DARE', icon: CompassIcon, page: NAVIGATION_PAGES.DARE },
     { label: 'Series', icon: SeriesIcon, page: NAVIGATION_PAGES.SERIES },
     { label: 'Earth', icon: EarthIcon, page: NAVIGATION_PAGES.EARTH },
-    { label: 'Trips', icon: TripIcon, page: NAVIGATION_PAGES.TRIPS },
-    // { label: 'Trips 2025', icon: TripIcon, page: NAVIGATION_PAGES.TRIPS_2025 },
+    // { label: 'Trips', icon: TripIcon, page: NAVIGATION_PAGES.TRIPS },
     { label: 'Photos', icon: ImagesIcon, page: NAVIGATION_PAGES.PHOTOS },
     { label: 'Fixers', icon: FixersIcon, page: NAVIGATION_PAGES.FIXERS }
   ];
@@ -53,30 +52,6 @@ const TravelsScreen = () => {
   const renderItem = ({ item }: { item: { label: string; icon: any; page: string } }) => (
     <TouchableOpacity style={{ alignItems: 'center' }} onPress={() => handlePress(item.page)}>
       <View style={styles.button}>
-        {item.page === NAVIGATION_PAGES.TRIPS_2025 && (
-          <View
-            style={{
-              backgroundColor: '#0f9113',
-              paddingHorizontal: 6,
-              paddingVertical: 2,
-              position: 'absolute',
-              top: -2,
-              right: -2,
-              borderRadius: 8
-            }}
-          >
-            <Text
-              style={{
-                color: Colors.WHITE,
-                fontSize: 10,
-                fontWeight: '600',
-                fontFamily: 'montserrat-600'
-              }}
-            >
-              Beta
-            </Text>
-          </View>
-        )}
         <item.icon
           fill={Colors.ORANGE}
           width={Dimensions.get('window').width < 380 ? 105 : 110}

src/types/navigation.ts

@@ -43,7 +43,7 @@ export enum NAVIGATION_PAGES {
   ADD_PHOTO = 'inAppAddPhoto',
   TRIPS = 'inAppTrips',
   TRIPS_2025 = 'inAppTrips2025',
-  IN_APP_TRIPS_TAB = "Trips'25",
+  IN_APP_TRIPS_TAB = "Trips",
   ADD_TRIP = 'inAppAddTrip',
   ADD_TRIP_2025 = 'inAppAddTrip2025',
   ADD_REGIONS = 'inAppAddRegions',