new trips

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

@@ -25,14 +25,20 @@ export interface PostGetTripsForYearReturn extends ResponseType {
 export interface RegionData {
   id: number;
   quality: number;
-  status: 0 | 1;
+  // status: 0 | 1;
   hidden: boolean;
+  year_from: number;
+  year_to: number;
+  month_from: number;
+  month_to: number;
+  day_from: number | null;
+  day_to: number | null;
 }
 
 export interface PostSetNewTrip {
   token: string;
-  date_from: string;
-  date_to: string;
+  date_from: string | null;
+  date_to: string | null;
   description: string;
   regions: RegionData[];
 }
@@ -44,8 +50,8 @@ export interface PostSetNewTripReturn extends ResponseType {
 export interface PostUpdateTrip {
   token: string;
   trip_id: number;
-  date_from: string;
-  date_to: string;
+  date_from: string | null;
+  date_to: string | null;
   description: string;
   regions: RegionData[];
 }
@@ -58,13 +64,20 @@ export interface PostGetTripReturn extends ResponseType {
     description: string;
     regions: {
       id: number;
+      region: number;
       region_name: string;
       flag1: string;
       flag2: string | null;
       quality: number;
-      status: 0 | 1;
+      // status: 0 | 1;
       hidden: boolean;
       can_be_hidden: boolean;
+      year_from: number;
+      year_to: number;
+      month_from: number;
+      month_to: number;
+      day_from: number | null;
+      day_to: number | null;
     }[];
   };
 }

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

@@ -1,7 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
 import ReactModal from 'react-native-modal';
 import { useNavigation } from '@react-navigation/native';
+import { Picker as WheelPicker } from 'react-native-wheel-pick';
+import moment from 'moment';
+import ActionSheet from 'react-native-actions-sheet';
 
 import { PageWrapper, Header, Input, WarningModal } from 'src/components';
 import RegionItem from '../Components/RegionItem';
@@ -22,6 +25,28 @@ import { styles } from './styles';
 
 import CalendarSvg from '../../../../../assets/icons/calendar.svg';
 
+interface DateValue {
+  year: number | null;
+  month: number | null;
+  day: number | null;
+}
+
+interface RegionWithDates extends RegionAddData {
+  visitStartDate?: DateValue | null;
+  visitEndDate?: DateValue | null;
+  year_from?: number;
+  year_to?: number;
+  month_from?: number;
+  month_to?: number;
+  day_from?: number | null;
+  day_to?: number | null;
+}
+
+interface DatePickerState {
+  regionId: number;
+  field: 'visitStartDate' | 'visitEndDate';
+}
+
 const AddNewTripScreen = ({ route }: { route: any }) => {
   const editTripId = route.params?.editTripId ?? null;
   const token = storage.get('token', StoreType.STRING) as string;
@@ -30,22 +55,24 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
   const [calendarVisible, setCalendarVisible] = useState(false);
   const [selectedDates, setSelectedDates] = useState<string | null>(null);
   const [description, setDescription] = useState<string>('');
-  const [regions, setRegions] = useState<RegionAddData[] | null>(null);
+  const [regions, setRegions] = useState<RegionWithDates[] | null>(null);
   const [disabled, setDisabled] = useState(true);
   const [qualitySelectorVisible, setQualitySelectorVisible] = useState(false);
   const [selectedRegionId, setSelectedRegionId] = useState<number | null>(null);
   const [isWarningModalVisible, setIsWarningModalVisible] = useState(false);
 
+  const [showDatePicker, setShowDatePicker] = useState<DatePickerState | null>(null);
+  const actionSheetRef = useRef<any>(null);
+  const [selectedYear, setSelectedYear] = useState<number>(new Date().getFullYear());
+  const [selectedMonth, setSelectedMonth] = useState<number | null>(new Date().getMonth() + 1);
+  const [selectedDay, setSelectedDay] = useState<number | null>(null);
+
   const { mutate: saveNewTrip } = usePostSetNewTripMutation();
   const { mutate: updateTrip } = usePostUpdateTripMutation();
   const { mutate: deleteTrip } = usePostDeleteTripMutation();
 
   useEffect(() => {
     if (route.params?.regionsToSave) {
-      const isStartDateInFuture = selectedDates && editTripId
-        ? selectedDates.split(' - ')[0] > new Date().toISOString().split('T')[0]
-        : true;
-
       setRegions((currentRegions) => {
         const newRegionsIds = route.params.regionsToSave.map((region: RegionAddData) => region.id);
         const existingRegions = currentRegions?.filter((region) =>
@@ -58,9 +85,18 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
           return {
             ...newRegion,
             quality: existingRegion ? existingRegion.quality : 3,
-            status: existingRegion ? existingRegion.status : !isStartDateInFuture ? 1 : 0,
             can_be_hidden: existingRegion ? existingRegion.can_be_hidden : newRegion.hidden,
-            hidden: existingRegion ? existingRegion.hidden : false
+            hidden: existingRegion ? existingRegion.hidden : false,
+            visitStartDate: existingRegion?.visitStartDate || {
+              year: null,
+              month: null,
+              day: null
+            },
+            visitEndDate: existingRegion?.visitEndDate || {
+              year: null,
+              month: null,
+              day: null
+            }
           };
         });
 
@@ -83,8 +119,19 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
         editData.trip.regions.map((region: any) => {
           return {
             ...region,
+            id: region.region,
             flag1: extractNumberAndExtension(region.flag1),
-            flag2: extractNumberAndExtension(region.flag2)
+            flag2: extractNumberAndExtension(region.flag2),
+            visitStartDate: {
+              year: region.year_from || null,
+              month: region.month_from || null,
+              day: region.day_from || null
+            },
+            visitEndDate: {
+              year: region.year_to || null,
+              month: region.month_to || null,
+              day: region.day_to || null
+            }
           };
         })
       );
@@ -99,24 +146,103 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
     }
   }, [regions, selectedDates]);
 
-  const changeQualityForRegion = (regionId: number | null, newQuality: number) => {
-    regions &&
+  const currentYear = new Date().getFullYear();
+  const years = Array.from({ length: 120 }, (_, i) => currentYear - 80 + i);
+
+  const getAvailableMonths = (year: number) => {
+    const allMonths = [
+      { label: 'Jan', value: 1 },
+      { label: 'Feb', value: 2 },
+      { label: 'Mar', value: 3 },
+      { label: 'Apr', value: 4 },
+      { label: 'May', value: 5 },
+      { label: 'Jun', value: 6 },
+      { label: 'Jul', value: 7 },
+      { label: 'Aug', value: 8 },
+      { label: 'Sep', value: 9 },
+      { label: 'Oct', value: 10 },
+      { label: 'Nov', value: 11 },
+      { label: 'Dec', value: 12 }
+    ];
+
+    return allMonths;
+  };
+
+  const months = getAvailableMonths(selectedYear);
+
+  const getDaysInMonth = (
+    year: number,
+    month: number | null
+  ): Array<{ label: string; value: number | null }> => {
+    if (!month) return [{ label: '-', value: null }];
+
+    const daysCount = moment(`${year}-${month}`, 'YYYY-M').daysInMonth();
+    const days = [{ label: '-', value: null }];
+
+    for (let i = 1; i <= daysCount; i++) {
+      days.push({ label: i.toString(), value: i as never });
+    }
+
+    return days;
+  };
+
+  const days = getDaysInMonth(selectedYear, selectedMonth);
+
+  const openDatePicker = (
+    regionId: number,
+    field: 'visitStartDate' | 'visitEndDate',
+    initialDate?: DateValue | null
+  ) => {
+    setShowDatePicker({ regionId, field });
+
+    if (initialDate && initialDate.year && initialDate.month) {
+      setSelectedYear(initialDate.year);
+      setSelectedMonth(initialDate.month);
+      setSelectedDay(initialDate.day || null);
+    } else {
+      const today = new Date();
+
+      setSelectedYear(today.getFullYear());
+      setSelectedMonth(today.getMonth() + 1);
+      setSelectedDay(today.getDate());
+    }
+
+    actionSheetRef.current?.show();
+  };
+
+  const handleDateConfirm = () => {
+    if (showDatePicker && selectedMonth) {
+      const dateValue: DateValue = {
+        year: selectedYear,
+        month: selectedMonth,
+        day: selectedDay
+      };
+
       setRegions(
-        regions.map((region) => {
-          if (region.id === regionId) {
-            return { ...region, quality: newQuality };
-          }
-          return region;
-        })
+        (prevRegions) =>
+          prevRegions?.map((region) =>
+            region.id === showDatePicker.regionId
+              ? { ...region, [showDatePicker.field]: dateValue }
+              : region
+          ) || null
       );
+
+      setShowDatePicker(null);
+      actionSheetRef.current?.hide();
+    }
+  };
+
+  const handleDateCancel = () => {
+    setShowDatePicker(null);
+    actionSheetRef.current?.hide();
   };
 
-  const changeStatusForRegion = (regionId: number | null) => {
+  const changeQualityForRegion = (regionId: number | null, newQuality: number) => {
     regions &&
       setRegions(
         regions.map((region) => {
           if (region.id === regionId) {
-            return { ...region, status: region.status === 1 ? 0 : 1 };
+            return { ...region, quality: newQuality };
           }
           return region;
         })
@@ -156,14 +282,17 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
 
   const handleSaveNewTrip = () => {
     if (regions && selectedDates) {
-      const isStartDateInFuture =
-        selectedDates.split(' - ')[0] > new Date().toISOString().split('T')[0];
       const regionsData = regions.map((region) => {
         return {
           id: region.id,
           quality: region.quality ?? 3,
-          status: isStartDateInFuture ? 0 : (Number(region.status) as 0 | 1),
-          hidden: region.hidden
+          hidden: region.hidden,
+          year_from: region.visitStartDate?.year || new Date().getFullYear(),
+          year_to: region.visitEndDate?.year || new Date().getFullYear(),
+          month_from: region.visitStartDate?.month || new Date().getMonth() + 1,
+          month_to: region.visitEndDate?.month || new Date().getMonth() + 1,
+          day_from: region.visitStartDate?.day || null,
+          day_to: region.visitEndDate?.day || null
         };
       });
 
@@ -192,8 +321,13 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
         return {
           id: region.id,
           quality: region.quality ?? 3,
-          status: isStartDateInFuture ? 0 : (Number(region.status) as 0 | 1),
-          hidden: region.hidden
+          hidden: region.hidden,
+          year_from: region.visitStartDate?.year || new Date().getFullYear(),
+          year_to: region.visitEndDate?.year || new Date().getFullYear(),
+          month_from: region.visitStartDate?.month || new Date().getMonth() + 1,
+          month_to: region.visitEndDate?.month || new Date().getMonth() + 1,
+          day_from: region.visitStartDate?.day || null,
+          day_to: region.visitEndDate?.day || null
         };
       });
 
@@ -260,15 +394,14 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
                     key={region.id}
                     region={region}
                     onDelete={() => handleDeleteRegion(region.id)}
-                    onToggleStatus={() => changeStatusForRegion(region.id)}
                     onQualityChange={() => {
                       setSelectedRegionId(region.id);
                       setQualitySelectorVisible(true);
                     }}
                     onHiddenChange={() => changeHiddenForRegion(region.id)}
-                    startDate={selectedDates ? selectedDates.split(' - ')[0] : null}
-                    endDate={selectedDates ? selectedDates.split(' - ')[1] : null}
-                    isEditing={editTripId}
+                    openDatePicker={openDatePicker}
+                    visitStartDate={region.visitStartDate}
+                    visitEndDate={region.visitEndDate}
                   />
                 );
               })}
@@ -316,6 +449,93 @@ const AddNewTripScreen = ({ route }: { route: any }) => {
         )}
       </View>
 
+      <ActionSheet
+        ref={actionSheetRef}
+        gestureEnabled={false}
+        headerAlwaysVisible={true}
+        CustomHeaderComponent={
+          <View style={styles.datePickerHeader}>
+            <TouchableOpacity onPress={handleDateCancel}>
+              <Text style={styles.datePickerCancel}>Cancel</Text>
+            </TouchableOpacity>
+            <Text style={styles.datePickerTitle}>Select Date</Text>
+            <TouchableOpacity onPress={handleDateConfirm}>
+              <Text style={styles.datePickerConfirm}>Done</Text>
+            </TouchableOpacity>
+          </View>
+        }
+      >
+        <View style={styles.wheelContainer}>
+          <View style={styles.wheelColumn}>
+            <Text style={styles.wheelLabel}>Day</Text>
+            <WheelPicker
+              style={styles.wheelPicker}
+              textColor={Colors.DARK_BLUE}
+              itemStyle={{ fontSize: 16, fontFamily: 'montserrat-600', padding: 0 }}
+              pickerData={days?.map((d) => d.label)}
+              selectedValue={days?.find((d) => d.value === selectedDay)?.label || '-'}
+              onValueChange={(value: string) => {
+                const day = days?.find((d) => d.label === value);
+                setSelectedDay(day?.value || null);
+              }}
+            />
+          </View>
+
+          <View style={styles.wheelColumn}>
+            <Text style={styles.wheelLabel}>Month</Text>
+            <WheelPicker
+              style={styles.wheelPicker}
+              textColor={Colors.DARK_BLUE}
+              itemStyle={{
+                fontSize: 16,
+                fontFamily: 'montserrat-600'
+              }}
+              pickerData={months ? months?.map((m) => m.label) : []}
+              selectedValue={months?.find((m) => m.value === selectedMonth)?.label || 'Jan'}
+              onValueChange={(value: string) => {
+                const month = months?.find((m) => m.label === value);
+                setSelectedMonth(month?.value || null);
+
+                if (selectedDay && month?.value) {
+                  const maxDaysInMonth = moment(
+                    `${selectedYear}-${month.value}`,
+                    'YYYY-M'
+                  ).daysInMonth();
+                  if (selectedDay > maxDaysInMonth) {
+                    setSelectedDay(maxDaysInMonth);
+                  }
+                }
+              }}
+            />
+          </View>
+
+          <View style={styles.wheelColumn}>
+            <Text style={styles.wheelLabel}>Year</Text>
+            <WheelPicker
+              style={styles.wheelPicker}
+              textColor={Colors.DARK_BLUE}
+              itemStyle={{ fontSize: 16, fontFamily: 'montserrat-600' }}
+              isCyclic={true}
+              pickerData={years}
+              selectedValue={selectedYear}
+              onValueChange={(value: number) => {
+                setSelectedYear(value);
+
+                if (selectedMonth) {
+                  const maxDaysInMonth = moment(
+                    `${value}-${selectedMonth}`,
+                    'YYYY-M'
+                  ).daysInMonth();
+                  if (selectedDay && selectedDay > maxDaysInMonth) {
+                    setSelectedDay(maxDaysInMonth);
+                  }
+                }
+              }}
+            />
+          </View>
+        </View>
+      </ActionSheet>
+
       <RangeCalendar
         isModalVisible={calendarVisible}
         closeModal={(startDate?: string | null, endDate?: string | null) => {

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

@@ -3,7 +3,7 @@ import { Colors } from 'src/theme';
 import { getFontSize } from 'src/utils';
 
 export const styles = StyleSheet.create({
-  tabContainer: { flexDirection: 'row', gap: 16, alignItems: 'center', marginVertical: 8 },
+  tabContainer: { flexDirection: 'row', gap: 16, alignItems: 'center', marginBottom: 8 },
   tabStyle: {
     flex: 1,
     borderRadius: 4,
@@ -96,5 +96,103 @@ export const styles = StyleSheet.create({
   modal: {
     justifyContent: 'flex-end',
     margin: 0
+  },
+  regionItemContainer: {
+    backgroundColor: Colors.WHITE,
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 12,
+    borderWidth: 0.5,
+    borderColor: Colors.LIGHT_GRAY
+  },
+  regionDatesContainer: {
+    marginTop: 12,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: Colors.LIGHT_GRAY
+  },
+  regionDatesLabel: {
+    fontSize: getFontSize(12),
+    color: Colors.DARK_BLUE,
+    marginBottom: 8,
+    fontWeight: '600'
+  },
+  dateRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12
+  },
+  dateColumn: {
+    flex: 1
+  },
+  dateFieldLabel: {
+    fontSize: getFontSize(12),
+    color: Colors.DARK_BLUE,
+    marginBottom: 4,
+    fontWeight: '600'
+  },
+  dateInput: {
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: Colors.FILL_LIGHT,
+    height: 36
+  },
+  dateText: {
+    fontSize: getFontSize(12),
+    color: Colors.DARK_BLUE,
+    fontWeight: '500'
+  },
+  placeholderText: {
+    color: Colors.TEXT_GRAY,
+    flexWrap: 'wrap'
+  },
+  datePickerHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee'
+  },
+
+  datePickerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: Colors.DARK_BLUE
+  },
+  datePickerCancel: {
+    fontSize: 16,
+    color: '#666'
+  },
+  datePickerConfirm: {
+    fontSize: 16,
+    color: Colors.DARK_BLUE,
+    fontWeight: '600'
+  },
+  wheelContainer: {
+    flexDirection: 'row',
+    paddingHorizontal: 14,
+    paddingTop: 16,
+    paddingBottom: 24
+  },
+  wheelColumn: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  wheelLabel: {
+    fontSize: 14,
+    color: Colors.DARK_BLUE,
+    marginBottom: 8,
+    fontWeight: '600'
+  },
+  wheelPicker: {
+    height: 210,
+    width: '100%',
+    backgroundColor: 'white'
   }
 });

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

@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { View, Text, Image, TouchableOpacity } from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 
 import { qualityOptions } from '../../utils/constants';
 import { RegionAddData } from '../../utils/types';
@@ -12,43 +13,77 @@ import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
 import CheckSvg from 'assets/icons/travels-screens/check.svg';
 import SquareSvg from 'assets/icons/travels-screens/square.svg';
 
+interface DateValue {
+  year: number | null;
+  month: number | null;
+  day: number | null;
+}
+
+interface RegionItemProps {
+  region: RegionAddData;
+  onDelete: () => void;
+  onQualityChange: () => void;
+  onHiddenChange: () => void;
+  visitStartDate?: DateValue | null;
+  visitEndDate?: DateValue | null;
+  onDateChange?: (field: 'visitStartDate' | 'visitEndDate', dateValue: DateValue) => void;
+  openDatePicker?: (
+    regionId: number,
+    field: 'visitStartDate' | 'visitEndDate',
+    initialDate?: DateValue | null
+  ) => void;
+}
+
 const RegionItem = ({
   region,
   onDelete,
-  onToggleStatus,
   onQualityChange,
   onHiddenChange,
-  startDate,
-  endDate,
-  isEditing
-}: {
-  region: RegionAddData;
-  onDelete: () => void;
-  onToggleStatus: () => void;
-  onQualityChange: () => void;
-  onHiddenChange: () => void;
-  startDate: string | null;
-  endDate: string | null;
-  isEditing: boolean;
-}) => {
+  visitStartDate,
+  visitEndDate,
+  onDateChange,
+  openDatePicker
+}: RegionItemProps) => {
   const [name, ...rest] = region.region_name?.split(/ – | - /);
   const subname = rest?.join(' - ');
   const qualityName = region.quality
     ? qualityOptions.find((q) => q.id === region.quality)?.name
     : 'Good Visit';
-  const disabled = !startDate || startDate > new Date().toISOString().split('T')[0];
-  const completed = endDate && endDate <= new Date().toISOString().split('T')[0];
-  const [isCompleted, setIsCompleted] = useState(false);
-
-  useEffect(() => {
-    if (isEditing) return;
-    setIsCompleted(completed as boolean);
-    if (completed && region.status === 0) {
-      region.status = 1;
-    } else {
-      region.status = 0;
+
+  const formatDateForDisplay = useCallback((dateValue: DateValue | null): string => {
+    if (!dateValue || !dateValue.year || !dateValue.month) return 'Select date';
+
+    let result = dateValue.year.toString();
+
+    if (dateValue.month) {
+      result = `${dateValue.month.toString().padStart(2, '0')}.${result}`;
+
+      if (dateValue.day) {
+        result = `${dateValue.day.toString().padStart(2, '0')}.${result}`;
+      }
     }
-  }, [completed, endDate]);
+
+    return result;
+  }, []);
+
+  const isDateValid = useCallback((dateValue: DateValue | null): boolean => {
+    return dateValue !== null && dateValue.year !== null && dateValue.month !== null;
+  }, []);
+
+  const renderDatePicker = useCallback(
+    (field: 'visitStartDate' | 'visitEndDate', currentDate: DateValue | null): JSX.Element => (
+      <TouchableOpacity
+        style={styles.dateInput}
+        onPress={() => openDatePicker?.(region.id, field, currentDate)}
+      >
+        <Text style={[styles.dateText, !isDateValid(currentDate) && styles.placeholderText]}>
+          {formatDateForDisplay(currentDate)}
+        </Text>
+        <MaterialCommunityIcons name="chevron-down" size={20} color={Colors.DARK_BLUE} />
+      </TouchableOpacity>
+    ),
+    [formatDateForDisplay, isDateValid, region.id, openDatePicker]
+  );
 
   return (
     <View key={region.id} style={styles.regionItem}>
@@ -76,53 +111,29 @@ const RegionItem = ({
 
       <View style={styles.divider}></View>
 
+      <View style={styles.regionDatesContainer}>
+        <View style={styles.dateRow}>
+          <View style={styles.dateColumn}>
+            <Text style={styles.dateFieldLabel}>Start of visit</Text>
+            {renderDatePicker('visitStartDate', visitStartDate || null)}
+          </View>
+          <View style={styles.dateColumn}>
+            <Text style={styles.dateFieldLabel}>End of visit</Text>
+            {renderDatePicker('visitEndDate', visitEndDate || null)}
+          </View>
+        </View>
+      </View>
+
       <Text style={styles.qualityOfVisit}>Quality of visit</Text>
       <View style={styles.regionItemBottom}>
         <TouchableOpacity style={styles.qualitySelector} onPress={onQualityChange}>
           <Text style={styles.qualityButtonText}>{qualityName}</Text>
           <ChevronIcon width={18} height={18} />
         </TouchableOpacity>
-
-        <TouchableOpacity
-          style={[
-            styles.markCompletedButton,
-            (disabled) && {
-              backgroundColor: Colors.LIGHT_GRAY,
-              borderColor: Colors.LIGHT_GRAY
-            }
-          ]}
-          onPress={() => {
-            onToggleStatus();
-            setIsCompleted(false);
-          }}
-          disabled={disabled}
-        >
-          <View style={styles.completedContainer}>
-            <View style={{ position: 'relative' }}>
-              <SquareSvg />
-            </View>
-            {(isCompleted || (region.status === 1 && !disabled)) && (
-              <View style={{ position: 'absolute', left: 2, top: 1 }}>
-                <CheckSvg width={14} height={14} />
-              </View>
-            )}
-            <Text style={styles.markCompletedButtonText}>Completed</Text>
-          </View>
-        </TouchableOpacity>
       </View>
       {region.can_be_hidden && (
         <View style={{ marginTop: 12, marginHorizontal: '25%' }}>
-          <TouchableOpacity
-            style={[
-              styles.markCompletedButton,
-              disabled && {
-                backgroundColor: Colors.LIGHT_GRAY,
-                borderColor: Colors.LIGHT_GRAY
-              }
-            ]}
-            onPress={onHiddenChange}
-            disabled={disabled}
-          >
+          <TouchableOpacity style={[styles.markCompletedButton]} onPress={onHiddenChange}>
             <View style={styles.completedContainer}>
               <View style={{ position: 'relative' }}>
                 <SquareSvg />

src/screens/InAppScreens/TravelsScreen/Components/RegionItem/styles.tsx

@@ -1,12 +1,13 @@
 import { StyleSheet } from 'react-native';
 import { Colors } from 'src/theme';
+import { getFontSize } from 'src/utils';
 
 export const styles = StyleSheet.create({
   regionItem: {
     paddingVertical: 12,
     paddingHorizontal: 16,
     borderRadius: 8,
-    backgroundColor: Colors.FILL_LIGHT,
+    backgroundColor: Colors.FILL_LIGHT
   },
   regionItemTop: {
     flexDirection: 'row',
@@ -93,9 +94,51 @@ export const styles = StyleSheet.create({
   },
   qualityButtonText: {
     color: Colors.DARK_BLUE,
-    fontWeight: 'bold',
+    fontWeight: '600',
     fontSize: 13
   },
   divider: { height: 1, backgroundColor: Colors.DARK_LIGHT, marginVertical: 16 },
-  completedContainer: { gap: 8, flexDirection: 'row', alignItems: 'center' }
+  completedContainer: { gap: 8, flexDirection: 'row', alignItems: 'center' },
+  regionDatesContainer: {
+    paddingBottom: 12
+  },
+  regionDatesLabel: {
+    fontSize: getFontSize(12),
+    color: Colors.DARK_BLUE,
+    marginBottom: 8,
+    fontWeight: '600'
+  },
+  dateRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12
+  },
+  dateColumn: {
+    flex: 1,
+    gap: 8
+  },
+  dateFieldLabel: {
+    fontSize: getFontSize(12),
+    color: Colors.DARK_BLUE,
+    fontWeight: '600'
+  },
+  dateInput: {
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: Colors.DARK_LIGHT,
+    height: 36
+  },
+  dateText: {
+    fontSize: getFontSize(13),
+    color: Colors.DARK_BLUE,
+    fontWeight: '600'
+  },
+  placeholderText: {
+    color: Colors.TEXT_GRAY,
+    flexWrap: 'wrap'
+  }
 });

src/screens/InAppScreens/TravelsScreen/utils/types.ts

@@ -72,7 +72,7 @@ export interface RegionAddData {
   quality?: number;
   flag1?: string;
   flag2?: string | null;
-  status?: 0 | 1;
+  // status?: 0 | 1;
   hidden: boolean;
   name?: string;
   can_be_hidden?: boolean;