Trip history

android/app/release/output-metadata.json

@@ -0,0 +1,20 @@
+{
+  "version": 3,
+  "artifactType": {
+    "type": "APK",
+    "kind": "Directory"
+  },
+  "applicationId": "com.hawkeye_driver",
+  "variantName": "release",
+  "elements": [
+    {
+      "type": "SINGLE",
+      "filters": [],
+      "attributes": [],
+      "versionCode": 1,
+      "versionName": "1.0",
+      "outputFile": "app-release.apk"
+    }
+  ],
+  "elementType": "File"
+}

app/components/DateTab.tsx

@@ -0,0 +1,189 @@
+import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
+import React, { useEffect, useState } from "react";
+// import { VehicleInfoStyles } from "./VehicleInfo";
+import { moderateScale } from "react-native-size-matters";
+import moment from "moment";
+import { DatePickerCalender } from "./svgComponents";
+// import {TouchableOpacity} from 'react-native-gesture-handler';
+import DateTimePickerModal from "react-native-modal-datetime-picker";
+
+const initialDate = new Date();
+initialDate.setDate(initialDate.getDate() - 1);
+const formattedDate = `${initialDate.getFullYear()}-0${
+  initialDate.getMonth() + 1
+}-${initialDate.getDate()}`;
+
+export const DateTab = ({ startDate, onChangeDate }) => {
+  const [selectedDate, setSelectedDate] = useState(formattedDate);
+  const [openModal, setOpenModal] = useState(false);
+
+  useEffect(() => {
+    if (startDate !== selectedDate) {
+      setSelectedDate(startDate);
+    }
+  }, [startDate]);
+
+  const setMoment = (noOfDays, previosDate) => {
+    let subtractedDays = moment().subtract(noOfDays, "days");
+    if (!previosDate) {
+      subtractedDays = moment(selectedDate).subtract(noOfDays, "days");
+    } else {
+    }
+    return {
+      displayDate: subtractedDays.calendar(null, {
+        sameDay: "[Today]",
+        nextDay: "[Tomorrow]",
+        nextWeek: "MMM DD",
+        lastDay: "[Yesterday]",
+        lastWeek: "MMM DD",
+        sameElse: (now) => {
+          if (now.year() === moment(selectedDate).year()) {
+            return "MMM DD";
+          } else {
+            return "MMM DD";
+          }
+        },
+      }),
+      actualDate: new Date(subtractedDays.format("YYYY-MM-DD")),
+    };
+  };
+
+  let dateComponent = [];
+  const dateComparison = moment(selectedDate).isSame(initialDate, "date");
+  console.log("date Comparison", dateComparison);
+  for (let i = 0; i <= 3; i++) {
+    if (dateComparison && i === 0) {
+      continue;
+    }
+    if (!dateComparison && i === 3) {
+      continue;
+    }
+    const { displayDate, actualDate } = setMoment(i);
+
+    const activeDate = moment(selectedDate).isSame(actualDate, "date");
+
+    dateComponent.push(
+      <View
+        style={styles.DateElementStyle({ activeDate, grow: true })}
+        key={actualDate}
+      >
+        <Text
+          style={styles.DateTextStyle(activeDate)}
+          onPress={async () => {
+            await onChangeDate(actualDate);
+            setSelectedDate(actualDate);
+          }}
+        >
+          {displayDate}
+        </Text>
+      </View>
+    );
+  }
+  let unchangedDate;
+  const { displayDate, actualDate } = setMoment(1, true);
+  const activeDate = moment(selectedDate).isSame(actualDate, "date");
+
+  unchangedDate = (
+    <View
+      style={styles.DateElementStyle({ activeDate, grow: true })}
+      key={actualDate}
+    >
+      <Text
+        style={styles.DateTextStyle(activeDate)}
+        onPress={async () => {
+          await onChangeDate(actualDate);
+          setSelectedDate(actualDate);
+        }}
+      >
+        {displayDate}
+      </Text>
+    </View>
+  );
+
+  return (
+    <View style={styles.MainContainer}>
+      <View style={styles.DateContainer}>
+        <View style={styles.DateBarContainer}>
+          {unchangedDate}
+          {dateComponent}
+          <View style={styles.CalenderElementStyle}>
+            <TouchableOpacity
+              onPress={() => {
+                setOpenModal(true);
+              }}
+            >
+              <DatePickerCalender width={19} height={18} iconColor="#505050" />
+            </TouchableOpacity>
+          </View>
+        </View>
+        <DateTimePickerModal
+          isVisible={openModal}
+          mode="date"
+          date={new Date(selectedDate)}
+          maximumDate={initialDate}
+          customHeaderIOS="Pick a date"
+          onConfirm={async (date) => {
+            setOpenModal(false);
+            await onChangeDate(date);
+            setSelectedDate(date);
+          }}
+          onCancel={() => {
+            setOpenModal(false);
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  MainContainer: {
+    width: "100%",
+    flexDirection: "column",
+    alignItems: "center",
+    paddingTop: moderateScale(11),
+    paddingBottom: moderateScale(11),
+  },
+  DateContainer: {
+    width: "92%",
+    overflow: "hidden",
+    backgroundColor: "#FFFFFF",
+    borderRadius: moderateScale(5),
+    flexDirection: "column",
+    alignItems: "center",
+  },
+
+  DateBarContainer: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+  },
+  DateElementStyle: ({ activeDate, grow }) => {
+    return {
+      paddingHorizontal: "2%",
+      paddingVertical: moderateScale(8),
+      borderRightWidth: moderateScale(1),
+      borderRightColor: "#909090",
+      backgroundColor: activeDate ? "#0090D9" : null,
+      flexGrow: grow ? 1 : 0,
+      alignItems: "center",
+    };
+  },
+  CalenderElementStyle: {
+    paddingHorizontal: moderateScale(11),
+    paddingVertical: moderateScale(9),
+    flexGrow: 1,
+    alignSelf: "flex-end",
+    alignItems: "center",
+  },
+  DateTextStyle: (activeDate) => {
+    return {
+      fontFamily: "Poppins-Medium",
+      fontSize: moderateScale(12),
+      lineHeight: moderateScale(18),
+      color: activeDate ? "#ffffff" : "#909090",
+    };
+  },
+});

app/components/DriverPod.tsx

@@ -1,26 +1,28 @@
-import React, {FunctionComponent, ReactNode} from 'react';
+import React, { FunctionComponent, ReactNode } from "react";
 import {
   View,
   ImageBackground,
   StyleSheet,
   Text,
   TouchableOpacity,
-} from 'react-native';
-import {useTheme} from 'react-native-paper';
-import Dimensions from '../utils/helper';
-import {Typography} from './Typography';
-import Logo from '../assets/Logo.svg';
-import UserIcon from '../assets/Svgs/UserIcon.svg';
+} from "react-native";
+import { useTheme } from "react-native-paper";
+import Dimensions from "../utils/helper";
+import { Typography } from "./Typography";
+import Logo from "../assets/Logo.svg";
+import UserIcon from "../assets/Svgs/UserIcon.svg";
+import { moderateScale } from "react-native-size-matters";
+import AppStyles from "app/config/styles";
 
 const dim = Dimensions.Screen;
 
 interface WithLogoHeaderProps {
   children: ReactNode;
 }
 
-const DriverPod: FunctionComponent<any> = props => {
-  const {colors} = useTheme();
-  const {data} = props;
+const DriverPod: FunctionComponent<any> = (props) => {
+  const { colors } = useTheme();
+  const { data, vehicle } = props;
 
   if (!data) {
     return null;
@@ -33,13 +35,24 @@ const DriverPod: FunctionComponent<any> = props => {
         <UserIcon />
       </View>
       <View style={styles.detailsContainer}>
-        <Typography.H4 color={'#000'}>{data.name}</Typography.H4>
-        <Typography.H6Light style={{color: '#000'}}>
-          {data.plateNo}
-        </Typography.H6Light>
-        <Typography.H6Light style={{color: '#000'}}>
-          {data.admission_class}
-        </Typography.H6Light>
+        <Typography.H3 color={AppStyles.color.COLOR_DARK_GREY}>
+          {data.name}
+        </Typography.H3>
+        <View style={styles.busDetails}>
+          <Typography.H5Light
+            style={{ color: AppStyles.color.COLOR_DARK_GREY }}
+          >
+            Bus : {vehicle.name}
+          </Typography.H5Light>
+          <Typography.H5Light
+            style={{
+              color: AppStyles.color.COLOR_DARK_GREY,
+              marginLeft: moderateScale(20),
+            }}
+          >
+            Plate : {vehicle.plate}
+          </Typography.H5Light>
+        </View>
       </View>
     </TouchableOpacity>
   );
@@ -50,18 +63,24 @@ export default DriverPod;
 const makeStyles = (colors: any) =>
   StyleSheet.create({
     container: {
-      flexDirection: 'row',
-      width: '100%',
-      marginVertical: '1%',
+      flexDirection: "row",
+      width: "100%",
+      marginVertical: "1%",
       backgroundColor: colors.surfaceBackground,
       elevaton: 30,
-      paddingVertical: '3%',
+      paddingVertical: "3%",
       borderRadius: 5,
+      minHeight: 80,
     },
-    detailsContainer: {width: '50%'},
+    detailsContainer: { width: "70%" },
     logoContainer: {
-      width: '30%',
-      justifyContent: 'center',
-      alignItems: 'center',
+      width: "30%",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    busDetails: {
+      display: "flex",
+      flexDirection: "row",
+      width: "100%",
     },
   });