updated dashboard and the changes are done in dates formate

src/_nav.js

@@ -8,6 +8,7 @@ import {
   cilCursor,
   cilDescription,
   cilDrop,
+  cilFile,
   cilNotes,
   cilPaperPlane,
   cilPencil,
@@ -43,6 +44,12 @@ const _nav = [
     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,

src/routes.js

@@ -3,6 +3,8 @@ 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'))
@@ -18,9 +20,13 @@ const routes = [
   { path: '/shop', name: 'Shop', element: Shop },
   { path: '/orders-placed', name: 'Order', element: Order },
   { path: '/orders-placed/:id', name: 'Order', element: OrderDetails },
+
   // 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 },

src/views/dashboard/Dashboard.js

@@ -1,10 +1,80 @@
-import React from 'react'
-
+import { Box, Typography, Card, CardContent, Grid } from '@mui/material'
+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 (
-    <>
-      <div>Dashboard</div>
-    </>
+    <Box sx={{ flexGrow: 1, padding: 2 }}>
+      <Typography textAlign="center" variant="h3" gutterBottom>
+        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

@@ -37,6 +37,11 @@ const Order = () => {
     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 () => {
@@ -81,13 +86,13 @@ const Order = () => {
       <TableContainer component={Paper}>
         <Table>
           <TableHead>
-            <TableRow>
-              <TableCell>Order ID</TableCell>
-              <TableCell>Order Date</TableCell>
-              <TableCell>Items</TableCell>
-              <TableCell>Order Value</TableCell>
-              <TableCell>Status</TableCell>
-              <TableCell>Action</TableCell>
+            <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>
@@ -104,12 +109,18 @@ const Order = () => {
                 <TableRow key={order._id}>
                   <TableCell>{order.uniqueId}</TableCell>
                   <TableCell>
-                    {new Date(`${order?.createdAt}`).toDateString()}
-                    <span> , {`${formatAMPM(order?.createdAt)}`}</span>
+                    {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>{order.status}</TableCell>
+                  <TableCell>{capitalizeFirstLetter(order.status)}</TableCell>
                   <TableCell>
                     <Button
                       variant="contained"

src/views/orders/OrderDetails.js

@@ -135,14 +135,14 @@ const OrderDetails = () => {
                 <Table sx={{ minWidth: 650 }} size="large">
                   <TableHead>
                     <TableRow>
-                      <TableCell>Product</TableCell>
-                      <TableCell>Category</TableCell>
-                      <TableCell>Brand</TableCell>
-                      <TableCell>SKU</TableCell>
-                      <TableCell>Quantity</TableCell>
-                      <TableCell>Price</TableCell>
-                      <TableCell>GST</TableCell>
-                      <TableCell>Subtotal</TableCell>
+                      <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>

src/views/pages/Kyc/MessageList.js

@@ -12,6 +12,11 @@ const MessageList = ({ messages }) => {
     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) => (
@@ -27,7 +32,8 @@ const MessageList = ({ messages }) => {
         >
           <div style={{ fontWeight: 'bold', marginBottom: '5px', color: 'white' }}>{msg.user}</div>
           <div style={{ fontWeight: 'bold', marginBottom: '5px', color: 'white' }}>
-            {new Date(`${msg.replyDate}`).toDateString()}
+            {/* {new Date(`${msg.replyDate}`).toDateString()} */}
+            {`${formatDateWithoutComma(msg?.replyDate)}`}
             <span> , {`${formatAMPM(msg?.replyDate)}`}</span>
           </div>
           <div style={{ color: 'white' }}>{msg.message}</div>

src/views/pages/Kyc/kyc.js

@@ -142,6 +142,7 @@ const Kyc = () => {
         {
           status: 'reject',
           rejectionReason,
+          user: 'Principal Distributer',
         },
         {
           headers: {
@@ -174,7 +175,16 @@ const Kyc = () => {
     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 }}>
@@ -187,11 +197,11 @@ const Kyc = () => {
           <Table>
             <TableHead>
               <TableRow>
-                <TableCell>ID</TableCell>
-                <TableCell>Trade Name</TableCell>
-                <TableCell>Created On</TableCell>
-                <TableCell>Status</TableCell>
-                <TableCell>Action</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>ID</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>Trade Name</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>Created On</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>Status</TableCell>
+                <TableCell sx={{ fontWeight: 'bold' }}>Action</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
@@ -203,10 +213,10 @@ const Kyc = () => {
                       <TableCell>{row._id}</TableCell>
                       <TableCell>{row.trade_name}</TableCell>
                       <TableCell>
-                        {new Date(`${row?.createdAt}`).toDateString()}
-                        <span> , {`${formatAMPM(row?.createdAt)}`}</span>
+                        {`${formatDateWithoutComma(row?.createdAt)}`}
+                        <span>, {`${formatAMPM(row?.createdAt)}`}</span>
                       </TableCell>
-                      <TableCell>{row.status}</TableCell>
+                      <TableCell>{capitalizeStatus(row.status)}</TableCell>
                       <TableCell>
                         <Tooltip title="View">
                           <Button

src/views/pages/Kyc/kycDetails.js

@@ -87,6 +87,11 @@ const KycDetails = () => {
   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 {
@@ -317,12 +322,14 @@ const KycDetails = () => {
           <Grid item xs={6}>
             <Typography>
               <strong>Uploaded on:</strong>{' '}
-              {new Date(`${retailerDetails?.createdAt}`).toDateString()}
+              {/* {new Date(`${retailerDetails?.createdAt}`).toDateString()} */}
+              {`${formatDateWithoutComma(retailerDetails?.createdAt)}`}
               <span> , {`${formatAMPM(retailerDetails?.createdAt)}`}</span>
             </Typography>
             <Typography>
               <strong>Resubmitted on:</strong>{' '}
-              {new Date(`${retailerDetails?.updatedAt}`).toDateString()}
+              {/* {new Date(`${retailerDetails?.updatedAt}`).toDateString()} */}
+              {`${formatDateWithoutComma(retailerDetails?.updatedAt)}`}
               <span> , {`${formatAMPM(retailerDetails?.createdAt)}`}</span>
             </Typography>
           </Grid>

src/views/pages/cart/orderConfirmation.js

@@ -85,14 +85,14 @@ const OrderConfirmation = ({ orderId, billTo, shipTo, paymentMode, cartItem }) =
                 <Table sx={{ minWidth: 650 }} size="large">
                   <TableHead>
                     <TableRow>
-                      <TableCell>Product</TableCell>
-                      <TableCell>Category</TableCell>
-                      <TableCell>Brand</TableCell>
-                      <TableCell>SKU</TableCell>
-                      <TableCell>Quantity</TableCell>
-                      <TableCell>Price</TableCell>
-                      <TableCell>GST</TableCell>
-                      <TableCell>Subtotal</TableCell>
+                      <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>

src/views/pages/cart/reviewOrder.js

@@ -114,14 +114,14 @@ const ReviewOrder = ({
                 <Table sx={{ minWidth: 650 }} size="large">
                   <TableHead>
                     <TableRow>
-                      <TableCell>Product</TableCell>
-                      <TableCell>Category</TableCell>
-                      <TableCell>Brand </TableCell>
-                      <TableCell>SKU</TableCell>
-                      <TableCell>Quantity</TableCell>
-                      <TableCell>Price</TableCell>
-                      <TableCell>GST</TableCell>
-                      <TableCell>Subtotal</TableCell>
+                      <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>

src/views/pages/cart/shopingCart.js

@@ -67,12 +67,12 @@ const ShoppingCart = ({ handleTabChange }) => {
                   <Table sx={{ minWidth: 650 }} size="large">
                     <TableHead>
                       <TableRow>
-                        <TableCell>Product</TableCell>
-                        <TableCell>SKU</TableCell>
-                        <TableCell>Quantity</TableCell>
-                        <TableCell>Price</TableCell>
-                        <TableCell>GST</TableCell>
-                        <TableCell>Subtotal</TableCell>
+                        <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>

src/views/pages/productManual/productManual.js

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,107 @@
+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