.eslintrc.js

@@ -18,9 +18,6 @@ module.exports = {
   ],
   plugins: ['react', 'react-hooks'],
   rules: {
-    rules: {
-      'react/react-in-jsx-scope': 'off',
-    },
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
     // e.g. "@typescript-eslint/explicit-function-return-type": "off",
   },

README.md

@@ -182,5 +182,4 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How
 
 copyright 2024 creativeLabs Łukasz Holeczek.   
 
-Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE).# cheminova-principal-distributer
+Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE).
-

package.json

@@ -40,14 +40,12 @@
     "classnames": "^2.5.1",
     "core-js": "^3.37.1",
     "date-fns": "^3.6.0",
-    "jwt-decode": "^4.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
-    "redux": "^5.0.1",
+    "redux": "5.0.1",
-    "redux-thunk": "^3.1.0",
     "simplebar-react": "^3.2.5",
     "sweetalert2": "^11.12.3"
   },

src/_nav.js

@@ -8,9 +8,7 @@ import {
   cilCursor,
   cilDescription,
   cilDrop,
-  cilFile,
   cilNotes,
-  cilPaperPlane,
   cilPencil,
   cilPuzzle,
   cilShare,
@@ -32,25 +30,6 @@ const _nav = [
     to: '/shop',
     icon: <CIcon icon={cilShare} customClassName="nav-icon" />,
   },
-  {
-    component: CNavItem,
-    name: 'Cart',
-    to: '/cart',
-    icon: <CIcon icon={cilShare} customClassName="nav-icon" />,
-  },
-  {
-    component: CNavItem,
-    name: 'Orders Placed',
-    to: '/orders-placed',
-    icon: <CIcon icon={cilPaperPlane} customClassName="nav-icon" />,
-  },
-  {
-    component: CNavItem,
-    name: 'Product manual',
-    to: '/product-manual',
-    icon: <CIcon icon={cilFile} customClassName="nav-icon" />,
-  },
-
   // {
   //   component: CNavItem,
   //   name: 'Orders',

src/components/AppHeader.js

@@ -24,11 +24,9 @@ import {
   cilMoon,
   cilSun,
 } from '@coreui/icons'
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'
 
 import { AppBreadcrumb } from './index'
 import { AppHeaderDropdown } from './header/index'
-import { IconButton } from '@mui/material'
 
 const AppHeader = () => {
   const headerRef = useRef()
@@ -53,7 +51,6 @@ const AppHeader = () => {
         >
           <CIcon icon={cilMenu} size="lg" />
         </CHeaderToggler>
-
         {/* <CHeaderNav className="d-none d-md-flex">
           <CNavItem>
             <CNavLink to="/dashboard" as={NavLink}>
@@ -133,12 +130,6 @@ const AppHeader = () => {
             <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
           </li> */}
           <AppHeaderDropdown />
-
-          {/* <CNavLink to="/cart" as={NavLink}>
-            <IconButton>
-              <ShoppingCartIcon style={{ color: 'black' }} />
-            </IconButton>
-          </CNavLink> */}
         </CHeaderNav>
       </CContainer>
       <CContainer className="px-4" fluid>

src/components/header/AppHeaderDropdown.js

@@ -56,7 +56,7 @@ const AppHeaderDropdown = () => {
   return (
     <CDropdown variant="nav-item">
       <CDropdownToggle placement="bottom-end" className="py-0 pe-0" caret={false}>
-        <div className="media d-flex align-items-center " style={{ marginTop: '0.5rem' }}>
+        <div className="media d-flex align-items-center">
           <FontAwesomeIcon
             style={{ fontSize: '2rem' }}
             className="user-avatar md-avatar rounded-circle "

src/index.css

@@ -1,16 +0,0 @@
-/* Poppins */
-@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
-/* Space Grotesk  */
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap');
-/* Inter  */
-@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  margin: 0;
-  padding: 0;
-  min-height: 100vh;
-}

src/index.js

@@ -2,7 +2,6 @@ import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import 'core-js'
-import './index.css'
 
 import App from './App'
 import store from './store'

src/protectedRoute.js

@@ -2,38 +2,15 @@
 /* eslint-disable react/prop-types */
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { jwtDecode } from 'jwt-decode'
-
-const isTokenExpired = (token) => {
-  try {
-    const decodedToken = jwtDecode(token)
-    console.log('Decoded Token:', decodedToken) // Debugging
-    const currentTime = Date.now() / 1000
-    console.log('Current Time:', currentTime) // Debugging
-    console.log('Token Expiration Time:', decodedToken.exp) // Debugging
-    return decodedToken.exp < currentTime
-  } catch (error) {
-    console.error('Error decoding token:', error) // Debugging
-    return true // If there's an error decoding the token, consider it expired
-  }
-}
 
 const ProtectedRoute = ({ element: Element }) => {
   const navigate = useNavigate()
+  console.log('req came here ')
 
   useEffect(() => {
-    const checkToken = () => {
+    if (!localStorage.getItem('authToken')) {
-      const token = localStorage.getItem('authToken')
+      navigate('/login')
-      console.log('Token:', token) // Debugging
-      if (!token || isTokenExpired(token)) {
-        console.log('Token is expired or not present, redirecting to login')
-        navigate('/login')
-      } else {
-        console.log('Token is valid')
-      }
     }
-
-    checkToken()
   }, [navigate])
 
   return <Element />

src/redux-store/CartStore/ducs.js

@@ -1,126 +0,0 @@
-const initialState = {
-  items: [],
-}
-const cartactionTypes = {
-  ADD_TO_CART: 'ADD_TO_CART',
-  REMOVE_FROM_CART: 'REMOVE_FROM_CART',
-  INCREASE_COUNT: 'INCREASE_COUNT',
-  DECREASE_COUNT: 'DECREASE_COUNT',
-  LOAD_CART: 'LOAD_CART',
-  CLEAR_CART: 'CLEAR_CART',
-}
-
-export const addToCart = (product) => (dispatch, getState) => {
-  dispatch({
-    type: cartactionTypes.ADD_TO_CART,
-    payload: product,
-  })
-  localStorage.setItem('cart', JSON.stringify(getState().cart.items))
-}
-
-export const removeFromCart = (productId) => (dispatch, getState) => {
-  dispatch({
-    type: cartactionTypes.REMOVE_FROM_CART,
-    payload: productId,
-  })
-  localStorage.setItem('cart', JSON.stringify(getState().cart.items))
-}
-
-export const increaseCount = (productId) => (dispatch, getState) => {
-  dispatch({
-    type: cartactionTypes.INCREASE_COUNT,
-    payload: productId,
-  })
-  localStorage.setItem('cart', JSON.stringify(getState().cart.items))
-}
-
-export const decreaseCount = (productId) => (dispatch, getState) => {
-  dispatch({
-    type: cartactionTypes.DECREASE_COUNT,
-    payload: productId,
-  })
-  localStorage.setItem('cart', JSON.stringify(getState().cart.items))
-}
-
-export const loadCart = () => (dispatch) => {
-  const cartItems = JSON.parse(localStorage.getItem('cart')) || []
-  dispatch({
-    type: cartactionTypes.LOAD_CART,
-    payload: cartItems,
-  })
-}
-
-export const clearCart = () => (dispatch) => {
-  dispatch({
-    type: cartactionTypes.CLEAR_CART,
-  })
-  localStorage.removeItem('cart')
-}
-
-export const cartReducer = (state = initialState, action) => {
-  switch (action.type) {
-    case cartactionTypes.LOAD_CART:
-      return {
-        ...state,
-        items: action.payload,
-      }
-    case cartactionTypes.ADD_TO_CART:
-      const existingItem = state.items.find((item) => item._id === action.payload._id)
-      if (existingItem) {
-        return {
-          ...state,
-          items: state.items.map((item) =>
-            item._id === action.payload._id ? { ...item, count: item.count + 1 } : item,
-          ),
-        }
-      } else {
-        return {
-          ...state,
-          items: [...state.items, { ...action.payload, count: 1 }],
-        }
-      }
-    case cartactionTypes.REMOVE_FROM_CART:
-      return {
-        ...state,
-        items: state.items.filter((item) => item._id !== action.payload),
-      }
-    case cartactionTypes.INCREASE_COUNT:
-      return {
-        ...state,
-        items: state.items.map((item) =>
-          item._id === action.payload ? { ...item, count: item.count + 1 } : item,
-        ),
-      }
-    case cartactionTypes.DECREASE_COUNT:
-      return {
-        ...state,
-        items: state.items.map((item) =>
-          item._id === action.payload && item.count > 1 ? { ...item, count: item.count - 1 } : item,
-        ),
-      }
-    case cartactionTypes.CLEAR_CART:
-      return {
-        ...state,
-        items: [],
-      }
-    default:
-      return state
-  }
-}
-
-// src/store/cart/selectors.js
-
-// Selector to get all cart items
-export const selectCartItems = (state) => state.cart.items
-
-// Selector to get the total count of items in the cart
-export const selectCartItemCount = (state) =>
-  state.cart.items.reduce((total, item) => total + item.count, 0)
-
-// Selector to get the subtotal (sum of price * count) of items in the cart
-export const selectCartSubtotal = (state) =>
-  state.cart.items.reduce((total, item) => total + item.price * item.count, 0)
-
-// Selector to check if a specific product is already in the cart
-export const selectIsProductInCart = (productId) => (state) =>
-  state.cart.items.some((item) => item._id === productId)

src/routes.js

@@ -1,11 +1,5 @@
-import { element } from 'prop-types'
 import React from 'react'
 
-import Cart from './views/pages/cart/cart'
-import OrderDetails from './views/orders/OrderDetails'
-import ProductManual from './views/pages/productManual/productManual'
-import ViewProductManual from './views/pages/productManual/viewProductManual'
-
 const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
 const Shop = React.lazy(() => import('./views/shops/Shop'))
 const Order = React.lazy(() => import('./views/orders/Order'))
@@ -18,20 +12,13 @@ const routes = [
   { path: '/', exact: true, name: 'Home' },
   { path: '/dashboard', name: 'Dashboard', element: Dashboard },
   { path: '/shop', name: 'Shop', element: Shop },
-  { path: '/orders-placed', name: 'Order', element: Order },
+  { path: '/order', name: 'Order', element: Order },
-  { path: '/orders-placed/:id', name: 'Order', element: OrderDetails },
-
   // KYC
-  { path: '/kyc', name: 'KYC', element: Kyc },
+  { path: '/kyc', name: 'Kyc', element: Kyc },
   { path: '/kyc/details/:id', name: 'Kyc details', element: KycDetails },
-  // Product manual
-  { path: '/product-manual', name: 'Product Manual ', element: ProductManual },
-  { path: '/product-manual/:id', name: 'Product Manual ', element: ViewProductManual },
 
   { path: '/my-profile', name: 'Profile', element: MyProfile },
   { path: '/change-password', name: 'Change password', element: ChangePassword },
-
-  { path: '/cart', name: 'Cart', element: Cart },
 ]
 
 export default routes

src/store.js

@@ -1,7 +1,4 @@
-import { applyMiddleware, combineReducers, legacy_createStore as createStore } from 'redux'
+import { legacy_createStore as createStore } from 'redux'
-import { cartReducer } from './redux-store/CartStore/ducs'
-import { thunk } from 'redux-thunk'
-// import { composeWithDevTools } from 'redux-devtools-extension'
 
 const initialState = {
   sidebarShow: true,
@@ -16,9 +13,6 @@ const changeState = (state = initialState, { type, ...rest }) => {
       return state
   }
 }
-const rootReducer = combineReducers({
+
-  cart: cartReducer,
+const store = createStore(changeState)
-  changeState: changeState,
-})
-const store = createStore(rootReducer, applyMiddleware(thunk))
 export default store

src/views/dashboard/Dashboard.js

@@ -1,80 +1,10 @@
-import { Box, Typography, Card, CardContent, Grid } from '@mui/material'
+import React from 'react'
-import React, { useState, useEffect } from 'react'
+
-import Axios from '../../axios'
-import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart'
-import LocalShippingIcon from '@mui/icons-material/LocalShipping'
-import CancelIcon from '@mui/icons-material/Cancel'
-import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty'
-import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 const Dashboard = () => {
-  const [counts, setCounts] = useState({
-    new: 0,
-    dispatched: 0,
-    cancelled: 0,
-    processing: 0,
-    delivered: 0,
-  })
-
-  // Fetch counts on component mount
-  useEffect(() => {
-    const getCounts = async () => {
-      try {
-        const res = await Axios.get('/api/get-counts-pdOrders') // Updated API endpoint
-        if (res.status === 200) {
-          console.log('res', res)
-          setCounts(res.data.counts) // Assuming the response is in the format { new, dispatched, cancelled, processing, delivered }
-        }
-      } catch (error) {
-        console.error('Failed to fetch status counts:', error)
-      }
-    }
-    getCounts()
-  }, [])
-
-  // Define colors for different statuses
-  const statusColors = {
-    new: '#4caf50', // Green
-    dispatched: '#2196f3', // Blue
-    cancelled: '#f44336', // Red
-    processing: '#ff9800', // Orange
-    delivered: '#9c27b0', // Purple
-  }
-  const statusIcons = {
-    new: <AddShoppingCartIcon sx={{ fontSize: 50, color: '#fff' }} />,
-    dispatched: <LocalShippingIcon sx={{ fontSize: 50, color: '#fff' }} />,
-    cancelled: <CancelIcon sx={{ fontSize: 50, color: '#fff' }} />,
-    processing: <HourglassEmptyIcon sx={{ fontSize: 50, color: '#fff' }} />,
-    delivered: <CheckCircleIcon sx={{ fontSize: 50, color: '#fff' }} />,
-  }
-
   return (
-    <Box sx={{ flexGrow: 1, padding: 2 }}>
+    <>
-      <Typography textAlign="center" variant="h3" gutterBottom>
+      <div>Dashboard</div>
-        Orders Status Summary
+    </>
-      </Typography>
-
-      <Grid container spacing={3}>
-        {Object.keys(counts).map((status) => (
-          <Grid item xs={12} sm={6} md={3} key={status}>
-            <Card sx={{ backgroundColor: statusColors[status], color: '#fff' }}>
-              <CardContent
-                sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
-              >
-                <Box>
-                  <Typography variant="h6" component="div">
-                    {status.charAt(0).toUpperCase() + status.slice(1)}
-                  </Typography>
-                  <Typography variant="h4" component="div">
-                    {counts[status]}
-                  </Typography>
-                </Box>
-                {statusIcons[status]} {/* Display the corresponding icon */}
-              </CardContent>
-            </Card>
-          </Grid>
-        ))}
-      </Grid>
-    </Box>
   )
 }
 

src/views/orders/Order.js

@@ -1,158 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Paper,
-  Typography,
-  Skeleton,
-  Box,
-  Button,
-  TablePagination,
-} from '@mui/material'
-import Axios from '../../axios'
-import { isAutheticated } from '../../auth'
-import { useNavigate } from 'react-router-dom'
 
 const Order = () => {
-  const [orders, setOrders] = useState([])
+  return <div>Order</div>
-  const [loading, setLoading] = useState(true)
-  const [page, setPage] = useState(0)
-  const [rowsPerPage, setRowsPerPage] = useState(5)
-  const [totalOrders, setTotalOrders] = useState(0)
-  const token = isAutheticated()
-  const navigate = useNavigate()
-
-  const 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
-  }
-
-  // Helper function to capitalize the first letter of a string
-  const capitalizeFirstLetter = (string) => {
-    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
-  }
-
-  useEffect(() => {
-    // Fetch orders from the API with pagination
-    const fetchOrders = async () => {
-      try {
-        const response = await Axios.get('/api/get-placed-order-pd', {
-          headers: {
-            'Access-Control-Allow-Origin': '*',
-            Authorization: `Bearer ${token}`,
-            'Content-Type': 'application/json',
-          },
-          params: {
-            page: page + 1, // page number for API (usually starts from 1)
-            limit: rowsPerPage, // number of rows per page
-          },
-        })
-        setOrders(response.data.plcaedOrders)
-        setTotalOrders(response.data.totalOrders) // Ensure the API returns the total count of orders
-      } catch (error) {
-        console.error('Error fetching orders:', error)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchOrders()
-  }, [page, rowsPerPage])
-
-  const handleChangePage = (event, newPage) => {
-    setPage(newPage)
-  }
-
-  const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(parseInt(event.target.value, 10))
-    setPage(0) // Reset page to 0 when rows per page changes
-  }
-
-  return (
-    <Box>
-      <Typography variant="h4" mb={2} textAlign={'center'}>
-        Order placed list
-      </Typography>
-      <TableContainer component={Paper}>
-        <Table>
-          <TableHead>
-            <TableRow sx={{ fontWeight: 'bold' }}>
-              <TableCell sx={{ fontWeight: 'bold' }}>Order ID</TableCell>
-              <TableCell sx={{ fontWeight: 'bold' }}>Order Date</TableCell>
-              <TableCell sx={{ fontWeight: 'bold' }}>Items</TableCell>
-              <TableCell sx={{ fontWeight: 'bold' }}>Order Value</TableCell>
-              <TableCell sx={{ fontWeight: 'bold' }}>Status</TableCell>
-              <TableCell sx={{ fontWeight: 'bold' }}>Action</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {loading ? (
-              Array.from(new Array(rowsPerPage)).map((_, index) => (
-                <TableRow key={index}>
-                  <TableCell colSpan={6}>
-                    <Skeleton height={40} />
-                  </TableCell>
-                </TableRow>
-              ))
-            ) : orders.length > 0 ? (
-              orders.map((order) => (
-                <TableRow key={order._id}>
-                  <TableCell>{order.uniqueId}</TableCell>
-                  <TableCell>
-                    {new Date(order?.createdAt)
-                      .toLocaleDateString('en-US', {
-                        year: 'numeric',
-                        month: 'short',
-                        day: 'numeric',
-                      })
-                      .replace(',', '')}{' '}
-                    , {`${formatAMPM(order?.createdAt)}`}
-                  </TableCell>
-                  <TableCell>{order.orderItem.length}</TableCell>
-                  <TableCell>{order.grandTotal.toFixed(2)}</TableCell>
-                  <TableCell>{capitalizeFirstLetter(order.status)}</TableCell>
-                  <TableCell>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      onClick={() => navigate(`/orders-placed/${order._id}`)}
-                    >
-                      View
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))
-            ) : (
-              <TableRow>
-                <TableCell colSpan={6} align="center">
-                  <Typography variant="body1">Data not found</Typography>
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-        <TablePagination
-          rowsPerPageOptions={[5, 10, 25]}
-          component="div"
-          count={totalOrders} // Total number of orders
-          rowsPerPage={rowsPerPage}
-          page={page}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-        />
-      </TableContainer>
-    </Box>
-  )
 }
 
 export default Order

src/views/orders/OrderDetails.js

@@ -1,233 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import {
-  Box,
-  Button,
-  Grid,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography,
-} from '@mui/material'
-import axios from 'axios' // Make sure you have axios installed
-import { useNavigate, useParams } from 'react-router-dom'
-import Axios from '../../axios'
-import { isAutheticated } from '../../auth'
-
-const OrderDetails = () => {
-  const [order, setOrder] = useState(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState(null)
-  const token = isAutheticated()
-  const navigate = useNavigate()
-  const { id } = useParams() // Assuming order ID is passed as a route parameter
-  const [ownerDetails, setOwnerDetails] = useState()
-
-  const getData = async () => {
-    let res = await Axios.get(`/api/v1/user/details`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-    if (res.data.success) {
-      setOwnerDetails({ ...res.data.user })
-    }
-  }
-  console.log('order', order)
-  useEffect(() => {
-    const fetchOrderDetails = async () => {
-      try {
-        const response = await Axios.get(`/api/get-single-placed-order-pd/${id}`, {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        }) // Adjust API endpoint as needed
-        setOrder(response.data.singleOrder)
-        console.log(response)
-        setLoading(false)
-      } catch (err) {
-        setError(err.return_msg)
-        setLoading(false)
-      }
-    }
-    getData()
-    fetchOrderDetails()
-  }, [id])
-
-  if (loading) {
-    return <Typography>Loading...</Typography>
-  }
-
-  if (error) {
-    return <Typography>Error: {error}</Typography>
-  }
-
-  if (!order) {
-    return <Typography>No data found</Typography>
-  }
-
-  const {
-    uniqueId,
-    billTo,
-    shipTo,
-    paymentMode,
-    orderItem,
-    subtotal,
-    gstTotal,
-    grandTotal,
-    statusHistory, // Assume this is an array of status objects
-  } = order
-  console.log(statusHistory)
-
-  return (
-    <Box>
-      {/* Order Details Section */}
-
-      <Box sx={{ my: '2rem', background: '#fff', padding: '1rem', borderRadius: '0.8rem' }}>
-        <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
-          <Typography variant="h4" sx={{ flexGrow: 1, textAlign: 'center' }}>
-            Order ID: {uniqueId}
-          </Typography>
-          <Button color="primary" onClick={() => navigate('/orders-placed')} variant="contained">
-            Back
-          </Button>
-        </Box>
-
-        <Grid container spacing={2}>
-          <Grid item sm={6} md={6} lg={6}>
-            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-              Bill Address
-            </Typography>
-            <Typography sx={{ mb: '0.5rem' }}>{billTo}</Typography>
-          </Grid>
-          <Grid item sm={6} md={6} lg={6}>
-            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-              Ship Address
-            </Typography>
-            <Typography sx={{ mb: '0.5rem' }}>{shipTo}</Typography>
-          </Grid>
-          <Grid item sm={6} md={6} lg={6}>
-            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-              Payment Mode: <strong>{paymentMode}</strong>
-            </Typography>
-          </Grid>
-          <Grid item sm={12} md={12} lg={12}>
-            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-              SBU: <strong>{ownerDetails?.SBU}</strong>
-            </Typography>
-          </Grid>
-        </Grid>
-      </Box>
-
-      {/* Order Items Table */}
-      <Box my={8}>
-        <Grid container spacing={5}>
-          <Grid item xs={12}>
-            <Box>
-              <TableContainer
-                component={Paper}
-                elevation={0}
-                sx={{ borderBottom: '1.5px solid #CFCFD5', borderRadius: 0 }}
-              >
-                <Table sx={{ minWidth: 650 }} size="large">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Product</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Category</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Brand</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>SKU</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Quantity</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Price</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>GST</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Subtotal</TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {order.orderItem.map((row, index) => {
-                      const gstAmount = (row.price * row.GST) / 100
-                      return (
-                        <TableRow
-                          key={index}
-                          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-                        >
-                          <TableCell>
-                            <Box sx={{ display: 'flex' }}>
-                              <Box>
-                                <Typography fontWeight={600}>{row.name}</Typography>
-                              </Box>
-                            </Box>
-                          </TableCell>
-                          <TableCell>{row.categoryName}</TableCell>
-                          <TableCell>{row.brandName}</TableCell>
-                          <TableCell>{row.SKU}</TableCell>
-                          <TableCell>{row.quantity}</TableCell>
-                          <TableCell>₹{row.price}</TableCell>
-                          <TableCell>₹{gstAmount}</TableCell>
-                          <TableCell>₹{row.price * row.quantity}</TableCell>
-                        </TableRow>
-                      )
-                    })}
-                    <TableRow>
-                      <TableCell colSpan={7} />
-                      <TableCell>
-                        Subtotal:<strong> ₹ {subtotal}</strong>
-                      </TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell colSpan={7} />
-                      <TableCell>
-                        Total GST:<strong> ₹ {gstTotal} </strong>
-                      </TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell colSpan={7} />
-                      <TableCell>
-                        Grand Total: <strong> ₹ {grandTotal}</strong>
-                      </TableCell>
-                    </TableRow>
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            </Box>
-          </Grid>
-        </Grid>
-      </Box>
-
-      {/* Status History Table */}
-      {statusHistory.length > 0 && (
-        <Box mt={8}>
-          <Typography variant="h5" sx={{ mb: '1rem' }}>
-            Status History
-          </Typography>
-          <TableContainer
-            component={Paper}
-            elevation={0}
-            sx={{ borderBottom: '1.5px solid #CFCFD5', borderRadius: '0.8rem' }}
-          >
-            <Table sx={{ minWidth: 650 }} size="large">
-              <TableHead>
-                <TableRow>
-                  <TableCell>Status</TableCell>
-                  <TableCell>Timestamp</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {statusHistory.map((status, index) => (
-                  <TableRow key={index}>
-                    <TableCell>{status.status}</TableCell>
-                    <TableCell>{new Date(status.timestamp).toLocaleString()}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </Box>
-      )}
-    </Box>
-  )
-}
-
-export default OrderDetails

src/views/pages/Kyc/MessageList.js

@@ -1,46 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react'
-
-const MessageList = ({ messages }) => {
-  const 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
-  }
-  const formatDateWithoutComma = (date) => {
-    const dateObj = new Date(date)
-    const dateStr = dateObj.toDateString().split(' ')
-    return `${dateStr[1]} ${dateStr[2]} ${dateStr[3]}`
-  }
-  return (
-    <>
-      {messages.map((msg, index) => (
-        <div
-          key={index}
-          style={{
-            marginBottom: '10px',
-            padding: '10px',
-            borderRadius: '5px',
-            backgroundColor: msg.user === 'Principal Distributer' ? '#212631' : 'blue',
-            boxShadow: '0px 3px 6px rgba(0,0,0,0.1)',
-          }}
-        >
-          <div style={{ fontWeight: 'bold', marginBottom: '5px', color: 'white' }}>{msg.user}</div>
-          <div style={{ fontWeight: 'bold', marginBottom: '5px', color: 'white' }}>
-            {/* {new Date(`${msg.replyDate}`).toDateString()} */}
-            {`${formatDateWithoutComma(msg?.replyDate)}`}
-            <span> , {`${formatAMPM(msg?.replyDate)}`}</span>
-          </div>
-          <div style={{ color: 'white' }}>{msg.message}</div>
-        </div>
-      ))}
-    </>
-  )
-}
-
-export default MessageList

src/views/pages/Kyc/imgModal.js

@@ -1,55 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react'
-import { Box, Modal, Typography, IconButton, Button } from '@mui/material'
-import CloseIcon from '@mui/icons-material/Close'
-
-const ImgModal = ({ open, handleClose, imageUrl }) => {
-  const handleDownload = () => {
-    const link = document.createElement('a')
-    link.href = imageUrl
-    link.download = imageUrl.split('/').pop()
-    link.click()
-  }
-
-  return (
-    <Modal
-      open={open}
-      onClose={handleClose}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-    >
-      <Box sx={{ ...modalStyle, width: '90%', height: '90%' }}>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-          <Typography id="modal-modal-title" variant="h6" component="h2">
-            Document Image
-          </Typography>
-          <IconButton onClick={handleClose}>
-            <CloseIcon />
-          </IconButton>
-        </Box>
-        <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
-          <img
-            src={imageUrl}
-            alt="Document"
-            style={{ maxWidth: '100%', maxHeight: '600px', objectFit: 'contain' }}
-          />
-        </Box>
-        <Button variant="contained" onClick={handleDownload} sx={{ textTransform: 'unset' }}>
-          Download
-        </Button>
-      </Box>
-    </Modal>
-  )
-}
-
-const modalStyle = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  bgcolor: 'background.paper',
-  boxShadow: 24,
-  p: 4,
-}
-
-export default ImgModal

src/views/pages/Kyc/kyc.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import {
   Box,
   Table,
@@ -10,51 +10,34 @@ import {
   Paper,
   TablePagination,
   Button,
+  IconButton,
   Tooltip,
-  Tabs,
-  Tab,
-  Modal,
-  TextField,
-  DialogActions,
-  Typography,
 } from '@mui/material'
+import { Visibility, ThumbUp, ThumbDown } from '@mui/icons-material'
+import { format } from 'date-fns'
 import { useNavigate } from 'react-router-dom'
-import Axios from '../../../axios'
+
-import { isAutheticated } from '../../../auth'
+const generateRandomData = (numRows) => {
-import Swal from 'sweetalert2'
+  const statuses = ['New', 'Pending', 'Rejected', 'Approved']
+  const data = []
+
+  for (let i = 0; i < numRows; i++) {
+    data.push({
+      id: i + 1,
+      tradeName: `Trade ${i + 1}`,
+      createdOn: new Date(),
+      status: statuses[Math.floor(Math.random() * statuses.length)],
+    })
+  }
+
+  return data
+}
 
 const Kyc = () => {
-  const [rows, setRows] = useState([])
+  const [rows, setRows] = useState(generateRandomData(50))
   const [page, setPage] = useState(0)
-  const [rowsPerPage, setRowsPerPage] = useState(10)
+  const [rowsPerPage, setRowsPerPage] = useState(5)
-  const [tabIndex, setTabIndex] = useState(0)
-  const [loading, setLoading] = useState(false)
-  const [openModal, setOpenModal] = useState(false)
-  const [openModal2, setOpenModal2] = useState(false)
-  const [rejectionReason, setRejectionReason] = useState('')
-  const [selectedRowId, setSelectedRowId] = useState(null)
-  const [selectedRowId2, setSelectedRowId2] = useState(null)
   const navigate = useNavigate()
-  const token = isAutheticated()
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await Axios.get('/api/kyc/getAll/', {
-          headers: {
-            Authorization: `Bearer ${token}`,
-            'Content-Type': 'application/json',
-          },
-        })
-        console.log(response)
-        setRows(response.data)
-      } catch (error) {
-        console.error('Error fetching data: ', error)
-      }
-    }
-
-    fetchData()
-  }, [])
 
   const handleChangePage = (event, newPage) => {
     setPage(newPage)
@@ -69,283 +52,75 @@ const Kyc = () => {
     navigate(`/kyc/details/${id}`)
   }
 
-  const handleTabChange = (event, newValue) => {
-    setTabIndex(newValue)
-  }
-
-  const filterRowsByStatus = (status) => {
-    return rows.filter((row) => row.status === status)
-  }
-
-  const filteredRows = filterRowsByStatus(
-    tabIndex === 0 ? 'new' : tabIndex === 1 ? 'approved' : 'reject',
-  )
-
-  const handleRejectClick = async (id) => {
-    setSelectedRowId(id)
-    setOpenModal(true)
-  }
-
-  const handleApproveClick = async (id) => {
-    setSelectedRowId2(id)
-    setOpenModal2(true)
-  }
-
-  const handleApproveConfirm = async () => {
-    try {
-      setLoading(true)
-      console.log(selectedRowId2)
-      await Axios.patch(
-        `/api/kyc/update/${selectedRowId2}`,
-        {
-          status: 'approved',
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-            'Content-Type': 'application/json',
-          },
-        },
-      )
-      setRows((prevRows) =>
-        prevRows.map((row) => (row._id === selectedRowId2 ? { ...row, status: 'approved' } : row)),
-      )
-      setLoading(true)
-      Swal.fire('Success', 'Approved', 'success')
-      handleModalClose2()
-    } catch (error) {
-      setLoading(false)
-      console.error('Error approving KYC: ', error)
-      Swal.fire('Error!', error.message, 'error')
-      handleModalClose2()
-    }
-  }
-
-  const handleModalClose = () => {
-    setOpenModal(false)
-    setRejectionReason('')
-  }
-
-  const handleModalClose2 = () => {
-    setOpenModal2(false)
-  }
-
-  const handleRejectionReasonChange = (event) => {
-    setRejectionReason(event.target.value)
-  }
-
-  const handleRejectConfirm = async () => {
-    try {
-      setLoading(true)
-      await Axios.patch(
-        `/api/kyc/update/${selectedRowId}`,
-        {
-          status: 'reject',
-          rejectionReason,
-          user: 'Principal Distributer',
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-            'Content-Type': 'application/json',
-          },
-        },
-      )
-      setRows((prevRows) =>
-        prevRows.map((row) => (row._id === selectedRowId ? { ...row, status: 'reject' } : row)),
-      )
-      setLoading(true)
-      Swal.fire('Success', 'Rejected', 'success')
-      handleModalClose()
-    } catch (error) {
-      setLoading(false)
-      console.error('Error rejecting KYC: ', error)
-      Swal.fire('Error!', error.message, 'error')
-      handleModalClose()
-    }
-  }
-
-  const 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
-  }
-  const capitalizeStatus = (status) => {
-    return status.charAt(0).toUpperCase() + status.slice(1)
-  }
-
-  // Helper function to format the date
-  const formatDateWithoutComma = (date) => {
-    const dateObj = new Date(date)
-    const dateStr = dateObj.toDateString().split(' ')
-    return `${dateStr[1]} ${dateStr[2]} ${dateStr[3]}`
-  }
   return (
     <Box sx={{ width: '100%' }}>
       <Paper sx={{ width: '100%', mb: 2 }}>
-        <Tabs value={tabIndex} onChange={handleTabChange}>
-          <Tab label="New" sx={{ textTransform: 'unset' }} />
-          <Tab label="Approved" sx={{ textTransform: 'unset' }} />
-          <Tab label="Rejected" sx={{ textTransform: 'unset' }} />
-        </Tabs>
         <TableContainer>
           <Table>
             <TableHead>
               <TableRow>
-                <TableCell sx={{ fontWeight: 'bold' }}>ID</TableCell>
+                <TableCell>ID</TableCell>
-                <TableCell sx={{ fontWeight: 'bold' }}>Trade Name</TableCell>
+                <TableCell>Trade Name</TableCell>
-                <TableCell sx={{ fontWeight: 'bold' }}>Created On</TableCell>
+                <TableCell>Created On</TableCell>
-                <TableCell sx={{ fontWeight: 'bold' }}>Status</TableCell>
+                <TableCell>Status</TableCell>
-                <TableCell sx={{ fontWeight: 'bold' }}>Action</TableCell>
+                <TableCell>Action</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
-              {filteredRows.length !== 0 &&
+              {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => (
-                filteredRows
+                <TableRow key={row.id}>
-                  .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                  <TableCell>{row.id}</TableCell>
-                  .map((row) => (
+                  <TableCell>{row.tradeName}</TableCell>
-                    <TableRow key={row._id}>
+                  <TableCell>{format(row.createdOn, 'yyyy-MM-dd HH:mm:ss')}</TableCell>
-                      <TableCell>{row._id}</TableCell>
+                  <TableCell>{row.status}</TableCell>
-                      <TableCell>{row.trade_name}</TableCell>
+                  <TableCell>
-                      <TableCell>
+                    <Tooltip title="View">
-                        {`${formatDateWithoutComma(row?.createdAt)}`}
+                      {/* <IconButton color="primary">
-                        <span>, {`${formatAMPM(row?.createdAt)}`}</span>
+                        <Visibility />
-                      </TableCell>
+                      </IconButton> */}
-                      <TableCell>{capitalizeStatus(row.status)}</TableCell>
+                      <Button
-                      <TableCell>
+                        sx={{ mr: '1rem' }}
-                        <Tooltip title="View">
+                        color="primary"
-                          <Button
+                        variant="contained"
-                            sx={{ mr: '1rem', textTransform: 'unset' }}
+                        onClick={() => handleViewClick(row.id)}
-                            color="primary"
+                      >
-                            variant="contained"
+                        View
-                            onClick={() => handleViewClick(row._id)}
+                      </Button>
-                          >
+                    </Tooltip>
-                            View
+                    <Tooltip title="Approve">
-                          </Button>
+                      {/* <IconButton color="success">
-                        </Tooltip>
+                        <ThumbUp />
-                        {tabIndex === 0 && (
+                      </IconButton> */}
-                          <>
+                      <Button sx={{ mr: '1rem' }} color="success" variant="contained">
-                            <Tooltip title="Approve">
+                        Approve
-                              <Button
+                      </Button>
-                                sx={{ mr: '1rem', textTransform: 'unset' }}
+                    </Tooltip>
-                                color="success"
+                    <Tooltip title="Reject">
-                                variant="contained"
+                      {/* <IconButton color="error">
-                                onClick={() => handleApproveClick(row._id)}
+                        <ThumbDown />
-                              >
+                      </IconButton> */}
-                                Approve
+                      <Button sx={{ mr: '1rem' }} color="error" variant="contained">
-                              </Button>
+                        Reject
-                            </Tooltip>
+                      </Button>
-                            <Tooltip title="Reject">
+                    </Tooltip>
-                              <Button
+                  </TableCell>
-                                sx={{ mr: '1rem', textTransform: 'unset' }}
+                </TableRow>
-                                color="error"
+              ))}
-                                variant="contained"
-                                onClick={() => handleRejectClick(row._id)}
-                              >
-                                Reject
-                              </Button>
-                            </Tooltip>
-                          </>
-                        )}
-                      </TableCell>
-                    </TableRow>
-                  ))}
-              {filteredRows.length === 0 && (
-                <h5 style={{ textAlign: 'center' }}>No kyc available</h5>
-              )}
             </TableBody>
           </Table>
         </TableContainer>
         <TablePagination
-          rowsPerPageOptions={[10, 15, 25]}
+          rowsPerPageOptions={[5, 10, 25]}
           component="div"
-          count={filteredRows.length}
+          count={rows.length}
           rowsPerPage={rowsPerPage}
           page={page}
           onPageChange={handleChangePage}
           onRowsPerPageChange={handleChangeRowsPerPage}
         />
       </Paper>
-      <Modal
-        open={openModal}
-        onClose={handleModalClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <Box sx={{ ...modalStyle, width: 400 }}>
-          <h2 id="modal-modal-title">Rejection Reason</h2>
-          <TextField
-            fullWidth
-            multiline
-            rows={4}
-            value={rejectionReason}
-            onChange={handleRejectionReasonChange}
-            variant="outlined"
-            label="Enter rejection reason"
-          />
-          <DialogActions>
-            <Button onClick={handleModalClose} sx={{ textTransform: 'unset' }} color="primary">
-              Cancel
-            </Button>
-            <Button
-              onClick={handleRejectConfirm}
-              sx={{ textTransform: 'unset' }}
-              color="error"
-              variant="contained"
-            >
-              Confirm
-            </Button>
-          </DialogActions>
-        </Box>
-      </Modal>
-      <Modal
-        open={openModal2}
-        onClose={handleModalClose2}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-      >
-        <Box sx={{ ...modalStyle, width: 400 }}>
-          <h2 id="modal-modal-title">Approval Confirmation</h2>
-          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-            Are you sure you want to approve this KYC?
-          </Typography>
-          <DialogActions>
-            <Button
-              onClick={handleModalClose2}
-              sx={{ textTransform: 'unset' }}
-              color="primary"
-              // variant="contained"
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={handleApproveConfirm}
-              sx={{ textTransform: 'unset' }}
-              color="success"
-              variant="contained"
-            >
-              Confirm
-            </Button>
-          </DialogActions>
-        </Box>
-      </Modal>
     </Box>
   )
 }
 
-const modalStyle = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  bgcolor: 'background.paper',
-  boxShadow: 24,
-  p: 4,
-}
-
 export default Kyc

src/views/pages/Kyc/kycDetails.js

@@ -1,194 +1,51 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
-import axios from 'axios'
+import { Box, Typography, Grid, Paper, Avatar } from '@mui/material'
-import {
+import { useParams } from 'react-router-dom'
-  Box,
-  Typography,
-  Grid,
-  Paper,
-  Avatar,
-  Button,
-  TextField,
-  Modal,
-  DialogActions,
-} from '@mui/material'
-import { useNavigate, useParams } from 'react-router-dom'
 import { format } from 'date-fns'
-import Axios from '../../../axios'
+
-import { isAutheticated } from '../../../auth'
+const generateRandomRetailerDetails = (id) => ({
-import MessageList from './MessageList'
+  id,
-import Swal from 'sweetalert2'
+  tradeName: `Trade ${id}`,
-import ImgModal from './imgModal'
+  name: `Retailer ${id}`,
+  address: '123 Main St',
+  townCity: 'Townsville',
+  district: 'District A',
+  state: 'State B',
+  pincode: '123456',
+  mobileNumber: '123-456-7890',
+  mappedDistributor: `Distributor ${id}`,
+  documents: {
+    panNumber: 'ABCDE1234F',
+    panCard:
+      'https://www.shutterstock.com/shutterstock/photos/2329691987/display_1500/stock-vector-blank-pan-card-vector-image-income-tax-card-personal-account-number-image-translation-income-2329691987.jpg',
+    aadharNumber: '1234-5678-9101',
+    aadharCard: 'https://via.placeholder.com/100',
+    gstNumber: '22AAAAA0000A1Z5',
+    gstRegistration: 'https://via.placeholder.com/100',
+    pesticideLicense: 'https://via.placeholder.com/100',
+    fertilizerLicense: 'https://via.placeholder.com/100',
+    entranceBoardSelfie: 'https://via.placeholder.com/100',
+  },
+  salesCoordinator: {
+    designation: 'Sales Coordinator',
+    name: `Coordinator ${id}`,
+    employeeId: `EMP${id}`,
+    uploadedOn: new Date(),
+    resubmittedOn: new Date(),
+  },
+  notes: ['Note 1', 'Note 2', 'Note 3'],
+})
 
 const KycDetails = () => {
   const { id } = useParams()
-  const [openRejectModal, setOpenRejectModal] = useState(false)
+  console.log(id)
-  const [openApproveModal, setOpenApproveModal] = useState(false)
+  const retailerDetails = generateRandomRetailerDetails(id)
-  const [rejectionReason, setRejectionReason] = useState('')
-  const [selectedRowId, setSelectedRowId] = useState(null)
-  const [retailerDetails, setRetailerDetails] = useState(null)
-  const [openImageModal, setOpenImageModal] = useState(false)
-  const [selectedImageUrl, setSelectedImageUrl] = useState('')
-  const token = isAutheticated()
-
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await Axios.get(`/api/kyc/get-single-kyc/${id}`, {
-          headers: {
-            'Access-Control-Allow-Origin': '*',
-            Authorization: `Bearer ${token}`,
-            'Content-Type': 'multipart/formdata',
-          },
-        })
-        console.log(response.data)
-        setRetailerDetails(response.data)
-      } catch (error) {
-        console.error('Error fetching data: ', error)
-      }
-    }
-
-    fetchData()
-  }, [id])
-
-  const [msg, setMsg] = useState('')
-  const handelSend = async () => {
-    try {
-      const resp = await Axios.patch(
-        `/api/kyc/update/${id}`,
-        {
-          rejectionReason: msg,
-
-          user: 'Principal Distributer', // Replace with actual user type
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-            'Content-Type': 'application/json',
-          },
-        },
-      )
-      setRetailerDetails(resp.data.kyc)
-      setMsg('')
-      Swal.fire('Success', 'Message sent', 'success')
-    } catch (error) {
-      console.error('Error sending message: ', error)
-      Swal.fire('Error!', error.message, 'error')
-    }
-  }
-
-  const handleModalClose = () => {
-    setOpenRejectModal(false)
-    setOpenApproveModal(false)
-    setRejectionReason('')
-  }
-
-  const handleRejectionReasonChange = (event) => {
-    setRejectionReason(event.target.value)
-  }
-  const formatDateWithoutComma = (date) => {
-    const dateObj = new Date(date)
-    const dateStr = dateObj.toDateString().split(' ')
-    return `${dateStr[1]} ${dateStr[2]} ${dateStr[3]}`
-  }
-
-  const handleRejectConfirm = async () => {
-    try {
-      const res = await Axios.patch(
-        `/api/kyc/update/${id}`,
-        {
-          status: 'reject',
-          rejectionReason,
-
-          user: 'Principal Distributer', // Replace with actual user type
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-            'Content-Type': 'application/json',
-          },
-        },
-      )
-      setRetailerDetails(res.data.kyc)
-      Swal.fire('Success', 'Rejected', 'success')
-      handleModalClose()
-    } catch (error) {
-      console.error('Error rejecting KYC: ', error)
-      Swal.fire('Error!', error.message, 'error')
-      handleModalClose()
-    }
-  }
-
-  const handleApproveConfirm = async () => {
-    try {
-      const res = await Axios.patch(
-        `/api/kyc/update/${id}`,
-        {
-          status: 'approved',
-          // user: 'Principal Distributer', // Replace with actual user type
-        },
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-            'Content-Type': 'application/json',
-          },
-        },
-      )
-      setRetailerDetails(res.data.kyc)
-      Swal.fire('Success', 'Approved', 'success')
-      handleModalClose()
-    } catch (error) {
-      console.error('Error approving KYC: ', error)
-      Swal.fire('Error!', error.message, 'error')
-      handleModalClose()
-    }
-  }
-
-  const 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
-  }
-
-  const handleRejectClick = () => {
-    setOpenRejectModal(true)
-  }
-
-  const handleApproveClick = () => {
-    setOpenApproveModal(true)
-  }
-
-  const handleImageClick = (url) => {
-    setSelectedImageUrl(url)
-    console.log(selectedImageUrl)
-    setOpenImageModal(true)
-  }
-
-  if (!retailerDetails) {
-    return <Typography>Loading...</Typography>
-  }
 
   return (
     <Box sx={{ p: 3 }}>
-      <Box sx={{ display: 'flex', mb: '1rem' }}>
+      <Typography variant="h4" gutterBottom>
-        <Typography variant="h4" flex={1} gutterBottom>
+        Retailer Details
-          Retailer Details
+      </Typography>
-        </Typography>
-        <Button
-          onClick={() => navigate('/kyc')}
-          color="primary"
-          sx={{ padding: '0.5rem 1rem' }}
-          variant="contained"
-        >
-          Back
-        </Button>
-      </Box>
 
       <Paper sx={{ p: 2, mb: 3 }}>
         <Typography variant="h5" gutterBottom>
@@ -197,7 +54,7 @@ const KycDetails = () => {
         <Grid container spacing={2}>
           <Grid item xs={6}>
             <Typography>
-              <strong>Trade Name:</strong> {retailerDetails.trade_name}
+              <strong>Trade Name:</strong> {retailerDetails.tradeName}
             </Typography>
             <Typography>
               <strong>Name:</strong> {retailerDetails.name}
@@ -206,7 +63,7 @@ const KycDetails = () => {
               <strong>Address:</strong> {retailerDetails.address}
             </Typography>
             <Typography>
-              <strong>Town/City:</strong> {retailerDetails.city}
+              <strong>Town/City:</strong> {retailerDetails.townCity}
             </Typography>
           </Grid>
           <Grid item xs={6}>
@@ -220,11 +77,10 @@ const KycDetails = () => {
               <strong>Pincode:</strong> {retailerDetails.pincode}
             </Typography>
             <Typography>
-              <strong>Mobile Number:</strong> {retailerDetails.mobile_number}
+              <strong>Mobile Number:</strong> {retailerDetails.mobileNumber}
             </Typography>
             <Typography>
-              <strong>Mapped Principal Distributor:</strong>{' '}
+              <strong>Mapped Principal Distributor:</strong> {retailerDetails.mappedDistributor}
-              {retailerDetails.principal_distributer.name}
             </Typography>
           </Grid>
         </Grid>
@@ -237,31 +93,28 @@ const KycDetails = () => {
         <Grid container spacing={2}>
           <Grid item xs={6}>
             <Typography>
-              <strong>PAN Number:</strong> {retailerDetails.pan_number}
+              <strong>PAN Number:</strong> {retailerDetails.documents.panNumber}
             </Typography>
             <Avatar
               variant="square"
-              src={retailerDetails.pan_img.url}
+              src={retailerDetails.documents.panCard}
               sx={{ width: 100, height: 100, mb: 2 }}
-              onClick={() => handleImageClick(retailerDetails.pan_img.url)}
             />
             <Typography>
-              <strong>Aadhar Number:</strong> {retailerDetails.aadhar_number}
+              <strong>Aadhar Number:</strong> {retailerDetails.documents.aadharNumber}
             </Typography>
             <Avatar
               variant="square"
-              src={retailerDetails.aadhar_img.url}
+              src={retailerDetails.documents.aadharCard}
               sx={{ width: 100, height: 100, mb: 2 }}
-              onClick={() => handleImageClick(retailerDetails.aadhar_img.url)}
             />
             <Typography>
-              <strong>GST Number:</strong> {retailerDetails.gst_number}
+              <strong>GST Number:</strong> {retailerDetails.documents.gstNumber}
             </Typography>
             <Avatar
               variant="square"
-              src={retailerDetails.gst_img.url}
+              src={retailerDetails.documents.gstRegistration}
               sx={{ width: 100, height: 100, mb: 2 }}
-              onClick={() => handleImageClick(retailerDetails.gst_img.url)}
             />
           </Grid>
           <Grid item xs={6}>
@@ -270,31 +123,24 @@ const KycDetails = () => {
             </Typography>
             <Avatar
               variant="square"
-              src={retailerDetails.pesticide_license_img.url}
+              src={retailerDetails.documents.pesticideLicense}
               sx={{ width: 100, height: 100, mb: 2 }}
-              onClick={() => handleImageClick(retailerDetails.pesticide_license_img.url)}
             />
             <Typography>
               <strong>Fertilizer License (optional):</strong>
             </Typography>
-            {retailerDetails.fertilizer_license_img ? (
+            <Avatar
-              <Avatar
+              variant="square"
-                variant="square"
+              src={retailerDetails.documents.fertilizerLicense}
-                src={retailerDetails.fertilizer_license_img.url}
+              sx={{ width: 100, height: 100, mb: 2 }}
-                sx={{ width: 100, height: 100, mb: 2 }}
+            />
-                onClick={() => handleImageClick(retailerDetails.fertilizer_license_img.url)}
-              />
-            ) : (
-              <Typography>Img not available</Typography>
-            )}
             <Typography>
               <strong>Selfie of Entrance Board:</strong>
             </Typography>
             <Avatar
               variant="square"
-              src={retailerDetails.selfie_entrance_img.url}
+              src={retailerDetails.documents.entranceBoardSelfie}
               sx={{ width: 100, height: 100, mb: 2 }}
-              onClick={() => handleImageClick(retailerDetails.selfie_entrance_img.url)}
             />
           </Grid>
         </Grid>
@@ -302,165 +148,43 @@ const KycDetails = () => {
 
       <Paper sx={{ p: 2, mb: 3 }}>
         <Typography variant="h6" gutterBottom>
-          Sales Coordinators/Territory Manager Details
+          Block 3: Sales Coordinators/Territory Manager Details
         </Typography>
         <Grid container spacing={2}>
           <Grid item xs={6}>
             <Typography>
-              <strong>Designation:</strong>{' '}
+              <strong>Designation:</strong> {retailerDetails.salesCoordinator.designation}
-              {retailerDetails.userType === 'SalesCoOrdinator'
-                ? 'Sales Coordinator'
-                : 'Territory Manager'}
             </Typography>
             <Typography>
-              <strong>Name:</strong> {retailerDetails.addedBy.name}
+              <strong>Name:</strong> {retailerDetails.salesCoordinator.name}
             </Typography>
             <Typography>
-              <strong>Employee ID:</strong> {retailerDetails.addedBy.uniqueId}
+              <strong>Employee ID:</strong> {retailerDetails.salesCoordinator.employeeId}
             </Typography>
           </Grid>
           <Grid item xs={6}>
             <Typography>
               <strong>Uploaded on:</strong>{' '}
-              {/* {new Date(`${retailerDetails?.createdAt}`).toDateString()} */}
+              {format(retailerDetails.salesCoordinator.uploadedOn, 'yyyy-MM-dd HH:mm:ss')}
-              {`${formatDateWithoutComma(retailerDetails?.createdAt)}`}
-              <span> , {`${formatAMPM(retailerDetails?.createdAt)}`}</span>
             </Typography>
             <Typography>
               <strong>Resubmitted on:</strong>{' '}
-              {/* {new Date(`${retailerDetails?.updatedAt}`).toDateString()} */}
+              {format(retailerDetails.salesCoordinator.resubmittedOn, 'yyyy-MM-dd HH:mm:ss')}
-              {`${formatDateWithoutComma(retailerDetails?.updatedAt)}`}
-              <span> , {`${formatAMPM(retailerDetails?.createdAt)}`}</span>
             </Typography>
           </Grid>
         </Grid>
       </Paper>
 
-      {retailerDetails.notes.length > 0 && retailerDetails.status === 'reject' && (
+      <Paper sx={{ p: 2, mb: 3 }}>
-        <Paper sx={{ p: 2, mb: 3 }}>
+        <Typography variant="h6" gutterBottom>
-          <Typography variant="h6" gutterBottom>
+          Block 4: Notes
-            Notes:
+        </Typography>
-          </Typography>
+        {retailerDetails.notes.map((note, index) => (
-
+          <Typography key={index}>{note}</Typography>
-          <MessageList messages={retailerDetails.notes} />
+        ))}
-
+      </Paper>
-          <TextField
-            fullWidth
-            multiline
-            rows={4}
-            value={msg}
-            onChange={(e) => setMsg(e.target.value)}
-            variant="outlined"
-            label="send message"
-          />
-          <Button
-            variant="contained"
-            sx={{ textTransform: 'unset', mt: '2rem' }}
-            onClick={() => handelSend()}
-          >
-            Send
-          </Button>
-        </Paper>
-      )}
-      {retailerDetails.status === 'new' && (
-        <>
-          <Modal
-            open={openRejectModal}
-            onClose={handleModalClose}
-            aria-labelledby="modal-modal-title"
-            aria-describedby="modal-modal-description"
-          >
-            <Box sx={{ ...modalStyle, width: 400 }}>
-              <h2 id="modal-modal-title">Rejection Reason</h2>
-              <TextField
-                fullWidth
-                multiline
-                rows={4}
-                value={rejectionReason}
-                onChange={handleRejectionReasonChange}
-                variant="outlined"
-                label="Enter rejection reason"
-              />
-              <DialogActions>
-                <Button onClick={handleModalClose} sx={{ textTransform: 'unset' }} color="primary">
-                  Cancel
-                </Button>
-                <Button
-                  onClick={handleRejectConfirm}
-                  sx={{ textTransform: 'unset' }}
-                  color="error"
-                  variant="contained"
-                >
-                  Confirm
-                </Button>
-              </DialogActions>
-            </Box>
-          </Modal>
-
-          <Modal
-            open={openApproveModal}
-            onClose={handleModalClose}
-            aria-labelledby="modal-modal-title"
-            aria-describedby="modal-modal-description"
-          >
-            <Box sx={{ ...modalStyle, width: 400 }}>
-              <h2 id="modal-modal-title">Approval Confirmation</h2>
-              <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-                Are you sure you want to approve this KYC?
-              </Typography>
-              <DialogActions>
-                <Button onClick={handleModalClose} sx={{ textTransform: 'unset' }} color="primary">
-                  Cancel
-                </Button>
-                <Button
-                  onClick={handleApproveConfirm}
-                  sx={{ textTransform: 'unset' }}
-                  color="success"
-                  variant="contained"
-                >
-                  Confirm
-                </Button>
-              </DialogActions>
-            </Box>
-          </Modal>
-
-          <Paper sx={{ p: 2, mb: 3 }}>
-            <Button
-              sx={{ mr: '1rem', textTransform: 'unset' }}
-              color="success"
-              variant="contained"
-              onClick={handleApproveClick}
-            >
-              Approve
-            </Button>
-            <Button
-              sx={{ mr: '1rem', textTransform: 'unset' }}
-              color="error"
-              variant="contained"
-              onClick={handleRejectClick}
-            >
-              Reject
-            </Button>
-          </Paper>
-        </>
-      )}
-      <ImgModal
-        open={openImageModal}
-        handleClose={() => setOpenImageModal(false)}
-        imageUrl={selectedImageUrl}
-      />
     </Box>
   )
 }
 
-const modalStyle = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  bgcolor: 'background.paper',
-  boxShadow: 24,
-  p: 4,
-}
-
 export default KycDetails

src/views/pages/cart/addressAndPayment.js

@@ -1,167 +0,0 @@
-import {
-  Box,
-  Button,
-  FormControl,
-  FormControlLabel,
-  Grid,
-  InputLabel,
-  MenuItem,
-  Radio,
-  RadioGroup,
-  Select,
-  Typography,
-  FormHelperText,
-} from '@mui/material'
-import React, { useState } from 'react'
-
-const AddressAndPayment = ({
-  billTo,
-  setBillTo,
-  shipTo,
-  setShipTo,
-  paymentMode,
-  setPaymentMode,
-  handleTabChange,
-}) => {
-  const [billToError, setBillToError] = useState(false)
-  const [shipToError, setShipToError] = useState(false)
-  const [paymentModeError, setPaymentModeError] = useState(false)
-
-  const handleReviewOrderClick = (e) => {
-    let isValid = true
-
-    // Check if Bill Address is filled
-    if (billTo === '') {
-      setBillToError(true)
-      isValid = false
-    } else {
-      setBillToError(false)
-    }
-
-    // Check if Ship Address is filled
-    if (shipTo === '') {
-      setShipToError(true)
-      isValid = false
-    } else {
-      setShipToError(false)
-    }
-
-    // Check if Payment Mode is selected
-    if (paymentMode === '') {
-      setPaymentModeError(true)
-      isValid = false
-    } else {
-      setPaymentModeError(false)
-    }
-
-    // If all fields are valid, move to the next tab
-    if (isValid) {
-      handleTabChange(e, 2)
-    }
-  }
-
-  return (
-    <div>
-      <Box sx={{ my: '2rem', background: '#fff', padding: '1rem', borderRadius: '0.8rem' }}>
-        <Typography variant="h4" textAlign={'center'} marginBottom={2}>
-          Select Address and Payment Mode
-        </Typography>
-        <Grid container spacing={3}>
-          <Grid item sm={6} md={6} lg={6}>
-            <Typography sx={{ mb: '0.5rem' }}>Bill Address</Typography>
-            <FormControl required fullWidth error={billToError}>
-              <InputLabel id="bill-address-label">Bill Address</InputLabel>
-              <Select
-                labelId="bill-address-label"
-                id="bill-address-select"
-                required
-                value={billTo}
-                label="Bill Address"
-                onChange={(e) => setBillTo(e.target.value)}
-              >
-                <MenuItem value={'123, MG Road, Bengaluru, Karnataka - 560001'}>
-                  123, MG Road, Bengaluru, Karnataka - 560001
-                </MenuItem>
-                <MenuItem value={'456, Park Street, Kolkata, West Bengal - 700016'}>
-                  456, Park Street, Kolkata, West Bengal - 700016
-                </MenuItem>
-                <MenuItem value={'789, Connaught Place, New Delhi - 110001'}>
-                  789, Connaught Place, New Delhi - 110001
-                </MenuItem>
-              </Select>
-              {billToError && <FormHelperText>Bill Address is required</FormHelperText>}
-            </FormControl>
-          </Grid>
-          <Grid item sm={6} md={6} lg={6}>
-            <Typography sx={{ mb: '0.5rem' }}>Ship Address</Typography>
-            <FormControl required fullWidth error={shipToError}>
-              <InputLabel id="ship-address-label">Ship Address</InputLabel>
-              <Select
-                labelId="ship-address-label"
-                id="ship-address-select"
-                value={shipTo}
-                label="Ship Address"
-                onChange={(e) => setShipTo(e.target.value)}
-              >
-                <MenuItem value={'123, MG Road, Bengaluru, Karnataka - 560001'}>
-                  123, MG Road, Bengaluru, Karnataka - 560001
-                </MenuItem>
-                <MenuItem value={'456, Park Street, Kolkata, West Bengal - 700016'}>
-                  456, Park Street, Kolkata, West Bengal - 700016
-                </MenuItem>
-                <MenuItem value={'789, Connaught Place, New Delhi - 110001'}>
-                  789, Connaught Place, New Delhi - 110001
-                </MenuItem>
-              </Select>
-              {shipToError && <FormHelperText>Ship Address is required</FormHelperText>}
-            </FormControl>
-          </Grid>
-          {billTo !== '' && (
-            <Grid item sm={6} md={6} lg={6}>
-              <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-                Selected Bill Address
-              </Typography>
-              <Typography sx={{ mb: '0.5rem' }}>{billTo}</Typography>
-            </Grid>
-          )}
-          {shipTo !== '' && (
-            <Grid item sm={6} md={6} lg={6}>
-              <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-                Selected Ship to Address
-              </Typography>
-              <Typography sx={{ mb: '0.5rem' }}>{shipTo}</Typography>
-            </Grid>
-          )}
-          <Grid item sm={12} md={12} lg={12}>
-            <Typography>Payment Mode</Typography>
-            <FormControl component="fieldset" error={paymentModeError}>
-              <RadioGroup value={paymentMode} onChange={(e) => setPaymentMode(e.target.value)}>
-                <FormControlLabel
-                  value="online-transfer"
-                  control={<Radio />}
-                  label="Online Transfer"
-                />
-                <FormControlLabel value="cheque" control={<Radio />} label="Cheque" />
-                <FormControlLabel value="credit" control={<Radio />} label="Credit" />
-              </RadioGroup>
-              {paymentModeError && <FormHelperText>Payment Mode is required</FormHelperText>}
-            </FormControl>
-          </Grid>
-        </Grid>
-        <Box sx={{ display: 'flex', justifyContent: 'center', my: 4 }}>
-          <Button
-            variant="contained"
-            size="large"
-            color="primary"
-            onClick={handleReviewOrderClick}
-            sx={{ width: '200px' }}
-          >
-            View Order
-          </Button>
-        </Box>
-      </Box>
-    </div>
-  )
-}
-
-export default AddressAndPayment

src/views/pages/cart/cart.js

@@ -1,251 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { Box, Button, colors, Container, IconButton, Tab, Tabs, Typography } from '@mui/material'
-import CheckIcon from '@mui/icons-material/Check'
-// import ShoppingCart from '../../Components/ShoppingCart'
-// import CheckoutDetails from '../../Components/CheckoutDetails'
-// import OrderComplete from '../../Components/OrderComplete'
-import PropTypes from 'prop-types'
-import Checkout from './addressAndPayment'
-import ShopingCart from './shopingCart'
-import OrderComplete from './orderConfirmation'
-import AddressAndPayment from './addressAndPayment'
-import Swal from 'sweetalert2'
-import ReviewOrder from './reviewOrder'
-import OrderConfirmation from './orderConfirmation'
-import { useDispatch, useSelector } from 'react-redux'
-import {
-  clearCart,
-  loadCart,
-  selectCartItemCount,
-  selectCartItems,
-  selectCartSubtotal,
-} from '../../../redux-store/CartStore/ducs'
-
-const TabItem = ({ label, active, complete, onClick, reference, stepNumber }) => (
-  <Box
-    ref={reference}
-    onClick={onClick}
-    sx={{
-      minWidth: '256px',
-      display: 'flex',
-      alignItems: 'center',
-      pb: '1rem',
-      cursor: 'pointer',
-      borderBottom: complete ? '2px solid #45B26B' : active ? '2px solid black' : '',
-    }}
-  >
-    <IconButton
-      sx={{
-        background: complete ? '#45B26B' : active ? '#000' : '#B1B5C3',
-        marginRight: '1rem',
-      }}
-    >
-      {complete ? (
-        <CheckIcon sx={{ color: 'white' }} />
-      ) : (
-        <Typography
-          color={active ? 'white' : complete ? '#45B26B' : '#FCFCFD'}
-          width={30}
-          height={30}
-          borderRadius={'50%'}
-        >
-          {stepNumber}
-        </Typography>
-      )}
-    </IconButton>
-    <Typography
-      sx={{
-        fontFamily: 'inter',
-        fontSize: '1rem',
-        fontWeight: 'bold',
-        color: complete ? '#45B26B' : active ? 'black' : '#B1B5C3',
-      }}
-    >
-      {label}
-    </Typography>
-  </Box>
-)
-
-TabItem.propTypes = {
-  label: PropTypes.string.isRequired,
-  active: PropTypes.bool.isRequired,
-  complete: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired,
-  reference: PropTypes.object.isRequired,
-  stepNumber: PropTypes.number.isRequired,
-}
-const styles = {
-  tab: {
-    backgroundColor: '#FFFFFF',
-    color: 'black',
-    padding: '0px 25px',
-    textAlign: 'center',
-    textTransform: 'none',
-    textDecoration: 'none',
-    minWidth: 50,
-    '&.Mui-selected': {
-      backgroundColor: '#007FFF',
-      border: 'none',
-      color: 'white',
-      textAlign: 'center',
-      textDecoration: 'none',
-    },
-  },
-  tabs: {
-    // maxWidth: 355,
-    borderRadius: 20,
-    maxHeight: 50,
-    '&.MuiTabs-root': {
-      minHeight: 0,
-    },
-  },
-}
-
-const Cart = () => {
-  const [shipTo, setShipTo] = useState('')
-  const [billTo, setBillTo] = useState('')
-  const dispatch = useDispatch()
-  const [paymentMode, setPaymentMode] = useState('')
-  const cartItems = useSelector(selectCartItems)
-  const totalItemCount = useSelector(selectCartItemCount)
-  const cartSubtotal = useSelector(selectCartSubtotal)
-  const [value, setValue] = useState(0)
-  const handleTabChange = (event, newValue) => {
-    console.log(newValue)
-    if (value === 3 && newValue !== 3) {
-      setPaymentMode('')
-      setBillTo('')
-      setShipTo('')
-      dispatch(clearCart())
-    }
-    if (newValue === 1 && cartItems.length === 0) {
-      Swal.fire('Cart is emplty ,can not move to next screen pls add items to cart ')
-      return
-    }
-
-    if (newValue === 2 && (shipTo === '' || billTo === '' || paymentMode === '')) {
-      Swal.fire('Fill all the details ,can not move to next screen ')
-      return
-    }
-    if (newValue === 3 && (shipTo === '' || billTo === '' || paymentMode === '')) {
-      Swal.fire('Fill all the details ,can not move to next screen ')
-      return
-    }
-
-    setValue(newValue)
-  }
-  // const handleAddressAndOrderClick = () => {
-  //   if (cartItems.length === 0) {
-  //     Swal.fire('Cart is emplty can not move to next screen pls add items to cart ')
-  //     return
-  //   }
-  //   setValue(1)
-  // }
-  const [orderId, setOrderId] = useState(null)
-  // const [cartItem, setCartItem] = useState([
-  //   {
-  //     product: {
-  //       _id: '1',
-  //       name: 'Product 1',
-  //       image: [
-  //         {
-  //           url: 'https://images.pexels.com/photos/341523/pexels-photo-341523.jpeg?auto=compress&cs=tinysrgb&w=600',
-  //         },
-  //       ],
-  //       variant: { price: 100, gst_Id: { tax: 5 } },
-  //       hsn: '1234',
-  //     },
-  //     quantity: 2,
-  //     subtotal: 200,
-  //   },
-  //   {
-  //     product: {
-  //       _id: '2',
-  //       name: 'Product 2',
-  //       image: [
-  //         {
-  //           url: 'https://images.pexels.com/photos/341523/pexels-photo-341523.jpeg?auto=compress&cs=tinysrgb&w=600',
-  //         },
-  //       ],
-  //       variant: { price: 150, gst_Id: { tax: 5 } },
-  //       hsn: '5678',
-  //     },
-  //     quantity: 1,
-  //     subtotal: 150,
-  //   },
-  // ])
-
-  return (
-    <Container>
-      <Tabs
-        value={value}
-        indicatorColor="primary"
-        textColor="primary"
-        onChange={handleTabChange}
-        TabIndicatorProps={{
-          style: {
-            backgroundColor: 'white',
-            display: 'none',
-          },
-        }}
-        sx={styles.tabs}
-      >
-        <Tab label="Cart " value={0} sx={styles.tab} />
-        <Tab label="Address and Payment Mode" value={1} sx={styles.tab} />
-        <Tab label="Review Order" value={2} sx={styles.tab} />
-        <Tab label="Order Confirmation" value={3} sx={styles.tab} />
-      </Tabs>
-
-      {value === 0 &&
-        (cartItems.length === 0 ? (
-          <Typography sx={{ m: '2rem ', background: '#FFF', padding: '1rem' }}>
-            No items available. Please add items to the cart.
-          </Typography>
-        ) : (
-          <Box>
-            <ShopingCart cartItems={cartItems} handleTabChange={handleTabChange} />
-          </Box>
-        ))}
-
-      {value === 1 && (
-        <Box>
-          <AddressAndPayment
-            billTo={billTo}
-            setBillTo={setBillTo}
-            shipTo={shipTo}
-            setShipTo={setShipTo}
-            paymentMode={paymentMode}
-            setPaymentMode={setPaymentMode}
-            handleTabChange={handleTabChange}
-          />
-        </Box>
-      )}
-      {value === 2 && (
-        <Box>
-          <ReviewOrder
-            billTo={billTo}
-            shipTo={shipTo}
-            paymentMode={paymentMode}
-            orderId={orderId}
-            setOrderId={setOrderId}
-            cartItem={cartItems}
-            handleTabChange={handleTabChange}
-          />
-        </Box>
-      )}
-      {value === 3 && (
-        <Box>
-          <OrderConfirmation
-            billTo={billTo}
-            shipTo={shipTo}
-            paymentMode={paymentMode}
-            orderId={orderId}
-            cartItem={cartItems}
-          />
-        </Box>
-      )}
-    </Container>
-  )
-}
-
-export default Cart

src/views/pages/cart/orderConfirmation.js

@@ -1,159 +0,0 @@
-import {
-  Box,
-  Container,
-  Grid,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography,
-} from '@mui/material'
-import React, { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { selectCartSubtotal } from '../../../redux-store/CartStore/ducs'
-import { isAutheticated } from '../../../auth'
-import Axios from '../../../axios'
-
-const OrderConfirmation = ({ orderId, billTo, shipTo, paymentMode, cartItem }) => {
-  const subtotal = useSelector(selectCartSubtotal)
-  const [ownerDetails, setOwnerDetails] = useState()
-  const token = isAutheticated()
-  const getData = async () => {
-    let res = await Axios.get(`/api/v1/user/details`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-    if (res.data.success) {
-      setOwnerDetails({ ...res.data.user })
-    }
-  }
-  useEffect(() => {
-    getData()
-  }, [])
-  // Calculate total GST for the entire cart
-  const totalGST = cartItem.reduce((acc, item) => {
-    // console.log(item)
-    const gstAmount = (item.price * item.GST) / 100
-    return acc + gstAmount * item.count
-  }, 0)
-  return (
-    <Box>
-      <Box sx={{ my: '2rem', background: '#fff', padding: '1rem', borderRadius: '0.8rem' }}>
-        <Typography variant="h4" textAlign={'center'} marginBottom={2}>
-          OrderId : {orderId}
-        </Typography>
-
-        <Grid container spacing={2}>
-          <Grid item sm={6} md={6} lg={6}>
-            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-              Bill Address
-            </Typography>
-            <Typography sx={{ mb: '0.5rem' }}>{billTo}</Typography>
-          </Grid>
-          <Grid item sm={6} md={6} lg={6}>
-            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-              Ship Address
-            </Typography>
-            <Typography sx={{ mb: '0.5rem' }}>{shipTo}</Typography>
-          </Grid>
-          <Grid item sm={6} md={6} lg={6}>
-            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-              Payment mode : <strong>{paymentMode}</strong>
-            </Typography>
-          </Grid>
-          <Grid item sm={12} md={12} lg={12}>
-            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-              SBU: <strong>{ownerDetails?.SBU}</strong>
-            </Typography>
-          </Grid>
-        </Grid>
-      </Box>
-
-      <Box my={8}>
-        <Grid container spacing={5}>
-          <Grid item xs={12}>
-            <Box>
-              <TableContainer
-                component={Paper}
-                elevation={0}
-                sx={{ borderBottom: '1.5px solid #CFCFD5', borderRadius: 0 }}
-              >
-                <Table sx={{ minWidth: 650 }} size="large">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Product</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Category</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Brand</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>SKU</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Quantity</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Price</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>GST</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Subtotal</TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {cartItem.map((row, index) => {
-                      const gstAmount = (row.price * row.GST) / 100
-
-                      return (
-                        <TableRow
-                          key={index}
-                          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-                        >
-                          <TableCell>
-                            <Box sx={{ display: 'flex' }}>
-                              {/* <img
-                                src={row.product.image[0].url}
-                                alt={row.product.name}
-                                style={{ width: '100px', height: '70px', marginRight: '1rem' }}
-                              /> */}
-                              <Box>
-                                <Typography fontWeight={600}>{row.name}</Typography>
-                              </Box>
-                            </Box>
-                          </TableCell>
-                          <TableCell>{row.category.categoryName}</TableCell>
-                          <TableCell>{row.brand.brandName}</TableCell>
-                          <TableCell>{row.SKU}</TableCell>
-                          <TableCell>{row.count}</TableCell>
-                          <TableCell>₹{row.price}</TableCell>
-                          <TableCell>₹{gstAmount}</TableCell>
-                          <TableCell>₹{row.price * row.count}</TableCell>
-                        </TableRow>
-                      )
-                    })}
-                    <TableRow>
-                      <TableCell colSpan={7} />
-                      <TableCell>
-                        Subtotal:<strong> ₹ {subtotal}</strong>
-                      </TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell colSpan={7} />
-                      <TableCell>
-                        Total GST:<strong> ₹ {totalGST} </strong>
-                      </TableCell>
-                    </TableRow>
-
-                    <TableRow>
-                      <TableCell colSpan={7} />
-                      <TableCell>
-                        Grand Total: <strong> ₹ {subtotal + totalGST}</strong>
-                      </TableCell>
-                    </TableRow>
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            </Box>
-          </Grid>
-        </Grid>
-      </Box>
-    </Box>
-  )
-}
-
-export default OrderConfirmation

src/views/pages/cart/reviewOrder.js

@@ -1,196 +0,0 @@
-import {
-  Box,
-  Button,
-  Container,
-  Grid,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography,
-} from '@mui/material'
-import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { clearCart, selectCartSubtotal } from '../../../redux-store/CartStore/ducs'
-import Axios from '../../../axios'
-import { isAutheticated } from '../../../auth'
-import Swal from 'sweetalert2'
-
-const ReviewOrder = ({
-  orderId,
-  billTo,
-  shipTo,
-  paymentMode,
-  cartItem,
-
-  handleTabChange,
-  setOrderId,
-}) => {
-  const subtotal = useSelector(selectCartSubtotal)
-  const token = isAutheticated()
-  const dispatch = useDispatch()
-
-  // Calculate total GST for the entire cart
-  const totalGST = cartItem.reduce((acc, item) => {
-    // console.log(item)
-    const gstAmount = (item.price * item.GST) / 100
-    return acc + gstAmount * item.count
-  }, 0)
-
-  const handleConfirmOrder = async (e) => {
-    e.preventDefault()
-    if (!billTo || !shipTo || !paymentMode || !cartItem || !subtotal || !totalGST) {
-      Swal.fire('All fields are required ')
-    }
-    try {
-      const res = await Axios.post(
-        '/api/order-place',
-        {
-          billTo,
-          shipTo,
-          paymentMode,
-          grandTotal: subtotal + totalGST,
-          gstTotal: totalGST,
-          subtotal: subtotal,
-          orderItems: cartItem,
-        },
-        {
-          headers: {
-            'Access-Control-Allow-Origin': '*',
-            Authorization: `Bearer ${token}`,
-            'Content-Type': 'application/json',
-          },
-        },
-      )
-      console.log(res)
-      if (res.status === 201) {
-        setOrderId(res?.data?.placedOrder?.uniqueId)
-
-        console.log(res)
-        Swal.fire('Success!', 'Your order has been placed successfully.', 'success')
-        handleTabChange(e, 3)
-      }
-    } catch (error) {
-      Swal.fire('Something went wrong', error.message, 'error')
-    }
-  }
-  console.log('cartitems', cartItem)
-  return (
-    <Box>
-      <Box sx={{ my: '2rem', background: '#fff', padding: '1rem', borderRadius: '0.8rem' }}>
-        <Grid container spacing={2}>
-          <Grid item sm={6} md={6} lg={6}>
-            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-              Bill Address
-            </Typography>
-            <Typography sx={{ mb: '0.5rem' }}>{billTo}</Typography>
-          </Grid>
-          <Grid item sm={6} md={6} lg={6}>
-            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-              Ship Address
-            </Typography>
-            <Typography sx={{ mb: '0.5rem' }}>{shipTo}</Typography>
-          </Grid>
-          <Grid item sm={6} md={6} lg={6}>
-            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
-              Payment mode : <strong>{paymentMode}</strong>
-            </Typography>
-          </Grid>
-        </Grid>
-      </Box>
-
-      <Box my={4}>
-        <Grid container spacing={5}>
-          <Grid item xs={12}>
-            <Box>
-              <TableContainer
-                component={Paper}
-                elevation={0}
-                sx={{ borderBottom: '1.5px solid #CFCFD5', borderRadius: 0 }}
-              >
-                <Table sx={{ minWidth: 650 }} size="large">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Product</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Category</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Brand</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>SKU</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Quantity</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Price</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>GST</TableCell>
-                      <TableCell sx={{ fontWeight: 'bold' }}>Subtotal</TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {cartItem.map((row, index) => {
-                      const gstAmount = (row.price * row.GST) / 100
-
-                      return (
-                        <TableRow
-                          key={index}
-                          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-                        >
-                          <TableCell>
-                            <Box sx={{ display: 'flex' }}>
-                              {/* <img
-                                src={row.product.image[0].url}
-                                alt={row.product.name}
-                                style={{ width: '100px', height: '70px', marginRight: '1rem' }}
-                              /> */}
-                              <Box>
-                                <Typography fontWeight={600}>{row.name}</Typography>
-                              </Box>
-                            </Box>
-                          </TableCell>
-                          <TableCell>{row.category.categoryName}</TableCell>
-                          <TableCell>{row.brand.brandName}</TableCell>
-                          <TableCell>{row.SKU}</TableCell>
-                          <TableCell>{row.count}</TableCell>
-                          <TableCell>₹{row.price}</TableCell>
-                          <TableCell>₹{gstAmount}</TableCell>
-                          <TableCell>₹{row.price * row.count}</TableCell>
-                        </TableRow>
-                      )
-                    })}
-                    <TableRow>
-                      <TableCell colSpan={7} />
-                      <TableCell>
-                        Subtotal:<strong> ₹ {subtotal}</strong>
-                      </TableCell>
-                    </TableRow>
-                    <TableRow>
-                      <TableCell colSpan={7} />
-                      <TableCell>
-                        Total GST:<strong> ₹ {totalGST} </strong>
-                      </TableCell>
-                    </TableRow>
-
-                    <TableRow>
-                      <TableCell colSpan={7} />
-                      <TableCell>
-                        Grand Total: <strong> ₹ {subtotal + totalGST}</strong>
-                      </TableCell>
-                    </TableRow>
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            </Box>
-          </Grid>
-        </Grid>
-        <Box display={'flex'} justifyContent={'center'} mt={4} gap={10}>
-          <Button variant="contained" color="primary" onClick={(e) => handleTabChange(e, 0)}>
-            Update Order
-          </Button>
-          <Button variant="contained" color="success" onClick={handleConfirmOrder}>
-            Confirm Order
-          </Button>
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-export default ReviewOrder

src/views/pages/cart/shopingCart.js

@@ -1,191 +0,0 @@
-import React from 'react'
-import {
-  Box,
-  Container,
-  Grid,
-  Paper,
-  Typography,
-  Button,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  useMediaQuery,
-} from '@mui/material'
-import ClearIcon from '@mui/icons-material/Clear'
-import { useDispatch, useSelector } from 'react-redux'
-import {
-  selectCartItems,
-  selectCartSubtotal,
-  increaseCount,
-  decreaseCount,
-  removeFromCart,
-  selectCartItemCount,
-} from '../../../redux-store/CartStore/ducs' // Adjust this path as per your project structure
-
-const ShoppingCart = ({ handleTabChange }) => {
-  const matches = useMediaQuery('(min-width:1200px)')
-  const dispatch = useDispatch()
-
-  // Fetching cart items and subtotal from the Redux store
-  const cartItems = useSelector(selectCartItems)
-  const subtotal = useSelector(selectCartSubtotal)
-  console.log(cartItems)
-  // Calculate total GST for the entire cart
-  const totalGST = cartItems.reduce((acc, item) => {
-    // console.log(item)
-    const gstAmount = (item.price * item.GST) / 100
-    return acc + gstAmount * item.count
-  }, 0)
-
-  const handleDecrease = (productId) => {
-    dispatch(decreaseCount(productId))
-  }
-
-  const handleIncrease = (productId) => {
-    dispatch(increaseCount(productId))
-  }
-
-  const removeCartItemHandler = (productId) => {
-    dispatch(removeFromCart(productId))
-  }
-
-  return (
-    <Box>
-      <Container>
-        <Box my={8}>
-          <Grid container spacing={5}>
-            <Grid item xs={12}>
-              <Box>
-                <TableContainer
-                  component={Paper}
-                  elevation={0}
-                  sx={{ borderBottom: '1.5px solid #CFCFD5', borderRadius: 0 }}
-                >
-                  <Table sx={{ minWidth: 650 }} size="large">
-                    <TableHead>
-                      <TableRow>
-                        <TableCell sx={{ fontWeight: 'bold' }}>Product</TableCell>
-                        <TableCell sx={{ fontWeight: 'bold' }}>SKU</TableCell>
-                        <TableCell sx={{ fontWeight: 'bold' }}>Quantity</TableCell>
-                        <TableCell sx={{ fontWeight: 'bold' }}>Price</TableCell>
-                        <TableCell sx={{ fontWeight: 'bold' }}>GST</TableCell>
-                        <TableCell sx={{ fontWeight: 'bold' }}>Subtotal</TableCell>
-                      </TableRow>
-                    </TableHead>
-                    <TableBody>
-                      {cartItems.map((row, index) => {
-                        const gstAmount = (row.price * row.GST) / 100
-
-                        return (
-                          <TableRow
-                            key={index}
-                            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-                          >
-                            <TableCell>
-                              <Box sx={{ display: 'flex' }}>
-                                {/* <img
-                                  src={row.product.image[0].url}
-                                  alt={row.product.name}
-                                  style={{ width: '100px', height: '70px', marginRight: '1rem' }}
-                                /> */}
-                                <Box>
-                                  <Typography fontWeight={600}>{row.name}</Typography>
-                                  <Box
-                                    onClick={() => removeCartItemHandler(row._id)}
-                                    sx={{
-                                      display: 'flex',
-                                      alignItems: 'center',
-                                      cursor: 'pointer',
-                                      color: '#6C7275',
-                                      marginTop: '0.5rem',
-                                    }}
-                                  >
-                                    <ClearIcon fontSize="small" />
-                                    <Typography>Remove</Typography>
-                                  </Box>
-                                </Box>
-                              </Box>
-                            </TableCell>
-                            <TableCell>{row.SKU}</TableCell>
-                            <TableCell>
-                              <Box
-                                sx={{
-                                  display: 'flex',
-                                  alignItems: 'center',
-                                  border: '1px solid #6C7275',
-                                  borderRadius: '4px',
-                                  width: '80px',
-                                  justifyContent: 'space-between',
-                                }}
-                              >
-                                <Typography
-                                  onClick={() => handleDecrease(row._id)}
-                                  sx={{ cursor: 'pointer', padding: '0.5rem' }}
-                                >
-                                  -
-                                </Typography>
-                                <Typography>{row.count}</Typography>
-                                <Typography
-                                  onClick={() => handleIncrease(row._id)}
-                                  sx={{ cursor: 'pointer', padding: '0.5rem' }}
-                                >
-                                  +
-                                </Typography>
-                              </Box>
-                            </TableCell>
-                            <TableCell>₹{row.price}</TableCell>
-                            <TableCell>₹{gstAmount}</TableCell>
-                            <TableCell>₹{row.price * row.count}</TableCell>
-                          </TableRow>
-                        )
-                      })}
-                      <TableRow>
-                        <TableCell colSpan={5} />
-                        <TableCell>
-                          Subtotal:<strong> ₹ {subtotal}</strong>
-                        </TableCell>
-                      </TableRow>
-                      <TableRow>
-                        <TableCell colSpan={5} />
-                        <TableCell>
-                          Total GST:<strong> ₹ {totalGST} </strong>
-                        </TableCell>
-                      </TableRow>
-
-                      <TableRow>
-                        <TableCell colSpan={5} />
-
-                        <TableCell>
-                          Grand total: <strong> ₹ {subtotal + totalGST}</strong>
-                        </TableCell>
-                      </TableRow>
-                    </TableBody>
-                  </Table>
-                </TableContainer>
-              </Box>
-            </Grid>
-          </Grid>
-        </Box>
-      </Container>
-
-      <Box sx={{ display: 'flex', justifyContent: 'center', my: 4 }}>
-        <Button
-          variant="contained"
-          size="large"
-          color="primary"
-          onClick={(e) => handleTabChange(e, 1)}
-          sx={{
-            width: '200px',
-          }}
-        >
-          Address and payment mode
-        </Button>
-      </Box>
-    </Box>
-  )
-}
-
-export default ShoppingCart

src/views/pages/login/Login.js

@@ -19,13 +19,10 @@ import { cilLockLocked, cilUser } from '@coreui/icons'
 // import axios from 'axios'
 import Axios from '../../../axios'
 import Swal from 'sweetalert2'
-import { clearCart } from '../../../redux-store/CartStore/ducs'
-import { useDispatch } from 'react-redux'
 
 const Login = () => {
   const [loading, setLoading] = useState(false)
   const [validForm, setValidForm] = useState(false)
-  const dispatch = useDispatch()
   const navigate = useNavigate()
   const [auth, setAuth] = useState({
     email: '',
@@ -98,26 +95,27 @@ const Login = () => {
     if (!(auth.email && auth.password)) {
       return Swal.fire('Error!', 'All fields are required', 'error')
     }
-    setLoading(true)
+    setLoading({ loading: true })
     try {
       const res = await Axios.post('/api/v1/user/login/', auth)
       console.log(res)
-      if (res.data.success === true && res.data.user.role === 'principal-Distributor') {
+      if (res.data.success == true && res.data.user.role === 'principal-Distributor') {
         localStorage.setItem('authToken', res.data.token)
-        dispatch(clearCart())
         navigate('/dashboard')
         setLoading(false)
-        Swal.fire('success', 'logged in successfully ', 'success')
+        Swal.fire('success', 'logged in successfuly ', 'success')
-      } else if (res.data.success === true && res.data.user.role !== 'principal-Distributor') {
+
+        // console.log(response.data)
+      } else if (res.data.success == true && res.data.user.role !== 'principal-Distributor') {
         setLoading(false)
         Swal.fire('error', 'Please login through the PD Credentials ', 'error')
       }
     } catch (error) {
       setLoading(false)
+
       Swal.fire('Error!', 'Invalid Credentials', 'error')
     }
   }
-
   return (
     <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
       <CContainer>

src/views/pages/productManual/productManual.js

@@ -1,117 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react'
-import Axios from '../../../axios'
-import { isAutheticated } from '../../../auth'
-import {
-  Box,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Paper,
-  Button,
-  TextField,
-  CircularProgress,
-  Pagination,
-} from '@mui/material'
-import { Link } from 'react-router-dom'
-
-const ProductManual = () => {
-  const [loading, setLoading] = useState(true)
-  const token = isAutheticated()
-  const [productManuals, setProductManuals] = useState([])
-  const [currentPage, setCurrentPage] = useState(1)
-  const [itemsPerPage, setItemsPerPage] = useState(10)
-  const [totalData, setTotalData] = useState(0)
-  const titleRef = useRef('')
-
-  const getProductManuals = async () => {
-    try {
-      setLoading(true)
-      const response = await Axios.get(`/api/productmanual/getall`, {
-        headers: { Authorization: `Bearer ${token}` },
-        params: {
-          page: currentPage,
-          show: itemsPerPage,
-          title: titleRef.current.value || '',
-        },
-      })
-      if (response.status === 200) {
-        const { productManuals, total } = response.data
-        setProductManuals(productManuals)
-        setTotalData(total)
-      }
-    } catch (error) {
-      console.error('Failed to fetch product manuals:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    getProductManuals()
-  }, [currentPage, itemsPerPage])
-
-  const handleFilterChange = () => {
-    setCurrentPage(1)
-    getProductManuals()
-  }
-
-  const handlePageChange = (event, page) => {
-    setCurrentPage(page)
-  }
-
-  return (
-    <Box sx={{ padding: 2 }}>
-      {/* Filter Text Field */}
-
-      {/* Table and Pagination */}
-      {loading ? (
-        <CircularProgress />
-      ) : (
-        <>
-          <TableContainer component={Paper}>
-            <Table>
-              <TableHead>
-                <TableRow>
-                  <TableCell sx={{ fontWeight: 'bold' }}>Name</TableCell>
-                  <TableCell sx={{ fontWeight: 'bold' }}>Action</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {productManuals.map((manual) => (
-                  <TableRow key={manual._id}>
-                    <TableCell>{manual.title}</TableCell>
-                    <TableCell>
-                      <Button
-                        variant="contained"
-                        color="primary"
-                        component={Link}
-                        to={`/product-manual/${manual._id}`}
-                      >
-                        View
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-
-          {/* Pagination */}
-          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
-            <Pagination
-              count={Math.ceil(totalData / itemsPerPage)}
-              page={currentPage}
-              onChange={handlePageChange}
-              color="primary"
-            />
-          </Box>
-        </>
-      )}
-    </Box>
-  )
-}
-
-export default ProductManual

src/views/pages/productManual/viewProductManual.js

@@ -1,107 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import Button from '@mui/material/Button' // Updated import for MUI v5
-import { Link, useParams } from 'react-router-dom'
-import Swal from 'sweetalert2' // Import SweetAlert2
-import axios from 'axios'
-
-import Axios from '../../../axios'
-import { isAutheticated } from '../../../auth'
-
-const ViewProductManual = () => {
-  const [title, setTitle] = useState('')
-  const [image, setImage] = useState('')
-  const token = isAutheticated()
-  const { id } = useParams()
-
-  const getproductmanual = async () => {
-    try {
-      const res = await Axios.get(`/api/productmanual/getone/${id}`, {
-        headers: { Authorization: `Bearer ${token}` },
-      })
-      setTitle(res?.data?.productManual?.title)
-      setImage(res?.data?.productManual?.product_manual)
-    } catch (err) {
-      console.error(err)
-      // SweetAlert2 configuration
-      Swal.fire({
-        title: 'Error',
-        text: 'Unable to fetch the product manual',
-        icon: 'error',
-        confirmButtonText: 'Retry',
-        showCancelButton: true,
-        confirmButtonColor: '#d33',
-        cancelButtonColor: '#3085d6',
-        cancelButtonText: 'Cancel',
-      })
-    }
-  }
-
-  useEffect(() => {
-    getproductmanual()
-  }, [])
-
-  return (
-    <div className="container">
-      <div className="row">
-        <div className="col-12">
-          <div className="page-title-box d-flex align-items-center justify-content-between">
-            <div style={{ fontSize: '22px' }} className="fw-bold">
-              View Product Manual
-            </div>
-            <div style={{ display: 'flex', gap: '1rem' }}>
-              <h4 className="mb-0"></h4>
-            </div>
-            <div className="page-title-right">
-              <Link to="/product-manual">
-                <Button
-                  variant="contained"
-                  color="secondary"
-                  sx={{
-                    fontWeight: 'bold',
-                    mb: 1,
-                    textTransform: 'capitalize',
-                  }}
-                >
-                  Back
-                </Button>
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="row">
-        <div className="col-lg-12 col-md-12 col-sm-12 my-1">
-          <div className="card h-100">
-            <div className="card-body px-5">
-              <h4
-                className="card-title"
-                style={{
-                  fontWeight: 'bold',
-                  fontSize: '3rem',
-                  marginBottom: '1rem',
-                  textTransform: 'capitalize',
-                }}
-              >
-                {title}
-              </h4>
-              <div className="mb-3">
-                {image &&
-                  (image.url.endsWith('.pdf') ? (
-                    <iframe
-                      src={image.url}
-                      title="Product Manual"
-                      style={{ width: '100%', height: '80vh', border: 'none' }}
-                    />
-                  ) : (
-                    <img src={image.url} alt="blog" style={{ width: '100%', height: '50vh' }} />
-                  ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ViewProductManual

src/views/shops/Shop.js

@@ -1,138 +1,59 @@
-import { useEffect, useRef, useState } from 'react'
-import { useDispatch } from 'react-redux'
-import Swal from 'sweetalert2'
-import Axios from '../../axios'
-
 import {
   Box,
+  Card,
   CircularProgress,
   Container,
   FormControl,
   Grid,
   MenuItem,
-  Pagination,
   Select,
   Typography,
 } from '@mui/material'
+import cardData from '../../assets/data/cardjson.json'
+import React, { useState } from 'react'
 import ShopCard from './shopCard'
 
 const Shop = () => {
   const [option, setOption] = useState('all')
-  const [products, setProducts] = useState([])
-  const [categories, setCategories] = useState([])
-  const [loading, setLoading] = useState(true)
-  const [currentPage, setCurrentPage] = useState(1)
-  const [totalData, setTotalData] = useState(0)
-  const itemsPerPage = 10 // Adjust this according to your requirements
-
-  const nameRef = useRef('')
-  const categoryRef = useRef('')
-
-  const dispatch = useDispatch()
 
   const handleChange = (event) => {
-    const selectedValue = event.target.value
+    setOption(event.target.value)
-    setOption(selectedValue)
-    categoryRef.current = selectedValue === 'all' ? '' : selectedValue // Set to an empty string if "All" is selected
-    setCurrentPage(1) // Reset to first page when filter changes
   }
 
-  const getCategories = async () => {
+  const filteredData =
-    try {
+    option === 'all' ? cardData : cardData.filter((item) => item.categoryName === option)
-      const response = await Axios.get('/api/category/getCategories')
-      setCategories(response.data?.categories || []) // Assuming the response has a categories property
-    } catch (err) {
-      Swal.fire({
-        title: 'Error',
-        text: 'Failed to fetch categories',
-        icon: 'error',
-        button: 'Retry',
-        dangerMode: true,
-      })
-    }
-  }
-
-  const getProductsData = async () => {
-    setLoading(true)
-    try {
-      const response = await Axios.get('/api/product/getAll/user/', {
-        params: {
-          page: currentPage,
-          show: itemsPerPage,
-          name: nameRef.current || '',
-          category: categoryRef.current || '', // Send category only if it's not empty
-        },
-      })
-      setProducts(response.data?.products || [])
-      setTotalData(response.data?.total_data || 0)
-    } catch (err) {
-      const msg = err?.response?.data?.msg || 'Something went wrong!'
-      Swal.fire({
-        title: 'Error',
-        text: msg,
-        icon: 'error',
-        button: 'Retry',
-        dangerMode: true,
-      })
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    getCategories() // Fetch categories on component mount
-    getProductsData()
-  }, [currentPage, option])
-
-  const handlePageChange = (event, value) => {
-    setCurrentPage(value)
-  }
 
   return (
-    <Container>
+    <>
-      <Typography sx={{ fontWeight: 'bold' }} variant="h4">
+      <Container>
-        Categories
+        <Typography sx={{ fontWeight: 'bold' }} variant="h4">
-      </Typography>
+          Categories
-      <FormControl sx={{ width: '400px', mt: '1rem' }}>
+        </Typography>
         <Select
-          labelId="category-select-label"
+          sx={{ width: '400px', mt: '1rem' }}
-          id="category-select"
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
           value={option}
+          label=""
           onChange={handleChange}
         >
           <MenuItem value="all">All</MenuItem>
-          {categories.map((category) => (
+          <MenuItem value="camera">Camera</MenuItem>
-            <MenuItem key={category._id} value={category.categoryName}>
+          <MenuItem value="phone">Phone</MenuItem>
-              {category.categoryName}
-            </MenuItem>
-          ))}
         </Select>
-      </FormControl>
 
-      <Box mt={3}>
+        <Box mt={3}>
-        {loading ? (
+          {/* Cards */}
-          <CircularProgress />
+          <Grid container spacing={2}>
-        ) : (
+            {filteredData.map((item, i) => (
-          <>
+              <Grid key={i} item xs={12} sm={6} md={4} lg={4}>
-            <Grid container spacing={2}>
+                <ShopCard item={item} />
-              {products.map((item, i) => (
+              </Grid>
-                <Grid key={i} item xs={12} sm={6} md={4} lg={4}>
+            ))}
-                  <ShopCard item={item} />
+          </Grid>
-                </Grid>
+        </Box>
-              ))}
+      </Container>
-            </Grid>
+    </>
-            <Box mt={3} display="flex" justifyContent="center">
-              <Pagination
-                count={Math.ceil(totalData / itemsPerPage)}
-                page={currentPage}
-                onChange={handlePageChange}
-                color="primary"
-              />
-            </Box>
-          </>
-        )}
-      </Box>
-    </Container>
   )
 }
 

src/views/shops/shopCard.js

@@ -1,21 +1,9 @@
 /* eslint-disable react/prop-types */
 import { Button, Card, CardContent, CardMedia, Typography } from '@mui/material'
 import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { addToCart, selectIsProductInCart } from '../../redux-store/CartStore/ducs'
-import Swal from 'sweetalert2'
 
 // eslint-disable-next-line react/prop-types
 const ShopCard = ({ item }) => {
-  const dispatch = useDispatch()
-  const isProductInCart = useSelector(selectIsProductInCart(item._id))
-
-  const handleAddToCart = () => {
-    if (!isProductInCart) {
-      dispatch(addToCart(item))
-      Swal.fire('Product added to cart ')
-    }
-  }
   return (
     <div>
       <Card>
@@ -31,11 +19,10 @@ const ShopCard = ({ item }) => {
             variant="contained"
             color="primary"
             fullWidth
-            disabled={isProductInCart}
+            // onClick={handleAddToCart}
-            onClick={handleAddToCart}
             sx={{ marginTop: '10px' }}
           >
-            {isProductInCart ? 'Already in Cart' : 'Add to Cart'}
+            Add to Cart
           </Button>
         </CardContent>
       </Card>