trips statistics

src/modules/api/trips/trips-api.tsx

@@ -20,6 +20,25 @@ export interface PostGetTripsForYearReturn extends ResponseType {
       id: number;
     }[];
   }[];
+  statistics: {
+    countries: {
+      description: string;
+      list: {
+        country: string;
+        days_spent: number;
+        flag: string | null;
+      }[];
+    };
+    general: [string];
+    regions: {
+      description: string;
+      list: {
+        days_spent: number;
+        flag: string | null;
+        region: string;
+      }[];
+    };
+  };
 }
 
 export interface RegionData {

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

@@ -29,6 +29,40 @@ const TripsScreen = ({ route }: { route: any }) => {
     selectedYear ? true : false
   );
   const [trips, setTrips] = useState<TripsData[]>([]);
+  const [statistics, setStatistics] = useState<{
+    countries: {
+      description: string;
+      list: {
+        country: string;
+        days_spent: number;
+        flag: string | null;
+      }[];
+    };
+    general: [string];
+    regions: {
+      description: string;
+      list: {
+        days_spent: number;
+        flag: string | null;
+        region: string;
+      }[];
+    };
+  } | null>(null);
+  const [countriesByTime, setCountriesByTime] = useState<
+    {
+      country: string;
+      days_spent: number;
+      flag: string | null;
+    }[]
+  >([]);
+  const [regionsByTime, setRegionsByTime] = useState<
+    {
+      days_spent: number;
+      flag: string | null;
+      region: string;
+    }[]
+  >([]);
+
   const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);
 
   useFocusEffect(
@@ -63,10 +97,19 @@ const TripsScreen = ({ route }: { route: any }) => {
 
   useEffect(() => {
     if (tripsData && tripsData.trips) {
+      setStatistics(tripsData.statistics);
       setTrips(tripsData.trips);
     }
   }, [tripsData]);
 
+  useEffect(() => {
+    if (statistics) {
+      statistics.countries.list &&
+        setCountriesByTime(statistics.countries.list.sort((a, b) => b.days_spent - a.days_spent));
+      setRegionsByTime(statistics.regions.list.sort((a, b) => b.days_spent - a.days_spent));
+    }
+  }, [statistics]);
+
   const renderItem = useCallback(
     ({ item }: { item: TripsData }) => <TripItem item={item} isNew={true} />,
     []
@@ -112,7 +155,8 @@ const TripsScreen = ({ route }: { route: any }) => {
                 paddingVertical: 16,
                 marginVertical: 8,
                 backgroundColor: Colors.FILL_LIGHT,
-                borderRadius: 8
+                borderRadius: 8,
+                gap: 4
               }}
             >
               <Text
@@ -120,36 +164,67 @@ const TripsScreen = ({ route }: { route: any }) => {
                   fontSize: 14,
                   fontFamily: 'montserrat-700',
                   color: Colors.DARK_BLUE,
-                  paddingBottom: 6
+                  paddingBottom: 4
                 }}
               >
                 Annual statistics:
               </Text>
 
               <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-                X days travelled in total
+                {statistics?.general}
               </Text>
 
               <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-                X countries visited
-              </Text>
-              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-                X regions visited
+                {statistics?.countries?.description}
               </Text>
 
               <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-                X days spent in Y country
-              </Text>
-              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-                X days spent in Y region
+                {statistics?.regions?.description}
               </Text>
 
-              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-                Countries by time spent ()
+              <Text
+                style={{
+                  fontSize: 14,
+                  fontFamily: 'montserrat-700',
+                  color: Colors.DARK_BLUE,
+                  paddingBottom: 2,
+                  paddingTop: 6
+                }}
+              >
+                Countries by time spent:
               </Text>
-              <Text style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}>
-                Regions by time spent ()
+              <View style={{ paddingHorizontal: 6, gap: 4 }}>
+                {countriesByTime.map((c, index) => (
+                  <Text
+                    key={`${c.country}-${index}`}
+                    style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}
+                  >
+                    • {c.days_spent} days spent in {c.country}
+                  </Text>
+                ))}
+              </View>
+
+              <Text
+                style={{
+                  fontSize: 14,
+                  fontFamily: 'montserrat-700',
+                  color: Colors.DARK_BLUE,
+                  paddingBottom: 2,
+                  paddingTop: 6
+                }}
+              >
+                Regions by time spent:
               </Text>
+              <View style={{ paddingHorizontal: 6, gap: 4 }}>
+                {regionsByTime.map((r, index) => (
+                  <Text
+                    key={`${r.region}-${index}`}
+                    style={{ fontSize: 14, fontWeight: '600', color: Colors.DARK_BLUE }}
+                  >
+                    • {r.days_spent} days spent in {r.region}
+                  </Text>
+                ))}
+              </View>
             </View>
           }
         />