Queue changes added

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/Fuel/Fuel.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 Fuel({ navigation }) {
+  const [loading, setLoading] = useState(true);
+  const [fuel, setFuel] = useState([]);
+  const isFocused = useIsFocused();
+
+  const fetchData = () => {
+    fetch("https://fuel.udarax.me/api/fuel/")
+      .then((response) => response.json())
+      .then((data) => {
+        setFuel(data["respond"]);
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchData();
+    }
+  }, [loading, isFocused]);
+
+  function FloatButton() {
+    return (
+      <TouchableOpacity
+        style={[styles.floatButton, styles.center]}
+        onPress={() => navigation.navigate("FuelAdd")}
+      >
+        <Entypo name="plus" size={30} color="white" />
+      </TouchableOpacity>
+    );
+  }
+
+  const Item = ({ item }) => (
+    <TouchableOpacity
+      style={styles.box}
+      onPress={() => navigation.navigate("FuelEdit", { typeID: item.id })}
+    >
+      <View style={styles.row}>
+        <View style={styles.col70}>
+          <Text style={styles.boxTitle}>{item.name}</Text>
+          <Text style={styles.boxtext}>{item.price}</Text>
+        </View>
+        <View style={[styles.col30, styles.center]}>
+          <MaterialCommunityIcons name="fuel" 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>
+      )}
+
+      {!loading && (
+        <FlatList
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          data={fuel}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          onRefresh={() => fetchData()}
+          refreshing={loading}
+        />
+      )}
+      <FloatButton />
+    </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",
+  },
+});

frontend/Screens/Settings.js

+import { StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+
+export default function Settings() {
+  return (
+    <View  style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Setting Screen</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({})
\ No newline at end of file

frontend/Screens/Station/Fillingqueue.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  TextInput,
+  TouchableOpacity,
+  Alert,
+} from "react-native";
+import React, { useState, useEffect } from "react";
+
+export default function Fillingqueue({ route, navigation }) {
+  const {
+    user_id,
+    vehicle_id,
+    station_id,
+    fueltype_id,
+    ftype,
+    username,
+    vehicle,
+    no,
+    qid,
+    stuid
+  } = route.params;
+
+  const [qty, setQty] = useState([]);
+
+  const fillFuel = () => {
+    if (qty != "" && qty != null) {
+      const requestOptions = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          qty: qty,
+          user_id: user_id,
+          vehicle_id: vehicle_id,
+          station_id: station_id,
+          fueltype_id: fueltype_id,
+          qid: qid,
+        }),
+      };
+      fetch("https://fuel.udarax.me/api/audit/create", requestOptions)
+        .then((response) => response.json())
+        .then((data) => {
+          console.log(data);
+          if (data["message"] == "success") {
+            Alert.alert(
+              "Alert!",
+              "Fuel Filled Successfully",
+              [
+                {
+                  text: "Yes",
+                  onPress: () => {
+                    navigation.navigate("Queue",{
+                      user_id:stuid
+                    });
+                  },
+                },
+              ],
+              { cancelable: false }
+            );
+          } else {
+            alert(data["message"]);
+          }
+        });
+    } else {
+      alert("Qty cannot empty!");
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.mb5}>
+        <Text>Fuel Type</Text>
+        <TextInput style={styles.input} value={ftype} editable={false} />
+      </View>
+      <View style={styles.mb5}>
+        <Text>User Name</Text>
+        <TextInput style={styles.input} value={username} editable={false} />
+      </View>
+      <View style={styles.mb5}>
+        <Text>Vehicle Type</Text>
+        <TextInput style={styles.input} value={vehicle} editable={false} />
+      </View>
+      <View style={styles.mb5}>
+        <Text>Queue No</Text>
+        <TextInput style={styles.input} value={no} editable={false} />
+      </View>
+      <View style={styles.mb5}>
+        <Text>Amount of Leaters</Text>
+        <TextInput
+          style={styles.input}
+          onChangeText={setQty}
+          value={qty}
+          placeholder="Enter Amount of Leaters"
+          keyboardType="numeric"
+        />
+      </View>
+      <TouchableOpacity style={styles.button} onPress={fillFuel}>
+        <Text style={styles.buttonText}>Fill Fuel</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    backgroundColor: "#fff",
+  },
+  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",
+  },
+});

frontend/Screens/Station/Gasstock.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Image,
+  FlatList,
+} from "react-native";
+import React, { useState, useEffect } from "react";
+import { Entypo } from "@expo/vector-icons";
+import { AntDesign } from '@expo/vector-icons';
+import { useIsFocused } from "@react-navigation/native";
+
+export default function Gasstock({ route, navigation }) {
+  const { user_id } = route.params;
+  const [loading, setLoading] = useState(true);
+  const [stocks, setStocks] = useState([]);
+  const isFocused = useIsFocused();
+
+  const fetchData = () => {
+    fetch("https://fuel.udarax.me/api/station/stocks/" + user_id)
+      .then((response) => response.json())
+      .then((data) => {
+        setStocks(data["respond"]);
+        setLoading(false);
+      });
+  };
+
+  function FloatButton() {
+    return (
+      <TouchableOpacity
+        style={[styles.floatButton, styles.center]}
+        onPress={() =>
+          navigation.navigate("GasStockAdd", {
+            user_id: user_id,
+          })
+        }
+      >
+        <Entypo name="plus" size={30} color="white" />
+      </TouchableOpacity>
+    );
+  }
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchData();
+    }
+  }, [loading, isFocused]);
+
+  const Item = ({ item }) => (
+    <TouchableOpacity
+      style={styles.box}
+      onPress={() => navigation.navigate("GasStockEdit", { stockID: item.fcid , user_id:user_id  })}
+    >
+      <View style={styles.row}>
+        <View style={styles.col70}>
+          <Text style={styles.boxTitle}>{item.name}</Text>
+          <Text style={styles.boxtext}>Initial Volum : {item.ini_qty}</Text>
+          <Text style={styles.boxtext}>Current Volum : {item.current_qty}</Text>
+        </View>
+        <View style={[styles.col30, styles.center]}>
+          <View style={styles.delBox}>
+            <AntDesign name="edit" size={20} color="white" />
+          </View>
+        </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>
+      )}
+
+      {!loading && (
+        <FlatList
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          data={stocks}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.fcid}
+          onRefresh={() => fetchData()}
+          refreshing={loading}
+        />
+      )}
+      <FloatButton />
+    </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",
+  },
+  delBox:{
+    backgroundColor:"#f00",
+    borderRadius:50,
+    padding:15
+  },
+});

frontend/Screens/Station/Queue.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Image,
+  FlatList,
+} from "react-native";
+import React, { useState, useEffect } from "react";
+import { AntDesign } from "@expo/vector-icons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useIsFocused } from "@react-navigation/native";
+import { FontAwesome5 } from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
+
+export default function Queue({ route, navigation }) {
+  const { user_id } = route.params;
+  const [loading, setLoading] = useState(true);
+  const [queue, setQueue] = useState([]);
+  const isFocused = useIsFocused();
+
+  const fetchData = () => {
+    console.log(queue.length);
+    fetch("https://fuel.udarax.me/api/station/queue/" + user_id)
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("aaa");
+        console.log(data["respond"]);
+        if (data["respond"] == "error") {
+          setQueue([]);
+        } else {
+          setQueue(data["respond"]);
+        }
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchData();
+    }
+  }, [loading, isFocused]);
+
+  const Item = ({ item }) => (
+    <TouchableOpacity
+      style={styles.box}
+      onPress={() =>
+        navigation.navigate("FillingQueue", {
+          user_id: item.uid,
+          vehicle_id: item.vid,
+          station_id: item.sid,
+          fueltype_id: item.fid,
+          ftype: item.fname,
+          username: item.uname,
+          vehicle: item.vtype,
+          no: item.no,
+          qid: item.id,
+          stuid: user_id,
+        })
+      }
+    >
+      <View style={styles.row}>
+        <View style={styles.col70}>
+          <Text style={styles.boxTitle}>Queue No : {item.no}</Text>
+          <Text style={styles.boxtext}>Fuel Type : {item.fname}</Text>
+          <Text style={styles.boxtext}>User : {item.uname}</Text>
+          <Text style={styles.boxtext}>Vehicle Type : {item.vtype}</Text>
+        </View>
+        <View style={[styles.col30, styles.center]}>
+          {item.vtype == "Car" && (
+            <Ionicons name="car-sport" size={30} color="black" />
+          )}
+          {item.vtype == "Motorbike" && (
+            <MaterialCommunityIcons name="motorbike" size={30} color="black" />
+          )}
+          {item.vtype == "Bus" && (
+            <Ionicons name="bus" size={30} color="black" />
+          )}
+          {item.vtype == "Van" && (
+            <MaterialCommunityIcons
+              name="van-utility"
+              size={30}
+              color="black"
+            />
+          )}
+          {item.vtype == "Lorry" && (
+            <FontAwesome5 name="truck-moving" size={30} color="black" />
+          )}
+          {item.vtype == "Threewheeler" && (
+            <AntDesign name="fork" size={30} 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>
+      )}
+      {queue.length == 0 && (<Text> No Details</Text>)}
+      {!loading && (
+        <FlatList
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          data={queue}
+          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",
+  },
+});

frontend/Screens/Station/Station.js

+import { StyleSheet, Text, View, TouchableOpacity,FlatList, Image } 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 Station({ navigation }) {
+
+    const [loading, setLoading] = useState(true);
+    const [stations, setStations] = useState([]);
+    const isFocused = useIsFocused();
+
+    const fetchData = () => {
+      console.log("run1");
+      fetch("https://fuel.udarax.me/api/station/")
+      .then((response) => response.json())
+      .then((data) =>{
+          setStations(data['respond']);
+          setLoading(false);
+      });
+    }
+    useEffect(() => {
+      if(isFocused){ 
+        fetchData();
+        console.log("run2");
+      }
+    }, [loading,isFocused]);
+
+    const Item = ({ item }) => (
+        <TouchableOpacity style={styles.box} onPress={() => navigation.navigate("StationView",{stationID:item.id})}>
+            <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]}>
+                    <MaterialCommunityIcons name="gas-station" size={50} color="white" />
+                </View>
+            </View>
+         
+        </TouchableOpacity>
+    )
+        
+  
+
+    const renderItem = ({ item }) => (
+        <Item item={item} />
+    );
+
+    function FloatButton() {
+        return (
+        <TouchableOpacity
+            style={[styles.floatButton, styles.center]}
+            onPress={() => navigation.navigate("StationAdd")}
+        >
+            <Entypo name="plus" size={30} color="white" />
+        </TouchableOpacity>
+        );
+    }
+    return (
+        <View style={styles.container}>
+            { loading && (
+                <View>
+                    <Image style={styles.tinyLogo} source={require("../../assets/gasloading.gif")} />
+                </View>
+            )}
+
+            { !loading && (
+                <FlatList
+                    showsVerticalScrollIndicator={false}
+                    showsHorizontalScrollIndicator={false}
+                    data={stations}
+                    renderItem={renderItem}
+                    keyExtractor={item => item.id}
+                    onRefresh = {()=>fetchData()}
+                    refreshing = {loading}
+                    />
+            )}
+            
+            <FloatButton />
+        </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",
+  },
+});

frontend/Screens/Station/Stationsingle.js

+import { StyleSheet, Text, View, TouchableOpacity } 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 Stationsingle({userid}) {
+
+  const navigation = useNavigation();
+
+  const [loading, setLoading] = useState(true);
+  const [queue, setQueue] = useState([]);
+  const isFocused = useIsFocused();
+
+  const fetchData = () => {
+    fetch("https://fuel.udarax.me/api/station/queue/count/" + userid)
+      .then((response) => response.json())
+      .then((data) => {
+        console.log(data["respond"]);
+        if (data["respond"] == "error") {
+          setQueue([]);
+        } else {
+          setQueue(data["respond"]);
+        }
+        setLoading(false);
+      });
+  }
+
+  useEffect(() => {
+    if(isFocused){ 
+      fetchData();
+    }
+  }, [loading,isFocused]);
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.row, styles.mb5]}>
+        <TouchableOpacity
+          style={[styles.box,styles.boxfull,styles.row]}
+          onPress={() => navigation.navigate("Queue",{user_id:userid})}
+        >
+          <View style={[styles.col4,{justifyContent:'center'}]}>
+            <MaterialCommunityIcons name="human-queue" size={45} color="white" />
+            <Text style={styles.boxText}>Queue {new Date().toJSON().slice(0, 10)}</Text>
+          </View>
+          <View style={styles.col6}>
+            <Text style={styles.quetext}>{queue}</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+      <View style={[styles.row, styles.mb5]}>
+        <TouchableOpacity
+          style={styles.box}
+          onPress={() => navigation.navigate("GasPrices")}
+        >
+          <FontAwesome5 name="gas-pump" size={40} color="white" />
+          <Text style={styles.boxText}>Gas Pricing</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.box}
+          onPress={() => navigation.navigate("GasStock",{user_id:userid})}
+        >
+          <MaterialCommunityIcons name="fuel" size={45} color="white" />
+          <Text style={styles.boxText}>Gas Stocks</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={[styles.row, styles.mb5]}>
+        <TouchableOpacity style={styles.box}  onPress={() => navigation.navigate("Browser",{user_id:userid})}>
+          <FontAwesome5 name="truck-moving" size={40} color="white" />
+          <Text style={styles.boxText}>Bowsers</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.box}  onPress={() => navigation.navigate("Audit",{user_id:userid,role:'station'})}>
+          <Foundation name="graph-pie" size={40} color="white" />
+          <Text style={styles.boxText}>Audits</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    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%",
+  },
+  quetext:{
+    color:"#fff",
+    fontSize:70,
+    textAlign:'right'
+  }
+});

frontend/Screens/Station/Stationview.js

+import { StyleSheet, Text, View, Image, TouchableOpacity, Alert } from 'react-native'
+import React , { useState, useEffect } 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";
+
+export default function Stationview({route,navigation}) {
+  const { stationID } = route.params;
+
+  const [loading,setLoading] = useState(true);
+  const [station,setStation] = useState([]);
+  const isFocused = useIsFocused();
+
+  const [mapRegion, setmapRegion] = useState({
+    latitude: 37.78825,
+    longitude: -122.4324,
+    latitudeDelta: 0.0922,
+    longitudeDelta: 0.0421,
+  });
+
+  const fetchData = () => {
+    fetch("https://fuel.udarax.me/api/station/"+stationID)
+    .then((response) => response.json())
+    .then((data) =>{
+        setStation(data['respond']);
+        let location = data['respond']['location'];
+        console.log(location);
+        let lat = parseFloat(location.split(":")[0]);
+        let lon = parseFloat(location.split(":")[1]);
+
+        setmapRegion({
+          latitude: lat,
+          longitude: lon,
+          latitudeDelta: 0.0922,
+          longitudeDelta: 0.0421,
+        });
+        setLoading(false);
+    });
+  }
+
+  const deleteStation = () => {
+    Alert.alert(
+      //title
+      'Warning!',
+      //body
+      'Are you sure, Do you really wants to delete this station ?',
+      [
+        {text: 'Yes', onPress: () => {
+          fetch("https://fuel.udarax.me/api/station/delete/"+stationID)
+          .then((response) => response.json())
+          .then((data) =>{
+            console.log(data);
+            navigation.navigate("Station"); 
+          });
+        }},
+        {
+          text: 'No',
+          onPress: () => console.log('No Pressed'),
+          style: 'cancel',
+        },
+      ],
+      { cancelable: false }
+    );
+  }
+  
+  useEffect(()=>{
+    if(isFocused){ 
+      fetchData();
+    }
+  },[loading,isFocused]);
+
+
+  return (
+    <View style={styles.container2}>
+      {!loading && (
+        <View>
+            <View style={styles.row}>
+              <View style={styles.col7}>
+                <View style={[styles.row,styles.center]}>
+                  <Text style={styles.title}>{station.name}</Text>
+                  {station.availability == "open" && (<View style={styles.online}></View>)}
+                  {station.availability != "open" && (<View style={styles.offline}></View>)}
+                </View>
+              </View>
+              <View style={styles.col3}>
+                <TouchableOpacity style={styles.editbox} onPress={() => navigation.navigate("StationEdit",{stationID:stationID})}><FontAwesome name="pencil" size={24} color="white" /></TouchableOpacity>
+              </View>
+            </View>
+            <MapView style={styles.map}  region={mapRegion} >
+              <Marker coordinate={mapRegion} title='Marker' />
+            </MapView>
+            <View>
+              <View style={[styles.row,{marginTop:20}]}>
+                <View ><FontAwesome5 name="user-secret" size={24} color="black" /></View>
+                <View style={{marginLeft:20,justifyContent:'center'}}><Text style={{fontSize:16}}>{station.uname}</Text></View>
+              </View>
+              <View style={[styles.row,{marginTop:20}]}>
+                <View ><MaterialIcons name="email" size={24} color="black" /></View>
+                <View style={{marginLeft:20,justifyContent:'center'}}><Text style={{fontSize:16}}>{station.email}</Text></View>
+              </View>
+              <View style={[styles.row,{marginTop:20}]}>
+                <View ><FontAwesome name="phone-square" size={24} color="black" /></View>
+                <View style={{marginLeft:20,justifyContent:'center'}}><Text style={{fontSize:16}}>{station.phone}</Text></View>
+              </View>
+            </View>
+            <TouchableOpacity style={styles.button} onPress={() => deleteStation()}>
+              <Text style={styles.buttonText}>Delete</Text>
+            </TouchableOpacity>
+        </View>
+      )}
+      
+      { loading && (
+          <View style={styles.container}>
+              <Image style={styles.tinyLogo} source={require("../../assets/gasloading.gif")} />
+          </View>
+      )}
+     
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container:{
+    flex:1,
+    padding:20,
+    backgroundColor:"#fff",
+    justifyContent:'center',
+    alignItems:'center'
+  },
+  container2:{
+    flex:1,
+    padding:20,
+    backgroundColor:"#fff",
+  },
+  row:{
+    flexDirection:'row'
+  },
+  col7:{
+    width:"70%",
+    justifyContent:'center'
+  },
+  col3:{
+    width:"30%",
+    alignItems:'flex-end',
+    justifyContent:'center'
+  },
+  col7only:{
+    width:"70%",
+  },
+  col3only:{
+    width:"30%",
+  },
+  editbox:{
+    width:40,
+    height:40,
+    backgroundColor:"#f05a36",
+    borderRadius:10,
+    justifyContent:'center',
+    alignItems:'center'
+  },
+  title:{
+    fontSize:20,
+    fontWeight:"700",
+  },
+  map: {
+    width: '100%',
+    marginTop:20,
+    height: 400,
+  },
+  online:{
+    width:15,
+    height:15,
+    borderRadius:50,
+    backgroundColor:"#0f0",
+    marginLeft:10
+  },
+  offline:{
+    width:15,
+    height:15,
+    borderRadius:50,
+    backgroundColor:"#f00",
+    marginLeft:10
+  },
+  center:{
+    alignItems:'center',
+  },
+  button: {
+    alignItems: "center",
+    backgroundColor: "#f05a36",
+    marginTop: 20,
+    height: 45,
+    borderRadius: 5,
+    justifyContent: "center",
+  },
+  buttonText: {
+    color: "#fff",
+  },
+})
\ No newline at end of file

frontend/Screens/User/Stations.js

+import { StyleSheet, Text, View, TouchableOpacity,FlatList, Image } 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";
+import { FontAwesome5 } from '@expo/vector-icons';
+import { useNavigation } from "@react-navigation/native";
+
+export default function Stations() {
+  const navigation = useNavigation();
+  const [loading, setLoading] = useState(true);
+  const [stations, setStations] = useState([]);
+  const isFocused = useIsFocused();
+
+  const fetchData = () => {
+    fetch("https://fuel.udarax.me/api/station/")
+      .then((response) => response.json())
+      .then((data) => {
+        setStations(data["respond"]);
+        setLoading(false);
+      });
+  };
+  useEffect(() => {
+    if (isFocused) {
+      fetchData();
+    }
+  }, [loading, isFocused]);
+
+  const Item = ({ item }) => (
+    <TouchableOpacity
+      style={styles.box}
+      onPress={() => navigation.navigate("UserStationsView", { stationID: item.id })}
+    >
+      <View style={styles.row}>
+        <View style={styles.col70}>
+          <Text style={styles.boxTitle}>{item.name}</Text>
+          <Text style={styles.boxtext}>2.6 KM</Text>
+          <Text style={styles.boxtext}>{item.availability}</Text>
+        </View>
+        <View style={[styles.col30, styles.center]}>
+          <MaterialCommunityIcons name="gas-station" size={50} color="white" />
+        </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>
+      )}
+
+      {!loading && (
+        <View>
+        <FlatList
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          data={stations}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          onRefresh={() => fetchData()}
+          refreshing={loading}
+        />
+       
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding:20,
+    flex:1
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  mb5: {
+    marginBottom: 20,
+  },
+  boxfull: {
+    width: "100%",
+    backgroundColor: "#00539CFF",
+    padding: 20,
+  },
+  boxText: {
+    color: "#fff",
+    fontSize: 18,
+    marginTop: 10,
+  },
+  quetext: {
+    color: "#fff",
+    fontSize: 70,
+    textAlign: "right",
+  },
+  box: {
+    backgroundColor: "#f7c469",
+    padding: 20,
+    borderRadius: 15,
+    marginBottom: 20,
+  },
+  boxTitle: {
+    color: "#000",
+    fontWeight: "700",
+    fontSize: 16,
+  },
+  boxtext: {
+    color: "#000",
+  },
+});

frontend/Screens/User/Stationview.js

+import { StyleSheet, Text, View, Image, TouchableOpacity, Alert } from 'react-native'
+import React , { useState, useEffect } 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';
+
+export default function Stationview({route,navigation}) {
+  const { stationID } = route.params;
+
+  const [loading,setLoading] = useState(true);
+  const [station,setStation] = useState([]);
+  const [queue,setQueue] = useState();
+  const isFocused = useIsFocused();
+
+  const [mapRegion, setmapRegion] = useState({
+    latitude: 37.78825,
+    longitude: -122.4324,
+    latitudeDelta: 0.0922,
+    longitudeDelta: 0.0421,
+  });
+
+  const fetchData = () => {
+    fetch("https://fuel.udarax.me/api/station/"+stationID)
+    .then((response) => response.json())
+    .then((data) =>{
+        setStation(data['respond']);
+        setQueue(data['count'])
+        let location = data['respond']['location'];
+        console.log(location);
+        let lat = parseFloat(location.split(":")[0]);
+        let lon = parseFloat(location.split(":")[1]);
+
+        setmapRegion({
+          latitude: lat,
+          longitude: lon,
+          latitudeDelta: 0.0922,
+          longitudeDelta: 0.0421,
+        });
+        setLoading(false);
+    });
+  }
+
+  useEffect(()=>{
+    if(isFocused){ 
+      fetchData();
+    }
+  },[loading,isFocused]);
+
+
+  return (
+    <View style={styles.container2}>
+      {!loading && (
+        <View>
+            <View style={styles.row}>
+              <View style={styles.col7}>
+                <View style={[styles.row,styles.center]}>
+                  <Text style={styles.title}>{station.name}</Text>
+                  {station.availability == "open" && (<View style={styles.online}></View>)}
+                  {station.availability != "open" && (<View style={styles.offline}></View>)}
+                </View>
+              </View>
+            </View>
+            <MapView style={styles.map}  region={mapRegion} >
+              <Marker coordinate={mapRegion} title='Marker' />
+            </MapView>
+            <View>
+              <View style={[styles.row,{marginTop:20}]}>
+                <View ><MaterialCommunityIcons name="human-queue" size={24} color="black" /></View>
+                <View style={{marginLeft:20,justifyContent:'center'}}><Text style={{fontSize:16}}>{queue}</Text></View>
+              </View>
+              <View style={[styles.row,{marginTop:20}]}>
+                <View ><FontAwesome5 name="user-secret" size={24} color="black" /></View>
+                <View style={{marginLeft:20,justifyContent:'center'}}><Text style={{fontSize:16}}>{station.uname}</Text></View>
+              </View>
+              <View style={[styles.row,{marginTop:20}]}>
+                <View ><MaterialIcons name="email" size={24} color="black" /></View>
+                <View style={{marginLeft:20,justifyContent:'center'}}><Text style={{fontSize:16}}>{station.email}</Text></View>
+              </View>
+              <View style={[styles.row,{marginTop:20}]}>
+                <View ><FontAwesome name="phone-square" size={24} color="black" /></View>
+                <View style={{marginLeft:20,justifyContent:'center'}}><Text style={{fontSize:16}}>{station.phone}</Text></View>
+              </View>
+            </View>
+        </View>
+      )}
+      
+      { loading && (
+          <View style={styles.container}>
+              <Image style={styles.tinyLogo} source={require("../../assets/gasloading.gif")} />
+          </View>
+      )}
+     
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container:{
+    flex:1,
+    padding:20,
+    backgroundColor:"#fff",
+    justifyContent:'center',
+    alignItems:'center'
+  },
+  container2:{
+    flex:1,
+    padding:20,
+    backgroundColor:"#fff",
+  },
+  row:{
+    flexDirection:'row'
+  },
+  col7:{
+    width:"70%",
+    justifyContent:'center'
+  },
+  col3:{
+    width:"30%",
+    alignItems:'flex-end',
+    justifyContent:'center'
+  },
+  col7only:{
+    width:"70%",
+  },
+  col3only:{
+    width:"30%",
+  },
+  editbox:{
+    width:40,
+    height:40,
+    backgroundColor:"#f05a36",
+    borderRadius:10,
+    justifyContent:'center',
+    alignItems:'center'
+  },
+  title:{
+    fontSize:20,
+    fontWeight:"700",
+  },
+  map: {
+    width: '100%',
+    marginTop:20,
+    height: 400,
+  },
+  online:{
+    width:15,
+    height:15,
+    borderRadius:50,
+    backgroundColor:"#0f0",
+    marginLeft:10
+  },
+  offline:{
+    width:15,
+    height:15,
+    borderRadius:50,
+    backgroundColor:"#f00",
+    marginLeft:10
+  },
+  center:{
+    alignItems:'center',
+  },
+  button: {
+    alignItems: "center",
+    backgroundColor: "#f05a36",
+    marginTop: 20,
+    height: 45,
+    borderRadius: 5,
+    justifyContent: "center",
+  },
+  buttonText: {
+    color: "#fff",
+  },
+})
\ No newline at end of file

frontend/Screens/User/User.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';
+import { AntDesign } from '@expo/vector-icons';
+
+export default function User({userid}) {
+
+  const navigation = useNavigation(); 
+
+  return (
+    <View style={{justifyContent:'center',flex:1}}>
+      <View style={[styles.row,styles.mb5]}>
+        <TouchableOpacity style={styles.box} onPress={() => navigation.navigate("Filling",{user_id:userid})}>
+          <FontAwesome5 name="fill-drip" size={40} color="white" />
+          <Text style={styles.boxText}>Filling</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.box} onPress={() => navigation.navigate("UserStations")}>
+          <FontAwesome5 name="gas-pump" size={40} color="white" />
+          <Text style={styles.boxText}>Gas Stations</Text>
+        </TouchableOpacity>
+       
+      </View>
+      <View style={[styles.row,styles.mb5]}>
+        <TouchableOpacity style={styles.box} onPress={() => navigation.navigate("GasPrices")}>
+          <MaterialCommunityIcons name="fuel" size={45} color="white" />
+          <Text style={styles.boxText}>Fuel (Pricing)</Text>
+        </TouchableOpacity>
+       
+        <TouchableOpacity style={styles.box} onPress={() => navigation.navigate("MyVehicle",{user_id:userid})}>
+          <FontAwesome5 name="truck-moving" size={40} color="white" />
+          <Text style={styles.boxText}>My Vehicle</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.row}>
+        <TouchableOpacity style={styles.box}  onPress={() => navigation.navigate("Audit",{user_id:userid,role:'user'})}>
+          <AntDesign name="piechart" size={40} color="white" />
+          <Text style={styles.boxText}>Audit</Text>
+        </TouchableOpacity>
+        
+      </View>
+    </View>
+  )
+}
+const styles = StyleSheet.create({
+  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/User/Vehicle.js

+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  FlatList,
+  Image,
+} 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";
+import { FontAwesome5 } from "@expo/vector-icons";
+
+export default function Vehicle({ route, navigation }) {
+  const { user_id } = route.params;
+
+  const [loading, setLoading] = useState(true);
+  const [vehi, setVehi] = useState([]);
+  const isFocused = useIsFocused();
+
+  const fetchData = () => {
+    fetch("https://fuel.udarax.me/api/user/vehicle/" + user_id)
+      .then((response) => response.json())
+      .then((data) => {
+        setVehi(data["respond"]);
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    if (isFocused) {
+      fetchData();
+    }
+  }, [loading, isFocused]);
+
+  function FloatButton() {
+    return (
+      <TouchableOpacity
+        style={[styles.floatButton, styles.center]}
+        onPress={() => navigation.navigate("VehicleAdd",{
+          user_id:user_id
+        })}
+      >
+        <Entypo name="plus" size={30} color="white" />
+      </TouchableOpacity>
+    );
+  }
+
+  const Item = ({ item }) => (
+    <TouchableOpacity
+      style={styles.box}
+      onPress={() => navigation.navigate("VehicleEdit", { vehicleID: item.vid,user_id:user_id })}
+    >
+      <View style={styles.row}>
+        <View style={styles.col70}>
+          <Text style={styles.boxTitle}>{item.type.toUpperCase()} | {item.vehicle_no}</Text>
+          <Text style={styles.boxtext}>Capacity : {item.capacity}</Text>
+          <Text style={styles.boxtext}>Fuel Type : {item.ftype}</Text>
+        </View>
+        <View style={[styles.col30, styles.center]}>
+          <MaterialCommunityIcons name="gas-station" size={50} color="white" />
+        </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>
+      )}
+
+      {!loading && (
+        <View>
+          <FlatList
+            showsVerticalScrollIndicator={false}
+            showsHorizontalScrollIndicator={false}
+            data={vehi}
+            renderItem={renderItem}
+            keyExtractor={(item) => item.vid}
+            onRefresh={() => fetchData()}
+            refreshing={loading}
+          />
+        </View>
+      )}
+      <FloatButton />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    flex: 1,
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  mb5: {
+    marginBottom: 20,
+  },
+  boxfull: {
+    width: "100%",
+    backgroundColor: "#00539CFF",
+    padding: 20,
+  },
+  boxText: {
+    color: "#fff",
+    fontSize: 18,
+    marginTop: 10,
+  },
+  quetext: {
+    color: "#fff",
+    fontSize: 70,
+    textAlign: "right",
+  },
+  box: {
+    backgroundColor: "#f7c469",
+    padding: 20,
+    borderRadius: 15,
+    marginBottom: 20,
+  },
+  boxTitle: {
+    color: "#000",
+    fontWeight: "700",
+    fontSize: 16,
+  },
+  boxtext: {
+    color: "#000",
+  },
+  center: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  floatButton: {
+    width: 65,
+    height: 65,
+    backgroundColor: "#f05a36",
+    borderRadius: 100,
+    position: "absolute",
+    right: 20,
+    bottom: 20,
+  },
+});