admin dashboard bug fixed

Backend/src/api/user.api.js

@@ -13,7 +13,7 @@ module.exports = function () {
     router.put('/updateUser', UserController.updateUser);
     router.get('/:id', UserController.getUserById);
     router.delete('/:id', UserController.deleteUser);
-    router.post('/search/:search', UserController.searchUser);
+    router.get('/search/:search', UserController.searchUser);
 
     return router;
 }

Backend/src/controller/user.controller.js

@@ -218,7 +218,12 @@ const validateUser = async (req, res) => {
                                 fullName: user.fullName,
                             }, process.env.JWT_SECRET)
 
-                            res.status(200).send({ user: token, userDetails: user });
+                            const subscriptionDetails = {
+
+
+                            }
+
+                            res.status(200).send({ user: token ,userDetails:user});
                         } else {
                             console.log("Credentials Does Not Matched");
                             res.status(500).send({ message: "Credentials Does Not Matched" });
@@ -238,6 +243,7 @@ const validateUser = async (req, res) => {
 const getAllUser = async (req, res) => {
     await User.find()
         .then((data) => {
+            console.log(data);
             res.status(200).send(data);
         })
         .catch(error => {
@@ -316,21 +322,25 @@ const getUserByEmail = async (req, res) => {
 
 // Update User 
 const updateUser = async (req, res) => {
+    console.log("Call Update User",req.body);
+        
+
     if (req.body) {
         let count = req.body.predictionCount;
         let countLimit = req.body.predictionCountLimit;
-        if (count == countLimit) {
-            req.body.subscriptionStatus = "Over";
+        // if(count == countLimit &&  req.body.subscriptionStatus==="Active"){
+        //     req.body.subscriptionStatus = "Over";
+        // }
+        try{
+            const data = await User.updateOne({ _id: req.body.id }, req.body)
+            console.log(data);
+            res.status(200).send(data);
         }
-        await User.updateOne({ _id: req.params.id }, { $set: req.body }, (err, result) => {
-            if (err) {
-                console.log(err);
-                res.status(500).send(err);
-            } else {
-                res.status(200).send({ message: "User Updated Successfully" });
-                console.log(result);
-            }
-        })
+        catch(err){
+            console.log(err);
+            res.status(500).send(err);
+        }
+
     }
 }
 
@@ -352,7 +362,7 @@ const deleteUser = async (req, res) => {
 // Search User
 const searchUser = async (req, res) => {
     try {
-        const data = await User.find({ $text: { $search: req.params.search } });
+        const data = await User.find({ email: { $regex: req.params.search, $options: 'i' } });
         if (!data) {
             res.status(404).send({ message: "User Not Found" });
         } else {
@@ -364,6 +374,10 @@ const searchUser = async (req, res) => {
     }
 }
 
+
+
+    
+
 // pagination
 const pagination = async (req, res) => {
     const page = req.params.page;
@@ -392,6 +406,24 @@ const pagination = async (req, res) => {
     }
 }
 
+
+
+
+//upload User Profile Image Cloudinary
+// const uploadProfileImage = async (req, res) => {
+//     try {
+//         const fileStr = req.body.data;
+//         const uploadResponse = await cloudinary.uploader.upload(fileStr, {
+//             upload_preset: 'ml_default',
+//         });
+//         console.log(uploadResponse);
+//         res.status(200).send(uploadResponse);
+//     } catch (err) {
+//         console.log(err);
+//         res.status(500).send(err);
+//     }
+// }
+
 module.exports = {
     createUser,
     getAllUser,

Backend/src/model/user.model.js

@@ -7,9 +7,8 @@ const UserSchema = new mongoose.Schema({
     isVerified: { type: Boolean, required: false },
     googleUser: { type: Boolean, required: false },
     emailToken: { type: String, required: false },
-    password: { type: String, required: true  },
+    password: { type: String, required: true },
     predictionCount: { type: Number, required: false },
-    predictionCountLimit: { type: Number, required: false },
     paymentType: { type: String, required: true },
     paymentID: { type: String, required: true },
     subscriptionPlan: { type: String, required: false },
@@ -17,7 +16,6 @@ const UserSchema = new mongoose.Schema({
     subscriptionDate: { type: String, required: false },
     subscriptionEndDate: { type: String, required: false },
     subscriptionStatus: { type: String, required: false },
-    subscriptionAmount: { type: Number, required: false },
 
 },{
     timestamps:true

bussifinder/.vscode/settings.json

+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#3c5d5a",
+        "activityBar.background": "#3c5d5a",
+        "activityBar.foreground": "#e7e7e7",
+        "activityBar.inactiveForeground": "#e7e7e799",
+        "activityBarBadge.background": "#251927",
+        "activityBarBadge.foreground": "#e7e7e7",
+        "commandCenter.border": "#e7e7e799",
+        "sash.hoverBorder": "#3c5d5a",
+        "statusBar.background": "#283e3c",
+        "statusBar.foreground": "#e7e7e7",
+        "statusBarItem.hoverBackground": "#3c5d5a",
+        "statusBarItem.remoteBackground": "#283e3c",
+        "statusBarItem.remoteForeground": "#e7e7e7",
+        "titleBar.activeBackground": "#283e3c",
+        "titleBar.activeForeground": "#e7e7e7",
+        "titleBar.inactiveBackground": "#283e3c99",
+        "titleBar.inactiveForeground": "#e7e7e799"
+    },
+    "peacock.color": "#283e3c"
+}
\ No newline at end of file

bussifinder/package-lock.json

@@ -32,6 +32,7 @@
         "jspdf": "^2.5.1",
         "jwt-decode": "^3.1.2",
         "mdb-react-ui-kit": "^4.2.0",
+        "moment": "^2.29.4",
         "react": "^18.1.0",
         "react-animated-3d-card": "^1.0.2",
         "react-chartjs-2": "^4.3.1",
@@ -9315,19 +9316,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -13374,6 +13362,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -26180,12 +26176,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
-    "fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "optional": true
-    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -29195,6 +29185,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

bussifinder/package.json

@@ -27,6 +27,7 @@
     "jspdf": "^2.5.1",
     "jwt-decode": "^3.1.2",
     "mdb-react-ui-kit": "^4.2.0",
+    "moment": "^2.29.4",
     "react": "^18.1.0",
     "react-animated-3d-card": "^1.0.2",
     "react-chartjs-2": "^4.3.1",

bussifinder/src/App.js

@@ -29,6 +29,7 @@ import ResultsWOTypes from './components/ResultsWOTypes';
 import LocationBasedPredict from './components/LocationBasedPredict';
 import FactorDetails from './components/FactorDetails';
 import AdminDashboard  from './components/Admin/AdminDashboard';
+import UserSubscriptionPlan from './components/User/UserSubscriptionPlan';
 
 const store = configureStore({
   reducer: {
@@ -65,6 +66,7 @@ function App() {
           <Route path="/locationBasedPredict" element={<LocationBasedPredict />} />
           <Route path="/Factor%20Details" element={<FactorDetails />} />
           <Route path="/AdminDashboard" element={<AdminDashboard />} />
+          <Route path="/UserSubscriptionPlan" element={<UserSubscriptionPlan />} />
         </Route>
       </Routes>
       <Footer />

bussifinder/src/assets/data/subscriptionPlan.js

+
+ const SUBSCRIPTION_PLAN = [
+        {
+            "id": 1,
+            "title": "Free Plan",
+            "price": 0,
+            "type": "Free",
+            "count": 3,
+            "duration": "monthly",
+            "description": "For most businesses that want to optimize web queries 1",
+
+        },
+        {
+            "id": 2,
+            "title": "Basic Plan",
+            "price": 10,
+            "count": 15,
+            "type": "Basic-monthly",
+            "duration": "monthly",
+            "description": "For most businesses that want to optimize web queries 2",
+        },
+        {
+            "id": 3,
+            "title": "Premium Plan",
+            "price": 100,
+            "count": 50,
+            "type": "Popular-monthly",
+            "duration": "monthly",
+            "description": "For most businesses that want to optimize web queries 3",
+
+        },
+        {
+            "id": 4,
+            "title": "Premium Plan",
+            "price": 150,
+            "count": 100,
+            "type": "Pro-monthly",
+            "duration": "monthly",
+            "description": "For most businesses that want to optimize web queries 4",
+        },
+        {
+            "id": 5,
+            "title": "Intro Plan",
+            "price": 500,
+            "count": 250,
+            "type": "Intro-yearly",
+            "duration": "yearly",
+            "description": "For most businesses that want to optimize web queries 5",
+        },{
+            "id": 6,
+            "title": "Basic Plan",
+            "price": 700,
+            "count": 400,
+            "type": "Basic-yearly",
+            "duration": "yearly",
+            "description": "For most businesses that want to optimize web queries 6",
+
+        },
+        {
+            "id": 7,
+            "title": "Premium Plan",
+            "price": 1000,
+            "count": 750,
+            "type": "Popular-yearly",
+            "duration": "yearly",
+            "description": "For most businesses that want to optimize web queries 7",
+
+        },
+        {
+            "id": 8,
+            "title": "Premium Plan",
+            "price": 1200,
+            "count": 1000,
+            "type": "Pro-yearly",
+            "duration": "yearly",
+            "description": "For most businesses that want to optimize web queries 8",
+
+        }
+    ]
+    
+
+export default SUBSCRIPTION_PLAN;
\ No newline at end of file

bussifinder/src/components/AccountMenu.js

@@ -19,6 +19,7 @@ import { darkMode, lightMode } from "../features/theme";
 import { makeStyles } from '@mui/styles';
 import { useDispatch } from "react-redux";
 import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
 function stringToColor(string) {
   let hash = 0;
@@ -88,7 +89,7 @@ const useStyles = makeStyles((theme) => ({
     padding: "10px 20px",
     cursor: "pointer",
     '&:hover': {
-      backgroundColor: themeColor => themeColor.status == 'dark' ? '#3e3d3d' : '#e3e3e3',
+      backgroundColor: themeColor => themeColor.status == 'dark' ? '#3e3d3d' : '#e3e3e3',cursor: "pointer",
     }
   },
   themeSwtich: {
@@ -100,6 +101,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function AccountMenu({ name, email, onLogOut }) {
+  let navigate = useNavigate();
   const themeColor = useSelector((state) => state.theme.value);
   const dispatch = useDispatch();
   const classes = useStyles(themeColor);
@@ -230,7 +232,9 @@ export default function AccountMenu({ name, email, onLogOut }) {
             Theme Mode<sup style={{ fontStyle: 'italic', fontSize: '12px', marginLeft: '-5px' , marginBottom: '-3px' }}>({themeColor.status})</sup> <Android12Switch sx={{ m: 1 }} checked={switchState} onChange={handleChange} />
           </div>
           <Divider sx={{ borderColor: '#b5b5b51f' }} />
-          <div className={classes.menuItems}>
+          <div className={classes.menuItems} 
+            onClick={() => {navigate('UserSubscriptionPlan')}}
+          >
             <ListItemIcon>
               <IoIosGitBranch style={{ color: '#956cd0', fontSize: "25px", marginLeft: 10 }} />
             </ListItemIcon>

bussifinder/src/components/Admin/AdminDashboard.js

@@ -26,6 +26,7 @@ import Dashboard from './Dashboard';
 import Subscriptions from './Subscriptions';
 import {TfiUser} from 'react-icons/tfi';
 import {BsColumns} from 'react-icons/bs';
+import { Logout } from '@mui/icons-material';
 const drawerWidth = 240;
 
 const openedMixin = (theme) => ({
@@ -126,6 +127,11 @@ const AdminDashboard = () => {
     dispatch(addHeader({ 'header': false, 'footer': false }))
 }, []);
 
+const onLogOut = () => {
+  localStorage.removeItem('token');
+  dispatch(Logout());
+}
+
   return (
     <Box sx={{ display: "flex" ,boxSizing:'border-box'}}>
       <CssBaseline />
@@ -206,7 +212,7 @@ const AdminDashboard = () => {
                 >
                   <IoLogOutOutline/>
                 </ListItemIcon>
-                <ListItemText primary={"Logout"} sx={{ opacity: open ? 1 : 0 }} />
+                <ListItemText primary={"Logout"} sx={{ opacity: open ? 1 : 0 }} onClick={onLogOut} />
               </ListItemButton>
             </ListItem>
         </List>

bussifinder/src/components/Admin/PredictionChart.js

+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import {
+  ArgumentAxis,
+  ValueAxis,
+  Chart,
+  LineSeries,
+} from '@devexpress/dx-react-chart-material-ui';
+
+const data = [
+  { argument: 1, value: 10 },
+  { argument: 2, value:50 },
+  { argument: 3, value: 30 },
+  { argument: 4, value: 30 },
+];
+
+const PredictionChart =() => (
+  <Paper>
+    <Chart
+      data={data}
+    >
+      <ArgumentAxis />
+      <ValueAxis />
+
+      <LineSeries valueField="value" argumentField="argument" />
+    </Chart>
+  </Paper>
+);
+
+export default PredictionChart;
\ No newline at end of file

bussifinder/src/components/Admin/ReportDownload.js

+import React, { useEffect, useState } from "react";
+import { jsPDF } from "jspdf";
+import api from "../../api";
+
+export const ReportDownload = ({ids,setDataToReport}) => {
+  const [dataReport, setDataReport] = useState([]);
+
+  useEffect(() => {
+   
+    setDataToReport(false)
+    
+        for(let i=0;i<ids.length;i++){
+            api.get(`/user/${ids[i]}`).then((response) => {
+                console.log(response.data)
+                setDataReport(response.data);
+              });
+            
+        }
+   
+    console.log(dataReport)
+    handleDownload(dataReport);
+  }, [ids]);
+
+  const doc = new jsPDF();
+
+  const handleDownload = (data) => {
+    console.log(data.length)
+  for (let i = 0; i < data.length; i++) {
+    doc.setFontSize(22);
+    doc.setFont("courier", "bolditalic");
+    doc.text(
+      "Hotel Success Precentage Prediction",
+      105,
+      8,
+      null,
+      null,
+      "center"
+    );
+    doc.setFont("helvetica", "normal");
+    doc.setFontSize(16);
+    doc.text(`Type : ${data.value[0].type}`, 20, 30);
+    doc.text(`Latitude : ${data.value[0].latitude}`, 20, 40);
+    doc.text(`Longitude : ${data.value[0].longitude}`, 20, 50);
+    doc.text(
+      `AttractionPlaces Count : ${data.value[0].locationFeatures.attractionPlacesCount}`,
+      20,
+      60
+    );
+    doc.text(
+      `Transportation Modes Count : ${data.value[0].locationFeatures.transportationModesCount}`,
+      20,
+      70
+    );
+    doc.text(
+      `Nearby Hotel Review Count : ${data.value[0].locationFeatures.nearByHotelReviewCount}`,
+      20,
+      80
+    );
+    doc.setFont("helvetica", "bold");
+    doc.text(`Final Prediction : ${data.value[0].ml_result}%`, 20, 90);
+    doc.save("Report.pdf");
+  }
+}
+};
+
+ 

bussifinder/src/components/Admin/Subscriptions.js

@@ -86,12 +86,6 @@ const headCells = [
     id: "id",
     numeric: true,
     disablePadding: true,
-    label: "Subscription ID",
-  },
-  {
-    id: "uid",
-    numeric: false,
-    disablePadding: true,
     label: "User ID",
   },
   {
@@ -118,12 +112,6 @@ const headCells = [
     disablePadding: false,
     label: "Subscription End Date",
   },
-  {
-    id: "subscriptionAmount",
-    numeric: true,
-    disablePadding: false,
-    label: "Subscription Amount",
-  },
   {
     id: "subscriptionStatus",
     numeric: false,
@@ -280,7 +268,7 @@ const Subscriptions = () => {
 
   
   useEffect(() => {
-    api.get("/subscription/").then((response) => {
+    api.get("/user/").then((response) => {
       console.log(response.data);
       setRows(response.data);
     });
@@ -400,7 +388,6 @@ const Subscriptions = () => {
                       >
                         {row._id}
                       </TableCell>
-                      <TableCell align="center">{row.userID}</TableCell>
                       <TableCell align="center">{row.paymentID}</TableCell>
                       <TableCell align="center">{row.paymentType}</TableCell>
                       <TableCell align="center">
@@ -409,9 +396,6 @@ const Subscriptions = () => {
                       <TableCell align="center">
                         {row.subscriptionEndDate}
                       </TableCell>
-                      <TableCell align="center">
-                        {row.subscriptionAmount}
-                      </TableCell>
                       <TableCell align="center">
                         {row.subscriptionStatus}
                       </TableCell>

bussifinder/src/components/AlertDialogSlide.js

@@ -12,19 +12,20 @@ const Transition = React.forwardRef(function Transition(props, ref) {
   return <Slide direction="up" ref={ref} {...props} />;
 });
 
-export default function AlertDialogSlide({ open, setOpen, title, content, setHandleConfirm }) {
+export default function AlertDialogSlide({ open, setOpen, title, content, handleConfirmDailog }) {
 //   const [open, setOpen] = React.useState(false);
 
 
   const handleCloseConfrim = () => {
+    handleConfirmDailog(true);
     setOpen(false);
 
-    setHandleConfirm(true);
+   
 
   };
   const handleClose = () => {
+    handleConfirmDailog(false);
     setOpen(false);
-    setHandleConfirm(false);
 
   };
 
@@ -57,5 +58,5 @@ AlertDialogSlide.propTypes = {
   setOpen: PropTypes.func,
   title: PropTypes.string,
   content: PropTypes.string,
-  setHandleConfirm: PropTypes.func,
+  handleConfirmDailog: PropTypes.func,
 }

bussifinder/src/components/Auth/SignIn.js

@@ -147,10 +147,7 @@ export default function SignIn() {
     const [error, setError] = React.useState(false);
     const [errorMsg, setErrorMsg] = React.useState("Error");
 
-    useEffect(() => {
-        console.log("userDetails", userDetails);
 
-    }, [userDetails]);
 
     useEffect(() => {
         function start() {
@@ -212,6 +209,7 @@ export default function SignIn() {
                                     console.log("result", result)
                                     let decodedToken = jwt_decode(result.data.user)
                                     localStorage.setItem('token', result.data.user)
+                                    localStorage.setItem('userInfo', JSON.stringify(result.data.userDetails))
                                     dispatch(login({ 'fullName': decodedToken.fullName, 'email': decodedToken.email }))
                                     dispatch(userInfo(result.data.userDetails))
                                     dispatch(addHeader({ 'header': true, 'footer': true }))
@@ -236,6 +234,7 @@ export default function SignIn() {
                             console.log("decodedToken", decodedToken)
 
                             localStorage.setItem('token', result.data.user)
+                            localStorage.setItem('userInfo', JSON.stringify(result.data.userDetails))
                             dispatch(login({ 'fullName': decodedToken.fullName, 'email': decodedToken.email }))
                             dispatch(userInfo(result.data.userDetails))
                             dispatch(addHeader({ 'header': true, 'footer': true }))
@@ -288,15 +287,14 @@ export default function SignIn() {
             const result = await API.post('user/validate', body)
             console.log("result", result)
             let decodedToken = jwt_decode(result.data.user)
-            console.log("decodedToken", decodedToken)
-
             localStorage.setItem('token', result.data.user)
+            localStorage.setItem('userInfo', JSON.stringify(result.data.userDetails))
             dispatch(login({ 'fullName': decodedToken.fullName, 'email': decodedToken.email }))
-            dispatch(userInfo(result.data.userDetails))
+            dispatch(userInfo(result.data?.userDetails))
             dispatch(addHeader({ 'header': true, 'footer': true }))
             navigate('/')
         } catch (error) {
-            console.log("errrrr",error)
+            console.log("error",error)
             setErrorMsg(error.response.data.message)
             handleError()
         }

bussifinder/src/components/Auth/SignUp.js

@@ -106,10 +106,10 @@ export default function SignUp() {
         dispatch(addHeader({ 'header': false, 'footer': false }))
     }, []);
 
-    useEffect(() => {
+    // useEffect(() => {
 
-        console.log("headerVisibilityeee", headerVisibility.value)
-    }, [headerVisibility]);
+    //     console.log("headerVisibilityeee", headerVisibility.value)
+    // }, [headerVisibility]);
 
     const handleSubmit = async (event) => {
         event.preventDefault();

bussifinder/src/components/Footer.js

@@ -65,10 +65,10 @@ const Footer = () => {
     let navigate = useNavigate();
     const headerVisibility = useSelector((state) => state.header)
 
-    useEffect(() => {
+    // useEffect(() => {
 
-        console.log("headerVisibilityeee", headerVisibility.value)
-    }, [headerVisibility]);
+    //     console.log("headerVisibilityeee", headerVisibility.value)
+    // }, [headerVisibility]);
 
     return (
         <>

bussifinder/src/components/ResponsiveAppBar.js

@@ -22,7 +22,7 @@ import { styled } from '@mui/material/styles';
 import AccountMenu from './AccountMenu';
 import { makeStyles } from '@mui/styles';
 import jwt_decode from "jwt-decode";
-import { login, logout } from '../features/user';
+import { login, logout, userInfo } from '../features/user';
 
 const useStyles = makeStyles((theme) => ({
   menuTabs: {
@@ -44,21 +44,22 @@ const ResponsiveAppBar = () => {
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
   const headerVisibility = useSelector((state) => state.header)
-
-
   const userDetails = useSelector((state) => state.user)
+  const token = localStorage.getItem('token');
+  const userInfoDetails = JSON.parse(localStorage.getItem('userInfo'));
 
   useEffect(() => {
-    const token = localStorage.getItem('token');
+  
     if (token) {
       let decodedToken = jwt_decode(token)
       dispatch(login({ 'fullName': decodedToken.fullName, 'email': decodedToken.email }))
     }
+    if(userInfoDetails){
+      console.log(userInfoDetails)
+      dispatch(userInfo(userInfoDetails))
+    }
   }, []);
 
-  useEffect(() => {
-    console.log("headerVisibility[0].header", headerVisibility.value[0].header)
-  }, [headerVisibility]);
 
   const handleOpenNavMenu = (event) => {
     setAnchorElNav(event.currentTarget);
@@ -88,6 +89,7 @@ const ResponsiveAppBar = () => {
 
   const onLogOut = () => {
     localStorage.removeItem('token');
+    localStorage.removeItem('userInfo');
     dispatch(logout());
   }
 

bussifinder/src/components/User/UserSubscriptionPlan.js

+import styled from "@emotion/styled";
+import { Margin } from "@mui/icons-material";
+import Button from "@mui/material/Button";
+import { makeStyles } from "@mui/styles";
+import { Box } from "@mui/system";
+import React, { useEffect } from "react";
+import { FiCheck } from "react-icons/fi";
+import { useSelector } from "react-redux";
+
+const UseStyles = makeStyles((theme) => ({
+  pricingBoxMost: {
+    width: "fit-content",
+    height: "100%",
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    gap: "5px",
+    paddingInline: "25px",
+    backgroundColor: "#151649",
+    borderRadius: "20px",
+    paddingBlock: "28px",
+    boxShadow: "0px 1px 10px 0px #888888",
+    backgroundImage: `url(${require("../../images/priceSvg.svg").default})`,
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "right",
+  },
+  priceMonthTxtMost: {
+    color: "#E4E6F1",
+    fontSize: "1rem",
+  },
+  priceTxtMost: {
+    color: "#E4E6F1",
+    fontSize: "28px",
+    fontWeight: "500",
+  },
+  planDescTxtMost: {
+    color: "#fff",
+    fontSize: "14px",
+    marginBottom: "10px",
+    width: "300px",
+    whiteSpace: "wrap",
+  },
+  planItemsMost: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row",
+    gap: "10px",
+    marginBlock: "5px",
+  },
+  planIconMost: {
+    color: "#E4E6F1",
+    backgroundColor: "#adadad3b",
+    padding: "3px",
+    borderRadius: "50%",
+  },
+  planItemTxtMost: {
+    color: "#E4E6F1",
+    fontSize: "14px",
+  },
+  planTypeTxtMost: {
+    color: "#E4E6F1",
+    fontSize: "19px",
+    fontWeight: "600",
+  },
+  popularTxtMost: {
+    color: "#dab23b",
+    fontSize: "10px",
+    fontWeight: "200",
+    backgroundColor: "#23206e",
+    paddingInline: "10px",
+    paddingBlock: "5px",
+    borderRadius: "30px",
+    textTransform: "Uppercase",
+    alignSelf: "flex-end",
+  },
+  titleTxt: {
+    color: "#231D4F",
+    fontSize: "29px",
+    fontWeight: "600",
+    marginBlock: "1rem",
+  },
+  subTxt: {
+    color: "#888888",
+    fontSize: "14px",
+    fontWeight: "400",
+    marginBottom: "1rem",
+  },
+  PlanTitleTxt: {
+    color: "#231D4F",
+    fontSize: "25px",
+    fontWeight: "600",
+    marginBlock: "1rem",
+  },
+  planIcon: {
+    color: "#282138",
+    backgroundColor: "#adadad3b",
+    padding: "3px",
+    borderRadius: "50%",
+  },
+  bodyTxt: {
+    marginBottom: "2px",
+    whiteSpace: "nowrap",
+  },
+  PlanDetailsTxt: {
+    color: "#231D4F",
+    fontSize: "25px",
+    fontWeight: "600",
+    marginBlock: "0.5rem",
+    marginInline: "3rem",
+    whiteSpace: "nowrap",
+  },
+}));
+
+const MostPlanButton = styled(Button)(({ theme }) => ({
+  width: "170px",
+  marginTop: "20px",
+  color: "#d29f1c",
+  borderRadius: "30px",
+  textTransform: "none",
+  fontSize: "12px",
+  boxSizing: "border-box",
+  alignSelf: "center",
+  paddingBlock: "8px",
+  /* "to left" / "to right" - affects initial color */
+  background: "linear-gradient(to left, #eac0732e 50%, #fbc1547c 50%) right",
+  backgroundSize: "200%",
+  transition: ".5s ease-out",
+  "&:hover": {
+    backgroundPosition: "left",
+  },
+}));
+
+const UserSubscriptionPlan = () => {
+  const classes = UseStyles();
+  const userInfo = useSelector((state) => state.user.userDetails);
+
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#E4E6F1",
+        paddingBlock: "50px",
+      }}
+    >
+      <div className={classes.titleTxt}>Simple, transparent pricing</div>
+      <div className={classes.subTxt}>No contracts. No surprise fees.</div>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "row-reverse",
+          gap: "70px",
+          height: "100%",
+          width: "100%",
+          padding: "2rem",
+          paddingInline: "13rem",
+          boxSizing: "border-box",
+        }}
+      >
+        <Box
+          sx={{
+            width: "fit-content",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            justifyContent: "center",
+            borderRadius: "20px",
+            border: "1px solid #888888",
+            gap: "20px",
+            padding: "2rem",
+            paddingBlock: "3rem",
+          }}
+        >
+          <div className={classes.PlanDetailsTxt}>Your Plan Details</div>
+          <div className={classes.planItemsMost}>
+            <FiCheck className={classes.planIcon} />
+            <div className={classes.bodyTxt}>Status - {userInfo?.subscriptionStatus} </div>
+          </div>
+          <div className={classes.planItemsMost}>
+            <FiCheck className={classes.planIcon} />
+            <div className={classes.bodyTxt}>Total Search - 40 </div>
+          </div>
+          <div className={classes.planItemsMost}>
+            <FiCheck className={classes.planIcon} />
+            <div className={classes.bodyTxt}>Left - 10 </div>
+          </div>
+          <div className={classes.planItemsMost}>
+            <FiCheck className={classes.planIcon} />
+            <div className={classes.bodyTxt}>Activate Date - 10/05/2022 </div>
+          </div>
+          <div className={classes.planItemsMost}>
+            <FiCheck className={classes.planIcon} />
+            <div className={classes.bodyTxt}>Expire Date - 10/07/2023 </div>
+          </div>
+        </Box>
+
+        <Box className={classes.pricingBoxMost}>
+          <div className={classes.popularTxtMost}>Premium Plan</div>
+          <div className={classes.priceMonthTxtMost}>
+            <span className={classes.priceTxtMost}>100$</span> /year
+          </div>
+          <div className={classes.planTypeTxtMost}>Pro</div>
+          <div className={classes.planDescTxtMost}>
+            For most businesses that want to otpimize web queries
+          </div>
+          <div className={classes.planItemsMost}>
+            <FiCheck className={classes.planIconMost} />
+            <div className={classes.planItemTxtMost}>Free forever</div>
+          </div>
+          <div className={classes.planItemsMost}>
+            <FiCheck className={classes.planIconMost} />
+            <div className={classes.planItemTxtMost}>Free forever</div>
+          </div>
+          <div className={classes.planItemsMost}>
+            <FiCheck className={classes.planIconMost} />
+            <div className={classes.planItemTxtMost}>Free forever</div>
+          </div>
+          <div className={classes.planItemsMost}>
+            <FiCheck className={classes.planIconMost} />
+            <div className={classes.planItemTxtMost}>Free forever</div>
+          </div>
+          <MostPlanButton> Upgrade Plan </MostPlanButton>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+export default UserSubscriptionPlan;

bussifinder/src/features/user.js

@@ -9,14 +9,13 @@ export const userSlice = createSlice({
     },
     reducers: {
         login: (state, action) => {
-            console.log("action.payload", action.payload)
             state.value.push(action.payload)
         },
         register: (state, action) => {
             state.value.push(action.payload)
         },
         userInfo: (state, action) => {
-            state.userDetails.push(action.payload)
+            state.userDetails=action.payload;
         },
         updateUser: (state, action) => {
         const  updateSubscription = async ()=>{
@@ -28,7 +27,7 @@ export const userSlice = createSlice({
         },
         logout: (state) => {
             state.value = [];
-            state.userDetails = null;
+            state.userDetails = [];
         },
     }
 });