Merge branch 'master' of http://gitlab.sliit.lk/2022-257/2022-257 into IT19023410

ML_Backend/app.py

@@ -61,6 +61,49 @@ def hotel():
             
         
 
+
+
+# Location Based Hotel Prediction
+
+def predictionHotelLB(lst):
+    filename = 'model/HotelLocationSuccessPredictor.pickle'
+    with open(filename, 'rb') as file:
+        model = pickle.load(file)
+    pred_value = model.predict([lst]).tolist()
+    return pred_value
+
+@app.route('/hotelLocationBase', methods=['POST', 'GET'])
+def hotelLB():
+    pred=0
+    if request.method == 'POST':
+        
+        Attraction_Place = request.json['AttractionPlace']
+        Transportation_Modes = request.json['TransportationModes']
+        NearByHotelReviewCount  = request.json['NearByHotelReviewCount']
+        CompetitorsCount = request.json['CompetitorsCount']
+        if ( isinstance(Attraction_Place, int) and  isinstance(Transportation_Modes, int) ): 
+            feature_list = []
+            
+            feature_list.append(int(CompetitorsCount))
+            feature_list.append(int(Transportation_Modes))
+            feature_list.append(int(Attraction_Place))
+            feature_list.append(int(NearByHotelReviewCount))
+        
+
+            pred = predictionHotelLB(feature_list)
+            print(pred)
+
+            return jsonify({'data': pred[0]})
+            
+        else :
+            if(not isinstance(Attraction_Place, int)):
+                return jsonify({'Error': "Acttraction Places Are Missing !"})
+            else :
+                return jsonify({'Error': "Transportation Modes Are Missing!"})
+            
+        
+
+
 #Restaurant API
         
 def predictionRestaurant(lst):
@@ -109,6 +152,57 @@ def restaurant():
                 return jsonify({'Error': "Distance To City Is Missing!"})
 
 
+
+# Location Based Restaurant API
+        
+def predictionRestaurantLB(lst):
+    filename = 'model/RestaurantRatingSuccessPredicto.pickle'
+    with open(filename, 'rb') as file:
+        model = pickle.load(file)
+    pred_value = model.predict([lst]).tolist()
+    return pred_value      
+
+@app.route('/restaurantLocationBase', methods=['POST', 'GET'])
+def restaurantLB():
+    if request.method == 'POST':
+        ShoppingMallsCount = request.json['ShoppingMallsCount']
+        EducationRelatedPlacesCount = request.json['EducationRelatedPlacesCount']
+        WorkPlacesCount  = request.json['WorkPlacesCount']
+        CompetitorsCount = request.json['CompetitorsCount']
+        DistanceToCity = request.json['DistanceToCity']
+        if ( isinstance(ShoppingMallsCount, int) and  (isinstance(DistanceToCity, float) or isinstance(DistanceToCity, int) ) ): 
+            feature_list = []
+
+            feature_list.append(int(ShoppingMallsCount))
+            feature_list.append(int(EducationRelatedPlacesCount))
+            feature_list.append(int(WorkPlacesCount))
+            feature_list.append(int(CompetitorsCount))
+            feature_list.append(float(DistanceToCity))
+            
+            # if(isinstance(Distance_ToCity, float)):
+            #     feature_list.append(float(Distance_ToCity))
+            # else:
+            #     feature_list.append(int(Distance_ToCity))
+            pred = predictionRestaurantLB(feature_list)
+            print(pred)
+
+            return jsonify({'data': pred[0]})
+            
+        else :
+            if(not isinstance(ShoppingMallsCount, int)):
+                return jsonify({'Error': "Shoping Area's Are Missing !"})
+            else :
+                return jsonify({'Error': "Distance To City Is Missing!"})
+
+
+
+
+
+
+
+
+
+
 #Pharmacy API
 
 def predictionPharmacy(lst):
@@ -159,5 +253,63 @@ def pharmacy():
                 return jsonify({'Error': "Distance to Busstation Missing!"})
 
 
+#Grocery
+
+def predictionGroceryl(lst):
+    filename = 'model/GroceryPredictor.pickle'
+    with open(filename, 'rb') as file:
+        model = pickle.load(file)
+    pred_value = model.predict([lst]).tolist()
+    return pred_value
+
+@app.route('/grocery', methods=['POST', 'GET'])
+def grocery():
+    pred=0
+    if request.method == 'POST':
+        
+        Trafficflow = request.json['Trafficflow']
+        Competitors = request.json['Competitors']
+        Instoreshopping  = request.json['Instoreshopping']
+        Delivery = request.json['Delivery']
+        Website = request.json['Website']
+        Sunday = request.json['Sunday']
+        Monday = request.json['Monday']
+        Tuesday = request.json['Tuesday']
+        Wednesday = request.json['Wednesday']
+        Thursday = request.json['Thursday']
+        Friday = request.json['Friday']
+        Saturday = request.json['Saturday']
+        ParkingArea = request.json['ParkingArea']
+        if ( isinstance(Trafficflow, int) and  isinstance(Competitors, int) ): 
+            feature_list = []
+            
+            feature_list.append(int(Trafficflow))
+            feature_list.append(int(Competitors))
+            feature_list.append(int(Instoreshopping))
+            feature_list.append(int(Delivery))
+            feature_list.append(int(Website))
+            feature_list.append(int(Sunday))
+            feature_list.append(int(Monday))
+            feature_list.append(int(Tuesday))
+            feature_list.append(int(Wednesday))
+            feature_list.append(int(Thursday))
+            feature_list.append(int(Friday))
+            feature_list.append(int(Saturday))
+            feature_list.append(int(ParkingArea))
+        
+
+            pred = predictionGroceryl(feature_list)
+            print(pred)
+
+            return jsonify({'data': pred[0]})
+            
+        else :
+            if(not isinstance(Trafficflow, int)):
+                return jsonify({'Error':"Traffic flow error!"})
+            else :
+                return jsonify({'Error': "Compatitor Count error!"})
+
+
+
 if __name__ =='__main__':
     app.run(debug=True) 
\ No newline at end of file

bussifinder/package-lock.json

@@ -6859,6 +6859,11 @@
         "slash": "^3.0.0"
       }
     },
+    "goober": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.11.tgz",
+      "integrity": "sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A=="
+    },
     "google-maps-infobox": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/google-maps-infobox/-/google-maps-infobox-2.0.0.tgz",
@@ -11083,6 +11088,14 @@
       "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz",
       "integrity": "sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA=="
     },
+    "react-cssfx-loading": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-cssfx-loading/-/react-cssfx-loading-2.1.0.tgz",
+      "integrity": "sha512-0SnS6HpaeLSaTxNuND6sAKTQmoKgjwFb9G2ltyEMmA5ARNN6TRQfiJ8PfaYM9RwVEOhDxIzGI7whb2zeI1VRxw==",
+      "requires": {
+        "goober": "^2.1.10"
+      }
+    },
     "react-csv": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz",
@@ -11219,6 +11232,14 @@
       "resolved": "https://registry.npmjs.org/react-geolocated/-/react-geolocated-4.0.3.tgz",
       "integrity": "sha512-p+BObdbWT4kINILkUZtqkWHippBsCLnQ+dyx9Bnd+m3086Xkw7VKWxcFavCd2pG6AM50jsiMJiDu0+DjelnT9g=="
     },
+    "react-glitch-effect": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-glitch-effect/-/react-glitch-effect-3.1.0.tgz",
+      "integrity": "sha512-qBjCTTSWPKTkvifWzJtO/tNDxEdtihJvshp5LYW+noiATloai679vHer4Vb/ipSPu9Yvu7xa+gB254WfNlpaaA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-google-charts": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/react-google-charts/-/react-google-charts-4.0.0.tgz",
@@ -11402,6 +11423,20 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-type-animation": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-2.1.1.tgz",
+      "integrity": "sha512-leXq9tZLsfbQWi+1PvsSc2XZYv9CqRrChvuv81M0UPECggBEQgplQzTO9LzgjYNPdnhf4UMeEtZMI4G1qPpuwA=="
+    },
+    "react-typed": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-typed/-/react-typed-1.2.0.tgz",
+      "integrity": "sha512-aDsaA6zkjAFJs8285APOqE85l/kwJ0/ZJmBhARwUrza4TTttrMM5FcMCGEDdThdfUdHo/0l9WXmxp1m2ik4qdw==",
+      "requires": {
+        "prop-types": "^15.6.0",
+        "typed.js": "^2.0.6"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -13197,6 +13232,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typed.js": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/typed.js/-/typed.js-2.0.12.tgz",
+      "integrity": "sha512-lyACZh1cu+vpfYY3DG/bvsGLXXbdoDDpWxmqta10IQUdMXisMXOEyl+jos+YT9uBbzK4QaKYBjT3R0kTJO0Slw=="
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",

bussifinder/package.json

@@ -28,12 +28,14 @@
     "react": "^18.1.0",
     "react-animated-3d-card": "^1.0.2",
     "react-chartjs-2": "^4.3.1",
+    "react-cssfx-loading": "^2.1.0",
     "react-csv": "^2.2.2",
     "react-csv-reader": "^3.5.0",
     "react-dom": "^18.1.0",
     "react-facebook-login": "^4.1.1",
     "react-gauge-chart": "^0.4.0",
     "react-geolocated": "^4.0.3",
+    "react-glitch-effect": "^3.1.0",
     "react-google-charts": "^4.0.0",
     "react-google-login": "^5.2.2",
     "react-google-maps": "^9.4.5",
@@ -44,6 +46,8 @@
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-type-animation": "^2.1.1",
+    "react-typed": "^1.2.0",
     "redux": "^4.2.0",
     "tsparticles": "^2.3.1",
     "typescript": "^4.6.4",

bussifinder/src/App.js

@@ -23,8 +23,10 @@ import Pricing from './components/Pricing';
 import SignUp from './components/Auth/SignUp';
 import SignIn from './components/Auth/SignIn';
 import BusinessTypePage from './components/BusinessTypePage';
+import InputGroceryDetails from './components/InputGroceryDetails';
 import MultipleResult from './components/MultipleResult';
 import ResultsWOTypes from './components/ResultsWOTypes';
+import LocationBasedPredict from './components/LocationBasedPredict';
 
 const store = configureStore({
   reducer: {
@@ -54,9 +56,11 @@ function App() {
           <Route path="/signUp" element={<SignUp />} />
           <Route path="/signIn" element={<SignIn />} />
           <Route path="/Service" element={<BusinessTypePage/>} />
+          <Route path="/inputGrocery" element={<InputGroceryDetails />} />
           <Route path="/multipleResult" element={<MultipleResult/>} />
           <Route path="/resultWOTypes" element={<ResultsWOTypes/>} />
           <Route path="/Service" element={<BusinessTypePage />} />
+          <Route path="/locationBasedPredict" element={<LocationBasedPredict />} />
         </Route>
       </Routes>
       <Footer />

bussifinder/src/Home.js

@@ -21,6 +21,7 @@ import ContactUs from './components/ContactUs';
 import Loader from './components/Loader';
 //import API from '../../Backend/src/api';
 
+
 const containerStyle = {
     width: '1400px',
     height: '500px'

bussifinder/src/components/Auth/SignIn.js

@@ -25,7 +25,7 @@ import { GoogleLogin } from 'react-google-login'
 import { gapi } from 'gapi-script'
 import { styled } from '@mui/material/styles';
 import { useNavigate } from "react-router-dom";
-import Logo from './../../images/logo.png'
+import Logo from './../../images/logo-new-dark.png'
 import API from '../../api';
 import jwt_decode from "jwt-decode";
 import { useSelector, useDispatch } from 'react-redux';

bussifinder/src/components/Auth/SignUp.js

@@ -20,7 +20,7 @@ import Social from './../../images/social.gif'
 import Woman from './../../images/woman.png'
 import { makeStyles } from '@mui/styles';
 import { useNavigate } from "react-router-dom";
-import Logo from './../../images/logo.png'
+import Logo from './../../images/logo-new-dark.png'
 import API from '../../api';
 import Snackbar from '@mui/material/Snackbar';
 import MuiAlert, { AlertProps } from '@mui/material/Alert';

bussifinder/src/components/BusinessTypePage.js

@@ -14,7 +14,7 @@ import Tab from '@mui/material/Tab';
 import TabContext from '@mui/lab/TabContext';
 import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
-import { addBusiness } from './../features/business';
+import { addNewBusiness } from './../features/business';
 
 
 const GetStarted = styled(Button)(() => ({
@@ -94,14 +94,19 @@ const BusinessTypePage = () => {
 
     const navigateToHInputForm = () => {
         console.log("first")
-        dispatch(addBusiness({ 'type': 'hotel' }))
+        dispatch(addNewBusiness({ 'type': 'hotel' }))
         navigate(`/inputHotel`);
     }
     
     const navigateToRInputForm = () => {
-        dispatch(addBusiness({ 'type': 'restaurant' }))
+        dispatch(addNewBusiness({ 'type': 'restaurant' }))
         navigate(`/inputHotel`)
     }
+
+    const navigateToLocationBasedPredic = () => {
+        dispatch(addNewBusiness({ 'type': 'locationBased' }))
+        navigate(`/locationBasedPredict`)
+    }
 return (
     <Box
         sx={{
@@ -128,8 +133,8 @@ return (
             height:'100%',
     }}
     >
-        <div className={classes.titleTxt}>Simple, transparent pricing</div>
-        <div className={classes.subTxt}>No contracts. No surprise fees.</div>
+        <div className={classes.titleTxt}>Predict, the success of your new business</div>
+        <div className={classes.subTxt}>Select a method from below two types according to your need.</div>
         <Box sx={{ 
             backgroundColor:'#fff',
             borderRadius:'40px',
@@ -155,7 +160,7 @@ return (
                     },
 
                 }} 
-                label="Without Idea" value="1" />
+                label="Location Based" value="1" />
                 <Tab 
                     indicatorColor="secondary"
                     sx={{
@@ -173,7 +178,7 @@ return (
                         color:'#dab23b',
                         fontWeight:'400',
                     },
-                    }}label="With Business Type" value="2" />
+                    }}label="Location And Business Type Based" value="2" />
                 </TabList>
             </Box>
         </Box>
@@ -249,14 +254,14 @@ return (
                     }}>
                             <div className={classes.titleTopBar}></div>
                             <div>
-                                <div style={{color:theme.textColor,fontSize:"34px",fontWeight:700}}>WEB APPLICATION <br/>
-                                    <span style={{fontWeight:400,}}>DEVELOPMENT</span>
+                                <div style={{color:theme.textColor,fontSize:"34px",fontWeight:700}}>LOCATION BASED <br/>
+                                    <span style={{fontWeight:400,}}>BUSINESS TYPE ANALYSIS</span>
                                 </div>
                             </div>
                             <div className={classes.bodyText}>
                                 We make sure your website looks the way you want it to where ever it is viewed. In this day and age there smart devices populate our entire life, We strive to ensure that the websites we create are always up to standard with the new devices releasing all the time. We develop dynamic websites based on our client requests such as Content Management System (CMS), E-commerce websites (Shopping carts), Online Bookings, Web Portals, Payment Gateways etc. There are many uses of having a dynamic site.
                             </div>
-                            <GetStarted variant="contained" endIcon={<ArrowForwardIosIcon />}>
+                            <GetStarted variant="contained" endIcon={<ArrowForwardIosIcon />} onClick={() => navigateToLocationBasedPredic()} >
                                 Get Started
                             </GetStarted>
                     </Box>
@@ -314,7 +319,7 @@ return (
                                 </div>
                             </div>
                             <div className={classes.bodyText}>
-                                We make sure your website looks the way you want it to where ever it is viewed. In this day and age there smart devices populate our entire life, We strive to ensure that the websites we create are always up to standard with the new devices releasing all the time. We develop dynamic websites based on our client requests such as Content Management System (CMS), E-commerce websites (Shopping carts), Online Bookings, Web Portals, Payment Gateways etc. There are many uses of having a dynamic site.
+                            location has a big impact on the demand your hotel will generate, and therefore will influence the price you can ask in the market for your rooms. Hence when starting a new hotel, the site selection process is a key step that should not be taken too lightly. In the evaluation of a hotel’s location, nine key characteristics that make up a hotel's location were chosen in order to build prediction models that can evaluate a potential hotel site on each characteristic. These attributes are location attraction, transportation modes count, competitors, nearby hotel reviews count, beach access, availability of Wi-Fi, Parking, A/C, Pool
                             </div>
                             <GetStarted variant="contained"  onClick={() => navigateToHInputForm()} endIcon={<ArrowForwardIosIcon />}>
                                 Get Started
@@ -420,9 +425,9 @@ return (
                                 </div>
                             </div>
                             <div className={classes.bodyText}>
-                                We make sure your website looks the way you want it to where ever it is viewed. In this day and age there smart devices populate our entire life, We strive to ensure that the websites we create are always up to standard with the new devices releasing all the time. We develop dynamic websites based on our client requests such as Content Management System (CMS), E-commerce websites (Shopping carts), Online Bookings, Web Portals, Payment Gateways etc. There are many uses of having a dynamic site.
+                            Site selection of a restaurant is one of the first steps of setting up restaurant. The success of a restaurant is heavily dependent on the location, and must be chosen carefully. Much thought and planning need to go into deciding the location, and many factors need to be considered before selecting the site. These key factors are reachability to the shopping areas, distance to the nearest city, competitors, education related places count, work related places count, availability of delivery service, restaurant opening and closing hours.
                             </div>
-                            <GetStarted variant="contained" onClick={() => navigateToHInputForm()}  endIcon={<ArrowForwardIosIcon />}>
+                            <GetStarted variant="contained" onClick={() => navigateToRInputForm()}  endIcon={<ArrowForwardIosIcon />}>
                                 Get Started
                             </GetStarted>
                     </Box>
@@ -576,7 +581,7 @@ return (
                                 </div>
                             </div>
                             <div className={classes.bodyText}>
-                                We make sure your website looks the way you want it to where ever it is viewed. In this day and age there smart devices populate our entire life, We strive to ensure that the websites we create are always up to standard with the new devices releasing all the time. We develop dynamic websites based on our client requests such as Content Management System (CMS), E-commerce websites (Shopping carts), Online Bookings, Web Portals, Payment Gateways etc. There are many uses of having a dynamic site.
+                                The location you choose for your business is a monumental decision that needs to be carefully considered. The more favorable the location, the higher possibility of the business succeeding. For each type of business, you need to consider different types of factors to find the best location for the particular business. "BussFinder" analyze the given location and generate an accurate business solution for the user. Users can use this tool to determine whether a place is good for a grocery, a restaurant, a pharmacy, or a hotel.
                             </div>
                             <GetStarted variant="contained" endIcon={<ArrowForwardIosIcon />}>
                                 Get Started

bussifinder/src/components/ContactUs.js

@@ -165,11 +165,11 @@ return (
                 }}
                 >   
                     <div className={classes.inputTxt}>Username</div>
-                    <input placeholder='name' className={classes.input} type="text" name="username" onChange={handleChange}/>
+                    <input className={classes.input} type="text" name="username" onChange={handleChange}/>
                     <div className={classes.inputTxt}>Email</div>
-                    <input placeholder='email' className={classes.input} type="text" name="email" onChange={handleChange}/>
+                    <input className={classes.input} type="text" name="email" onChange={handleChange}/>
                     <div className={classes.inputTxt}>Description</div>
-                    <input placeholder='description' className={classes.input} type="text" name="description" onChange={handleChange}/>
+                    <input className={classes.input} type="text" name="description" onChange={handleChange}/>
                     <ContactUsButton variant="contained" onClick={() => submitContactUsForm()}>Submit </ContactUsButton>
                 </Box>
         </Box>

bussifinder/src/components/DetailsBox.js

@@ -113,12 +113,12 @@ const DetailsBox =() => {
                         >
                             <span className={classes.titleTopBar}></span>
                             <div>
-                                <div style={{color:themeColor.textColor,fontSize:"34px",fontWeight:700}}>WEB APPLICATION <br/>
-                                    <span style={{fontWeight:400,}}>DEVELOPMENT</span>
+                                <div style={{color:themeColor.textColor,fontSize:"34px",fontWeight:700}}>  PREDICT YOUR DREAM BUSINESS <br/>
+                                    <span style={{fontWeight:400,}}>WITH BUSSIFINDER</span>
                                 </div>
                             </div>
                             <div className={classes.bodyText}>
-                                We make sure your website looks the way you want it to where ever it is viewed. In this day and age there smart devices populate our entire life, We strive to ensure that the websites we create are always up to standard with the new devices releasing all the time. We develop dynamic websites based on our client requests such as Content Management System (CMS), E-commerce websites (Shopping carts), Online Bookings, Web Portals, Payment Gateways etc. There are many uses of having a dynamic site.
+                                The location you choose for your business is a monumental decision that needs to be carefully considered. The more favorable the location, the higher possibility of the business succeeding. For each type of business, you need to consider different types of factors to find the best location for the particular business. "BussFinder" analyze the given location and generate an accurate business solution for the user. Users can use this tool to determine whether a place is good for a grocery, a restaurant, a pharmacy, or a hotel.
                             </div>
                             <GetStarted variant="contained" onClick={() => navigate('/Service')} endIcon={<ArrowForwardIosIcon />}>
                                 Get Started

bussifinder/src/components/Grocery Input/LocationDetails.js

+import * as React from 'react';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Map from './../Map'
+
+export default function LocationDetails() {
+    return (
+        <React.Fragment>
+            <Typography variant="h6" gutterBottom>
+                Location Selection
+            </Typography>
+            <div>
+                <Map/>
+                {/* <Grid item xs={12} sm={6}>
+                    <TextField
+                        required
+                        id="firstName"
+                        name="firstName"
+                        label="First name"
+                        fullWidth
+                        autoComplete="given-name"
+                        variant="standard"
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        required
+                        id="lastName"
+                        name="lastName"
+                        label="Last name"
+                        fullWidth
+                        autoComplete="family-name"
+                        variant="standard"
+                    />
+                </Grid>
+                <Grid item xs={12}>
+                    <TextField
+                        required
+                        id="address1"
+                        name="address1"
+                        label="Address line 1"
+                        fullWidth
+                        autoComplete="shipping address-line1"
+                        variant="standard"
+                    />
+                </Grid>
+                <Grid item xs={12}>
+                    <TextField
+                        id="address2"
+                        name="address2"
+                        label="Address line 2"
+                        fullWidth
+                        autoComplete="shipping address-line2"
+                        variant="standard"
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        required
+                        id="city"
+                        name="city"
+                        label="City"
+                        fullWidth
+                        autoComplete="shipping address-level2"
+                        variant="standard"
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        id="state"
+                        name="state"
+                        label="State/Province/Region"
+                        fullWidth
+                        variant="standard"
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        required
+                        id="zip"
+                        name="zip"
+                        label="Zip / Postal code"
+                        fullWidth
+                        autoComplete="shipping postal-code"
+                        variant="standard"
+                    />
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <TextField
+                        required
+                        id="country"
+                        name="country"
+                        label="Country"
+                        fullWidth
+                        autoComplete="shipping country"
+                        variant="standard"
+                    />
+                </Grid>
+                <Grid item xs={12}>
+                    <FormControlLabel
+                        control={<Checkbox color="secondary" name="saveAddress" value="yes" />}
+                        label="Use this address for payment details"
+                    />
+                </Grid> */}
+            </div>
+        </React.Fragment>
+    );
+}
\ No newline at end of file

bussifinder/src/components/Grocery Input/Review.js

+import React, { useState, useEffect } from 'react';
+import Typography from '@mui/material/Typography';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Grid from '@mui/material/Grid';
+import {
+    useLoadScript,
+    GoogleMap,
+    MarkerF,
+    InfoWindow
+} from "@react-google-maps/api";
+import {FaUmbrellaBeach} from 'react-icons/fa';
+import {AiOutlineWifi} from 'react-icons/ai';
+import {MdOutlinePool} from 'react-icons/md';
+import {RiParkingBoxLine} from 'react-icons/ri';
+import {BsWind} from 'react-icons/bs';
+import { useSelector, useDispatch } from 'react-redux';
+import { addBusiness } from './../../features/business';
+import {BiWorld} from 'react-icons/bi';
+import { AiOutlineShoppingCart,AiFillCalendar } from "react-icons/ai";
+import { TbTruckDelivery } from "react-icons/tb";
+
+export default function Review() {
+    const businessDetails = useSelector((state) => state.business)
+    const [center, setCenter] = useState({
+        lat: businessDetails && businessDetails.value[0].latitude ? businessDetails.value[0].latitude : '',
+        lng: businessDetails && businessDetails.value[0].longitude ? businessDetails.value[0].longitude : '',
+    });
+    const [position, setPosition] = useState({
+        lat: businessDetails && businessDetails.value[0].latitude ? businessDetails.value[0].latitude : '',
+        lng: businessDetails && businessDetails.value[0].longitude ? businessDetails.value[0].longitude : '',
+
+    });
+    const [zoom, setZoom] = useState(9);
+    const [clickedLatLng, setClickedLatLng] = useState(null);
+    const dispatch = useDispatch();
+
+    // useEffect(() => {
+    //     dispatch(addBusiness({ 'type': 'restaurant' }))
+    // }, []);
+
+    useEffect(() => {
+        if (businessDetails && businessDetails.value.length > 0) {
+            console.log("businessDetails", businessDetails.value)
+        }
+    }, [businessDetails]);
+
+    const { isLoaded } = useLoadScript({
+        // Enter your own Google Maps API key
+        googleMapsApiKey: "AIzaSyDzvpMhG1TmXhpoCfPCq-G4snf-R0vSWF4"
+    });
+
+    return (
+        <React.Fragment>
+            <Typography variant="h6" gutterBottom>
+                Summary
+            </Typography>
+            {businessDetails && businessDetails.value[0].type == 'Grocery' ?
+            <List disablePadding sx={{paddingInline:2}}>
+                <ListItem sx={{ py: 1, px: 0 }}>
+                <AiOutlineShoppingCart style={{color:'#ff802f',fontSize:'18px',marginRight:'8px'}}/> <ListItemText primary="In-Store-Shopping" />
+                    <Typography variant="subtitle1" sx={{ fontWeight: 500}}>{businessDetails.value[0].serviceDetails.shopping ? `Available` : `Not Available`}</Typography>
+                </ListItem>
+
+                <ListItem sx={{ py: 1, px: 0 }}>
+                <TbTruckDelivery style={{color:'#344ab1',fontSize:'20px',marginRight:'8px'}}/> <ListItemText primary="Delivery Service" />
+                    <Typography variant="subtitle1" sx={{ fontWeight: 500 }}>{businessDetails.value[0].serviceDetails.delivery ? `Available` : `Not Available`}</Typography>
+                </ListItem>
+
+                <ListItem sx={{ py: 1, px: 0 }}>
+                <BiWorld style={{color:'#4534b1',fontSize:'20px',marginRight:'8px'}}/> <ListItemText primary="WebSite Availability" />
+                    <Typography variant="subtitle1" sx={{ fontWeight: 500}}>{businessDetails.value[0].serviceDetails.web ? `Available` : `Not Available`}</Typography>
+                </ListItem>
+
+                <ListItem sx={{ py: 1, px: 0 }}>
+                <RiParkingBoxLine style={{color:'#b13434',fontSize:'20px',marginRight:'8px'}}/> <ListItemText primary="Parking Availabily" />
+                    <Typography variant="subtitle1" sx={{ fontWeight: 500 }}>{businessDetails.value[0].serviceDetails.parking ? `Available` : `Not Available`}</Typography>
+                </ListItem>
+
+                <ListItem sx={{ py: 1, px: 0 }}>
+                <AiFillCalendar style={{color:'#34b13f',fontSize:'20px',marginRight:'8px'}}/> <ListItemText primary="Available Days" />
+                </ListItem>
+                    <Typography display="inline" variant="subtitle1" sx={{ fontWeight: 500}}>{businessDetails.value[0].serviceDetails.mon ? `Monday, `:``}</Typography>
+                    <Typography display="inline"  variant="subtitle1" sx={{ fontWeight: 500}}>{businessDetails.value[0].serviceDetails.tue ? `Tuesday, `:``}</Typography>
+                    <Typography display="inline" variant="subtitle1" sx={{ fontWeight: 500}}>{businessDetails.value[0].serviceDetails.wedn ? `Wednesday, `:``}</Typography>
+                    <Typography display="inline" variant="subtitle1" sx={{ fontWeight: 500}}>{businessDetails.value[0].serviceDetails.thurs ? `Thursday, `:``}</Typography>
+                    <Typography display="inline" variant="subtitle1" sx={{ fontWeight: 500}}>{businessDetails.value[0].serviceDetails.fri ? `Friday, `:``}</Typography>
+                    <Typography display="inline" variant="subtitle1" sx={{ fontWeight: 500}}>{businessDetails.value[0].serviceDetails.sat ? `Saturday, `:``}</Typography>
+                    <Typography display="inline" variant="subtitle1" sx={{ fontWeight: 500}}>{businessDetails.value[0].serviceDetails.sun ? `Sunday`:``}</Typography>
+               
+            </List> :
+            businessDetails && businessDetails.value[0].type == 'restaurant' ?
+            <List disablePadding>
+                <ListItem sx={{ py: 1, px: 0 }}>
+                    <ListItemText primary="Opening Hours" />
+                    <Typography variant="subtitle1" sx={{ fontWeight: 500 }}>{businessDetails.value[0].serviceDetails.opening }</Typography>
+                </ListItem>
+
+                <ListItem sx={{ py: 1, px: 0 }}>
+                    <ListItemText primary="Closing Hours" />
+                    <Typography variant="subtitle1" sx={{ fontWeight: 500 }}>{businessDetails.value[0].serviceDetails.closing }</Typography>
+                </ListItem>
+
+                <ListItem sx={{ py: 1, px: 0 }}>
+                    <ListItemText primary="Delivery" />
+                            <Typography variant="subtitle1" sx={{ fontWeight: 500 }}>{businessDetails.value[0].serviceDetails.delivery == 'Delivery' ? `Available` : businessDetails.value[0].serviceDetails.delivery}</Typography>
+                </ListItem>
+
+              
+            </List>
+            : <div></div>}
+            <Grid container spacing={2}>
+                <Grid item xs={12} >
+                    <Typography variant="h6" gutterBottom sx={{ mt: 2,display:'flex',alignItems:'center',gap:'5px'}}>
+                        Location {position && (
+                                    <div style={{fontSize:"12px",marginTop:'5px',color:'#c4c2c0',fontStyle:'italic'}}>
+                                    ({position.lat}, {position.lng})
+                                    </div>
+                                )}
+                    </Typography>
+                    <div>
+                        {isLoaded ?
+                            <div>
+                                <GoogleMap
+                                    
+                                    center={center}
+                                    zoom={zoom}
+                                    mapContainerStyle={{
+                                        height: "35vh",
+                                    }}
+                                >
+                                    {position &&
+                                        <MarkerF
+                                            position={position}
+
+                                        />}
+
+
+                                </GoogleMap>
+
+                                {/* Our center position always in state */}
+                                {/* <h3>
+            Center {center.lat}, {center.lng}
+          </h3> */}
+
+                                {/* Position of the user's map click */}
+                                {/* {position && (
+                                    <div>
+                                        <h3>
+                                            Coordinates of the Selected Location:</h3> <span> {position.lat}, {position.lng}</span>
+                                    </div>
+                                )} */}
+
+                                {/* Position of the user's map click */}
+                                {/* {selectedPlace && <h3>Selected Marker: {selectedPlace.id}</h3>} */}
+                            </div> : <div>Loading...</div>}
+                    </div>
+                </Grid>
+            </Grid>
+        </React.Fragment>
+    );
+}
\ No newline at end of file

bussifinder/src/components/HomePageHeader.js

@@ -4,6 +4,8 @@ import MainBgImage from '../images/mainBgSvg.svg'
 import { darkMode,lightMode } from "../features/theme";
 import { useSelector } from "react-redux";
 import { makeStyles } from '@mui/styles';
+import Typed from "react-typed";
+import GlitchClip from 'react-glitch-effect/core/GlitchClip';
 import Logo from '../images/logo.png'
 import Particle from './Particle';
 
@@ -64,7 +66,7 @@ const HomePageHeader = () => {
         <Box sx={{
             width: "100%",
             height: "60vh",
-            backgroundColor:themeColor.status == 'light' ? '#646464':'#070939',
+            backgroundColor:themeColor.status == 'light' ? '#070939':'#020212',
             // backgroundImage: `url(${MainBgImage})`,
             // backgroundSize: "cover",
             // backgroundPosition: "top",
@@ -87,8 +89,8 @@ const HomePageHeader = () => {
                     flexDirection:"column",
                     boxSizing:"border-box",
                 }}> 
-                    <div className={classes.titleTxt}>BussiFinder</div>
-                    <div className={classes.subTitleTxt}>Explore Your Business</div>
+                    <GlitchClip duration={8000}><div className={classes.titleTxt}>BussiFinder</div></GlitchClip>
+                    <div className={classes.subTitleTxt}><Typed strings={["Explore Your Business"]} typeSpeed={40} /></div>
                 </Box>
             
 
@@ -104,7 +106,7 @@ const HomePageHeader = () => {
                     },
                 }}>
                     <img className={classes.vectorImg} src={require('../images/HomeVector.svg').default} alt="HomeVector"/>
-                    <img className={classes.vectorImgSvg} src={require('../images/mentalhealth.svg').default} alt="HomeVector"/>
+                    <img className={classes.vectorImgSvg} src={require('../images/headerPic.png')} alt="HomeVector"/>
             
                 </Box>
                 <div  className={classes.particle}><Particle/></div>

bussifinder/src/components/Hotel Input/InputDetails.js

@@ -23,6 +23,8 @@ import Backdrop from '@mui/material/Backdrop';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useNavigate } from "react-router-dom";
 import styled from '@emotion/styled';
+import { FillingBottle } from "react-cssfx-loading";
+import { TypeAnimation } from 'react-type-animation';
 
 
 const NextBtn = styled(Button)(() => ({
@@ -303,20 +305,65 @@ export default function InputDetails() {
                     </Stepper>
                     <React.Fragment>
                         {activeStep === steps.length ? (
-                            <Backdrop
-                                sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-                                open={open}
-                                onClick={handleClose}
-                            >
+                            // <Backdrop
+                            //     sx={{ color: '#000', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+                            //     open={open}
+                            //     onClick={handleClose}
+                            // >
                                 <React.Fragment>
-                                    <Typography variant="h5" gutterBottom>
+                                    {/* <Typography variant="h5" gutterBottom>
                                         Finalizing the Result.
                                     </Typography>
-                                    <CircularProgress color="inherit" />
+                                    <CircularProgress color="inherit" /> */}
+                                    <Box
+                                        sx={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            flexDirection: 'column',
+                                            justifyContent: 'center',
+                                            backgroundColor: '#65646e',
+                                            color: 'black',
+                                            gap: 2,
+                                            width: '100%',
+                                            height: '100%',
+                                            position: 'absolute',
+                                            top: 0,
+                                            left: 0,
+                                            right: 0,
+                                            bottom: 0,
+                                            boxSizing: 'border-box',
+                                            backgroundImage:'url(https://images.unsplash.com/photo-1478860409698-8707f313ee8b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80)',
+                                            padding:"10px",
+                                            backgroundRepeat: 'no-repeat',
+                                            backgroundSize: 'cover',
+                                            backgroundBlendMode: 'overlay',
+                                            
+                                        }}
+                                    >
+                                        <FillingBottle color="#101554" width="50px" height="50px" duration="3s" />
+                                        <TypeAnimation
+                                            sequence={[
+                                                'Loading', // Types 'One'
+                                                2000, // Waits 1s
+                                                'Analyzing', // Deletes 'One' and types 'Two'
+                                                4000, // Waits 2s
+                                                'Finalizing the Result.', // Types 'Three' without deleting 'Two'
+                                                () => {
+                                                console.log('Done typing!'); // Place optional callbacks anywhere in the array
+                                                }
+                                            ]}
+                                            wrapper="div"
+                                            cursor={true}
+                                            repeat={Infinity}
+                                            style={{ fontSize: '2em',color:"#101554" }}
+                                            />
+                                       
+                                    </Box>
+                                
                                 </React.Fragment>
 
 
-                            </Backdrop>
+                            // </Backdrop>
                         ) : (
                             <React.Fragment>
                                 {getStepContent(activeStep)}

bussifinder/src/components/Hotel Input/ServiceDetailsForm.js

@@ -99,9 +99,9 @@ export default function ServiceDetailsForm() {
         parking: businessDetails && businessDetails.value[0].serviceDetails && businessDetails.value[0].serviceDetails.parking ? businessDetails.value[0].serviceDetails.parking : false,
     })
     const [restaurantServiceDetails, setRestaurantServiceDetails] = useState({
-        opening: businessDetails && businessDetails.value[0].serviceDetails && businessDetails.value[0].serviceDetails.opening ? businessDetails.value[0].serviceDetails.opening : false,
-        closing: businessDetails && businessDetails.value[0].serviceDetails && businessDetails.value[0].serviceDetails.closing ? businessDetails.value[0].serviceDetails.closing : false,
-        delivery: businessDetails && businessDetails.value[0].serviceDetails && businessDetails.value[0].serviceDetails.delivery ? businessDetails.value[0].serviceDetails.delivery : false,
+        opening: businessDetails && businessDetails.value[0].serviceDetails && businessDetails.value[0].serviceDetails.opening ? businessDetails.value[0].serviceDetails.opening : "Morning",
+        closing: businessDetails && businessDetails.value[0].serviceDetails && businessDetails.value[0].serviceDetails.closing ? businessDetails.value[0].serviceDetails.closing : "Night",
+        delivery: businessDetails && businessDetails.value[0].serviceDetails && businessDetails.value[0].serviceDetails.delivery ? businessDetails.value[0].serviceDetails.delivery : "Contactless Delivery",
     })
     const dispatch = useDispatch();
 
@@ -279,8 +279,8 @@ export default function ServiceDetailsForm() {
                                         ml:3
                                     }}
                                 >
-                                    <FormControlLabel value="Night" control={<Radio />} label="Morning" />
-                                    <FormControlLabel value="Late Night" control={<Radio />} label="Evening" />
+                                    <FormControlLabel value="Night" control={<Radio />} label="Night" />
+                                    <FormControlLabel value="Late Night" control={<Radio />} label="Late Night" />
                                     <FormControlLabel value="24 hours" control={<Radio />} label="24 hours" />
                                 </RadioGroup>
                             </FormControl>

bussifinder/src/components/InputGroceryDetails.js

+import React from 'react'
+import InputDetailsGrocery from './Grocery Input/InputDetails'
+import { Box } from '@mui/system'
+
+const InputGroceryDetails = () => {
+  return (
+      <Box
+      sx={{
+        width:"100%",
+        height:"100%",
+        backgroundColor:'#E4E6F1',
+        boxSizing:"border-box",
+        backgroundImage: `url(${require('../images/about-shape-2.svg').default})`,
+        padding:"0px",
+        backgroundRepeat: 'repeat',
+        backgroundSize: 'contain',
+
+
+      }}
+      >
+        <InputDetailsGrocery />
+      </Box>
+  )
+}
+
+export default InputGroceryDetails
\ No newline at end of file

bussifinder/src/components/InputHotelDetails.js

@@ -18,6 +18,7 @@ const InputHotelDetails = () => {
         backgroundRepeat: 'no-repeat',
         backgroundSize: 'cover',
         backgroundAttachment:'fixed',
+        
 
       }}
       >

bussifinder/src/components/PropertyType.js

@@ -16,6 +16,7 @@ import { RiHotelLine } from 'react-icons/ri';
 import { IoRestaurantOutline } from 'react-icons/io5';
 import { MdOutlineMedicalServices } from 'react-icons/md';
 import { IoStorefrontOutline } from 'react-icons/io5';
+import { addNewBusiness } from './../features/business';
 
 const useStyles = makeStyles({
 
@@ -116,12 +117,12 @@ const PropertyType = () => {
 
 
   const navigateToHInputForm = () => {
-    dispatch(addBusiness({ 'type': 'hotel' }))
+    dispatch(addNewBusiness({ 'type': 'hotel' }))
     navigate('/inputHotel');
   }
 
   const navigateToRInputForm = () => {
-    dispatch(addBusiness({ 'type': 'restaurant' }))
+    dispatch(addNewBusiness({ 'type': 'restaurant' }))
     navigate(`/inputHotel`)
   }
 
@@ -131,6 +132,12 @@ const PropertyType = () => {
     navigate(`/inputPharmacy`)
   }
 
+  //Grocery navigation
+  const groceryNavigate = () => {
+    dispatch(addBusiness({ 'type': 'Grocery' }))
+    navigate('/inputGrocery');
+  }
+
   return (
     <div>
 
@@ -164,14 +171,14 @@ const PropertyType = () => {
               in={checked}
               style={{ transformOrigin: '0 0 0' }}
               {...(checked ? { timeout: 300 } : {})}>
-              <div style={{ height: "35px", fontSize: "26px", color: themeColor.fontColor }}>Featured Property Type</div>
+              <div style={{ height: "35px", fontSize: "26px", color: themeColor.fontColor }}>Featured Business Type</div>
             </Grow>
             <Grow
               in={checked}
               style={{ transformOrigin: '0 0 0' }}
               {...(checked ? { timeout: 1000 } : {})}
             >
-              <div style={{ height: "15px", fontSize: "16px", color: themeColor.subFontColor }}>Find All Of Property Types</div>
+              <div style={{ height: "15px", fontSize: "16px", color: themeColor.subFontColor }}> Select a business type that you hope to predict the succes rate.</div>
             </Grow>
           </div>
           <Box
@@ -249,7 +256,7 @@ const PropertyType = () => {
               </Box>
             </Zoom>
             <Zoom in={checked} style={{ transitionDelay: checked ? '200ms' : '0ms' }}>
-              <Box className={classes.typeBox} onClick={() => navigateToHInputForm()} >
+              <Box className={classes.typeBox} onClick={() => groceryNavigate()} >
                 <div className={classes.typeClip}>
                   <div className={classes.backClip}></div>
                   <div className={classes.frontClip}><IoStorefrontOutline className={classes.iconClip} /></div>

bussifinder/src/components/Results.js

@@ -69,7 +69,7 @@ export const options = {
         },
         title: {
             display: true,
-            text: 'Chart.js Bar Chart',
+            text: 'Competitors',
         },
     },
 };

bussifinder/src/features/business.js

@@ -38,6 +38,11 @@ export const businessSlice = createSlice({
             // state.value.push(action.payload)
             state.value[0] = action.payload
         },
+        addNewBusiness: (state, action) => {
+            // state.value.push(action.payload)
+            state.value= [];
+            state.value[0] = action.payload
+        },
         compareBusiness: (state, action) => {
             console.log("action.payload", action.payload)
             state.value[action.payload.length] = state.value[0]
@@ -52,5 +57,5 @@ export const businessSlice = createSlice({
         // }
     }
 });
-export const { addBusiness: addBusiness, compareBusiness: compareBusiness } = businessSlice.actions;
+export const { addBusiness: addBusiness, compareBusiness: compareBusiness ,addNewBusiness:addNewBusiness} = businessSlice.actions;
 export default businessSlice.reducer;
\ No newline at end of file