From 6606e405d34a0473e7755f7c00f340494141c4c6 Mon Sep 17 00:00:00 2001
From: pawan-dot <71133473+pawan-dot@users.noreply.github.com>
Date: Sun, 29 May 2022 23:52:57 +0530
Subject: [PATCH] add product

---
 package.json                               |   1 +
 public/index.html                          |   2 +-
 src/_nav.js                                |   6 +
 src/components/User/DailyLoggedUserData.js |  68 +++++
 src/components/User/LoginUser.js           |  94 ++++++
 src/components/User/MonthUserData.js       |  68 +++++
 src/components/User/MothlyLoginUser.js     |  74 +++++
 src/components/User/SpecificDate.js        |  79 +++++
 src/components/User/SpecificDateData.js    |  67 +++++
 src/data.js                                |   2 +-
 src/index.js                               |   9 +-
 src/routes.js                              |  14 +
 src/views/Commerce/AddProduct.js           | 300 +++++++++++++++++++
 src/views/Commerce/Editproducts.js         |   4 +-
 src/views/Commerce/Products.js             | 322 +++++++++++----------
 src/views/Profile/Profile.js               |  13 +-
 src/views/pages/login/Login.js             |   3 +
 17 files changed, 950 insertions(+), 176 deletions(-)
 create mode 100644 src/components/User/DailyLoggedUserData.js
 create mode 100644 src/components/User/LoginUser.js
 create mode 100644 src/components/User/MonthUserData.js
 create mode 100644 src/components/User/MothlyLoginUser.js
 create mode 100644 src/components/User/SpecificDate.js
 create mode 100644 src/components/User/SpecificDateData.js
 create mode 100644 src/views/Commerce/AddProduct.js

diff --git a/package.json b/package.json
index e4c48bf..94cdd3c 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-app-polyfill": "^2.0.0",
+    "react-date-picker": "^8.4.0",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
diff --git a/public/index.html b/public/index.html
index 523f748..6ca9446 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,7 +23,7 @@
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
+  <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> -->
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/_nav.js b/src/_nav.js
index c247bc4..9b71e49 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -321,6 +321,12 @@ const _nav = [
 
     ],
   },
+  {
+    component: CNavItem,
+    name: 'User Logs',
+    icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
+    to: '/loginUser',
+  },
 
   // {
   //   component: CNavGroup,
diff --git a/src/components/User/DailyLoggedUserData.js b/src/components/User/DailyLoggedUserData.js
new file mode 100644
index 0000000..a0bf399
--- /dev/null
+++ b/src/components/User/DailyLoggedUserData.js
@@ -0,0 +1,68 @@
+
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import { Link } from 'react-router-dom';
+const DailyLoggedUser = (item) => {
+    const [user, setUser] = useState(false);
+    const token = localStorage.getItem("authToken")
+    const id = item.item;
+    // console.log(id)
+    useEffect(() => {
+        const getData = async () => {
+
+            // console.log(id);
+            await axios.get(
+                `/api/user/getUser/${id}`,
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                    },
+
+                },
+            ).then(function (response) {
+                console.log(response.data.user)
+
+                setUser(response.data.user)
+                // console.log(user)
+
+            }).catch((error) => {
+                console.log(error.response)
+            })
+
+
+        }
+        getData()
+    }, [item])
+    //change time formate
+    function formatAMPM(date) {
+        var hours = new Date(date).getHours();
+        var minutes = new Date(date).getMinutes();
+        var ampm = hours >= 12 ? 'PM' : 'AM';
+        hours = hours % 12;
+        hours = hours ? hours : 12; // the hour '0' should be '12'
+        minutes = minutes < 10 ? '0' + minutes : minutes;
+        var strTime = hours + ':' + minutes + ' ' + ampm;
+        return strTime;
+    }
+
+    return (
+        <>
+
+
+            <tr>
+                <th scope="row">{user?._id}</th>
+                <td>{user?.name}</td>
+
+                <td>{new Date(`${user?.cafeLoginTime}`).toDateString()}<span> , {`${formatAMPM(user?.cafeLoginTime)}`}</span></td>
+                {/* new Date('2022-05-24T04:33:21.021Z').toUTCString() */}
+                {/* <td>@mdo</td> */}
+            </tr>
+
+
+
+
+        </>
+    )
+}
+
+export default DailyLoggedUser
\ No newline at end of file
diff --git a/src/components/User/LoginUser.js b/src/components/User/LoginUser.js
new file mode 100644
index 0000000..c1e5cb4
--- /dev/null
+++ b/src/components/User/LoginUser.js
@@ -0,0 +1,94 @@
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import { Link } from 'react-router-dom'
+import DailyLoggedUser from './DailyLoggedUserData'
+const LoginUser = () => {
+    const id = localStorage.getItem('ownerId')
+    const token = localStorage.getItem("authToken")
+    const [users, setUsers] = useState([])
+    const [count, setCount] = useState()
+
+
+    // console.log(id)
+
+    useEffect(async () => {
+
+        await axios.get(
+            `/api/user/DailyLoginUserInCafe/${id}`,
+            {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+
+            },
+        ).then(function (response) {
+            // console.log(response.data)
+
+
+            setUsers(response.data.Daily)
+            // let countNo = [];
+            // countNo.push(response.data.Daily)
+
+            // const a = (1 + countNo.length)
+            // setCount(a)
+            // let counter = 0;
+            // for (let i = 0; i <= count.length; i++) {
+            //     counter++;
+            // }
+
+
+
+
+        }).catch((error) => {
+            console.log(error.message)
+        })
+        // console.log(count);
+
+    }, []);
+
+
+
+    return (
+        <>
+            <div className='mb-4'>
+
+                <Link to="/monthlylogin"><button type="button" className="btn btn-warning float-end mb-3 ml-4"> Last Month Visit Users</button></Link>
+
+                <Link to="/specificDateLoginUser"><button type="button" className="btn btn-info float-end mb-3 "> Specific Date Visit</button></Link>
+            </div>
+
+            <div>
+                <div>
+                    <div><span className='mb-3 fs-4 fw-bolder'>Daily Cafe Visit User   <button className="btn btn-dark mb-2 mr-3 ">{`Total Users ${users.length}`}</button></span>
+                        <div>
+                            <table className="table">
+                                <thead className="thead-dark ">
+                                    <tr>
+                                        <th scope="col"> User ID</th>
+                                        <th scope="col">User Name</th>
+                                        <th scope="col">Login Time </th>
+                                        {/* <th scope="col">Handle</th> */}
+                                    </tr>
+                                </thead>
+
+                                <tbody>
+                                    {users && users.map((item, index) =>
+                                        <DailyLoggedUser item={item} key={index} />
+                                    )}
+
+                                </tbody>
+
+                            </table >
+                        </div >
+
+                    </div >
+                    <div>
+                    </div>
+                </div >
+            </div>
+        </>
+
+    )
+}
+
+export default LoginUser
\ No newline at end of file
diff --git a/src/components/User/MonthUserData.js b/src/components/User/MonthUserData.js
new file mode 100644
index 0000000..6da74aa
--- /dev/null
+++ b/src/components/User/MonthUserData.js
@@ -0,0 +1,68 @@
+
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+
+const MonthUserDara = (item) => {
+    const [loginUser, setLoginUser] = useState(false);
+    const token = localStorage.getItem("authToken")
+
+    const id = item.item;
+    // console.log(id)
+    useEffect(() => {
+        const getData = async () => {
+
+            // console.log(id);
+            await axios.get(
+                `/api/user/getUser/${id}`,
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                    },
+
+                },
+            ).then(function (response) {
+                console.log(response.data.user)
+
+                setLoginUser(response.data.user)
+                // console.log(user)
+
+            }).catch((error) => {
+                console.log(error.response)
+            })
+
+
+        }
+        getData()
+    }, [item])
+    //change time formate
+    function formatAMPM(date) {
+        var hours = new Date(date).getHours();
+        var minutes = new Date(date).getMinutes();
+        var ampm = hours >= 12 ? 'PM' : 'AM';
+        hours = hours % 12;
+        hours = hours ? hours : 12; // the hour '0' should be '12'
+        minutes = minutes < 10 ? '0' + minutes : minutes;
+        var strTime = hours + ':' + minutes + ' ' + ampm;
+        return strTime;
+    }
+
+    return (
+        <>
+            {loginUser &&
+                <tr>
+
+                    <th scope="row">{loginUser?._id}</th>
+                    <td>{loginUser?.name}</td>
+                    { }
+                    <td>{new Date(`${loginUser?.cafeLoginTime}`).toDateString()}<span> , {`${formatAMPM(loginUser?.cafeLoginTime)}`}</span></td>
+                    {/* new Date('2022-05-24T04:33:21.021Z').toUTCString() */}
+                    {/* <td>@mdo</td> */}
+                </tr>
+            }
+
+
+        </>
+    )
+}
+
+export default MonthUserDara
\ No newline at end of file
diff --git a/src/components/User/MothlyLoginUser.js b/src/components/User/MothlyLoginUser.js
new file mode 100644
index 0000000..a533ac1
--- /dev/null
+++ b/src/components/User/MothlyLoginUser.js
@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import MonthUserData from './MonthUserData';
+const MothlyLoginUser = () => {
+    // const [users, setUsers] = useState(false);
+    const id = localStorage.getItem('ownerId')
+    const [monthlyUsers, setMonthlyUsers] = useState(false);
+    const token = localStorage.getItem("authToken")
+    const [mcount, setMcount] = useState()
+    // console.log(id)
+    useEffect(async () => {
+
+        await axios.get(
+            `/api/user/DailyLoginUserInCafe/${id}`,
+            {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+
+            },
+        ).then(function (response) {
+            // console.log(response.data.MonthlyUser)
+
+            setMonthlyUsers(response.data.MonthlyUser)
+        }).catch((error) => {
+            console.log(error.message)
+        })
+
+
+
+
+    }, [])
+    //change time formate
+
+    // console.log(monthlyUsers.length)
+    // const a = console.log(a)
+
+    return (
+        <>
+            <div>
+                <div>
+                    <div>
+                        <span className='mb-3 fs-4 fw-bolder'>Mothaly Cafe Visit User </span>
+                        <button className="btn btn-dark mb-2 float-end">{`Total Users ${monthlyUsers.length}`}</button>
+                        <div>
+                            <table className="table">
+                                <thead className="thead-dark ">
+                                    <tr>
+                                        <th scope="col"> User ID</th>
+                                        <th scope="col">User Name</th>
+                                        <th scope="col">Login Time </th>
+                                        {/* <th scope="col">Handle</th> */}
+                                    </tr>
+                                </thead>
+
+                                <tbody>
+                                    {monthlyUsers && monthlyUsers.map((item, index) =>
+                                        <MonthUserData item={item} key={index} />
+                                    )}
+                                </tbody>
+
+                            </table>
+                        </div>
+
+                    </div>
+                    <div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default MothlyLoginUser
\ No newline at end of file
diff --git a/src/components/User/SpecificDate.js b/src/components/User/SpecificDate.js
new file mode 100644
index 0000000..1978ca8
--- /dev/null
+++ b/src/components/User/SpecificDate.js
@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+import axios from 'axios'
+import DatePicker from 'react-date-picker';
+import SpecificDateData from './SpecificDateData';
+const SpecificDate = () => {
+    const id = localStorage.getItem('ownerId')
+    const token = localStorage.getItem("authToken")
+    const [specificUsers, setSpecificUsers] = useState([])
+    const [value, setOnChange] = useState(new Date());
+
+    const handleChange = (e) => {
+
+        axios.post(
+            `/api/user/getUsersInCafeSpecificDate/${id}`,
+            { date: e },
+            {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+
+            },
+        ).then(function (response) {
+            console.log(response.data)
+
+            setSpecificUsers(response.data.unique)
+
+            // console.log(users)
+
+        }).catch((error) => {
+            console.log(error.message)
+        })
+    }
+    console.log(value)
+    console.log(specificUsers.length)
+    return (
+        <> <div className='mb-4'>
+            <span className='fs-6 fw-bolder mb-0'>Specific Date Visit's : <DatePicker onChange={(e) => { setOnChange(e); handleChange(e) }} value={value} /></span>
+            <button className="btn btn-dark  float-end mr-4">{`Total Users ${specificUsers.length}`}</button>
+
+        </div>
+
+            <div>
+                <div>
+                    <div><span className='mb-3 fs-4 fw-bolder'>Specific Date Visit User In Cafe </span>
+
+                        <div>
+                            <table className="table">
+                                <thead className="thead-dark ">
+                                    <tr>
+                                        <th scope="col"> User ID</th>
+                                        <th scope="col">User Name</th>
+                                        <th scope="col">Login Time </th>
+                                        {/* <th scope="col">Handle</th> */}
+                                    </tr>
+                                </thead>
+
+                                <tbody>
+                                    {specificUsers && specificUsers.map((item, index) =>
+                                        <SpecificDateData item={item} key={index} />
+                                    )}
+
+                                </tbody>
+
+                            </table >
+                        </div >
+
+                    </div >
+                    <div>
+                    </div>
+                </div >
+            </div>
+
+
+
+
+        </>
+    )
+}
+export default SpecificDate
\ No newline at end of file
diff --git a/src/components/User/SpecificDateData.js b/src/components/User/SpecificDateData.js
new file mode 100644
index 0000000..c8f7fbc
--- /dev/null
+++ b/src/components/User/SpecificDateData.js
@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+
+const SpecificDateData = (item) => {
+    const [specificDate, setSpecificDate] = useState(false);
+    const token = localStorage.getItem("authToken")
+
+    const id = item.item;
+    // console.log(id)
+    useEffect(() => {
+        const getData = async () => {
+
+            // console.log(id);
+            await axios.get(
+                `/api/user/getUser/${id}`,
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                    },
+
+                },
+            ).then(function (response) {
+                console.log(response.data.user)
+
+                setSpecificDate(response.data.user)
+                // console.log(user)
+
+            }).catch((error) => {
+                console.log(error.response)
+            })
+
+
+        }
+        getData()
+    }, [item])
+    //change time formate
+    function formatAMPM(date) {
+        var hours = new Date(date).getHours();
+        var minutes = new Date(date).getMinutes();
+        var ampm = hours >= 12 ? 'PM' : 'AM';
+        hours = hours % 12;
+        hours = hours ? hours : 12; // the hour '0' should be '12'
+        minutes = minutes < 10 ? '0' + minutes : minutes;
+        var strTime = hours + ':' + minutes + ' ' + ampm;
+        return strTime;
+    }
+
+    return (
+        <>
+            {specificDate &&
+                <tr>
+
+                    <th scope="row">{specificDate?._id}</th>
+                    <td>{specificDate?.name}</td>
+                    { }
+                    <td>{new Date(`${specificDate?.cafeLoginTime}`).toDateString()}<span> , {`${formatAMPM(specificDate?.cafeLoginTime)}`}</span></td>
+                    {/* new Date('2022-05-24T04:33:21.021Z').toUTCString() */}
+                    {/* <td>@mdo</td> */}
+                </tr>
+            }
+
+
+        </>
+    )
+}
+
+export default SpecificDateData
\ No newline at end of file
diff --git a/src/data.js b/src/data.js
index 37d2514..d2cb2d8 100644
--- a/src/data.js
+++ b/src/data.js
@@ -1,6 +1,6 @@
 // export const API = "https://mantur-server.herokuapp.com";
 // export const API = "https://api.tellytell.com";
-// export const API = "http://localhost:5000";
+export const API = "http://localhost:5000";
 // export const API = "https://popstoreeee.herokuapp.com";
 
 import { useEffect } from 'react';
diff --git a/src/index.js b/src/index.js
index 7db204c..fd60cb2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,4 @@
-// import 'bootstrap/dist/css/bootstrap.min.css';
-// import "bootstrap/dist/js/bootstrap.js";
 
-// import "bootstrap";
-// import "bootstrap/dist/css/bootstrap.css";
-// import "bootstrap/dist/js/bootstrap.js";
 import 'react-app-polyfill/stable'
 import 'core-js'
 import React from 'react'
@@ -15,8 +10,8 @@ import store from './store'
 import axios from 'axios'
 
 const setupAxios = () => {
-  axios.defaults.baseURL = 'https://dating-api-server.herokuapp.com';
-  //axios.defaults.baseURL = 'http://localhost:5000'
+  // axios.defaults.baseURL = 'https://dating-api-server.herokuapp.com';
+  axios.defaults.baseURL = 'http://localhost:5000'
   axios.defaults.headers = {
     'Cache-Control': 'no-cache,no-store',
     'Pragma': 'no-cache',
diff --git a/src/routes.js b/src/routes.js
index 6359e63..f3e6ea1 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,6 +1,13 @@
 import React from 'react'
 import Products from './views/Commerce/Products'
 import EditProducts from './views/Commerce/Editproducts'
+import LoginUser from './components/User/LoginUser'
+
+//user logged property
+import MothlyLoginUser from './components/User/MothlyLoginUser'
+import SpecificDate from './components/User/SpecificDate'
+import AddProduct from './views/Commerce/AddProduct'
+// import EditProducts from './views/Commerce/Editproducts'
 
 const AirwaysBill = React.lazy(() => import('./views/AirwaysBill/AirwaysBill'))
 const EditBill = React.lazy(() => import('./views/AirwaysBill/EditBill'))
@@ -68,14 +75,21 @@ const Toasts = React.lazy(() => import('./views/notifications/toasts/Toasts'))
 const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
 
 const routes = [
+
   { path: '/', exact: true, name: 'Home' },
   { path: '/register', name: 'Change Password', component: Register },
   { path: '/edit', name: 'Change Password', component: EditProfile },
   { path: '/profile', name: 'Change Password', component: Profile },
 
   //product route
+  { path: '/addproduct', name: 'Product Edit', component: AddProduct },
   { path: '/comproducts/edit/:id', name: 'Product Edit', component: EditProducts },
   { path: '/comproducts', name: 'Courier Products', component: Products },
+
+  //user
+  { path: '/specificDateLoginUser', name: ' Monthly Logged in User', component: SpecificDate },
+  { path: '/monthlylogin', name: ' Monthly Logged in User', component: MothlyLoginUser },
+  { path: '/loginUser', name: 'Logged in User', component: LoginUser },
   ,
   ////
   { path: '/courier', name: 'Courier', component: Courier },
diff --git a/src/views/Commerce/AddProduct.js b/src/views/Commerce/AddProduct.js
new file mode 100644
index 0000000..a84ecb7
--- /dev/null
+++ b/src/views/Commerce/AddProduct.js
@@ -0,0 +1,300 @@
+import axios from "axios";
+import React, { useCallback, useEffect, useState } from "react";
+import { API } from "../../data";
+import { isAutheticated } from "../../auth";
+import ClipLoader from "react-spinners/ClipLoader";
+//import Footer from "../../Footer";
+import { Link } from "react-router-dom";
+import { useHistory } from "react-router-dom";
+import swal from 'sweetalert';
+
+const AddProduct = () => {
+    const { token } = isAutheticated();
+    let history = useHistory();
+    const [state, setstate] = useState({
+        title: "",
+        description: "",
+        status: "",
+        tax: "",
+        price: "",
+        taxes: [],
+        loading: false,
+    });
+
+    const { title, description, status, tax, price, taxes, loading } = state;
+
+    const changeState = (newState) =>
+        setstate((prevState) => ({ ...prevState, ...newState }));
+
+    const fetchTax = useCallback(async () => {
+        let res = await axios.get(`${API}/api/tax/view_tax`, {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+        });
+
+        if (res.status === 200) changeState({ taxes: res.data });
+    }, [token]);
+
+    useEffect(() => {
+        fetchTax();
+    }, [fetchTax]);
+
+    const handleSubmit = async () => {
+        if (!(title || description || tax || price)) {
+            alert("Please fill required field ");
+            return;
+        }
+        changeState({ loading: true });
+
+        let res = await axios.post(
+            `${API}/api/product`,
+            {
+                title,
+                description,
+                status,
+                tax: taxes.find((taxObj) => taxObj.name === tax)?._id,
+                price,
+            },
+            {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+            }
+        );
+        if (res.status === 200) {
+            swal("success!", "Product Added Successfully!", "success");
+            history.goBack();
+        }
+
+        changeState({ loading: false });
+    };
+
+    // 
+    const onCancel = () => {
+        // window.location = "/comproducts";
+        history.goBack()
+
+    };
+
+
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+
+        changeState({ [name]: value });
+    };
+    return (
+        <>
+            <div className="main-content">
+                <div className="page-content">
+                    <div className="container-fluid">
+                        {/* <!-- start page title --> */}
+                        <div className="row">
+                            <div className="col-12">
+                                <div className="page-title-box d-flex align-items-center justify-content-between">
+                                    <h4 className="mb-0">Add New Product</h4>
+                                    <div className="page-title-right">
+                                        <ol className="breadcrumb m-0">
+                                            <li className="breadcrumb-item">
+                                                <Link to="/dashboard">Dating App</Link>
+                                            </li>
+                                            <li className="breadcrumb-item active">Commerce</li>
+                                            <li className="breadcrumb-item active">Add New Product</li>
+                                        </ol>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        {/* <!-- end page title --> */}
+
+                        {/* <!-- Save options Begins--> */}
+                        <div className="row">
+                            <div className="col-12">
+                                <div className="form-group text-right">
+                                    <button
+                                        onClick={handleSubmit}
+                                        type="button"
+                                        className="btn btn-success btn-login waves-effect waves-light mr-3"
+                                    >
+                                        <ClipLoader loading={loading} size={18} />
+                                        {!loading && "Save"}
+                                    </button>
+                                    <button
+                                        onClick={onCancel}
+                                        type="button"
+                                        className="btn btn-warning btn-cancel waves-effect waves-light mr-3"
+                                    >
+                                        Cancel
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        {/* <!-- Save options Ends-->             */}
+
+                        {/* <!-- Row 1 Begins -->                */}
+                        <div className="row">
+                            {/* <!--Left Column Begins--> */}
+                            <div className="col-lg-8">
+                                <div className="card">
+                                    <div className="card-body">
+                                        <div className="row">
+                                            <div className="col-md-12">
+                                                <form>
+                                                    <div className="row">
+                                                        <div className="col-lg-12">
+                                                            <div className="form-group">
+                                                                <label
+                                                                    for="basicpill-phoneno-input"
+                                                                    className="label-100"
+                                                                >
+                                                                    Title*
+                                                                </label>
+                                                                <input
+                                                                    type="text"
+                                                                    name="title"
+                                                                    value={title}
+                                                                    className="form-control input-field"
+                                                                    onChange={handleChange}
+                                                                    placeholder="Title"
+                                                                />
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div className="row">
+                                                        <div className="col-lg-12">
+                                                            <div className="form-group mb-30 width-100 row">
+                                                                <label className="col-md-4 control-label">
+                                                                    Description
+                                                                </label>
+                                                                <div className="col-md-13">
+                                                                    <textarea
+                                                                        value={description}
+                                                                        onChange={handleChange}
+                                                                        name="description"
+                                                                        className="form-control input-field"
+                                                                        rows="5"
+                                                                        placeholder="Add description"
+                                                                    ></textarea>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* <!-- Left Column Ends --> */}
+
+                            {/* <!--Right Column Begins --> */}
+                            <div className="col-lg-4">
+                                <div className="card">
+                                    <div className="card-body">
+                                        <div className="row">
+                                            <div className="col-md-12">
+                                                <form>
+                                                    <div className="row">
+                                                        <div className="col-lg-12">
+                                                            <div className="form-group">
+                                                                <label
+                                                                    for="basicpill-phoneno-input"
+                                                                    className="label-100"
+                                                                >
+                                                                    Select Tax*
+                                                                </label>
+                                                                <select
+                                                                    name="tax"
+                                                                    value={tax}
+                                                                    onChange={({ target: { value } }) =>
+                                                                        changeState({ tax: value })
+                                                                    }
+                                                                    className="form-control  input-field"
+                                                                >
+                                                                    <option value="">--select--</option>
+                                                                    {taxes?.map(({ name, tax }) => (
+                                                                        <option value={name}>
+                                                                            {name}&nbsp;{tax}%
+                                                                            bvb
+                                                                        </option>
+                                                                    ))}
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="row">
+                                                        <div className="col-lg-12">
+                                                            <div className="form-group">
+                                                                <label
+                                                                    for="basicpill-phoneno-input"
+                                                                    className="label-100"
+                                                                >
+                                                                    Status*
+                                                                </label>
+                                                                <select
+                                                                    name="status"
+                                                                    value={status}
+                                                                    onChange={handleChange}
+                                                                    className="form-control  input-field"
+                                                                >
+                                                                    <option value="">--select--</option>
+                                                                    <option value={true}>Active</option>
+                                                                    <option value={false}>Inactive</option>
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* <!--Right Column Ends --> */}
+                        </div>
+                        <div className="row">
+                            {/* <!--Left Column Begins--> */}
+                            <div className="col-lg-8">
+                                <div className="card">
+                                    <div className="card-body">
+                                        <div className="row">
+                                            <div className="col-md-12">
+                                                <form>
+                                                    <div className="row">
+                                                        <div className="col-lg-4">
+                                                            <div className="form-group">
+                                                                <label
+                                                                    for="basicpill-phoneno-input"
+                                                                    className="label-100"
+                                                                >
+                                                                    Price*
+                                                                </label>
+                                                                <input
+                                                                    type="text"
+                                                                    name="price"
+                                                                    onChange={handleChange}
+                                                                    className="form-control input-field"
+                                                                />
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            {/* <!-- Left Column Ends --> */}
+                        </div>
+                    </div>
+                    {/* <!-- container-fluid --> */}
+                </div>
+                {/* <!-- End Page-content --> */}
+                {/* <Footer /> */}
+            </div>
+        </>
+    )
+}
+
+export default AddProduct
\ No newline at end of file
diff --git a/src/views/Commerce/Editproducts.js b/src/views/Commerce/Editproducts.js
index d742054..118ebed 100644
--- a/src/views/Commerce/Editproducts.js
+++ b/src/views/Commerce/Editproducts.js
@@ -141,7 +141,7 @@ function EditProducts() {
                                 <button
                                     onClick={handleSubmit}
                                     type="button"
-                                    className="btn btn-warning  mt-3  mb-0 my-1 btn btn-success btn-login waves-effect waves-light mr-1"
+                                    className="btn btn-success  mt-3  mb-0 my-1 btn btn-success btn-login waves-effect waves-light mr-1"
                                 >
                                     <ClipLoader loading={loading} size={18} />
                                     {!loading && "Save"}
@@ -149,7 +149,7 @@ function EditProducts() {
                                 <button
                                     onClick={onCancel}
                                     type="button"
-                                    className=" mt-3 ml-2 btn btn-success btn-cancel waves-effect waves-light mr-3"
+                                    className=" mt-3 ml-2 btn btn-warning btn-cancel waves-effect waves-light mr-3"
                                 >
                                     Cancel
                                 </button>
diff --git a/src/views/Commerce/Products.js b/src/views/Commerce/Products.js
index acd4690..5722a96 100644
--- a/src/views/Commerce/Products.js
+++ b/src/views/Commerce/Products.js
@@ -5,104 +5,106 @@ import { Link } from "react-router-dom";
 import { isAutheticated } from "../../auth";
 
 function Products() {
-    const [state, setState] = useState({
-        products: [],
-        page: 1,
-        limit: 10,
-        totalProducts: 0,
-        pages: 1,
+  const [state, setState] = useState({
+    products: [],
+    page: 1,
+    limit: 10,
+    totalProducts: 0,
+    pages: 1,
+  });
+
+  window.scrollTo({ behavior: "smooth", top: "0px" });
+
+  const { products, page, limit, totalProducts, pages } = state;
+
+  const changeState = (newState) =>
+    setState((prevState) => ({ ...prevState, ...newState }));
+
+  const { token } = isAutheticated();
+
+  const getProducts = useCallback(async () => {
+    let res = await axios.get(
+      `/api/product?page=${page}&limit=${limit}`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+    // console.log(res)
+
+    changeState({
+      ...res.data,
+      pages: Math.ceil(res.data.totalProducts / limit),
+    });
+  }, [limit, page, token]);
+
+  useEffect(() => {
+    getProducts();
+  }, [getProducts]);
+
+  const getTotalPages = useMemo(() => {
+    const length = pages > 1 ? pages : totalProducts ? 1 : 0;
+    return Array.from({ length }, (_, i) => i + 1);
+  }, [pages, totalProducts]);
+
+  // console.log(getTotalPages);
+
+  const handleDelete = async (id) => {
+    let status = window.confirm("Do you want to delete");
+    if (!status) return;
+
+    let res = await axios.delete(`/api/product/${id}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
     });
 
-    window.scrollTo({ behavior: "smooth", top: "0px" });
+    if (res.status === 200) window.location.reload();
+  };
 
-    const { products, page, limit, totalProducts, pages } = state;
+  const toggleStatus = async (id) => {
+    let status = window.confirm("Do you want to delete");
+    if (!status) {
+      return;
+    }
+    let res = await axios.get(`/api/product/setStatus/${id}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    if (res.status === 200) window.location.reload();
+  };
 
-    const changeState = (newState) =>
-        setState((prevState) => ({ ...prevState, ...newState }));
+  return (
+    <div className=" main-content">
+      <div className="  my-3 page-content">
+        <div className="container-fluid">
+          {/* <!-- start page title --> */}
+          <div className="row">
+            <div className="col-12">
+              <div className="page-title-box d-flex align-items-center justify-content-between">
+                <h4 className="mb-3">Commerce - Products</h4>
+                <Link to="/addproduct"><button type="button" className="btn btn-info float-end mb-3 ml-4"> + Add Product</button></Link>
+                <div className="page-title-right">
+                  <ol className="breadcrumb m-0">
+                    <li className="breadcrumb-item">
+                      <Link to="/dashboard">Dating App</Link>
+                    </li>
+                    <li className="breadcrumb-item">Commerce - Products</li>
+                  </ol>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* <!-- end page title --> */}
 
-    const { token } = isAutheticated();
-
-    const getProducts = useCallback(async () => {
-        let res = await axios.get(
-            `/api/product?page=${page}&limit=${limit}`,
-            {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                },
-            }
-        );
-
-        changeState({
-            ...res.data,
-            pages: Math.ceil(res.data.totalProducts / limit),
-        });
-    }, [limit, page, token]);
-
-    useEffect(() => {
-        getProducts();
-    }, [getProducts]);
-
-    const getTotalPages = useMemo(() => {
-        const length = pages > 1 ? pages : totalProducts ? 1 : 0;
-        return Array.from({ length }, (_, i) => i + 1);
-    }, [pages, totalProducts]);
-
-    // console.log(getTotalPages);
-
-    const handleDelete = async (id) => {
-        let status = window.confirm("Do you want to delete");
-        if (!status) return;
-
-        let res = await axios.delete(`/api/product/${id}`, {
-            headers: {
-                Authorization: `Bearer ${token}`,
-            },
-        });
-        if (res.status === 200) window.location.reload();
-    };
-
-    const toggleStatus = async (id) => {
-        let status = window.confirm("Do you want to delete");
-        if (!status) {
-            return;
-        }
-        let res = await axios.get(`/api/product/setStatus/${id}`, {
-            headers: {
-                Authorization: `Bearer ${token}`,
-            },
-        });
-        if (res.status === 200) window.location.reload();
-    };
-
-    return (
-        <div className=" main-content">
-            <div className="  my-3 page-content">
-                <div className="container-fluid">
-                    {/* <!-- start page title --> */}
-                    <div className="row">
-                        <div className="col-12">
-                            <div className="page-title-box d-flex align-items-center justify-content-between">
-                                <h4 className="mb-3">Commerce - Products</h4>
-
-                                <div className="page-title-right">
-                                    <ol className="breadcrumb m-0">
-                                        <li className="breadcrumb-item">
-                                            <Link to="/dashboard">Dating App</Link>
-                                        </li>
-                                        <li className="breadcrumb-item">Commerce - Products</li>
-                                    </ol>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    {/* <!-- end page title --> */}
-
-                    <div className="row">
-                        <div className="col-lg-12">
-                            <div className="card">
-                                <div className="card-body">
-                                    <div className="row ml-0 mr-0  mb-10">
-                                        {/* <div className="col-sm-12 col-md-6">
+          <div className="row">
+            <div className="col-lg-12">
+              <div className="card">
+                <div className="card-body">
+                  <div className="row ml-0 mr-0  mb-10">
+                    {/* <div className="col-sm-12 col-md-6">
                       <div className="dataTables_length">
                         <label className="w-100">
                           Show{" "}
@@ -121,7 +123,7 @@ function Products() {
                         </label>
                       </div>
                     </div> */}
-                                        {/* <div className="col-sm-12 col-md-6">
+                    {/* <div className="col-sm-12 col-md-6">
                       <div className="dropdown d-block">
                         <a href="/comproducts/add">
                           <button
@@ -134,68 +136,68 @@ function Products() {
                         </a>
                       </div>
                     </div> */}
-                                    </div>
-                                    <div className="table-responsive table-shoot">
-                                        <table className="table table-centered table-nowrap mb-0">
-                                            <thead className="thead-light">
-                                                <tr>
-                                                    <th>Name</th>
-                                                    <th>Price</th>
-                                                    <th>Status</th>
-                                                    <th>Actions</th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                {products.map(
-                                                    ({ title, _id, price, status }) =>
-                                                        title && (
-                                                            <tr key={_id}>
-                                                                <td>{title}</td>
-                                                                <td>{price}</td>
-                                                                <td>
-                                                                    <span
-                                                                        className={`badge badge-pill badge-soft-${status ? "success" : "danger"
-                                                                            } font-size-13`}
-                                                                    >
-                                                                        {status ? "Live" : "Suspended"}
-                                                                    </span>
-                                                                </td>
-                                                                <td>
-                                                                    <button
-                                                                        type="button"
-                                                                        className={`btn btn-${status ? "danger" : "success"
-                                                                            }  btn-sm  waves-effect waves-light btn-table`}
-                                                                        onClick={() => toggleStatus(_id)}
-                                                                    >
-                                                                        {status ? "Suspend" : "Activate"}
-                                                                    </button>
+                  </div>
+                  <div className="table-responsive table-shoot">
+                    <table className="table table-centered table-nowrap mb-0">
+                      <thead className="thead-light">
+                        <tr>
+                          <th>Name</th>
+                          <th>Price</th>
+                          <th>Status</th>
+                          <th>Actions</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {products.map(
+                          ({ title, _id, price, status }) =>
+                            title && (
+                              <tr key={_id}>
+                                <td>{title}</td>
+                                <td>{price}</td>
+                                <td>
+                                  <span
+                                    className={`badge rounded-pill bg-${status ? "success" : "danger"
+                                      } font-size-10`}
+                                  >
+                                    {status ? "Live" : "Suspended"}
+                                  </span>
+                                </td>
+                                <td>
+                                  <button
+                                    type="button"
+                                    className={`btn btn-${status ? "danger" : "success"
+                                      }  btn-sm  waves-effect waves-light btn-table ml-2`}
+                                    onClick={() => toggleStatus(_id)}
+                                  >
+                                    {status ? "Suspend" : "Activate"}
+                                  </button>
 
-                                                                    <Link to={`/comproducts/edit/${_id}`}>
+                                  <Link to={`/comproducts/edit/${_id}`}>
 
-                                                                        <button
-                                                                            type="button"
-                                                                            className=" mx-2 btn btn-primary btn-sm  waves-effect waves-light btn-table ml-2"
-                                                                        >
-                                                                            Edit
-                                                                        </button>
-                                                                    </Link>
-                                                                    <button
-                                                                        type="button"
-                                                                        onClick={() => handleDelete(_id)}
-                                                                        className="  btn btn-danger btn-sm  waves-effect waves-light btn-table ml-2"
-                                                                        id="sa-params"
-                                                                    >
-                                                                        Delete
-                                                                    </button>
-                                                                </td>
-                                                            </tr>
-                                                        )
-                                                )}
-                                            </tbody>
-                                        </table>
-                                    </div>
+                                    <button
+                                      type="button"
+                                      className=" mx-2 btn btn-primary btn-sm  waves-effect waves-light btn-table ml-2"
+                                    >
+                                      Edit
+                                    </button>
+                                  </Link>
+                                  <button
+                                    type="button"
+                                    onClick={() => handleDelete(_id)}
+                                    className="  btn btn-danger btn-sm  waves-effect waves-light btn-table ml-2"
+                                    id="sa-params"
+                                  >
+                                    Delete
+                                  </button>
+                                </td>
+                              </tr>
+                            )
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
 
-                                    {/* <div className="row mt-20">
+                  {/* <div className="row mt-20">
                     <div className="col-sm-12 col-md-6 mb-20">
                       <div
                         className="dataTables_info"
@@ -274,16 +276,16 @@ function Products() {
                     </div>
                   </div> */}
 
-                                    {/* <!-- end table-responsive --> */}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                  {/* <!-- end table-responsive --> */}
                 </div>
-                {/* <!-- container-fluid --> */}
+              </div>
             </div>
+          </div>
         </div>
-    );
+        {/* <!-- container-fluid --> */}
+      </div>
+    </div>
+  );
 }
 
 export default Products;
diff --git a/src/views/Profile/Profile.js b/src/views/Profile/Profile.js
index 4181527..073d2ff 100644
--- a/src/views/Profile/Profile.js
+++ b/src/views/Profile/Profile.js
@@ -20,7 +20,7 @@ const Profile = () => {
     const [user, setUser] = useState({});
     const { token } = isAutheticated();
     const history = useHistory()
-    console.log(token);
+    // console.log(token);
     useEffect(async () => {
         let res = await axios.get('/owner', {
             headers: {
@@ -28,13 +28,15 @@ const Profile = () => {
             }
         })
         if (res) {
+            // console.log(res.data.user._id)
+            localStorage.setItem('ownerId', res.data.user._id)
             setUser(res.data.user)
         }
-        console.log(res);
+        // console.log(res);
     }, [])
 
 
-    console.log(user);
+    // console.log(user);
     return (
         <div>
             <CRow>
@@ -42,10 +44,11 @@ const Profile = () => {
                     <h1>Profile</h1>
                 </CCol>
                 <CCol>
-                    <CButton color='dark' onClick={() => history.push('/edit')}>Edit Profile</CButton>
+                    <CButton color='dark'
+                        className="float-right" onClick={() => history.push('/edit')}>Edit Profile</CButton>
                 </CCol>
             </CRow>
-            <CTable color="dark" striped>
+            <CTable color="white" striped>
                 <CTableHead>
                     <CTableRow>
                         <CTableHeaderCell scope="col">Cafe Name</CTableHeaderCell>
diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js
index f6db129..ce7fc8e 100644
--- a/src/views/pages/login/Login.js
+++ b/src/views/pages/login/Login.js
@@ -33,10 +33,13 @@ const Login = () => {
   const Login = async () => {
     const res = await axios.post("/owner/signin", auth);
     if (res.data.status == "ok") {
+      localStorage.setItem("authToken", res.data.token)
+      console.log(res.data)
       localStorage.setItem("auth", JSON.stringify({
         user: res.data.user,
         token: res.data.token,
 
+
       }));
       history.push('/dashboard')