gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

blogs,salescoordinator,settings and product managment fixed

Browse Source
This commit is contained in:
Sibunnayak 2024-07-12 15:48:02 +05:30
parent 24ffc61fa0
commit 67928e0cb7
43 changed files with 1175 additions and 10889 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -44,7 +44,7 @@
"@mui/material": "^5.11.12",
"@reduxjs/toolkit": "^1.9.2",
"axios": "^0.25.0",
"bootstrap": "^5.1.3",
"bootstrap": "^5.3.3",
"chart.js": "^4.4.2",
"country-state-city": "^3.2.1",
"draft-js": "^0.11.7",
@ -56,7 +56,7 @@
"prop-types": "^15.7.2",
"quill": "^1.3.7",
"react": "18.0.0",
"react-bootstrap": "^2.7.0",
"react-bootstrap": "^2.10.4",
"react-chartjs-2": "^5.2.0",
"react-datepicker": "^4.25.0",
"react-dom": "^18.0.0",

290
src/_nav.js
View File

@ -46,58 +46,6 @@ const _nav = [
group: "Customers",
},
// {
// component: CNavGroup,
// name: "Charts",
// icon: <CIcon icon={cilCat} customClassName="nav-icon" />,
// group: "",
// items: [
// {
// component: CNavItem,
// name: "new user day wise",
// icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
// to: "/new-user-day-wise",
// group: "Charts",
// },
// {
// component: CNavItem,
// name: "Revenue By Product",
// icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
// to: "/revenue-by-product",
// group: "Charts",
// },
// {
// component: CNavItem,
// name: "Revenue By State",
// icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
// to: "/revenue-by-state",
// group: "Charts",
// },
// {
// component: CNavItem,
// name: "Revenue By City",
// icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
// to: "/revenue-by-city",
// group: "Charts",
// },
// {
// component: CNavItem,
// name: "Orders (Day Wise)",
// icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
// to: "/orders-day-wise",
// group: "Charts",
// },
// {
// component: CNavItem,
// name: "Revenue (Day Wise)",
// icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
// to: "/revenue-day-wise",
// group: "Charts",
// },
// ],
// },
{
component: CNavGroup,
name: "Product Management",
@ -121,84 +69,84 @@ const _nav = [
},
{
component: CNavItem,
name: "VAT",
name: "GST",
icon: <CIcon icon={cilTablet} customClassName="nav-icon" />,
to: "/vat",
to: "/tax",
group: "Product Management",
},
],
},
{
component: CNavItem,
name: "Patients",
name: "SalesCoOrdinator",
icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
to: "/patients",
group: "Patients",
to: "/salescoordinators",
group: "SalesCoOrdinator",
},
// {
// component: CNavGroup,
// name: "Orders",
// icon: <CIcon icon={cilCart} customClassName="nav-icon" />,
// group: "",
{
component: CNavGroup,
name: "Orders",
icon: <CIcon icon={cilCart} customClassName="nav-icon" />,
group: "",
// items: [
// {
// component: CNavItem,
// name: "New",
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// to: "/orders/new",
// group: "Orders",
// },
// // {
// // component: CNavItem,
// // name: "Paid",
// // icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// // to: "/orders/returned",
// // },
// {
// component: CNavItem,
// name: "Processing",
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// to: "/orders/processing",
// group: "Orders",
// },
// {
// component: CNavItem,
// name: "Dispatched",
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// to: "/orders/dispatched",
// group: "Orders",
// },
// {
// component: CNavItem,
// name: "Delivered",
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// to: "/orders/delivered",
// group: "Orders",
// },
// {
// component: CNavItem,
// name: "Cancelled",
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// to: "/orders/cancelled",
// group: "Orders",
// },
// {
// component: CNavItem,
// name: "In Store Cash Orders",
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// to: "/inStoreCashOrders/new",
// group: "Orders",
// },
// {
// component: CNavItem,
// name: "In Store QRCode Orders",
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// to: "/InStoreQRCodeOrders/new",
// group: "Orders",
// },
// ],
// },
items: [
{
component: CNavItem,
name: "New",
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/orders/new",
group: "Orders",
},
// {
// component: CNavItem,
// name: "Paid",
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// to: "/orders/returned",
// },
{
component: CNavItem,
name: "Processing",
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/orders/processing",
group: "Orders",
},
{
component: CNavItem,
name: "Dispatched",
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/orders/dispatched",
group: "Orders",
},
{
component: CNavItem,
name: "Delivered",
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/orders/delivered",
group: "Orders",
},
{
component: CNavItem,
name: "Cancelled",
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/orders/cancelled",
group: "Orders",
},
{
component: CNavItem,
name: "In Store Cash Orders",
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/inStoreCashOrders/new",
group: "Orders",
},
{
component: CNavItem,
name: "In Store QRCode Orders",
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/InStoreQRCodeOrders/new",
group: "Orders",
},
],
},
{
component: CNavGroup,
name: "Settings",
@ -206,41 +154,6 @@ const _nav = [
group: "",
items: [
{
component: CNavItem,
name: "Banner",
icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
to: "/banner",
group: "Settings",
},
// {
// component: CNavItem,
// name: "Register Image",
// icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
// to: "/registerImage",
// group: "Settings",
// },
// {
// component: CNavItem,
// name: "Login Image",
// icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
// to: "/loginImage",
// group: "Settings",
// },
// {
// component: CNavItem,
// name: "Shop Page Image",
// icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
// to: "/shopImage",
// group: "Settings",
// },
{
component: CNavItem,
name: "Web Images",
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/web_images",
group: "Settings",
},
// {
// component: CNavItem,
// name: "Testimonials",
@ -248,13 +161,6 @@ const _nav = [
// to: "/testimonials",
// group: "Website Related",
// },
// {
// component: CNavItem,
// name: "Contact Requests",
// icon: <CIcon icon={cilContact} customClassName="nav-icon" />,
// to: "/contact/request",
// group: "Website Related",
// },
// {
// component: CNavItem,
@ -314,13 +220,6 @@ const _nav = [
to: "/copyright/message",
group: "Settings",
},
{
component: CNavItem,
name: "Home",
icon: <CIcon icon={cilFeaturedPlaylist} customClassName="nav-icon" />,
to: "/home",
group: "Settings",
},
],
},
// {
@ -358,43 +257,14 @@ const _nav = [
// ],
// },
// //Affiliate end
// {
// component: CNavGroup,
// name: "Customer Service",
// icon: <CIcon icon={cilClipboard} customClassName="nav-icon" />,
// group: "",
// items: [
// {
// component: CNavItem,
// name: "Customer Support",
// icon: <CIcon icon={cilAlarm} customClassName="nav-icon" />,
// to: "/support/request",
// group: "Customer Service",
// },
// {
// component: CNavItem,
// name: "Contact Requests",
// icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
// to: "/contact/request",
// group: "Customer Service",
// },
// // {
// // component: CNavItem,
// // name: "Email CMS",
// // icon: <CIcon icon={cilLocationPin} customClassName="nav-icon" />,
// // to: "/email-cms",
// // },
// ],
// },
// //Blog start
// {
// component: CNavItem,
// name: "Blog",
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// to: "/blogs",
// group: "Blog",
// },
//Blog start
{
component: CNavItem,
name: "Blog",
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
to: "/blogs",
group: "Blog",
},
// // Employee
// {
// component: CNavItem,
@ -403,14 +273,6 @@ const _nav = [
// to: "/employee",
// group: "Employees & Access",
// },
// //Point of Sale start
// {
// component: CNavItem,
// name: "Point of Sale",
// icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
// to: "/pos",
// group: "Point of Sale",
// },
// {
// component: CNavGroup,
// name: "Blog",

3
src/index.js
View File

@ -3,6 +3,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import "react-app-polyfill/stable";
import "core-js";
import 'bootstrap/dist/css/bootstrap.min.css';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
@ -14,7 +15,7 @@ import { cibGmail } from "@coreui/icons";
import { createRoot } from "react-dom/client";
const setupAxios = () => {
//axios.defaults.baseURL = "http://localhost:5000";
// axios.defaults.baseURL = "http://localhost:5000";
axios.defaults.baseURL = "https://cheminova-api-2.onrender.com";
axios.defaults.headers = {

262
src/routes.js
View File

@ -22,7 +22,6 @@ import Socialmedia from "./views/configuration/Socialmedia.js";
import Address from "./views/configuration/Address.js";
import Logo from "./views/configuration/Logo.js";
import Login from "./views/pages/login/Login";
import Web_Images from "./views/configuration/Web_Images";
// Appointments
import Appointments from "./views/Appointments/Appointments";
@ -42,7 +41,6 @@ import DispatchedOrders from "./views/orders/DispatchedOrders.js";
import DeliveredOrders from "./views/orders/DeliveredOrders.js";
import CancelledOrders from "./views/orders/CancelledOrders.js";
import ReturnedOrders from "./views/orders/ReturnedOrders.js";
import ViewOdr from "./views/orders/ViewOdr";
import AddOrder from "./views/orders/AddOrder";
//Taxes
import Tax from "./views/configuration/tax/Tax";
@ -57,8 +55,6 @@ import AddInformations from "./views/Informations/AddInformations";
import ApplicationName from "./views/configuration/ApplicationName";
import CopyrightMessage from "./views/configuration/CopyrightMessage";
import ContactRequests from "./views/ContactRequests/ContactRequests";
import AddContactRequest from "./views/ContactRequests/AddContactRequest";
import AddSeoRequest from "./views/seo/AddSeoRequest";
@ -97,10 +93,8 @@ import EditAboutUs from "./views/Content/editAboutUs";
// import AddUserAddress from "./views/customerDetails/addUserAddress";
import viewDetails from "./views/customerDetails/viewDetails";
import Design from "./views/Design/design";
import Banners from "./views/Banner/banner";
import RegisterImage from "./views/Images/RegisterImage";
import LoginImage from "./views/Images/LoginImage";
import ShopImage from "./views/Images/ShopImage";
//Affiliate
import Coupons from "./views/Affiliate/Coupons";
import Affiliates from "./views/Affiliate/Affiliates";
@ -111,10 +105,6 @@ import EditCoupon from "./views/Affiliate/EditCoupon";
import PayAffiliate from "./views/Affiliate/PayAffiliate";
import AffiliateHistory from "./views/Affiliate/AffiliateHistory";
import CouponHistory from "./views/Affiliate/CouponHistory";
import SupportRequest from "./views/CustomerSupport/SupportRequest";
import SupportReply from "./views/CustomerSupport/SupportReply";
import SupportRequestClosed from "./views/CustomerSupport/SupportRequestClosed";
import CloseRequestView from "./views/CustomerSupport/CloseRequestView";
import EditTestimonial from "./views/Testimonials/EditTestimonial";
//Blogs
import Blogs from "./views/Blog/Blogs";
@ -122,37 +112,22 @@ import CreateBlog from "./views/Blog/CreateBlog";
import users from "./views/Users/users";
import UpdateBlog from "./views/Blog/EditBlog";
import ViewBlog from "./views/Blog/ViewBlog";
import Home from "./views/Home/home";
import EditPanel1 from "./views/Home/editPanel1";
import EditPanel2 from "./views/Home/editPanel2";
import EditPanel3 from "./views/Home/editPanel3";
import Editpanel4 from "./views/Home/editPanel4";
import CustomerTable from "./views/customerDetails/customerTable";
import SingleUserAllDetails from "./views/customerDetails/singleUserAllDetails";
import Charts from "./views/Charts/RevenueCharts";
import UserCharts from "./views/Charts/UserChart";
import ProductrevenueCharts from "./views/Charts/ProductRevenue";
import StateRevenueCharts from "./views/Charts/Staterevenue";
import CityRevenueCharts from "./views/Charts/CityRevenue";
import { element } from "prop-types";
import OrderdayChart from "./views/Charts/OrderDaywise";
import RevenueCharts from "./views/Charts/RevenueCharts";
import AddCustomer from "./views/customerDetails/addCustomer";
import Pos from "./views/PointOfSale/Pos";
import InStoreCashOrders from "./views/orders/InStoreCashOrders";
import POSViewOrders from "./views/orders/POSViewOrders";
import InStoreQRCodeOrders from "./views/orders/InStoreQRCodeOrders";
import EmailCms from "./views/CustomerSupport/EmailCMS/EmailCms";
import RegistrationEmail from "./views/CustomerSupport/EmailCMS/RegistrationEmail";
import Employee from "./views/EmployeeAccess/Employee";
import AddEmployee from "./views/EmployeeAccess/addEmployee";
import EditEmployee from "./views/EmployeeAccess/editEmployee";
import ExportToExcel from "./views/exportExcel";
import Currency from "./views/configuration/Currency";
import Patient from "./views/Patients/Patient";
import ViewPatient from "./views/Patients/ViewPatient";
import SalesCoOrdinator from "./views/SalesCoOrdinators/SalesCoOrdinator";
import EditSalesCoOrdinator from "./views/SalesCoOrdinators/EditSalesCoOrdinator";
import AddSalesCoOrdinator from "./views/SalesCoOrdinators/AddSalesCoOrdinator";
const routes = [
// { path: "/", exact: true, name: "Home", navName: "" },
//dashboard
{ path: "/dashboard", name: "Dashboard", element: Dashboard, navName: "" },
@ -169,44 +144,6 @@ const routes = [
navName: "",
},
// { path: '/profile', name: 'Profile', element: Profile },
//------------------Charts Routes------------------------------------
{
path: "/new-user-day-wise",
name: "new user day wise",
element: UserCharts,
navName: "Charts",
},
{
path: "/revenue-by-product",
name: "Revenue By Product",
element: ProductrevenueCharts,
navName: "Charts",
},
{
path: "/revenue-by-state",
name: "Revenue By State",
element: StateRevenueCharts,
navName: "Charts",
},
{
path: "/revenue-by-city",
name: "Revenue By City",
element: CityRevenueCharts,
navName: "Charts",
},
{
path: "/orders-day-wise",
name: "Orders (Day Wise)",
element: OrderdayChart,
navName: "Charts",
},
{
path: "/revenue-day-wise",
name: "Revenue (Day Wise)",
element: RevenueCharts,
navName: "Charts",
},
//------------------ End Charts Routes------------------------------------
//-----------------------Product Management Routes------------------------------------------------
{
path: "/products",
@ -240,20 +177,26 @@ const routes = [
},
{
path: "//patient/view/:id",
name: "View Patient",
element: ViewPatient,
navName: "Patients",
path: "/salescoordinator/edit/:id",
name: "Edit SalesCoOrdinator",
element: EditSalesCoOrdinator,
navName: "SalesCoOrdinators",
},
{
path: "/patients",
name: "Patients",
element: Patient,
navName: "Patients",
path: "/salescoordinators",
name: "SalesCoOrdinators",
element: SalesCoOrdinator,
navName: "SalesCoOrdinators",
},
{
path: "/salescoordinator/add",
name: "Add SalesCoOrdinators",
element: AddSalesCoOrdinator,
navName: "SalesCoOrdinators",
},
//Gst tax
{
path: "/vat",
path: "/tax",
name: "Tax Rates",
element: Tax,
navName: "Product Management",
@ -383,70 +326,11 @@ const routes = [
// },
// { path: '/franchisee/view/:id', name: 'view franchisee', element: ViewFra },
//Contact Requests
// ----------------Customer Service Routes-------------------------------
{
path: "/contact/request",
name: "Customer Service",
element: ContactRequests,
navName: "Customer Service",
},
{
path: "/contact/request/new",
name: "Customer Service",
element: AddContactRequest,
navName: "Customer Service",
},
//Support Requests
{
path: "/email-cms",
name: "CustomerSupport Requests",
element: EmailCms,
navName: "Customer Service",
},
{
path: "/email-cms/registration-email",
name: "CustomerSupport Requests",
element: RegistrationEmail,
navName: "Customer Service",
},
{
path: "/support/request",
name: "Customer Service",
element: SupportRequest,
navName: "Customer Service",
},
{
path: "/support/request/closed",
name: "Customer Service",
element: SupportRequestClosed,
navName: "Customer Service",
},
{
path: "/support/request/closed/:ticketID",
name: "Customer Service",
element: CloseRequestView,
navName: "Customer Service",
},
{
path: "/support/request/reply/:ticketID",
name: "Customer Service",
element: SupportReply,
navName: "Customer Service",
},
// ---------------- End Customer Service Routes-------------------------------
// { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
//Complaints
//-------------------------------website related routes----------------------------------
{
path: "/banner",
name: "Banners",
element: Banners,
navName: "Website Related",
},
{
path: "/registerImage",
name: "RegisterImage",
@ -454,24 +338,12 @@ const routes = [
navName: "Website Related",
},
{
path: "/web_images",
name: "Web Images",
element: Web_Images,
navName: "Settings",
},
{
path: "/loginImage",
name: "LoginImage",
element: LoginImage,
navName: "Website Related",
},
{
path: "/shopImage",
name: "ShopImage",
element: ShopImage,
navName: "Website Related",
},
{
path: "/testimonials",
name: "Testimonials",
@ -547,47 +419,8 @@ const routes = [
element: EditAboutUs,
navName: "Website Related",
},
// Home Pannel website
{
path: "/home",
name: "Home",
element: Home,
navName: "Website Related",
},
{
path: "/home/panel-1",
name: "EditPanel1",
element: EditPanel1,
navName: "Website Related",
},
{
path: "/home/panel-2",
name: "EditPanel2",
element: EditPanel2,
navName: "Website Related",
},
{
path: "/home/panel-3",
name: "EditPanel3",
element: EditPanel3,
navName: "Website Related",
},
{
path: "/home/panel-4",
name: "EditPanel4",
element: Editpanel4,
navName: "Website Related",
},
//-------------------------------End website related routes----------------------------------
//informations
// { path: "/informations", name: "Informations", element: Informations },
// {
// path: "/information/new",
// name: "Add Informations",
// element: AddInformations,
// },
//--------------Order Management Routes---------------------------------------
{
path: "/orders/new",
@ -656,12 +489,6 @@ const routes = [
element: InStoreQRCodeOrders,
navName: "Orders",
},
{
path: "/inStoreOrders/:status/:id",
name: "View In Store Cash Orders",
element: POSViewOrders,
navName: "Orders",
},
//-------------- End Order Management Routes---------------------------------------
//----------Point of sale orders Routes-----------------------
@ -670,37 +497,6 @@ const routes = [
//------------settings------------------------//
// { path: "/policies", name: "Policies", element: Policies },
// { path: "/purpose", name: "Purpose", element: Purpose },
// { path: "/purpose/add", name: "Add Purpose", element: AddPurpose },
// //languge
// { path: "/languages", name: "languages", element: Languages },
// { path: "/language/add", name: "Add languages", element: AddLanguage },
// { path: "/language/edit/:id", name: "Edit languages", element: EditLanguage },
//business Type
// { path: "/business_type", name: "business", element: BusinessType },
// {
// path: "/business_type/add",
// name: "Add business",
// element: AddBusinessType,
// },
// {
// path: "/business_type/edit/:id",
// name: "Edit business",
// element: EditBusinessType,
// },
//purpose
// { path: "/purpose", name: "purpose", element: Purpose },
// { path: "/purpose/add", name: "Add purpose", element: AddPurpose },
// { path: "/purpose/edit/:id", name: "Edit purpose", element: EditPurpose },
//languge
//-----------------Configuration Routes-----------------------------------
{
path: "/socialmedia",
@ -834,24 +630,6 @@ const routes = [
element: EditEmployee,
navName: "Employees & Access",
},
// ------------------------ End Employee Routes-----------------------
//---------Point of Sale Section Routes------------------------
{
path: "/pos",
name: "Point of Sale",
element: Pos,
navName: "Point of Sale",
},
// Export to excel
{
path: "/exp",
name: "Point of Sale",
element: ExportToExcel,
navName: "Point of Sale",
},
//--------- End Point of Sale Section Routes------------------------
];
export default routes;

707
src/views/Banner/banner.js
View File

@ -1,707 +0,0 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
import { isAutheticated } from "src/auth";
import {
Button,
Box,
IconButton,
Modal,
Pagination,
TextField,
Typography,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { ClipLoader } from "react-spinners";
import swal from "sweetalert";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
borderRadius: "0.5rem",
boxShadow: 24,
width: "500px",
};
const Banners = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(true);
const [updating, setUpdating] = useState(true); // for loading state
// const [isUpdate, setIsUpdate] = useState(false); // for edit state
const [saveLoding, setSaveLoading] = useState(true);
const [edit, setEdit] = useState(false);
const [bannerName, setBannerName] = useState("");
const [bannerImage, setBannerImage] = useState("");
const [error, setError] = useState("");
const [bannerId, setBannerId] = useState("");
const [banner, setBanner] = useState([]);
const [itemPerPage, setItemPerPage] = useState(10);
const [page, setPage] = useState(1);
const [open, setOpen] = useState(false);
const [olderBannerName, setOlderBaannerName] = useState("");
const [olderImage, setOlderImage] = useState("");
const handleOpen = () => setOpen(true);
const handleClose = () => {
setOpen(false);
// setUpdating(false);
setEdit(false);
setBannerName("");
setBannerId("");
setOlderImage("");
setBannerImage("");
};
const getBanner = async () => {
try {
const response = await axios.get("/api/banner/getBanners", {
// headers: {
// Authorization: `Bearer ${token}`,
// },
});
if (response.status === 200) {
setBanner(response?.data?.banners);
setLoading(false);
}
} catch (error) {
swal({
title: error,
text: " please login to access the resource ",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getBanner();
}, []);
// }, [token, banner]);
const handleEditClick = (_id, bannerName, bannerImage) => {
setOpen(true);
setOlderImage(bannerImage);
setBannerName(bannerName);
setBannerId(_id);
setOlderBaannerName(bannerName);
setEdit(true);
// setUpdating(false);
};
const bannerNamesArray = [];
const setBannerNamesArray = () => {
banner &&
banner.map((banner) => {
bannerNamesArray.push(banner.bannerName.toLowerCase());
});
};
setBannerNamesArray();
const handleUpdate = () => {
const filteredArrayNames = bannerNamesArray.filter(
(item) => item !== olderBannerName.toLowerCase()
);
console.log(filteredArrayNames, "filter");
const bannerExits = filteredArrayNames.includes(bannerName.toLowerCase());
if (bannerExits) {
swal({
title: "Warning",
text: "Banner already exists ",
icon: "error",
button: "Retry",
dangerMode: true,
});
return;
}
if (!bannerName || (!bannerImage && !olderImage)) {
swal({
title: "Warning",
text: "Please fill all the required fields!",
icon: "error",
button: "Retry",
dangerMode: true,
});
return;
}
setUpdating(false);
const formData = new FormData();
formData.append("bannerName", bannerName);
formData.append("bannerImage", bannerImage);
formData.append("olderImage", JSON.stringify(olderImage));
axios
.patch(`/api/banner/update/${bannerId}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
// setUpdating(true);
// setIsUpdate(false);
handleClose();
setBannerId("");
setBannerName("");
setBannerImage("");
setOlderImage("");
setUpdating(true);
setEdit(false);
swal({
title: "Congratulations!!",
text: "The banner was updated successfully!",
icon: "success",
button: "OK",
});
// getCategories(); // Refresh the category list after updating
})
.catch((err) => {
swal({
title: "Sorry, please try again",
text: err,
icon: "error",
button: "Retry",
dangerMode: true,
});
setUpdating(true);
});
};
const handleDelete = (_id) => {
swal({
title: "Are you sure?",
icon: "error",
buttons: {
Yes: { text: "Yes", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((value) => {
if (value === true) {
axios
.delete(`/api/banner/delete/${_id}`, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
swal({
title: "Congratulations!!",
text: "The banner was deleted successfully!",
icon: "success",
button: "OK",
});
// getCategories(); // Refresh the category list after deleting
})
.catch((err) => {
swal({
title: "",
text: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
});
};
const handleSaveBanner = async () => {
const bannerExits = bannerNamesArray.includes(bannerName.toLowerCase());
if (bannerExits) {
swal({
title: "Warning",
text: "Banner Already exits.",
icon: "error",
button: "Retry",
dangerMode: true,
});
return;
}
if (!bannerName || !bannerImage) {
swal({
title: "Warning",
text: "Please fill all the required fields!",
icon: "error",
button: "Retry",
dangerMode: true,
});
return;
}
setSaveLoading(false);
setLoading(true);
const formData = new FormData();
formData.append("bannerName", bannerName);
formData.append("bannerImage", bannerImage);
axios
.post("/api/banner/add", formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/formdata",
},
})
.then((response) => {
if (response.status === 201) {
setOpen(false);
setLoading(false);
setSaveLoading(true);
setBannerName("");
setBannerImage("");
setOlderImage("");
swal({
title: "Added",
text: "New Banner added successfully!",
icon: "success",
button: "OK",
});
// getCategories(); // Refresh the category list after adding
}
})
.catch((error) => {
setSaveLoading(true);
swal({
title: error,
text: "something went wrong",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const getPageCount = () => {
return Math.max(1, Math.ceil(banner.length / itemPerPage));
};
const handleFileChange = (e) => {
const files = e.target.files[0];
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
if (allowedTypes.includes(files.type)) {
setBannerImage(files);
}
};
const handeldeleteImage = () => {
setBannerImage("");
};
return (
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<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">
Banners
</div>
<div className="page-title-right">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={handleOpen}
// onClick={() => {
// navigate("/testimonial/new", { replace: true });
// }}
>
Add New Banner
</Button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<Box p={2} display={"flex"}>
<Typography
id="modal-modal-title"
variant="body"
component="h2"
flex={1}
>
Banner Name
</Typography>
<IconButton onClick={() => handleClose()}>
<CloseIcon />
</IconButton>
</Box>
<hr />
<TextField
placeholder="Banner name"
value={bannerName}
fullWidth
inputProps={{
maxLength: 25,
}}
style={{
padding: "1rem",
}}
onChange={(e) =>
setBannerName(
e.target.value.charAt(0).toUpperCase() +
e.target.value.slice(1)
)
}
/>
{bannerName ? (
<>
<small className="charLeft mt-2 ml-3 fst-italic">
{25 - bannerName.length} characters left
</small>
</>
) : (
<></>
)}
<Box
style={{
padding: "1rem",
}}
>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "140px",
height: "140px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
}}
fontSize="large"
/>
</Box>
</label>
{bannerImage && (
<Box>
<img
src={URL.createObjectURL(bannerImage)}
alt="bannerImage"
style={{
width: 100,
height: 100,
borderRadius: "1rem",
marginLeft: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handeldeleteImage()}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
{olderImage && (
<Box>
<img
src={olderImage?.secure_url}
alt="bannerImage"
style={{
width: 100,
height: 100,
borderRadius: "1rem",
marginLeft: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => setOlderImage("")}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<p className="pt-1 pl-2 text-secondary">
Upload jpg, jpeg and png only*
</p>
<Box
p={2}
display={"flex"}
justifyContent={"right"}
// width={"500px"}
>
{!edit && (
<button
style={{
color: "white",
marginRight: "1rem",
}}
onClick={() => handleSaveBanner()}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
<ClipLoader loading={!saveLoding} size={18} />
{saveLoding && "Save"}
</button>
)}
{edit && (
<button
style={{
color: "white",
marginRight: "1rem",
}}
onClick={() => handleUpdate()}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
<ClipLoader loading={!updating} size={18} />
{updating && "update"}
</button>
)}
<button
style={{
color: "black",
marginRight: "1rem",
background: "grey",
}}
onClick={() => setOpen(false)}
type="button"
className="
btn btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
Close
</button>
</Box>
</Box>
</Modal>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10">
<div className="col-sm-12 col-md-12">
<div className="dataTables_length">
<label className="w-100">
Show
<select
style={{ width: "10%" }}
onChange={(e) => setItemPerPage(e.target.value)}
className="
select-w
custom-select custom-select-sm
form-control form-control-sm
"
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
</div>
<div className="table-responsive table-shoot mt-3">
<table
className="table table-centered table-nowrap"
style={{ border: "1px solid" }}
>
<thead
className="thead-info"
style={{ background: "rgb(140, 213, 213)" }}
>
<tr>
<th> Image</th>
<th> Banner Name</th>
<th>Action</th>
<th>Dimension</th>
</tr>
</thead>
<tbody>
{!loading && banner.length === 0 && (
<tr className="text-center">
<td colSpan="6">
<h5>No Data Available</h5>
</td>
</tr>
)}
{loading ? (
<tr>
<td className="text-center" colSpan="6">
Loading...
</td>
</tr>
) : (
banner &&
banner
.slice(
(`${page}` - 1) * itemPerPage,
`${page}` * itemPerPage
)
.map((item, i) => (
<tr key={i}>
<td>
<img
className="me-2"
src={item?.bannerImage?.secure_url}
width="40"
alt=""
/>
<h5>{} </h5>
</td>
<td>
<h5>{item.bannerName} </h5>
</td>
<td className="text-start">
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
onClick={() =>
handleEditClick(
item._id,
item.bannerName,
item.bannerImage
)
}
>
Edit
</button>
<button
style={{
color: "white",
marginRight: "1rem",
background: "red",
}}
type="button"
className="
btn btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
onClick={() => handleDelete(item._id)}
>
Delete
</button>
</td>
<td>1600 x 900 pixels</td>
</tr>
))
)}
</tbody>
</table>
</div>
<div style={{ display: "flex", justifyContent: "right" }}>
<Pagination
style={{ margin: "2rem" }}
variant="outlined"
size="large"
count={getPageCount()}
color="primary"
onChange={(event, value) => setPage(value)}
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Banners;

200
src/views/Charts/CityRevenue.js
View File

@ -1,200 +0,0 @@
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const CityRevenueCharts = () => {
const token = isAutheticated();
const [ordersData, setOrdersData] = useState([]);
const [filteredOrders, setFilteredOrders] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/order/getAll/`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setOrdersData(res.data.order);
// console.log(res.data.order);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, []);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = ordersData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setFilteredOrders(filtered);
}, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
const uniquecity = [
...new Set(
filteredOrders.map((item) => item.shippingInfo.city)
),
];
// console.log(uniquecity);
// console.log(filteredOrders);
// Prepare data for chart
const data = {
labels: uniquecity, // Use unique product names as labels
datasets: [
{
label: "Total Amount",
data: uniquecity.map((city) => {
// Sum total amounts for each date
return filteredOrders
.filter((order) => order.shippingInfo.city.includes(city))
.reduce((total, order) => total + order.total_amount, 0);
}),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "Revenue Chart",
},
},
scales: {
x: {
title: {
display: true,
text: "City",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "Total Amount",
},
ticks: {
stepSize: 1, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the ordersData
const lowestYear = Math.min(
...ordersData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<>
<div style={{ display: "flex" }}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredOrders.length === 0 ? (
<p>No data available</p>
) : (
<div style={{ height: "75vh" }}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};
export default CityRevenueCharts;

195
src/views/Charts/OrderDaywise.js
View File

@ -1,195 +0,0 @@
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const OrderdayChart = () => {
const token = isAutheticated();
const [ordersData, setOrdersData] = useState([]);
const [filteredOrders, setFilteredOrders] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/order/getAll/`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setOrdersData(res.data.order);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, [token]);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = ordersData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setFilteredOrders(filtered);
}, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
// Extract unique dates from filtered orders
const uniqueDates = Array.from(
new Set(filteredOrders.map((order) => order.createdAt.split("T")[0]))
);
// Prepare data for chart
const data = {
labels: uniqueDates,
datasets: [
{
label: "Total Orders",
data: uniqueDates.map((date) => {
// Count total orders for each date
return filteredOrders.filter((order) => order.createdAt.includes(date)).length;
}),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "Revenue Order",
},
},
scales: {
x: {
title: {
display: true,
text: "Date",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "Orders",
},
ticks: {
stepSize: 1, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the ordersData
const lowestYear = Math.min(
...ordersData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<>
<div style={{ display: "flex"}}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredOrders.length === 0 ? (
<p>No data available</p>
) : (
<div style={{height:"75vh"}}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};
export default OrderdayChart;

213
src/views/Charts/ProductRevenue.js
View File

@ -1,213 +0,0 @@
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const ProductrevenueCharts = () => {
const token = isAutheticated();
const [ordersData, setOrdersData] = useState([]);
const [filteredOrders, setFilteredOrders] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/order/getAll/`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setOrdersData(res.data.order);
// console.log(res.data.order);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, []);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = ordersData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setFilteredOrders(filtered);
}, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
// Extract unique products from filtered orders
const uniqueProducts = [
...new Set(
filteredOrders.flatMap((order) =>
order.orderItems.map((item) => item.name)
)
),
];
// console.log(uniqueProducts);
// console.log(filteredOrders);
// Prepare data for chart
const data = {
labels: uniqueProducts, // Use unique product names as labels
datasets: [
{
label: "Total Amount",
data: uniqueProducts.map((product) =>
filteredOrders.reduce((total, order) => {
// Find the order item for the current product
const orderItem = order.orderItems.find(
(item) => item.name === product
);
if (orderItem) {
// If the order item exists, add its total amount to the total for this product
return total + orderItem.
product_Subtotal;
} else {
// If the order item does not exist, return the current total
return total;
}
}, 0)
),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "Revenue Chart",
},
},
scales: {
x: {
title: {
display: true,
text: "Product",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "Total Amount",
},
ticks: {
stepSize: 1, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the ordersData
const lowestYear = Math.min(
...ordersData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<>
<div style={{ display: "flex" }}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredOrders.length === 0 ? (
<p>No data available</p>
) : (
<div style={{ height: "75vh" }}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};
export default ProductrevenueCharts;

199
src/views/Charts/RevenueCharts.js
View File

@ -1,199 +0,0 @@
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const RevenueCharts = () => {
const token = isAutheticated();
const [ordersData, setOrdersData] = useState([]);
const [filteredOrders, setFilteredOrders] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/order/getAll/`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setOrdersData(res.data.order);
// console.log(res.data.order);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, []);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = ordersData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setFilteredOrders(filtered);
}, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
// Extract unique dates from filtered orders
const uniqueDates = Array.from(
new Set(filteredOrders.map((order) => order.createdAt.split("T")[0]))
);
// console.log(uniqueDates);
// console.log(filteredOrders);
// Prepare data for chart
const data = {
labels: uniqueDates,
datasets: [
{
label: "Total Amount",
data: uniqueDates.map((date) => {
// Sum total amounts for each date
return filteredOrders
.filter((order) => order.createdAt.includes(date))
.reduce((total, order) => total + order.total_amount, 0);
}),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "Revenue Chart",
},
},
scales: {
x: {
title: {
display: true,
text: "Date",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "Total Amount",
},
ticks: {
stepSize: 1000, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the ordersData
const lowestYear = Math.min(
...ordersData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<>
<div style={{ display: "flex" }}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredOrders.length === 0 ? (
<p>No data available</p>
) : (
<div style={{ height: "75vh" }}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};
export default RevenueCharts;

200
src/views/Charts/Staterevenue.js
View File

@ -1,200 +0,0 @@
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const StateRevenueCharts = () => {
const token = isAutheticated();
const [ordersData, setOrdersData] = useState([]);
const [filteredOrders, setFilteredOrders] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/order/getAll/`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setOrdersData(res.data.order);
// console.log(res.data.order);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, []);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = ordersData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setFilteredOrders(filtered);
}, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
const uniquestate = [
...new Set(
filteredOrders.map((item) => item.shippingInfo.state)
),
];
// console.log(uniquestate);
// console.log(filteredOrders);
// Prepare data for chart
const data = {
labels: uniquestate, // Use unique product names as labels
datasets: [
{
label: "Total Amount",
data: uniquestate.map((state) => {
// Sum total amounts for each date
return filteredOrders
.filter((order) => order.shippingInfo.state.includes(state))
.reduce((total, order) => total + order.total_amount, 0);
}),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "Revenue Chart",
},
},
scales: {
x: {
title: {
display: true,
text: "State",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "Total Amount",
},
ticks: {
stepSize: 1, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the ordersData
const lowestYear = Math.min(
...ordersData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<>
<div style={{ display: "flex" }}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredOrders.length === 0 ? (
<p>No data available</p>
) : (
<div style={{ height: "75vh" }}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};
export default StateRevenueCharts;

200
src/views/Charts/UserChart.js
View File

@ -1,200 +0,0 @@
import React, { useEffect, useState } from "react";
import { isAutheticated } from "src/auth";
import axios from "axios";
import { Bar } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from "chart.js";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
const UserCharts = () => {
const token = isAutheticated();
const [userData, setUsers] = useState([]);
const [filteredUsers, setfilteredUsers] = useState([]);
const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
useEffect(() => {
function getOrder() {
axios
.get(`/api/v1/admin/users`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setUsers(res.data.users);
// console.log(res.data.users);
})
.catch((err) => {
console.log(err);
});
}
getOrder();
}, []);
useEffect(() => {
// Filter orders based on selected year and month
const filtered = userData.filter((order) => {
const createdAt = new Date(order.createdAt);
return (
createdAt.getFullYear() === selectedYear &&
createdAt.getMonth() + 1 === selectedMonth
);
});
// Sort filtered orders by date in ascending order
filtered.sort((a, b) => {
const dateA = new Date(a.createdAt);
const dateB = new Date(b.createdAt);
return dateA - dateB;
});
setfilteredUsers(filtered);
}, [userData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
// Extract unique dates from filtered orders
const uniqueDates = Array.from(
new Set(filteredUsers.map((order) => order.createdAt.split("T")[0]))
);
// console.log(uniqueDates);
// console.log(filteredUsers);
// Prepare data for chart
const data = {
labels: uniqueDates,
datasets: [
{
label: "No of Amounts",
data: uniqueDates.map((date) => {
// Sum total amounts for each date
return filteredUsers
.filter((order) => order.createdAt.includes(date))
.length;
}),
backgroundColor: "rgba(43, 63, 229, 0.8)",
borderRadius: 5,
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
display: false,
},
title: {
display: true,
text: "User Chart",
},
},
scales: {
x: {
title: {
display: true,
text: "Date",
},
},
y: {
beginAtZero: true,
title: {
display: true,
text: "No of Users",
},
ticks: {
stepSize: 1, // Adjust step size as needed
},
},
},
};
// Convert month number to string
const monthToString = (monthNumber) => {
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return months[monthNumber - 1];
};
// Determine the lowest year found in the userData
const lowestYear = Math.min(
...userData.map((order) => new Date(order.createdAt).getFullYear())
);
// Generate an array of years from the lowest year to the current year
const years = Array.from(
{ length: new Date().getFullYear() - lowestYear + 1 },
(_, index) => lowestYear + index
);
return (
<>
<div style={{ display: "flex" }}>
<div style={{ marginRight: "20px" }}>
<label htmlFor="year">Select Year:</label>
<select
id="year"
value={selectedYear}
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
</div>
<div>
<label htmlFor="month">Select Month:</label>
<select
id="month"
value={selectedMonth}
onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
>
{[...Array(12).keys()].map((month) => (
<option key={month + 1} value={month + 1}>
{monthToString(month + 1)}
</option>
))}
</select>
</div>
</div>
<div style={{ textAlign: "center" }}>
{filteredUsers.length === 0 ? (
<p>No data available</p>
) : (
<div style={{ height: "75vh" }}>
<Bar data={data} options={options} />
</div>
)}
</div>
</>
);
};
export default UserCharts;

221
src/views/ContactRequests/AddContactRequest.js
View File

@ -1,221 +0,0 @@
import React, { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link, useNavigate } from "react-router-dom";
import swal from "sweetalert";
import axios from "axios";
import { isAutheticated } from "src/auth";
// import { WebsiteURL } from '../WebsiteURL'
const AddContactRequest = () => {
const token = isAutheticated();
const navigate = useNavigate();
const [data, setData] = useState({
name: "",
EmailOrMobile: "",
message: "",
});
const [loading, setLoading] = useState(false);
const handleChange = (e) => {
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
};
const handleSubmit = () => {
if (
data.name.trim() === "" ||
data.EmailOrMobile.trim() === "" ||
data.message.trim() === ""
) {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.set("name", data.name);
formData.set("EmailOrMobile", data.EmailOrMobile);
formData.set("message", data.message);
axios
.post(`/api/contact/request/new/`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/formdata",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Added",
text: "Contact Requests added successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
navigate("/contact/request", { replace: true });
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message || "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
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">
New Contact Request
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSubmit()}
disabled={loading}
>
{loading ? "Loading" : "Save"}
</Button>
<Link to="/contact/request">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
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">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Name *
</label>
<input
type="text"
className="form-control"
id="name"
value={data.name}
maxLength={25}
onChange={(e) => handleChange(e)}
/>
{data.name ? (
<>
<small className="charLeft mt-4 fst-italic">
{25 - data.name.length} characters left
</small>
</>
) : (
<></>
)}{" "}
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Email/Mobile *
</label>
<input
type="text"
className="form-control"
id="EmailOrMobile"
value={data.EmailOrMobile}
maxLength={25}
onChange={(e) => handleChange(e)}
/>
{data.EmailOrMobile ? (
<>
<small className="charLeft mt-4 fst-italic">
{25 - data.EmailOrMobile.length} characters left
</small>
</>
) : (
<></>
)}{" "}
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Message *
</label>
<textarea
type="text"
className="form-control"
id="message"
rows="10"
cols="100"
value={data.message}
placeholder="your message..."
maxLength="500"
onChange={(e) => handleChange(e)}
></textarea>
{data.message ? (
<>
<small className="charLeft mt-4 fst-italic">
{500 - data.message.length} characters left
</small>
</>
) : (
<></>
)}
</div>
{/* <div className="mb-3">
<label htmlFor="title" className="form-label">
message *
</label>
<br />
<textarea id="w3review" name="w3review" rows="10" cols="100">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>
</div> */}
</div>
</div>
</div>
</div>
</div>
);
};
export default AddContactRequest;

338
src/views/ContactRequests/ContactRequests.js
View File

@ -1,338 +0,0 @@
import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import { isAutheticated } from 'src/auth'
const ContactRequests = () => {
const token = isAutheticated()
const navigate = useNavigate()
const [loading, setLoading] = useState(true)
const [success, setSuccess] = useState(true)
const [ContactRequestsData, setContactRequestsData] = useState([])
const [currentPage, setCurrentPage] = useState(1)
const [itemPerPage, setItemPerPage] = useState(10)
const [showData, setShowData] = useState(ContactRequestsData)
const handleShowEntries = (e) => {
setCurrentPage(1)
setItemPerPage(e.target.value)
}
const getContactRequestsData = async () => {
axios
.get(`/api/contact/request/getAll/`, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
console.log(res.data)
setContactRequestsData(res.data?.contactRequest)
setLoading(false)
})
.catch((err) => {
setLoading(false)
})
}
useEffect(() => {
getContactRequestsData()
}, [success])
useEffect(() => {
const loadData = () => {
const indexOfLastPost = currentPage * itemPerPage
const indexOfFirstPost = indexOfLastPost - itemPerPage
setShowData(ContactRequestsData.slice(indexOfFirstPost, indexOfLastPost))
}
loadData()
}, [currentPage, itemPerPage, ContactRequestsData])
const handleDelete = (id) => {
swal({
title: 'Are you sure?',
icon: 'error',
buttons: { Yes: { text: 'Yes', value: true }, Cancel: { text: 'Cancel', value: 'cancel' } },
}).then((value) => {
if (value === true) {
axios
.delete(`/api/product/delete/${id}`, {
headers: {
'Access-Control-Allow-Origin': '*',
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setSuccess((prev) => !prev)
})
.catch((err) => {
swal({
title: 'Warning',
text: 'Something went wrong!',
icon: 'error',
button: 'Retry',
dangerMode: true,
})
})
}
})
}
return (
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<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">
Contact Requests
</div>
<div className="page-title-right">
<Button
variant="contained"
color="primary"
style={{
fontWeight: 'bold',
marginBottom: '1rem',
textTransform: 'capitalize',
}}
onClick={() => {
navigate('/contact/request/new', { replace: true })
}}
>
New Contact Requests
</Button>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10">
<div className="col-sm-12 col-md-12">
<div className="dataTables_length">
<label className="w-100">
Show
<select
style={{ width: '10%' }}
name=""
onChange={(e) => handleShowEntries(e)}
className="
select-w
custom-select custom-select-sm
form-control form-control-sm
"
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
</div>
<div className="table-responsive table-shoot mt-3">
<table
className="table table-centered table-nowrap"
style={{ border: '1px solid' }}
>
<thead className="thead-info" style={{ background: 'rgb(140, 213, 213)' }}>
<tr>
<th className="text-start">Name</th>
<th className="text-start">Email/Mobile</th>
<th className="text-start">Message</th>
<th className="text-start">Date & Time</th>
{/* <th className="text-start">Action</th> */}
</tr>
</thead>
<tbody>
{!loading && showData.length === 0 && (
<tr className="text-center">
<td colSpan="6">
<h5>No Data Available</h5>
</td>
</tr>
)}
{loading ? (
<tr>
<td className="text-center" colSpan="6">
Loading...
</td>
</tr>
) : (
showData.map((product, i) => {
return (
<tr key={i}>
<td className="text-start">{product.name}</td>
<td className="text-start">{product.EmailOrMobile}</td>
<td className="text-start">{product.message}</td>
<td className="text-start">
{new Date(product.createdAt).toLocaleString('en-IN', {
weekday: 'short',
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: true,
})}
</td>
{/* <td className="text-start">
<Link to={`/product/view/${product._id}`}>
<button
style={{ color: 'white', marginRight: '1rem' }}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
View
</button>
</Link>
</td> */}
</tr>
)
})
)}
</tbody>
</table>
</div>
<div className="row mt-20">
<div className="col-sm-12 col-md-6 mb-20">
<div
className="dataTables_info"
id="datatable_info"
role="status"
aria-live="polite"
>
Showing {currentPage * itemPerPage - itemPerPage + 1} to{' '}
{Math.min(currentPage * itemPerPage, ContactRequestsData.length)} of{' '}
{ContactRequestsData.length} entries
</div>
</div>
<div className="col-sm-12 col-md-6">
<div className="d-flex">
<ul className="pagination ms-auto">
<li
className={
currentPage === 1
? 'paginate_button page-item previous disabled'
: 'paginate_button page-item previous'
}
>
<span
className="page-link"
style={{ cursor: 'pointer' }}
onClick={() => setCurrentPage((prev) => prev - 1)}
>
Previous
</span>
</li>
{!(currentPage - 1 < 1) && (
<li className="paginate_button page-item">
<span
className="page-link"
style={{ cursor: 'pointer' }}
onClick={(e) => setCurrentPage((prev) => prev - 1)}
>
{currentPage - 1}
</span>
</li>
)}
<li className="paginate_button page-item active">
<span className="page-link" style={{ cursor: 'pointer' }}>
{currentPage}
</span>
</li>
{!(
(currentPage + 1) * itemPerPage - itemPerPage >
ContactRequestsData.length - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: 'pointer' }}
onClick={() => {
setCurrentPage((prev) => prev + 1)
}}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
!(
(currentPage + 1) * itemPerPage - itemPerPage >
ContactRequestsData.length - 1
)
? 'paginate_button page-item next'
: 'paginate_button page-item next disabled'
}
>
<span
className="page-link"
style={{ cursor: 'pointer' }}
onClick={() => setCurrentPage((prev) => prev + 1)}
>
Next
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default ContactRequests

207
src/views/CustomerSupport/CloseRequestView.js
View File

@ -1,207 +0,0 @@
import React, { useEffect, useState } from "react";
// import Button from "@material-ui/core/Button";
import { Link, useNavigate } from "react-router-dom";
import swal from "sweetalert";
import axios from "axios";
import { isAutheticated } from "src/auth";
import { Button, ImageList, InputLabel, ImageListItem } from "@mui/material";
import MessageList from "./MessageList";
import { useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
const CloseRequestView = () => {
// Assuming you have the following ticket details
const { ticketID } = useParams();
const token = isAutheticated();
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
// error****************************please check
const [ticketDetails, setticketDetails] = useState(null);
// const dispatch = useDispatch();
// const tickets = useSelector((state) => state.ticket.ticket);
// useEffect(() => {
// dispatch(getTicketItem());
// }, [dispatch]);
// console.log(tickets);
// geting data from backend************
// const dispatch = useDispatch();
// const tickets = useSelector((state) => state.ticket.ticket);
// useEffect(() => {
// dispatch(getTicketItem());
// }, [dispatch]);
// console.log(tickets);
// useEffect(() => {
// const foundTicket = tickets.find((ticket) => ticket.ticketId === ticketID);
// // console.log(foundTicket);
// setticketDetails(foundTicket);
// }, [ticketID]);
// console.log(ticketID);
// *****************
// geting data from backend************
const getSupportTicketDetails = async () => {
// console.log(ticketID);
axios
.get(`/api/support/getOne/${ticketID}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
// console.log(res?.data);
// setticketDetails(res.data?.support);
// setTicket(res.data?.support);
console.log(res.data?.support);
getuserName(res.data?.support);
// setLoading(false);
})
.catch((error) => {
swal({
title: error,
text: "please login to access the resource or refresh the page ",
icon: "error",
button: "Retry",
dangerMode: true,
});
// setLoading(false);
});
};
// ************************************
const getuserName = async (ticket) => {
try {
const userId = ticket.addedBy;
let resp = await axios.get(`/api/v1/admin/user/${userId}`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
console.log(resp?.data?.user?.name);
const userName = resp?.data?.user?.name;
const userMailId = resp?.data?.user?.email;
// console.log(userName);
// Update support ticket with user name
const ticketWithUserName = {
...ticket,
userName: userName,
userMailId: userMailId,
};
setticketDetails(ticketWithUserName);
} catch (error) {
// Handle errors
}
};
React.useEffect(() => {
getSupportTicketDetails();
}, []);
// *****************
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 Request
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<Button
variant="outlined"
color="error"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
navigate("/support/request/closed", { replace: true });
}}
>
Back
</Button>
</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">
<div className="mb-3">
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
Ticket ID: {ticketDetails?.ticketId}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
User ID: {ticketDetails?.addedBy}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
User Name: {ticketDetails?.userName}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
User MailId: {ticketDetails?.userMailId}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
Date and Time: {ticketDetails?.createdOn}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
Subject: {ticketDetails?.subject}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
Description:{" "}
{ticketDetails?.description
? ticketDetails?.description
: "No Description"}
</InputLabel>
</div>
<div className="mb-3">
{ticketDetails?.image?.length > 0 && (
<div>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
Image:
</InputLabel>
<ImageList sx={{ width: 500 }} cols={3} rowHeight={164}>
{ticketDetails?.image?.map((item) => (
<ImageListItem key={item.public_id}>
<img
srcSet={`${item.url}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
src={`${item.url}?w=164&h=164&fit=crop&auto=format`}
alt={item.title || "No image"}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
</div>
)}
</div>
<div className="mb-3">
{ticketDetails && (
<MessageList messages={ticketDetails?.message} />
)}
</div>
{/* *************** */}
</div>
</div>
</div>
</div>
</div>
);
};
export default CloseRequestView;

111
src/views/CustomerSupport/EmailCMS/EmailCms.js
View File

@ -1,111 +0,0 @@
import {
Button,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
} from "@mui/material";
import React from "react";
import { Link } from "react-router-dom";
export default function EmailCms() {
const pages = [
{
name: "New user registration",
action: "Edit",
path: "/email-cms/registration-email",
},
{
name: "Forgot Password",
action: "Edit",
path: "#",
},
{
name: "Change Password Notification ",
action: "Edit",
path: "#",
},
{
name: "New Order",
action: "Edit",
path: "#",
},
{
name: "Order - Processing",
action: "Edit",
path: "#",
},
{
name: "Order - Dispatched",
action: "Edit",
path: "#",
},
{
name: "Order - Delivered",
action: "Edit",
path: "#",
},
{
name: "Order - Cancelled",
action: "Edit",
path: "#",
},
];
return (
<div className="main-content">
<Typography variant="h6" fontWeight={"bold"}>
Email CMS
</Typography>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={{ fontWeight: "bold" }}>Page</TableCell>
<TableCell style={{ fontWeight: "bold" }} align="right">
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{pages.map((row) => (
<TableRow
key={row.name}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">
{" "}
<Link to={row.path}>
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-info btn-sm
waves-effect waves-light
btn-table
mt-1
mx-1
"
>
{row.action}
</button>
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
}

207
src/views/CustomerSupport/EmailCMS/RegistrationEmail.js
View File

@ -1,207 +0,0 @@
import { Typography } from "@material-ui/core";
import { Box, Button } from "@mui/material";
import React, { useEffect, useState } from "react";
import ReactrichTextEditor from "../../Content/reactrichTextEditor";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
import { useNavigate, useNavigation } from "react-router-dom";
// const TOOLBAR_OPTIONS = [
// [{ header: [1, 2, 3, 4, 5, 6, false] }],
// [{ font: [] }],
// [{ list: "ordered" }, { list: "bullet" }],
// ["bold", "italic", "underline", "strike"],
// [{ color: [] }, { background: [] }],
// [{ align: [] }],
// [{ script: "super" }, { script: "sub" }],
// ["undo", "redo"],
// ];
export default function RegistrationEmail() {
const [title, setTitle] = useState("Registration Email");
const [welcomemsg, setWelcomeMsg] = useState("");
const [welcomemsgforDescription, setWelcomeMsgForDescription] = useState("");
const [subject, setSubject] = useState("");
const [description, setDescription] = useState("");
const [content, setContent] = useState("");
const [added, setAdded] = useState(false);
const [olderContent, setOlderContent] = useState("");
const [id, setId] = useState(null);
const token = isAutheticated();
const getTermsAndConditions = async () => {
const response = await axios.get("/api/get-email-data", {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (response.status === 200) {
if (response.data?.registerEmaildata.length === 0) {
return;
}
// console.log(response);
// setContent(response?.data?.registerEmaildata[0]?.termsAndContionContent);
// setOlderContent(
// response?.data?.registerEmaildata[0]?.termsAndContionContent
// );
setSubject(response?.data?.registerEmaildata[0]?.subject);
setDescription(response?.data?.registerEmaildata[0]?.description);
setId(response?.data?.registerEmaildata[0]?._id);
}
};
const addTermsandConditions = async () => {
const response = await axios.post(
"/api/register-email",
{ subject: subject, description: description },
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 200) {
swal({
title: "Congratulations!!",
text: response?.data?.message,
icon: "success",
button: "OK",
});
}
};
const handleCancelClick = () => {
setAdded(!added);
};
const handleSaveClick = async () => {
// if (id === null) {
await addTermsandConditions();
setAdded(true);
// } else {
// await updateContent();
// setAdded(false);
// }
// Reload terms and conditions
// await getTermsAndConditions();
};
useEffect(() => {
// addTermsandConditions();
getTermsAndConditions();
}, [added]);
return (
<div>
<div style={{ display: "flex" }}>
<Button
variant="contained"
color="primary"
onClick={handleSaveClick}
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
>
Save
</Button>
<Button
variant="contained"
color="primary"
onClick={handleCancelClick}
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
>
Cancel
</Button>
</div>
<Box style={{ background: "#FFFFFF", color: "black", padding: "1rem" }}>
{/* <TextField
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
variant="outlined"
size="small"
fullWidth
/> */}
<Typography
style={{ margin: "0.5rem 0rem", fontWeight: "bold" }}
variant="h6"
>
{" "}
Email Confiramtion:{" "}
</Typography>
<div className="mb-3">
<label htmlFor="welcomeMsg" className="form-label">
Welcome Message*
</label>
<input
type="text"
className="form-control"
style={{ width: "300px" }}
id="welcomeMsg"
placeholder="Eg: Welcome to "
value={welcomemsg}
onChange={(e) => setWelcomeMsg(e.target.value)}
/>
<h6 style={{ fontWeight: "bold", marginTop: "1rem" }}>
App Name : Cheminova
</h6>
<label htmlFor="title" className="form-label">
Subject*
</label>
<input
type="text"
className="form-control"
id="title"
value={subject}
onChange={(e) => setSubject(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="welcomeMsgforDes" className="form-label">
Welcome Message for Description*
</label>
<input
type="text"
className="form-control"
style={{ width: "300px" }}
id="welcomeMsgforDes"
placeholder="Eg: Welcome to "
value={welcomemsgforDescription}
onChange={(e) => setWelcomeMsgForDescription(e.target.value)}
/>
<label htmlFor="title" className="form-label">
Description *
</label>
<textarea
type="text"
className="form-control"
id="description"
rows="10"
cols="100"
value={description}
placeholder="your message..."
onChange={(e) => setDescription(e.target.value)}
></textarea>
</div>
</Box>
</div>
);
}

32
src/views/CustomerSupport/MessageList.js
View File

@ -1,32 +0,0 @@
import React from 'react';
import { Paper } from '@material-ui/core';
const MessageList = ({ messages }) => {
return (
<>
{messages.map((msg, index) => (
<div key={index} style={{ marginBottom: '10px' }}>
<Paper
elevation={3}
style={{
padding: '10px',
backgroundColor: msg.user === 'user' ? 'white' : 'lightgray',
}}
>
<div style={{ fontWeight: 'bold', marginBottom: '5px' }}>
{msg.user === 'user' ? 'User' : 'Admin'}
</div>
<div style={{ fontWeight: 'bold', marginBottom: '5px' }}>
{msg.replyDate}
</div>
<div>{msg.message}</div>
</Paper>
</div>
))}
</>
);
};
export default MessageList;

346
src/views/CustomerSupport/SupportReply.js
View File

@ -1,346 +0,0 @@
import React, { useEffect, useState } from "react";
// import Button from "@material-ui/core/Button";
import { Link, useNavigate, useParams } from "react-router-dom";
import swal from "sweetalert";
import axios from "axios";
import { isAutheticated } from "src/auth";
import { Button, ImageList, InputLabel, ImageListItem } from "@mui/material";
import MessageList from "./MessageList";
import { useDispatch, useSelector } from "react-redux";
import toast from "react-hot-toast";
const SupportReply = () => {
const token = isAutheticated();
const navigate = useNavigate();
const [data, setData] = useState({
user: "admin",
replyDate: "",
message: "",
});
const [loading, setLoading] = useState(false);
const handleChange = (e) => {
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
};
const options = {
weekday: "short", // Abbreviated weekday (e.g., "Tue")
day: "numeric", // Numeric day (e.g., "5")
month: "short", // Abbreviated month (e.g., "Mar")
year: "numeric", // Numeric year (e.g., "2024")
hour: "numeric", // Numeric hour (e.g., "10")
minute: "2-digit", // Two-digit minute (e.g., "27")
hour12: true, // Use 12-hour clock (true/false)
};
const { ticketID } = useParams();
const [ticketDetails, setticketDetails] = useState(null);
const [fetchData, setFetchData] = useState(false);
const getSupportTicketDetails = async () => {
// console.log(ticketID);
axios
.get(`/api/support/getOne/${ticketID}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
// console.log(res?.data);
// setticketDetails(res.data?.support);
// setTicket(res.data?.support);
console.log(res.data?.support);
getuserName(res.data?.support);
// setLoading(false);
})
.catch((error) => {
swal({
title: error,
text: "please login to access the resource or refresh the page ",
icon: "error",
button: "Retry",
dangerMode: true,
});
// setLoading(false);
});
};
// ************************************
// updating message in backend************
const handleSubmit = () => {
if (data.message.trim() === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = {
message: data.message,
replyDate: new Date().toLocaleString("en-US", options),
user: "admin",
};
axios
.patch(
`/api/support/update/${ticketID}`,
{
message: formData,
},
{
headers: {
Authorization: `Bearer ${token}`,
},
}
)
.then((res) => {
toast.success("Message Sent successfully!");
setLoading(false);
setData({ message: "" });
setFetchData(true);
navigate("/support/request", { replace: true });
})
.catch((error) => {
swal({
title: "Error",
text: "Something went wrong",
icon: "error",
button: "Close",
});
});
};
// ************************************
const getuserName = async (ticket) => {
try {
const userId = ticket.addedBy;
let resp = await axios.get(`/api/v1/admin/user/${userId}`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
console.log(resp?.data?.user?.name);
const userName = resp?.data?.user?.name;
const userMailId = resp?.data?.user?.email;
// console.log(userName);
// Update support ticket with user name
const ticketWithUserName = {
...ticket,
userName: userName,
userMailId: userMailId,
};
setticketDetails(ticketWithUserName);
} catch (error) {
// Handle errors
}
};
React.useEffect(() => {
getSupportTicketDetails();
setFetchData(false);
}, [fetchData]);
// ************************************
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">
Support Chat
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
{/* <Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSubmit()}
disabled={loading}
>
{loading ? "Loading" : "Submit"}
</Button> */}
{/* <Button
variant="outlined"
color="error"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
swal({
title: "Warning",
text: "Are you sure you want to go back?",
icon: "error",
buttons: ["No", "Yes"], // Specify the buttons array
dangerMode: true,
}).then((value) => {
if (value) {
navigate("/support/request", { replace: true });
} else {
return;
}
});
}}
>
Back
</Button> */}
</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">
<div className="mb-3">
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
Ticket ID: {ticketDetails?.ticketId}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
User ID: {ticketDetails?.addedBy}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
User Name: {ticketDetails?.userName}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
User MailId: {ticketDetails?.userMailId}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
Date and Time: {ticketDetails?.createdOn}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
Subject: {ticketDetails?.subject}
</InputLabel>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
Description:{" "}
{ticketDetails?.description
? ticketDetails?.description
: "No Description"}
</InputLabel>
</div>
<div className="mb-3">
{ticketDetails?.image?.length > 0 && (
<div>
<InputLabel htmlFor="name" sx={{ mt: 1, mb: 2 }}>
Image:
</InputLabel>
<ImageList sx={{ width: 500 }} cols={3} rowHeight={164}>
{ticketDetails?.image?.map((item) => (
<ImageListItem key={item.public_id}>
<img
srcSet={`${item.url}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
src={`${item.url}?w=164&h=164&fit=crop&auto=format`}
alt={item.title || "No image"}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
</div>
)}
</div>
<div className="mb-3">
{ticketDetails && (
<MessageList messages={ticketDetails?.message} />
)}
</div>
<div className="mb-3">
<label htmlFor="title" className="form-label">
Message *
</label>
<textarea
type="text"
className="form-control"
id="message"
rows="10"
cols="100"
value={data.message}
placeholder="your message..."
maxLength="500"
onChange={(e) => handleChange(e)}
></textarea>
{data.message ? (
<>
<small className="charLeft mt-4 fst-italic">
{500 - data.message.length} characters left
</small>
</>
) : (
<></>
)}
</div>
<div className="mb-3">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSubmit()}
disabled={loading}
>
{loading ? "Loading" : "Submit"}
</Button>
{/* <Link to="/support/request"> */}
<Button
variant="outlined"
color="error"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
swal({
title: "Warning",
text: "Are you sure you want to go back?",
icon: "error",
buttons: ["No", "Yes"], // Specify the buttons array
dangerMode: true,
}).then((value) => {
if (value) {
navigate("/support/request", { replace: true });
} else {
return;
}
});
}}
>
Back
</Button>
{/* </Link> */}
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default SupportReply;

428
src/views/CustomerSupport/SupportRequest.js
View File

@ -1,428 +0,0 @@
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Button from "@material-ui/core/Button";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { isAutheticated } from "src/auth";
import { useDispatch, useSelector } from "react-redux";
import { CircularProgress, TextField } from "@material-ui/core";
import { cilSearch } from "@coreui/icons";
import CIcon from "@coreui/icons-react";
import Fuse from "fuse.js";
const SupportRequest = () => {
const token = isAutheticated();
const navigate = useNavigate();
const [loading, setLoading] = useState(true);
const [SupportRequestsData, setSupportRequestsData] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [itemPerPage, setItemPerPage] = useState(10);
const [showData, setShowData] = useState(SupportRequestsData);
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => {
setTimeout(() => {
if (searchTerm !== "") {
let searchedResult = [];
searchedResult = SupportRequestsData.filter((item) =>
item.ticketId.toString().includes(searchTerm)
);
setShowData(searchedResult);
}
else{
getSupportTicketsData();
}
}, 100);
}, [searchTerm]);
const handleShowEntries = (e) => {
setCurrentPage(1);
setItemPerPage(e.target.value);
};
const getSupportTicketsData = async () => {
axios
.get(`/api/support/getAll/`, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setSupportRequestsData(
res.data?.support.filter((ticket) => ticket.status === "Open")
);
// setLoading(false);
})
.catch((error) => {
swal({
title: error,
text: "please login to access the resource or refresh the page ",
icon: "error",
button: "Retry",
dangerMode: true,
});
setLoading(false);
});
};
React.useEffect(() => {
setLoading(true);
getSupportTicketsData();
}, [token]);
const statusupdate = (ticketId) => {
axios
.patch(
`/api/support/update/${ticketId}`,
{
status: "Close",
},
{
headers: {
Authorization: `Bearer ${token}`,
},
}
)
.then((res) => {
swal({
title: "Success",
text: "Ticket Closed Successfully",
icon: "success",
button: "Close",
});
getSupportTicketsData();
})
.catch((error) => {
swal({
title: "Error",
text: "Something went wrong",
icon: "error",
button: "Close",
});
});
};
useEffect(() => {
// const loadData = () => {
const indexOfLastPost = currentPage * itemPerPage;
const indexOfFirstPost = indexOfLastPost - itemPerPage;
setShowData(SupportRequestsData.slice(indexOfFirstPost, indexOfLastPost));
setLoading(false);
// };
// loadData();
}, [currentPage, itemPerPage, SupportRequestsData]);
return (
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<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">
Customer Support Requests
</div>
<div className="page-title-right"></div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div
className="card-body
"
>
<div className="d-flex align-items-center">
<div className="row ml-0 mr-0 mb-10">
<div className="col-sm-12 col-md-12">
<div className="dataTables_length">
<label className="w-auto">
Show
<select
style={{ width: "50px" }}
name=""
onChange={(e) => handleShowEntries(e)}
className="select-w custom-select custom-select-sm form-control form-control-sm"
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
</div>
<div className="ml-2 mt-2">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => {
navigate(`/support/request`, {
replace: true,
});
}}
>
Open Requests
</Button>
<Button
variant="outlined"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
navigate(`/support/request/closed`, {
replace: true,
});
}}
>
Close Requests
</Button>
</div>
{/* ********* */}
<div className="ml-5 mt-2">
<TextField
type="text"
placeholder="Search by Ticket ID"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<CIcon
icon={cilSearch}
size="xl"
/>
</div>
{/* ********** */}
</div>
<div className="table-responsive table-shoot mt-3">
<table
className="table table-centered table-nowrap"
style={{ border: "1px solid" }}
>
<thead
className="thead-info"
style={{ background: "rgb(140, 213, 213)" }}
>
<tr>
<th className="text-start">Ticket ID</th>
<th className="text-start">Subject</th>
<th className="text-start">Created On</th>
<th className="text-start">Last Reply</th>
<th className="text-start">Status</th>
<th
className="text-start"
style={{ paddingLeft: "15px" }}
>
Action
</th>
</tr>
</thead>
<tbody>
{!loading && showData.length === 0 && (
<tr className="text-center">
<td colSpan="6">
<h5>No Open Tickets Available</h5>
</td>
</tr>
)}
{loading ? (
<tr>
<td className="text-center" colSpan="6">
{/* Loading... */}
<CircularProgress />
</td>
</tr>
) : (
showData.map((ticket, i) => {
return (
<tr key={i}>
<td className="text-start">{ticket.ticketId}</td>
<td className="text-start">{ticket.subject}</td>
<td className="text-start">{ticket.createdOn}</td>
<td className="text-start">{ticket.lastreply}</td>
<td className="text-start">{ticket.status}</td>
<td className="text-start">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => {
navigate(
`/support/request/reply/${ticket.ticketId}`,
{
replace: true,
}
);
}}
>
Reply
</Button>
<Button
variant="outlined"
color="error"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
color: "red",
}}
onClick={() => {
swal({
title: "Warning",
text: "Are you sure you want to Close This Ticket?",
icon: "error",
buttons: ["No", "Yes"],
dangerMode: true,
}).then((value) => {
if (value) {
statusupdate(ticket.ticketId);
} else {
return;
}
});
}}
>
Close
</Button>
</td>
</tr>
);})
)}
</tbody>
</table>
</div>
<div className="row mt-20">
<div className="col-sm-12 col-md-6 mb-20">
<div
className="dataTables_info"
id="datatable_info"
role="status"
aria-live="polite"
>
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
{Math.min(
currentPage * itemPerPage,
SupportRequestsData.length
)}{" "}
of {SupportRequestsData.length} entries
</div>
</div>
<div className="col-sm-12 col-md-6">
<div className="d-flex">
<ul className="pagination ms-auto">
<li
className={
currentPage === 1
? "paginate_button page-item previous disabled"
: "paginate_button page-item previous"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev - 1)}
>
Previous
</span>
</li>
{!(currentPage - 1 < 1) && (
<li className="paginate_button page-item">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={(e) =>
setCurrentPage((prev) => prev - 1)
}
>
{currentPage - 1}
</span>
</li>
)}
<li className="paginate_button page-item active">
<span
className="page-link"
style={{ cursor: "pointer" }}
>
{currentPage}
</span>
</li>
{!(
(currentPage + 1) * itemPerPage - itemPerPage >
SupportRequestsData.length - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => {
setCurrentPage((prev) => prev + 1);
}}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
!(
(currentPage + 1) * itemPerPage - itemPerPage >
SupportRequestsData.length - 1
)
? "paginate_button page-item next"
: "paginate_button page-item next disabled"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev + 1)}
>
Next
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default SupportRequest;

379
src/views/CustomerSupport/SupportRequestClosed.js
View File

@ -1,379 +0,0 @@
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Button from "@material-ui/core/Button";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { isAutheticated } from "src/auth";
import { useDispatch, useSelector } from "react-redux";
import { CircularProgress, TextField } from "@material-ui/core";
import { cilSearch } from "@coreui/icons";
import CIcon from "@coreui/icons-react";
import Fuse from "fuse.js";
const SupportRequestClosed = () => {
const token = isAutheticated();
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(true);
const [status, setStatus] = useState("");
const [SupportRequestsData, setSupportRequestsData] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [itemPerPage, setItemPerPage] = useState(10);
const [showData, setShowData] = useState(SupportRequestsData);
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => {
setTimeout(() => {
if (searchTerm !== "") {
let searchedResult = [];
searchedResult = SupportRequestsData.filter((item) =>
item.ticketId.toString().includes(searchTerm)
);
setShowData(searchedResult);
} else {
getSupportTicketsData();
}
}, 100);
}, [searchTerm]);
const handleShowEntries = (e) => {
setCurrentPage(1);
setItemPerPage(e.target.value);
};
const [ticketsData, setticketsData] = React.useState([]);
const getSupportTicketsData = async () => {
axios
.get(`/api/support/getAll/`, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
setSupportRequestsData(
res.data?.support.filter((ticket) => ticket.status === "Close")
);
setLoading(false);
})
.catch((error) => {
swal({
title: error,
text: "please login to access the resource or refresh the page ",
icon: "error",
button: "Retry",
dangerMode: true,
});
setLoading(false);
});
};
React.useEffect(() => {
setLoading(true);
getSupportTicketsData();
}, [token]);
// console.log(showData);
//********************************* */
useEffect(() => {
const loadData = () => {
const indexOfLastPost = currentPage * itemPerPage;
const indexOfFirstPost = indexOfLastPost - itemPerPage;
setShowData(SupportRequestsData.slice(indexOfFirstPost, indexOfLastPost));
};
loadData();
}, [currentPage, itemPerPage, SupportRequestsData]);
return (
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<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">
Closed Customer Support Requests
</div>
<div className="page-title-right"></div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div
className="card-body
"
>
<div className="d-flex align-items-center">
<div className="row ml-0 mr-0 mb-10">
<div className="col-sm-12 col-md-12">
<div className="dataTables_length">
<label className="w-auto">
Show
<select
style={{ width: "50px" }}
name=""
onChange={(e) => handleShowEntries(e)}
className="select-w custom-select custom-select-sm form-control form-control-sm"
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
</div>
<div className="ml-2 mt-2">
<Button
variant="contained"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => {
navigate(`/support/request`, {
replace: true,
});
}}
>
Open Requests
</Button>
<Button
variant="outlined"
color="error"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
color: "red",
}}
onClick={() => {
navigate(`/support/request/closed`, {
replace: true,
});
}}
>
Close Requests
</Button>
</div>
{/* ********* */}
<div className="ml-5 mt-2">
<TextField
type="text"
placeholder="Search by Ticket ID"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<CIcon
icon={cilSearch}
size="xl"
// onClick={() => handleSearch(searchTerm)}
/>
</div>
{/* ********** */}
</div>
<div className="table-responsive table-shoot mt-3">
<table
className="table table-centered table-nowrap"
style={{ border: "1px solid" }}
>
<thead
className="thead-info"
style={{ background: "rgb(140, 213, 213)" }}
>
<tr>
<th className="text-start">Ticket ID</th>
<th className="text-start">Subject</th>
<th className="text-start">Created On</th>
<th className="text-start">Last Reply</th>
<th className="text-start">Status</th>
<th
className="text-start"
style={{ paddingLeft: "15px" }}
>
Action
</th>
{/* <th className="text-start">Action</th> */}
</tr>
</thead>
<tbody>
{!loading && showData.length === 0 && (
<tr className="text-center">
<td colSpan="6">
<h5>No Close Tickets Available</h5>
</td>
</tr>
)}
{loading ? (
<tr>
<td className="text-center" colSpan="6">
{/* Loading... */}
<CircularProgress />
</td>
</tr>
) : (
showData.map((ticket, i) => {
return (
<tr key={i}>
<td className="text-start">
{ticket.ticketId}
</td>
<td className="text-start">{ticket.subject}</td>
<td className="text-start">
{ticket.createdOn}
</td>
<td className="text-start">
{ticket.lastreply}
</td>
<td className="text-start">{ticket.status}</td>
<td className="text-start">
<Link
to={`/support/request/closed/${ticket.ticketId}`}
>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
>
View
</Button>
</Link>
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
<div className="row mt-20">
<div className="col-sm-12 col-md-6 mb-20">
<div
className="dataTables_info"
id="datatable_info"
role="status"
aria-live="polite"
>
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
{Math.min(
currentPage * itemPerPage,
SupportRequestsData.length
)}{" "}
of {SupportRequestsData.length} entries
</div>
</div>
<div className="col-sm-12 col-md-6">
<div className="d-flex">
<ul className="pagination ms-auto">
<li
className={
currentPage === 1
? "paginate_button page-item previous disabled"
: "paginate_button page-item previous"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev - 1)}
>
Previous
</span>
</li>
{!(currentPage - 1 < 1) && (
<li className="paginate_button page-item">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={(e) =>
setCurrentPage((prev) => prev - 1)
}
>
{currentPage - 1}
</span>
</li>
)}
<li className="paginate_button page-item active">
<span
className="page-link"
style={{ cursor: "pointer" }}
>
{currentPage}
</span>
</li>
{!(
(currentPage + 1) * itemPerPage - itemPerPage >
SupportRequestsData.length - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => {
setCurrentPage((prev) => prev + 1);
}}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
!(
(currentPage + 1) * itemPerPage - itemPerPage >
SupportRequestsData.length - 1
)
? "paginate_button page-item next"
: "paginate_button page-item next disabled"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev + 1)}
>
Next
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default SupportRequestClosed;

394
src/views/Home/editPanel1.js
View File

@ -1,394 +0,0 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import { Box, TextField, Checkbox, FormControlLabel } from "@mui/material";
const EditPanel1 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState(null);
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get Blogdata
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel1/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
setTitle(res?.data?.panel1[0]?.title);
setimage(res?.data?.panel1[0]?.image);
setContent(res?.data?.panel1[0]?.content);
setOlderContent(res?.data?.panel1[0]?.content);
setDisplayPanel(res?.data?.panel1[0]?.displayPanel);
setId(res?.data?.panel1[0]?._id);
setImg(false);
} catch (err) {
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || Img === false || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
console.log(public_id);
const ary = public_id?.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post("/api/panel/panel1/add", formData, {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 1 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel1/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
if (olderContent.length === 0) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
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">
Panel 1
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ "aria-label": "controlled" }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 1 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{image !== null ? (
<Box marginRight={"2rem"}>
<img
src={
image?.url ||
(newUpdatedImages &&
URL.createObjectURL(newUpdatedImages)) ||
null
}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
{console.log("image", image)}
{ image?.public_id&&<DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>}
</Box>
) : null}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default EditPanel1;

409
src/views/Home/editPanel2.js
View File

@ -1,409 +0,0 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import {
Box,
TextField,
Checkbox,
FormControlLabel
} from "@mui/material";
const EditPanel2 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState("");
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get panel data
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel2/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (res?.status === 200) {
setTitle(res?.data?.panel2[0]?.title);
setimage(res?.data?.panel2[0]?.image);
setContent(res?.data?.panel2[0]?.content);
setOlderContent(res?.data?.panel2[0]?.content);
setDisplayPanel(res?.data?.panel2[0]?.displayPanel);
setId(res?.data?.panel2[0]?._id);
setImg(false);
}
} catch (err) {
console.error(err)
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
const ary = public_id?.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post(
"/api/panel/panel2/add",
formData,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 2 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel2/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
console.log(olderContent)
if (olderContent?.length === 0 || olderContent===undefined) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
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">
Panel 2
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 2 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{image && (
<Box marginRight={"2rem"}>
<img
src={newUpdatedImages ? URL.createObjectURL(newUpdatedImages) : image ? image?.url : ""}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
{ image?.public_id&& <DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>}
</Box>
)}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default EditPanel2;

407
src/views/Home/editPanel3.js
View File

@ -1,407 +0,0 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import {
Box,
TextField,
Checkbox,
FormControlLabel
} from "@mui/material";
const EditPanel3 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState("");
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get Blogdata
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel3/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (res?.status === 200) {
setTitle(res?.data?.panel3[0]?.title);
setimage(res?.data?.panel3[0]?.image);
setContent(res?.data?.panel3[0]?.content);
setOlderContent(res?.data?.panel3[0]?.content);
setDisplayPanel(res?.data?.panel3[0]?.displayPanel);
setId(res?.data?.panel3[0]?._id);
setImg(false);
}
} catch (err) {
console.error(err)
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || Img === false || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
const ary = public_id?.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post(
"/api/panel/panel3/add",
formData,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 3 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel3/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
if (olderContent.length === 0) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
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">
Panel 3
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 3 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{image && (
<Box marginRight={"2rem"}>
<img
src={newUpdatedImages ? URL.createObjectURL(newUpdatedImages) : image ? image?.url : ""}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
{ image?.public_id&&<DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>}
</Box>
)}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default EditPanel3;

402
src/views/Home/editPanel4.js
View File

@ -1,402 +0,0 @@
import { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link } from "react-router-dom";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import axios from "axios";
import { isAutheticated } from "src/auth";
const TOOLBAR_OPTIONS = [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ font: [] }],
[{ list: "ordered" }, { list: "bullet" }],
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ align: [] }],
[{ script: "super" }, { script: "sub" }],
["undo", "redo"],
];
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
import { Box, TextField, Checkbox, FormControlLabel } from "@mui/material";
const Editpanel4 = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(false);
const [displayPanel, setDisplayPanel] = useState(false);
const [content, setContent] = useState("");
const [olderContent, setOlderContent] = useState("");
const [image, setimage] = useState("");
const [title, setTitle] = useState("");
const [error, setError] = useState("");
const [newUpdatedImages, setNewUpdatedImages] = useState(null);
const [Img, setImg] = useState(true);
const [id, setId] = useState(null);
const handleContentChange = (content, delta, source, editor) => {
setContent(editor.getHTML());
};
//get Blogdata
const getPanel = async () => {
try {
const res = await axios.get(`/api/panel/panel4/get`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (res?.status === 200) {
setTitle(res?.data?.panel4[0]?.title);
if (
res?.data?.panel4[0]?.image !== undefined &&
res?.data?.panel4[0]?.image !== null
) {
setimage(res?.data?.panel4[0]?.image);
}
setContent(res?.data?.panel4[0]?.content);
setOlderContent(res?.data?.panel4[0]?.content);
setDisplayPanel(res?.data?.panel4[0]?.displayPanel);
setId(res?.data?.panel4[0]?._id);
setImg(false);
}
} catch (err) {
console.error(err);
swal({
title: "Error",
text: "Unable to fetch the panel content",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getPanel();
}, []);
const handleFileChange = (e) => {
const files = e.target.files;
// Reset error state
setError("");
// Check if more than one image is selected
if (files.length > 1 || newUpdatedImages !== null) {
setError("You can only upload one image.");
return;
}
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
const file = files[0]; // Only one file is selected, so we get the first one
if (allowedTypes.includes(file.type)) {
setNewUpdatedImages(file);
setimage(file);
} else {
setError("Please upload only PNG, JPEG, or JPG files.");
}
};
const handelDelete = async (public_id) => {
const ary = public_id?.split("/");
setNewUpdatedImages(null);
const res = await axios.delete(
`/api/v1/blog/deleteImage/jatinMor/Blog/${ary[2]}`,
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
);
if (res) {
setimage(null);
setImg(true);
}
};
const addContent = async () => {
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
formData.append("image", image);
const response = await axios.post("/api/panel/panel4/add", formData, {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (response.status == 201) {
swal({
title: "Congratulations!!",
text: "Panel 4 added successfully!",
icon: "success",
button: "OK",
});
}
};
const updateContent = () => {
if (title === "" || content === "") {
swal({
title: "Warning",
text: "Fill all mandatory fields",
icon: "error",
button: "Close",
dangerMode: true,
});
return;
}
setLoading(true);
const formData = new FormData();
formData.append("title", title);
formData.append("content", content);
formData.append("displayPanel", displayPanel);
if (newUpdatedImages !== null) {
formData.append("image", newUpdatedImages);
}
axios
.patch(`/api/panel/panel4/update/${id}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
swal({
title: "Updated",
text: " Updated successfully!",
icon: "success",
button: "ok",
});
setLoading(false);
})
.catch((err) => {
setLoading(false);
const message = err.response?.data?.message
? err.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: message,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleSaveClick = async () => {
if (!olderContent) {
addContent();
} else {
updateContent();
}
// // Reload terms and conditions
// await getPrivacyPolicy();
};
const handleChange = (event) => {
setDisplayPanel(event.target.checked);
};
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">
Panel 4
</div>
<div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4>
</div>
<div className="page-title-right">
<FormControlLabel
control={
<Checkbox
checked={displayPanel}
onChange={handleChange}
inputProps={{ "aria-label": "controlled" }}
/>
}
label="Display Panel"
/>
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
marginRight: "5px",
}}
onClick={() => handleSaveClick()}
disabled={loading}
>
{"Save"}
</Button>
<Link to="/home">
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<div className="mb-3">
<label htmlFor="title" className="form-label">
Panel 4 Title
</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Enter title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label htmlFor="image" className="form-label">
Panel Image
</label>
<Box>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
multiple
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "100px",
height: "100px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
marginLeft: "0.5rem",
marginTop: "0.5rem",
}}
fontSize="large"
/>
</Box>
</label>
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<div>
<strong className="fs-6 fst-italic">
*You cannot upload more than 1 image
</strong>
</div>
<Box style={{ display: "flex" }}>
{image && (
<Box marginRight={"2rem"}>
<img
src={
newUpdatedImages
? URL.createObjectURL(newUpdatedImages)
: image
? image?.url
: ""
}
alt="Panel Image"
style={{
width: 350,
height: 270,
marginBottom: "1rem",
}}
/>
{image?.public_id && (
<DeleteSharpIcon
onClick={() => handelDelete(image?.public_id)}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
)}
</Box>
)}
</Box>
</div>
</div>
</div>
</div>
<div className="col-lg-6 col-md-6 col-sm-12 my-1">
<div className="card h-100">
<div className="card-body px-5">
<label>Panel Content</label>
<ReactQuill
theme="snow"
value={content}
onChange={handleContentChange}
modules={{ toolbar: TOOLBAR_OPTIONS }}
/>
</div>
</div>
</div>
</div>
</div>
);
};
export default Editpanel4;

165
src/views/Home/home.js
View File

@ -1,165 +0,0 @@
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
} from "@mui/material";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { isAutheticated } from "src/auth";
export default function Home() {
const [displayPanel1,setDisplayPanel1] = useState("Not Displayed");
const [displayPanel2,setDisplayPanel2] = useState("Not Displayed");
const [displayPanel3,setDisplayPanel3] = useState("Not Displayed");
const [displayPanel4,setDisplayPanel4] = useState("Not Displayed");
const [loading, setLoading] = useState(false);
let token = isAutheticated();
async function getPanelStatus(){
try {
setLoading(true)
let response1 = await axios.get('/api/panel/panel1/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
})
let response2 = await axios.get('/api/panel/panel2/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
});
let response3 = await axios.get('/api/panel/panel3/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
});
let response4 = await axios.get('/api/panel/panel4/get', {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
}
});
if(response1 && response2 && response3 && response4){
if(response1?.data?.panel1[0]?.displayPanel){
setDisplayPanel1("Displayed")
}
if(response2?.data?.panel2[0]?.displayPanel){
setDisplayPanel2("Displayed");
}
if(response3?.data?.panel3[0]?.displayPanel){
setDisplayPanel3("Displayed");
}
if(response4?.data?.panel4[0]?.displayPanel){
setDisplayPanel4("Displayed");
}
setLoading(false);
}
} catch (error) {
console.error(error);
}
}
useEffect(()=>{
getPanelStatus()
},[])
const pages = [
{
name: "Panel 1",
action: "Edit",
path: "/home/panel-1",
status:displayPanel1
},
{
name: "Panel 2",
action: "Edit",
path: "/home/panel-2",
status:displayPanel2
},
{
name: "Panel 3",
action: "Edit",
path: "/home/panel-3",
status:displayPanel3
},
{
name: "Panel 4",
action: "Edit",
path: "/home/panel-4",
status:displayPanel4
},
];
return (
<div className="main-home">
<Typography variant="h6" fontWeight={"bold"}>
Home
</Typography>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={{ fontWeight: "bold" }}>Page</TableCell>
<TableCell style={{ fontWeight: "bold" }} align="right">
Display Status
</TableCell>
<TableCell style={{ fontWeight: "bold" }} align="right">
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{pages.map((row) => (
<TableRow
key={row.name}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right" sx={{pr:4}}>
{loading ? "loading" : `${row.status}`}
</TableCell>
<TableCell align="right">
{" "}
<Link to={row.path}>
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-info btn-sm
waves-effect waves-light
btn-table
mt-1
mx-1
"
>
{row.action}
</button>
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
}

706
src/views/Images/ShopImage.js
View File

@ -1,706 +0,0 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
import { isAutheticated } from "src/auth";
import {
Button,
Box,
IconButton,
Modal,
Pagination,
TextField,
Typography,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { ClipLoader } from "react-spinners";
import swal from "sweetalert";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteSharpIcon from "@mui/icons-material/DeleteSharp";
const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
borderRadius: "0.5rem",
boxShadow: 24,
width: "500px",
};
const Banners = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(true);
const [updating, setUpdating] = useState(true); // for loading state
// const [isUpdate, setIsUpdate] = useState(false); // for edit state
const [saveLoding, setSaveLoading] = useState(true);
const [edit, setEdit] = useState(false);
const [bannerName, setBannerName] = useState("");
const [bannerImage, setBannerImage] = useState("");
const [error, setError] = useState("");
const [bannerId, setBannerId] = useState("");
const [banner, setBanner] = useState([]);
const [itemPerPage, setItemPerPage] = useState(10);
const [page, setPage] = useState(1);
const [open, setOpen] = useState(false);
const [olderBannerName, setOlderBaannerName] = useState("");
const [olderImage, setOlderImage] = useState("");
const handleOpen = () => setOpen(true);
const handleClose = () => {
setOpen(false);
// setUpdating(false);
setEdit(false);
setBannerName("");
setBannerId("");
setOlderImage("");
setBannerImage("");
};
const getBanner = async () => {
try {
const response = await axios.get("/api/shopImage/getImage", {
// headers: {
// Authorization: `Bearer ${token}`,
// },
});
if (response.status === 200) {
// console.log(response);
setBanner(response?.data?.image);
setLoading(false);
}
} catch (error) {
swal({
title: error,
text: " please login to access the resource ",
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
useEffect(() => {
getBanner();
}, []);
// }, [token, banner]);
const handleEditClick = (_id, bannerImage) => {
setOpen(true);
console.log("bannerImage", bannerImage);
setOlderImage(bannerImage);
setBannerId(_id);
setOlderBaannerName(bannerName);
setEdit(true);
// setUpdating(false);
};
// const bannerNamesArray = [];
// const setBannerNamesArray = () => {
// banner &&
// banner.map((banner) => {
// bannerNamesArray.push(banner.bannerName.toLowerCase());
// });
// };
// setBannerNamesArray();
const handleUpdate = () => {
// const filteredArrayNames = bannerNamesArray.filter(
// (item) => item !== olderBannerName.toLowerCase()
// );
// console.log(filteredArrayNames, "filter");
// const bannerExits = filteredArrayNames.includes(bannerName.toLowerCase());
// if (bannerExits) {
// swal({
// title: "Warning",
// text: "Banner already exists ",
// icon: "error",
// button: "Retry",
// dangerMode: true,
// });
// return;
// }
if (!bannerImage && !olderImage) {
swal({
title: "Warning",
text: "Please fill all the required fields!",
icon: "error",
button: "Retry",
dangerMode: true,
});
return;
}
setUpdating(false);
const formData = new FormData();
formData.append("bannerImage", bannerImage);
formData.append("olderImage", JSON.stringify(olderImage));
axios
.patch(`/api/shopImage/update/${bannerId}`, formData, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
// setUpdating(true);
// setIsUpdate(false);
handleClose();
setBannerId("");
setBannerName("");
setBannerImage("");
setOlderImage("");
setUpdating(true);
setEdit(false);
swal({
title: "Congratulations!!",
text: "The banner was updated successfully!",
icon: "success",
button: "OK",
});
// getCategories(); // Refresh the category list after updating
})
.catch((err) => {
// console.log(err);
swal({
title: "Sorry, please try again",
text: err,
icon: "error",
button: "Retry",
dangerMode: true,
});
setUpdating(true);
});
};
const handleDelete = (_id) => {
swal({
title: "Are you sure?",
icon: "error",
buttons: {
Yes: { text: "Yes", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((value) => {
if (value === true) {
axios
.delete(`/api/shopImage/delete/${_id}`, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
swal({
title: "Congratulations!!",
text: "The banner was deleted successfully!",
icon: "success",
button: "OK",
});
// getCategories(); // Refresh the category list after deleting
})
.catch((err) => {
swal({
title: "",
text: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
});
};
const handleSaveBanner = async () => {
// const bannerExits = bannerNamesArray.includes(bannerName.toLowerCase());
// if (bannerExits) {
// swal({
// title: "Warning",
// text: "Banner Already exits.",
// icon: "error",
// button: "Retry",
// dangerMode: true,
// });
// return;
// }
if (!bannerImage) {
swal({
title: "Warning",
text: "Please fill all the required fields!",
icon: "error",
button: "Retry",
dangerMode: true,
});
return;
}
setSaveLoading(false);
setLoading(true);
const formData = new FormData();
formData.append("bannerName", bannerName);
formData.append("bannerImage", bannerImage);
axios
.post("/api/shopImage/add", formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/formdata",
},
})
.then((response) => {
if (response.status === 201) {
setOpen(false);
setLoading(false);
setSaveLoading(true);
setBannerName("");
setBannerImage("");
setOlderImage("");
swal({
title: "Added",
text: "New Banner added successfully!",
icon: "success",
button: "OK",
});
// getCategories(); // Refresh the category list after adding
}
})
.catch((error) => {
setSaveLoading(true);
swal({
title: error,
text: "something went wrong",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
// const getPageCount = () => {
// return Math.max(1, Math.ceil(banner?.length / itemPerPage));
// };
const handleFileChange = (e) => {
const files = e.target.files[0];
// Check file types and append to selectedFiles
const allowedTypes = ["image/jpeg", "image/png", "image/jpg"];
if (allowedTypes.includes(files.type)) {
setBannerImage(files);
}
};
const handeldeleteImage = () => {
setBannerImage("");
};
return (
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<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">
Shop Page Image
</div>
<div className="page-title-right">
{/* <Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={handleOpen}
// onClick={() => {
// navigate("/testimonial/new", { replace: true });
// }}
>
Add New Banner
</Button> */}
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style}>
{/* <Box p={2} display={"flex"}>
<Typography
id="modal-modal-title"
variant="body"
component="h2"
flex={1}
>
Banner Name
</Typography>
<IconButton onClick={() => handleClose()}>
<CloseIcon />
</IconButton>
</Box> */}
{/* <hr /> */}
{/* <TextField
placeholder="Banner name"
value={bannerName}
fullWidth
inputProps={{
maxLength: 25,
}}
style={{
padding: "1rem",
}}
onChange={(e) =>
setBannerName(
e.target.value.charAt(0).toUpperCase() +
e.target.value.slice(1)
)
}
/> */}
{/* {bannerName ? (
<>
<small className="charLeft mt-2 ml-3 fst-italic">
{25 - bannerName.length} characters left
</small>
</>
) : (
<></>
)} */}
<Box
style={{
padding: "1rem",
}}
>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "140px",
height: "140px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
}}
fontSize="large"
/>
</Box>
</label>
{bannerImage && (
<Box>
<img
src={URL.createObjectURL(bannerImage)}
alt="bannerImage"
style={{
width: 100,
height: 100,
borderRadius: "1rem",
marginLeft: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handeldeleteImage()}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
{olderImage && (
<Box>
<img
src={olderImage?.secure_url}
alt="bannerImage"
style={{
width: 100,
height: 100,
borderRadius: "1rem",
marginLeft: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => setOlderImage("")}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<p className="pt-1 pl-2 text-secondary">
Upload jpg, jpeg and png only*
</p>
<Box
p={2}
display={"flex"}
justifyContent={"right"}
// width={"500px"}
>
{!edit && (
<button
style={{
color: "white",
marginRight: "1rem",
}}
onClick={() => handleSaveBanner()}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
<ClipLoader loading={!saveLoding} size={18} />
{saveLoding && "Save"}
</button>
)}
{edit && (
<button
style={{
color: "white",
marginRight: "1rem",
}}
onClick={() => handleUpdate()}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
<ClipLoader loading={!updating} size={18} />
{updating && "update"}
</button>
)}
<button
style={{
color: "black",
marginRight: "1rem",
background: "grey",
}}
onClick={() => setOpen(false)}
type="button"
className="
btn btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
Close
</button>
</Box>
</Box>
</Modal>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10">
<div className="col-sm-12 col-md-12">
{/* <div className="dataTables_length">
<label className="w-100">
Show
<select
style={{ width: "10%" }}
onChange={(e) => setItemPerPage(e.target.value)}
className="
select-w
custom-select custom-select-sm
form-control form-control-sm
"
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div> */}
</div>
</div>
<div className="table-responsive table-shoot mt-3">
<table
className="table table-centered table-nowrap"
style={{ border: "1px solid" }}
>
<thead
className="thead-info"
style={{ background: "rgb(140, 213, 213)" }}
>
<tr>
<th> Image</th>
<th>Action</th>
<th>Dimension</th>
</tr>
</thead>
<tbody>
{!loading && banner?.length === 0 && (
<tr className="text-center">
<td colSpan="6">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={handleOpen}
// onClick={() => {
// navigate("/testimonial/new", { replace: true });
// }}
>
Add New Image
</Button>
</td>
</tr>
)}
{loading ? (
<tr>
<td className="text-center" colSpan="6">
Loading...
</td>
</tr>
) : (
banner &&
banner.map((item, i) => (
<tr key={i}>
<td>
<img
className="me-2"
src={item?.image?.secure_url}
width="40"
alt=""
/>
{/* {item?.image} */}
<h5>{} </h5>
</td>
{/* <td>
<h5>{item.bannerName} </h5>
</td> */}
<td className="text-start">
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className=" btn btn-primary btn-sm waves-effect waves-light btn-table mx-1 mt-1 "
onClick={() =>
handleEditClick(item._id, item.image)
}
>
Edit
</button>
{/* <button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-sm btn-primary
waves-effect waves-light
btn-table
mx-1
mt-1
"
onClick={() => handleDelete(item._id)}
>
view
</button> */}
</td>
<td>1200 x 800 pixels</td>
</tr>
))
)}
</tbody>
</table>
</div>
{/* <div style={{ display: "flex", justifyContent: "right" }}>
<Pagination
style={{ margin: "2rem" }}
variant="outlined"
size="large"
count={getPageCount()}
color="primary"
onChange={(event, value) => setPage(value)}
/>
</div> */}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Banners;

650
src/views/Patients/Patient.js
View File

@ -1,650 +0,0 @@
import React, { useState, useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import Button from "@material-ui/core/Button";
import { useNavigate } from "react-router-dom";
import { isAutheticated } from "src/auth";
import swal from "sweetalert";
const Patient = () => {
const token = isAutheticated();
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(true);
const [patientsData, setPatientsData] = useState([]);
const nameRef = useRef();
// const categoryRef = useRef();
const mobileRef = useRef()
const VerifyPatientRef = useRef();
const [currentPage, setCurrentPage] = useState(1);
const [itemPerPage, setItemPerPage] = useState(10);
const [totalData, setTotalData] = useState(0);
// const {
// edit,
// add,
// delete: deletepermission,
// } = checkPermission("Patient Master");
const getPatientsData = async () => {
setLoading(true);
await axios
.get(`/api/patient/getAll/`, {
headers: {
Authorization: `Bearer ${token}`,
},
params: {
page: currentPage,
show: itemPerPage,
name: nameRef.current.value,
mobileNumber: mobileRef.current.value,
isVerified: VerifyPatientRef.current.value,
},
})
.then((res) => {
// console.log("res.data?.data", res.data);
setPatientsData(res.data?.patient);
setTotalData(res.data?.total_data);
setLoading(false);
})
.catch((err) => {
const msg = err?.response?.data?.message || "Something went wrong!";
swal({
title: err,
text: msg,
icon: "error",
button: "Retry",
dangerMode: true,
});
setLoading(false);
});
setLoading(false);
};
// const getCatagories = () => {
// axios
// .get(`/api/category/getCategories`, {
// headers: {
// "Access-Control-Allow-Origin": "*",
// Authorization: `Bearer ${token}`,
// },
// })
// .then((res) => {
// setCategories(res?.data?.categories);
// });
// };
// useEffect(() => {
// getCatagories();
// }, []);
useEffect(() => {
getPatientsData();
}, [success, itemPerPage, currentPage]);
const handleDelete = (id) => {
swal({
title: "Are you sure?",
icon: "error",
buttons: {
Yes: { text: "Yes", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((value) => {
if (value === true) {
axios
.delete(`/api/patient/delete/${id}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
swal({
title: "Deleted",
text: "Patient Deleted successfully!",
icon: "success",
button: "ok",
});
setSuccess((prev) => !prev);
})
.catch((err) => {
let msg = err?.response?.data?.message
? err?.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: msg,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
});
};
const handleVerifydPatient = (id) => {
swal({
title: "Are you sure?",
icon: "warning",
buttons: {
Yes: { text: "Yes", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((value) => {
if (value === true) {
axios
.patch(`/api/patient/admin/feature_product/status/${id}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
swal({
title: "Changed",
text: " Verify Patient status changed successfully!",
icon: "success",
button: "ok",
});
setSuccess((prev) => !prev);
})
.catch((err) => {
let msg = err?.response?.data?.msg
? err?.response?.data?.msg
: "Something went wrong!";
swal({
title: "Warning",
text: msg,
icon: "warning",
button: "ok",
dangerMode: true,
});
});
}
});
};
const handleStatus = (id) => {
swal({
title: "Are you sure?",
icon: "warning",
buttons: {
Yes: { text: "Yes", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((value) => {
if (value === true) {
axios
.patch(`/api/patient/admin/status/${id}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
swal({
title: "Changed",
text: "Patient status changed successfully!",
icon: "success",
button: "ok",
});
setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
});
};
return (
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<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">
Patients
</div>
{/* <div className="page-title-right">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
navigate("/patient/add", { replace: true });
}}
>
Add Patient
</Button>
</div> */}
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10">
<div className="col-lg-1">
<div className="dataTables_length">
<label className="w-100">
Show
<select
onChange={(e) => {
setItemPerPage(e.target.value);
setCurrentPage(1);
}}
className="form-control"
disabled={loading}
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
<div className="col-lg-3">
<label>Patient Name:</label>
<input
type="text"
placeholder="Patient name"
className="form-control"
ref={nameRef}
disabled={loading}
/>
</div>
<div className="col-lg-3">
<label>Mobile Number:</label>
<input
type="text"
placeholder="Mobile Number"
className="form-control"
ref={mobileRef}
disabled={loading}
/>
</div>
{/* <div className="col-lg-3">
<label>Filter by Mobile No.:</label>
<select
className="form-control"
ref={categoryRef}
disabled={loading}
>
<option value="">All</option>
{categories?.map((e, i) => (
<option key={i} value={e._id}>
{e?.categoryName}
</option>
))}
</select>
</div> */}
<div className="col-lg-3">
<label>Verify Patient:</label>
<select
className="form-control"
ref={VerifyPatientRef}
disabled={loading}
>
<option value="">----Select----</option>
<option value="true">YES</option>
<option value="false">NO</option>
</select>
</div>
<div className="col-lg-2">
<button
className="btn btn-primary ms-1 mt-4"
onClick={() => {
getPatientsData();
setCurrentPage(1);
}}
disabled={loading}
>
{loading ? "Searching.." : "Filter"}
</button>
</div>
</div>
<div className="table-responsive table-shoot mt-3">
<table
className="table table-centered table-nowrap"
style={{ border: "1px solid" }}
>
<thead
className="thead-light"
style={{ background: "#ecdddd" }}
>
<tr>
{/* <th className="text-start">Image</th> */}
<th className="text-start">Name</th>
{/* <th className="text-start">Category</th> */}
<th className="text-start">Mobile No.</th>
{/* <th className="text-start">Price</th> */}
<th className="text-start">Email</th>
<th className="text-start">Verify</th>
<th className="text-start">Device Added</th>
<th className="text-start">Register On</th>
<th className="text-start">Action</th>
</tr>
</thead>
<tbody>
{loading ? (
<tr>
<td className="text-center" colSpan="6">
Loading...
</td>
</tr>
) : patientsData?.length > 0 ? (
patientsData?.map((patient, i) => {
return (
<tr key={i}>
{/* <th>
{patient?.image &&
patient?.image?.length !== 0 ? (
<>
<img
src={patient?.image[0]?.url}
width="50"
alt="preview"
/>
</>
) : (
<div
className=""
style={{ fontSize: "13px" }}
>
<p className="m-0">No</p>
<p className="m-0">image</p>
<p className="m-0">uploaded!</p>
</div>
)}
</th> */}
<td className="text-start">{patient?.name}</td>
<td className="text-start">{patient?.mobileNumber}</td>
<td className="text-start">{patient?.email ? patient?.email : <><small className="m-0 text-secondary">No Email Added!</small>
</>}</td>
<td className="text-start">
<span className={`badge text-white ${patient?.isVerified === true
? "text-bg-success"
: "text-bg-danger"
}`}>
{patient?.isVerified ? "YES" : "NO"}
</span>
</td>
<td className="text-start">
<span className={`badge text-white ${patient?.deviceAdded === true
? "text-bg-success"
: "text-bg-danger"
}`}>
{patient?.deviceAdded ? "YES" : "NO"}
</span>
</td>
<td className="text-start">
{new Date(patient.createdAt).toLocaleString(
"en-IN",
{
weekday: "short",
month: "short",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
hour12: true,
}
)}
</td>
<td className="text-start">
{/* <Link to={`/patients/variants/${patient._id}`}>
<button
style={{ color: 'white', marginRight: '1rem' }}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
Variants
</button>
</Link> */}
<Link
to={`/patient/view/${patient._id}`}
// to={`/patient/view/${patient._id}`}
>
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-primary btn-sm
waves-effect waves-light
btn-table
mx-1
mt-1
"
>
View
</button>
</Link>
{/* <Link to={`/patient/edit/${patient._id}`}>
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="
btn btn-info btn-sm
waves-effect waves-light
btn-table
mt-1
mx-1
"
>
Edit
</button>
</Link> */}
<Link
to={"#"}
style={{
marginRight: "1rem",
}}
>
<button
style={{ color: "white" }}
type="button"
className="
btn btn-danger btn-sm
waves-effect waves-light
btn-table
mt-1
mx-1
"
onClick={() => {
handleDelete(patient._id);
}}
>
Delete
</button>
</Link>
</td>
</tr>
);
})
) : (
!loading &&
patientsData?.length === 0 && (
<tr className="text-center">
<td colSpan="6">
<h5>No Patient Available...</h5>
</td>
</tr>
)
)}
</tbody>
</table>
</div>
<div className="row mt-20">
<div className="col-sm-12 col-md-6 mb-20">
<div
className="dataTables_info"
id="datatable_info"
role="status"
aria-live="polite"
>
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
{Math.min(currentPage * itemPerPage, totalData)} of{" "}
{totalData} entries
</div>
</div>
<div className="col-sm-12 col-md-6">
<div className="d-flex">
<ul className="pagination ms-auto">
<li
className={
currentPage === 1
? "paginate_button page-item previous disabled"
: "paginate_button page-item previous"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev - 1)}
disabled={loading}
>
Previous
</span>
</li>
{!(currentPage - 1 < 1) && (
<li className="paginate_button page-item">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={(e) =>
setCurrentPage((prev) => prev - 1)
}
disabled={loading}
>
{currentPage - 1}
</span>
</li>
)}
<li className="paginate_button page-item active">
<span
className="page-link"
style={{ cursor: "pointer" }}
>
{currentPage}
</span>
</li>
{!(
(currentPage + 1) * itemPerPage - itemPerPage >
totalData - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => {
setCurrentPage((prev) => prev + 1);
}}
disabled={loading}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
!(
(currentPage + 1) * itemPerPage - itemPerPage >
totalData - 1
)
? "paginate_button page-item next"
: "paginate_button page-item next disabled"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev + 1)}
disabled={loading}
>
Next
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Patient;

263
src/views/Patients/ViewPatient.js
View File

@ -1,263 +0,0 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { isAutheticated } from "src/auth";
const ViewPatient = () => {
// const id = useParams()?.id;
const location = useLocation();
const { currencyDetails } = location.state || {};
const { id } = useParams();
const token = isAutheticated();
const [patientData, setPatientData] = useState({});
const [SAW, setSAW] = useState([
{ volume: "", weight: "" },
{ volume: "", weight: "" },
{ volume: "", weight: "" },
{ volume: "", weight: "" },
{ volume: "", weight: "" },
]);
const navigate = useNavigate();
const getPatientData = async () => {
axios
.get(`/api/patient/getOne/${id}`, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
console.log(res.data.data);
setPatientData(res.data.data);
if (res.data.data?.variants) {
setSAW((prev) => [...res.data.data?.variants]);
}
})
.catch((err) => { });
};
useEffect(() => {
getPatientData();
}, []);
const onCancel = () => {
navigate("//patients");
};
let count = 1;
return (
<div className=" main-content">
<div className=" my-3 page-content">
<div className="container-fluid">
{/* <!-- start page title --> */}
<div className="row">
<div className="col-12">
<div className="page-title-box d-flex align-items-center justify-content-between">
<h4 className="mb-3">Patient Details</h4>
<button
onClick={onCancel}
type="button"
className="mb-2 ml-2 btn btn-warning btn-cancel waves-effect waves-light mr-3"
>
Back
</button>
</div>
</div>
</div>
{/* <!-- end page title --> */}
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10"></div>
<div className="table-responsive table-shoot">
<table className="table table-centered table-nowrap mb-0">
<thead className="thead-light">
<tr>
<th>Name</th>
<td>{patientData?.name}</td>
</tr>
<tr>
<th>Patient Group</th>
<td>{patientData?.category?.categoryName}</td>
</tr>
<tr>
<th>Images</th>
<td>
{patientData?.image &&
patientData?.image?.length !== 0
? patientData?.image.map((e, i) => (
<img
className="p-1"
src={e.url}
width="100"
alt="preview"
key={i}
/>
))
: "No Images Uploaded!"}
</td>
</tr>
<tr>
<th>Description</th>
<td>{patientData?.description}</td>
</tr>
<tr>
<th>Patient Status</th>
<td
className={`badge m-1 ${patientData?.patient_Status === "Active"
? "text-bg-success"
: "text-bg-danger"
}`}
>
{patientData?.patient_Status}
</td>
</tr>
<tr>
<th>Special Instructions</th>
<td>
<p
style={{ whiteSpace: "pre-line" }}
className="m-0 p-0"
>
{patientData?.special_instructions
? patientData?.special_instructions
: "---"}
</p>
</td>
</tr>
</thead>
<tbody></tbody>
</table>
<table className="table table-primary mt-3">
<caption
style={{ captionSide: "top" }}
className="text-dark fw-bold"
>
Varients:
</caption>
<thead>
<tr>
<th className="text-center">Variant Name</th>
<th className="text-center">Price</th>
<th className="text-center">VAT</th>
</tr>
</thead>
<tbody>
{SAW.map(
(r, i) =>
r.variant_Name !== "" && (
<tr key={i}>
<td className="text-center">
{r?.variant_Name}
</td>
<td className="text-center">
{currencyDetails?.CurrencySymbol}
{r?.price}
</td>
<td className="text-center">
{r?.gst_Id?.name + " " + r?.gst_Id?.tax + "%"}
</td>
</tr>
)
)}
{SAW.filter((e) => e.variant_Name !== "").length ===
0 && (
<tr>
<td colSpan={"6"} className="text-center">
No data available
</td>
</tr>
)}
</tbody>
</table>
{/* <div className="mb-2">
<table className="table table-secondary mt-3">
<caption
style={{ captionSide: "top" }}
className="text-dark fw-bold"
>
Patient Fabric:
</caption>
{patientData?.patient_Fabric?.length > 0 ? (
<>
<thead>
<tr>
<th className="text-center">S. No.</th>
<th className="text-center"> Name</th>
<th className="text-center"> Use For Part</th>
</tr>
</thead>
<tbody>
{patientData?.patient_Fabric?.map((r, i) => (
<tr key={i}>
<td className="text-center">{++i}</td>
<td className="text-center">
{r?.fabric_Name}
</td>
<td className="text-center">{r?.for_Part}</td>
</tr>
))}
</tbody>
</>
) : (
<>
<h5>No Fabric Allotted for this patient!</h5>
</>
)}
</table>
</div> */}
{/* <div className="mb-2">
<table className="table table-info mt-3">
<caption
style={{ captionSide: "top" }}
className="text-dark fw-bold"
>
Relevent Patient:
</caption>
{patientData?.relevent_patient?.length > 0 ? (
<>
<thead>
<tr>
<th className="text-center">S. No.</th>
<th className="text-center">Patient Name</th>
</tr>
</thead>
<tbody>
{patientData?.relevent_patient?.map((r, i) => (
<tr key={i}>
<td className="text-center">{count++}</td>
<td className="text-center">{r?.name}</td>
</tr>
))}
</tbody>
</>
) : (
<>
<h5>No relevent item for this patient !</h5>
</>
)}
</table>
</div> */}
</div>
{/* <!-- end table-responsive --> */}
</div>
</div>
</div>
</div>
</div>
{/* <!-- container-fluid --> */}
</div>
</div>
);
};
export default ViewPatient;

77
src/views/PointOfSale/AddressSelectionModal.js
View File

@ -1,77 +0,0 @@
import React from "react";
import Modal from "react-modal";
const AddressSelectionModal = ({ isOpen, onClose, addresses, onSelect }) => {
const modalStyle = {
overlay: {
backgroundColor: "rgba(0, 0, 0, 0.5)",
},
content: {
top: "50%",
left: "50%",
right: "auto",
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
maxWidth: "800px",
width: "90%",
},
};
const tableStyle = {
width: "100%",
borderCollapse: "collapse",
};
const thTdStyle = {
border: "1px solid #ddd",
padding: "8px",
};
const thStyle = {
...thTdStyle,
backgroundColor: "#f2f2f2",
};
// console.log(addresses);
return (
<Modal isOpen={isOpen} onRequestClose={onClose} style={modalStyle}>
<h2>Select Address</h2>
<table style={tableStyle}>
<thead>
<tr>
<th style={thStyle}>First Name</th>
<th style={thStyle}>Last Name</th>
<th style={thStyle}>Phone Number</th>
<th style={thStyle}>Street</th>
<th style={thStyle}>City</th>
<th style={thStyle}>Postal Code</th>
<th style={thStyle}>State</th>
{/* Add additional columns as needed */}
</tr>
</thead>
<tbody>
{addresses.map((address, index) => (
<tr
key={index}
onClick={() => onSelect(address)}
style={{ cursor: "pointer", ...thTdStyle }}
>
<td>{address.first_Name}</td>
<td>{address.last_Name}</td>
<td>{address.phone_Number}</td>
<td>{address.street}</td>
<td>{address.city}</td>
<td>{address.postalCode}</td>
<td>{address.state}</td>
{/* Add additional columns as needed */}
</tr>
))}
</tbody>
</table>
<button onClick={onClose}>Close</button>
</Modal>
);
};
export default AddressSelectionModal;

1242
src/views/PointOfSale/Pos.js
View File

File diff suppressed because it is too large Load Diff

2
src/views/Products/Productcomponents/ProductDetails.js
View File

@ -165,7 +165,7 @@ const ProductDetails = (props) => {
</div>
<div className="col-lg-6 ">
<label htmlFor="product" className="form-label">
Master VAT *
Master GST *
</label>
<select
name="master_GST"

2
src/views/Products/ViewProduct.js
View File

@ -177,7 +177,7 @@ const ViewProduct = () => {
<th className="text-center">Variant Name</th>
<th className="text-center">Price</th>
<th className="text-center">VAT</th>
<th className="text-center">GST</th>
</tr>
</thead>
<tbody>

189
src/views/SalesCoOrdinators/AddSalesCoOrdinator.js Normal file
View File

@ -0,0 +1,189 @@
import React, { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import { isAutheticated } from "src/auth";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import swal from "sweetalert";
const AddSalesCoOrdinator = () => {
const navigate = useNavigate();
const token = isAutheticated();
const [formData, setFormData] = useState({
name: "",
email: "",
countryCode: "",
mobileNumber: "",
otp: "",
});
const [showModal, setShowModal] = useState(false);
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleRegister = async (e) => {
e.preventDefault();
try {
await axios.post("/api/salescoordinator/register", formData, {
headers: {
Authorization: `Bearer ${token}`,
},
});
setShowModal(true); // Show OTP modal after registration
} catch (error) {
console.error(error);
let msg =
error?.response?.data?.message ||
"Failed to register Sales Coordinator. Please try again.";
swal({
title: "Warning",
text: msg,
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
const handleVerifyOTP = async () => {
try {
await axios.post("/api/salescoordinator/verify-otp", {
otp: formData.otp,
fullMobileNumber: `${formData.countryCode}${formData.mobileNumber}`,
});
setShowModal(false); // Close OTP modal after verification
swal({
title: "Success",
text: "OTP verified successfully!",
icon: "success",
button: "OK",
}).then(() => {
navigate("/salescoordinators"); // Navigate to success page or desired route
});
} catch (error) {
console.error(error);
let msg =
error?.response?.data?.message ||
"OTP verification failed. Please try again.";
swal({
title: "Warning",
text: msg,
icon: "error",
button: "Retry",
dangerMode: true,
});
}
};
return (
<div className="main-content">
<div className="my-3 page-content">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div className="page-title-box d-flex align-items-center justify-content-between">
<h4 className="mb-3">Add Sales Coordinator</h4>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<form onSubmit={handleRegister}>
<div className="form-group">
<label>Name</label>
<input
type="text"
name="name"
className="form-control"
value={formData.name}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<label>Email</label>
<input
type="email"
name="email"
className="form-control"
value={formData.email}
onChange={handleChange}
required
/>
</div>
<div className="form-group d-flex">
<div className="mr-2" style={{ flex: 1 }}>
<label>Country Code</label>
<input
type="text"
name="countryCode"
className="form-control"
value={formData.countryCode}
onChange={handleChange}
required
/>
</div>
<div style={{ flex: 3 }}>
<label>Mobile Number</label>
<input
type="text"
name="mobileNumber"
className="form-control"
value={formData.mobileNumber}
onChange={handleChange}
required
/>
</div>
</div>
<button type="submit" className="btn btn-primary">
Register
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{/* OTP Modal */}
<Modal show={showModal} onHide={() => setShowModal(false)}>
<Modal.Header closeButton>
<Modal.Title>Enter OTP</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group>
<Form.Label>OTP</Form.Label>
<Form.Control
type="text"
placeholder="Enter OTP"
value={formData.otp}
onChange={(e) =>
setFormData({ ...formData, otp: e.target.value })
}
required
/>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={() => setShowModal(false)}>
Cancel
</Button>
<Button variant="primary" onClick={handleVerifyOTP}>
Verify OTP
</Button>
</Modal.Footer>
</Modal>
</div>
);
};
export default AddSalesCoOrdinator;

395
src/views/SalesCoOrdinators/EditSalesCoOrdinator.js Normal file
View File

@ -0,0 +1,395 @@
import React, { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";
import { isAutheticated } from "src/auth";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import swal from "sweetalert";
const EditSalesCoOrdinator = () => {
const navigate = useNavigate();
const token = isAutheticated();
const { id } = useParams();
const [formData, setFormData] = useState({
name: "",
email: "",
countryCode: "",
mobileNumber: "",
currentPassword: "",
newPassword: "",
confirmPassword: "",
otp: "",
});
const [showVerifyModal, setShowVerifyModal] = useState(false);
const [showPasswordModal, setShowPasswordModal] = useState(false);
useEffect(() => {
getSalesCoOrdinatorData();
}, []);
const getSalesCoOrdinatorData = async () => {
try {
const response = await axios.get(`/api/salescoordinator/getOne/${id}`, {
headers: {
Authorization: `Bearer ${token}`,
},
});
const { data } = response.data;
// Assuming country code always starts with + and is followed by 1-3 digits
const fullMobileNumber = data?.mobileNumber || "";
const countryCodeMatch = fullMobileNumber.match(/^\+\d{1,2}/);
const countryCode = countryCodeMatch ? countryCodeMatch[0] : "";
const mobileNumber = fullMobileNumber.replace(countryCode, "");
setFormData({
name: data?.name || "",
email: data?.email || "",
countryCode: countryCode,
mobileNumber: mobileNumber,
currentPassword: "",
newPassword: "",
confirmPassword: "",
otp: "",
});
} catch (error) {
console.error("Error fetching sales coordinator data: ", error);
}
};
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleUpdateBasicInfo = () => {
axios
.patch(
`/api/salescoordinator/profile/update/${id}`,
{
name: formData.name,
email: formData.email,
},
{
headers: {
Authorization: `Bearer ${token}`,
},
}
)
.then((response) => {
swal({
title: "Success",
text: "Sales coordinator information updated successfully!",
icon: "success",
button: "OK",
});
})
.catch((error) => {
let msg = error?.response?.data?.message || "Something went wrong!";
swal({
title: "Warning",
text: msg,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleVerifyMobile = () => {
axios
.post(
`/api/salescoordinator/update-mobile-number/${id}`,
{
newCountryCode: formData.countryCode,
newMobileNumber: formData.mobileNumber,
},
{
headers: {
Authorization: `Bearer ${token}`,
},
}
)
.then(() => {
setShowVerifyModal(true);
})
.catch((error) => {
let msg = error?.response?.data?.message || "Something went wrong!";
swal({
title: "Warning",
text: msg,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleVerifyOTP = () => {
axios
.post(
"/api/salescoordinator/verify-updated-mobile-otp",
{
otp: formData.otp,
newMobileNumber: `${formData.countryCode}${formData.mobileNumber}`,
},
{
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
}
)
.then(() => {
setShowVerifyModal(false);
// Handle success, if needed
})
.catch((error) => {
let msg = error?.response?.data?.message || "Something went wrong!";
swal({
title: "Warning",
text: msg,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const handleChangePassword = () => {
axios
.put(
`/api/salescoordinator/password/update/${id}`,
{
oldPassword: formData.currentPassword,
newPassword: formData.newPassword,
confirmPassword: formData.confirmPassword,
},
{
headers: {
Authorization: `Bearer ${token}`,
},
}
)
.then(() => {
setShowPasswordModal(false);
swal({
title: "Success",
text: "Password updated successfully!",
icon: "success",
button: "OK",
});
})
.catch((error) => {
let msg = error?.response?.data?.message || "Something went wrong!";
swal({
title: "Warning",
text: msg,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
};
const onCancel = () => {
navigate("/salescoordinators");
};
return (
<div className="main-content">
<div className="my-3 page-content">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div className="page-title-box d-flex align-items-center justify-content-between">
<h4 className="mb-3">Edit Sales Coordinator</h4>
<button
onClick={onCancel}
type="button"
className="btn btn-warning btn-cancel waves-effect waves-light mr-3"
>
Back
</button>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="form-group">
<label>Name</label>
<input
type="text"
name="name"
className="form-control"
value={formData.name}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<label>Email</label>
<input
type="email"
name="email"
className="form-control"
value={formData.email}
onChange={handleChange}
required
/>
</div>
<div className="mt-4 mb-4">
<button
type="button"
className="btn btn-primary mr-2"
onClick={handleUpdateBasicInfo}
>
Update
</button>
</div>
<div className="form-group d-flex align-items-center">
<div className="mr-2" style={{ flex: 1 }}>
<label>Country Code</label>
<input
type="text"
name="countryCode"
className="form-control"
value={formData.countryCode}
onChange={handleChange}
required
/>
</div>
<div className="mr-2" style={{ flex: 3 }}>
<label>Mobile Number</label>
<input
type="text"
name="mobileNumber"
className="form-control"
value={formData.mobileNumber}
onChange={handleChange}
required
/>
</div>
<div className="mr-2" style={{ flex: 1 }}>
<label>&nbsp;</label>
<button
type="button"
className="btn btn-success"
onClick={handleVerifyMobile}
style={{ display: "block" }}
>
Verify Mobile
</button>
</div>
</div>
<div className="mt-4 mb-4">
<button
type="button"
className="btn btn-danger"
onClick={() => setShowPasswordModal(true)}
>
Change Password
</button>
</div>
</div>
</div>
</div>
</div>
{/* OTP Verification Modal */}
<Modal
show={showVerifyModal}
onHide={() => setShowVerifyModal(false)}
>
<Modal.Header closeButton>
<Modal.Title>Verify Mobile</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group>
<Form.Label>Enter OTP</Form.Label>
<Form.Control
type="text"
placeholder="Enter OTP"
name="otp"
value={formData.otp}
onChange={handleChange}
/>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onClick={() => setShowVerifyModal(false)}
>
Cancel
</Button>
<Button variant="primary" onClick={handleVerifyOTP}>
Verify OTP
</Button>
</Modal.Footer>
</Modal>
{/* Change Password Modal */}
<Modal
show={showPasswordModal}
onHide={() => setShowPasswordModal(false)}
>
<Modal.Header closeButton>
<Modal.Title>Change Password</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group>
<Form.Label>Current Password</Form.Label>
<Form.Control
type="password"
placeholder="Enter current password"
name="currentPassword"
value={formData.currentPassword}
onChange={handleChange}
/>
</Form.Group>
<Form.Group>
<Form.Label>New Password</Form.Label>
<Form.Control
type="password"
placeholder="Enter new password"
name="newPassword"
value={formData.newPassword}
onChange={handleChange}
/>
</Form.Group>
<Form.Group>
<Form.Label>Confirm New Password</Form.Label>
<Form.Control
type="password"
placeholder="Confirm new password"
name="confirmPassword"
value={formData.confirmPassword}
onChange={handleChange}
/>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Button
variant="secondary"
onClick={() => setShowPasswordModal(false)}
>
Cancel
</Button>
<Button variant="danger" onClick={handleChangePassword}>
Change Password
</Button>
</Modal.Footer>
</Modal>
</div>
</div>
</div>
);
};
export default EditSalesCoOrdinator;

428
src/views/SalesCoOrdinators/SalesCoOrdinator.js Normal file
View File

@ -0,0 +1,428 @@
import React, { useState, useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import Button from "@material-ui/core/Button";
import { useNavigate } from "react-router-dom";
import { isAutheticated } from "src/auth";
import swal from "sweetalert";
const SalesCoOrdinator = () => {
const token = isAutheticated();
const navigate = useNavigate();
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(true);
const [salescoordinatorsData, setSalesCoOrdinatorsData] = useState([]);
const nameRef = useRef();
const mobileRef = useRef();
const VerifySalesCoOrdinatorRef = useRef();
const [currentPage, setCurrentPage] = useState(1);
const [itemPerPage, setItemPerPage] = useState(10);
const [totalData, setTotalData] = useState(0);
const getSalesCoOrdinatorsData = async () => {
setLoading(true);
try {
const res = await axios.get(`/api/salescoordinator/getAll/`, {
headers: {
Authorization: `Bearer ${token}`,
},
params: {
page: currentPage,
show: itemPerPage,
name: nameRef.current.value,
mobileNumber: mobileRef.current.value,
isVerified: VerifySalesCoOrdinatorRef.current.value,
},
});
// console.log(res.data.salesCoOrinators
// );
setSalesCoOrdinatorsData(res.data?.salesCoOrinators);
setTotalData(res.data?.total_data);
} catch (err) {
const msg = err?.response?.data?.message || "Something went wrong!";
swal({
title: "Error",
text: msg,
icon: "error",
button: "Retry",
dangerMode: true,
});
} finally {
setLoading(false);
}
};
useEffect(() => {
getSalesCoOrdinatorsData();
}, [success, itemPerPage, currentPage]);
const handleDelete = (id) => {
swal({
title: "Are you sure?",
icon: "error",
buttons: {
Yes: { text: "Yes", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((value) => {
if (value === true) {
axios
.delete(`/api/salescoordinator/delete/${id}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
swal({
title: "Deleted",
text: "SalesCoOrdinator Deleted successfully!",
icon: "success",
button: "ok",
});
setSuccess((prev) => !prev);
})
.catch((err) => {
let msg = err?.response?.data?.message
? err?.response?.data?.message
: "Something went wrong!";
swal({
title: "Warning",
text: msg,
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
});
};
return (
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<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">
SalesCoOrdinators
</div>
<div className="page-title-right">
<Button
variant="contained"
color="primary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
onClick={() => {
navigate("/salescoordinator/add", { replace: true });
}}
>
Add SalesCoOrdinator
</Button>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10">
<div className="col-lg-1">
<div className="dataTables_length">
<label className="w-100">
Show
<select
onChange={(e) => {
setItemPerPage(e.target.value);
setCurrentPage(1);
}}
className="form-control"
disabled={loading}
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
<div className="col-lg-3">
<label>SalesCoOrdinator Name:</label>
<input
type="text"
placeholder="SalesCoOrdinator name"
className="form-control"
ref={nameRef}
disabled={loading}
/>
</div>
<div className="col-lg-3">
<label>Mobile Number:</label>
<input
type="text"
placeholder="Mobile Number"
className="form-control"
ref={mobileRef}
disabled={loading}
/>
</div>
<div className="col-lg-3">
<label>Verify SalesCoOrdinator:</label>
<select
className="form-control"
ref={VerifySalesCoOrdinatorRef}
disabled={loading}
>
<option value="">----Select----</option>
<option value="true">YES</option>
<option value="false">NO</option>
</select>
</div>
<div className="col-lg-2">
<button
className="btn btn-primary ms-1 mt-4"
onClick={() => {
getSalesCoOrdinatorsData();
setCurrentPage(1);
}}
disabled={loading}
>
{loading ? "Searching.." : "Filter"}
</button>
</div>
</div>
<div className="table-responsive table-shoot mt-3">
<table className="table table-centered table-nowrap">
<thead
className="thead-light"
style={{ background: "#ecdddd" }}
>
<tr>
<th className="text-start">Name</th>
<th className="text-start">Mobile No.</th>
<th className="text-start">Email</th>
<th className="text-start">Verify</th>
<th className="text-start">Register On</th>
<th className="text-start">Action</th>
</tr>
</thead>
<tbody>
{loading ? (
<tr>
<td className="text-center" colSpan="6">
Loading...
</td>
</tr>
) : salescoordinatorsData?.length > 0 ? (
salescoordinatorsData?.map((salescoordinator, i) => {
return (
<tr key={i}>
<td className="text-start">
{salescoordinator?.name}
</td>
<td className="text-start">
{salescoordinator?.mobileNumber}
</td>
<td className="text-start">
{salescoordinator?.email ? (
salescoordinator?.email
) : (
<small className="m-0 text-secondary">
No Email Added!
</small>
)}
</td>
<td className="text-start">
<span
className={`badge text-white ${
salescoordinator?.isVerified === true
? "text-bg-success"
: "text-bg-danger"
}`}
>
{salescoordinator?.isVerified
? "YES"
: "NO"}
</span>
</td>
<td className="text-start">
{new Date(
salescoordinator.createdAt
).toLocaleString("en-IN", {
weekday: "short",
month: "short",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
hour12: true,
})}
</td>
<td className="text-start">
{/* <Link to={`/salescoordinator/view/${salescoordinator._id}`}>
<button
style={{ color: "white", marginRight: "1rem" }}
type="button"
className="btn btn-primary btn-sm waves-effect waves-light btn-table mx-1 mt-1"
>
View
</button>
</Link> */}
<Link
to={`/salescoordinator/edit/${salescoordinator._id}`}
>
<button
style={{
color: "white",
marginRight: "1rem",
}}
type="button"
className="btn btn-info btn-sm waves-effect waves-light btn-table mt-1 mx-1"
>
Edit
</button>
</Link>
<button
style={{ color: "white" }}
type="button"
className="btn btn-danger btn-sm waves-effect waves-light btn-table mt-1 mx-1"
onClick={() => {
handleDelete(salescoordinator._id);
}}
>
Delete
</button>
</td>
</tr>
);
})
) : (
<tr className="text-center">
<td colSpan="6">
<h5>No SalesCoOrdinator Available...</h5>
</td>
</tr>
)}
</tbody>
</table>
</div>
<div className="row mt-20">
<div className="col-sm-12 col-md-6 mb-20">
<div
className="dataTables_info"
id="datatable_info"
role="status"
aria-live="polite"
>
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
{Math.min(currentPage * itemPerPage, totalData)} of{" "}
{totalData} entries
</div>
</div>
<div className="col-sm-12 col-md-6">
<div className="d-flex">
<ul className="pagination ms-auto">
<li
className={
currentPage === 1
? "paginate_button page-item previous disabled"
: "paginate_button page-item previous"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev - 1)}
disabled={loading}
>
Previous
</span>
</li>
{!(currentPage - 1 < 1) && (
<li className="paginate_button page-item">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() =>
setCurrentPage((prev) => prev - 1)
}
disabled={loading}
>
{currentPage - 1}
</span>
</li>
)}
<li className="paginate_button page-item active">
<span className="page-link">{currentPage}</span>
</li>
{!(
(currentPage + 1) * itemPerPage - itemPerPage >
totalData - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() =>
setCurrentPage((prev) => prev + 1)
}
disabled={loading}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
!(
(currentPage + 1) * itemPerPage - itemPerPage >
totalData - 1
)
? "paginate_button page-item next"
: "paginate_button page-item next disabled"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev + 1)}
disabled={loading}
>
Next
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default SalesCoOrdinator;

190
src/views/configuration/Currency.js
View File

@ -150,45 +150,45 @@ const Currency = () => {
});
};
const handleDelete = (_id) => {
swal({
title: "Are you sure?",
icon: "error",
buttons: {
Yes: { text: "Yes", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((value) => {
if (value === true) {
axios
.delete(`/api/currency/${_id}`, {
headers: {
Authorization: `Bearer ${token}`,
},
})
.then((res) => {
swal({
title: "Congratulations!!",
text: "The Currency is deleted successfully!",
icon: "success",
button: "OK",
});
setSucess((prev) => !prev);
// const handleDelete = (_id) => {
// swal({
// title: "Are you sure?",
// icon: "error",
// buttons: {
// Yes: { text: "Yes", value: true },
// Cancel: { text: "Cancel", value: "cancel" },
// },
// }).then((value) => {
// if (value === true) {
// axios
// .delete(`/api/currency/${_id}`, {
// headers: {
// Authorization: `Bearer ${token}`,
// },
// })
// .then((res) => {
// swal({
// title: "Congratulations!!",
// text: "The Currency is deleted successfully!",
// icon: "success",
// button: "OK",
// });
// setSucess((prev) => !prev);
// getCategories(); // Refresh the category list after deleting
})
.catch((err) => {
swal({
title: "Error",
text: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
});
};
// // getCategories(); // Refresh the category list after deleting
// })
// .catch((err) => {
// swal({
// title: "Error",
// text: "Something went wrong!",
// icon: "error",
// button: "Retry",
// dangerMode: true,
// });
// });
// }
// });
// };
const handleSaveCurrency = async () => {
// const CurrencyExits = CurrencyNamesArray.includes(
@ -295,7 +295,7 @@ const Currency = () => {
</div>
<div className="page-title-right">
<Button
{/* <Button
variant="contained"
color="primary"
style={{
@ -309,7 +309,7 @@ const Currency = () => {
// }}
>
+ New Currency
</Button>
</Button> */}
<Modal
open={open}
onClose={handleClose}
@ -368,112 +368,6 @@ const Currency = () => {
}}
onChange={(e) => setCurrencySymbol(e.target.value)}
/>
{/* <Box
style={{
padding: "1rem",
}}
>
<label htmlFor="upload-Image">
<TextField
style={{
display: "none",
width: "350px",
height: "350px",
borderRadius: "10%",
}}
fullWidth
id="upload-Image"
type="file"
accept=".jpg , .png ,.jpeg"
label="file"
variant="outlined"
onChange={(e) => handleFileChange(e)}
/>
<Box
style={{ borderRadius: "10%" }}
sx={{
margin: "1rem 0rem",
cursor: "pointer",
width: "140px",
height: "140px",
border: "2px solid grey",
// borderRadius: '50%',
"&:hover": {
background: "rgba(112,112,112,0.5)",
},
}}
>
<CloudUploadIcon
style={{
color: "grey",
margin: "auto",
fontSize: "5rem",
}}
fontSize="large"
/>
</Box>
</label>
{CurrencyImage && (
<Box>
<img
src={URL.createObjectURL(CurrencyImage)}
alt="CurrencyImage"
style={{
width: 100,
height: 100,
borderRadius: "1rem",
marginLeft: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => handeldeleteImage()}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
{olderImage && (
<Box>
<img
src={olderImage?.secure_url}
alt="CurrencyImage"
style={{
width: 100,
height: 100,
borderRadius: "1rem",
marginLeft: "1rem",
}}
/>
<DeleteSharpIcon
onClick={() => setOlderImage("")}
fontSize="small"
sx={{
color: "white",
position: "absolute",
cursor: "pointer",
padding: "0.2rem",
background: "black",
borderRadius: "50%",
}}
/>
</Box>
)}
</Box>
{error && <p style={{ color: "red" }}>{error}</p>}
<p className="pt-1 pl-2 text-secondary">
Upload jpg, jpeg and png only*
</p> */}
<Box
p={2}
display={"flex"}
@ -654,7 +548,7 @@ const Currency = () => {
>
Edit
</button>
<button
{/* <button
style={{
color: "white",
marginRight: "1rem",
@ -671,7 +565,7 @@ const Currency = () => {
onClick={() => handleDelete(item._id)}
>
Delete
</button>
</button> */}
</td>
</tr>
))

17
src/views/configuration/Logo.js
View File

@ -27,12 +27,17 @@ function Logo() {
Authorization: `Bearer ${token}`,
},
});
configDetails.data.result.map((item) => {
setHeaderlogo(item?.logo[0]?.Headerlogo);
setFooterlogo(item?.logo[0]?.Footerlogo);
setAdminlogo(item?.logo[0]?.Adminlogo);
});
// console.log(configDetails.data.result[0]?.logo[0]);
const data = configDetails.data.result[0]?.logo[0];
setHeaderlogo(data?.Headerlogo);
setFooterlogo(data?.Footerlogo);
setAdminlogo(data?.Adminlogo);
// configDetails.data.result.map((item) => {
// console.log(item);
// setHeaderlogo(item?.logo[0]?.Headerlogo);
// setFooterlogo(item?.logo[0]?.Footerlogo);
// setAdminlogo(item?.logo[0]?.Adminlogo);
// });
}
getConfiguration();
}, []);

423
src/views/configuration/Web_Images.js
View File

@ -1,423 +0,0 @@
import React, { useEffect, useState } from "react";
import swal from "sweetalert";
import ClipLoader from "react-spinners/ClipLoader";
import { Link } from "react-router-dom";
import axios from "axios";
import { isAutheticated } from "src/auth";
import { object } from "prop-types";
function Web_Images() {
const [loading, setLoading] = useState(false);
const [RegisterImglogo, setRegisterImglogo] = useState("");
const [LoginImg, setLoginImg] = useState("");
const [ShopImg, setShopImg] = useState("");
const [display, setDisplay] = useState(true);
const token = isAutheticated();
// urlcreated images
const [RegisterImglogoUrl, setRegisterImglogoUrl] = useState("");
const [LoginImgUrl, setLoginImgUrl] = useState("");
const [ShopImgUrl, setShopImgUrl] = useState("");
useEffect(() => {
// async function getConfiguration() {
// const configDetails = await axios.get(`/api/config`, {
// headers: {
// Authorization: `Bearer ${token}`,
// },
// });
// console.log("configDetails.data.result", configDetails.data.result);
// configDetails.data.result.map((item) => {
// setRegisterImglogo(item?.logo[0]?.Adminlogo);
// setLoginImg(item?.logo[0]?.Footerlogo);
// setShopImg(item?.logo[0]?.Adminlogo);
// });
// }
const getRegisterImage = async () => {
const response = await axios.get("/api/registerImage/getImage", {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (response.status === 200) {
setRegisterImglogo(response?.data?.image[0]?.image?.secure_url);
}
};
const getLoginImage = async () => {
const response = await axios.get("/api/loginImage/getImage", {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (response.status === 200) {
setLoginImg(response?.data?.image[0]?.image?.secure_url);
}
};
const getShopImage = async () => {
const response = await axios.get("/api/shopImage/getImage", {
headers: {
Authorization: `Bearer ${token}`,
},
});
if (response.status === 200) {
setShopImg(response?.data?.image[0]?.image?.secure_url);
}
};
getRegisterImage();
getLoginImage();
getShopImage();
}, []);
// async function handelChange(e) {
// setDisplay(false);
// console.log(e.target.name === "Web_Images htmlFor Website RegisterImg(148 x 48 px)");
// if (e.target.name === "Web_Images htmlFor Website RegisterImg(148 x 48 px)") {
// console.log(e.target.files[0]);
// setRegisterImglogo(e.target.files[0]);
// } else if (e.target.name === "Web_Images htmlFor Website Footer(148 x 48 px)") {
// setLoginImg(e.target.files[0]);
// } else if (e.target.name === "Web_Images htmlFor Admin RegisterImg(148 x 48 px)") {
// setShopImg(e.target.files[0]);
// }
// }
const [Rloading, setRLoading] = useState(false);
async function handeRegister(e) {
e.preventDefault();
if (typeof RegisterImglogo !== "object" || RegisterImglogo === null) {
swal({
title: "Warning",
text: "Please select file",
icon: "warning",
button: "Ok",
dangerMode: true,
});
return;
}
const formdata = new FormData();
formdata.append("RegisterImglogo", RegisterImglogo);
setRLoading(true);
await axios
.post(`/api/registerImage/addmodify/`, formdata, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/formdata",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
setRLoading(false);
swal("Success!", res.data.message);
})
.catch((error) => {
setRLoading(false);
});
}
const [Lloading, setLLoading] = useState(false);
async function handeLogin(e) {
e.preventDefault();
if (typeof LoginImg !== "object" || LoginImg === null) {
swal({
title: "Warning",
text: "Please select file",
icon: "warning",
button: "Ok",
dangerMode: true,
});
return;
}
const formdata = new FormData();
formdata.append("LoginImg", LoginImg);
setLLoading(true);
await axios
.post(`/api/loginImage/addmodify/`, formdata, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/formdata",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
setLLoading(false);
swal("Success!", res.data.message);
})
.catch((error) => {
setLLoading(false);
});
}
const [Shoploading, setShoploading] = useState(false);
async function handeShopImage(e) {
e.preventDefault();
if (typeof ShopImg !== "object" || ShopImg === null) {
swal({
title: "Warning",
text: "Please select file",
icon: "warning",
button: "Ok",
dangerMode: true,
});
return;
}
const formdata = new FormData();
formdata.append("ShopImg", ShopImg);
setShoploading(true);
await axios
.post(`/api/shopImage/addmodify/`, formdata, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/formdata",
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
setShoploading(false);
swal("Success!", res.data.message);
})
.catch((error) => {
setShoploading(false);
});
}
// async function handelSubmit() {
// setLoading(true);
// const formdata = new FormData();
// formdata.append("RegisterImglogo", RegisterImglogo);
// formdata.append("LoginImg", LoginImg);
// formdata.append("ShopImg", ShopImg);
// await axios
// .post(`/api/config/logo`, formdata, {
// headers: {
// Authorization: `Bearer ${token}`,
// "Content-Type": "multipart/formdata",
// "Access-Control-Allow-Origin": "*",
// },
// })
// .then((res) => {
// setLoading(false);
// swal("Success!", res.data.message, res.data.status);
// })
// .catch((error) => {
// setLoading(false);
// });
// }
return (
<div>
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row">
<div className="col-md-12 col-lg-6 col-xl-6">
<h1 className="text-left head-small">Website Images</h1>
<form>
<div className="row">
<div className="col-lg-12">
<div className="form-group">
<>
<label
htmlFor="basicpill-phoneno-input"
className="label-100 mt-3"
style={{ fontWeight: "bold" }}
>
Register Image for Website(800 x 600 pixels){" "}
<br />
</label>
<div>
<input
type="file"
name="Register_Images htmlFor Website RegisterImg(800 x 600 pixels)"
onChange={(e) => {
setRegisterImglogo(e.target.files[0]);
if (
e.target.files &&
e.target.files[0]
) {
setRegisterImglogoUrl({
image: URL.createObjectURL(
e.target.files[0]
),
});
}
}}
className="form-control input-field mb-3 col-md-6 d-inline-block"
id="basicpill-phoneno-input"
/>
<button
className="mx-2 mb-1 btn btn-success"
onClick={(e) => handeRegister(e)}
>
<ClipLoader
loading={Rloading}
size={18}
/>
{!Rloading && "New"}
</button>
{display ? (
<img
className="ms-1"
style={{ width: "100px" }}
src={
RegisterImglogoUrl.image
? RegisterImglogoUrl.image
: RegisterImglogo
}
alt=""
/>
) : (
""
)}
</div>
<label
htmlFor="basicpill-phoneno-input"
className="label-100 mt-3"
style={{ fontWeight: "bold" }}
>
{/* Web_Images htmlFor Website Footer(148 x 48 px) */}
Login logo for Website(800 x 600 pixels){" "}
<br />
</label>
<br />
<input
type="file"
name="Web_Images htmlFor Website Footer(800 x 600 px)"
onChange={(e) => {
setLoginImg(e.target.files[0]);
if (e.target.files && e.target.files[0]) {
setLoginImgUrl({
image: URL.createObjectURL(
e.target.files[0]
),
});
}
}}
className="form-control input-field mt-1 col-md-6 d-inline-block"
id="basicpill-phoneno-input"
/>
<button
className="mx-2 btn mb-1 btn-success"
onClick={(e) => handeLogin(e)}
>
<ClipLoader loading={Lloading} size={18} />
{!Lloading && "New"}
</button>{" "}
{display ? (
<img
style={{ width: "100px" }}
src={
LoginImgUrl.image
? LoginImgUrl.image
: LoginImg
}
alt=""
/>
) : (
""
)}
<label
htmlFor="basicpill-phoneno-input"
className="label-100 mt-2 row ms-1"
style={{ fontWeight: "bold" }}
>
{/* Web_Images htmlFor Admin RegisterImg(148 x 48 px) */}
Shop Page Image for website(1200 x 800
pixels) <br />
</label>
<input
type="file"
name="Web_Images htmlFor Admin RegisterImg(1200 x 800 px)"
onChange={(e) => {
setShopImg(e.target.files[0]);
if (e.target.files && e.target.files[0]) {
setShopImgUrl({
image: URL.createObjectURL(
e.target.files[0]
),
});
}
}}
className="form-control input-field col-md-6 d-inline-block"
id="basicpill-phoneno-input"
/>
<button
className="mx-2 btn btn-login btn-success mb-1"
onClick={(e) => handeShopImage(e)}
>
<ClipLoader
loading={Shoploading}
size={18}
/>
{!Shoploading && "New"}{" "}
</button>{" "}
{display ? (
<img
style={{ width: "100px" }}
src={
ShopImgUrl.image
? ShopImgUrl.image
: ShopImg
}
alt=""
/>
) : (
""
)}
</>
</div>
</div>
</div>
{/* <div className="row">
<div className="col-lg-12">
<div className="form-group text-left">
<button
type="button"
disabled={
ShopImg === "" ||
LoginImg === "" ||
RegisterImglogo === ""
}
onClick={handelSubmit}
className="btn btn-success btn-login waves-effect waves-light mr-3 pt-2 pb-2 pr-4 pl-4"
>
<ClipLoader loading={loading} size={18} />
{!loading && "Save"}
</button>
</div>
</div>
</div> */}
</form>
</div>
</div>
{/* <!-- end table-responsive --> */}
</div>
</div>
</div>
</div>
</div>
{/* <!-- container-fluid --> */}
</div>
{/* <!-- End Page-content --> */}
</div>
</div>
);
}
export default Web_Images;

6
src/views/configuration/tax/Addtax.js
View File

@ -81,7 +81,7 @@ function Addtax() {
justify-content-between
"
>
<h4 className="mb-0">Add New VAT Rate</h4>
<h4 className="mb-0">Add New GST Rate</h4>
</div>
</div>
</div>
@ -102,7 +102,7 @@ function Addtax() {
Save
</button>
<Link to="/vat">
<Link to="/tax">
<button
type="button"
className="
@ -186,7 +186,7 @@ function Addtax() {
htmlFor="basicpill-phoneno-input"
className="label-100"
>
VAT Rate (in %)*
GST Rate (in %)*
</label>
<input
value={data.tax}

4
src/views/configuration/tax/Edittax.js
View File

@ -112,7 +112,7 @@ function Edittax() {
Save
</button>
<Link to="/vat">
<Link to="/tax">
<button
type="button"
className="
@ -196,7 +196,7 @@ function Edittax() {
htmlFor="basicpill-phoneno-input"
className="label-100"
>
VAT Rate (in %)*
GST Rate (in %)*
</label>
<input
value={data.tax}

4
src/views/configuration/tax/Tax.js
View File

@ -65,7 +65,7 @@ function Tax() {
className="fa fa-plus mb-2"
aria-hidden="true"
></i>{" "}
Add New VAT Rate
Add New GST Rate
</button>
</Link>
</div>
@ -79,7 +79,7 @@ function Tax() {
>
<tr>
<th>Name</th>
<th>VAT Rate</th>
<th>GST Rate</th>
<th>Action</th>
</tr>
</thead>

945
src/views/orders/POSViewOrders.js
View File

@ -1,945 +0,0 @@
import React, { useState, useEffect, useRef } from "react";
import axios from "axios";
import { Link, useNavigate, useParams } from "react-router-dom";
import QRCode from "react-qr-code";
import { isAutheticated } from "src/auth";
import { useDispatch, useSelector } from "react-redux";
import { addItemsToCart } from "src/redux/Actions/cartAction";
import toast from "react-hot-toast";
import { cibBlackberry } from "@coreui/icons";
import Button from "@material-ui/core/Button";
function POSViewOrders() {
const { status, id } = useParams();
const [success, setSuccess] = useState(true);
const { cartItems, subTotal, shippingCharge, tax, shipingInfo, total } =
useSelector((state) => state.cart);
const AllStates = useSelector((state) => state);
const getValue = useRef();
const getFranchiseeID = useRef();
const dispatch = useDispatch();
const navigate = useNavigate();
const printOrderRef = useRef();
const token = isAutheticated();
const [productData, setProductData] = useState([]);
const [allFranchisee, setAllFranchisee] = useState([]);
const [allTax, setAllTax] = useState([]);
const [orderDetails, setOrderDetails] = useState();
const [productDetails, setProductDetails] = useState();
const [loading, setLoading] = useState(true);
const [orderId, setOrderId] = useState(null);
const [orderStatus, setOrderStatus] = useState("");
// const [data, setData] = useState({
// product_Name: '',
// address: '',
// quantity: '',
// contact_Number: '',
// total_Price: '',
// })
useEffect(() => {
const getSingleOrder = async () => {
setLoading(true);
const res = await axios.get(`/api/order/getOne/${id}`, {
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
});
if (res.data) {
setLoading(false);
setOrderId(res.data?.order?.order_id);
setOrderDetails(res.data?.order);
console.log(res.data);
// let options = {
// Franchisee: res.data?.order?.shippingInfo?.Franchisee?._id,
// name: res.data?.order?.shippingInfo?.name,
// contact_Number: res.data?.order?.shippingInfo?.contact_Number,
// contact_Person_Name: res.data?.order?.shippingInfo?.contact_Person_Name,
// address: res.data?.order?.shippingInfo?.address,
// city: res.data?.order?.shippingInfo?.city,
// price_Lable: res.data?.order?.shippingInfo?.Franchisee?.price_Lable,
// state: res.data?.order?.shippingInfo?.state,
// banner: res.data?.order?.shippingInfo?.Franchisee?.banner?.url,
// // Franchisee_Url: res?.data?.data?.url
// }
// dispatch({ type: "addShippingInfo", payload: options });
// if (res.data?.order?.orderItems) {
// res.data?.order?.orderItems.map((i, ind) => {
// dispatch({ type: "addToCart", payload: i });
// dispatch({ type: "calculatePrice" });
// })
// }
}
};
getSingleOrder();
}, [token]);
const handleChange = (e) => {
if (e.target.type === "text") {
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
} else {
if (e.target.value === "") toast.error("please select status");
setOrderStatus(e.target.value);
}
};
const handleQuantityChange = (e) => {
setData((prev) => ({
...prev,
quantity: e.target.value,
total_Price: productDetails?.base_Price * e.target.value,
}));
};
// ------------------------------------------------------
const handlechangestatus = () => {
if (orderStatus === "dispatched") {
swal({
title: `Are you sure for ${orderStatus}?`,
icon: "warning",
content: {
element: "div",
attributes: {
innerHTML:
'<input id="input1" placeholder="Enter Courier Name" className="swal2-input" style="margin:3px;height:40px;text-align:center;">' +
'<input id="input2" placeholder="Courier Tracking ID" className="swal2-input" style="margin:3px;height:40px;text-align:center;">',
},
},
buttons: {
Yes: { text: "Submit", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((result) => {
if (result === true) {
// You have the input values, you can use them in your API call
const courierName = document.getElementById("input1").value.trim();
const TrackingID = document.getElementById("input2").value.trim();
// Check if values are entered
if (courierName === "" || TrackingID === "") {
swal({
title: "Warning",
text: "Please enter values Courier Name And Tracking ID",
icon: "warning",
button: "Ok",
dangerMode: true,
});
} else {
axios
.patch(
`/api/order/change/status/${id}`,
{
status: orderStatus,
courierName,
TrackingID,
sendemail: orderDetails?.user?.email,
customerName: orderDetails?.user?.name,
},
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
)
.then((res) => {
console.log("status");
toast.success(
`Order status change ${status} to ${orderStatus}`
);
// setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: err.response.data.message
? err.response.data.message
: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
}
// else {
// swal.close(); // Close the popup if canceled
// }
});
} else if (orderStatus === "cancelled") {
swal({
title: `Are you sure for ${orderStatus}?`,
icon: "warning",
content: {
element: "div",
attributes: {
innerHTML:
'<p>Reson for cancellation.?</p><input id="input1" placeholder="Enter Reason for Cancellation" className="swal2-input" style="margin:3px;height:40px;text-align:center;">',
},
},
buttons: {
Yes: { text: "Submit", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((result) => {
if (result === true) {
// You have the input values, you can use them in your API call
const ReasonforCancellation = document
.getElementById("input1")
.value.trim();
// Check if values are entered
if (ReasonforCancellation === "") {
swal({
title: "Warning",
text: "Please enter Reason for Cancellation",
icon: "warning",
button: "Ok",
dangerMode: true,
});
} else {
axios
.patch(
`/api/order/change/status/${id}`,
{
status: orderStatus,
ReasonforCancellation,
},
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
)
.then((res) => {
console.log("status");
toast.success(
`Order status change ${status} to ${orderStatus}`
);
// setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: err.response.data.message
? err.response.data.message
: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
}
// else {
// swal.close(); // Close the popup if canceled
// }
});
} else if (orderStatus === "delivered") {
swal({
title: `Are you sure for ${orderStatus}?`,
icon: "warning",
content: {
element: "div",
attributes: {
innerHTML:
'<input id="input1" type="date" placeholder="Delivered ON" className="swal2-input" style="height:40px;text-align:center;">',
// '<input id="input2" placeholder="Courier Tracking ID" className="swal2-input" style="margin:3px;height:40px">',
},
},
buttons: {
Yes: { text: "Submit", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((result) => {
if (result === true) {
// You have the input values, you can use them in your API call
const DDate = document.getElementById("input1").value.trim();
// Check if values are entered
if (DDate === "") {
swal({
title: "Warning",
text: "Please enter Delivered Date",
icon: "warning",
button: "Ok",
dangerMode: true,
});
} else {
axios
.patch(
`/api/order/change/status/${id}`,
{
status: orderStatus,
DDate,
},
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
)
.then((res) => {
console.log("status");
toast.success(
`Order status change ${status} to ${orderStatus}`
);
// setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: err.response.data.message
? err.response.data.message
: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
}
// else {
// swal.close(); // Close the popup if canceled
// }
});
} else {
swal({
title: `Are you sure for ${orderStatus}?`,
icon: "warning",
buttons: {
Yes: { text: "Yes", value: true },
Cancel: { text: "Cancel", value: "cancel" },
},
}).then((value) => {
if (value === true) {
axios
.patch(
`/api/order/change/status/${id}`,
{ status: orderStatus },
{
headers: {
"Access-Control-Allow-Origin": "*",
Authorization: `Bearer ${token}`,
},
}
)
.then((res) => {
console.log("status");
toast.success(`order status change ${status} to ${orderStatus}`);
// setSuccess((prev) => !prev);
})
.catch((err) => {
swal({
title: "Warning",
text: err.response.data.message
? err.response.data.message
: "Something went wrong!",
icon: "error",
button: "Retry",
dangerMode: true,
});
});
}
});
}
};
function getBack() {
navigate(`/orders/${status}`, { replace: true });
}
return (
<>
{" "}
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<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">
<p> View Order</p>
</div>
<div className="m-4">
{orderDetails?.orderID && (
<span>
<h6 className="">Order ID : {orderDetails?.orderID}</h6>{" "}
</span>
)}
</div>
{orderDetails?.courier_name && (
<div className="m-4">
<span>
<h6 className="">
Courier Name: {orderDetails?.courier_name}
</h6>{" "}
<h6 className="">
Tracking ID : {orderDetails?.courier_tracking_id}
</h6>
</span>
</div>
)}
{orderDetails?.isDelivered && (
<div className="m-4">
<span>
<h6 className="">Delivered: Yes</h6>{" "}
<h6 className="">
Delivered Date: {orderDetails?.DeliveredDate}
</h6>
</span>
</div>
)}
<div className="page-title-right">
{/* <Button
variant="contained"
color="primary"
style={{
fontWeight: 'bold',
marginBottom: '1rem',
textTransform: 'capitalize',
marginRight: '5px',
}}
onClick={() => handleSubmit()}
disabled={loading}
>
{loading ? 'Loading' : 'Edit Now'}
</Button> */}
<Link
to={
orderDetails?.paymentMode === "cod"
? `/inStoreCashOrders/${status}`
: `/InStoreQRCodeOrders/${status}`
}
>
<Button
variant="contained"
color="secondary"
style={{
fontWeight: "bold",
marginBottom: "1rem",
textTransform: "capitalize",
}}
>
Back
</Button>
</Link>
</div>
</div>
</div>
</div>
{loading ? (
<div className="d-flex justify-content-center">
<div className="spinner-border text-info" role="status">
<span className="visually-hidden">Loading...</span>
</div>
</div>
) : (
<div className="row">
<div className="col-lg-7 mt-3">
{orderDetails?.shipingInfo !== null && (
<div className="card">
<div className="card-body">
{/* <div className="mt-1">
<label className="fw-bold">Select Product:</label>
<div className="d-flex">
<select
className="form-control me-2"
// onChange={handleGetSingleProduct}
// value={productData?._id}
ref={getValue}
>
<option value="" >-----</option>
{productData && productData.map((item, index) =>
<option key={index} value={item?._id}>{item?.name}</option>
)}
</select>
<button className='btn-sm btn-primary' onClick={(e) => handleGetSingleProduct(e)}>Add</button>
</div>
</div> */}
<div className="mt-2">
<h6 className="fw-bold">
Products : {orderDetails?.orderItems?.length}
</h6>
<hr />
{orderDetails?.orderItems &&
orderDetails?.orderItems.map(
(productDetails, i) => (
<div className="my-2">
<div
className="row"
style={{ fontSize: "14px" }}
>
<div className="col-sm-4">
<img
src={productDetails?.image[0]?.url}
alt={productDetails?.name}
style={{
width: "100%",
objectFit: "contain",
maxHeight: "150px",
}}
/>
</div>
<div className="col-sm-8">
<h6 className="m-0 ms-2">
{productDetails?.name}
</h6>
<div className="row">
<div className="col-sm-6">
<div
className="d-flex justify-content-center mt-3 me-3 "
style={{
width: "6rem",
}}
>
<span
className="px-2 mt-1"
style={{}}
>
{" "}
Quantity:{" "}
{productDetails?.quantity}
</span>
</div>
<p className="m-0 mt-3 ms-3">
<stong> Subtotal:</stong> ₹
{productDetails?.product_Subtotal}
</p>
<p className="m-0 mt-3 ms-3">
<stong> Variant:</stong>{" "}
{productDetails?.variant_Name}
</p>
</div>
<div className="col-sm-6">
<p className="m-0 mt-3">
<stong> Price:</stong> ₹
{productDetails?.price}
</p>
<p className="m-0 mt-3">
<stong> GST:</stong> ₹
{productDetails?.gst_amount}
</p>
</div>
</div>
</div>
</div>
<hr />
</div>
)
)}
<div className="m-0 contents-center mt-3 mb-2">
<small className="mb-4">Shipping Charge: </small> ₹
{orderDetails?.shipping_charge}
<br />
<span className="mt-2"> Total Order Value: </span> ₹
{orderDetails?.total_amount}
</div>
</div>
</div>
</div>
)}
<div className="card my-1">
<div className="card-body">
<label className="fw-bold">Status Timeline :</label>
<table
className="table table-info table-sm m-0"
style={{
borderRadius: "8px",
borderCollapse: "collapse",
overflow: "hidden",
}}
>
<tbody>
<tr className="text-center">
<th scope="row">Order Placed On</th>
<td> : </td>
<td>
{orderDetails?.createdAt
? new Date(
orderDetails?.createdAt
).toLocaleString("en-IN", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
})
: new Date(
productData?.placed_on
).toLocaleString("en-IN", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
})}
</td>
</tr>
<tr className="text-center">
<th scope="row" className="text-warning">
Processing Started
</th>
<td className="text-warning"> : </td>
<td className="text-warning">
{orderDetails?.status_timeline?.processing
? new Date(
orderDetails?.status_timeline?.processing
).toLocaleString("en-IN", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
})
: "-"}
</td>
</tr>
<tr className="text-center">
<th scope="row" className="text-primary">
Dispatched On
</th>
<td className="text-primary"> : </td>
<td className="text-primary">
{orderDetails?.status_timeline?.dispatched
? new Date(
orderDetails?.status_timeline?.dispatched
).toLocaleString("en-IN", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
})
: "-"}
</td>
</tr>
<tr className="text-center">
<th scope="row" className="text-success">
Delivered On
</th>
<td className="text-success"> : </td>
<td className="text-success">
{orderDetails?.status_timeline?.delivered
? new Date(
orderDetails?.status_timeline?.delivered
).toLocaleString("en-IN", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
})
: "-"}
</td>
</tr>
{orderDetails?.status_timeline?.cancelled && (
<tr className="text-center">
<th scope="row" className="text-danger">
Cancelled On
</th>
<td className="text-danger"> : </td>
<td className="text-danger">
{orderDetails?.status_timeline?.cancelled
? new Date(
orderDetails?.status_timeline?.cancelled
).toLocaleString("en-IN", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
})
: "-"}
</td>
</tr>
)}
{/* <tr className="text-center">
<th scope="row">Returned On</th>
<td> : </td>
<td>
{orderDetails?.status_timeline?.returned
? new Date(
orderDetails?.status_timeline?.returned
).toLocaleString("en-IN", {
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
})
: "-"}
</td>
</tr> */}
</tbody>
</table>
</div>
</div>
</div>
<div className="col-lg-5 mt-3">
<div className="card">
<div className="card-body">
<div className="mt-1">
{orderDetails?.orderStatus !== "cancelled" ? (
<h5 className="text-success">
Order Status: {orderDetails?.orderStatus}
</h5>
) : (
<>
<h5 className="text-danger">
Order Status: {orderDetails?.orderStatus}
</h5>
<p className="text-danger">
{" "}
Order Cancelled Reason:{" "}
{orderDetails?.order_Cancelled_Reason}
</p>
</>
)}
{/* order status change */}{" "}
<div className="mb-2">
{" "}
{status !== "cancelled" &&
status !== "returned" &&
status !== "delivered" && (
<div className="mt-1">
<label className="fw-bold">
Change Status :
</label>
<div className="row">
<div className="col-lg-9">
<select
className="form-control"
onChange={handleChange}
value={orderStatus}
>
{orderDetails?.orderStatus === "new" && (
<>
<option value="">New</option>
<option value="processing">
Processing
</option>
<option value="cancelled">
Cancelled
</option>
</>
)}
{orderDetails?.orderStatus ===
"processing" && (
<>
<option value="">Processing</option>
<option value="dispatched">
Dispatch
</option>
</>
)}
{orderDetails?.orderStatus ===
"dispatched" && (
<>
<option value="">Dispatch</option>
<option value="delivered">
Delivered
</option>
</>
)}
</select>
</div>
{orderStatus && (
<div className="col-lg-3">
<button
className="btn btn-primary"
onClick={(e) => handlechangestatus(e)}
>
Update
</button>
</div>
)}
</div>
</div>
)}
</div>
{/* */}
<label className="fw-bold mt-1">Shipping Info :</label>
{/* <div className="d-flex">
<select
className="form-control me-2"
onChange={handleChange}
value={orderStatus}
ref={getFranchiseeID}
disabled={shipingInfo !== null}
>
<option value="" disabled></option>
{allFranchisee && allFranchisee.map((item, index) =>
<option key={index} value={item?._id}>{item?.name}</option>
)}
</select>
<button className='btn-sm btn-primary' onClick={(e) => handleGetSingleFrenchisee(e)} >Add</button>
</div> */}
</div>
{orderDetails?.shipingInfo !== null && (
<div className="">
<div className="row" style={{ fontSize: "14px" }}>
{/* <div className="col-sm-4">
<img
src={
orderDetails?.shippingInfo?.Franchisee?.banner
?.url
}
alt={orderDetails?.shippingInfo?.name}
// width='100%'
style={{
width: "100%",
objectFit: "contain",
maxHeight: "100px",
}}
/>
</div> */}
<div className="col-sm-12">
<h6 className="m-0 ms-2">
Name: {orderDetails?.shippingInfo?.first_Name}{" "}
{orderDetails?.shippingInfo?.last_Name}
</h6>
<p className="m-0 ms-2 mt-1">
Contact No. :{" "}
{orderDetails?.shippingInfo?.phone_Number}
</p>
<parent className="m-0 ms-2 mt-3">
street. : {orderDetails?.shippingInfo?.street}
</parent>
<p className="m-0 ms-2 mt-1">
City : {orderDetails?.shippingInfo?.city}
</p>
<p className="m-0 ms-2 mt-1">
State : {orderDetails?.shippingInfo?.state}
</p>
<p className="m-0 ms-2 mt-1">
country : {orderDetails?.shippingInfo?.country}
</p>
<p className="m-0 ms-2 mt-1">
Postal Code. :{" "}
{orderDetails?.shippingInfo?.postalCode}
</p>
</div>
</div>
<hr />
</div>
)}
<div className="mt-3">
<label>
<span className="fw-bold">Payment Status : </span>
{orderDetails?.isPaid === false ? (
<span className="fw-bold text-danger">
Not Paid
</span>
) : (
<span className="fw-bold text-success">Paid</span>
)}
</label>
</div>
<div className="">
<label>
<span className="fw-bold">Payment Mode : </span>
{orderDetails?.paymentMode === "online" ? (
<span className="fw-bold text-success">ONLINE</span>
) : (
<span className="fw-bold text-primary">
CASH ON DELIVERY
</span>
)}
</label>
</div>
<div className="">
<label>
<span className="fw-bold"> Paid At: </span>
{orderDetails?.paidAt
? new Date(orderDetails?.paidAt).toLocaleString(
"en-IN",
{
month: "short",
day: "numeric",
year: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: true,
}
)
: "----"}
</label>
</div>
<div className="">
<label>
<span className="fw-bold"> Order Created By: </span>
{orderDetails?.user?.name}
</label>
</div>
<div className="mt-1">
<label>
<span className="fw-bold">
Razorpay Payment ID :{" "}
</span>
{orderDetails?.razorpay_payment_id
? orderDetails?.razorpay_payment_id
: "----"}
</label>
</div>
<div className="">
<label>
<span className="fw-bold">Razorpay Order ID : </span>
{orderDetails?.razorpay_order_id
? orderDetails?.razorpay_order_id
: "----"}
</label>
</div>
</div>
</div>
</div>
</div>
)}
</div>
</div>
</div>
<div style={{ display: "none" }}>
{/* <PrintOrderDetails productData={productData} ref={printOrderRef} /> */}
</div>
</>
);
}
export default POSViewOrders;

2
src/views/orders/PrintOrderDetails.js
View File

@ -178,7 +178,7 @@ const PrintOrderDetails = React.forwardRef(({ orderData }, ref) => {
<th>Qnty</th>
<th>Tax Type</th>
<th>Gross Amount</th>
<th>VAT Rate</th>
<th>GST Rate</th>
<th>Net Amount</th>
</tr>
</thead>