Frontend Added

frontend/.gitignore

+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

frontend/Screens/Admin/Admin.js

+import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
+import React from "react";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { Entypo } from '@expo/vector-icons';
+
+import { useNavigation } from '@react-navigation/native';
+
+export default function Admin({ userid,role }) {
+
+  const navigation = useNavigation(); 
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.row,styles.mb5]}>
+        <TouchableOpacity style={styles.box} onPress={() => navigation.navigate("Station")}>
+          <FontAwesome5 name="gas-pump" size={40} color="white" />
+          <Text style={styles.boxText}>Gas Stations</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.box} onPress={() => navigation.navigate("Fuel")}>
+          <MaterialCommunityIcons name="fuel" size={45} color="white" />
+          <Text style={styles.boxText}>Fuel</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.row}>
+        <TouchableOpacity style={styles.box} onPress={() => navigation.navigate("Userslist")}>
+          <Entypo name="users" size={40} color="white" />
+          <Text style={styles.boxText}>Users</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.box} onPress={() => navigation.navigate("Browser",{user_id:-1,role:role})}>
+          <FontAwesome5 name="truck-moving" size={40} color="white" />
+          <Text style={styles.boxText}>Bowsers</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container:{
+    flex:1,
+    justifyContent:'center'
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+  },
+  mb5:{
+    marginBottom:20
+  },
+  box: {
+    backgroundColor: "#f05a36",
+    width: 150,
+    height: 150,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 15,
+  },
+  boxText: {
+    color: "#fff",
+    fontSize: 18,
+    marginTop: 10,
+  },
+});

frontend/Screens/Admin/Users.js

+import {
+    StyleSheet,
+    Text,
+    View,
+    TouchableOpacity,
+    Image,
+    FlatList,
+  } from "react-native";
+  import React, { useState, useEffect } from "react";
+  import { Entypo } from "@expo/vector-icons";
+  import { MaterialCommunityIcons } from "@expo/vector-icons";
+  import { useIsFocused } from "@react-navigation/native";
+  
+  export default function Users({navigation}) {
+    const [loading, setLoading] = useState(true);
+    const [users, setUsers] = useState([]);
+    const isFocused = useIsFocused();
+  
+    const fetchData = () => {
+      fetch("https://fuel.udarax.me/api/user/list")
+        .then((response) => response.json())
+        .then((data) => {
+          setUsers(data["respond"]);
+          setLoading(false);
+        });
+    };
+  
+    useEffect(() => {
+      if (isFocused) {
+        fetchData();
+        console.log(users);
+        console.log(users.length);
+      }
+    }, [loading, isFocused]);
+  
+    const Item = ({ item }) => (
+      <TouchableOpacity
+        style={styles.box}
+        onPress={() => navigation.navigate("Audit",{user_id:item.id,role:'user'})}
+      >
+        <View style={styles.row}>
+          <View style={styles.col70}>
+            <Text style={styles.boxTitle}>{item.name}</Text>
+            <Text style={styles.boxtext}>{item.email}</Text>
+            <Text style={styles.boxtext}>{item.phone}</Text>
+          </View>
+          <View style={[styles.col30, styles.center]}>
+            <Entypo name="user" size={50} color="black" />
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  
+    const renderItem = ({ item }) => <Item item={item} />;
+    return (
+      <View style={styles.container}>
+        {loading && (
+          <View>
+            <Image
+              style={styles.tinyLogo}
+              source={require("../../assets/gasloading.gif")}
+            />
+          </View>
+        )}
+        {users.length ==0 && <Text style={{fontSize:20}}>No Data</Text>}
+        {!loading && (
+          <FlatList
+            showsVerticalScrollIndicator={false}
+            showsHorizontalScrollIndicator={false}
+            data={users}
+            renderItem={renderItem}
+            keyExtractor={(item) => item.id}
+            onRefresh={() => fetchData()}
+            refreshing={loading}
+          />
+        )}
+      </View>
+    );
+  }
+  
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingHorizontal: 20,
+      paddingTop: 20,
+      backgroundColor: "#fff",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    tinyLogo: {
+      backgroundColor: "#f00",
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    row: {
+      flexDirection: "row",
+    },
+    col70: {
+      width: "70%",
+    },
+    col30: {
+      width: "30%",
+    },
+    center: {
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    floatButton: {
+      width: 65,
+      height: 65,
+      backgroundColor: "#f05a36",
+      borderRadius: 100,
+      position: "absolute",
+      right: 20,
+      bottom: 20,
+    },
+    box: {
+      backgroundColor: "#f7c469",
+      padding: 20,
+      borderRadius: 15,
+      marginBottom: 20,
+    },
+    boxTitle: {
+      color: "#000",
+      fontWeight: "700",
+      fontSize: 16,
+    },
+    boxtext: {
+      color: "#000",
+    },
+  });
+  
\ No newline at end of file

frontend/Screens/Audit/Audit.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  FlatList,
+} from "react-native";
+import React, { useState, useEffect } from "react";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { Entypo } from "@expo/vector-icons";
+import { Foundation } from "@expo/vector-icons";
+import { useIsFocused } from "@react-navigation/native";
+import { useNavigation } from "@react-navigation/native";
+
+export default function Audit({ route, navigation }) {
+  const { user_id, role } = route.params;
+  const [audit, setAudit] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const isFocused = useIsFocused();
+
+  const fetchData = () => {
+    fetch("https://fuel.udarax.me/api/audit/" + user_id + "/" + role)
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data["response"]);
+        setAudit(data["response"]);
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchData();
+      console.log("aaaaaaaaaaaaa");
+      console.log(audit.list);
+    }
+  }, [loading, isFocused]);
+
+  const Item = ({ item }) => (
+    <View
+      style={[
+        styles.box,
+        styles.boxfull,
+        styles.row,
+        styles.auditboxes,
+        styles.mb5,
+      ]}
+    >
+      <View style={styles.row}>
+        <View style={styles.col8}>
+          <Text style={styles.boxTitle}>
+            {item.ftyoe} - {item.qty} (L)
+          </Text>
+          <Text style={styles.boxTextlist}>
+            {item.vtype} - {item.vno}
+          </Text>
+          <Text style={styles.boxTextlist}>Rs. {item.amount}</Text>
+          <Text style={styles.boxTextlist}>
+            {item.created_at.split("T")[0]}{" "}
+            {item.created_at.split("T")[1].slice(0, 8)}
+          </Text>
+          <Text style={styles.boxTextlist}>{item.sname}</Text>
+        </View>
+        <View style={[styles.col2, styles.right]}>
+          <MaterialCommunityIcons name="fuel" size={50} color="black" />
+        </View>
+      </View>
+    </View>
+  );
+
+  const renderItem = ({ item }) => <Item item={item} />;
+
+  return (
+    <View style={styles.container}>
+      {!loading && !audit.list && 
+        <View>
+          <View style={[styles.row, styles.mb5]}>
+            <View style={[styles.box, styles.boxfull, styles.row]}>
+              <View style={[styles.col4, { justifyContent: "center" }]}>
+                <FontAwesome5 name="money-bill-alt" size={45} color="white" />
+                <Text style={styles.boxText}>Total Amount</Text>
+              </View>
+              <View style={styles.col6}>
+                <Text style={styles.quetext}>{audit.amount}</Text>
+              </View>
+            </View>
+          </View>
+          <View style={[styles.row, styles.mb5]}>
+            <View
+              style={[styles.box, styles.boxfull, styles.row, styles.yellow]}
+            >
+              <View style={[styles.col4, { justifyContent: "center" }]}>
+                <MaterialCommunityIcons
+                  name="car-3-plus"
+                  size={45}
+                  color="white"
+                />
+                <Text style={styles.boxText}>Filled Vehicles</Text>
+              </View>
+              <View style={styles.col6}>
+                <Text style={styles.quetext}>{audit.filled}</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      }
+      {!loading && role == 'user' && (
+        <FlatList
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          data={audit.list}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.aid}
+          onRefresh={() => fetchData()}
+          refreshing={loading}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  mb5: {
+    marginBottom: 20,
+  },
+  box: {
+    backgroundColor: "#f05a36",
+    width: "47%",
+    height: 150,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 15,
+  },
+  boxfull: {
+    width: "100%",
+    backgroundColor: "#00539CFF",
+    padding: 20,
+  },
+  boxText: {
+    color: "#fff",
+    fontSize: 18,
+    marginTop: 10,
+  },
+  col4: {
+    width: "40%",
+  },
+  col6: {
+    width: "60%",
+  },
+  col8: {
+    width: "80%",
+  },
+  col2: {
+    width: "20%",
+  },
+  quetext: {
+    color: "#fff",
+    fontSize: 40,
+    textAlign: "right",
+  },
+  quetext2: {
+    color: "#fff",
+    fontSize: 18,
+    textAlign: "right",
+  },
+  yellow: {
+    backgroundColor: "#E49B0F",
+  },
+  boxtext: {
+    color: "#000",
+  },
+  auditboxes: {
+    backgroundColor: "#8eff78",
+  },
+  right: {
+    alignItems: "flex-end",
+    justifyContent: "center",
+  },
+  boxTitle: {
+    fontSize: 18,
+    fontWeight: "700",
+  },
+});

frontend/Screens/Bowser/Bowseradd.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+  TextInput,
+  TouchableOpacity,
+} from "react-native";
+import React, { useState } from "react";
+
+export default function Bowseradd({ route, navigation }) {
+  const { user_id } = route.params;
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [password, setPassword] = useState("");
+  const [bowserName, setBowserName] = useState("");
+  const [vehicleNo, setVehicleNo] = useState("");
+  const [capacity, setCapacity] = useState("");
+
+  const resetInput = () => {
+    setName("");
+    setEmail("");
+    setPhone("");
+    setPassword("");
+    setBowserName("");
+    setVehicleNo("");
+    setCapacity("");
+  }
+
+  const addBowser = () => {
+    if(name != '' && email !='' && email !='' && phone !='' && password !='' && bowserName !='' && vehicleNo !='' && capacity !=''){
+      const requestOptions = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name:name, email: email, phone:phone, pwd: password , bname:bowserName,vehicle_no:vehicleNo,capacity:capacity,station_user_id:user_id }),
+      };
+      fetch("https://fuel.udarax.me/api/bowser/create", requestOptions)
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data);
+        if(data['message'] == 'success'){
+            alert("Station successfully created!");
+            resetInput();
+        }else{
+            alert(data['message']);
+        }
+      });
+    }else{
+      alert('Input fields cannot be empty. Please fill all the details and try again!');
+    }
+  };
+
+  return (
+    <ScrollView
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      style={{
+        flex: 1,
+        paddingHorizontal: 20,
+        marginTop: 20,
+      }}
+      contentContainerStyle={{
+        flexGrow: 1,
+      }}
+    >
+      <View style={styles.mb5}>
+        <Text>User Name</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setName}
+          value={name}
+          placeholder="Enter Name"
+        />
+      </View>
+      <View style={styles.mb5}>
+        <Text>Email</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setEmail}
+          value={email}
+          placeholder="Enter Email"
+        />
+      </View>
+      <View style={styles.mb5}>
+        <Text>Contact Number</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setPhone}
+          value={phone}
+          placeholder="Enter Phone Number"
+        />
+      </View>
+      <View style={styles.mb5}>
+        <Text>Password</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setPassword}
+          value={password}
+          placeholder="Enter Password"
+          
+        />
+      </View>
+      <View style={styles.mb5}>
+        <Text>Bowser Name</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setBowserName}
+          value={bowserName}
+          placeholder="Enter Bowser Name"
+        />
+      </View>
+      <View style={styles.mb5}>
+        <Text>Vehicle No</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setVehicleNo}
+          value={vehicleNo}
+          placeholder="Enter Vehicle No"
+        />
+      </View>
+      <View style={styles.mb5}>
+        <Text>Capacity</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setCapacity}
+          value={capacity}
+          placeholder="Enter Capacity"
+          keyboardType="numeric"
+        />
+      </View>
+      <TouchableOpacity style={styles.button} onPress={addBowser}>
+        <Text style={styles.buttonText}>Add Bowser</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  mb5: {
+    marginBottom: 20,
+  },
+  input: {
+    height: 45,
+    marginTop: 5,
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 5,
+  },
+  button: {
+    alignItems: "center",
+    backgroundColor: "#f05a36",
+    height: 45,
+    borderRadius: 5,
+    justifyContent: "center",
+    marginBottom: 20,
+  },
+  buttonText: {
+    color: "#fff",
+  },
+});
\ No newline at end of file

frontend/Screens/Bowser/Bowserhome.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  Alert,
+  ScrollView,
+} from "react-native";
+import React, { useState,useEffect,useRef } from 'react';
+import MapView, { Marker } from "react-native-maps";
+import { FontAwesome } from "@expo/vector-icons";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { MaterialIcons } from "@expo/vector-icons";
+import { useIsFocused } from "@react-navigation/native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
+
+import { initializeApp } from 'firebase/app';
+import { getDatabase, ref, onValue, set , push ,update   } from 'firebase/database';
+import * as Location from 'expo-location';
+
+export default function Bowserview({ userid }) {
+
+  const navigation = useNavigation();
+
+  const [loading, setLoading] = useState(true);
+  const [bowser, setBowser] = useState([]);
+  const isFocused = useIsFocused();
+  const [localLocation, setLocalLocation] = useState([]);
+  const [fbLocation, setFBLocation] = useState([]);
+
+  const [mapRegion, setmapRegion] = useState({
+    latitude: 37.78825,
+    longitude: -122.4324,
+    latitudeDelta: 0.01,
+    longitudeDelta: 0.01,
+  });
+
+  const firebaseConfig = {
+    apiKey: "AIzaSyDxEmKoQCU12aT8CFPUfHrfXVGDOQOMwRw",
+    authDomain: "fuel-project-fdc73.firebaseapp.com",
+    databaseURL: "https://fuel-project-fdc73-default-rtdb.firebaseio.com",
+    projectId: "fuel-project-fdc73",
+    storageBucket: "fuel-project-fdc73.appspot.com",
+    messagingSenderId: "432462265706",
+    appId: "1:432462265706:web:9130f32bc3834e4e8eb913",
+    measurementId: "G-Q2RMT4C2S9"
+  };
+  
+  initializeApp(firebaseConfig);
+
+  
+  const fetchData = () => {
+    const db = getDatabase();
+    const reference = ref(db, 'bowserLocation/'+bowser.id+'/');
+
+    fetch("https://fuel.udarax.me/api/bowser/home/" + userid)
+      .then((response) => response.json())
+      .then((data) => {
+        setBowser(data["respond"][0]);
+        let location = data["respond"][0]["curent_location"];
+        let lat = parseFloat(location.split(":")[0]);
+        let lon = parseFloat(location.split(":")[1]);
+        console.log("eee");
+        setmapRegion({
+          latitude: lat,
+          longitude: lon,
+          latitudeDelta: 0.0922,
+          longitudeDelta: 0.0421,
+        });
+        onValue(reference, (snapshot) => {
+          let locationDBVal = snapshot.val();
+          console.log("aaaaaaaaaa");
+          console.log(bowser.id);
+          console.log(locationDBVal);
+          setFBLocation(locationDBVal);
+          if(locationDBVal != null){
+            setmapRegion({
+              latitude:  locationDBVal.latitudeDelta,
+              longitude:  locationDBVal.longitudeDelta,
+              latitudeDelta: 0.01,
+              longitudeDelta: 0.01,
+            });
+          }
+          setLoading(false);
+        });
+    });
+
+   
+
+    (async () => {
+    
+      let { status } = await Location.requestForegroundPermissionsAsync();
+      if (status !== 'granted') {
+        setErrorMsg('Permission to access location was denied');
+        return;
+      }
+
+      let location = await Location.getCurrentPositionAsync({});
+      setLocalLocation(location.coords);
+      // setmapRegion({
+      //   latitude: localLocation.latitude,
+      //   longitude: localLocation.longitude,
+      //   latitudeDelta: 0.0922,
+      //   longitudeDelta: 0.0421,
+      // });
+    })();
+
+   
+
+   
+  };
+
+  const deleteBowser = () => {
+    console.log(bowser.id);
+    Alert.alert(