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

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):

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

@@ -25,6 +25,7 @@ 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: {
@@ -57,6 +58,7 @@ function App() {
           <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/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/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`)
   }
 
@@ -164,14 +165,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

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